/* ── The Retail Analyst — shared theme ─────────────────────────── */

:root {
    /* One family for everything — headings, body, and figures alike. The fallbacks
       carry the page until Open Sans arrives (and if it never does): the system UI
       face first, then a generic. Loaded per page from Google Fonts; if that
       dependency is ever unwanted, self-host the woff2 and swap in an @font-face
       here — nothing else needs to change, because every rule points at this token. */
    --font: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

    --paper:      #faf8f4;
    --paper-2:    #f2efe8;
    --card:       #fffefb;
    --ink:        #1c1c1a;
    --muted:      #6f6b63;
    --faint:      #a39c8d;
    --line:       #e3ddd1;
    /* Light steel blue, in two weights of one family.
       --blue is the colour itself, and it is pale: white text on it is 1.78:1 and
       it is 1.68:1 against paper, so it can only ever be a fill with dark text on
       top — never text, never a rule, never behind anything white.
       --blue-ink is the same hue taken dark enough to do those jobs. Anything
       carrying white text (buttons, hovers) or needing to read as "on" uses it. */
    --blue:       #b0c4de;
    --on-blue:    #1b2b3d;   /* text sitting on --blue — 8.1:1 */
    --blue-ink:   #3d5a7a;   /* text, rules, and fills that carry white — 6.7:1 */
    --blue-d:     #2c4460;   /* pressed / hover on --blue-ink */
    --blue-mid:   #8ba4c4;
    /* The modelling convention: a figure that is hard-coded rather than computed is
       blue. --blue-ink is the wrong tool for it — at chroma 61 it reads as grey-blue
       beside black figures, which is fine for a rule or a heading and useless as a
       signal in a column of numbers. This is the same hue (212 degrees, so it stays in
       the family) taken to chroma 151, where the eye reads "blue" immediately. 5.7:1
       on --card, and 3.0:1 against --ink so it separates from the figures around it. */
    --blue-input: #2166b8;
    /* The column fills are semi-transparent rather than flat light blues, so they
       read as a wash over whatever is behind them instead of a painted block. At
       ~5% the historical/projected split is still legible but stops competing with
       the figures. Note this tint is now the ONLY thing marking where the forecast
       starts, since the rules between year columns are gone — so there is a floor
       on how faint it can go. */
    --blue-tint:  rgba(61, 90, 122, 0.05);   /* historical-column fill */
    --blue-tint-2:rgba(61, 90, 122, 0.09);   /* historical subtotal fill */
    --green:      #17663f;
    --green-tint: #e4efe7;
    --red:        #a4322a;
    --red-tint:   #f7ebe9;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font);
    background: var(--paper);
    color: var(--ink);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
/* Both of these used to switch family — a serif for display, a monospace for
   figures. With one family everywhere they are kept only for the numeric feature,
   and the markup that carries them still reads correctly. */
.serif { font-family: var(--font); }
.mono  { font-variant-numeric: tabular-nums; }
.shell { max-width: 960px; margin: 0 auto; padding: 0 28px; }
.shell.wide { max-width: 1280px; }

:focus-visible { outline: 2px solid var(--blue-ink); outline-offset: 2px; }
::selection { background: var(--blue); color: var(--on-blue); }

/* ── Site header ── */
.site-head {
    border-bottom: 1px solid var(--line);
    background: var(--paper);
    position: sticky; top: 0; z-index: 50;
}
.site-head .shell {
    display: flex; align-items: center; justify-content: space-between;
    height: 60px; gap: 20px;
}
/* Tool pages: brand left, workflow rail dead-center, actions right */
.site-head .shell.centered {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
}
.site-head .shell.centered .rail { justify-self: center; }
.site-head .shell.centered .head-right {
    justify-self: end; display: flex; align-items: center; gap: 12px;
}
/* The wordmark is steel blue on every page — one rule, since all five headers
   share this class. --blue-ink rather than --blue: the pale steel is 1.68:1 on
   paper and would be unreadable as text. */
.brand {
    font-family: var(--font); font-size: 19px; font-weight: 700;
    color: var(--blue-ink); text-decoration: none; letter-spacing: -0.2px;
    white-space: nowrap;
}
/* The dot used to be the accent against dark ink. With the wordmark itself blue
   it goes darker instead, so it still reads as a full stop rather than vanishing. */
.brand .dot { color: var(--blue-d); }

.head-links { display: flex; align-items: center; gap: 26px; }
.head-links a { color: var(--muted); text-decoration: none; font-size: 14px; }
.head-links a:hover { color: var(--ink); }

/* ── Workflow rail (Assumptions · Model · DCF) ── */
.rail { display: flex; align-items: center; gap: 12px; font-size: 13.5px; }
.rail-step { color: var(--muted); text-decoration: none; }
a.rail-step:hover { color: var(--ink); }
.rail-step.here {
    color: var(--blue-ink); font-weight: 600;
    border-bottom: 2px solid var(--blue-ink); padding-bottom: 1px;
}
.rail-step.off { color: #c9c2b4; pointer-events: none; }
.rail-sep { width: 18px; height: 1px; background: var(--line); flex: none; }

/* ── Buttons ── */
.btn {
    display: inline-block;
    background: var(--blue-ink); color: #fff;
    border: none; cursor: pointer;
    font-family: var(--font); font-size: 15px; font-weight: 500;
    padding: 12px 26px; border-radius: 2px;
    text-decoration: none;
    transition: background 0.15s;
}
.btn:hover { background: var(--blue-d); }
.btn:disabled { opacity: 0.55; cursor: default; }
.btn.small { font-size: 13.5px; padding: 8px 18px; }

/* ── Cards ── */
.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 24px 28px;
    /* Wide enough that two stacked cards read as two sections rather than one
       continuous panel — the pages that stack several of these were the ones that
       felt like a wall of numbers. */
    margin-bottom: 30px;
}

/* ── Error panel ── */
.error-box {
    background: var(--red-tint); color: var(--red);
    border: 1px solid #dcbcb7;
    padding: 16px 20px; border-radius: 3px; font-size: 14.5px;
}
.error-box a { color: var(--blue-ink); }

/* ── Footer ── */
.site-foot {
    border-top: 1px solid var(--line);
    margin-top: 88px; padding: 32px 0 44px;
    font-size: 13.5px; color: var(--muted);
}
.site-foot .shell {
    display: flex; justify-content: space-between; align-items: baseline;
    flex-wrap: wrap; gap: 12px;
}
.site-foot a { color: var(--muted); text-decoration: none; }
.site-foot a:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}