/* =============================================================================
   HisaBooks — Dry Run
   -----------------------------------------------------------------------------
   Section layouts for /dry_run.php, built on the tokens in css/hisabooks.css.
   Rules this file has to keep (docs/hisabooks_marketing_design_standards.md):

   - Flat. Separation is a hairline border and a change of tone, never a shadow.
   - One navy. Amber and red appear only as status inside the Friday close.
   - No bare vw/vh: every fluid length goes through --hb-vw / --hb-vh.
   - No breakpoint between 1200px and 1599px, because css/viewport_scale.css
     scales the root through that band and a media query there would fire
     against the window width rather than the laid-out width.
   ============================================================================= */

/* ── Hero ──────────────────────────────────────────────────────────────────── */
.dr-hero {
    padding-block: calc(var(--hb-nav-h) + var(--hb-s8)) var(--hb-s8);
    background: var(--hb-paper);
}

.dr-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: var(--hb-s8);
    align-items: end;
}

.dr-hero__title { margin-bottom: var(--hb-s5); }
.dr-hero__lede { margin-bottom: var(--hb-s6); }

.dr-hero__points {
    display: grid;
    gap: var(--hb-s4);
    padding: var(--hb-s5);
    border: 1px solid var(--hb-line);
    border-radius: var(--hb-r-lg);
    background: var(--hb-mist);
}

.dr-hero__point { display: grid; gap: 2px; }
.dr-hero__point strong { font-size: var(--hb-t-sm); font-weight: 620; letter-spacing: -.01em; }
.dr-hero__point span { font-size: var(--hb-t-sm); color: var(--hb-muted); line-height: 1.55; }

@media (max-width: 1199px) {
    .dr-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--hb-s6); align-items: start; }
}

/* ── The stage ─────────────────────────────────────────────────────────────── */
.dr-stage { background: var(--hb-mist); padding-block: var(--hb-section-tight); }

.dr-stage__head {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hb-s5);
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: var(--hb-s6);
}

.dr-stage__intro { max-width: 46ch; display: grid; gap: var(--hb-s2); }
.dr-stage__company { font-size: var(--hb-t-h3); font-weight: 660; letter-spacing: -.03em; }
.dr-stage__cast { font-size: var(--hb-t-sm); color: var(--hb-muted); }

.dr-trades { display: flex; flex-wrap: wrap; gap: var(--hb-s2); }

.dr-trade {
    display: grid;
    gap: 1px;
    text-align: left;
    padding: 10px 16px;
    border: 1px solid var(--hb-line);
    border-radius: var(--hb-r-md);
    background: var(--hb-paper);
    cursor: pointer;
    transition: border-color var(--hb-fast) var(--hb-ease), background var(--hb-fast) var(--hb-ease);
}

.dr-trade:hover { border-color: var(--hb-blue-mist); }
.dr-trade__label { font-size: var(--hb-t-sm); font-weight: 620; letter-spacing: -.01em; }
.dr-trade__company { font-size: var(--hb-t-xs); color: var(--hb-faint); }

.dr-trade.is-active {
    background: var(--hb-blue);
    border-color: var(--hb-blue);
    color: #fff;
}
.dr-trade.is-active .dr-trade__company { color: rgba(255, 255, 255, .72); }

/* Three columns: the week, the desk, and the consequences of the desk. */
.dr-board {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr) 330px;
    gap: var(--hb-s5);
    align-items: start;
}

@media (max-width: 1199px) {
    .dr-board { grid-template-columns: minmax(0, 1fr); }
}

/* ── Left: the week ────────────────────────────────────────────────────────── */
.dr-week {
    position: sticky;
    top: calc(var(--hb-nav-h) + var(--hb-s4));
    border: 1px solid var(--hb-line);
    border-radius: var(--hb-r-lg);
    background: var(--hb-paper);
    padding: var(--hb-s4);
}

.dr-week__label {
    font-size: var(--hb-t-eyebrow);
    font-weight: 640;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--hb-faint);
    margin-bottom: var(--hb-s3);
}

.dr-week__list { display: grid; gap: 2px; }

.dr-step__button {
    display: grid;
    gap: 2px;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: var(--hb-r-sm);
    background: transparent;
    cursor: pointer;
    transition: background var(--hb-fast) var(--hb-ease);
}

.dr-step__button:hover:not(:disabled) { background: var(--hb-mist); }
.dr-step__button:disabled { cursor: default; opacity: .45; }

.dr-step__day {
    font-size: var(--hb-t-eyebrow);
    font-weight: 640;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--hb-faint);
}

