/* AFS program finance reports. Colours are taken from the official AFS logo artwork (AFS Logos/):
   burgundy #9D0133 (mark and wordmark), teal #22A58D (bilingual tagline), and #811F3A, the ground the
   reversed logo is drawn for. Teal is 3:1 on white: rules and focus only, never text. */
:root {
  --brand: #9d0133;
  --brand-deep: #811f3a;     /* masthead: reversed-logo ground */
  --brand-ink: #ffffff;
  --brand-soft: #f6e6eb;     /* burgundy tint for hover and selection */
  --teal: #22a58d;

  --ground: #ffffff;
  --ground-alt: #f5f7f8;
  --ink: #15202b;
  --ink-2: #4a5866;          /* secondary text, 7.4:1 on white */
  --rule: #c9d1d8;
  --rule-strong: #15202b;
  --focus: #22a58d;
  --warn-ink: #7a4b00;
  --warn-ground: #fff4dc;

  /* Chart colours, checked with the dataviz validator against #ffffff (chroma, lightness band,
     CVD dE 10.9, normal-vision dE 25.6, contrast). They colour marks only; text never wears them. */
  --c-actual: #008a70;       /* deepened AFS teal, 4.3:1 */
  --c-bad: #c2461b;          /* over budget / revenue short, 5.0:1 */
  --c-budget: #4a5866;       /* reference: budget line, Budget YTD tick */
  --c-prior: #9aa6b1;        /* context: last year */
  --c-track: #e4e9ed;        /* annual budget track */

  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --step--1: 0.8125rem;
  --step-0: 0.9375rem;
  --step-1: 1.0625rem;
  --step-2: 1.375rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --radius: 4px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground-alt);
  color: var(--ink);
  font: 400 var(--step-0)/1.45 var(--font);
  font-variant-numeric: lining-nums;
}
::selection { background: var(--brand-soft); color: var(--ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
a { color: inherit; text-underline-offset: 0.2em; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Masthead (the frame) ---- */
.masthead { background: var(--brand-deep); color: var(--brand-ink); }
.masthead__inner {
  max-width: 96rem; margin: 0 auto; padding: var(--space-3) var(--space-6);
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
}
.wordmark { display: block; line-height: 0; }
.wordmark img { height: 2.5rem; width: auto; }
.wordmark:focus-visible { outline-color: var(--brand-ink); }
.masthead__product { padding-left: var(--space-4); border-left: 1px solid rgb(255 255 255 / 0.35); }
.freshness { margin: 0 0 0 auto; font-size: var(--step--1); opacity: 0.92; }
.freshness--stale {
  opacity: 1; background: var(--warn-ground); color: var(--warn-ink);
  padding: var(--space-1) var(--space-2); border-radius: var(--radius);
}

.account { display: flex; align-items: center; gap: var(--space-3); font-size: var(--step--1); }
.masthead__product + .account { margin-left: auto; }
.freshness + .account { padding-left: var(--space-4); border-left: 1px solid rgb(255 255 255 / 0.35); }
.account form { margin: 0; }
.account__link {
  color: var(--brand-ink); background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: rgb(255 255 255 / 0.5);
}
.account__link:hover { text-decoration-color: currentColor; }
.account__link:focus-visible { outline-color: var(--brand-ink); }
.sheet--message { max-width: 48rem; }

/* ---- Sign-in screen and home (R2) ---- */
.signin { margin-top: var(--space-8); }
.signin__lede { margin: var(--space-3) 0 var(--space-6); max-width: 46ch; }
.reports { list-style: none; margin: var(--space-6) 0 0; padding: 0; border-top: 1px solid var(--rule); }
.reports__item { border-bottom: 1px solid var(--rule); }
.reports__link {
  display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-4);
  padding: var(--space-4) var(--space-2); color: var(--ink); text-decoration: none;
  transition: background-color 150ms ease-out;
}
.reports__link:hover { background: var(--brand-soft); }
.reports__title { font-weight: 600; font-size: var(--step-1); color: var(--brand); }
.reports__link:hover .reports__title { text-decoration: underline; text-underline-offset: 0.2em; }
.reports__scope { color: var(--ink-2); font-size: var(--step--1); align-self: center; font-variant-numeric: tabular-nums; }
.reports__desc { grid-column: 1 / -1; color: var(--ink-2); max-width: 70ch; }

/* ---- Toolbar ---- */
.toolbar {
  max-width: 96rem; margin: 0 auto; padding: var(--space-4) var(--space-6) 0;
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
}
.picker { display: flex; align-items: center; gap: var(--space-2); flex: 1 1 22rem; min-width: 0; }
.picker__label { font-weight: 600; }
.picker select {
  flex: 1 1 auto; min-width: 0; max-width: 34rem;
  font: inherit; color: var(--ink); background: var(--ground);
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: var(--space-2) var(--space-3); min-height: 2.5rem;
}
.picker select:hover { border-color: var(--ink-2); }
.picker__go--optional { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.picker__go--optional:focus-visible { position: static; width: auto; height: auto; clip: auto; }
.stepper { display: flex; align-items: center; gap: var(--space-2); }
.actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.stepper__position { color: var(--ink-2); font-size: var(--step--1); min-width: 5.5em; text-align: center;
  font-variant-numeric: tabular-nums; }

.button {
  display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 var(--space-4);
  font: 600 var(--step-0)/1 var(--font); text-decoration: none; cursor: pointer;
  background: var(--brand); color: var(--brand-ink); border: 1px solid var(--brand); border-radius: var(--radius);
  transition: background-color 150ms ease-out, border-color 150ms ease-out;
}
.button:hover { background: color-mix(in srgb, var(--brand) 85%, black); }
.button--quiet { background: var(--ground); color: var(--ink); border-color: var(--rule); }
.button--quiet:hover { background: var(--brand-soft); border-color: var(--ink-2); }
.button[aria-disabled="true"] { color: var(--ink-2); background: transparent; border-color: transparent; cursor: default; }

/* ---- View switch: Overview / Workbook view ---- */
.switch { display: inline-flex; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--ground); padding: 2px; }
.switch__opt {
  display: inline-flex; align-items: center; min-height: calc(2.5rem - 6px); padding: 0 var(--space-3);
  font-weight: 600; text-decoration: none; color: var(--ink-2); border-radius: 3px;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}
.switch__opt:hover { color: var(--ink); background: var(--brand-soft); }
.switch__opt[aria-current="true"] { background: var(--brand); color: var(--brand-ink); }

/* ---- The statement (the document) ---- */
.sheet {
  max-width: 96rem; margin: var(--space-4) auto var(--space-8); padding: var(--space-8) var(--space-6);
  background: var(--ground);
  box-shadow: 0 1px 2px rgb(21 32 43 / 0.06), 0 4px 16px rgb(21 32 43 / 0.06);
}
.sheet__head { margin-bottom: var(--space-6); padding-bottom: var(--space-4); border-bottom: 2px solid var(--teal); }
.sheet__logo { display: block; height: 3.75rem; width: auto; margin-bottom: var(--space-4); }
.sheet__program { margin: 0; font-size: var(--step-2); line-height: 1.2; text-wrap: balance; }
.sheet__period { margin: var(--space-1) 0 0; color: var(--ink-2); }
.note { color: var(--ink-2); margin: 0 0 var(--space-4); max-width: 70ch; }

/* Scrolls sideways only below the width the statement needs, so the sticky header row works on desktop. */
.statement-scroll { overflow-x: visible; }
.statement {
  width: 100%; border-collapse: collapse; min-width: 62rem;
  font-variant-numeric: tabular-nums lining-nums;
}
.c-acct { width: 4.5rem; }
.c-name { width: auto; }
.c-num { width: 9.5rem; }
.statement th, .statement td { padding: 0.3rem var(--space-2); vertical-align: baseline; text-align: left; }
.statement .num { text-align: right; white-space: nowrap; }
.statement thead th {
  position: sticky; top: 0; z-index: 1; background: var(--ground);
  font-size: var(--step--1); font-weight: 600; line-height: 1.25; vertical-align: bottom;
  box-shadow: inset 0 -2px 0 var(--rule-strong); padding-bottom: var(--space-2);
}
.statement thead th.num { white-space: normal; }
.section__title th { padding-top: var(--space-6); font-weight: 700; font-size: var(--step-1); }
.section:first-of-type .section__title th { padding-top: var(--space-3); }
.line .acct { color: var(--ink-2); }
.line .name { font-weight: 400; }
.line:hover td, .line:hover th { background: var(--ground-alt); }
.total th, .total td { font-weight: 700; border-top: 1px solid var(--rule-strong); }
.result th, .result td { font-weight: 700; padding-top: var(--space-4); }
.result tr th, .result tr td { border-bottom: 2px solid var(--brand); }
.result--final tr th, .result--final tr td { border-bottom: 4px double var(--brand); }
.sheet__foot { margin-top: var(--space-6); color: var(--ink-2); font-size: var(--step--1); }

/* ---- Summary Statement of Operations ---- */
.statement--ops { min-width: 60rem; }
.statement--ops .c-desc { width: auto; }
.statement--ops .c-num { width: 7.75rem; }
.statement--ops th.name { min-width: 16rem; }
.ops__ref { display: block; margin-top: var(--space-1); font-weight: 400; color: var(--ink-2); }
.ops__heading th { padding-top: var(--space-4); font-weight: 700; font-size: var(--step-1); }
.ops__spacer td { padding: 0; height: var(--space-2); }
.statement--ops .line .name { padding-left: var(--space-4); }
.ops__grand th, .ops__grand td { border-bottom: 4px double var(--brand); padding-bottom: var(--space-2); }
.ops__dedicated .name { padding-left: var(--space-4); font-weight: 400; }
.ops__dedicated.total .name { padding-left: var(--space-2); font-weight: 700; }
.ops__check th, .ops__check td { color: var(--ink-2); }

/* ---- Overview ---- */
.ov { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-8); }
.ov__panel { padding: var(--space-6) 0; border-top: 1px solid var(--rule); min-width: 0; }
.ov__panel--pace, .ov__panel--trend { grid-column: 1 / -1; }
.ov__panel--pace { border-top: 0; padding-top: 0; }
.ov__h { margin: 0; font-size: var(--step-1); font-weight: 700; text-wrap: balance; }
.ov__h3 { font-weight: 600; margin-bottom: var(--space-2); }
.ov__sub { margin: var(--space-1) 0 var(--space-4); color: var(--ink-2); max-width: 70ch; }
.ov__foot { grid-column: 1 / -1; }

.legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: var(--space-3) 0 0; padding: 0;
  list-style: none; color: var(--ink-2); font-size: var(--step--1); }
