/* ============================================================================
   WhirlWind View — /preview component CSS (card front §05 + expanded panel §08).
   The tokens file (:root vars + .wv-chip/.wv-type/.wv-id/.wv-health/.wv-track
   primitives) is loaded FIRST; this file only composes the layout the primitives
   sit in. Every value comes from a token. Namespaced .wv-* — inert on other pages.
   Loaded statically via App.razor (HeadContent does not reach the static
   HeadOutlet under prerender:false, which is why the first attempt rendered naked).
   ========================================================================= */

/* ---- page ground -------------------------------------------------------- */
.wv-preview-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);
}
.wv-preview-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;
}
.wv-preview-hint { font-size: var(--wv-t-small); color: var(--wv-slate); margin: 0; }
.wv-preview-missing { font-family: var(--wv-mono); color: var(--wv-brick); }

/* ---- card (scale B, 288px) --------------------------------------------- */
.wv-card {
    width: var(--wv-card-w-min);
    background: var(--wv-paper);
    border: var(--wv-border);
    box-shadow: var(--wv-shadow-card);
    padding: 0;                      /* the band is edge-to-edge; body has its own padding */
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: border-color .12s ease;
}
.wv-card:hover { border-color: var(--wv-slate); }

/* top band — horizon + owner, coloured by horizon. Quarterly = red (board convention).
   Replaces the horizon and owner chips. */
.wv-card__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(--wv-brick);
    padding: 7px var(--wv-c-padx);
}
.wv-card__band--annual   { background: var(--wv-sky);  }
.wv-card__band--threeyear{ background: var(--wv-plum); }

/* body — generous vertical rhythm so a result card reads TALL, not wide-and-short */
.wv-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);
}

/* result band — the rich financial treatment (replaces the plain bar on result cards).
   Tinted by pace-health: green when on track, brick when behind. */
/* primary + secondary sit together as one group; card-body gap separates the group from
   the health line above and the roll-up below. */
.wv-metrics { display: flex; flex-direction: column; gap: var(--wv-sp-2); }

.wv-resultband {
    border: var(--wv-hairline);
    background: var(--wv-green-bg);
    padding: var(--wv-sp-4) var(--wv-sp-5);
    display: flex;
    flex-direction: column;
    gap: 0;
}
.wv-resultband--off { background: var(--wv-brick-bg); }
/* the big machine-read value — SANS heavy, NOT the display serif (serif is titles only). */
.wv-resultband__value {
    font-family: var(--wv-sans);
    font-weight: 700;
    font-size: 32px;
    line-height: 1;
    letter-spacing: -.5px;
    color: var(--wv-ink);
}
.wv-resultband__of { font-family: var(--wv-mono); font-size: var(--wv-c-meta); color: var(--wv-soft); margin-top: 3px; }
/* the bar returns, right under the "of …" line */
.wv-resultband__track { margin-top: 7px; }
/* meta tucked close under the bar */
.wv-resultband__asof { font-family: var(--wv-mono); font-size: var(--wv-c-count); color: var(--wv-slate); margin-top: 4px; }
.wv-resultband__label {
    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;
}

/* secondary metric — ~1/3 the visual weight of the primary block, directly below it */
.wv-secondband {
    border: var(--wv-hairline);
    background: var(--wv-page);
    padding: var(--wv-sp-2) var(--wv-sp-4);
    display: flex; flex-direction: column; gap: 1px;
}
.wv-secondband__label {
    font-family: var(--wv-mono); font-size: 9.5px; letter-spacing: var(--wv-track-chip);
    text-transform: uppercase; color: var(--wv-slate);
}
.wv-secondband__value { font-family: var(--wv-sans); font-weight: 700; font-size: 15px; line-height: 1; color: var(--wv-slate); }
.wv-secondband__value--empty { font-weight: 500; font-style: italic; font-size: 13px; color: var(--wv-slate); }
.wv-secondband__of { font-family: var(--wv-mono); font-size: var(--wv-c-count); color: var(--wv-slate); }
.wv-secondband__note { font-family: var(--wv-mono); font-size: 9px; font-style: italic; color: var(--wv-slate); margin-top: 1px; }

