/* Tenshen Task list — editorial ledger column styles.
   Lifted from docs/mocks/task-list.html. Consumes design tokens
   from tenshen-shell.css. Scoped under `.ledger` so generic class
   names (crow, cbox, achip, pri-pill, actions-rail, etc.) don't
   collide with `.task`-scoped rules in tenshen-task.css or other
   shell surfaces. */

/* Font + danger tokens — lifted from the mock. Kept local to the
   editorial column (same pattern tenshen-task.css uses for fonts);
   promote to tenshen-shell.css if adopted broadly. */
.ledger {
    --f-sans:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --f-serif: "Source Serif 4", "Source Serif Pro", Georgia, serif;
    --t-danger: #a63b2b;
}

/* --------------------------------------------------------------------
   Editorial container — wider than task-detail (list surface,
   not reading surface) but same typographic motifs.
   ------------------------------------------------------------------ */
.ledger {
    max-width: 1040px;
    margin: 0 auto;
    padding: 44px 56px 80px;
}

/* --------------------------------------------------------------------
   Head strip — crumb + open-count
   ------------------------------------------------------------------ */
.ledger .ledger-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--t-rule);
    margin-bottom: 32px;
    gap: 12px;
    flex-wrap: wrap;
}
.ledger .ledger-crumb {
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--t-mute);
    font-weight: 600;
}
.ledger .ledger-crumb a {
    color: var(--t-mute);
    text-decoration: none;
    border-bottom: 1px dotted var(--t-faint);
}
.ledger .ledger-crumb a:hover { color: var(--t-ink); border-bottom-style: solid; }
.ledger .ledger-crumb .sep { margin: 0 10px; color: var(--t-faint); letter-spacing: 0; }
.ledger .ledger-headmeta {
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--t-faint);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* --------------------------------------------------------------------
   Title — editorial voice
   ------------------------------------------------------------------ */
.ledger .ledger-title {
    font-family: var(--f-sans);
    font-size: 40px;
    font-weight: 550;
    letter-spacing: -0.024em;
    line-height: 1.08;
    margin: 0 0 14px;
    color: var(--t-ink);
}

/* --------------------------------------------------------------------
   Serif synopsis — the briefing motif applied to the whole ledger
   ------------------------------------------------------------------ */
.ledger .ledger-synopsis {
    font-family: var(--f-serif);
    font-size: 19px;
    line-height: 1.55;
    color: var(--t-ink);
    margin: 0 0 14px;
    text-wrap: pretty;
    max-width: 64ch;
}
.ledger .ledger-synopsis strong { font-weight: 600; }
.ledger .ledger-synopsis em { font-style: italic; color: var(--t-mute); }
.ledger .ledger-synopsis .fig {
    font-family: var(--f-sans);
    font-feature-settings: "tnum" 1, "lnum" 1;
    font-weight: 600;
}
.ledger .ledger-synopsis .fig.overdue { color: var(--t-danger); }
.ledger .ledger-synopsis a {
    color: var(--t-ink);
    text-decoration: none;
    border-bottom: 1px dotted var(--t-faint);
}
.ledger .ledger-synopsis a:hover { border-bottom-style: solid; }

.ledger .ledger-updated {
    font-size: 11px;
    color: var(--t-faint);
    margin-bottom: 22px;
}
.ledger .ledger-updated .dot { color: var(--t-accent); }

/* --------------------------------------------------------------------
   Auto-roll inline notice — accent left-border serif italic
   (reserved; not rendered in v1)
   ------------------------------------------------------------------ */
.ledger .handled-note {
    font-family: var(--f-serif);
    font-size: 14px;
    color: var(--t-mute);
    font-style: italic;
    padding: 12px 0 12px 16px;
    border-left: 2px solid var(--t-accent);
    margin: 0 0 28px;
    line-height: 1.55;
}
.ledger .handled-note strong { color: var(--t-ink); font-weight: 600; font-style: normal; }
.ledger .handled-note a {
    color: var(--t-accent);
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
    font-style: normal;
    font-weight: 500;
}
.ledger .handled-note a:hover { border-bottom-style: solid; }

/* --------------------------------------------------------------------
   View tabs — tiny eyebrow-style row below the synopsis
   ------------------------------------------------------------------ */
