/* Claims Desk — layout only. Every colour, radius, shadow and step comes from
   the Reckon tokens; nothing here re-declares a design decision. Tints are the
   documented 4–8% washes of a semantic hue, never a new colour.

   Chosen once for the whole product:
     Density        measured operational tables (44px rows, 16px cell gutters)
                    against generous decision surfaces (32px padding, 46rem
                    measure). Prose earns its place: a note states the
                    situation, never how the component works.
     Separation     the page plane is --sidebar, objects are --card, regions are
                    divided by hairlines and by full-bleed bands rather than by
                    a grid of equal cards.
     Active state   foreground token + a persistent 2px underline.
     Signature      the time bar (a burn-down track, always the same geometry)
                    and the ledger ladder (one track definition, a hard cap rule).
     Breakpoints    1280 full bar · 1024 search collapses · 768 destinations
                    collapse into a menu · below that, 44px targets. */

.cd-shell{--gutter-page:var(--space-6);--gutter-card:var(--space-5);display:flex;min-height:100vh;flex-direction:column;background:var(--sidebar);color:var(--foreground)}

/* ── Top-nav shell. The bar is the only navigation owner. ─────────────── */
.cd-bar{position:sticky;top:0;z-index:40;display:flex;height:var(--header-height);align-items:center;gap:var(--space-4);padding-inline:var(--gutter-page);border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--background) 82%,transparent);backdrop-filter:blur(4px)}
.cd-brand{display:flex;min-width:0;align-items:center;gap:var(--space-2);border:0;background:transparent;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left}
.cd-brand__mark{display:block;width:22px;height:22px;flex:none}
.cd-brand__name{font-family:var(--font-heading);font-size:var(--text-base);font-weight:var(--font-weight-semibold);line-height:1.2;letter-spacing:var(--tracking-tight);white-space:nowrap}
/* The carrier owns the mark, the desk owns the destinations — a short hairline
   and a wider gap keep the two from reading as one run of labels. The nav sits
   after the brand in full mode and before it as a menu on narrow widths, so the
   rule goes on whichever side the nav is actually on. */
.cd-brand:has(+ .cd-dests)::after{content:"";width:1px;height:20px;margin-inline-start:var(--space-2);background:var(--border)}
.cd-bar>.cd-brand:not(:first-child)::before{content:"";width:1px;height:20px;margin-inline-end:var(--space-2);background:var(--border)}
.cd-brand+.cd-dests{margin-inline-start:0}
.cd-dests{display:flex;align-items:stretch;gap:var(--space-1);height:100%}
.cd-dest{position:relative;display:flex;align-items:center;gap:var(--space-2);border:0;background:transparent;padding-inline:var(--space-3);font:inherit;font-size:var(--text-sm);color:var(--muted-foreground);cursor:pointer;white-space:nowrap}
.cd-dest:hover{color:var(--foreground)}
.cd-dest::after{content:"";position:absolute;inset-inline:var(--space-2);bottom:0;height:2px;border-radius:2px 2px 0 0;background:transparent}
.cd-dest[aria-current=page]{color:var(--foreground);font-weight:var(--font-weight-medium)}
.cd-dest[aria-current=page]::after{background:var(--foreground)}
.cd-dest__count{font-variant-numeric:tabular-nums;font-size:var(--text-xs);color:var(--muted-foreground)}
.cd-dest[aria-current=page] .cd-dest__count{color:var(--foreground)}
.cd-bar__end{margin-inline-start:auto;display:flex;align-items:center;gap:var(--space-2)}
.cd-search{width:min(22rem,32vw);min-width:0}
.cd-search input{cursor:pointer}
.cd-utility{position:relative;display:inline-flex}
.cd-badge-dot{pointer-events:none;position:absolute;inset-inline-end:-2px;top:-2px;display:flex;height:16px;min-width:16px;align-items:center;justify-content:center;border-radius:999px;background:var(--destructive);padding-inline:4px;font-size:10px;font-weight:var(--font-weight-medium);color:var(--color-white);box-shadow:0 0 0 2px var(--background)}
.cd-account{display:flex;align-items:center;gap:var(--space-2);border:0;border-radius:var(--radius-lg);background:transparent;padding:var(--space-1);font:inherit;color:inherit;cursor:pointer}
.cd-account:hover{background:var(--accent)}
.cd-account__text{display:none;flex-direction:column;text-align:left}
.cd-account__name{font-size:var(--text-sm);font-weight:var(--font-weight-medium);line-height:1.2}
.cd-account__role{font-size:var(--text-xs);color:var(--muted-foreground);white-space:nowrap}
.cd-shell[data-mode=full] .cd-account__text{display:flex}
.cd-notify{padding:var(--space-2)}
.cd-notify__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:var(--space-1) var(--space-2) var(--space-2)}
.cd-notify__list{display:flex;flex-direction:column;gap:2px}
.cd-notify__item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px var(--space-3);border:0;border-radius:var(--radius-lg);background:transparent;padding:var(--space-2);text-align:left;font:inherit;color:inherit;cursor:pointer}
.cd-notify__item:hover{background:var(--accent)}
.cd-notify__title{font-size:var(--text-sm);font-weight:var(--font-weight-medium)}
.cd-notify__body{grid-column:1;font-size:var(--text-xs);color:var(--muted-foreground)}
.cd-notify__time{grid-row:1;grid-column:2;font-size:var(--text-xs);color:var(--muted-foreground)}
/* An unread item in the panel is weighted, never coloured — the count in the
   bar carries the alarm, the list only carries which ones are new. */
