/*
    The finance report's own register.

    The console optimises for a scheduler working a queue for an hour; this optimises for the
    ten seconds somebody spends on a slide. So: a serif display face for the numbers that
    matter, a monospaced label face for everything that is scaffolding, and a palette where
    colour ranks rather than decorates — brass for goal, green for money in, teal for done,
    red for what fell over.

    Loaded only by pages using ReportLayout, so none of this reaches the console.
*/

:root {
    --r-bg: #F4F6FB;
    --r-ink: #12182B;
    --r-muted: #5B6178;
    --r-muted-dim: #8A92A8;
    --r-panel: #FFFFFF;
    --r-stroke: rgba(18, 24, 43, .12);
    --r-stroke-hi: rgba(18, 24, 43, .22);

    --r-brass: #B07714;
    --r-brass-hi: #C1861A;
    --r-orange: #DD722A;
    --r-teal: #0E9E93;
    --r-teal-dim: #0B7A72;
    --r-indigo: #5647C4;
    --r-red: #D14A48;
    --r-green: #1F9B67;

    --r-radius: 20px;
    --r-shadow: 0 20px 44px -24px rgba(30, 40, 80, .26);

    --r-display: 'Fraunces', Georgia, serif;
    --r-label: 'Space Grotesk', ui-monospace, SFMono-Regular, monospace;
}

body:has(.masthead) { background: var(--r-bg); color: var(--r-ink); }

/* Atmosphere: three slow blurred washes and a grain overlay, so a white document does not sit
   on a flat white screen. Both are inert — pointer-events off, aria-hidden. */