.ledger .ledger-modes {
    display: flex;
    align-items: center;
    gap: 22px;
    padding-bottom: 10px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--t-rule);
}
.ledger .ledger-mode {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--t-faint);
    font-weight: 600;
    text-decoration: none;
    padding: 6px 0;
    position: relative;
    cursor: pointer;
}
.ledger .ledger-mode:hover { color: var(--t-mute); }
.ledger .ledger-mode.is-active {
    color: var(--t-ink);
}
.ledger .ledger-mode.is-active::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    bottom: -11px;
    height: 2px;
    background: var(--t-ink);
}
.ledger .ledger-mode .num {
    font-weight: 500;
    color: var(--t-faint);
    margin-left: 4px;
}
.ledger .ledger-mode.is-active .num { color: var(--t-mute); }

/* --------------------------------------------------------------------
   Filter bar — chips with live counts
   ------------------------------------------------------------------ */
.ledger .ledger-filters {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.ledger .fchip {
    font-family: var(--f-sans);
    font-size: 11px;
    padding: 5px 10px;
    border: 1px solid var(--t-rule);
    background: var(--t-card);
    color: var(--t-ink);
    border-radius: 2px;
    font-weight: 500;
    cursor: pointer;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}
.ledger .fchip:hover { border-color: var(--t-ink); }
.ledger .fchip.is-active {
    background: var(--t-ink);
    color: var(--t-on-ink);
    border-color: var(--t-ink);
}
.ledger .fchip .cnum {
    font-size: 10px;
    color: var(--t-faint);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.ledger .fchip.is-active .cnum { color: rgba(255,255,255,0.62); }
.ledger .fchip-suggest {
    font-size: 11px;
    color: var(--t-accent);
    border: 1px dashed var(--t-accent);
    background: var(--t-accent-soft);
    padding: 5px 10px;
    border-radius: 2px;
    cursor: pointer;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.2;
}
.ledger .fchip-suggest:hover { background: rgba(181,107,63,0.2); }
.ledger .fchip-sep {
    width: 1px;
    height: 14px;
    background: var(--t-rule);
    margin: 0 2px;
}
.ledger .fchip-clear {
    font-size: 11px;
    color: var(--t-faint);
    background: transparent;
    border: 0;
    cursor: pointer;
    margin-left: auto;
    padding: 5px 0;
}
.ledger .fchip-clear:hover { color: var(--t-ink); }

/* --------------------------------------------------------------------
   Search — inline underlined, no box-shadow circus
   ------------------------------------------------------------------ */
.ledger .ledger-search {
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--t-rule);
    padding: 8px 4px 8px 2px;
    margin-bottom: 6px;
}
.ledger .ledger-search svg {
    width: 14px; height: 14px;
    stroke: var(--t-faint);
    fill: none;
    stroke-width: 1.4;
    flex-shrink: 0;
}
.ledger .ledger-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: transparent none;
    box-shadow: none;
    color: var(--t-ink);
    font-family: var(--f-sans);
    font-size: 14px;
    line-height: 1.3;
    padding: 2px 0;
    padding-inline-start: 0;
    margin: 0;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}
.ledger .ledger-search input:focus,
.ledger .ledger-search input:focus-visible,
.ledger .ledger-search input:active {
    background: transparent none !important;
    box-shadow: none !important;
    border-color: transparent !important;
    outline: none !important;
}
.ledger .ledger-search input::-webkit-search-cancel-button,
.ledger .ledger-search input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}
.ledger .ledger-search input::placeholder { color: var(--t-faint); }
.ledger .ledger-search .live {
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--t-faint);
    font-weight: 600;
}

/* --------------------------------------------------------------------
   Cluster header — borrows the section-head motif
   ------------------------------------------------------------------ */
.ledger .cluster {
    margin-top: 28px;
}
.ledger .cluster-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}
.ledger .cluster-head .eyebrow { flex-shrink: 0; }
.ledger .cluster-head .cluster-lede {
    font-family: var(--f-serif);
    font-size: 13px;
    font-style: italic;
    color: var(--t-mute);
    flex-shrink: 0;
    margin-left: 4px;
}
.ledger .cluster-head .cluster-lede strong { color: var(--t-ink); font-weight: 600; font-style: normal; }
.ledger .cluster-head .rule {
    flex: 1;
    height: 1px;
    background: var(--t-rule);
    margin: 0 4px;
}
.ledger .cluster-head .count {
    font-size: 10px;
    color: var(--t-faint);
    font-weight: 500;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
}
.ledger .cluster.is-overdue .eyebrow { color: var(--t-danger); }
.ledger .cluster.is-today .eyebrow { color: var(--t-accent); }
.ledger .cluster.is-collapsed .clist { display: none; }
.ledger .cluster.is-collapsed .cluster-toggle::after { content: "▸"; }
.ledger .cluster-toggle {
    background: transparent;
    border: 0;
    font-family: var(--f-sans);
    font-size: 10px;
    color: var(--t-faint);
    cursor: pointer;
    padding: 0 2px;
    letter-spacing: 0.08em;
}
.ledger .cluster-toggle::after { content: "▾"; font-size: 9px; }
.ledger .cluster-toggle:hover { color: var(--t-ink); }