.cd-notify__item .cd-notify__title{color:var(--muted-foreground)}
.cd-notify__item.is-unread .cd-notify__title{font-weight:var(--font-weight-semibold);color:var(--foreground)}
.cd-notify__foot{display:flex;justify-content:flex-start;border-top:1px solid var(--border);margin-top:var(--space-2);padding:var(--space-2-5) var(--space-2) var(--space-1)}

/* ── Page frame ──────────────────────────────────────────────────────── */
.cd-main{min-width:0;flex:1}
.cd-page{display:flex;max-width:104rem;flex-direction:column;gap:var(--space-8);margin-inline:auto;padding:var(--space-8) var(--gutter-page)}
.cd-page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-4)}
.cd-page-head__lead{display:flex;min-width:0;flex:1;align-items:flex-start;gap:var(--space-4)}
.cd-page-head__text{display:flex;min-width:0;flex-direction:column;gap:var(--space-1)}
.cd-title{margin:0;font-family:var(--font-heading);font-size:var(--text-3xl);font-weight:var(--font-weight-semibold);line-height:1.05;letter-spacing:var(--tracking-tight)}
/* A record title that is also a link to its parent record: the type is the
   title's, the affordance is the underline on hover, nothing else changes. */
.cd-title-link{border:0;background:none;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.cd-title-link:hover{text-decoration:underline}
.cd-page-head__actions{display:flex;align-items:center;gap:var(--space-2)}
.cd-lede{margin:0;max-width:31rem;font-size:var(--text-sm);color:var(--muted-foreground);text-wrap:pretty}
/* A band bleeds along the page's horizontal axis and re-adds the gutter itself. */
.cd-bleed{margin-inline:calc(var(--gutter-page) * -1);border-block:1px solid var(--border);background:var(--card);padding:var(--space-8) var(--gutter-page)}
.cd-section{display:flex;min-width:0;flex-direction:column;gap:var(--space-5)}
.cd-section__head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:var(--space-2) var(--space-4)}
/* A note in a section head is a sentence, not a meta chip: it takes its own
   line under the heading rather than being pushed to the far edge. */
