/* ============================================================================
   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); }