.dr-step__title {
    font-size: var(--hb-t-sm);
    line-height: 1.35;
    color: var(--hb-ink-soft);
}

.dr-step__choice {
    font-size: var(--hb-t-xs);
    color: var(--hb-blue);
    margin-top: 2px;
}

.dr-step.is-current .dr-step__button {
    background: var(--hb-blue-wash);
    border-color: var(--hb-blue-mist);
}
.dr-step.is-current .dr-step__day,
.dr-step.is-current .dr-step__title { color: var(--hb-blue-ink); }

.dr-step.is-done .dr-step__title { color: var(--hb-muted); }

.dr-step--close { margin-top: var(--hb-s3); border-top: 1px solid var(--hb-line); padding-top: var(--hb-s3); }

.dr-week__meter {
    margin-top: var(--hb-s4);
    height: 3px;
    border-radius: var(--hb-r-pill);
    background: var(--hb-mist-deep);
    overflow: hidden;
}

.dr-week__meter span {
    display: block;
    height: 100%;
    background: var(--hb-blue);
    transform: scaleX(var(--dr-progress, 0));
    transform-origin: left center;
    transition: transform var(--hb-mid) var(--hb-ease-out);
}

.dr-week__count {
    margin-top: var(--hb-s2);
    font-size: var(--hb-t-xs);
    color: var(--hb-faint);
}

/* ── Centre: the desk ──────────────────────────────────────────────────────── */
.dr-desk {
    border: 1px solid var(--hb-line);
    border-radius: var(--hb-r-lg);
    background: var(--hb-paper);
    padding: var(--hb-s6);
}

.dr-act__head { max-width: 62ch; }

.dr-act__stamp {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hb-s2);
    align-items: center;
    margin-bottom: var(--hb-s3);
}

.dr-act__day {
    font-size: var(--hb-t-eyebrow);
    font-weight: 640;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--hb-blue);
}

.dr-act__module {
    font-size: var(--hb-t-xs);
    color: var(--hb-blue);
    background: var(--hb-blue-wash);
    border: 1px solid var(--hb-blue-mist);
    border-radius: var(--hb-r-pill);
    padding: 2px 10px;
}

.dr-act__title {
    font-size: var(--hb-t-h3);
    font-weight: 660;
    letter-spacing: -.03em;
    line-height: 1.22;
    margin-bottom: var(--hb-s2);
}
.dr-act__title:focus { outline: none; }
.dr-act__title:focus-visible { outline: 2px solid var(--hb-blue); outline-offset: 4px; }

.dr-act__voice {
    font-size: var(--hb-t-xs);
    color: var(--hb-faint);
    margin-bottom: var(--hb-s3);
}

.dr-act__brief { color: var(--hb-muted); line-height: 1.65; margin-bottom: var(--hb-s5); }

/* The screen fragment. Chrome borrowed from .hb-window, sized to be read. */
.dr-screen {
    border: 1px solid var(--hb-line);
    border-radius: var(--hb-r-md);
    overflow: hidden;
    background: var(--hb-paper);
}

.dr-screen__bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    background: var(--hb-mist);
    border-bottom: 1px solid var(--hb-line);
}

.dr-screen__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hb-line); flex: none; }

.dr-screen__url {
    margin-left: var(--hb-s3);
    font-family: var(--hb-mono);
    font-size: 11px;
    color: var(--hb-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dr-screen__body { padding: var(--hb-s5); }

.dr-screen__title {
    font-size: var(--hb-t-h4);
    font-weight: 620;
    letter-spacing: -.02em;
    margin-bottom: var(--hb-s3);
}

.dr-screen__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hb-s2) var(--hb-s5);
    margin-bottom: var(--hb-s4);
    padding-bottom: var(--hb-s4);
    border-bottom: 1px solid var(--hb-line-soft);
}

/* The shared reset does not cover dd, so the user agent's 40px indent is still
   live and would push every value out from under its own label. */
.dr-screen__pair { min-width: 0; }
.dr-screen__pair dd { margin: 0; }

.dr-screen__meta dt {
    font-size: var(--hb-t-eyebrow);
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--hb-faint);
}
.dr-screen__meta dd { font-size: var(--hb-t-sm); font-weight: 560; margin-top: 1px; }

.dr-screen__scroll { overflow-x: auto; }

.dr-screen__table { width: 100%; border-collapse: collapse; font-size: var(--hb-t-sm); }