.legend li { display: flex; align-items: center; gap: var(--space-2); }
.key { display: inline-block; flex: none; }
.key--actual, .key--good, .key--bad, .key--track { width: 14px; height: 10px; border-radius: 2px; }
.key--actual, .key--good { background: var(--c-actual); }
.key--bad { background: var(--c-bad); }
.key--track { background: var(--c-track); }
.key--tick { width: 2px; height: 14px; background: var(--c-budget); }
.key--budget-line { width: 18px; height: 2px; background: var(--c-budget); position: relative; }
.key--budget-line::after { content: ""; position: absolute; left: 5px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--c-budget); }
.key--prior-line { width: 18px; height: 2px; background: var(--c-prior); }

/* Bars: track = annual budget, fill = actual, tick = Budget YTD */
.bullets { display: grid; gap: var(--space-4); }
.bullet { display: grid; grid-template-columns: 11rem minmax(8rem, 1fr) minmax(14rem, auto); align-items: center; gap: var(--space-4); }
.bullets--shared .bullet { grid-template-columns: 11rem minmax(8rem, 1fr) minmax(12rem, auto); }
.bullet__label { font-weight: 600; }
.bullet__track { position: relative; height: 14px; }
.bullet--big .bullet__track { height: 22px; }
.bullet__annual { position: absolute; inset: 0 auto 0 0; width: var(--track); background: var(--c-track); border-radius: 0 4px 4px 0; }
.bullet__fill { position: absolute; top: 25%; bottom: 25%; left: 0; width: var(--fill); background: var(--c-actual); border-radius: 0 4px 4px 0; }
.bullet__tick { position: absolute; top: -4px; bottom: -4px; left: var(--tick); width: 2px; margin-left: -1px; background: var(--c-budget); box-shadow: 0 0 0 2px var(--ground); }
.bullet__value { font-variant-numeric: tabular-nums; }
.bullet__expected { display: block; color: var(--ink-2); font-size: var(--step--1); }
/* A bullet needs ~33rem for label | bar | value. In a narrower panel (the half-width category mix at 1024)
   the value moves under the bar. Screen above 50rem only: print sets its own columns, and narrower
   screens already stack every bullet into one column. */
