/* ============================================================================
   WorkCards — /cards component CSS.

   Namespace: .wc-*  (deliberately NOT .wv-*, which /preview owns). The two
   stylesheets are both loaded on every page; keeping the namespaces disjoint
   means this file cannot change how /preview or /board render, in either
   direction, no matter what order they load in.

   Everything here composes from whirlwind-view-tokens.css, which is loaded
   first. The local variables in :root below are ONLY the values the token file
   does not carry — each one says why.

   Two scales, one rule (DECISIONS 24 Jul):
     · the CARD FRONT is a SCANNING surface  -> --wv-c-*  (card scale B)
     · the EXPANDED PANEL is a READING surface -> --wv-r-* (fleet 18px)
   ========================================================================= */

:root {
    /* Top band colours, taken from the approved screenshots. The token file's
       --wv-brick (#9C3B2E) is within 2/255 of the specified quarterly brick, so
       quarterly just uses the token. Annual is a genuinely different colour from
       --wv-sky (#2C5C86) — a darker navy — so it is declared here rather than
       silently substituted. */
    --wc-band-quarterly: var(--wv-brick);
    --wc-band-annual: #2C4A63;
    --wc-band-threeyear: var(--wv-plum);

    /* Result band. The specified teal ground is cooler than the token file's
       --wv-green-bg (#E8F4ED), which is the "on track / done" green. This band is
       not a health tint — it is the measured-result surface — so it gets its own
       value. The track is a darkened step of the same ground so the bar stays
       legible sitting inside it. */
    --wc-result-bg: #E7F0EB;
    --wc-result-track: #C9DCD3;
    --wc-result-fill: var(--wv-teal);

    /* Off-track variant of the same band: the brick tint from the token file. */
    --wc-result-bg-off: var(--wv-brick-bg);
    --wc-result-track-off: #EDD3CD;
    --wc-result-fill-off: var(--wv-brick);

    /* Visibility ladder, current rung. Warm beige — explicitly NOT the teal
       result tint, so "where this card sits" never reads as "how it is doing".
       --wv-fill is warm but too close to plain grey at this size. */
    --wc-rung-current: #F6EEDC;

    /* Two steps the scales do not carry.
       --wc-r-health: the reading scale jumps 18px (body) -> 28px (title) with
         nothing between, and the panel's health verdict needs to sit between.
       --wc-c-result: the card scale tops out at 17px (title); the result value
         is the one thing on the front meant to be read from across a room. */
    --wc-r-health: 24px;
    --wc-c-result: 32px;
}

/* ---- page ground -------------------------------------------------------- */
.wc-stage {
    font-family: var(--wv-sans);
    background: var(--wv-stone);
    color: var(--wv-ink);
    min-height: 100vh;
    margin: 0;
    padding: var(--wv-sp-8);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--wv-sp-6);
}

.wc-stage__note {
    font-family: var(--wv-mono);
    font-size: var(--wv-t-label);
    letter-spacing: var(--wv-track-label);
    text-transform: uppercase;
    color: var(--wv-slate);
    margin: 0;
}

.wc-stage__hint {
    font-size: var(--wv-t-small);
    color: var(--wv-slate);
    margin: 0;
}

.wc-stage__missing {
    font-family: var(--wv-mono);
    color: var(--wv-brick);
}

/* ============================================================================
   FRONT FACE — card scale. One of ~40 on a wall: calm, dense, scannable.
   ========================================================================= */

.wc-card {
    width: var(--wv-card-w-min);
    background: var(--wv-paper);
    border: var(--wv-border);
    box-shadow: var(--wv-shadow-card);
    display: flex;
    flex-direction: column;
    cursor: pointer;
    text-align: left;
    padding: 0;
    font: inherit;
    color: inherit;
    transition: border-color .12s ease;
}

.wc-card:hover { border-color: var(--wv-slate); }
.wc-card:focus-visible { outline: 2px solid var(--wv-ink); outline-offset: 2px; }

/* 1. Top band — full bleed, one left-aligned string. */
.wc-band {
    font-family: var(--wv-mono);
    font-size: var(--wv-c-chip);
    letter-spacing: var(--wv-track-chip);
    text-transform: uppercase;
    font-weight: 600;
    color: #fff;
    background: var(--wc-band-quarterly);
    padding: 7px var(--wv-c-padx);
}

.wc-band--annual { background: var(--wc-band-annual); }
.wc-band--threeyear { background: var(--wc-band-threeyear); }

.wc-card__body {
    padding: var(--wv-sp-4) var(--wv-c-padx) var(--wv-sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--wv-sp-5);
}

/* 2. Id row — grip, id, right-aligned type badge. */
.wc-idrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wv-sp-2);
}