.dr-screen__table th {
    font-size: var(--hb-t-eyebrow);
    font-weight: 640;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--hb-faint);
    padding: 0 0 8px;
    border-bottom: 1px solid var(--hb-line);
    white-space: nowrap;
}

.dr-screen__table td { padding: 9px 0; border-bottom: 1px solid var(--hb-line-soft); color: var(--hb-ink-soft); }
.dr-screen__table td + td, .dr-screen__table th + th { padding-left: var(--hb-s4); }
.dr-screen__table .is-right { text-align: right; }
.dr-screen__table .is-left { text-align: left; }
.dr-screen__table .is-money { font-variant-numeric: tabular-nums; color: var(--hb-ink); }

.dr-screen__table tfoot th {
    border-bottom: none;
    border-top: 1px solid var(--hb-line);
    padding: 10px 0 0;
    font-size: var(--hb-t-xs);
    text-transform: none;
    letter-spacing: 0;
    color: var(--hb-muted);
    text-align: left;
}

.dr-screen__table tfoot td {
    border-bottom: none;
    border-top: 1px solid var(--hb-line);
    padding: 10px 0 0 var(--hb-s4);
    font-weight: 660;
    color: var(--hb-ink);
}

.dr-screen__flags {
    display: grid;
    gap: 6px;
    margin-top: var(--hb-s4);
    padding: var(--hb-s3) var(--hb-s4);
    border: 1px solid var(--hb-warning-mist);
    border-radius: var(--hb-r-sm);
    background: var(--hb-warning-wash);
}

.dr-screen__flags li { font-size: var(--hb-t-xs); color: #6d5406; line-height: 1.5; }

/* The question and its answers */
.dr-act__ask { margin-top: var(--hb-s6); }

.dr-act__question {
    font-size: var(--hb-t-h4);
    font-weight: 640;
    letter-spacing: -.02em;
    margin-bottom: var(--hb-s4);
}

.dr-options { display: grid; gap: var(--hb-s2); }

.dr-option {
    display: grid;
    gap: 3px;
    text-align: left;
    width: 100%;
    padding: 14px 18px;
    border: 1px solid var(--hb-line);
    border-radius: var(--hb-r-md);
    background: var(--hb-paper);
    cursor: pointer;
    transition: border-color var(--hb-fast) var(--hb-ease), background var(--hb-fast) var(--hb-ease);
}

.dr-option:hover { border-color: var(--hb-blue-mist); background: var(--hb-mist); }
.dr-option__label { font-size: var(--hb-t-sm); font-weight: 620; letter-spacing: -.01em; }
.dr-option__detail { font-size: var(--hb-t-xs); color: var(--hb-muted); line-height: 1.5; }

.dr-option.is-chosen {
    border-color: var(--hb-blue);
    background: var(--hb-blue-wash);
}
.dr-option.is-chosen .dr-option__label { color: var(--hb-blue-ink); }
.dr-option.is-chosen .dr-option__detail { color: var(--hb-blue-deep); }

.dr-result {
    margin-top: var(--hb-s5);
    padding-top: var(--hb-s5);
    border-top: 1px solid var(--hb-line);
}

.dr-result__label {
    font-size: var(--hb-t-eyebrow);
    font-weight: 640;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--hb-faint);
    margin-bottom: var(--hb-s2);
}

.dr-result__headline {
    font-size: var(--hb-t-lede);
    line-height: 1.55;
    letter-spacing: -.015em;
    max-width: 60ch;
}

.dr-result__actions { margin-top: var(--hb-s4); }

/* ── Right: the ledger rail ────────────────────────────────────────────────── */
.dr-rail {
    position: sticky;
    top: calc(var(--hb-nav-h) + var(--hb-s4));
    border: 1px solid var(--hb-line);
    border-radius: var(--hb-r-lg);
    background: var(--hb-paper);
    overflow: hidden;
}

.dr-rail__head { padding: var(--hb-s4) var(--hb-s4) var(--hb-s3); border-bottom: 1px solid var(--hb-line); }

.dr-rail__label {
    font-size: var(--hb-t-eyebrow);
    font-weight: 640;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--hb-faint);
}

.dr-rail__note { font-size: var(--hb-t-xs); color: var(--hb-muted); line-height: 1.5; margin-top: 4px; }

.dr-rail__figures { padding: var(--hb-s3) var(--hb-s4); border-bottom: 1px solid var(--hb-line); display: grid; gap: 7px; }

.dr-figure { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--hb-s2); align-items: baseline; }
.dr-figure__label { font-size: var(--hb-t-xs); color: var(--hb-muted); }
.dr-figure__value { font-size: var(--hb-t-sm); font-weight: 620; font-variant-numeric: tabular-nums; }