.cd-section__head>.cd-note{grid-column:1/-1;max-width:46rem}
.cd-h2{margin:0;font-family:var(--font-heading);font-size:var(--text-lg);font-weight:var(--font-weight-semibold);letter-spacing:var(--tracking-tight)}
.cd-h3{margin:0;font-size:var(--text-sm);font-weight:var(--font-weight-medium)}
.cd-note{margin:0;font-size:var(--text-xs);color:var(--muted-foreground);text-wrap:pretty}
.cd-split{display:grid;align-items:start;gap:var(--space-6);grid-template-columns:minmax(0,1.85fr) minmax(0,1fr)}
.cd-split--band{grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:var(--space-8)}
.cd-split--even{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
.cd-col{display:flex;min-width:0;flex-direction:column;gap:var(--space-6)}
.cd-col--tight{gap:var(--space-4)}

/* ── Figures ─────────────────────────────────────────────────────────── */
.cd-figure{font-family:var(--font-heading);font-size:var(--text-3xl);font-weight:var(--font-weight-semibold);line-height:1.05;letter-spacing:var(--tracking-tight);font-variant-numeric:tabular-nums}
.cd-figure--xl{font-size:var(--text-5xl)}
.cd-figure__label{font-size:var(--text-sm);color:var(--muted-foreground)}
.cd-figure__note{max-width:26rem;font-size:var(--text-xs);color:var(--muted-foreground);text-wrap:pretty}
/* Anchor figures sit on one floor: the smaller blocks align to the bottom of the
   row so their labels and notes read as one band beside the headline figure. */
.cd-figures{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--space-6) var(--space-12)}
.cd-figures>div{min-width:9rem}
.cd-mono{font-family:var(--font-mono);font-size:var(--text-xs)}
.cd-amount{font-variant-numeric:tabular-nums;font-weight:var(--font-weight-medium)}
.cd-muted{color:var(--muted-foreground)}
.cd-num{text-align:right}
.cd-actions{text-align:right}
/* Header alignment has to be re-stated at `.o-table th` strength: the kit's own
   `text-align:left` on th loads after this file and would otherwise leave the
   money and action headers hanging left of their right-aligned cells. */
.o-table.cd-tbl th.cd-num,.o-table.cd-tbl th.cd-actions{text-align:right}
.cd-actions__row{display:inline-flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--space-2)}

/* ── The time bar: the same geometry everywhere it appears. ───────────── */
.cd-tb{position:relative;height:6px;overflow:hidden;border-radius:999px;background:var(--muted)}
.cd-tb__fill{position:absolute;inset-block:0;inset-inline-start:0;background:var(--muted-foreground)}
.cd-tb--warning .cd-tb__fill{background:var(--warning)}
.cd-tb--danger .cd-tb__fill{background:var(--destructive)}
.cd-tb--mini{width:5rem;height:4px}
.cd-clock{font-size:var(--text-xs);font-variant-numeric:tabular-nums;color:var(--muted-foreground)}
.cd-clock--warning{color:var(--warning-foreground)}
.cd-clock--danger{color:var(--destructive-foreground)}
.cd-cell-clock{display:flex;flex-direction:column;gap:4px}

/* ── The burn-down band: one bar per open claim, on a 365-day axis. ───── */
.cd-burn{position:relative;height:140px;border-bottom:1px solid var(--border)}
.cd-burn__zone{position:absolute;inset-block:0;top:0}
.cd-burn__zone--danger{background:color-mix(in srgb,var(--destructive) 7%,transparent)}
.cd-burn__zone--warning{background:color-mix(in srgb,var(--warning) 7%,transparent)}
.cd-burn__bar{position:absolute;bottom:0;width:8px;transform:translateX(-50%);border:0;border-radius:var(--radius-xs) var(--radius-xs) 0 0;background:var(--muted-foreground);padding:0;cursor:pointer}
.cd-burn__bar:hover{outline:2px solid var(--ring);outline-offset:1px}
.cd-burn__bar--warning{background:var(--warning)}
.cd-burn__bar--danger{background:var(--destructive)}
.cd-burn__axis{position:relative;height:1.25rem;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--muted-foreground)}
.cd-burn__tick{position:absolute;top:var(--space-1);transform:translateX(-50%);white-space:nowrap}
.cd-burn__tick--first{transform:none}
.cd-burn__tick--last{transform:translateX(-100%)}
.cd-burn__legend{display:flex;flex-wrap:wrap;gap:var(--space-4);font-size:var(--text-xs);color:var(--muted-foreground)}