.wc-idrow__left {
    display: inline-flex;
    align-items: center;
    gap: var(--wv-sp-2);
    min-width: 0;
}

.wc-grip {
    color: var(--wv-rule);
    font-size: 12px;
    line-height: 1;
    letter-spacing: -1px;
    user-select: none;
}

.wc-id {
    font-family: var(--wv-mono);
    font-size: var(--wv-c-id);
    letter-spacing: var(--wv-track-id);
    color: var(--wv-slate);
}

/* Type badge — bordered, light ground, mono uppercase. A typed card keeps the
   same geometry and takes its work class's ink; an untyped card is the muted
   default. Never absent, never a crash. */
.wc-type {
    font-family: var(--wv-mono);
    font-size: var(--wv-c-chip);
    letter-spacing: var(--wv-track-chip);
    text-transform: uppercase;
    padding: 1px 5px;
    white-space: nowrap;
    border: 1px solid var(--wv-rule);
    background: var(--wv-fill);
    color: var(--wv-slate);
}

.wc-type--product { border-color: var(--wv-teal); color: var(--wv-teal); background: var(--wv-page); }
.wc-type--business { border-color: var(--wv-brick); color: var(--wv-brick); background: var(--wv-brick-bg); }
.wc-type--client { border-color: var(--wv-plum); color: var(--wv-plum); background: var(--wv-plum-bg); }
.wc-type--internal { border-color: var(--wv-slate); color: var(--wv-soft); background: var(--wv-fill); }

/* 3. Title — IBM Plex Sans bold. NOT the display serif: Fraunces is the
   expanded panel's title face, which is what the "Fraunces for titles" note
   in the docs is about. Verified against what /preview actually renders. */
.wc-title {
    font-family: var(--wv-sans);
    font-weight: 600;
    font-size: var(--wv-c-title);
    line-height: 1.25;
    margin: 0;
    color: var(--wv-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 4. Health line — computed verdict, workflow state, right-aligned source label.
      Wraps rather than overflowing: the line now always carries a workflow state, so on the
      narrowest card the source tag drops to a second line instead of spilling out of the card. */
.wc-health {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--wv-sp-2);
    row-gap: 2px;              /* must follow `gap` — the shorthand resets it */
    font-size: var(--wv-c-health);
    font-weight: 600;
}

/* Groups the dot and the verdict into the COMPUTED half of the line, preserving the dot-to-verdict
   spacing exactly as it was. This is a seam, not decoration: the DECLARED half becomes a sibling in
   front of this span once the L10 declaration is readable — both visible, never reconciled. */
.wc-health__computed {
    display: flex;
    align-items: center;
    gap: var(--wv-sp-2);
}

.wc-health__dot {
    width: 7px;
    height: 7px;
    border-radius: var(--wv-radius-full);
    background: currentColor;
    flex: none;
}

.wc-health--ok { color: var(--wc-result-fill); }
.wc-health--off { color: var(--wv-brick); }
.wc-health--neutral { color: var(--wv-slate); }

.wc-health__status { font-weight: 500; color: var(--wv-slate); }

/* The source tag exists so the verdict can be argued with. */
.wc-health__source {
    margin-left: auto;
    font-family: var(--wv-mono);
    font-size: 9px;
    letter-spacing: var(--wv-track-chip);
    text-transform: uppercase;
    color: var(--wv-slate);
    font-weight: 400;
}

/* 5. Result band — the centrepiece. Square, tinted, no left stripe. */
.wc-metrics { display: flex; flex-direction: column; gap: var(--wv-sp-2); }

.wc-result {
    border: var(--wv-hairline);
    background: var(--wc-result-bg);
    padding: var(--wv-sp-4) var(--wv-sp-5);
    display: flex;
    flex-direction: column;
    gap: 0;
}

.wc-result--off { background: var(--wc-result-bg-off); }

.wc-result__value {
    font-family: var(--wv-sans);
    font-weight: 700;
    font-size: var(--wc-c-result);
    line-height: 1;
    letter-spacing: -.5px;
    color: var(--wv-ink);
}

.wc-result__of {
    font-family: var(--wv-mono);
    font-size: var(--wv-c-meta);
    color: var(--wv-soft);
    margin-top: 3px;
}

/* Thin, square, full width. No pace marker — pace is text in the panel. */
.wc-bar {
    height: 8px;
    background: var(--wc-result-track);
    position: relative;
    overflow: hidden;
}

.wc-result__bar { margin-top: 7px; }

.wc-bar__fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--wc-result-fill);
}

.wc-result--off .wc-bar,
.wc-bar--off { background: var(--wc-result-track-off); }