/* Neutral on purpose. See the comment beside it in js/marketing_dry_run.js:
   a balance moving down is good or bad depending entirely on why. */
.dr-figure__delta {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    border-radius: var(--hb-r-pill);
    padding: 1px 7px;
    color: var(--hb-muted);
    background: var(--hb-mist-deep);
}

.dr-rail__feed {
    display: grid;
    gap: var(--hb-s3);
    padding: var(--hb-s4);
    max-height: calc(58 * var(--hb-vh, 1vh));
    overflow-y: auto;
}

.dr-rail__empty { padding: var(--hb-s5) var(--hb-s4); font-size: var(--hb-t-xs); color: var(--hb-faint); line-height: 1.6; }

.dr-post { border: 1px solid var(--hb-line); border-radius: var(--hb-r-sm); padding: var(--hb-s3); }

.dr-post__head { display: flex; gap: var(--hb-s2); align-items: baseline; margin-bottom: var(--hb-s2); }

.dr-post__day {
    font-size: 10px;
    font-weight: 660;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--hb-faint);
    flex: none;
}

.dr-post__what { font-size: var(--hb-t-xs); font-weight: 620; letter-spacing: -.01em; }

.dr-post__lines { display: grid; gap: 3px; }

.dr-post__line {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    gap: var(--hb-s2);
    align-items: baseline;
    font-size: var(--hb-t-xs);
}

.dr-post__side {
    font-family: var(--hb-mono);
    font-size: 10px;
    font-weight: 600;
    text-align: center;
    border-radius: 3px;
    padding: 1px 0;
    background: var(--hb-mist-deep);
    color: var(--hb-muted);
}

.dr-post__line.is-dr .dr-post__side { background: var(--hb-blue-wash); color: var(--hb-blue); }
.dr-post__account { color: var(--hb-ink-soft); }
.dr-post__amount { font-variant-numeric: tabular-nums; color: var(--hb-ink); }

.dr-post__balance {
    margin-top: 7px;
    font-size: 11px;
    letter-spacing: .01em;
    color: var(--hb-success);
}
.dr-post__balance.is-off { color: var(--hb-danger); }

.dr-post__plain {
    margin-top: 6px;
    font-size: var(--hb-t-xs);
    color: var(--hb-muted);
    line-height: 1.5;
}

.dr-rail.is-pulsed { animation: dr-pulse 700ms var(--hb-ease-out); }

@keyframes dr-pulse {
    0%   { border-color: var(--hb-blue); }
    100% { border-color: var(--hb-line); }
}

/* ── The Friday close ──────────────────────────────────────────────────────── */
.dr-close__head { max-width: 62ch; }

.dr-close__stamp {
    font-size: var(--hb-t-eyebrow);
    font-weight: 640;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--hb-blue);
    margin-bottom: var(--hb-s3);
}

.dr-close__title {
    font-size: var(--hb-t-h3);
    font-weight: 660;
    letter-spacing: -.03em;
    line-height: 1.2;
    margin-bottom: var(--hb-s3);
}
.dr-close__title:focus { outline: none; }
.dr-close__title:focus-visible { outline: 2px solid var(--hb-blue); outline-offset: 4px; }

.dr-close__verdict { font-size: var(--hb-t-lede); line-height: 1.55; letter-spacing: -.015em; }

.dr-close__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin: var(--hb-s6) 0;
    background: var(--hb-line);
    border: 1px solid var(--hb-line);
    border-radius: var(--hb-r-md);
    overflow: hidden;
}

.dr-close__card { background: var(--hb-paper); padding: var(--hb-s4); display: grid; gap: 3px; }

.dr-close__card-label {
    font-size: var(--hb-t-eyebrow);
    font-weight: 640;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--hb-faint);
}