/* slot 1+2 grip + id (left), slot 4 type badge (right) */
.wv-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--wv-sp-2); }
.wv-card__idwrap { display: inline-flex; align-items: center; gap: var(--wv-sp-2); }
.wv-grip { color: var(--wv-rule); font-size: 12px; line-height: 1; letter-spacing: -1px; user-select: none; }
.wv-type--untyped { background: var(--wv-fill); color: var(--wv-slate); }

/* slot 5 title */
.wv-card__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;
}

/* slot 8 status tag, inline in the health line */
.wv-status { font-weight: 500; color: var(--wv-slate); }

/* slot 12 progress meta */
.wv-meta {
    display: flex; align-items: baseline; justify-content: space-between;
    font-family: var(--wv-mono); font-size: var(--wv-c-meta); color: var(--wv-soft);
}
.wv-meta__pace { color: var(--wv-slate); font-size: var(--wv-c-count); }

/* slot 13 chips row */
.wv-chips { display: flex; flex-wrap: wrap; gap: var(--wv-sp-1); }

/* slot 14 counts row — mono, fixed order, zeros greyed not hidden */
.wv-counts {
    display: flex; gap: var(--wv-sp-4);
    font-family: var(--wv-mono); font-size: var(--wv-c-count); color: var(--wv-soft);
}
.wv-count--zero { color: var(--wv-rule); }

/* slot 15 roll-up parent line */
.wv-rollup {
    font-family: var(--wv-mono); font-size: var(--wv-c-roll); color: var(--wv-plum);
    line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* slot 16 footer owner + age */
.wv-foot {
    display: flex; align-items: center; justify-content: space-between;
    border-top: var(--wv-hairline); padding-top: var(--wv-sp-2);
    font-size: var(--wv-c-foot); color: var(--wv-soft);
}
.wv-foot__age { font-family: var(--wv-mono); color: var(--wv-slate); }

/* ============================================================================
   EXPANDED PANEL (§08) — click expands, never flips. Takes the width it needs.
   ========================================================================= */
.wv-panel-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;
}
.wv-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);
}
.wv-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);
}
.wv-panel__titlewrap { display: flex; flex-direction: column; gap: var(--wv-sp-1); }
.wv-panel__id { font-family: var(--wv-mono); font-size: var(--wv-c-id); letter-spacing: var(--wv-track-id); color: var(--wv-slate); }
.wv-panel__title { font-family: var(--wv-display); font-weight: 600; font-size: var(--wv-t-h3); margin: 0; line-height: 1.15; }
.wv-panel__close {
    font-family: var(--wv-mono); font-size: var(--wv-t-small);
    background: var(--wv-fill); color: var(--wv-soft);
    border: var(--wv-border); padding: var(--wv-sp-1) var(--wv-sp-3); cursor: pointer;
}
.wv-panel__close:hover { border-color: var(--wv-slate); }

/* three columns — left record / middle work / right talk */
.wv-panel__grid { display: grid; grid-template-columns: 1.05fr 1fr 1fr; }
.wv-panel__col { padding: var(--wv-sp-6) var(--wv-sp-7); }
.wv-panel__col + .wv-panel__col { border-left: var(--wv-hairline); }
@media (max-width: 900px) {
    .wv-panel__grid { grid-template-columns: 1fr; }
    .wv-panel__col + .wv-panel__col { border-left: none; border-top: var(--wv-hairline); }
}

/* a titled block inside a column */
.wv-section { margin-bottom: var(--wv-sp-6); }
.wv-section:last-child { margin-bottom: 0; }
.wv-section > .wv-label { display: block; margin-bottom: var(--wv-sp-3); }

/* key/value rows */
.wv-kv { display: grid; grid-template-columns: 128px 1fr; gap: var(--wv-sp-1) var(--wv-sp-4); font-size: var(--wv-t-small); }
.wv-kv__k { color: var(--wv-slate); }
.wv-kv__v { color: var(--wv-ink); }
.wv-kv__v--mono { font-family: var(--wv-mono); }
.wv-kv__v--muted { color: var(--wv-slate); }