.wc-result--off .wc-bar__fill,
.wc-bar--off .wc-bar__fill { background: var(--wc-result-fill-off); }

.wc-result__asof {
    font-family: var(--wv-mono);
    font-size: var(--wv-c-count);
    color: var(--wv-slate);
    margin-top: 4px;
}

.wc-result__tag {
    font-family: var(--wv-mono);
    font-size: 9.5px;
    letter-spacing: var(--wv-track-chip);
    text-transform: uppercase;
    color: var(--wv-slate);
    margin-top: 1px;
}

/* 6. Secondary metric — a rule, then one quiet italic line. */
.wc-secondary {
    font-size: var(--wv-c-meta);
    color: var(--wv-soft);
    border-top: var(--wv-hairline);
    padding-top: var(--wv-sp-2);
}

.wc-secondary--empty { color: var(--wv-slate); font-style: italic; }

/* 7. Ticket references. Rendered only when the row carries one. */
.wc-tickets {
    display: flex;
    align-items: baseline;
    gap: var(--wv-sp-2);
    flex-wrap: wrap;
    font-family: var(--wv-mono);
    font-size: var(--wv-c-count);
    color: var(--wv-slate);
}

/* 8. Roll-up — parent NAME is the link, no card number. WRAPS rather than truncating: the old
   board's .card-rollup-link sets no white-space/overflow rules and lets a long parent title run to
   a second line, and this matches it. A truncated parent name is the one thing on the strip worth
   reading, so ellipsis was the wrong trade. */
.wc-rollup {
    font-family: var(--wv-mono);
    font-size: var(--wv-c-roll);
    color: var(--wv-slate);
    line-height: 1.35;
}

.wc-rollup__link {
    color: var(--wv-sky);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
    cursor: pointer;
}

/* 9. Footer — counts. Zeros are greyed, never hidden. */
.wc-counts {
    display: flex;
    gap: var(--wv-sp-4);
    font-family: var(--wv-mono);
    font-size: var(--wv-c-count);
    color: var(--wv-soft);
}

.wc-counts__zero { color: var(--wv-rule); }

/* ============================================================================
   HONESTY
   On the financial card this reduces to one move: an absent value is a boxed
   empty state that gives the REASON it is absent, and a present value is simply
   shown. No ILLUSTRATIVE badge, no hatched NO-STORED-VALUE block, no
   NOT-READABLE-HERE mark — every one of those belongs to the annual sub-rock
   card, where invented weights and unreachable roll-ups genuinely appear.
   Nothing on this card is illustrative, so nothing here is marked.
   ========================================================================= */

/* ============================================================================
   EXPANDED PANEL — click expands, never flips. Reading scale (fleet 18px).
   ========================================================================= */

.wc-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(27, 32, 39, .45);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--wv-sp-8) var(--wv-sp-6);
    overflow: auto;
}

.wc-panel {
    width: 100%;
    max-width: var(--wv-panel-max);
    background: var(--wv-paper);
    border: var(--wv-border);
    box-shadow: var(--wv-shadow-panel);
    color: var(--wv-ink);
    font-size: var(--wv-r-body);
}

.wc-panel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--wv-sp-4);
    padding: var(--wv-sp-6) var(--wv-sp-7);
    border-bottom: var(--wv-border);
}

.wc-panel__titlewrap { display: flex; flex-direction: column; gap: var(--wv-sp-2); min-width: 0; }

.wc-panel__id {
    font-family: var(--wv-mono);
    font-size: var(--wv-r-label);
    letter-spacing: var(--wv-track-id);
    color: var(--wv-slate);
}

.wc-panel__title {
    font-family: var(--wv-display);
    font-weight: 600;
    font-size: var(--wv-r-title);
    margin: 0;
    line-height: 1.15;
}

.wc-panel__close {
    font-family: var(--wv-mono);
    font-size: var(--wv-r-help);
    background: var(--wv-fill);
    color: var(--wv-soft);
    border: var(--wv-border);
    padding: var(--wv-sp-2) var(--wv-sp-4);
    cursor: pointer;
    flex: none;
}

.wc-panel__close:hover { border-color: var(--wv-slate); }

/* Three columns, divided by vertical rules. The columns carry no titles of
   their own — each is a stack of labelled sections. */
.wc-panel__grid { display: grid; grid-template-columns: 1.05fr 1fr .9fr; }
.wc-panel__col { padding: var(--wv-sp-6) var(--wv-sp-7); min-width: 0; }
.wc-panel__col + .wc-panel__col { border-left: var(--wv-hairline); }