/* ── The ledger ladder: one track definition for every row. ───────────── */
.cd-lg{--lg-track:minmax(0,1fr) 11rem;display:flex;flex-direction:column}
.cd-lg__row{display:grid;grid-template-columns:var(--lg-track);align-items:baseline;gap:var(--space-4);padding-block:var(--space-4);border-bottom:1px solid var(--border)}
.cd-lg__row:last-child{border-bottom:0}
.cd-lg__label{display:flex;min-width:0;flex-direction:column;gap:2px;font-size:var(--text-sm)}
.cd-lg__hint{font-size:var(--text-xs);color:var(--muted-foreground);text-wrap:pretty}
.cd-lg__value{text-align:right;font-variant-numeric:tabular-nums;font-size:var(--text-sm)}
.cd-lg__row--input{align-items:center}
.cd-lg__row--sub{border-top:1px solid var(--border);font-weight:var(--font-weight-medium)}
/* The cap is a hard rule in the ledger, but never a solid black bar — it reads
   as a dashed line in the ordinary border colour, so it holds in both themes. */
.cd-lg__row--cap{border-top:1px dashed var(--border)}
.cd-lg__row--payable{margin-top:var(--space-4);border:0;border-radius:var(--radius-lg);background:var(--muted);padding:var(--space-4) var(--space-5);align-items:center}
.cd-lg__row--payable .cd-lg__value{font-family:var(--font-heading);font-size:var(--text-3xl);font-weight:var(--font-weight-semibold);letter-spacing:var(--tracking-tight);line-height:1.05}
.cd-lg__input{width:9rem;margin-inline-start:auto}
/* Actions read from the left edge of the card; the note that explains their
   consequence takes its own line above them rather than sharing the row. */
.cd-form-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:var(--space-3)}
.cd-form-foot__note{flex:1 0 100%;max-width:46rem;font-size:var(--text-xs);color:var(--muted-foreground);text-wrap:pretty}

/* Three bars against one cap wall. */
.cd-bars{display:flex;flex-direction:column;gap:var(--space-3)}
.cd-bars__row{display:grid;grid-template-columns:8rem minmax(0,1fr) 7rem;align-items:center;gap:var(--space-3);font-size:var(--text-xs)}
.cd-bars__track{position:relative;height:10px;border-radius:var(--radius-xs);background:var(--muted)}
.cd-bars__fill{position:absolute;inset-block:0;inset-inline-start:0;border-radius:var(--radius-xs);background:var(--muted-foreground)}
.cd-bars__fill--strong{background:var(--foreground)}
.cd-bars__cap{position:absolute;inset-block:-4px;width:2px;background:var(--destructive)}
.cd-bars__value{text-align:right;font-variant-numeric:tabular-nums}

/* ── Definition lists, records, evidence ─────────────────────────────── */
.cd-defs{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:var(--space-3) var(--space-6);margin:0;font-size:var(--text-sm)}
.cd-defs dt{color:var(--muted-foreground)}
.cd-defs dd{margin:0;text-align:right;text-wrap:pretty}
.cd-defs--stack{grid-template-columns:minmax(0,1fr)}
.cd-defs--stack dd{text-align:left}
.cd-record{display:flex;min-width:0;flex-direction:column;align-items:flex-start;gap:var(--space-1-5)}
.cd-record__name{font-weight:var(--font-weight-medium)}
.cd-record__link{border:0;background:none;padding:0;font:inherit;font-weight:var(--font-weight-medium);color:inherit;text-align:left;cursor:pointer}
.cd-record__link:hover{text-decoration:underline}
.cd-record__meta{font-size:var(--text-xs);color:var(--muted-foreground)}
.cd-record__meta code,.cd-code{font-family:var(--font-mono)}
.cd-head-record{display:flex;flex-direction:column;gap:var(--space-4);border-bottom:1px solid var(--border);padding-bottom:var(--space-5)}
.cd-head-record__top{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:var(--space-4)}
/* The crumb and the id/status row are metadata above the record; the name needs
   air beneath them so it reads as the title rather than a third meta line. */