/* health at size (left column, larger than the card) */
.wv-health--lg { font-size: var(--wv-t-h3); }
.wv-health--lg .wv-health__dot { width: 10px; height: 10px; }

/* the big progress track in the panel */
.wv-track--lg { height: 22px; }

/* empty states — honest, never faked */
.wv-empty {
    font-size: var(--wv-t-small); font-style: italic; color: var(--wv-slate);
    background: var(--wv-page); border: var(--wv-hairline); padding: var(--wv-sp-3) var(--wv-sp-4);
}

/* readings — inline add-form rendered but DISABLED (read-only proof) */
.wv-addform { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wv-sp-2); margin-top: var(--wv-sp-3); }
.wv-addform input, .wv-addform select {
    font-family: var(--wv-sans); font-size: var(--wv-t-small);
    border: var(--wv-border); background: var(--wv-page); color: var(--wv-slate);
    padding: var(--wv-sp-2) var(--wv-sp-3); width: 100%;
}
.wv-addform__full { grid-column: 1 / -1; }
.wv-addform__btn {
    grid-column: 1 / -1; font-family: var(--wv-mono); font-size: var(--wv-c-chip);
    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-2); cursor: not-allowed;
}
.wv-addform__note { font-size: 11px; color: var(--wv-slate); grid-column: 1 / -1; margin-top: 2px; }

/* to-dos grouped Opens / Work / Closes */
.wv-todo-group { margin-bottom: var(--wv-sp-4); }
.wv-todo-group__hd { font-family: var(--wv-mono); font-size: var(--wv-c-count); letter-spacing: var(--wv-track-chip); text-transform: uppercase; color: var(--wv-slate); margin-bottom: var(--wv-sp-1); }

/* descriptions */
.wv-desc { font-size: var(--wv-t-small); color: var(--wv-soft); margin: 0 0 var(--wv-sp-3); }

/* bottom — the visibility ladder, full width */
.wv-panel__bottom { border-top: var(--wv-border); padding: var(--wv-sp-6) var(--wv-sp-7); }
.wv-ladder { display: flex; gap: 0; margin-top: var(--wv-sp-3); border: var(--wv-border); }
.wv-rung {
    flex: 1; text-align: center; padding: var(--wv-sp-3) var(--wv-sp-2);
    font-size: var(--wv-t-small); color: var(--wv-soft); background: var(--wv-paper);
}
.wv-rung + .wv-rung { border-left: var(--wv-hairline); }
.wv-rung__name { display: block; }
.wv-rung__meta { font-family: var(--wv-mono); font-size: 9.5px; letter-spacing: var(--wv-track-chip); text-transform: uppercase; color: var(--wv-slate); }
.wv-rung--current { background: var(--wv-fill); color: var(--wv-ink); font-weight: 600; }
.wv-rung--disabled { color: var(--wv-rule); background: var(--wv-page); }
.wv-ladder-note { font-size: var(--wv-t-small); color: var(--wv-amber); margin-top: var(--wv-sp-2); }

/* ============================================================================
   SUB-ROCK TREE — display only, added for the hierarchy card. Nothing here
   implies stored data: the weight column and the roll-up bar both have
   dedicated "empty" styles so an absent value reads as absent, not as zero.
   ============================================================================ */

/* the roll-up track when there is no stored value to draw */
.wv-track--empty {
    display: flex; align-items: center; justify-content: center;
    background: repeating-linear-gradient(45deg,
        var(--wv-page) 0, var(--wv-page) 6px,
        var(--wv-fill) 6px, var(--wv-fill) 12px);
    border: var(--wv-hairline);
}
.wv-track__none {
    font-family: var(--wv-mono); font-size: var(--wv-c-count);
    letter-spacing: var(--wv-track-chip); text-transform: uppercase;
    color: var(--wv-slate); background: var(--wv-paper); padding: 1px 7px;
}

.wv-empty--tight { padding: var(--wv-sp-2) var(--wv-sp-3); }

/* the tree itself */
.wv-tree { border: var(--wv-hairline); background: var(--wv-paper); }

