/* ==========================================================================
   WK-WEEKLY.CSS — Reports ▸ Work review (the wk-weekly.js document)
   ---------------------------------------------------------------------------
   Same slate palette and 1px #e6ecf2 borders as wk-timesheet, so this reads as
   the same product. A step up in base size because it gets projected in a
   meeting. Print rules at the bottom are not an afterthought — the printed
   sheet is what leaves the room.
   ========================================================================== */

.wr {
  --wr-ink: #0f172a;
  --wr-sub: #64748b;
  --wr-mut: #94a3b8;
  --wr-line: #e6ecf2;
  --wr-soft: #f8fafc;
  --wr-green: #649954;
  color: var(--wr-ink);
}

/* ── The hero ───────────────────────────────────────────────────────────────
   One elevated band carrying everything you need before anybody speaks: which
   period, WHICH GROUP, the four numbers, the move on the period before, and
   the faces
   of everyone in the report. It is the whole "quickly shows good data" job. */
.wr-hero {
  border: 1px solid var(--wr-line); border-radius: 18px; background: #fff;
  padding: 22px 24px 18px; position: relative; overflow: hidden;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px -18px rgba(15,23,42,.28);
}
/* A single hairline of brand across the top — enough to make it a document. */
.wr-hero::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--wr-green), #7c3aed 55%, #2563eb);
}
.wr-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.wr-hero-k { font-size: 11px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase; color: var(--wr-green); }
.wr-hero-t { margin: 5px 0 0; font-size: 32px; font-weight: 800; letter-spacing: -.7px; line-height: 1.05; }
.wr-hero-d { margin-top: 7px; font-size: 13px; color: var(--wr-sub); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wr-hero-sep { color: #cbd5e1; }
/* The GROUP. Named, not implied — this report is always "for that group of
   people", and a header that does not say which one is a header you cannot
   trust when the filters are on. */
.wr-hero-g {
  font-weight: 700; color: #35502c; background: rgba(100,153,84,.10);
  border: 1px solid rgba(100,153,84,.22); border-radius: 999px; padding: 3px 11px;
}
.wr-hero-r { display: flex; align-items: center; gap: 10px; }

.wr-step { display: inline-flex; border: 1px solid var(--wr-line); border-radius: 10px; overflow: hidden; background: #fff; }
.wr-step .wr-ib { border: 0; border-radius: 0; border-right: 1px solid var(--wr-line); }
.wr-step .wr-ib:last-child { border-right: 0; }
.wr-ib {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 34px; padding: 0 11px; background: #fff; cursor: pointer;
  border: 1px solid var(--wr-line); border-radius: 10px;
  font: inherit; font-size: 12.5px; font-weight: 600; color: #334155;
  transition: background .12s ease, color .12s ease;
}
.wr-ib svg { width: 16px; height: 16px; }
.wr-ib:hover:not(:disabled) { background: var(--wr-soft); color: var(--wr-ink); }
.wr-ib:disabled { opacity: .35; cursor: default; }
.wr-ib--sq { width: 38px; padding: 0; }

.wr-hero-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid #f1f5f9;
}
.wr-hero-foot:empty { display: none; }
.wr-delta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; padding: 5px 12px; border-radius: 999px;
}
.wr-delta svg { width: 14px; height: 14px; }
.wr-delta.is-up   { color: #35502c; background: rgba(100,153,84,.12); }
.wr-delta.is-down { color: #9a3412; background: rgba(217,119,6,.12); }
.wr-delta.is-flat { color: var(--wr-sub); background: #eef2f7; }

/* Faces of everyone in the report — a glance at who is in it, and a jump strip
   when you are walking the room. */
/* ⚠️ A plain row, NOT an overlapped avatar stack. `gap: -6px` is not valid CSS
   (it was dropped silently) and the negative margins alone then buried the
   middle faces behind their neighbours — in a report whose job is to show who
   is in it, a hidden face is a bug, not a style. */
.wr-faces { display: flex; align-items: center; gap: 5px; margin-left: auto; }
.wr-face {
  border: 0; background: transparent; padding: 0; cursor: pointer;
  border-radius: 50%; line-height: 0; transition: transform .14s ease;
}
.wr-face:hover { transform: translateY(-2px) scale(1.08); }
.wr-face:focus-visible { outline: 2px solid var(--wr-green); outline-offset: 2px; }

/* ── The selection bar ──────────────────────────────────────────────────────
   Reuses the shared fin-tb-* picker row (search · scope · person · clear) so
   this screen cannot drift from Time & Billing.
   ⚠️ ITS PERIOD SELECT IS SUPPRESSED ON PURPOSE — same trick the timesheet
   toolbar uses. The period is chosen ONCE, in the report wizard, and handed
   to the builder - two competing period controls is how a report ends up
   showing a window nobody chose. */
.wr-tb {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin: 16px 0 0; padding: 11px 12px;
  border: 1px solid var(--wr-line); border-radius: 12px; background: var(--wr-soft);
}
.wr-tb .fin-tb-filter--period,
.wr-tb .fin-tb-range { display: none !important; }

/* ── Tab strip ──────────────────────────────────────────────────────────── */
.wr-tabs { display: flex; gap: 4px; margin: 16px 0 20px; border-bottom: 1px solid var(--wr-line); }
.wr-tab {
  position: relative; border: 0; background: transparent; cursor: pointer; font: inherit;
  font-size: 13.5px; font-weight: 650; color: var(--wr-sub);
  padding: 9px 15px 12px; border-radius: 8px 8px 0 0;
}
.wr-tab:hover { color: var(--wr-ink); background: var(--wr-soft); }
.wr-tab.is-on { color: var(--wr-ink); font-weight: 750; }
.wr-tab.is-on::after {
  content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px;
  height: 2px; border-radius: 2px; background: var(--wr-green);
}
.wr-tab-n {
  display: inline-block; margin-left: 7px; padding: 1px 7px; border-radius: 999px;
  background: #eef2f7; color: var(--wr-sub); font-size: 11px; font-weight: 700; vertical-align: 1px;
}
.wr-tab.is-on .wr-tab-n { background: rgba(100,153,84,.14); color: #35502c; }

/* ── Scorecards. ONE ROW. ───────────────────────────────────────────────── */
.wr-k { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.wr-hero .wr-k { margin-top: 18px; }
.wr-m { margin-bottom: 22px; }
@media (max-width: 900px) { .wr-k { grid-template-columns: repeat(2, 1fr); } }
.wr-kc {
  border: 1px solid var(--wr-line); border-top: 3px solid var(--c, var(--wr-green));
  border-radius: 12px; padding: 13px 15px; background: #fff;
}
.wr-kv { font-size: 26px; font-weight: 800; line-height: 1; letter-spacing: -.6px; color: var(--c, var(--wr-ink)); }
.wr-ku { font-size: .58em; font-weight: 700; margin-left: 1px; }
.wr-kl { font-size: 11.5px; font-weight: 700; color: #475569; margin-top: 6px; }
.wr-ks { font-size: 10.5px; color: var(--wr-mut); margin-top: 2px; }

/* ── Body columns ────────────────────────────────────────────────────────
   ⚠️ NOT `1fr 330px` ANY MORE. A fixed 330px rail beside a fluid column is what
   a 720px document needs; at full bleed it left the main column at 1400px and
   the rail as a sliver. Everything is a fluid track now, and the count of
   tracks comes off the available width rather than off the tab. */
.wr-run, .wr-pl, .wr-fin { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(300px, 1fr); gap: 20px; align-items: start; }
@media (max-width: 1150px) { .wr-run, .wr-pl, .wr-fin { grid-template-columns: minmax(0, 1fr); } }

/* The general full-width column set. `--2` is the readable maximum for blocks
   of rows; anything wider and the eye loses the line it is on. */
.wr-cols { display: grid; gap: 18px; align-items: start; }
/* 440px, not less: a `.wr-blk` at 440 leaves 408px inside, and `.wr-pl-row`'s
   floor is 360. Narrowing this track is how the task titles collapse. */
.wr-cols--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); }
/* FOUR GROUPS WANT AN EVEN GRID. Parked has exactly four, and at 440px they lay
   out 3 + 1 with a hole beside the fourth. A wider minimum gives 2 x 2. */
.wr-cols--pk { grid-template-columns: repeat(auto-fit, minmax(min(100%, 560px), 1fr)); }
@media (max-width: 780px) { .wr-cols--2 { grid-template-columns: minmax(0, 1fr); } }
/* A block: the one surface every section on every tab sits on. */
.wr-blk {
  border: 1px solid var(--wr-line); border-radius: 14px; background: #fff;
  padding: 15px 16px; min-width: 0;
}
.wr-blk + .wr-blk { margin-top: 0; }
.wr-blk.is-bad { border-left: 3px solid #dc2626; }
.wr-blk.is-warn { border-left: 3px solid #d97706; }
.wr-blk.is-mute { border-left: 3px solid #cbd5e1; }
.wr-h4 {
  margin: 0 0 4px; font-size: 12.5px; font-weight: 800; letter-spacing: .2px;
  text-transform: uppercase; color: #475569;
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}

.wr-run-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 11px; flex-wrap: wrap; }
.wr-h3 { margin: 0; font-size: 14px; font-weight: 800; letter-spacing: -.1px; }
.wr-h3-n {
  display: inline-block; margin-left: 7px; padding: 1px 7px; border-radius: 999px;
  background: #eef2f7; color: var(--wr-sub); font-size: 11px; font-weight: 700; vertical-align: 1px;
}
.wr-run-acts { display: flex; gap: 7px; }
.wr-lb {
  border: 1px solid var(--wr-line); background: #fff; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600; color: #475569; padding: 5px 10px;
}
.wr-lb:hover { background: var(--wr-soft); color: var(--wr-ink); }
.wr-quiet { margin: 10px 0 0; font-size: 12px; line-height: 1.55; color: var(--wr-mut); }

/* ── What landed ─────────────────────────────────────────────────
   The wins, above the fold. Two columns on a wide screen so eight of them cost
   four lines rather than eight. */
.wr-landed {
  border: 1px solid var(--wr-line); border-radius: 16px; background: #fff;
  padding: 17px 19px; margin-bottom: 20px;
}
.wr-landed-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; margin-top: 12px; }
@media (max-width: 1000px) { .wr-landed-grid { grid-template-columns: 1fr; } }
.wr-land { display: flex; align-items: flex-start; gap: 10px; }
.wr-land-tick {
  flex: 0 0 auto; width: 19px; height: 19px; border-radius: 50%; margin-top: 1px;
  background: rgba(100,153,84,.13); color: var(--wr-green);
  display: inline-flex; align-items: center; justify-content: center;
}
.wr-land-tick svg { width: 11px; height: 11px; }
.wr-land-b { min-width: 0; }
.wr-land-t { display: block; font-size: 13px; font-weight: 600; line-height: 1.45; color: #1e293b; }
.wr-land-m { display: block; font-size: 11px; color: var(--wr-mut); margin-top: 2px; }

/* ── A person ───────────────────────────────────────────────────────────── */
.wr-p {
  border: 1px solid var(--wr-line); border-radius: 14px; background: #fff;
  margin-bottom: 10px; overflow: hidden; scroll-margin-top: 16px;
  transition: box-shadow .14s ease, border-color .14s ease;
}
.wr-p:hover { border-color: #dbe3ec; box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 10px 26px -20px rgba(15,23,42,.34); }
.wr-p-head { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-bottom: 1px solid #f1f5f9; }
.wr-p-face { flex: 0 0 auto; display: inline-flex; }
.wr-p-id { flex: 1 1 auto; min-width: 0; }
.wr-p-name { display: block; font-size: 15.5px; font-weight: 700; letter-spacing: -.2px; }
.wr-p-sub { display: block; font-size: 11.5px; color: var(--wr-sub); margin-top: 2px; }
.wr-p-h { flex: 0 0 auto; font-size: 19px; font-weight: 800; letter-spacing: -.4px; }
.wr-p-body { padding: 4px 15px 11px; }

/* ── A work stream inside a person ──────────────────────────────────────── */
.wr-sr { padding: 9px 0; border-top: 1px solid #f5f8fa; }
.wr-sr:first-child { border-top: 0; }
.wr-sr-head {
  display: flex; align-items: center; gap: 9px; width: 100%;
  border: 0; background: transparent; padding: 0; cursor: pointer; font: inherit;
  text-align: left; color: inherit;
}
.wr-sr-head:hover .wr-sr-name { color: var(--wr-green); }
.wr-sr-chev { flex: 0 0 auto; color: var(--wr-mut); display: inline-flex; transition: transform .16s ease; }
.wr-sr-chev svg { width: 15px; height: 15px; }
.wr-sr.is-open .wr-sr-chev { transform: rotate(90deg); }
.wr-sr-logo { flex: 0 0 auto; display: inline-flex; }
/* ⚠️ min-width:0, or a long stream name refuses to shrink and shoves the hours
   off the right edge instead of ellipsing. */
.wr-sr-names { flex: 1 1 auto; min-width: 0; }
.wr-sr-name { display: block; font-size: 13.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-sr-parent { display: block; font-size: 11px; color: var(--wr-mut); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-sr-h { flex: 0 0 auto; font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.wr-sr-pct { display: inline-block; margin-left: 7px; font-size: 11px; font-weight: 600; color: var(--wr-mut); }

/* 🚨 `display: block`, OR IT IS NOT A BAR. Every caller used to be a <div>, so
   the rule got away without one; the room strip and the per-person time
   breakdown draw it as a <span>, and on an inline box height, margin and
   overflow are all ignored — the track collapsed to nothing and the fill <i>
   (which IS display:block) escaped and painted straight across the stream name
   underneath it. */
.wr-bar { display: block; height: 4px; border-radius: 999px; background: #eef2f7; margin-top: 7px; overflow: hidden; }
.wr-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--wr-green); }
.wr-bar--st > i { background: #7c3aed; }

/* The one-line summary. This is the main tab's whole density decision — the
   full write-ups sit behind the chevron. */
.wr-sr-line {
  margin-top: 6px; padding-left: 24px; font-size: 12.5px; line-height: 1.5; color: #475569;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.wr-sr.is-open .wr-sr-line { display: none; }

.wr-sr-body { margin-top: 10px; padding-left: 24px; }
.wr-it { padding: 9px 0 9px 12px; border-left: 2px solid #eef2f7; margin-bottom: 8px; }
.wr-it:last-child { margin-bottom: 0; }
.wr-it-meta { font-size: 10.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--wr-mut); }
.wr-nb { color: #b45309; }
.wr-it-said { font-size: 13px; line-height: 1.5; color: #1e293b; margin-top: 4px; }
.wr-did { margin: 7px 0 0; padding-left: 17px; }
.wr-did li { font-size: 12.5px; line-height: 1.5; color: #475569; margin-bottom: 2px; }
.wr-prod { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.wr-prod-l, .wr-next-l { font-size: 10px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
.wr-prod-l { color: var(--wr-green); margin-right: 2px; }
.wr-chip {
  font-size: 11.5px; font-weight: 600; color: #35502c;
  background: rgba(100,153,84,.11); border: 1px solid rgba(100,153,84,.24);
  border-radius: 7px; padding: 3px 8px;
}
.wr-next { margin-top: 7px; font-size: 12px; color: var(--wr-sub); }
.wr-next-l { color: #d97706; }

/* ── Rails ──────────────────────────────────────────────────────────────── */
.wr-rail { border: 1px solid var(--wr-line); border-radius: 14px; background: #fff; padding: 15px; }
.wr-st-list { display: flex; flex-direction: column; gap: 12px; margin-top: 11px; }
.wr-st-top { display: flex; align-items: center; gap: 8px; }
.wr-st-logo { flex: 0 0 auto; display: inline-flex; }
.wr-st-name { flex: 1 1 auto; font-size: 12.5px; font-weight: 650; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-st-h { flex: 0 0 auto; font-size: 12.5px; font-weight: 700; }
.wr-st-who { font-size: 10.5px; color: var(--wr-mut); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A CATEGORY on the rail. The base rule is nowrap + ellipsis for long project
   names, which would clip a second line clean off — so the tagged variant turns
   into a two-row column instead of inheriting a single-line box. */
.wr-st-name.has-tag { white-space: normal; display: flex; flex-direction: column; gap: 1px; }
.wr-st-tag {
  font-size: 9.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  color: var(--wr-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Planned ────────────────────────────────────────────────────────────── */
.wr-pl-grp { margin-bottom: 22px; }
.wr-pl-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
/* 🚨 minmax(0, …) ON EVERY TRACK. A row with FIXED tracks is fine in a document
   that is 720px wide and always one column; the moment the same row sits in a
   fluid column of a full-bleed grid, the fixed tracks refuse to shrink and the
   PAGE scrolls sideways instead. Measured at 1180px on What's next: 33px of
   horizontal scroll, from `1fr 210px 118px 190px` inside a ~520px block. */
/* 🚨 A `minmax(0, …)` TRACK WILL SHRINK TO ZERO, AND IT DID. Making every track
   `minmax(0, …)` stopped the page scrolling sideways and produced something
   worse: the title column collapsed to ~40px in a narrow block and the task name
   wrapped one word per line ("Ship / the / revi… / boa…"). Both facts have to be
   in the template — a floor on every track AND a ceiling on the ones that are
   allowed to give way. Total floor here is 302px + gaps + padding = 360px, which
   is what sets the minimum a `.wr-cols--2` track may be. */
.wr-pl-row {
  display: grid;
  grid-template-columns: minmax(48px, auto) minmax(110px, 1fr) minmax(80px, 190px) minmax(64px, 120px);
  gap: 12px; align-items: center;
  background: #fff; border: 1px solid var(--wr-line); border-radius: 9px; padding: 9px 12px; font-size: 12.5px;
}
.wr-pl-due { font-weight: 700; font-size: 11.5px; color: var(--wr-sub); }
/* ⚠️ THE TONE IS ON THE GROUP; THE DATE IS ABOUT THE DATE. Painting every due
   date in a "bad" group red made a task due next Thursday look overdue. Only
   `.is-late` — a date genuinely in the past — colours the date. */
.wr-pl-grp.is-bad  .wr-pl-row { border-left: 3px solid #dc2626; }
.wr-pl-grp.is-warn .wr-pl-row { border-left: 3px solid #d97706; }
.wr-pl-grp.is-mute .wr-pl-row { border-left: 3px solid #cbd5e1; }
.wr-pl-t { font-weight: 650; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-pl-s { display: flex; align-items: center; gap: 6px; color: var(--wr-sub); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-pl-w { color: var(--wr-sub); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) {
  .wr-pl-row { grid-template-columns: 74px 1fr; }
  .wr-pl-s, .wr-pl-w { grid-column: 2; text-align: left; }
}
.wr-idle { display: grid; grid-template-columns: auto 1fr; gap: 8px 9px; align-items: center; }
.wr-idle-n { font-size: 12.5px; font-weight: 650; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-idle-c { grid-column: 2; font-size: 10.5px; color: var(--wr-mut); margin-top: -6px; }

/* ── Financials ─────────────────────────────────────────────────────────── */
.wr-tbl { width: 100%; border-collapse: collapse; margin-top: 11px; font-size: 12.5px; }
.wr-tbl th {
  text-align: left; font-size: 10.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  color: var(--wr-sub); padding: 8px 10px; border-bottom: 1px solid var(--wr-line);
}
.wr-tbl td { padding: 8px 10px; border-bottom: 1px solid #f1f5f9; }
.wr-tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wr-tr-c td { font-weight: 750; background: var(--wr-soft); }
.wr-tr-s td:first-child { padding-left: 26px; color: #475569; position: relative; }
.wr-tr-s td:first-child::before {
  content: ''; position: absolute; left: 13px; top: 50%; width: 5px; height: 5px;
  margin-top: -2.5px; border-radius: 50%; background: #cbd5e1;
}
.wr-tbl tfoot td { font-weight: 800; border-top: 2px solid var(--wr-ink); border-bottom: 0; padding-top: 10px; }
.wr-rate-list { display: flex; flex-direction: column; gap: 8px; margin-top: 11px; }
.wr-rate { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; font-size: 12.5px; align-items: baseline; }
.wr-rate-r { font-weight: 650; }
.wr-rate-h { color: var(--wr-sub); font-variant-numeric: tabular-nums; }
.wr-rate-a { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 68px; text-align: right; }
/* Hours with no rate sort last and read amber — a bucket, never folded in at zero. */
.wr-rate.is-none .wr-rate-r { color: #b45309; }

/* ── Clients ────────────────────────────────────────────────────────────── */
.wr-cbar { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.wr-cchip {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font: inherit;
  border: 1px solid var(--wr-line); background: #fff; border-radius: 999px;
  padding: 5px 13px 5px 5px; font-size: 12.5px; font-weight: 650; color: #475569;
}
.wr-cchip:hover { background: var(--wr-soft); }
.wr-cchip.is-on { border-color: var(--wr-green); color: #35502c; background: rgba(100,153,84,.08); }
.wr-csheet { border: 1px solid var(--wr-line); border-radius: 16px; background: #fff; overflow: hidden; }
.wr-chead {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 22px 24px; border-bottom: 1px solid var(--wr-line); background: var(--wr-soft);
}
.wr-chead-l { display: flex; align-items: center; gap: 14px; }
.wr-chead-logo { flex: 0 0 auto; display: inline-flex; }
.wr-chead-k { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--wr-green); }
.wr-chead-n { margin: 3px 0 0; font-size: 23px; font-weight: 800; letter-spacing: -.4px; }
.wr-chead-d { margin-top: 3px; font-size: 12.5px; color: var(--wr-sub); }
.wr-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--wr-sub); cursor: pointer; white-space: nowrap; }
.wr-wins { padding: 8px 24px 4px; }
.wr-win { padding: 15px 0; border-bottom: 1px solid #f1f5f9; }
.wr-win:last-child { border-bottom: 0; }
.wr-win-top { display: flex; align-items: center; gap: 10px; }
.wr-win-tick {
  flex: 0 0 auto; width: 21px; height: 21px; border-radius: 50%;
  background: rgba(100,153,84,.13); color: var(--wr-green);
  display: inline-flex; align-items: center; justify-content: center;
}
.wr-win-tick svg { width: 12px; height: 12px; }
.wr-win-name { font-size: 15px; font-weight: 700; letter-spacing: -.2px; }
.wr-win-parent { font-size: 11.5px; color: var(--wr-mut); }
.wr-win-h { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--wr-sub); }
.wr-win-list { margin: 8px 0 0; padding-left: 48px; }
.wr-win-list li { font-size: 13px; line-height: 1.6; color: #334155; margin-bottom: 4px; }
.wr-cfoot { padding: 14px 24px; border-top: 1px solid var(--wr-line); background: var(--wr-soft); font-size: 12px; font-weight: 650; color: var(--wr-sub); }

/* ── Empty ──────────────────────────────────────────────────────────────── */
.wr-empty { text-align: center; padding: 56px 24px; border: 1px dashed #dbe3ec; border-radius: 16px; background: var(--wr-soft); }
.wr-empty-i { font-size: 34px; }
.wr-empty h3 { margin: 12px 0 6px; font-size: 17px; font-weight: 800; }
.wr-empty p { margin: 0 auto; max-width: 460px; font-size: 13px; line-height: 1.6; color: var(--wr-sub); }

/* ══════════════════════════════════════════════════════════════════════════
   THE COVER, THE ROOM AND A PERSON'S TURN
   --------------------------------------------------------------------------
   Everything below is the 2026-08-24 rebuild. Tyler: *"I want logos, profile
   pictures, smooth designs, pop-ups, everything. Use the full width of
   everything … Really make this design better to be interactive when you hover
   over it."*
   ⚠️ EVERY HOVER IS A TRANSFORM OR A COLOUR, NEVER A SIZE THAT REFLOWS. A card
   that grows on hover shoves the strip sideways under the cursor, which reads
   as the page fighting you.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Whose work this is, on the cover ─────────────────────────────────────
   Right-hand side of the hero. Pressing one opens that client's own sheet. */
.wr-cover { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; min-width: 0; }
.wr-cover-k {
  font-size: 10px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase;
  color: var(--wr-mut);
}
.wr-cover-none { font-size: 12px; color: var(--wr-sub); }
.wr-cover-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.wr-co {
  display: inline-flex; align-items: center; gap: 9px; min-width: 0;
  border: 1px solid var(--wr-line); border-radius: 12px; background: #fff;
  padding: 7px 12px 7px 9px; cursor: pointer; font: inherit; text-align: left;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.wr-co:hover {
  border-color: #cbd5e1; transform: translateY(-1px);
  box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 12px 26px -18px rgba(15,23,42,.4);
}
.wr-co:focus-visible { outline: 2px solid var(--wr-green); outline-offset: 2px; }
.wr-co-logo { flex: 0 0 auto; display: inline-flex; }
.wr-co-b { min-width: 0; }
.wr-co-n {
  display: block; font-size: 13px; font-weight: 700; letter-spacing: -.2px; color: var(--wr-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px;
}
.wr-co-m { display: block; font-size: 10.5px; color: var(--wr-mut); margin-top: 1px; }

/* ── Round the room ───────────────────────────────────────────────────────
   The strip is the spine of the internal report: hierarchy order, one card per
   person, numbered by TURN. */
.wr-room { display: block; }
.wr-room-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 12px; flex-wrap: wrap;
}
.wr-room-head .wr-lede { margin: 5px 0 0; max-width: 62ch; }
.wr-room-nav { display: inline-flex; gap: 6px; flex: 0 0 auto; }

.wr-strip {
  display: flex; gap: 10px; align-items: stretch;
  overflow-x: auto; padding: 3px 2px 12px; scroll-behavior: smooth;
  scrollbar-width: thin;
}
.wr-pc {
  flex: 0 0 auto; width: 190px; position: relative; text-align: left;
  display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--wr-line); border-radius: 16px; background: #fff;
  padding: 13px 14px 12px; cursor: pointer; font: inherit; color: var(--wr-ink);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease;
}
.wr-pc:hover {
  transform: translateY(-2px); border-color: #cbd5e1;
  box-shadow: 0 2px 4px rgba(15,23,42,.05), 0 18px 34px -22px rgba(15,23,42,.5);
}
.wr-pc:focus-visible { outline: 2px solid var(--wr-green); outline-offset: 2px; }
/* THE SELECTED CARD. A ring plus a lift, not a fill — the faces have to stay
   readable and a green wash under a photo looks like an error state. */
.wr-pc.is-on {
  border-color: var(--wr-green); box-shadow: 0 0 0 2px rgba(100,153,84,.22),
    0 2px 4px rgba(15,23,42,.05), 0 18px 34px -22px rgba(15,23,42,.5);
}
.wr-pc.is-quiet { background: #fbfcfd; border-style: dashed; }
.wr-pc-turn {
  position: absolute; top: 10px; right: 11px;
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 6px;
  background: #eef2f7; color: var(--wr-sub);
  font-size: 10.5px; font-weight: 800; line-height: 19px; text-align: center;
}
.wr-pc.is-on .wr-pc-turn { background: var(--wr-green); color: #fff; }
.wr-pc-face { display: inline-flex; margin-bottom: 8px; }
.wr-pc-all-i {
  width: 42px; height: 42px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; background: #eef2f7;
  color: var(--wr-sub); font-size: 14px; font-weight: 800;
}
.wr-pc-name {
  font-size: 13.5px; font-weight: 750; letter-spacing: -.2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wr-pc-title {
  font-size: 10.5px; color: var(--wr-mut); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* VALUE IS THE BIG NUMBER ON THE CARD, hours are the line under it. */
.wr-pc-big { margin-top: 9px; font-size: 11.5px; color: #475569; }
.wr-pc-big b { font-size: 21px; font-weight: 800; letter-spacing: -.6px; color: var(--wr-green); margin-right: 4px; }
.wr-pc-big.is-none { color: var(--wr-mut); font-style: italic; }
.wr-pc-m { font-size: 10.5px; color: var(--wr-mut); margin-top: 2px; }
.wr-bar--pc { margin-top: 9px; height: 3px; }
.wr-pc--all { background: var(--wr-soft); }

/* ── One person's turn ────────────────────────────────────────────────── */
.wr-sheets { margin-top: 4px; }
.wr-ps {
  border: 1px solid var(--wr-line); border-radius: 18px; background: #fff;
  padding: 18px 20px 20px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 10px 28px -22px rgba(15,23,42,.36);
}
.wr-ps.is-quiet { background: #fbfcfd; }
.wr-ps-head {
  display: flex; align-items: center; gap: 15px; flex-wrap: wrap;
  padding-bottom: 15px; margin-bottom: 16px; border-bottom: 1px solid #f1f5f9;
}
.wr-ps-face { flex: 0 0 auto; display: inline-flex; }
.wr-ps-id { flex: 1 1 240px; min-width: 0; }
.wr-ps-turn {
  display: block; font-size: 10px; font-weight: 800; letter-spacing: .9px;
  text-transform: uppercase; color: var(--wr-green);
}
.wr-ps-name { display: block; font-size: 25px; font-weight: 800; letter-spacing: -.7px; line-height: 1.1; margin-top: 3px; }
.wr-ps-title { display: block; font-size: 12.5px; color: var(--wr-sub); margin-top: 3px; }
.wr-ps-figs { flex: 0 0 auto; display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.wr-vf {
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  min-width: 84px; padding: 9px 13px; border-radius: 12px;
  border: 1px solid var(--wr-line); background: var(--wr-soft);
}
.wr-vf b { font-size: 20px; font-weight: 800; letter-spacing: -.5px; line-height: 1; }
.wr-vf i { font-style: normal; font-size: 10.5px; font-weight: 650; color: var(--wr-sub); }
/* The lead figure is what they PRODUCED — see the note in wk-weekly.js. */
.wr-vf.is-lead { background: rgba(100,153,84,.09); border-color: rgba(100,153,84,.3); }
.wr-vf.is-lead b { color: #35502c; }
.wr-ps-cols {
  display: grid; gap: 16px; align-items: start; margin-bottom: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
}
.wr-ps-cols:last-of-type { margin-bottom: 0; }
.wr-ps-b { min-width: 0; }
.wr-ps-empty {
  border: 1px dashed #dbe3ec; border-radius: 14px; background: var(--wr-soft);
  padding: 22px 20px; margin-bottom: 16px;
}
.wr-ps-empty h4 { margin: 0 0 5px; font-size: 15px; font-weight: 800; }
.wr-ps-empty p { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--wr-sub); }

/* ── AN OUTCOME IS A CARD, NOT A SENTENCE IN A PARAGRAPH ────────────────── */
.wr-outs { display: grid; gap: 7px; margin-top: 9px; }
.wr-out {
  display: flex; align-items: flex-start; gap: 10px;
  border: 1px solid var(--wr-line); border-radius: 11px; background: #fff;
  padding: 10px 12px; transition: border-color .15s ease, background .15s ease;
}
.wr-out:hover { border-color: rgba(100,153,84,.45); background: rgba(100,153,84,.045); }
.wr-out-tick {
  flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; margin-top: 1px;
  background: rgba(100,153,84,.14); color: #3f6134;
  display: inline-flex; align-items: center; justify-content: center;
}
.wr-out-tick svg { width: 11px; height: 11px; }
.wr-out-b { min-width: 0; }
.wr-out-t { display: block; font-size: 13px; font-weight: 650; line-height: 1.45; color: #1e293b; }
.wr-out-m {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  font-size: 10.5px; color: var(--wr-mut); margin-top: 3px;
}

/* ── Where their time went ─────────────────────────────────────────────── */
.wr-mini { display: grid; gap: 10px; margin-top: 9px; }
.wr-mn { min-width: 0; }
.wr-mn-top { display: flex; align-items: center; gap: 8px; }
.wr-mn-logo { flex: 0 0 auto; display: inline-flex; }
.wr-mn-n { flex: 1 1 auto; min-width: 0; font-size: 12.5px; font-weight: 650; }
.wr-mn-p {
  display: block; font-size: 10.5px; font-weight: 500; color: var(--wr-mut);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wr-mn-h { flex: 0 0 auto; font-size: 12.5px; font-weight: 750; white-space: nowrap; }
.wr-mn-pct { margin-left: 6px; font-size: 10.5px; font-weight: 600; color: var(--wr-mut); }

/* ── THE PROSE, FOLDED AWAY ────────────────────────────────────────────
   Not deleted: it is the only thing a person actually wrote. One disclosure per
   TURN rather than one per work stream, which was eight presses to read one
   person. */
.wr-notes {
  border: 1px solid var(--wr-line); border-radius: 14px; background: var(--wr-soft);
  margin-top: 4px; overflow: hidden;
}
.wr-notes-h {
  display: flex; align-items: center; gap: 8px; padding: 12px 15px;
  font-size: 12.5px; font-weight: 750; color: #475569; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.wr-notes-h:hover { background: #eef2f7; color: var(--wr-ink); }
.wr-notes-chev { display: inline-flex; color: var(--wr-mut); transition: transform .16s ease; }
.wr-notes-chev svg { width: 15px; height: 15px; }
.wr-notes-b { padding: 2px 15px 15px; }
.wr-notes--prj { margin-top: 14px; }
.wr-nt { padding: 11px 0; border-top: 1px solid #e8eef4; }
.wr-nt:first-child { border-top: 0; }
.wr-nt-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wr-nt-d {
  font-size: 10.5px; font-weight: 800; letter-spacing: .3px;
  text-transform: uppercase; color: var(--wr-sub);
}
.wr-nt-s { font-size: 11.5px; font-weight: 650; color: var(--wr-ink); }
.wr-nt-hh { margin-left: auto; font-size: 11.5px; font-weight: 750; }
.wr-nt-said { margin: 6px 0 0; font-size: 12.5px; line-height: 1.55; color: #334155; }

/* ── The outcome wall (What got done) ──────────────────────────────────── */
.wr-wall-head { margin-bottom: 13px; }
.wr-wall-head .wr-lede { margin: 4px 0 0; }
/* ⚠️ auto-FIT, not auto-FILL. `auto-fill` keeps the empty tracks it can fit, so
   three outcome groups on a 1640px page stopped at 1270px and read as a layout
   that had failed halfway. `auto-fit` collapses the empty tracks and the cards
   stretch to the full width — which is the whole ask. */
.wr-wall-grid {
  display: grid; gap: 14px; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
}
.wr-wg {
  border: 1px solid var(--wr-line); border-radius: 16px; background: #fff; overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.wr-wg:hover {
  border-color: #dbe3ec;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 14px 30px -24px rgba(15,23,42,.46);
}
.wr-wg-h {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 14px; border-bottom: 1px solid #f1f5f9; background: var(--wr-soft);
}
.wr-wg-n {
  flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 750; letter-spacing: -.2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wr-wg-c {
  flex: 0 0 auto; min-width: 20px; padding: 1px 7px; border-radius: 999px;
  background: rgba(100,153,84,.14); color: #35502c; font-size: 11px; font-weight: 800; text-align: center;
}
.wr-wg-who { flex: 0 0 auto; display: inline-flex; gap: 3px; }
.wr-wg-b { padding: 10px 12px 12px; display: grid; gap: 7px; }
.wr-wg-b .wr-out { border-color: #eef2f7; }

/* ── What they said is next, under the face that said it ───────────────── */
.wr-sw { display: grid; gap: 12px; margin-top: 11px; }
.wr-swp { min-width: 0; }
.wr-swp-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.wr-swp-f { flex: 0 0 auto; display: inline-flex; }
.wr-swp-n { font-size: 12.5px; font-weight: 750; }

/* ══ THE ACTIONS TABLE — FLAT, NEVER INDENTED ═════════════════════════════
   Tyler, 2026-08-24: *"The actions should never indent. The actions look
   terrible. I would never use this."* One grid, one row per item, the owner's
   face IN the row, and no nesting anywhere. */
.wr-filt { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 0 0 13px; }
.wr-fc {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--wr-line); border-radius: 999px; background: #fff;
  padding: 5px 12px 5px 7px; cursor: pointer; font: inherit;
  font-size: 12px; font-weight: 650; color: var(--wr-sub);
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.wr-fc:hover { background: var(--wr-soft); color: var(--wr-ink); }
.wr-fc:focus-visible { outline: 2px solid var(--wr-green); outline-offset: 2px; }
.wr-fc.is-on { border-color: var(--wr-green); background: rgba(100,153,84,.08); color: #35502c; }
.wr-fc.is-none { border-style: dashed; font-style: italic; }
.wr-fc-f { display: inline-flex; }
.wr-fc-q {
  width: 22px; height: 22px; border-radius: 50%; background: #eef2f7; color: var(--wr-mut);
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800;
}
.wr-fc-n {
  padding: 0 6px; border-radius: 999px; background: #eef2f7;
  font-size: 10.5px; font-weight: 800; color: var(--wr-sub);
}
.wr-fc.is-on .wr-fc-n { background: rgba(100,153,84,.16); color: #35502c; }

/* ⚠️ THE TABLE SCROLLS INSIDE ITS OWN BOX. The document must never scroll
   sideways — a long project name in the Work-stream column is what makes a
   table wider than the page. */
.wr-tw { overflow-x: auto; border: 1px solid var(--wr-line); border-radius: 14px; background: #fff; }
.wr-at { width: 100%; border-collapse: collapse; font-size: 13px; }
.wr-at th {
  text-align: left; padding: 10px 14px; background: var(--wr-soft);
  font-size: 10.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  color: var(--wr-sub); border-bottom: 1px solid var(--wr-line); white-space: nowrap;
}
.wr-at td { padding: 10px 14px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.wr-atr { transition: background .12s ease; }
.wr-atr:hover { background: #f8fbf7; }
.wr-atr:last-child td { border-bottom: 0; }
/* The tone is a LEFT EDGE on the row, not a fill — forty rows of pink is
   unreadable and says everything is on fire. */
.wr-atr.is-late td:first-child { box-shadow: inset 3px 0 0 #d97706; }
.wr-atr.is-blocked td:first-child { box-shadow: inset 3px 0 0 #dc2626; }
.wr-at-w { width: 210px; }
.wr-at-s { width: 340px; }
.wr-at-d { width: 140px; text-align: right; white-space: nowrap; }
.wr-at-who { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.wr-at-who > span:last-child {
  font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wr-at-who.is-none { color: var(--wr-mut); font-style: italic; }
.wr-at-t { font-weight: 650; }
.wr-at-sn {
  display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--wr-sub);
  font-size: 12px;
}
.wr-at-sn > span, .wr-at-sn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-at-d { font-size: 11.5px; font-weight: 700; color: var(--wr-sub); }
.wr-at-late {
  display: block; font-size: 10px; font-weight: 800; letter-spacing: .4px;
  text-transform: uppercase; color: #b45309; margin-top: 1px;
}
@media (max-width: 900px) {
  .wr-at-s { display: none; }
  .wr-at-w { width: 150px; }
}

/* ══ PRINT ════════════════════════════════════════════════════════════════
   Prints the tab you are standing on. Controls go; nothing is split mid-person. */
/* ══ THE AGENDA ═══════════════════════════════════════════════════════════
   Eight tabs in the order the meeting runs, then two reference tabs behind a
   separator. Ten labels do not fit one line on a narrow screen, so the strip
   WRAPS rather than scrolling sideways — a tab you cannot see is a tab nobody
   presses. Each panel states its own number and the question it answers,
   because the agenda is the feature. */
/* 🚨 ONE LINE, ALWAYS. Tyler, 2026-08-24: *"These tabs should only be one
   line."* The strip used to WRAP, on the reasoning that a tab you cannot see
   is a tab nobody presses — which was true when the document was capped at
   720px inside report-review's `.rpt` card. Full-bleed, nine labels fit at
   every width the report is read at, and the horizontal scroll is only the
   escape hatch on a phone.
   ⚠️ STICKY. The panels are long now (the room is nine sheets deep) and a
   meeting scrolls; a tab strip that leaves the screen makes you scroll back to
   change subject. `z-index` above the panel content, below nothing else — this
   document has no other layers. */
.wr-tabs {
  flex-wrap: nowrap; row-gap: 0; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
  position: sticky; top: 0; z-index: 5;
  background: linear-gradient(#f4f7fa 62%, rgba(244,247,250,.86));
  backdrop-filter: saturate(140%) blur(6px);
  margin: 16px 0 20px; padding-top: 4px;
}
.wr-tabs::-webkit-scrollbar { display: none; }
.wr-tab { flex: 0 0 auto; white-space: nowrap; transition: background .14s ease, color .14s ease; }
.wr-tabsep {
  align-self: center; width: 1px; height: 18px; margin: 0 8px;
  background: var(--wr-line);
}
.wr-panel-h {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: -4px 0 16px; padding-bottom: 11px; border-bottom: 1px dashed var(--wr-line);
}
.wr-panel-n {
  flex: 0 0 auto; width: 21px; height: 21px; border-radius: 6px;
  background: var(--wr-ink); color: #fff;
  font-size: 11.5px; font-weight: 800; line-height: 21px; text-align: center;
}
.wr-panel-t { font-size: 15px; font-weight: 800; letter-spacing: -.2px; }
.wr-panel-q { font-size: 12px; color: var(--wr-mut); }
.wr-lede { font-size: 12.5px; color: var(--wr-sub); margin: 0 0 14px; line-height: 1.5; }
.wr-lede strong { color: #b45309; }

/* ── The verdict. NOT a score — six counts and a printed rule. ───────────── */
.wr-vd {
  border: 1px solid var(--wr-line); border-left: 4px solid var(--wr-mut);
  border-radius: 14px; background: #fff; padding: 16px 18px 14px; margin-bottom: 20px;
}
.wr-vd.is-good { border-left-color: var(--wr-green); }
.wr-vd.is-watch { border-left-color: #d97706; }
.wr-vd.is-bad { border-left-color: #dc2626; }
.wr-vd-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wr-vd-badge {
  font-size: 15px; font-weight: 800; letter-spacing: -.3px; padding: 4px 12px;
  border-radius: 999px; background: #f1f5f9; color: var(--wr-ink);
}
.wr-vd.is-good .wr-vd-badge { background: rgba(100,153,84,.14); color: #35502c; }
.wr-vd.is-watch .wr-vd-badge { background: rgba(217,119,6,.14); color: #92400e; }
.wr-vd.is-bad .wr-vd-badge { background: rgba(220,38,38,.12); color: #991b1b; }
.wr-vd-says { font-size: 12.5px; color: var(--wr-sub); }
/* 🚨 IT WAS SIX MORE TILES, AND TWO OF THEM WERE THE HERO'S. "Hours logged" and
   "Things produced" appeared once in the hero and again 200px below it, in the
   same shape and the same size, which is a third of the height of the top of the
   report spent saying nothing new. The verdict is a STRIP now: the badge, the
   sentence, and one chip per signal — the counts are all still there, and the
   two that duplicate the hero are quiet rather than shouted. */
.wr-sigs {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px;
}
@media (max-width: 1100px) { .wr-sigs { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) { .wr-sigs { grid-template-columns: repeat(2, 1fr); } }
/* 🚨 EVERY ONE IS A BUTTON. Tyler, 2026-08-24: *"The scorecards should be
   interactable and clickable … we need to make sure that it's good and that
   they are all clickable."* So the pill gets a pointer, a real hover, a pressed
   state that reads as pressed at a glance, and a chevron that says there is
   something under it. The pressed one also grows a notch that points at the
   drill it opened, because a selected filter with no visible link to the thing
   it changed is the reason people press it twice. */
.wr-sig {
  position: relative; display: inline-flex; align-items: baseline; gap: 7px;
  border: 1px solid var(--wr-line); border-left: 3px solid #cbd5e1;
  border-radius: 999px; background: var(--wr-soft); padding: 5px 11px 5px 11px;
  font: inherit; color: inherit; cursor: pointer; text-align: left;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .12s ease;
}
.wr-sig:hover { background: #eef2f7; border-color: #cbd5e1; }
.wr-sig:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.wr-sig.is-good { border-left-color: var(--wr-green); }
.wr-sig.is-watch { border-left-color: #d97706; }
.wr-sig.is-bad { border-left-color: #dc2626; background: #fff5f5; }
/* PRESSED: ink ground, so which card the rows below belong to is never a
   guess. It wins over the three state grounds above by coming after them. */
.wr-sig.is-on {
  background: var(--wr-ink); border-color: var(--wr-ink); color: #fff;
  box-shadow: 0 1px 2px rgba(15,23,42,.16), 0 8px 18px -12px rgba(15,23,42,.55);
}
.wr-sig.is-on .wr-sig-l { color: rgba(255,255,255,.78); }
.wr-sig.is-on .wr-sig-v { color: #fff; }
.wr-sig.is-on .wr-sig-go { color: rgba(255,255,255,.7); transform: rotate(0deg); }
.wr-sig.is-on::after {
  content: ''; position: absolute; left: 50%; bottom: -5px; width: 9px; height: 9px;
  margin-left: -4.5px; background: var(--wr-ink); border-radius: 2px;
  transform: rotate(45deg);
}
.wr-sig-v { font-size: 15px; font-weight: 800; line-height: 1; letter-spacing: -.3px; }
.wr-sig.is-bad .wr-sig-v { color: #b91c1c; }
.wr-sig.is-bad.is-on .wr-sig-v { color: #fff; }
.wr-sig-l { font-size: 11.5px; font-weight: 700; color: #475569; }
/* The affordance. 11px, muted, and it does not move on hover — a chevron that
   animates on a pill this small reads as a glitch. */
.wr-sig-go { display: inline-flex; width: 11px; height: 11px; color: #94a3b8; align-self: center; }
.wr-sig-go > svg { width: 100%; height: 100%; }
/* THE "WHY" IS THE TOOLTIP NOW, not a third line on a tile. It is still in the
   markup (and still printed — see the print block), so nothing is lost. */
.wr-sig-w { font-size: 10.5px; color: var(--wr-mut); }
@media not print { .wr-sig-w { display: none; } }
.wr-vd-rule {
  font-size: 10.5px; color: var(--wr-mut); margin: 13px 0 0; padding-top: 10px;
  border-top: 1px solid var(--wr-line); line-height: 1.5;
}

/* ══ THE DASHBOARD ════════════════════════════════════════════════════════
   Verdict cards across the top, the drill they opened on the left, and ONE
   right-hand rail. Tyler, 2026-08-24: *"The 'Where Time Went' is pretty
   obvious. We don't need a bar for that unless that bar is really just, I
   guess, everyone … Is there any other right-side bar?"* — so the column holds
   exactly one thing, it is the whole team's time, and it is sticky because the
   room below it is five sheets deep and the rail is what you keep referring
   back to.
   ⚠️ `minmax(0, …)` ON THE MAIN COLUMN. The room strip is wider than the
   viewport and scrolls inside itself; an `auto` track measures its content and
   pushes the rail off the page instead. */
.wr-dash {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px;
  align-items: start;
}
.wr-dash-main { min-width: 0; }
.wr-dash-side { min-width: 0; position: sticky; top: 58px; }
@media (max-width: 1080px) {
  .wr-dash { grid-template-columns: minmax(0, 1fr); }
  .wr-dash-side { position: static; }
}
.wr-dr-h { margin: 0 0 13px; }
.wr-dr-say {
  margin: 4px 0 0; font-size: 12.5px; color: var(--wr-sub); line-height: 1.5;
}
.wr-dr-say--solo {
  margin: 0 0 15px; padding-bottom: 12px; border-bottom: 1px dashed var(--wr-line);
  font-weight: 600; color: var(--wr-sub);
}
/* The empty answer is a STATEMENT, not a blank. "Nothing is blocked" is worth
   a sentence on the screen — it is the reason the card is green. */
.wr-dr-none {
  display: flex; align-items: center; gap: 11px;
  border: 1px solid var(--wr-line); border-left: 3px solid var(--wr-green);
  border-radius: 12px; background: #fff; padding: 15px 17px;
  font-size: 12.5px; color: var(--wr-sub); line-height: 1.5;
}
.wr-dr-none-i {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  background: rgba(100,153,84,.14); color: #35502c;
  font-size: 13px; font-weight: 800; line-height: 24px; text-align: center;
}
/* WHAT GOT PRODUCED, under the face of whoever wrote it. */
.wr-pd {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  gap: 13px;
}
.wr-pd-card {
  border: 1px solid var(--wr-line); border-radius: 13px; background: #fff;
  padding: 13px 14px; min-width: 0;
}
.wr-pd-h {
  display: flex; align-items: center; gap: 9px; min-width: 0;
  padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px dashed var(--wr-line);
}
.wr-pd-f { flex: 0 0 auto; display: inline-flex; }
.wr-pd-n {
  flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 750;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ══ ROOM FOR THE PERIOD AHEAD ════════════════════════════════════════════
   The planning half of What's next. Capacity, what is already allocated into
   the window, what is left — and, per row, the work streams that allocation
   puts them on. */
.wr-ah {
  border: 1px solid var(--wr-line); border-radius: 14px; background: #fff;
  padding: 17px 18px 15px; margin-top: 20px;
}
.wr-ah-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.wr-ah-when { font-size: 11.5px; font-weight: 650; color: var(--wr-mut); }
.wr-ah-figs {
  display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 13px 0 4px;
  padding-bottom: 13px; border-bottom: 1px dashed var(--wr-line);
}
.wr-ah-empty {
  margin: 13px 0 0; padding: 11px 13px; border-radius: 10px;
  background: rgba(37,99,235,.06); border-left: 3px solid #2563eb;
  font-size: 12.5px; color: #1e3a5f; line-height: 1.5;
}
.wr-ahrs { display: grid; gap: 8px; margin-top: 13px; }
/* ⚠️ A COLUMN STACK FOR ROW 2. The chip strip is the widest thing in the row
   and a flex/grid child GROWS rather than shrinking, so it gets its own grid
   line across all four columns instead of a cell it can burst. */
.wr-ahr {
  display: grid; grid-template-columns: auto minmax(0, 1fr) 130px 62px;
  gap: 4px 12px; align-items: center;
  border: 1px solid var(--wr-line); border-left: 3px solid #cbd5e1;
  border-radius: 11px; background: var(--wr-soft); padding: 10px 13px;
}
.wr-ahr.is-over { border-left-color: #dc2626; }
.wr-ahr.is-full { border-left-color: var(--wr-green); }
.wr-ahr.is-room { border-left-color: #0ea5e9; }
.wr-ahr.is-unplanned { border-left-color: #d97706; }
.wr-ahr.is-none, .wr-ahr.is-unknown { border-left-color: #e2e8f0; }
.wr-ahr.is-off { border-left-color: #7c3aed; }
.wr-ahr-f { grid-row: 1; display: inline-flex; }
.wr-ahr-id { grid-row: 1; min-width: 0; }
.wr-ahr-n {
  display: block; font-size: 13px; font-weight: 750;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wr-ahr-s { display: block; font-size: 10.5px; color: var(--wr-mut); margin-top: 1px; }
.wr-ahr-m { grid-row: 1; display: flex; align-items: center; gap: 7px; }
.wr-ahr.is-over .wr-pg-b--cap > i { background: #dc2626; }
.wr-ahr.is-room .wr-pg-b--cap > i { background: #0ea5e9; }
.wr-ahr.is-unplanned .wr-pg-b--cap > i { background: #d97706; }
.wr-ahr-h {
  grid-row: 1; font-size: 14px; font-weight: 800; text-align: right; letter-spacing: -.3px;
}
.wr-ahr-on {
  grid-row: 2; grid-column: 2 / -1;
  display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; margin-top: 3px;
}
.wr-ahc {
  display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%; min-width: 0;
  border: 1px solid var(--wr-line); border-radius: 8px; background: #fff;
  padding: 3px 8px; font-size: 11px;
}
.wr-ahc > b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-ahc > i { font-style: normal; font-weight: 750; color: var(--wr-sub); flex: 0 0 auto; }
/* The allocation's own note, when it carries one — "what people are going to be
   doing" in the words whoever planned it typed. */
.wr-ahc > u {
  text-decoration: none; color: var(--wr-mut); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wr-ahc.is-none { color: var(--wr-mut); background: transparent; border-style: dashed; }
.wr-ah-st { margin-top: 17px; padding-top: 14px; border-top: 1px dashed var(--wr-line); }
/* ⚠️ COLUMNS, NOT FULL-BLEED. This block sits in a card the width of the page,
   and a 100% bar across 1400px reads as a rule line rather than a measure. */
.wr-ah-st .wr-st-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 13px 26px;
}
@media (max-width: 900px) {
  .wr-ahr { grid-template-columns: auto minmax(0, 1fr) 62px; }
  .wr-ahr-m { grid-row: 2; grid-column: 2 / -1; }
  .wr-ahr-on { grid-row: 3; }
}

/* ── Chips shared by Projects and Blockers ───────────────────────────────── */
.wr-hc {
  display: inline-block; font-size: 10.5px; font-weight: 750; padding: 2px 8px;
  border-radius: 999px; background: #f1f5f9; color: #475569; white-space: nowrap;
}
.wr-hc.is-good { background: rgba(100,153,84,.13); color: #35502c; }
.wr-hc.is-warn { background: rgba(217,119,6,.13); color: #92400e; }
.wr-hc.is-bad { background: rgba(220,38,38,.11); color: #991b1b; }
.wr-hc.is-mute { background: #f1f5f9; color: var(--wr-mut); }
.wr-hc + .wr-hc { margin-left: 5px; }
.wr-tag {
  display: inline-block; font-size: 10.5px; font-weight: 700; padding: 2px 8px;
  border-radius: 6px; background: #eef2f7; color: #475569; white-space: nowrap;
}
.wr-tag.is-bad { background: rgba(220,38,38,.11); color: #991b1b; }
.wr-tag.is-warn { background: rgba(217,119,6,.13); color: #92400e; }
.wr-tag.is-mute { background: transparent; color: var(--wr-mut); }
.wr-tag + .wr-tag { margin-left: 5px; }
.wr-pg { display: inline-flex; align-items: center; gap: 7px; }
.wr-pg-b {
  display: inline-block; width: 74px; height: 5px; border-radius: 999px;
  background: #eef2f7; overflow: hidden; vertical-align: middle;
}
.wr-pg-b > i { display: block; height: 100%; border-radius: 999px; background: var(--wr-green); }
.wr-pg-n { font-size: 10.5px; font-weight: 750; color: var(--wr-sub); }
.wr-noprog { font-size: 10.5px; color: var(--wr-mut); }

/* ── 3 · Projects & work streams ─────────────────────────────────────────── */
.wr-prjs { display: grid; gap: 12px; }
.wr-prj {
  border: 1px solid var(--wr-line); border-left: 3px solid transparent;
  border-radius: 13px; background: #fff; padding: 14px 16px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.wr-prj.is-bad { border-left-color: #dc2626; }
.wr-prj.is-warn { border-left-color: #d97706; }
.wr-prj-h { display: flex; align-items: center; gap: 11px; }
.wr-prj-logo { flex: 0 0 auto; }
.wr-prj-id { flex: 1 1 auto; min-width: 0; }
.wr-prj-n {
  display: block; font-size: 14.5px; font-weight: 800; letter-spacing: -.2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wr-prj-sub { display: block; font-size: 11px; color: var(--wr-mut); margin-top: 2px; }
.wr-prj-m { flex: 0 0 auto; display: flex; align-items: center; gap: 11px; }
.wr-prj-h2 { font-size: 17px; font-weight: 800; letter-spacing: -.4px; }
.wr-prj-tags { margin-top: 10px; }
.wr-prj-ws { margin-top: 11px; display: grid; gap: 6px; }
.wr-wsr {
  display: grid; grid-template-columns: minmax(120px, 1fr) auto auto minmax(72px, 96px);
  gap: 12px; align-items: center;
  padding: 8px 11px; border: 1px solid var(--wr-line); border-radius: 9px; background: var(--wr-soft);
}
.wr-wsr.is-quiet { background: #fff; border-style: dashed; }
.wr-wsr-n {
  font-size: 12.5px; font-weight: 700; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wr-wsr-o { display: block; font-size: 10.5px; font-weight: 500; color: var(--wr-mut); }
.wr-wsr-m, .wr-wsr-t { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wr-wsr-h { font-size: 12.5px; font-weight: 750; text-align: right; white-space: nowrap; }
@media (max-width: 1000px) {
  .wr-wsr { grid-template-columns: 1fr auto; }
  .wr-wsr-m, .wr-wsr-t { grid-column: 1 / -1; }
}

/* ── 4 · Blockers ────────────────────────────────────────────────────────── */
.wr-pb-wrap { display: grid; gap: 18px; }
.wr-pb { }
.wr-pb.is-bad .wr-pl-row { border-left: 3px solid #dc2626; }
.wr-pb.is-warn .wr-pl-row { border-left: 3px solid #d97706; }
.wr-pb.is-mute .wr-pl-row { border-left: 3px solid #cbd5e1; }
.wr-pl-row.is-late .wr-pl-due { color: #b91c1c; font-weight: 800; }
.wr-pl-row--nodue { grid-template-columns: minmax(110px, 1fr) minmax(80px, 190px) minmax(64px, 120px); }
.wr-pl-row--nowho { grid-template-columns: minmax(48px, auto) minmax(110px, 1fr) minmax(80px, 190px); }
.wr-pl-row--nodue.wr-pl-row--nowho { grid-template-columns: minmax(110px, 1fr) minmax(80px, 190px); }
/* A last cell holding CHIPS instead of a name needs its own width, and has to
   be allowed to wrap — "At risk" + "Past deadline" clipped to "At risk …". */
.wr-pl-row--chips { grid-template-columns: minmax(48px, auto) minmax(110px, 1fr) minmax(80px, 190px) minmax(120px, auto); }
.wr-pl-row--chips .wr-pl-w { white-space: normal; line-height: 1.9; }
/* The reason a thing is stuck is the most useful string on the tab, so it gets
   its own line under the title rather than being clipped into it. */
.wr-pl-t { white-space: normal; }
.wr-pl-why, .wr-pl-esc {
  display: block; font-size: 10.5px; font-weight: 600; margin-top: 2px; line-height: 1.4;
}
.wr-pl-why { color: #991b1b; }
.wr-pl-esc { color: #92400e; }
/* The scope cell is a stack: [logo + work stream] over [parent project].
   Every line clamps against the CELL, and the cell against its grid column -
   min-width:0 on both, or the grid's auto minimum wins and nothing ellipsises. */
.wr-pl-s {
  flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 1px; min-width: 0; max-width: 100%; overflow: hidden;
}
.wr-pl-s1 { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.wr-pl-sn, .wr-pl-p {
  min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wr-pl-p { font-size: 10.5px; color: var(--wr-mut); }
.wr-pl-w { min-width: 0; }
/* ⚠️ A TASK ROW IN A RAIL HAS ~340px, NOT ~800. The four fixed columns
   (74 + 220 + 130 + gaps = 460px) cannot fit an aside, so a row inside a rail
   stacks - the same collapse the narrow-screen rule already does, applied by
   CONTAINER rather than by viewport, because the rail is narrow at every
   window size. Without this the owner column hung 159px past the panel. */
.wr-rail .wr-pl-row { grid-template-columns: 62px 1fr; row-gap: 2px; }
.wr-rail .wr-pl-row .wr-pl-s,
.wr-rail .wr-pl-row .wr-pl-w { grid-column: 2; text-align: left; }
.wr-rail .wr-pl-row--nodue { grid-template-columns: 1fr; }
.wr-rail .wr-pl-row--nodue .wr-pl-s,
.wr-rail .wr-pl-row--nodue .wr-pl-w { grid-column: 1; }
.wr-pl-none { color: var(--wr-mut); font-style: italic; }
.wr-rail.is-bad { border-left: 3px solid #dc2626; }
.wr-ws-out { padding: 9px 0; border-bottom: 1px solid var(--wr-line); }
.wr-ws-out:last-child { border-bottom: 0; }
.wr-ws-out-h {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 12.5px; font-weight: 750;
}
.wr-ws-out-w { font-weight: 500; font-size: 11px; color: var(--wr-mut); }

/* ── 5 · Capacity ────────────────────────────────────────────────────────── */
.wr-cap-note {
  font-size: 11.5px; color: var(--wr-sub); line-height: 1.5;
  background: var(--wr-soft); border: 1px solid var(--wr-line);
  border-radius: 10px; padding: 10px 13px; margin-bottom: 16px;
}
.wr-cap-note.is-warn {
  background: #fffbeb; border-color: #fde68a; color: #92400e; font-weight: 600;
}
.wr-caps { display: grid; gap: 7px; }
.wr-capr {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 76px);
  gap: 12px; align-items: center;
  border: 1px solid var(--wr-line); border-left: 3px solid #cbd5e1;
  border-radius: 10px; background: #fff; padding: 9px 12px;
}
.wr-capr.is-over { border-left-color: #dc2626; }
.wr-capr.is-at { border-left-color: var(--wr-green); }
.wr-capr.is-room { border-left-color: #0ea5e9; }
.wr-capr.is-none, .wr-capr.is-unknown { border-left-color: #e2e8f0; }
.wr-capr-id { min-width: 0; }
.wr-capr-n {
  display: block; font-size: 13px; font-weight: 750;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wr-capr-s { display: block; font-size: 10.5px; color: var(--wr-mut); margin-top: 1px; }
.wr-capr-m { display: flex; align-items: center; gap: 7px; }
.wr-pg-b--cap { width: clamp(56px, 7vw, 110px); height: 6px; }
.wr-capr.is-over .wr-pg-b--cap > i { background: #dc2626; }
.wr-capr.is-room .wr-pg-b--cap > i { background: #0ea5e9; }
.wr-capr-h { font-size: 14px; font-weight: 800; text-align: right; letter-spacing: -.3px; }
@media (max-width: 1000px) {
  .wr-capr { grid-template-columns: auto 1fr 76px; }
  .wr-capr-m { grid-column: 2 / -1; }
}
.wr-split { margin-top: 10px; display: grid; gap: 6px; }
.wr-split-r {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 12.5px; padding: 6px 0; border-bottom: 1px solid var(--wr-line);
}
.wr-split-r:last-child { border-bottom: 0; }
.wr-split-r > span:last-child { font-weight: 750; }

/* ── 6 · What's next — their own words ───────────────────────────────────── */
.wr-said-list { display: grid; gap: 7px; margin-top: 11px; }
.wr-said {
  border: 1px solid var(--wr-line); border-left: 3px solid #0ea5e9;
  border-radius: 9px; background: #fff; padding: 9px 12px;
}
.wr-said-t { display: block; font-size: 12.5px; font-weight: 650; line-height: 1.45; }
.wr-said-m { display: block; font-size: 10.5px; color: var(--wr-mut); margin-top: 3px; }

/* ── 7 · Actions, owner first ────────────────────────────────────────────── */
.wr-acts { display: grid; gap: 12px; }
.wr-act {
  border: 1px solid var(--wr-line); border-radius: 13px; background: #fff; padding: 13px 15px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.wr-act.is-none { border-style: dashed; box-shadow: none; }
.wr-act-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.wr-act-f { flex: 0 0 auto; }
.wr-act-q {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; background: #eef2f7;
  color: var(--wr-mut); font-weight: 800;
}
.wr-act-n { flex: 1 1 auto; font-size: 13.5px; font-weight: 800; letter-spacing: -.2px; }
.wr-act.is-none .wr-act-n { color: var(--wr-mut); font-style: italic; }
.wr-act-t { flex: 0 0 auto; }

/* ══ WHICH COPY, DELIVERABLES, AND THE PLAN ═══════════════════════════════ */
.wr-hero-k { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wr-hero-aud {
  font-size: 9.5px; font-weight: 750; letter-spacing: .3px; text-transform: uppercase;
  padding: 1px 7px; border-radius: 999px; background: #eef6ec; color: #3f6134;
}
.wr-hero-aud.is-int { background: #f1f5f9; color: #64748b; }
.wr-hero-note {
  font-size: 11.5px; color: #92400e; background: #fffbeb; border: 1px solid #fde68a;
  border-radius: 9px; padding: 8px 11px; margin: 14px 0 0; line-height: 1.5;
}

/* ── Deliverables. The STAGE is the first thing you read. ────────────────── */
.wr-deliv { margin-bottom: 20px; }
.wr-dl-list { display: grid; gap: 6px; margin-top: 11px; }
.wr-dl {
  display: grid;
  grid-template-columns: minmax(78px, auto) minmax(120px, 1fr) minmax(90px, 260px) minmax(72px, auto);
  gap: 12px; align-items: center;
  border: 1px solid var(--wr-line); border-left: 3px solid #cbd5e1;
  border-radius: 9px; background: #fff; padding: 9px 12px; font-size: 12.5px;
}
.wr-dl.is-good { border-left-color: var(--wr-green); }
.wr-dl.is-warn { border-left-color: #d97706; }
.wr-dl.is-mute { border-left-color: #cbd5e1; }
.wr-dl-s {
  font-size: 10px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase;
  color: var(--wr-sub);
}
.wr-dl.is-good .wr-dl-s { color: #3f6134; }
.wr-dl.is-warn .wr-dl-s { color: #92400e; }
.wr-dl-t { font-weight: 650; min-width: 0; }
.wr-dl-w {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 1px; min-width: 0; max-width: 100%; overflow: hidden; color: var(--wr-sub);
}
.wr-dl-w > * { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-dl-d { font-size: 11.5px; font-weight: 700; color: var(--wr-sub); text-align: right; white-space: nowrap; }
@media (max-width: 1000px) {
  .wr-dl { grid-template-columns: 104px 1fr; }
  .wr-dl-w, .wr-dl-d { grid-column: 2; text-align: left; }
}
.wr-tag.is-deliv { background: rgba(14,165,233,.12); color: #075985; }

/* ── Allocated against logged. NEVER styled as a failure: the "under" state
   is the same neutral slate as "on", because a gap is where the time went and
   not work owed. Only OVER gets a colour, and it is not a warning either. ── */
.wr-plan {
  border: 1px solid var(--wr-line); border-radius: 13px; background: #fff;
  padding: 14px 16px; margin-bottom: 18px;
}
.wr-plan-note { font-style: italic; }
.wr-plrs { display: grid; gap: 6px; margin-top: 11px; }
.wr-plrs--st { margin-top: 6px; padding-top: 11px; border-top: 1px dashed var(--wr-line); }
.wr-plr {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(56px, .65fr) minmax(0, 1fr);
  gap: 12px; align-items: center;
  border: 1px solid var(--wr-line); border-left: 3px solid #cbd5e1;
  border-radius: 9px; background: var(--wr-soft); padding: 8px 11px; font-size: 12.5px;
}
.wr-plr.is-on { border-left-color: var(--wr-green); }
.wr-plr.is-over { border-left-color: #0ea5e9; }
.wr-plr-id { min-width: 0; }
.wr-plr-n {
  display: block; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wr-plr-s { display: block; font-size: 10.5px; color: var(--wr-mut); }
.wr-plr-f { font-size: 11.5px; color: var(--wr-sub); min-width: 0; }
.wr-plr-d { font-size: 11.5px; font-weight: 700; color: var(--wr-sub); text-align: right; }
.wr-plr.is-over .wr-plr-d { color: #075985; }
.wr-rail.is-flat { border-left: 3px solid #e2e8f0; }
@media (max-width: 1100px) {
  .wr-plr { grid-template-columns: 1fr auto; }
  .wr-plr-f, .wr-plr-m, .wr-plr-d { grid-column: 1 / -1; text-align: left; }
}


/* ══ WHERE THE TIME WENT, BY AREA OF THE BUSINESS ═══════════════════════════
   One row per area — ALL of them, zeros included — full width under the verdict
   on tab 1. (Nine of them since 2026-08-31; never write the number here, it has
   already been wrong once.) Every row carries its own
   colour on `--ar` / `--arRgb` (baked into the markup at build time — a stored
   report never loads wk-areas.js), so there is exactly one definition of an
   area's hue in the product and this file does not hold a second copy. */
.wr-areas { margin-top: 14px; }
.wr-areas-h { margin-bottom: 12px; }
.wr-areas-h .wr-lede { margin: 6px 0 0; }
.wr-ab-list { display: flex; flex-direction: column; }
.wr-ab {
  display: grid;
  grid-template-columns: 22px minmax(140px, 1.35fr) minmax(90px, 2fr) 62px 42px 62px;
  align-items: center; gap: 10px;
  padding: 9px 4px; border-top: 1px solid var(--wr-line);
}
.wr-ab:first-child { border-top: 0; }
.wr-ab-i { display: inline-flex; align-items: center; justify-content: center; color: var(--ar, #94a3b8); }
.wr-ab-i svg { width: 15px; height: 15px; }
/* ⚠️ A GRID CELL IS min-width:auto BY DEFAULT, so a long "N people · M work
   streams" line pushes the track wider than its 1.35fr and shoves the bar and
   the numbers off the right edge. min-width:0 on the cell is what lets the
   sub-line clamp instead of growing. */
.wr-ab-n { min-width: 0; font-size: 13px; font-weight: 700; color: var(--wr-ink); line-height: 1.25; }
.wr-ab-sub {
  display: block; margin-top: 2px; font-size: 11px; font-weight: 600; color: var(--wr-mut);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wr-ab-sub.is-none { font-weight: 500; font-style: italic; }
.wr-ab-bar {
  display: block; height: 8px; border-radius: 999px;
  background: rgba(var(--arRgb, 148,163,184), .12); overflow: hidden; min-width: 0;
}
.wr-ab-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--ar, #94a3b8); }
.wr-ab-h { font-size: 14px; font-weight: 800; color: var(--wr-ink); text-align: right; font-variant-numeric: tabular-nums; }
.wr-ab-p { font-size: 12px; font-weight: 700; color: var(--wr-sub); text-align: right; font-variant-numeric: tabular-nums; }
.wr-ab-d { font-size: 11px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.wr-ab-d.is-up { color: #15803d; }
.wr-ab-d.is-down { color: #b45309; }
.wr-ab-d.is-flat { color: var(--wr-mut); }
/* An area nobody touched is still a row — dimmed, because a zero is an answer
   and not an alarm. */
.wr-ab.is-zero .wr-ab-n,
.wr-ab.is-zero .wr-ab-h { color: var(--wr-mut); font-weight: 700; }
.wr-ab.is-zero .wr-ab-i { opacity: .45; }
/* Unfiled hours ARE an alarm, quietly — a record to fix, not an eighth area. */
.wr-ab.is-missing { background: #fffbeb; }
.wr-ab.is-missing .wr-ab-n { color: #92400e; }
.wr-ab-note { margin-top: 12px; }
@media (max-width: 720px) {
  .wr-ab { grid-template-columns: 22px minmax(0, 1fr) 58px 40px; }
  .wr-ab-bar { grid-column: 2 / -1; height: 6px; }
  .wr-ab-d { grid-column: 3 / -1; }
}

/* One person's split, above their two columns. A single stacked bar plus a
   legend — the room asks which part of the business their week went into
   before it asks which work stream. */
.wr-armini { margin: 0 0 14px; }
.wr-armini-bar {
  display: flex; height: 9px; border-radius: 999px; overflow: hidden; background: #eef2f7;
}
.wr-armini-bar > i { display: block; height: 100%; }
.wr-armini-k { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; }
.wr-armini-t {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; color: var(--wr-sub);
}
.wr-armini-t > i { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; }
.wr-armini-t > b { font-weight: 800; color: var(--wr-ink); }
.wr-armini-t.is-missing { color: #b45309; }

/* ══ ONE PERSON'S PERIOD, BY AREA → THE WORK INSIDE IT ══════════════════════
   Tyler, 2026-08-31: *"organize it by area that was actually worked on, and then
   in each area it'll show you the projects or just the categories."* This
   replaced a flat list of every row with hours on it inside a 420px column; it
   is full width now, because an area header plus its nested children has nowhere
   to put a second line in a sidebar.

   🚨 THE HUE IS NOT DEFINED HERE. Each group carries `--ar` / `--arRgb` baked
   into its markup at build time (a stored report never loads wk-areas.js), so
   this file holds no second copy of an area's colour — same rule as the band. */
.wr-agw { grid-column: 1 / -1; margin-bottom: 16px; }
.wr-agw-l { margin: 6px 0 0; }
/* ⚠️ auto-FIT, NOT auto-fill. auto-fill keeps laying down empty tracks, so a
   person whose whole period sat in ONE area got a 488px card in a 987px block
   with half the row blank. auto-fit collapses the empties: one group stretches,
   two sit side by side, and `align-items: start` stops a group with four rows
   dragging a group with one to the same height. */
.wr-ag-list {
  display: grid; gap: 10px; margin-top: 11px; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
}
.wr-ag {
  min-width: 0; background: #fff; border: 1px solid var(--wr-line);
  border-left: 3px solid var(--ar, #94a3b8); border-radius: 12px;
  padding: 11px 13px 3px;
}
.wr-ag.is-missing { background: #fffbeb; }
.wr-ag.is-missing .wr-ag-n { color: #92400e; }
.wr-ag-h {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) 62px 42px;
  align-items: center; gap: 4px 9px;
}
.wr-ag-i { display: inline-flex; align-items: center; justify-content: center; color: var(--ar, #94a3b8); }
.wr-ag-i svg { width: 15px; height: 15px; }
.wr-ag-n { min-width: 0; font-size: 13px; font-weight: 750; line-height: 1.25; color: var(--wr-ink); }
.wr-ag-sub {
  display: block; margin-top: 2px; font-size: 10.5px; font-weight: 600;
  color: var(--wr-sub); letter-spacing: .1px;
}
.wr-ag-hh { font-size: 14px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.wr-ag-p { font-size: 12px; font-weight: 750; color: var(--wr-sub); text-align: right; font-variant-numeric: tabular-nums; }
/* 🚨 grid-column 1 / -1, THE SAME TRACK THE CHILD BARS GET. Indented to column
   2 (past the glyph) this track is ~29px narrower than a child's, so an area at
   20% drew SHORTER than its own 20% child — a child appearing to outgrow the
   area containing it defeats the whole point of one denominator. */
.wr-ag-bar {
  grid-column: 1 / -1; display: block; height: 7px; margin-top: 4px;
  border-radius: 999px; background: #eef2f7; overflow: hidden;
}
.wr-ag-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--ar, #94a3b8); }

/* ── The work inside the area ─────────────────────────────────────────────
   A child's bar is scaled to the PERSON'S PERIOD, exactly like its parent's, so
   it can never draw wider than the area that contains it. Scaling it to the area
   instead makes a 1h row inside a 1h area look like the biggest thing they did. */
.wr-ag-kids { margin-top: 9px; border-top: 1px solid var(--wr-line); padding-top: 2px; }
.wr-ag-k {
  display: grid; grid-template-columns: minmax(0, 1fr) 92px;
  align-items: center; gap: 3px 10px; padding: 8px 0 9px;
  border-top: 1px dashed #edf1f6;
}
.wr-ag-k:first-child { border-top: 0; }
.wr-ag-k-n { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 3px 7px; }
.wr-ag-k-logo { flex: 0 0 auto; display: inline-flex; }
.wr-ag-k-t { font-size: 12.5px; font-weight: 700; color: var(--wr-ink); min-width: 0; }
.wr-ag-k-tag {
  flex: 0 0 auto; font-size: 9px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  padding: 2px 6px; border-radius: 999px; white-space: nowrap;
  color: var(--wr-sub); background: var(--wr-soft); border: 1px solid var(--wr-line);
}
/* A CATEGORY wears the area's own hue, so "this hour had no project" is legible
   at a glance rather than only in the word. */
.wr-ag-k.is-cat .wr-ag-k-tag {
  color: var(--ar, #64748b); background: rgba(var(--arRgb, 148, 163, 184), .1);
  border-color: rgba(var(--arRgb, 148, 163, 184), .3);
}
/* Named the area and nothing else. Amber, because it is the one row here worth
   acting on — the same colour the band gives an unfiled project. */
.wr-ag-k.is-bare .wr-ag-k-t { color: #92400e; }
.wr-ag-k.is-bare .wr-ag-k-tag { color: #92400e; background: #fef3c7; border-color: #fde68a; }
.wr-ag-k-par {
  flex: 0 0 auto; font-size: 10.5px; font-weight: 600; color: var(--wr-mut);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.wr-ag-k-h { font-size: 12.5px; font-weight: 750; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wr-ag-k-pct { margin-left: 6px; font-size: 10.5px; font-weight: 650; color: var(--wr-mut); }
.wr-ag-k-bar {
  grid-column: 1 / -1; display: block; height: 4px; border-radius: 999px;
  background: #f1f5f9; overflow: hidden;
}
.wr-ag-k-bar > i {
  display: block; height: 100%; border-radius: 999px;
  background: rgba(var(--arRgb, 148, 163, 184), .6);
}
.wr-ag-k-line {
  grid-column: 1 / -1; font-size: 11.5px; line-height: 1.45; color: #475569;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

@media print {
  .wr-hero-r, .wr-tb, .wr-tabs, .wr-run-acts, .wr-toggle, .wr-cbar, .wr-faces { display: none !important; }
  .wr-run, .wr-pl, .wr-fin { grid-template-columns: 1fr !important; }
  .wr-hero { border: 0; border-bottom: 2px solid #0f172a; border-radius: 0; padding: 0 0 14px; box-shadow: none !important; }
  .wr-hero::before { display: none; }
  .wr-hero-t { font-size: 24px; }
  .wr-k { grid-template-columns: repeat(4, 1fr) !important; }
  .wr-p, .wr-sr, .wr-win, .wr-pl-row { break-inside: avoid; page-break-inside: avoid; }
  .wr-sr-chev { display: none !important; }
  .wr-kc, .wr-p, .wr-rail, .wr-csheet, .wr-landed { box-shadow: none !important; }
  .wr-landed, .wr-land { break-inside: avoid; page-break-inside: avoid; }
  /* The rail summarises what is already above it — on paper it gets its own
     page rather than a squeezed column. */
  .wr-run-r, .wr-pl-r, .wr-fin-r { break-before: page; page-break-before: always; }

  /* The agenda prints as the agenda: every panel, in order, each one starting
     a page so the tab you are talking to is the page in front of everybody. */
  .wr-panel { break-before: page; page-break-before: always; }
  .wr-panel:first-of-type { break-before: auto; page-break-before: auto; }
  .wr-tabsep { display: none !important; }
  .wr-vd, .wr-sig, .wr-prj, .wr-wsr, .wr-capr, .wr-act, .wr-said {
    break-inside: avoid; page-break-inside: avoid;
  }
  /* THE ROOM PRINTS AS THE ROOM. The strip and its arrows are controls, so they
     go; every person's turn starts its own page, because a printed sheet
     showing one of nine people is the one that leaves the room. */
  .wr-strip, .wr-room-nav, .wr-filt, .wr-notes-h { display: none !important; }
  .wr-sheet { break-before: page; page-break-before: always; }
  .wr-sheet:first-child { break-before: auto; page-break-before: auto; }
  .wr-ps, .wr-out, .wr-wg, .wr-nt, .wr-swp, .wr-atr, .wr-vf, .wr-co {
    break-inside: avoid; page-break-inside: avoid;
  }
  .wr-ps, .wr-wg, .wr-tw, .wr-blk { box-shadow: none !important; }
  .wr-notes { background: #fff; border-color: #e6ecf2; }
  .wr-cols, .wr-cols--2, .wr-ps-cols, .wr-wall-grid { grid-template-columns: 1fr !important; }
  .wr-tabs { position: static !important; }
  .wr-vd, .wr-prj, .wr-act { box-shadow: none !important; }
  .wr-sigs { display: grid; grid-template-columns: repeat(3, 1fr) !important; }
  .wr-sig { border-radius: 10px; display: block; }
  .wr-dl, .wr-plr, .wr-plan { break-inside: avoid; page-break-inside: avoid; }
  .wr-plan { box-shadow: none !important; }
  /* THE DASHBOARD PRINTS AS ONE COLUMN, WITH EVERY DRILL OPEN. On paper the
     cards are not controls, so the chevron and the pressed ground go and each
     drill gets its own heading — a printed sheet showing one of five drills is
     the one that leaves the room. */
  .wr-dash { grid-template-columns: 1fr !important; }
  .wr-dash-side { position: static !important; }
  .wr-sig-go { display: none !important; }
  .wr-sig.is-on {
    background: var(--wr-soft) !important; border-color: var(--wr-line) !important;
    color: var(--wr-ink) !important; box-shadow: none !important;
  }
  .wr-sig.is-on::after { display: none !important; }
  .wr-sig.is-on .wr-sig-l { color: #475569 !important; }
  .wr-sig.is-on .wr-sig-v { color: var(--wr-ink) !important; }
  .wr-dr { break-before: page; page-break-before: always; }
  .wr-dr:first-child { break-before: auto; page-break-before: auto; }
  .wr-ah, .wr-ahr, .wr-pd-card, .wr-dr-none { break-inside: avoid; page-break-inside: avoid; }
  .wr-ah, .wr-pd-card { box-shadow: none !important; }
  .wr-pd { grid-template-columns: 1fr !important; }
}
@media (prefers-reduced-motion: reduce) {
  .wr-sr-chev, .wr-notes-chev, .wr-pc, .wr-co, .wr-out, .wr-wg, .wr-atr, .wr-fc, .wr-face,
  .wr-sig {
    transition: none !important;
  }
  .wr-pc:hover, .wr-co:hover, .wr-face:hover { transform: none; }
  .wr-strip { scroll-behavior: auto; }
}

@media print {
  .wr-ab, .wr-armini, .wr-ag, .wr-ag-k { break-inside: avoid; page-break-inside: avoid; }
  /* One area per row on paper: two 440px columns reflow to something narrower
     than either, and the nested child rows are the first thing to collapse. */
  .wr-ag-list { grid-template-columns: 1fr !important; }
  /* Bars are background fills; without this every one prints white and both the
     band and every person's groups become empty rows. */
  .wr-ab-bar > i, .wr-armini-bar > i,
  .wr-ag-bar > i, .wr-ag-k-bar > i { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .wr-ag-i, .wr-ag-k-tag { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}