.cd-head-record__top .cd-title{margin-top:var(--space-3)}
.cd-head-record__id{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--muted-foreground)}
.cd-head-record__bar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--space-2) var(--space-4)}
.cd-head-record__ends{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--muted-foreground);grid-column:1}
.cd-head-record__left{grid-row:1/3;grid-column:2;text-align:right}
.cd-facts{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-6);font-size:var(--text-sm);color:var(--muted-foreground)}
.cd-facts strong{color:var(--foreground);font-weight:var(--font-weight-medium)}
.cd-pips{display:flex;gap:3px}
.cd-pip{height:6px;flex:1;border-radius:999px;background:var(--muted)}
.cd-pip--received{background:var(--success)}
.cd-pip--illegible{background:var(--destructive)}
.cd-pip--requested{background:var(--muted-foreground)}
.cd-doc{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:var(--space-2) var(--space-4);border-bottom:1px solid var(--border);padding-block:var(--space-5)}
.cd-doc:last-child{border-bottom:0;padding-bottom:0}
.cd-doc__main{display:flex;min-width:0;flex-direction:column;gap:var(--space-1)}
.cd-doc__title{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);font-size:var(--text-sm);font-weight:var(--font-weight-medium)}
.cd-doc__note{font-size:var(--text-xs);color:var(--muted-foreground);text-wrap:pretty}
.cd-doc__side{display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-2)}

/* ── Decision surface: the generous end of the density range. ─────────── */
.cd-decide{display:flex;max-width:48rem;flex-direction:column;gap:var(--space-5);padding:var(--space-8)}
.cd-options{display:flex;flex-direction:column;gap:var(--space-3)}
.cd-option{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:var(--space-3);border:1px solid var(--input);border-radius:var(--radius-lg);padding:var(--space-4);cursor:pointer;text-align:left;background:transparent;font:inherit;color:inherit}
.cd-option:hover{background:var(--accent)}
.cd-option[aria-checked=true]{border-color:color-mix(in srgb,var(--foreground) 45%,transparent);background:var(--accent)}
.cd-option__body{display:flex;min-width:0;flex-direction:column;gap:2px}
.cd-option__label{font-size:var(--text-sm);font-weight:var(--font-weight-medium)}
.cd-option__hint{font-size:var(--text-xs);color:var(--muted-foreground);text-wrap:pretty}
.cd-option__extra{grid-column:2;display:flex;flex-direction:column;gap:var(--space-3);padding-top:var(--space-2)}
.cd-counter{display:flex;justify-content:space-between;gap:var(--space-4);font-size:var(--text-xs);color:var(--muted-foreground)}
.cd-letter{display:flex;flex-direction:column;gap:var(--space-3);font-size:var(--text-sm);line-height:1.6}
.cd-letter p{margin:0;text-wrap:pretty}
.cd-letter__quote{border-inline-start:1px solid var(--border);padding-inline-start:var(--space-4);color:var(--muted-foreground);white-space:pre-wrap}

/* ── The release pipeline: one segment per stage, width by money. ─────── */
.cd-flow{display:flex;gap:2px}
.cd-flow__seg{display:flex;min-width:7.5rem;flex-direction:column;gap:2px;background:var(--muted);padding:var(--space-3) var(--space-4)}
.cd-flow__amount{font-variant-numeric:tabular-nums;font-size:var(--text-sm);font-weight:var(--font-weight-medium);white-space:nowrap}
.cd-flow__seg:first-child{border-start-start-radius:var(--radius-lg);border-end-start-radius:var(--radius-lg)}
.cd-flow__seg:last-child{border-start-end-radius:var(--radius-lg);border-end-end-radius:var(--radius-lg)}
.cd-flow__seg[data-tone=warning]{background:color-mix(in srgb,var(--warning) 12%,var(--muted))}
.cd-flow__seg[data-tone=danger]{background:color-mix(in srgb,var(--destructive) 12%,var(--muted))}
.cd-flow__seg[data-tone=success]{background:color-mix(in srgb,var(--success) 12%,var(--muted))}
.cd-flow__label{font-size:var(--text-xs);color:var(--muted-foreground);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cd-flow{flex-wrap:wrap}

/* ── Lists and logs ──────────────────────────────────────────────────── */
.cd-rows{display:flex;flex-direction:column}
.cd-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-2) var(--space-4);border-bottom:1px solid var(--border);padding-block:var(--space-4)}
.cd-row:first-child{padding-top:0}
.cd-row:last-child{border-bottom:0;padding-bottom:0}
.cd-row--recessed{color:var(--muted-foreground)}
.cd-row__main{display:flex;min-width:0;flex-direction:column;gap:3px}
.cd-row__side{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
.cd-row__wide{grid-column:1/-1}
.cd-log{display:flex;flex-direction:column;gap:var(--space-4)}
.cd-log__item{display:flex;flex-direction:column;gap:2px;border-inline-start:1px solid var(--border);padding-inline-start:var(--space-4)}
.cd-log__who{font-size:var(--text-sm);font-weight:var(--font-weight-medium)}
.cd-log__when{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--muted-foreground)}
.cd-log__text{font-size:var(--text-sm);color:var(--muted-foreground);text-wrap:pretty}