@media (max-width: 980px) {
    .wc-panel__grid { grid-template-columns: 1fr; }
    .wc-panel__col + .wc-panel__col { border-left: none; border-top: var(--wv-hairline); }
}

.wc-section { margin-bottom: var(--wv-sp-7); }
.wc-section:last-child { margin-bottom: 0; }

/* Section label — mono, uppercase, tracked, reading scale. */
.wc-label {
    display: block;
    font-family: var(--wv-mono);
    font-size: var(--wv-r-label);
    letter-spacing: var(--wv-track-label);
    text-transform: uppercase;
    color: var(--wv-slate);
    font-weight: 500;
    margin-bottom: var(--wv-sp-3);
}

.wc-labelrow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--wv-sp-3);
}

.wc-labelrow .wc-label { margin-bottom: 0; }

/* ---- left column: the record ------------------------------------------- */

.wc-health--lg { font-size: var(--wc-r-health); }
.wc-health--lg .wc-health__dot { width: 10px; height: 10px; }

.wc-panel__bar { height: 12px; margin-top: var(--wv-sp-3); }

.wc-figures {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--wv-sp-3);
    flex-wrap: wrap;
    margin-top: var(--wv-sp-2);
    font-family: var(--wv-mono);
    font-size: var(--wv-r-sublabel);
    color: var(--wv-soft);
}

.wc-figures__pace { color: var(--wv-slate); }

/* Key/value rows. Keys muted and smaller; em dash for every empty value. */
.wc-kv {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: var(--wv-sp-2) var(--wv-sp-4);
    align-items: baseline;
}

.wc-kv__k {
    color: var(--wv-slate);
    font-size: var(--wv-r-sublabel);
}

.wc-kv__v {
    color: var(--wv-ink);
    font-size: var(--wv-r-value);
    overflow-wrap: anywhere;
}

.wc-kv__v--mono { font-family: var(--wv-mono); font-size: var(--wv-r-sublabel); }
.wc-kv__v--muted { color: var(--wv-slate); }

/* ---- middle column: the work ------------------------------------------- */

/* Empty states are boxed, italic, and give the REASON for the emptiness. */
.wc-empty {
    font-size: var(--wv-r-help);
    font-style: italic;
    color: var(--wv-slate);
    background: var(--wv-page);
    border: var(--wv-hairline);
    padding: var(--wv-sp-3) var(--wv-sp-4);
    line-height: 1.5;
}

.wc-addform {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--wv-sp-2);
    margin-top: var(--wv-sp-3);
}

.wc-addform input,
.wc-addform select {
    font-family: var(--wv-sans);
    font-size: var(--wv-r-help);
    border: var(--wv-border);
    background: var(--wv-page);
    color: var(--wv-slate);
    padding: var(--wv-sp-2) var(--wv-sp-3);
    width: 100%;
}

.wc-addform__full { grid-column: 1 / -1; }

.wc-addform__btn {
    grid-column: 1 / -1;
    font-family: var(--wv-mono);
    font-size: var(--wv-r-label);
    letter-spacing: var(--wv-track-chip);
    text-transform: uppercase;
    background: var(--wv-fill);
    color: var(--wv-slate);
    border: var(--wv-border);
    padding: var(--wv-sp-3);
    cursor: not-allowed;
}

.wc-addform__note {
    grid-column: 1 / -1;
    font-size: var(--wv-r-help);
    color: var(--wv-slate);
    margin-top: 2px;
}

.wc-todogroup { margin-bottom: var(--wv-sp-4); }

.wc-todogroup__hd {
    font-family: var(--wv-mono);
    font-size: var(--wv-r-label);
    letter-spacing: var(--wv-track-chip);
    text-transform: uppercase;
    color: var(--wv-slate);
    margin-bottom: var(--wv-sp-2);
}

.wc-standing {
    font-size: var(--wv-r-help);
    font-style: italic;
    color: var(--wv-slate);
    margin: var(--wv-sp-3) 0 0;
    line-height: 1.5;
}

/* ---- right column: the talk -------------------------------------------- */

.wc-desc {
    font-size: var(--wv-r-body);
    color: var(--wv-soft);
    line-height: 1.55;
    margin: 0;
}

/* ---- bottom: the visibility ladder ------------------------------------- */

.wc-panel__bottom {
    border-top: var(--wv-border);
    padding: var(--wv-sp-6) var(--wv-sp-7);
}

.wc-ladder {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: var(--wv-border);
    margin-top: var(--wv-sp-3);
}

.wc-rung {
    display: flex;
    flex-direction: column;
    gap: var(--wv-sp-1);
    align-items: center;
    text-align: center;
    padding: var(--wv-sp-4) var(--wv-sp-2);
    font-size: var(--wv-r-value);
    color: var(--wv-soft);
    background: var(--wv-paper);
}