@media screen and (min-width: 50.0625rem) {
  .bullets { container-type: inline-size; }
  @container (max-width: 34rem) {
    .bullet, .bullets--shared .bullet { grid-template-columns: minmax(6rem, 9rem) minmax(0, 1fr); row-gap: var(--space-1); }
    .bullet__value { grid-column: 2; }
  }
}

/* Monthly trend (SVG) */
.trends { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-8); margin-top: var(--space-4); }
.trend-fig { margin: 0; min-width: 0; }
.trend { display: block; width: 100%; height: auto; overflow: visible; }
.trend .grid { stroke: #e4e9ed; stroke-width: 1; }
.trend .grid--zero { stroke: #b6c0c8; }
.trend .tick { fill: var(--ink-2); font: 400 12px/1 var(--font); font-variant-numeric: tabular-nums; }
.trend .mark-actual { fill: var(--c-actual); }
.trend .line-budget, .trend .line-prior { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.trend .line-budget { stroke: var(--c-budget); }
.trend .line-prior { stroke: var(--c-prior); }
.trend .dot-budget { fill: var(--c-budget); stroke: var(--ground); stroke-width: 2; }
.trend .hit { fill: transparent; }
.trend .hit:hover, .trend .hit:focus-visible { fill: rgb(21 32 43 / 0.05); outline: none; }

/* Largest variances: one scale, bar length = size of the difference */
.variances { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.variance { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(4rem, 1fr) auto; align-items: center; gap: var(--space-3); }
.variance__name { text-decoration: none; min-width: 0; }
.variance__name:hover { text-decoration: underline; }
.variance__acct { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.variance__track { height: 12px; position: relative; }
.variance__bar { position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 0 4px 4px 0; background: var(--c-actual); }
.variance--bad .variance__bar { background: var(--c-bad); }
.variance__value { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

.table-view { margin-top: var(--space-3); font-size: var(--step--1); max-width: 100%; overflow-x: auto; }
.table-view summary { cursor: pointer; color: var(--ink-2); width: max-content; }
.table-view summary:hover { color: var(--ink); }
.mini { border-collapse: collapse; margin-top: var(--space-2); font-variant-numeric: tabular-nums; }
.mini th, .mini td { padding: 0.2rem 0.75rem 0.2rem 0; text-align: left; border-bottom: 1px solid var(--ground-alt); }
.mini .num { text-align: right; }

.tooltip {
  position: fixed; z-index: 10; pointer-events: none; padding: var(--space-2) var(--space-3);
  background: var(--ink); color: #fff; border-radius: var(--radius); font-size: var(--step--1);
  box-shadow: 0 2px 8px rgb(21 32 43 / 0.25); font-variant-numeric: tabular-nums;
}
.tooltip strong { display: block; margin-bottom: 2px; }
.line:target th, .line:target td, .line.is-target th, .line.is-target td { background: var(--brand-soft); }

/* Projector and small-laptop widths: tighter statement so all nine columns still fit. */
@media (max-width: 80rem) {
  .statement { font-size: var(--step--1); min-width: 54rem; }
  .c-num { width: 7.5rem; }
  .c-acct { width: 3.75rem; }
  .statement th, .statement td { padding-left: 0.375rem; padding-right: 0.375rem; }
}
@media (max-width: 64rem) {
  .trends { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 50rem) {
  .ov { grid-template-columns: minmax(0, 1fr); }
  .bullet, .bullets--shared .bullet { grid-template-columns: 1fr; gap: var(--space-1); }
}
@media (max-width: 60rem) {
  .statement-scroll { overflow-x: auto; }
  .statement thead th { position: static; }
}
@media (max-width: 40rem) {
  .masthead__inner, .toolbar { padding-left: var(--space-4); padding-right: var(--space-4); }
  .masthead__inner { gap: var(--space-2); }
  .masthead__product { display: none; }
  .freshness { margin-left: 0; flex-basis: 100%; }
  .freshness + .account { padding-left: 0; border-left: 0; }
  .sheet { padding: var(--space-6) var(--space-4); margin-top: var(--space-3); }
  .sheet__logo { height: 3rem; }
}

/* ---- Print: Letter landscape, the document only ---- */
@page { size: letter landscape; margin: 0.5in; }
@media print {
  body { background: #fff; font-size: 9pt; }
  .masthead, .toolbar, .tooltip, .table-view { display: none; }
  /* Print sets its own layout: the printable width trips the screen breakpoints. Target: page 1 =
     letterhead, pace and the two monthly charts; page 2 = variances and expenditure mix. */
  .ov { grid-template-columns: 1fr 1fr; column-gap: 0.35in; }
  .ov__panel { break-inside: avoid; padding: 0.1in 0; }
  .ov__panel--var { break-before: page; border-top: 0; }
  .ov__panel--mix { break-before: page; border-top: 0; }
  .ov__sub { margin-bottom: 0.06in; }
  .trends { grid-template-columns: 1fr 1fr; column-gap: 0.35in; margin-top: 0.05in; }
  .trend { max-height: 2.3in; }
  .bullets { gap: 0.08in; }
  .bullet { grid-template-columns: 1.3in minmax(0, 1fr) 2.6in; gap: 0.15in; }
  .bullets--shared .bullet { grid-template-columns: 1.1in minmax(0, 1fr) 1.75in; gap: 0.1in; }
  .bullets--shared .bullet__value, .bullet__expected { font-size: 8pt; }
  .bullets--shared { gap: 0.04in; }
  .sheet__foot { margin-top: 0.08in; }
  .ov__foot { margin: 0; }
  .bullet--big .bullet__track { height: 14px; }
  .legend { margin-top: 0.06in; }
  .trend .hit { display: none; }
  .sheet { box-shadow: none; margin: 0; padding: 0; max-width: none; }
  .statement-scroll { overflow: visible; }
  .statement { min-width: 0; }
  .statement thead { display: table-header-group; }
  .statement thead th { position: static; font-size: 8pt; box-shadow: none; border-bottom: 1.5pt solid var(--rule-strong); }
  .sheet__logo { height: 0.55in; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .c-num { width: 1.05in; }
  .c-acct { width: 0.55in; }
  .line:hover td, .line:hover th { background: none; }
  tr { break-inside: avoid; }
  .section__title { break-after: avoid; }
}