/* ── Tables ──────────────────────────────────────────────────────────── */
.cd-table-wrap{min-width:0;overflow-x:auto}
.cd-table-wrap table{min-width:100%}
/* Specificity has to beat the kit's own `.o-table td` padding shorthand, which
   is loaded after this file — hence `.o-table` on the front of each rule. */
.o-table.cd-tbl th{height:44px}
.o-table.cd-tbl th,.o-table.cd-tbl td{padding-inline:var(--space-4)}
.o-table.cd-tbl th:first-child,.o-table.cd-tbl td:first-child{padding-inline-start:0}
.o-table.cd-tbl th:last-child,.o-table.cd-tbl td:last-child{padding-inline-end:0}
.o-table.cd-tbl td{padding-block:var(--space-3)}
/* Rows are two lines deep in the record columns and one line deep in the money
   columns; centring each cell independently leaves the figures floating between
   the two lines. Baseline instead, so every column's first line reads across. */
.o-table.cd-tbl td{vertical-align:baseline;line-height:var(--leading-snug)}
.o-table.cd-tbl td.cd-actions{vertical-align:middle}
.cd-card .o-table.cd-tbl th:first-child,.cd-card .o-table.cd-tbl td:first-child{padding-inline-start:var(--gutter-card)}
.cd-card .o-table.cd-tbl th:last-child,.cd-card .o-table.cd-tbl td:last-child{padding-inline-end:var(--gutter-card)}
.cd-row-recessed{background:var(--muted);color:var(--muted-foreground)}
.cd-row-recessed .cd-record__name{font-weight:var(--font-weight-normal);color:var(--muted-foreground)}
.cd-filters{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3)}
.cd-filters__text{width:min(20rem,100%)}
.cd-tab-count{margin-inline-start:var(--space-1-5);color:var(--muted-foreground);font-variant-numeric:tabular-nums}
.cd-foot,.o-card-footer.cd-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3);border-top:1px solid var(--border);padding-top:var(--space-4);font-size:var(--text-xs);color:var(--muted-foreground)}
.cd-icon{display:inline-flex;flex:none;align-items:center;justify-content:center}
.cd-command{max-width:36rem;overflow:hidden}
.fd-icon{display:inline-flex;flex:none;align-items:center;justify-content:center}
.fd-floating-anchor{display:inline-flex}

/* ── Responsive. Declared once, identical on every screen. ────────────── */
@media(max-width:1280px){.cd-search{width:auto}}
@media(max-width:1180px){.cd-split,.cd-split--band,.cd-split--even{grid-template-columns:minmax(0,1fr)}.cd-split--band{gap:var(--space-6)}}
@media(max-width:1080px){.cd-drop-lg{display:none}}
@media(max-width:900px){.cd-drop-md{display:none}.cd-decide{padding:var(--space-6)}.cd-bars__row{grid-template-columns:6.5rem minmax(0,1fr) 6rem}}
@media(max-width:767px){
  .cd-shell{--gutter-page:var(--space-4);--gutter-card:var(--space-4)}
  .o-table.cd-tbl th,.o-table.cd-tbl td{padding-inline:var(--space-3)}
  .cd-title{font-size:var(--text-2xl)}
  .cd-figure--xl{font-size:var(--text-3xl)}
  .cd-bar .o-btn,.cd-actions .o-btn{min-height:44px;min-width:44px}
  .cd-dest{min-height:44px}
  .cd-flow{flex-direction:column}
  .cd-flow__seg{border-radius:var(--radius-lg)}
  .cd-defs{grid-template-columns:minmax(0,1fr)}
  .cd-defs dd{text-align:left}
}