.wc-rung + .wc-rung { border-left: var(--wv-hairline); }

.wc-rung__status {
    font-family: var(--wv-mono);
    font-size: var(--wv-r-label);
    letter-spacing: var(--wv-track-chip);
    text-transform: uppercase;
    color: var(--wv-slate);
}

.wc-rung--current {
    background: var(--wc-rung-current);
    color: var(--wv-ink);
    font-weight: 600;
}

.wc-ladder__note {
    font-size: var(--wv-r-help);
    color: var(--wv-amber);
    margin: var(--wv-sp-3) 0 0;
    line-height: 1.5;
}

/* ═══ EDITING — added when /cards became writable ═════════════════════════════════
   Inline inputs live inside the existing kv grid wherever 240px carries them. Four things
   do not fit that cell and get a full-width row instead: the title (header), tickets,
   external URL, and the two link pickers whose options are card titles. */

.wc-input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    font-family: inherit;
    font-size: var(--wv-r-body);
    color: inherit;
    background: var(--wv-paper, #fff);
    border: var(--wv-hairline);
    border-radius: 0;                      /* square corners — house style */
    padding: 4px 6px;
}

.wc-input:focus-visible { outline: 2px solid var(--wv-brick); outline-offset: 1px; }
.wc-input:disabled { opacity: .55; }
.wc-input--area { resize: vertical; line-height: 1.45; }