.aurora { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.aurora span { position: absolute; border-radius: 50%; filter: blur(100px); opacity: .55;
               animation: drift 26s ease-in-out infinite; }
.aurora .a1 { width: 55vw; height: 55vw; left: -15vw; top: -22vw;
              background: radial-gradient(circle, #DAD3FF, transparent 66%); }
.aurora .a2 { width: 52vw; height: 52vw; right: -18vw; top: -12vw; animation-delay: -8s;
              background: radial-gradient(circle, #C6EEE9, transparent 66%); }
.aurora .a3 { width: 48vw; height: 48vw; left: 32vw; bottom: -26vw; animation-delay: -15s; opacity: .5;
              background: radial-gradient(circle, #FCE6C9, transparent 64%); }

@keyframes drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(6vw, 4vh) scale(1.12); }
    66% { transform: translate(-5vw, -3vh) scale(.94); }
}

.grain {
    position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .02;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
    .aurora span { animation: none; }
}

.masthead {
    position: relative; z-index: 2;
    display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
    padding: 20px max(28px, calc((100vw - 1100px) / 2 + 28px));
    background: linear-gradient(120deg, rgba(86, 71, 196, .07), rgba(14, 158, 147, .05));
    border-bottom: 1px solid var(--r-stroke);
}
.masthead .logo { font-family: var(--r-display); font-weight: 600; font-size: 18px; letter-spacing: -.01em; }
.mast-meta { text-align: right; }
.mast-meta .eyebrow { font-family: var(--r-label); font-size: 10.5px; letter-spacing: .26em;
                      text-transform: uppercase; color: var(--r-brass); }
.mast-meta .wk { font-family: var(--r-display); font-size: 16px; font-weight: 600; margin-top: 2px; }

.wrap { position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; padding: 0 28px 60px; }

.titleband { padding: 30px 0 6px; }
.titleband .eyebrow {
    font-family: var(--r-label); font-size: 12px; letter-spacing: .32em; text-transform: uppercase;
    color: var(--r-teal-dim); margin-bottom: 12px; display: flex; align-items: center; gap: 10px;
}
.titleband .eyebrow::before { content: ""; width: 30px; height: 1px; background: var(--r-teal-dim); }
.titleband h1 {
    font-family: var(--r-display); font-weight: 600; font-size: clamp(30px, 4.4vw, 48px);
    line-height: 1.05; letter-spacing: -.01em; margin: 0;
}

.rtoolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 22px 0 8px;
    font-family: var(--r-label); font-size: 11.5px;
}
.rtoolbar label { color: var(--r-muted-dim); letter-spacing: .06em; text-transform: uppercase; }
.rtoolbar input[type=date] {
    font: inherit; color: var(--r-ink); background: #fff; border: 1px solid var(--r-stroke-hi);
    border-radius: 9px; padding: 7px 10px; width: auto; color-scheme: light;
}
.rtoolbar input[type=date]:focus { outline: none; border-color: var(--r-teal); box-shadow: none; }
.rtoolbar .arrow { color: var(--r-muted-dim); }
.rtoolbar .spacer { flex: 1 1 auto; }

.rbtn {
    font-family: var(--r-label); font-size: 11.5px; font-weight: 600; letter-spacing: .03em;
    color: var(--r-ink); background: #fff; border: 1px solid var(--r-stroke-hi); border-radius: 9px;
    padding: 8px 13px; cursor: pointer; text-decoration: none; display: inline-block;
    transition: .18s; box-shadow: 0 1px 2px rgba(30, 40, 80, .05);
}
.rbtn:hover { border-color: var(--r-teal); color: var(--r-teal-dim); transform: translateY(-1px); }
.rbtn.primary { background: linear-gradient(96deg, var(--r-teal), var(--r-indigo)); color: #fff; border-color: transparent; }

/* The headline panel. The sheen on its top edge is the only thing on the page that moves
   without being asked, and it is three pixels tall. */
.overall {
    margin-top: 20px; display: grid; grid-template-columns: auto 1fr; gap: 34px; align-items: center;
    background: #fff; border: 1px solid var(--r-stroke); border-radius: var(--r-radius);
    padding: 24px 32px; position: relative; overflow: hidden; box-shadow: var(--r-shadow);
}
.overall::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: linear-gradient(90deg, var(--r-brass), var(--r-teal), var(--r-indigo));
    background-size: 220% 100%; animation: sheen 8s linear infinite;
}
@keyframes sheen { to { background-position: -200% 0; } }

.overall .ov-lbl { font-family: var(--r-label); font-size: 10.5px; letter-spacing: .14em;
                   text-transform: uppercase; color: var(--r-muted); }
.overall .ov-pct { font-family: var(--r-display); font-weight: 600; font-size: 56px; line-height: 1;
                   color: var(--r-teal-dim); white-space: nowrap; margin-top: 6px; }
.overall .ov-pct small { font-size: 22px; color: var(--r-muted); font-weight: 500; }
.overall .ov-bar { height: 14px; border-radius: 100px; background: rgba(18, 24, 43, .08); margin-top: 6px; }
.overall .ov-bar i {
    display: block; height: 100%; border-radius: 100px; position: relative;
    background: linear-gradient(90deg, var(--r-orange), var(--r-brass-hi), var(--r-teal));
}
.overall .ov-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.overall .ov-chips span {
    font-family: var(--r-label); font-size: 10.5px; border: 1px solid var(--r-stroke);
    border-radius: 100px; padding: 4px 12px; background: #F7F9FE;
}
.overall .ov-chips span.done { color: var(--r-green); border-color: rgba(31, 155, 103, .35); background: rgba(31, 155, 103, .08); }
.overall .ov-chips span.now { color: var(--r-brass); border-color: rgba(176, 119, 20, .35); background: rgba(176, 119, 20, .08); }

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 20px; }
.kpi {
    background: var(--r-panel); border: 1px solid var(--r-stroke); border-radius: var(--r-radius);
    padding: 18px 20px 16px; box-shadow: 0 12px 30px -22px rgba(30, 40, 80, .4);
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), border-color .45s, box-shadow .45s;
}
.kpi:hover { transform: translateY(-5px); border-color: var(--r-stroke-hi);
             box-shadow: 0 26px 52px -26px rgba(30, 40, 80, .4); }
.kpi .k-lbl { font-family: var(--r-label); font-size: 10px; letter-spacing: .13em;
              text-transform: uppercase; color: var(--r-muted); }
.kpi .k-val { font-family: var(--r-display); font-weight: 600; font-size: 30px; line-height: 1; margin-top: 11px; }

.c-brass { color: var(--r-brass); } .c-teal { color: var(--r-teal-dim); }
.c-green { color: var(--r-green); } .c-indigo { color: var(--r-indigo); } .c-red { color: var(--r-red); }

/* Section numbers come from the document, not from component state. The week-by-week panel
   only renders once there are two weeks to compare, so the numbering has to close over a gap —
   a counter does that by construction, where a field incremented during render had to be
   manually reset and renumbered itself on any re-render. */
.wrap { counter-reset: section; }
.sec-h .n::before { counter-increment: section; content: counter(section, decimal-leading-zero); }

.sec-h { display: flex; align-items: baseline; gap: 14px; margin: 40px 0 18px; }
.sec-h .n { font-family: var(--r-label); font-size: 12px; color: var(--r-brass); letter-spacing: .1em; }
.sec-h h3 { font-family: var(--r-display); font-weight: 600; font-size: 22px; letter-spacing: -.01em; margin: 0; }
.sec-h .rule {
    flex: 1; height: 1px; background-size: 200% 100%; animation: sheen 7s linear infinite;
    background-image: linear-gradient(90deg, var(--r-stroke) 0%, var(--r-stroke-hi) 50%, var(--r-stroke) 100%);
}

.rpanel, .fbars {
    background: var(--r-panel); border: 1px solid var(--r-stroke); border-radius: var(--r-radius);
    padding: 22px 24px; box-shadow: var(--r-shadow);
}
.fbars { display: flex; flex-direction: column; gap: 16px; }
.rmuted { color: var(--r-muted); font-size: 13px; margin: 0; }

.fbar .fb-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.fbar .fb-nm { font-weight: 600; font-size: 14px; }
.fbar .fb-amt { font-family: var(--r-display); font-weight: 600; font-size: 19px; }
.fbar .fb-track { height: 14px; border-radius: 100px; background: rgba(18, 24, 43, .07); overflow: hidden; }
.fbar .fb-track i { display: block; height: 100%; border-radius: 100px; }
.fbar .fb-meta { margin-top: 7px; font-family: var(--r-label); font-size: 10.5px;
                 letter-spacing: .05em; color: var(--r-muted-dim); }

.bar-teal { background: linear-gradient(90deg, var(--r-teal-dim), var(--r-teal)); }
.bar-indigo { background: linear-gradient(90deg, #5647C4, #8C7EFF); }
.bar-brass { background: linear-gradient(90deg, var(--r-orange), var(--r-brass-hi)); }

.barchart { display: flex; align-items: flex-end; gap: 18px; padding-top: 22px; }
.bc-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.bc-plot { height: 180px; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.bc-bar { position: relative; width: 64%; max-width: 74px; min-height: 6px; border-radius: 10px 10px 0 0; }
.bc-count { position: absolute; top: -24px; left: 0; right: 0; text-align: center;
            font-family: var(--r-display); font-weight: 600; font-size: 18px; color: var(--r-ink); }
.bc-money { margin-top: 9px; font-family: var(--r-label); font-size: 10.5px; letter-spacing: .04em;
            color: var(--r-muted-dim); text-align: center; white-space: nowrap; }
.bc-xlbl { margin-top: 4px; font-weight: 600; font-size: 13px; text-align: center; }

.bc-amber { background: linear-gradient(180deg, #F7C25A, var(--r-orange)); }
.bc-indigo { background: linear-gradient(180deg, #8C7EFF, #5647C4); }
.bc-green { background: linear-gradient(180deg, #5AD199, #1F9B67); }
.bc-red { background: linear-gradient(180deg, #F0706E, #D14A48); }
.bc-teal { background: linear-gradient(180deg, var(--r-teal), var(--r-teal-dim)); }
.bc-blue { background: linear-gradient(180deg, #6AA8FF, #3B6FD4); }
.bc-slate { background: linear-gradient(180deg, #9AA6B2, #5B6672); }

.rmsg {
    background: var(--r-panel); border: 1px solid var(--r-stroke); border-radius: var(--r-radius);
    padding: 40px 28px; text-align: center; color: var(--r-muted); margin-top: 24px; box-shadow: var(--r-shadow);
}
.rmsg strong { color: var(--r-ink); font-family: var(--r-display); font-weight: 600; font-size: 18px; display: block; }
.rmsg p { margin: 6px 0 0; }

.rfooter {
    position: relative; z-index: 2; max-width: 1100px; margin: 34px auto 0; padding: 20px 28px;
    border-top: 1px solid var(--r-stroke); display: flex; justify-content: space-between;
    font-family: var(--r-label); font-size: 10.5px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--r-muted-dim);
}
.rfooter a { color: var(--r-teal-dim); text-decoration: none; }

@media (max-width: 860px) {
    .overall { grid-template-columns: 1fr; gap: 18px; }
    .kpis { grid-template-columns: repeat(2, 1fr); }
    .barchart { gap: 8px; }
    .bc-xlbl, .bc-money { font-size: 10px; }
}

/* ───────────────────────────────────────────── week over week, and the pipeline tile */

.kpi .k-sub { font-family: var(--r-label); font-size: 10.5px; letter-spacing: .04em;
              color: var(--r-muted); margin-top: 7px; }

/* Two bars per week on one scale: what the week aimed at, and what it brought in. The gap
   between them IS the reading, so they overlap rather than sitting side by side.
   
   Built ON .barchart rather than beside it — same flex skeleton, same column, same x-label —
   so these rules are only the differences. Two copies of the skeleton meant every responsive
   or spacing fix to the report's charts had to be made twice. */
.trend { gap: 10px; padding-top: 12px; overflow-x: auto; }
.trend .tr-col { min-width: 26px; }
.trend .tr-plot { height: 130px; position: relative; }
.tr-goal, .tr-in { position: absolute; bottom: 0; border-radius: 5px 5px 0 0; }
.tr-goal { width: 76%; max-width: 44px; background: rgba(30, 40, 80, .13); }
.tr-in { width: 46%; max-width: 26px; background: linear-gradient(180deg, var(--r-teal), var(--r-teal-dim)); }
.tr-xlbl { font-family: var(--r-label); font-size: 10px; font-weight: 400; letter-spacing: .03em;
           color: var(--r-muted); white-space: nowrap; }

.trend-key { display: flex; gap: 18px; margin-top: 14px; font-family: var(--r-label);
             font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--r-muted); }
.trend-key span { display: inline-flex; align-items: center; gap: 7px; }
.sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.sw-goal { background: rgba(30, 40, 80, .13); }
.sw-in { background: linear-gradient(180deg, var(--r-teal), var(--r-teal-dim)); }

/* ───────────────────────────────────────────────────────── mobile, report */

@media (max-width: 620px) {
    .kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
    .kpi { padding: 14px; }
    .kpi .k-val { font-size: 24px; }
    .overall { padding: 18px; }
    .overall .ov-pct { font-size: 42px; }
    .rtoolbar { flex-wrap: wrap; gap: 8px; }
    .rtoolbar .spacer { display: none; }
    .rbtn { flex: 1 1 auto; text-align: center; }

    /* Bars get a floor rather than a share of the width: five statuses in 340px is a
       column too thin to carry its own label. The row scrolls instead. */
    /* overflow-x also makes the Y axis clip (a non-visible overflow on one axis forces the
       other to compute as auto), and the count sits 24px above its bar — so the tallest
       column's number was being cut off. The default 22px of padding is 2px short of it. */
    .barchart { overflow-x: auto; padding-top: 28px; }
    .bc-col { flex: 0 0 62px; }
    .bc-plot { height: 130px; }
    .trend .tr-col { flex: 0 0 30px; }
}

/* What the whole page is scoped to, said once under the toolbar. */
.rscope { margin: 14px 0 0; font-family: var(--r-label); font-size: 12px; letter-spacing: .03em;
          color: var(--r-muted); }
.rscope strong { color: var(--r-teal-dim); }

.fb-state { display: inline-block; padding: 0 5px; margin-right: 6px; border-radius: 3px;
            background: rgba(30, 40, 80, .07); color: var(--r-ink); font-weight: 600; }

/* "there is more than this" — said once under a capped list rather than left for somebody to
   wonder whether 12 is all the campaign has. */
.rmore { margin: 12px 0 0; font-family: var(--r-label); font-size: 11px; letter-spacing: .04em;
         color: var(--r-muted-dim); }