.wv-tree__hd,
.wv-tree__row {
    display: grid;
    grid-template-columns: 1fr 78px 58px 74px;
    gap: var(--wv-sp-2);
    align-items: baseline;
    padding: var(--wv-sp-3) var(--wv-sp-4);
}
.wv-tree__hd {
    font-family: var(--wv-mono); font-size: var(--wv-c-count);
    letter-spacing: var(--wv-track-chip); text-transform: uppercase;
    color: var(--wv-slate); border-bottom: var(--wv-hairline); background: var(--wv-page);
}
.wv-tree__row { border-top: var(--wv-hairline); font-size: var(--wv-t-small); }
.wv-tree__hd + .wv-tree__row { border-top: none; }

.wv-tree__name { color: var(--wv-ink); }
.wv-tree__ref {
    font-family: var(--wv-mono); font-size: var(--wv-c-count);
    color: var(--wv-slate); margin-right: var(--wv-sp-2);
}
.wv-tree__c { font-size: var(--wv-t-small); color: var(--wv-soft); }
.wv-tree__c--empty { font-family: var(--wv-mono); color: var(--wv-rule); }

/* tri-state chip — read off PrimaryState, never computed from evidence */
.wv-state {
    font-family: var(--wv-mono); font-size: var(--wv-c-count);
    letter-spacing: var(--wv-track-chip); text-transform: uppercase;
    padding: 2px 6px; border: var(--wv-hairline); white-space: nowrap;
}
.wv-state--done    { background: var(--wv-green-bg); color: var(--wv-green); }
.wv-state--partial { background: var(--wv-amber-bg); color: var(--wv-amber); }
.wv-state--none    { background: var(--wv-page);     color: var(--wv-slate); }

/* a sub-rock's own stored Target/Actual — shown as its own reading, not a roll-up */
.wv-tree__band {
    font-family: var(--wv-mono); font-size: var(--wv-c-count);
    color: var(--wv-soft); background: var(--wv-page);
    padding: var(--wv-sp-1) var(--wv-sp-4) var(--wv-sp-2) 34px;
    border-top: var(--wv-hairline);
}
.wv-tree__bandnote { color: var(--wv-slate); margin-left: var(--wv-sp-3); }

/* to-dos nested under a sub-rock */
.wv-tree__todo {
    display: flex; gap: var(--wv-sp-2);
    font-size: var(--wv-t-small); color: var(--wv-soft);
    padding: var(--wv-sp-1) var(--wv-sp-4) var(--wv-sp-1) 34px;
    border-top: var(--wv-hairline);
}
.wv-tree__todo--none { font-style: italic; color: var(--wv-rule); }
.wv-tree__chk { font-family: var(--wv-mono); color: var(--wv-slate); }

/* ILLUSTRATIVE row — dashed, tinted, tagged. Must never read as real data. */
.wv-tree__row--illustrative {
    border-top: 1px dashed var(--wv-plum);
    border-bottom: 1px dashed var(--wv-plum);
    background: var(--wv-plum-bg);
}
.wv-tree__row--illustrative .wv-tree__name { color: var(--wv-plum); font-style: italic; }
.wv-illus-tag {
    font-family: var(--wv-mono); font-size: 9.5px; font-style: normal;
    letter-spacing: var(--wv-track-chip); text-transform: uppercase;
    color: var(--wv-plum); border: 1px dashed var(--wv-plum);
    padding: 1px 5px; margin-left: var(--wv-sp-2); white-space: nowrap;
}

.wv-tree__note {
    font-size: var(--wv-t-small); color: var(--wv-slate);
    margin: var(--wv-sp-3) 0 0; line-height: 1.5;
}
.wv-tree__note code { font-family: var(--wv-mono); font-size: 0.95em; color: var(--wv-soft); }
.wv-tree__note--illus { color: var(--wv-plum); }

@media (max-width: 900px) {
    .wv-tree__hd, .wv-tree__row { grid-template-columns: 1fr 64px 44px 66px; }
}

/* ============================================================================
   ONE-CARD ADDITIONS — home team, declared-vs-rolled-up pair, agenda badge.
   Anything not backed by a column carries .wv-illus-tag beside it in the markup.
   ============================================================================ */