.dr-close__card-value { font-size: var(--hb-t-h4); font-weight: 660; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.dr-close__card-note { font-size: var(--hb-t-xs); color: var(--hb-muted); line-height: 1.5; }

.dr-close__block { margin-bottom: var(--hb-s6); }

.dr-close__block-title {
    font-size: var(--hb-t-h4);
    font-weight: 640;
    letter-spacing: -.02em;
    margin-bottom: var(--hb-s3);
}

.dr-score { display: grid; gap: 0; border-top: 1px solid var(--hb-line); }

.dr-score__row {
    display: flex;
    justify-content: space-between;
    gap: var(--hb-s4);
    padding: 10px 0;
    border-bottom: 1px solid var(--hb-line-soft);
    font-size: var(--hb-t-sm);
}

.dr-score__label { color: var(--hb-ink-soft); }
.dr-score__value { font-weight: 620; font-variant-numeric: tabular-nums; }
.dr-score__row.is-good .dr-score__value { color: var(--hb-success); }
.dr-score__row.is-bad .dr-score__value { color: var(--hb-danger); }

.dr-notes { display: grid; gap: var(--hb-s2); }

/* Status reads as a change of tone across the whole surface, not as a coloured
   rule down one edge. Rule 1.1 again, and rule 1.2: bound it, do not stripe it. */
.dr-notes__item {
    font-size: var(--hb-t-sm);
    line-height: 1.55;
    color: var(--hb-ink-soft);
    padding: 10px 14px;
    border: 1px solid var(--hb-line);
    border-radius: var(--hb-r-sm);
}

.dr-notes__item.is-good { border-color: #b6ddc9; background: var(--hb-success-wash); }
.dr-notes__item.is-open { border-color: var(--hb-warning-mist); background: var(--hb-warning-wash); }

.dr-close__tally {
    font-size: var(--hb-t-sm);
    color: var(--hb-muted);
    line-height: 1.6;
    padding-top: var(--hb-s5);
    border-top: 1px solid var(--hb-line);
}

.dr-close__actions { display: flex; flex-wrap: wrap; gap: var(--hb-s2); margin-top: var(--hb-s5); }

/* ── The week, written out ─────────────────────────────────────────────────── */
.dr-outline { padding-block: var(--hb-section-tight); background: var(--hb-paper); }

.dr-outline__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1px;
    margin-top: var(--hb-s7);
    background: var(--hb-line);
    border: 1px solid var(--hb-line);
    border-radius: var(--hb-r-md);
    overflow: hidden;
}

.dr-outline__cell { background: var(--hb-paper); padding: var(--hb-s5); display: grid; gap: var(--hb-s2); align-content: start; }

.dr-outline__day {
    font-size: var(--hb-t-eyebrow);
    font-weight: 640;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--hb-blue);
}

.dr-outline__title { font-size: var(--hb-t-h4); font-weight: 620; letter-spacing: -.02em; line-height: 1.3; }
.dr-outline__body { font-size: var(--hb-t-sm); color: var(--hb-muted); line-height: 1.6; }

/* ── Honesty ───────────────────────────────────────────────────────────────── */
.dr-honest { padding-block: var(--hb-section-tight); background: var(--hb-night); color: #fff; }

.dr-honest__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--hb-s6);
    margin-top: var(--hb-s7);
}

.dr-honest__col { display: grid; gap: var(--hb-s3); align-content: start; }

.dr-honest__title {
    font-size: var(--hb-t-h4);
    font-weight: 620;
    letter-spacing: -.02em;
    color: #fff;
}

/* No markers in front of these lines. Rule 1.1: a list is separated by a
   hairline and its rhythm, never by a decorative bullet or rule. */
.dr-honest__list { display: grid; border-top: 1px solid var(--hb-night-line); }

.dr-honest__list li {
    font-size: var(--hb-t-sm);
    line-height: 1.6;
    color: var(--hb-night-text);
    padding: var(--hb-s3) 0;
    border-bottom: 1px solid var(--hb-night-line);
}

.dr-honest__list.is-not li { color: rgba(255, 255, 255, .5); }

/* ── Close ─────────────────────────────────────────────────────────────────── */
.dr-cta { padding-block: var(--hb-section-tight); background: var(--hb-night-soft); color: #fff; }
.dr-cta__inner { text-align: center; display: grid; gap: var(--hb-s5); justify-items: center; }
.dr-cta__title { color: #fff; }
.dr-cta__body { color: var(--hb-night-text); max-width: 54ch; }

/* ── Narrow ────────────────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
    .dr-week, .dr-rail { position: static; }
    .dr-rail__feed { max-height: none; }
    .dr-week__list { grid-auto-flow: column; grid-auto-columns: minmax(180px, 1fr); overflow-x: auto; }
    .dr-step--close { margin-top: 0; border-top: none; padding-top: 0; }
    .dr-close__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 719px) {
    .dr-desk { padding: var(--hb-s5) var(--hb-s4); }
    .dr-screen__body { padding: var(--hb-s4); }
    .dr-close__grid { grid-template-columns: minmax(0, 1fr); }
    .dr-stage__head { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    .dr-week__meter span { transition: none; }
    .dr-rail.is-pulsed { animation: none; }
}