/* --------------------------------------------------------------------
   Ledger rows — borrow .crow checklist pattern, extended
   ------------------------------------------------------------------ */
.ledger .clist { display: flex; flex-direction: column; }
.ledger .crow {
    padding: 14px 6px;
    display: flex;
    align-items: center;
    gap: 14px;
    border-bottom: 1px solid var(--t-rule);
    position: relative;
    min-height: 54px;
    transition: background 120ms ease;
    cursor: pointer;
}
.ledger .crow:last-child { border-bottom: 0; }
.ledger .crow:hover { background: var(--t-hover-bg); }

/* Left: checkbox */
.ledger .cbox {
    width: 14px; height: 14px;
    border: 1.5px solid var(--t-rule);
    border-radius: 2px;
    flex-shrink: 0;
    cursor: pointer;
    background: transparent;
    position: relative;
    display: inline-block;
}
.ledger .crow.is-pri-1 .cbox { border-color: var(--t-accent); }
.ledger .crow.is-progress .cbox { border-color: var(--t-accent); }
.ledger .crow.is-progress .cbox::after {
    content: "";
    position: absolute;
    inset: 2px;
    background: var(--t-accent);
    border-radius: 1px;
    opacity: 0.9;
}
.ledger .crow.is-done .cbox {
    background: var(--t-ink);
    border-color: var(--t-ink);
}
.ledger .crow.is-done .cbox::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><polyline points='1.5,5 4,7.5 8.5,2.5' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / 10px;
}

/* Priority tick — thin colored marker between checkbox and body,
   so overdue/high-priority rows get visual weight without a noisy
   pill next to the title. */
.ledger .ctick {
    width: 2px;
    align-self: stretch;
    border-radius: 2px;
    flex-shrink: 0;
    background: transparent;
}
.ledger .crow.is-pri-1 .ctick { background: var(--t-accent); }
.ledger .crow.is-pri-2 .ctick { background: var(--t-accent-soft); }
.ledger .crow.is-overdue .ctick { background: var(--t-danger); }

/* Body */
.ledger .cbody { flex: 1; min-width: 0; }
.ledger .ctitle {
    font-size: 14px;
    font-weight: 550;
    color: var(--t-ink);
    line-height: 1.35;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
}
.ledger .ctitle .proj {
    font-family: var(--f-sans);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--t-mute);
    font-weight: 600;
    border-bottom: 1px dotted var(--t-faint);
    padding-bottom: 1px;
    cursor: pointer;
}
.ledger .ctitle .proj:hover { color: var(--t-ink); border-bottom-style: solid; }
.ledger .ctitle .proj::before {
    content: "▣";
    color: var(--t-accent);
    margin-right: 4px;
    font-size: 10px;
}
.ledger .ctitle .title-text { color: var(--t-ink); }
.ledger .crow.is-done .ctitle .title-text { color: var(--t-mute); text-decoration: line-through; }
.ledger .crow.is-suggested .ctitle .title-text {
    font-family: var(--f-serif);
    font-style: italic;
    font-weight: 500;
}