/* Account and auth, added when the account menu got screens behind it.
   Layout only; every value is a token. */
.cd-fields{display:flex;flex-direction:column;gap:var(--space-5)}
/* Two fields to a row on a create form; single column before the fields go
   narrow, which is the same threshold the rest of the page uses. */
.cd-grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-5)}
@media(max-width:900px){.cd-grid2{grid-template-columns:minmax(0,1fr)}}
.cd-checks{display:flex;flex-direction:column;gap:var(--space-2)}
.cd-check{display:flex;align-items:flex-start;gap:var(--space-2);font-size:var(--text-sm)}
.cd-photo{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4)}
.cd-photo__text{display:flex;min-width:0;flex-direction:column;gap:var(--space-2)}
.cd-photo__actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.cd-check__text{display:flex;flex-direction:column;gap:1px}
.cd-check{align-items:flex-start}
.cd-check>.cd-check__text{flex:1;min-width:0}
.cd-check__count{flex:none;font-size:var(--text-xs);color:var(--muted-foreground);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ── The notifications page: one list, grouped by day. ───────────────── */
.cd-days{display:flex;flex-direction:column;gap:var(--space-6)}
.cd-day{display:flex;flex-direction:column;gap:var(--space-2)}
.cd-day__label{margin:0;font-size:var(--text-xs);font-weight:var(--font-weight-medium);color:var(--muted-foreground)}
.cd-notice{display:grid;width:100%;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:var(--space-1) var(--space-3);border:0;border-bottom:1px solid var(--border);background:transparent;padding:var(--space-4) var(--space-2);text-align:left;font:inherit;color:inherit;cursor:pointer}
.cd-notice:last-child{border-bottom:0}
.cd-notice:hover{background:var(--accent)}
.cd-notice__dot{width:6px;height:6px;margin-block-start:7px;border-radius:999px;background:transparent}
.cd-notice.is-unread .cd-notice__dot{background:var(--foreground)}
.cd-notice__main{display:flex;min-width:0;flex-direction:column;gap:2px}
.cd-notice__title{font-size:var(--text-sm);color:var(--muted-foreground)}
.cd-notice.is-unread .cd-notice__title{font-weight:var(--font-weight-medium);color:var(--foreground)}
.cd-notice__side{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right;white-space:nowrap}
/* No fill of its own — the sticky bar reads the page through a blur, so it
   never looks like a second surface laid over the form. */
.cd-formbar{position:sticky;bottom:0;z-index:30;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--space-3);border-top:1px solid var(--border);backdrop-filter:blur(8px);padding-block:var(--space-4)}
.cd-formbar__note{margin-inline-end:auto;font-size:var(--text-sm);color:var(--muted-foreground);text-wrap:pretty}
/* Auth: its own shell, no navigation owner. One layout variant — centred card. */
.cd-auth{display:flex;min-height:100vh;align-items:center;justify-content:center;background:var(--sidebar);padding:var(--space-6)}
.cd-auth__col{display:flex;width:100%;max-width:24rem;flex-direction:column;gap:var(--space-5)}
.cd-auth__mark{display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}
.cd-auth__logo{display:block;width:32px;height:32px}
.cd-auth__words{display:flex;flex-direction:column;align-items:center;gap:2px}
.cd-auth__desk{font-family:var(--font-mono);font-size:var(--text-xs);line-height:1.2;color:var(--muted-foreground)}
.cd-auth__foot{margin:0;text-align:center;font-size:var(--text-xs);color:var(--muted-foreground);text-wrap:pretty}
@media(max-width:767px){.cd-formbar .o-btn{min-height:44px}}

.cd-kv{display:flex;flex-direction:column;gap:var(--space-2);margin:0;font-size:var(--text-sm)}
.cd-kv>div{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4)}
.cd-kv dt{color:var(--muted-foreground)}
.cd-kv dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.cd-card-footer{justify-content:space-between;gap:var(--space-4);padding-top:var(--space-4)}