/* home team — a department, deliberately NOT the owner (owner lives in the band) */
.wv-team { display: flex; align-items: baseline; gap: var(--wv-sp-2); }
.wv-team__k {
    font-family: var(--wv-mono); font-size: var(--wv-c-count);
    letter-spacing: var(--wv-track-chip); text-transform: uppercase; color: var(--wv-slate);
}
.wv-team__v {
    font-size: var(--wv-c-meta); color: var(--wv-ink);
    background: var(--wv-fill); border: var(--wv-hairline); padding: 1px 7px;
}

/* declared health beside computed roll-up — two panes, equal weight, no winner */
.wv-dual {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--wv-sp-4);
    border: var(--wv-hairline); background: var(--wv-page); padding: var(--wv-sp-3) var(--wv-sp-4);
}
.wv-dual__side { display: flex; flex-direction: column; gap: var(--wv-sp-2); min-width: 0; }
.wv-dual__side + .wv-dual__side { border-left: var(--wv-hairline); padding-left: var(--wv-sp-4); }
.wv-dual__k {
    font-family: var(--wv-mono); font-size: var(--wv-c-count);
    letter-spacing: var(--wv-track-chip); text-transform: uppercase; color: var(--wv-slate);
}
.wv-dual__note { font-size: var(--wv-c-count); color: var(--wv-slate); line-height: 1.4; }

/* weight cell — illustrative, so visually distinct from a stored figure */
.wv-tree__c--illus {
    font-family: var(--wv-mono); color: var(--wv-plum);
    border-bottom: 1px dashed var(--wv-plum); width: fit-content;
}
.wv-tree__c--mono { font-family: var(--wv-mono); }

/* agenda flag on a to-do — illustrative, nothing is wired to a meeting */
.wv-agenda {
    font-family: var(--wv-mono); font-size: 9.5px;
    letter-spacing: var(--wv-track-chip);
    color: var(--wv-sky); background: var(--wv-sky-bg);
    border: 1px solid var(--wv-sky); padding: 1px 5px; white-space: nowrap;
}
.wv-tree__todo--illus {
    align-items: center; flex-wrap: wrap;
    background: var(--wv-plum-bg); border-left: 2px dashed var(--wv-plum);
}
.wv-tree__todo--illus > span:nth-child(2) { font-style: italic; color: var(--wv-plum); }

/* five columns now that Due has its own */
.wv-tree__hd, .wv-tree__row { grid-template-columns: 1fr 76px 58px 56px 74px; }
@media (max-width: 900px) {
    .wv-tree__hd, .wv-tree__row { grid-template-columns: 1fr 62px 46px 48px 64px; }
    .wv-dual { grid-template-columns: 1fr; }
    .wv-dual__side + .wv-dual__side { border-left: none; padding-left: 0; border-top: var(--wv-hairline); padding-top: var(--wv-sp-3); }
}

/* ---- scope marker: Company (everyone) vs Department (own team + leadership) ---- */
.wv-scope {
    font-family: var(--wv-mono); font-size: 9.5px;
    letter-spacing: var(--wv-track-chip); text-transform: uppercase;
    padding: 1px 6px; white-space: nowrap;
}
.wv-scope--company { background: var(--wv-ink);  color: var(--wv-paper); border: 1px solid var(--wv-ink); }
.wv-scope--dept    { background: transparent;    color: var(--wv-slate); border: 1px solid var(--wv-rule); }

