/* Weekly Report tab (2026-07-14). Standalone, namespaced `wr-*`; uses the app's theme
   tokens, so light/dark and all three palettes come for free. Responsive at 760px.
   Hard-codes no colours — every value is a bare token. The old `var(--token, #hex)`
   fallbacks were removed: the token always resolves, so the hex was dead code that had
   drifted a palette behind, and it would have painted a dark value in light mode on the
   one path where it did fire. Radii come off the shared scale — the cards take the card
   rung, the week buttons the button rung, the count/where/sha badges the chip rung.

   SURFACE v3: this is the most reading-heavy page on the site, so it is the one that most
   needed the sheet broken up. The week picker, the lede and each category are now discrete
   cards floating on the ground with a gap between them, and the rules that used to divide
   them (the picker's right border, the hero's bottom border) are gone — a card edge already
   says "different thing". Rules survive only INSIDE a card, between the item rows of one
   list, where they separate peers rather than sections.

   Type follows the design's ranking: the week and the headline are the serif (via
   surface.css), every label is tracked mono capitals in --colhead with a plain-English
   gloss under it, every sha and count is mono and tabular, and running prose is capped
   at 68-74ch so a wide viewport does not stretch a sentence past reading width. */

#view-weekly-report { padding: 0; }

.wr-wrap {
  display: flex; gap: clamp(14px, 1.8vw, 24px); align-items: flex-start;
  padding: 18px 4px;
}

/* The dead-end states (no grant, nothing built, a week that would not load) get the
   design's dashed "nothing settled here" box rather than bare centred text. */
.wr-empty {
  flex: 1 1 auto;
  padding: 40px 24px; color: var(--text-muted); font-size: 14px; text-align: center;
  border: 1px dashed var(--line); border-radius: var(--r-lg);
}

/* week picker (left rail) — a card, not a bordered gutter */
.wr-weeks {
  flex: 0 0 220px; display: flex; flex-direction: column; gap: 2px;
  padding: 14px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.wr-weeks-h {
  font: 500 10px/1.4 var(--font-mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--colhead); padding: 2px 8px 10px;
}
.wr-week {
  text-align: left; font-size: 13px; padding: 7px 9px; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: transparent; color: var(--text-2);
  transition: background-color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out),
              color var(--dur-micro) var(--ease-out);
}
.wr-week:hover { background: var(--surface-sunken); border-color: var(--accent-edge); }
/* Selected has to survive on a card whose fill IS --surface, so it takes the accent tint
   rather than a raised surface (which is the same colour as the card it sits on). */
.wr-week.is-sel {
  background: var(--diff-hi); color: var(--text);
  border-color: var(--accent);
}

/* report body — cards stacked with a gap, never a continuous sheet */
.wr-report {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: clamp(12px, 1.4vw, 18px);
}

.wr-hero {
  padding: clamp(16px, 1.5vw, 22px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.wr-week-of {
  font: 500 10px/1.4 var(--font-mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--colhead); margin-bottom: 8px;
}
/* Serif, weight and optical tracking come from surface.css's headline rule; the size and
   the space under it are this page's business. */
.wr-headline {
  font-size: 24px; line-height: 1.3; margin: 0 0 10px;
  color: var(--text);
}
.wr-overview {
  font-size: 14px; line-height: 1.65; margin: 0; max-width: 68ch;
  color: var(--text-2); text-wrap: pretty;
}

/* sections */
.wr-sec {
  padding: clamp(16px, 1.5vw, 22px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
/* The label half of the design's label + gloss pairing: tracked mono capitals, quiet
   enough that they introduce the list rather than compete with it. */
.wr-sec-h {
  font: 600 10.5px/1.4 var(--font-mono); letter-spacing: .16em; text-transform: uppercase;
  margin: 0 0 4px; color: var(--text);
}
.wr-count {
  display: inline-block; margin-left: 6px;
  font: 500 10px/1.4 var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: .04em;
  padding: 1px 6px;
  border: 1px solid var(--line); border-radius: var(--r-xs);
  color: var(--colhead);
}
/* …and the gloss half: plain language, sentence case, so the capitals above never read
   as jargon. */
.wr-sec-blurb {
  font: 400 12.5px/1.5 var(--font-sans); color: var(--text-muted); margin-bottom: 14px;
}

.wr-items { list-style: none; margin: 0; padding: 0; }
/* A rule between peers INSIDE one card is the one place a hairline still belongs. The
   first row loses it, so the list does not open with a second line under the blurb. */
.wr-item {
  padding: 14px 0; border-top: 1px solid var(--line);
}
.wr-item:first-child { padding-top: 0; border-top: 0; }
.wr-item-head { margin-bottom: 7px; }

/* the tab badge — the whole point: it tells the reader where to go and look */
.wr-where {
  display: inline-block;
  font: 500 10px/1.4 var(--font-sans); letter-spacing: .06em;
  padding: 3px 8px;
  border-radius: var(--r-sm); border: 1px solid var(--accent);
  color: var(--accent); white-space: nowrap;
}
.wr-where--none {
  border-color: var(--line); color: var(--colhead);
}

.wr-what {
  font-size: 14px; line-height: 1.6; color: var(--text); max-width: 74ch;
  text-wrap: pretty;
}
.wr-find {
  margin-top: 7px; font-size: 12.5px; line-height: 1.55;
  color: var(--text-2); max-width: 74ch; text-wrap: pretty;
}
.wr-find-k {
  font: 500 10px/1.4 var(--font-mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--colhead); margin-right: 5px;
}

.wr-src { margin-top: 9px; font-size: 11px; }
.wr-src-k {
  font: 500 10px/1.4 var(--font-mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--colhead); margin-right: 6px;
}
.wr-sha {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 10.5px;
  padding: 2px 6px; margin-right: 4px; text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--r-xs);
  color: var(--colhead);
  transition: border-color var(--dur-micro) var(--ease-out),
              color var(--dur-micro) var(--ease-out);
}
.wr-sha:hover { border-color: var(--accent); color: var(--accent); }

/* Provenance and disclosure sit on the GROUND under the cards, not in one: they qualify
   the whole report rather than belonging to any section of it. */
.wr-foot { padding: 6px 4px 8px; font-size: 12px; }
.wr-warn { color: var(--warn-text); }

/* The short performance label. Only the separator and spacing live here — the
   `.g10-disc-*` markup inside is sized and coloured by disclaimer.css, so an archived
   week's stamped label and the live one are indistinguishable. */
.wr-disclaimer {
  margin-top: 10px; padding-top: 10px; max-width: 74ch;
  border-top: 1px solid var(--line);
}

/* responsive — the picker becomes a horizontal strip above the report */
@media (max-width: 760px) {
  .wr-wrap { flex-direction: column; gap: 14px; }
  .wr-weeks {
    flex: 1 1 auto; width: 100%; flex-direction: row; overflow-x: auto;
    gap: 6px; padding: 10px 12px;
  }
  .wr-weeks-h { display: none; }
  .wr-week { white-space: nowrap; flex: 0 0 auto; }
  .wr-headline { font-size: 20px; }
  .wr-what, .wr-overview, .wr-find, .wr-disclaimer { max-width: 100%; }
}