/* The header title. Reads as the heading it replaces until it is focused. */
.wc-input--title {
    border-color: transparent;
    background: transparent;
    padding: 2px 4px;
}
.wc-input--title:hover { border-color: var(--wv-rule, #d8d2c8); }

/* kv rows carrying inputs need a little more vertical room than text rows. */
.wc-kv--edit { row-gap: 6px; align-items: center; }

/* A full-width field: label above, control spanning the whole column. */
.wc-field { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; }
.wc-field__k {
    font-size: var(--wv-r-sublabel);
    color: var(--wv-slate);
    text-transform: uppercase;
    letter-spacing: var(--wv-track-chip);
}

.wc-fieldnote {
    margin: 6px 0 0;
    font-size: var(--wv-r-sublabel);
    color: var(--wv-slate);
    line-height: 1.4;
}

.wc-radio { display: inline-flex; align-items: center; gap: 4px; margin-right: 10px; font-size: var(--wv-r-sublabel); }

/* Reading history — newest first, one line each. */
.wc-readings { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.wc-reading {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
    padding: 4px 0; border-top: var(--wv-hairline);
}
.wc-reading__v { font-family: var(--wv-mono); font-weight: 600; }
.wc-reading__d { font-family: var(--wv-mono); font-size: var(--wv-r-sublabel); color: var(--wv-slate); }
.wc-reading__s { font-size: var(--wv-r-sublabel); color: var(--wv-slate); }
.wc-reading__n { flex-basis: 100%; font-size: var(--wv-r-sublabel); font-style: italic; }

/* Client picker — chips, because 87 links across the board means a list, not a multi-select. */
.wc-clients { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.wc-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 8px; border: var(--wv-hairline);
    font-size: var(--wv-r-sublabel); cursor: pointer;
}
.wc-chip--on { background: var(--wv-brick); color: #fff; border-color: var(--wv-brick); }

/* Save bar — pinned to the foot of the panel, and it says out loud that writes are live. */
.wc-savebar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: var(--wv-sp-5) var(--wv-sp-7);
    border-top: var(--wv-hairline);
}
.wc-savebar__btn {
    font-family: inherit; font-size: var(--wv-r-body); font-weight: 600;
    padding: 7px 18px; border: none; background: var(--wv-brick); color: #fff; cursor: pointer;
}
.wc-savebar__btn:disabled { opacity: .55; cursor: default; }
.wc-savebar__status { font-size: var(--wv-r-sublabel); }
.wc-savebar__warn { margin-left: auto; font-size: var(--wv-r-sublabel); color: var(--wv-slate); }

/* ═══ THE FINANCIAL CARD — horizontal bands ══════════════════════════════════════
   Replaces the three-column panel on this card type. On a financial card the numbers ARE
   the point: a column caps them at a third of the panel and sits the thing people came to
   DO beside the things they came to read. Band 1 is full width for that reason. */

.wc-panel--bands { max-width: var(--wv-panel-max); }
.wc-panel--bands.is-draft { border: 2px solid var(--wv-amber, #B8791C); }

.wc-draftbanner {
    background: var(--wv-amber-bg, #F7EFE0);
    border-bottom: 2px solid var(--wv-amber, #B8791C);
    padding: 9px var(--wv-sp-7);
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.wc-draftbanner .dl {
    font-family: var(--wv-mono); font-size: 11px; letter-spacing: .12em;
    text-transform: uppercase; color: #8A5A10; font-weight: 600;
}
.wc-draftbanner .dt { font-size: var(--wv-r-sublabel); color: var(--wv-soft, #4C4840); }

/* template — one summary line, then out of the way */
.wc-template { background: var(--wv-fill); border-bottom: var(--wv-hairline); padding: 9px var(--wv-sp-7); }
.wc-tsummary { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.wc-tsummary .tval {
    font-family: var(--wv-mono); font-size: 12px; letter-spacing: .05em;
    text-transform: uppercase; color: var(--wv-soft, #4C4840);
}
.wc-tsummary .tsep { color: var(--wv-rule); }
.wc-tedit {
    margin-left: auto; font-family: var(--wv-mono); font-size: 10.5px; letter-spacing: .06em;
    text-transform: uppercase; background: #fff; border: var(--wv-hairline);
    padding: 3px 10px; cursor: pointer; color: var(--wv-slate);
}
.wc-tedit:disabled { opacity: .5; cursor: not-allowed; }
.wc-tnote { font-size: var(--wv-r-sublabel); color: var(--wv-slate); margin: 5px 0 0; }

/* bands */
.wc-bandsec { padding: 18px var(--wv-sp-7) 22px; border-bottom: var(--wv-hairline); }
.wc-bandsec.alt { background: #FCFBF8; }

.wc-numgrid   { display: grid; grid-template-columns: 1fr 1.25fr; gap: 18px; align-items: start; }
.wc-standgrid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 18px; margin-top: 20px; align-items: start; }
.wc-reccols, .wc-talkcols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; align-items: start; }

@media (max-width: 1080px) {
    .wc-numgrid, .wc-standgrid { grid-template-columns: 1fr; }
    .wc-reccols, .wc-talkcols  { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
    .wc-reccols, .wc-talkcols  { grid-template-columns: 1fr; }
}

.wc-numbox { border: var(--wv-hairline); padding: 14px 15px; }
.wc-numbox--locked { background: #FCFBF8; }
/* Add-reading is the loudest thing on the panel, on purpose — it is what people come to do. */
.wc-numbox--entry { border: 2px solid var(--wv-teal); background: var(--wc-result-bg); }

.wc-nbhead {
    display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
    font-family: var(--wv-mono); font-size: 10px; letter-spacing: .11em; text-transform: uppercase;
    color: var(--wv-slate); margin-bottom: 11px;
}
.wc-nbhead .hint { text-transform: none; letter-spacing: 0; font-family: var(--wv-sans); font-size: 12.5px; color: var(--wv-teal); }

.wc-glock, .wc-ggrace, .wc-gdraft {
    font-family: var(--wv-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
    border: 1px solid; padding: 2px 7px; white-space: nowrap;
}
.wc-glock  { color: var(--wv-amber, #B8791C); border-color: var(--wv-amber, #B8791C); background: var(--wv-amber-bg, #F7EFE0); }
.wc-ggrace { color: var(--wv-brick); border-color: var(--wv-brick); background: var(--wv-brick-bg); }
.wc-gdraft { color: #8A5A10; border-color: var(--wv-amber, #B8791C); background: var(--wv-amber-bg, #F7EFE0); }

.wc-goalrow, .wc-erow { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; align-items: end; }
.wc-goalrow .f, .wc-erow .f { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wc-erow .f.wide { grid-column: 1 / -1; }
.wc-goalrow label, .wc-erow label {
    font-family: var(--wv-mono); font-size: 9.5px; letter-spacing: .09em;
    text-transform: uppercase; color: var(--wv-slate); white-space: nowrap;
}
.wc-goalrow input, .wc-erow input {
    font-family: var(--wv-mono); font-size: 15px; padding: 7px 9px; width: 100%;
    box-sizing: border-box; border: var(--wv-hairline); background: #fff; border-radius: 0;
}
.wc-goalrow input.num, .wc-erow input.num { text-align: right; }
.wc-erow input.big { font-size: 19px; font-weight: 600; }
/* Locked: dashed and inert, so it reads as "cannot" rather than "disabled by accident". */
.wc-goalrow.readonly .ro {
    font-family: var(--wv-mono); font-size: 15px; text-align: right; padding: 7px 9px;
    background: var(--wv-fill); border: 1px dashed var(--wv-rule); color: var(--wv-soft, #4C4840);
}

.wc-eresult {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    margin-top: 13px; padding-top: 12px; border-top: 1px solid rgba(31,110,90,.25); flex-wrap: wrap;
}
.wc-eresult .live { font-family: var(--wv-mono); font-size: 13px; color: var(--wv-teal); }
.wc-ebtn {
    font-family: var(--wv-sans); font-weight: 600; font-size: 15px; background: var(--wv-teal);
    color: #fff; border: 0; padding: 10px 26px; cursor: pointer; white-space: nowrap;
}
.wc-ebtn:disabled { opacity: .55; cursor: default; }

.wc-goalactions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.wc-btn {
    font-family: var(--wv-sans); font-weight: 600; font-size: 14px; background: var(--wv-ink);
    color: #fff; border: 0; padding: 8px 18px; cursor: pointer;
}
.wc-btn--amber { background: var(--wv-amber, #B8791C); }
.wc-btn:disabled { opacity: .55; cursor: default; }

/* provenance + audit */
.wc-prov { margin-top: 13px; padding-top: 11px; border-top: var(--wv-hairline); }
.wc-prov.light { border-top-color: rgba(31,110,90,.22); }
.wc-provrow { display: grid; grid-template-columns: 118px minmax(0,1fr); gap: 8px; padding: 2px 0; }
.wc-prov .pk {
    font-family: var(--wv-mono); font-size: 9.5px; letter-spacing: .09em;
    text-transform: uppercase; color: var(--wv-slate); padding-top: 2px;
}
.wc-prov .pv { font-size: var(--wv-r-sublabel); color: var(--wv-soft, #4C4840); }

.wc-audit { list-style: none; margin: 0; padding: 0; }
.wc-audit li { border-left: 2px solid var(--wv-amber, #B8791C); padding: 3px 0 3px 11px; margin-bottom: 11px; }
.wc-audit li.shut { border-left-color: var(--wv-ink); }
.wc-audit .ad {
    display: block; font-family: var(--wv-mono); font-size: 10px; letter-spacing: .07em;
    text-transform: uppercase; color: var(--wv-slate);
}
.wc-audit .am { display: block; font-size: 14px; margin-top: 2px; line-height: 1.4; }
.wc-audit .ab { display: block; font-size: 12.5px; color: var(--wv-slate); margin-top: 3px; line-height: 1.4; }

/* declared vs computed — the §9.1 fix. Two sides, neither winning. */
.wc-dual { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 760px) { .wc-dual { grid-template-columns: 1fr; } }
.wc-dual__side { display: flex; flex-direction: column; gap: 6px; }
.wc-dual__k {
    font-family: var(--wv-mono); font-size: 9.5px; letter-spacing: .11em;
    text-transform: uppercase; color: var(--wv-slate);
}
.wc-dual__note { font-size: 12.5px; color: var(--wv-slate); line-height: 1.45; }
.wc-declare { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.wc-chipbtn {
    font-family: var(--wv-sans); font-size: 13px; padding: 4px 12px;
    border: var(--wv-hairline); background: #fff; cursor: pointer; color: var(--wv-soft, #4C4840);
}
.wc-chipbtn.on { background: var(--wv-ink); color: #fff; border-color: var(--wv-ink); }
.wc-chipbtn:disabled { opacity: .55; cursor: default; }
.wc-disagree {
    margin-top: 12px; padding: 9px 12px; border-left: 3px solid var(--wv-amber, #B8791C);
    background: var(--wv-amber-bg, #F7EFE0); font-size: 13.5px; line-height: 1.45; color: var(--wv-soft, #4C4840);
}

.wc-hist { list-style: none; margin: 8px 0 0; padding: 0; font-size: 13.5px; }
.wc-hist li { display: flex; gap: 9px; align-items: baseline; padding: 5px 0; border-top: var(--wv-hairline); flex-wrap: wrap; }
.wc-hist .hv { font-family: var(--wv-mono); font-weight: 600; }
.wc-hist .hd { font-family: var(--wv-mono); font-size: 12px; color: var(--wv-slate); }
.wc-hist .hs { font-size: 12px; color: var(--wv-slate); margin-left: auto; }

.wc-savebar__lock { font-size: var(--wv-r-sublabel); font-family: var(--wv-mono); color: var(--wv-amber, #B8791C); }

/* ═══ VISUAL FIXES, 3 August ═════════════════════════════════════════════════════
   Appended last on purpose: .wc-panel__title is defined far earlier in this file than
   .wc-input, so the generic input rule was winning the cascade on font-size. Rather than
   raise specificity with a compound selector, the title's final word is stated here, last. */

/* ── 1. The title was CLIPPING ───────────────────────────────────────────────
   Root cause was the ELEMENT, not a width: making the card editable turned the <h2> into
   an <input>, and an input cannot wrap. It is now a textarea. */
.wc-input--title {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--wv-display);
    font-weight: 600;
    font-size: var(--wv-r-title);
    line-height: 1.2;
    color: var(--wv-ink);
    border-color: transparent;
    background: transparent;
    padding: 2px 4px;
    resize: none;
    overflow: hidden;
    field-sizing: content;      /* sizes to the text where supported… */
    min-height: 2.6em;          /* …and shows two full lines where it is not */
}
.wc-input--title:hover { border-color: var(--wv-rule); }
.wc-input--title:focus-visible { border-color: var(--wv-brick); background: #fff; }

/* The header must let the title have the width that is sitting unused to its right. */
.wc-panel__head { align-items: flex-start; }
.wc-panel__titlewrap { flex: 1 1 auto; min-width: 0; }
.wc-panel__close { flex: 0 0 auto; }

/* ── 2. Two classes were USED BUT NEVER DEFINED ──────────────────────────────
   .wc-grp appears 12 times — every section heading in the panel — and .wc-locked is the
   visibility block. Both fell through to the browser default, which is the "fallback face".
   The webfonts were loading correctly all along (App.razor); the rules simply did not exist. */
.wc-grp {
    /* PLEX SANS, deliberately not the display face and deliberately not uppercase mono.
       A sub-heading sits INSIDE a band, so it must read as subordinate to that band's label —
       giving both the same treatment is what made the panel read as a flat list of headings. */
    font-family: var(--wv-sans);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--wv-ink);
    display: block;
    margin: 20px 0 9px;
    padding-bottom: 5px;
    border-bottom: var(--wv-hairline);
}
/* First heading in a box shouldn't push itself away from the box's own top padding. */
.wc-numbox > .wc-grp:first-child,
.wc-standgrid > div > .wc-grp:first-child,
.wc-reccols > div > .wc-grp:first-child,
.wc-talkcols > div > .wc-grp:first-child { margin-top: 0; }

.wc-locked {
    background: var(--wv-fill);
    border: var(--wv-hairline);
    padding: 11px 13px;
    margin-top: 8px;
}
.wc-locked .lh { display: flex; align-items: center; gap: 8px; font-size: var(--wv-r-body); font-weight: 600; color: var(--wv-soft, #4C4840); }
.wc-locked .lock {
    font-family: var(--wv-mono); font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase;
    color: var(--wv-amber, #B8791C); border: 1px solid var(--wv-amber, #B8791C);
    background: var(--wv-amber-bg, #F7EFE0); padding: 1px 6px;
}
.wc-locked p { margin: 6px 0 0; font-size: var(--wv-r-sublabel); color: var(--wv-slate); line-height: 1.45; }

/* ── 3. The bands ran together ───────────────────────────────────────────────
   A hairline is enough to separate rows inside a section; it is not enough to separate the
   three things the panel IS. Each band now gets a heavy top rule, real breathing room above
   its label, and an alternating ground so the eye can find the edges without reading. */
.wc-bandsec {
    padding: 26px var(--wv-sp-7) 28px;
    border-top: 2px solid var(--wv-rule);
    border-bottom: none;
    background: var(--wv-paper, #fff);
}
.wc-bandsec.alt { background: #F7F4EC; }
/* The first band sits directly under the template row, which already rules it off. */
.wc-bandsec:first-of-type { border-top: none; }

.wc-bandlabel {
    /* FRAUNCES — the display face, used here and nowhere else in the panel. These three words
       are the panel's structure; the sub-headings inside them are Plex Sans. That contrast does
       half the separation work on its own, before the rule and the alternating ground. */
    font-family: var(--wv-display);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--wv-ink);
    padding: 0 0 11px;
    border-bottom: 1px solid var(--wv-rule);
    margin: 0 0 22px;
}

/* Bulleted explanations — used where a dropdown's options each need a sentence and a
   single paragraph of prose would blur them together. */
.wc-bullets {
    margin: 8px 0 0;
    padding-left: 18px;
    font-size: var(--wv-r-sublabel);
    color: var(--wv-slate);
    line-height: 1.5;
}
.wc-bullets li { margin-bottom: 5px; }
.wc-bullets strong { color: var(--wv-ink); }
.wc-bullets em { font-style: italic; color: var(--wv-brick); }

/* A checkbox whose label is a full sentence rather than a word. */
.wc-checkline {
    display: flex; align-items: flex-start; gap: 8px;
    margin-top: 12px; font-size: var(--wv-r-sublabel);
    color: var(--wv-slate); line-height: 1.45; cursor: pointer;
}
.wc-checkline input { margin-top: 3px; flex: none; }
.wc-checkline strong { color: var(--wv-ink); }