/* ---- roll-up: quiet. Present or entirely absent — never a placeholder. ---- */
.wv-rollup--quiet {
    font-size: var(--wv-c-count); color: var(--wv-slate);
    background: none; border: none; padding: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- agenda-sync footnote under the illustrative to-dos ---- */
.wv-agenda-note {
    font-size: var(--wv-c-count); color: var(--wv-plum);
    padding: var(--wv-sp-1) var(--wv-sp-4) var(--wv-sp-2) 34px;
    border-left: 2px dashed var(--wv-plum); font-style: italic;
}

/* ---- front-face footer: owner · age. Calm, mono, top-ruled. ---- */
.wv-foot {
    font-family: var(--wv-mono); font-size: var(--wv-c-foot);
    color: var(--wv-slate); border-top: var(--wv-hairline);
    padding-top: var(--wv-sp-2);
}

/* the dual pane sits in a panel column now — stack it, the column is narrow */
.wv-panel__col .wv-dual { grid-template-columns: 1fr; gap: var(--wv-sp-3); }
.wv-panel__col .wv-dual .wv-dual__side + .wv-dual__side {
    border-left: none; padding-left: 0;
    border-top: var(--wv-hairline); padding-top: var(--wv-sp-3);
}

/* ---- secondary metric: one quiet line, replaces the boxed secondary band ---- */
.wv-secondline {
    font-size: var(--wv-c-meta); color: var(--wv-soft);
    border-top: var(--wv-hairline); padding-top: var(--wv-sp-2);
}
.wv-secondline--empty { color: var(--wv-slate); font-style: italic; }

/* ---- ticket references: small, muted, mono ---- */
.wv-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);
}

/* ---- roll-up link: the parent NAME carries the link, no card number ---- */
.wv-rollup__link {
    color: var(--wv-sky); text-decoration: underline;
    text-decoration-style: dotted; text-underline-offset: 2px;
    cursor: pointer;
}

/* ============================================================================
   SUB-ROCK TABLE LEGIBILITY
   The tree lived in a 1/3-width panel column, so the 1fr title column collapsed
   to ~60px and stacked one word per line. Two fixes: give the tree column real
   width in the rock panel, and clamp titles to two lines with the full string on
   hover instead of letting them tower.
   ============================================================================ */

/* the rock panel leans width into the middle (tree) column */
.wv-panel__grid--tree { grid-template-columns: 0.85fr 1.7fr 0.85fr; }
@media (max-width: 900px) {
    .wv-panel__grid--tree { grid-template-columns: 1fr; }
}

/* narrower fixed columns buy the title more room; min-width:0 lets 1fr shrink
   properly instead of being held open by its content */
.wv-tree__hd, .wv-tree__row { grid-template-columns: minmax(0, 1fr) 68px 46px 52px 68px; }
.wv-tree__hd > *, .wv-tree__row > * { min-width: 0; }

/* two lines max, ellipsis, full text on hover — never a vertical word tower */
.wv-tree__name {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; overflow-wrap: normal; word-break: normal; hyphens: none;
    line-height: 1.35;
}

@media (max-width: 900px) {
    .wv-tree__hd, .wv-tree__row { grid-template-columns: minmax(0, 1fr) 58px 42px 46px 60px; }
}

/* ============================================================================
   TWO MEASURES, DELIBERATELY UNLIKE EACH OTHER
   "The number" = dollars from scorecard/accounting — tinted block, big value.
   "The work"   = % of tracked sub-rocks complete — plain, no tint, thin bar.
   They must never look like two readings of one thing.
   ============================================================================ */

/* dollars, but with no reading yet: keep the block, drop the confident tint */
.wv-resultband--empty { background: var(--wv-page); border: var(--wv-hairline); }
.wv-resultband__value--none {
    font-family: var(--wv-mono); font-size: var(--wv-t-h3);
    color: var(--wv-slate); font-weight: 500;
}
.wv-resultband--empty .wv-resultband__label {
    margin-top: 0; margin-bottom: var(--wv-sp-2); order: -1;
}

/* the work track — visually quieter and structurally different from the band */
.wv-worktrack { display: flex; flex-direction: column; gap: var(--wv-sp-1); padding-top: var(--wv-sp-2); }
.wv-worktrack__k {
    display: flex; align-items: baseline; gap: var(--wv-sp-2); flex-wrap: wrap;
    font-family: var(--wv-mono); font-size: var(--wv-c-count);
    letter-spacing: var(--wv-track-chip); text-transform: uppercase; color: var(--wv-slate);
}
.wv-worktrack__note { font-size: var(--wv-c-count); color: var(--wv-slate); font-style: italic; }
.wv-track__fill--work { background: var(--wv-slate); }