.ledger .csub {
    font-size: 11px;
    color: var(--t-mute);
    margin-top: 4px;
    line-height: 1.4;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.ledger .csub .dot { color: var(--t-faint); }
.ledger .csub .snippet {
    color: var(--t-mute);
    font-family: var(--f-serif);
    font-size: 12.5px;
    font-style: italic;
    max-width: 52ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ledger .csub .stake {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--t-ink);
    text-decoration: none;
    border-bottom: 1px dotted var(--t-faint);
}
.ledger .csub .stake:hover { border-bottom-style: solid; }
.ledger .csub .stake::before {
    content: "@";
    color: var(--t-accent);
    font-size: 0.82em;
    margin-right: 1px;
}
.ledger .csub .touched { color: var(--t-faint); font-size: 10.5px; }

/* Right meta: due + priority */
.ledger .cmeta-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.ledger .cmeta-right .due {
    font-family: var(--f-sans);
    font-size: 11px;
    color: var(--t-mute);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.ledger .cmeta-right .due strong { color: var(--t-ink); font-weight: 600; }
.ledger .cmeta-right .due.is-today { color: var(--t-accent); font-weight: 600; }
.ledger .cmeta-right .due.is-overdue { color: var(--t-danger); font-weight: 600; }

/* Priority pill — palette kept identical to tenshen-task.css so
   detail + list render priority the same way. Duplicated on purpose;
   each file is scoped to its own page. */
.ledger .pri-pill {
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 2px;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.ledger .pri-pill.p1 { background: var(--t-accent); color: #fff; }
.ledger .pri-pill.p2 { background: var(--t-accent-soft); color: var(--t-ink); }
.ledger .pri-pill.p3 { background: var(--t-soft-bg); color: var(--t-mute); }
.ledger .pri-pill.p4 { background: var(--t-soft-bg); color: var(--t-faint); }

/* Hover action rail — swaps out the right-meta on hover */
.ledger .actions-rail {
    display: none;
    gap: 6px;
    align-items: center;
}
.ledger .crow:hover .actions-rail { display: flex; }
.ledger .crow:hover .cmeta-right .due,
.ledger .crow:hover .cmeta-right .pri-pill { display: none; }
.ledger .achip {
    font-family: var(--f-sans);
    font-size: 11px;
    padding: 5px 10px;
    border: 1px solid var(--t-rule);
    background: var(--t-card);
    color: var(--t-ink);
    border-radius: 2px;
    font-weight: 500;
    cursor: pointer;
    line-height: 1.2;
}
.ledger .achip:hover { border-color: var(--t-ink); }
.ledger .achip.is-primary {
    background: var(--t-ink);
    color: var(--t-on-ink);
    border-color: var(--t-ink);
}
.ledger .achip.is-accent {
    background: var(--t-accent);
    color: #fff;
    border-color: var(--t-accent);
}
.ledger .achip.is-ghost {
    padding: 5px 8px;
    color: var(--t-mute);
    border-style: dashed;
}

/* --------------------------------------------------------------------
   Cluster footer — quick "+ add task" inline row
   ------------------------------------------------------------------ */
.ledger .cluster-add {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 6px;
    border-top: 1px solid var(--t-rule);
    color: var(--t-faint);
    font-size: 12.5px;
    cursor: text;
}
.ledger .cluster-add input {
    flex: 1;
    border: 0;
    background: transparent;
    font-family: var(--f-sans);
    font-size: 13px;
    color: var(--t-ink);
    outline: none;
    padding: 2px 0;
}
.ledger .cluster-add input::placeholder { color: var(--t-faint); }
.ledger .cluster-add .plus { width: 14px; text-align: center; font-size: 16px; color: var(--t-faint); }
.ledger .cluster-add kbd {
    font-size: 10px;
    padding: 2px 6px;
    border: 1px solid var(--t-rule);
    color: var(--t-mute);
    background: var(--t-rail-soft);
    border-radius: 2px;
    font-family: var(--f-sans);
}

/* --------------------------------------------------------------------
   Empty cluster
   ------------------------------------------------------------------ */
.ledger .cluster-empty {
    padding: 18px 6px 22px;
    font-family: var(--f-serif);
    font-size: 13px;
    font-style: italic;
    color: var(--t-faint);
    line-height: 1.5;
}

/* --------------------------------------------------------------------
   Signoff
   ------------------------------------------------------------------ */
.ledger .ledger-signoff {
    margin-top: 56px;
    padding-top: 18px;
    border-top: 1px solid var(--t-rule);
    font-size: 12px;
    color: var(--t-faint);
    font-family: var(--f-serif);
    font-style: italic;
}

/* --------------------------------------------------------------------
   Responsive — ledger-only rules. Shell/sidebar/dock rules from the
   mock's media queries live in tenshen-shell.css, not here.
   ------------------------------------------------------------------ */
@media (max-width: 1024px) {
    .ledger { padding: 28px 24px 60px; }
    .ledger .ledger-title { font-size: 32px; }
    .ledger .ledger-synopsis { font-size: 17px; }
}
@media (max-width: 720px) {
    .ledger { padding: 22px 16px 40px; }
    .ledger .ledger-title { font-size: 26px; }
    .ledger .ledger-synopsis { font-size: 16px; }
    .ledger .ledger-modes { gap: 14px; overflow-x: auto; white-space: nowrap; }
    .ledger .csub .snippet { max-width: 28ch; }
    .ledger .cmeta-right .due { display: none; }
    .ledger .crow { gap: 10px; padding: 12px 4px; }
}