/* ================= WEEK AGENDA — THE PANEL'S OWN SKIN =================
   Extends shared components (`.modal-overlay`/`.modal-card`, CSS/components.css;
   `.a-card`/`.a-empty`/`.a-err`/`.a-callout`/`.a-chip`/`.a-chip-st`/`.a-hint`/`.a-btn`,
   alt-components.css/alt-shell.css); every class here is a new `a-wa-*` name applied alongside
   one of those, never redefining it. No raw hex — every colour/radius/shadow/space is an
   alt-tokens.css `--a-*` role.

   The only existing accordion (`.a-okr-imp-g`, CSS/okr-import.css) lives in a sheet neither
   host of this panel loads, so the `<details>`/`<summary>` INTERACTION is copied rather than the
   stylesheet — recorded as a deliberate deviation in
   _docs/reports-and-audits/week-agenda-architecture.md §5d. Extract to alt-components.css if a
   third consumer ever wants this exact skin. */

/* ---------- the dialog shell — width only; height is never asserted (design-system.md §12) ---------- */
.a-wa-card{
  width:100%;
  max-width:720px;
}
.a-wa-body{
  gap:var(--a-3);
  flex-direction:column;
  overflow-y:auto;
}
/* A section is not flexible — exactly as tall as its content, open or shut, with the BODY doing
   the scrolling (§12's one-scroll-region-per-detail-surface). Without `flex:0 0 auto`, the
   default flex-shrink:1 crushed every closed section to its 17px header height once the body
   hit its viewport ceiling, slicing titles in half with `overflow:hidden` hiding the evidence. */
.a-wa-body > .a-wa-sec{
  flex:0 0 auto;
}

/* ---------- the week range line, above every state ---------- */
.a-wa-range{
  margin:0 0 var(--a-3);
  font-size:12px;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--a-dim);
}

/* ---------- the action row: Generate / Regenerate / the processing status ---------- */
.a-wa-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--a-3);
  margin:0 0 var(--a-3);
  min-width:0;
}
.a-wa-when{
  font-size:12px;
  color:var(--a-faint);
}
/* The sentence itself says "changed" — colour only underlines it (§18). */
.a-wa-stale{
  font-size:12px;
  font-weight:600;
  color:var(--a-amber);
}
.a-wa-genstat{
  display:inline-flex;
  min-width:0;
}

/* ================= THIS WEEK AT A GLANCE — the panel's own headline card =================
   Replaces the old "Week Snapshot" <details> and its seven-day strip with one bordered card
   holding two sub-cards (Workload by Day, Recommended Focus), a three-up insight strip and four
   deterministic tiles — see weekAgendaGlanceHtml() for the markup. `.a-wa-tiles`/`.a-wa-tile`/
   `.a-wa-tilen`/`.a-wa-tilel` are the same classes the retired eight-tile row used
   (open-tiles-on-hold.test.js locates it by name); `.warn` is gone since Overdue is no longer
   one of these four tiles and nothing emits that modifier any more. */
.a-wa-glance{
  padding:var(--a-4);
  display:flex;
  flex-direction:column;
  gap:var(--a-4);
}
.a-wa-glance-h{
  margin:0;
  font:700 14px/1.3 var(--a-body);
  color:var(--a-text);
}

/* ---------- the two sub-cards: Workload by Day, Recommended Focus ---------- */
.a-wa-glance-cards{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:var(--a-3);
}
.a-wa-glance-card{
  min-width:0;
  padding:var(--a-3);
  border:1px solid var(--a-line-soft);
  border-radius:var(--a-r);
  background:var(--a-raised);
  display:flex;
  flex-direction:column;
  gap:var(--a-2);
}
.a-wa-glance-ch{
  display:flex;
  flex-direction:column;
  gap:1px;
  min-width:0;
}
.a-wa-glance-ct{
  font:700 12px/1.3 var(--a-body);
  color:var(--a-text);
}
.a-wa-glance-cs{
  font-size:11px;
  color:var(--a-dim);
  /* `title` carries the full sentence on hover; weekAgendaWorkloadHtml() still prints a short
     hint below rather than resting on hover text alone. */
  cursor:default;
}

/* ---------- Workload by Day — bars built in HTML (storage-charts.js's own bar technique,
   reused), axis and gridlines decorative and aria-hidden ---------- */
.a-wa-wl-plot{
  position:relative;
  margin-top:var(--a-1);
}
/* The axis and gridlines measure `.a-wa-wl-track` itself, and only that: both are offset by
   `.a-wa-wl-col`'s own padding-top and stand exactly as tall as the track (74px) — one number
   pair to keep in sync, not the three an earlier build measured against instead. */
.a-wa-wl-axis, .a-wa-wl-gridlines{
  position:absolute;
  top:38px;
  height:74px;
  pointer-events:none;
}
.a-wa-wl-axis{
  left:0;
  width:18px;
}
.a-wa-wl-gridlines{
  left:22px;
  right:0;
}
.a-wa-wl-gridn{
  position:absolute;
  right:2px;
  transform:translateY(50%);
  font-size:9px;
  font-variant-numeric:tabular-nums;
  /* `--a-dim`, not `--a-faint` — the faint tier has an 11px floor (design-system.md) and these
     axis ticks are deliberately smaller, fine print beside the bars' own real counts. */
  color:var(--a-dim);
}
.a-wa-wl-gridline{
  position:absolute;
  left:0;
  right:0;
  border-top:1px dashed var(--a-line-soft);
}
.a-wa-wl-bars{
  display:flex;
  align-items:flex-end;
  gap:6px;
  margin-left:26px;
}
.a-wa-wl-col{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  position:relative;
  /* Reserved room above the track for the tallest bar's count plus, on the heaviest day, its
     badge stacked above that — held open on every column so the axis starts at a fixed offset. */
  padding-top:38px;
  background:none;
  border:none;
  border-radius:var(--a-r-sm);
  font-family:var(--a-body);
  cursor:pointer;
}
div.a-wa-wl-col{
  cursor:default; /* a zero day renders as a <div>, not a <button> — "not a door" */
}
button.a-wa-wl-col:hover{
  background:var(--a-float);
}
/* The track is the one positioning context for the fill, count and badge — all three read the
   same `pct` the JS computed for this bar, so they ride up and down together. `overflow` is
   never `hidden`: a tall bar's count/badge legitimately rises into the padding reserved above. */
.a-wa-wl-track{
  position:relative;
  width:100%;
  max-width:26px;
  height:74px;
}
.a-wa-wl-fill{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  min-height:2px; /* the flat hairline a zero day draws; wins over inline height:0% by cascade */
  border-radius:2px 2px 0 0;
  background:var(--a-blue);
}
.a-wa-wl-col.heaviest .a-wa-wl-fill{
  background:var(--a-red);
}
.a-wa-wl-col.mid .a-wa-wl-fill{
  background:var(--a-amber);
}
.a-wa-wl-col.zero .a-wa-wl-fill{
  background:var(--a-line-strong);
}
.a-wa-wl-n{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  white-space:nowrap;
  font-size:11px;
  font-weight:700;
  color:var(--a-text);
  font-variant-numeric:tabular-nums;
}
.a-wa-wl-badge{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  white-space:nowrap;
  font:700 8px/1.4 var(--a-body);
  letter-spacing:.04em;
  color:var(--a-red);
  background:var(--a-red-soft);
  border-radius:var(--a-r-pill);
  padding:1px 5px;
}
.a-wa-wl-lab{
  height:14px;
  font-size:10px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  line-height:14px;
  color:var(--a-dim);
}

/* ---------- Recommended Focus — a donut (decorative, aria-hidden) plus a legend, both real
   doors alongside it (weekAgendaDonutHitsHtml()/weekAgendaLegendHtml()) ---------- */
.a-wa-focus-body{
  display:flex;
  align-items:center;
  gap:var(--a-3);
  min-width:0;
}
/* 140 -> 156px against the design image, where the ring is the dominant element beside a
   smaller legend text block. The SVG's own viewBox scales every inner font-size/radius with it
   for free. */
.a-wa-donut{
  position:relative;
  flex:0 0 auto;
  width:156px;
  height:156px;
}
.a-wa-donut-svg{
  display:block;
  width:100%;
  height:100%;
}
.a-wa-donut-track{
  fill:none;
  stroke:var(--a-line-soft);
  stroke-width:14;
}
.a-wa-donut-slice{
  fill:none;
  stroke-width:14;
}
.a-wa-donut-val{
  font:700 20px/1 var(--a-body);
  fill:var(--a-text);
}
/* The caption overlapped the ring: measured with getComputedTextLength(), the caption was 57.6
   viewBox units against a 50.2-unit hole at its own y-position. Font 6->5.4u and
   letter-spacing .08em->.05em bring it to 49.8u; y 60->58 lifts it to a 51.6u hole — fits, with
   clearance. `textLength` on the element pins it to 50 units in any face regardless, so the
   fit no longer depends on the font-size alone. */
.a-wa-donut-cap{
  font:700 6px/1 var(--a-body);
  letter-spacing:.05em;
  fill:var(--a-dim);
}
/* The per-arc number, drawn on the wedge itself, beside the legend row. White fill with a soft
   dark outline (`paint-order:stroke fill`, so the stroke sits under the fill) rather than a flat
   colour, because plain white reads poorly against the amber segment in light theme. */
.a-wa-donut-seg-n{
  font:700 9px/1 var(--a-body);
  fill:#fff;
  paint-order:stroke fill;
  stroke:rgba(0,0,0,.45);
  stroke-width:2px;
  stroke-linejoin:round;
}
/* The hit layer, stacked on the decorative SVG — see weekAgendaDonutHitsHtml() for why a click
   handler isn't on the arc itself. Each button's own `--wa-seg-soft` washes the exact wedge it
   jumps from on hover. */
.a-wa-donut-hit{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
}
.a-wa-donut-hit:hover{
  background:var(--wa-seg-soft, var(--a-blue-soft));
}
.a-wa-legend{
  list-style:none;
  margin:0;
  padding:0;
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.a-wa-legend-row{
  width:100%;
  display:flex;
  align-items:center;
  gap:var(--a-2);
  min-width:0;
  padding:4px 2px;
  border-radius:var(--a-r-sm);
  background:none;
  border:none;
  font:600 12px/1.3 var(--a-body);
  color:var(--a-text);
  text-align:left;
  cursor:pointer;
}
button.a-wa-legend-row:hover{
  background:var(--a-float);
}
.a-wa-legend-row.is-zero{
  cursor:default;
  color:var(--a-dim);
}
.a-wa-legend-dot{
  flex:0 0 auto;
  width:10px;
  height:10px;
  border-radius:50%;
}
.a-wa-legend-n{
  flex:0 0 auto;
  min-width:16px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.a-wa-legend-l{
  flex:1 1 auto;
  min-width:0;
  color:var(--a-dim);
  font-weight:500;
}

/* ---------- the three-up insight strip — icon, headline, sub-line, separated by thin rules ---------- */
.a-wa-insights{
  display:flex;
  border-top:1px solid var(--a-line-soft);
  border-bottom:1px solid var(--a-line-soft);
}
.a-wa-insight{
  flex:1 1 0;
  min-width:0;
  display:flex;
  align-items:flex-start;
  gap:var(--a-2);
  padding:var(--a-3);
  border-right:1px solid var(--a-line-soft);
  background:none;
  border-left:none; border-top:none; border-bottom:none;
  font-family:var(--a-body);
  text-align:left;
}
.a-wa-insight:last-child{
  border-right:none;
}
div.a-wa-insight{
  cursor:default; /* an insight with nothing to point at — "zero count is not a door" */
}
button.a-wa-insight{
  cursor:pointer;
}
button.a-wa-insight:hover{
  background:var(--a-float);
}
.a-wa-insight-ic{
  flex:0 0 auto;
  margin-top:1px;
  color:var(--a-dim);
}
.a-wa-insight-txt{
  display:flex;
  flex-direction:column;
  gap:1px;
  min-width:0;
}
.a-wa-insight-txt b{
  font-size:12px;
  font-weight:700;
  color:var(--a-text);
}
.a-wa-insight-txt span{
  font-size:11px;
  color:var(--a-dim);
}

/* ---------- the four deterministic tiles — Open / Done this week / Starred / No due date ---------- */
.a-wa-tiles{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:var(--a-2);
}
.a-wa-tile{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  padding:var(--a-2) var(--a-3);
  min-width:0;
}
.a-wa-tilen{
  font-size:20px;
  font-weight:700;
  line-height:1.1;
  font-variant-numeric:tabular-nums;
  color:var(--a-text);
}
.a-wa-tilel{
  font-size:11px;
  color:var(--a-dim);
}

/* ---------- the collapsible sections — native <details>, chevron on the left, rotating ---------- */
.a-wa-sec{
  min-width:0;
  overflow:hidden;
}
.a-wa-sec + .a-wa-sec{
  margin-top:var(--a-2);
}
.a-wa-sech{
  display:flex;
  align-items:center;
  gap:var(--a-2);
  min-width:0;
  padding:var(--a-2) var(--a-3);
  cursor:pointer;
  font:600 13px/1.4 var(--a-body);
  color:var(--a-text);
  list-style:none;
}
.a-wa-sech::-webkit-details-marker{
  display:none;
}
.a-wa-sech::before{
  content:'';
  flex:0 0 auto;
  width:0;
  height:0;
  border-left:5px solid var(--a-faint);
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
  transition:transform var(--a-quick) var(--a-ease);
}
.a-wa-sec[open] > .a-wa-sech::before{
  transform:rotate(90deg);
}
@media (prefers-reduced-motion: reduce){
  .a-wa-sech::before{ transition:none; }
}
.a-wa-sech:hover{
  background:var(--a-raised);
}
/* The count stays visible while folded (design-system.md §6 rule 3) — it lives in the summary
   row itself, never inside the disclosed body. */
.a-wa-sect{
  flex:1 1 auto;
  min-width:0;
}
.a-wa-secn{
  flex:0 0 auto;
  font-size:12px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--a-faint);
}
.a-wa-secb{
  padding:0 var(--a-3) var(--a-3);
  min-width:0;
}

/* ---------- section content: the executive summary paragraph ---------- */
.a-wa-summary{
  margin:0;
  font-size:13px;
  line-height:1.6;
  color:var(--a-text);
}

/* ---------- section content: the item lists (priorities, themes, close-out, move-next, suggestions) ---------- */
.a-wa-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:var(--a-3);
}
.a-wa-item{
  min-width:0;
  border-top:1px solid var(--a-line-soft);
  padding-top:var(--a-3);
}
.a-wa-item:first-child{
  border-top:none;
  padding-top:0;
}
.a-wa-itemhead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--a-2);
  min-width:0;
}
/* A real button, underlined — a link that could lose its colour still reads as one (§18). */
.a-wa-tlink{
  background:none;
  border:none;
  padding:0;
  min-height:24px;
  font:600 13px/1.4 var(--a-body);
  color:var(--a-blue-text);
  text-align:left;
  text-decoration:underline;
  text-underline-offset:2px;
  cursor:pointer;
}
.a-wa-tlink:hover{
  color:var(--a-text);
}
.a-wa-tt{
  font-weight:600;
  color:var(--a-text);
}
.a-wa-when-tag{
  flex:0 0 auto;
  font-size:11px;
  color:var(--a-dim);
  white-space:nowrap;
}
.a-wa-reason{
  margin:4px 0 0;
  font-size:12px;
  line-height:1.55;
  color:var(--a-dim);
}
.a-wa-themetitle{
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--a-text);
}
.a-wa-chips{
  display:flex;
  flex-wrap:wrap;
  gap:var(--a-1);
  margin-top:6px;
}

/* ---------- responsive: the tiles fold before anything else does ---------- */
@media (max-width:639px){
  .a-wa-tiles{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

/* ---------- responsive: the glance card at a phone-width panel (~400px viewport, per
   sizeModalToViewport()'s own 86% ratio) ---------- */
@media (max-width:559px){
  /* Workload by Day above Recommended Focus — two charts sharing one row below ~280px each is
     illegible. */
  .a-wa-glance-cards{
    grid-template-columns:minmax(0, 1fr);
  }
  /* Donut above its own legend, centred, rather than squeezed into a slim leftover column. */
  .a-wa-focus-body{
    flex-direction:column;
    align-items:center;
  }
  .a-wa-legend{
    width:100%;
  }
  .a-wa-donut{
    width:128px; /* kept in proportion with the 140->156 growth above */
    height:128px;
  }
  /* Same "too narrow to be legible" fix as the two sub-cards above: stacked, with a horizontal
     rule standing in for the vertical one the wide layout draws. */
  .a-wa-insights{
    flex-direction:column;
  }
  .a-wa-insight{
    border-right:none;
    border-bottom:1px solid var(--a-line-soft);
  }
  .a-wa-insight:last-child{
    border-bottom:none;
  }
  /* Measured on the real panel: seven 3-letter uppercase labels with letter-spacing were tight
     enough to touch their neighbour at ~400px. Tightening the gap and dropping letter-spacing
     here (never at wider widths) is cheaper than a second, narrower label vocabulary. */
  .a-wa-wl-bars{
    gap:3px;
  }
  .a-wa-wl-lab{
    font-size:9px;
    letter-spacing:0;
  }
}

/* ================= THE LAUNCHER'S OWN NARROW-WIDTH BEHAVIOUR =================
   Measured: `#altAnalytics .a-sec-h` ("Work at a glance") doesn't wrap or shrink, so this
   button pushed tasks.html into horizontal scroll at 320/360/390px once it joined that row
   (calendar.html was unaffected at the same widths). The label is the only thing that may go —
   it must survive everywhere the row has room (clean at 640px+) and disappear only where it
   actually forces the scroll; `#altWeekAgendaBtn` keeps its `title`/`aria-label` so the
   accessible name survives the word being hidden. Hiding the label alone left 9px of overflow
   from `.a-btn.ghost`'s own padding, sized for a labelled button — the second rule tightens only
   this button's own padding at the same breakpoint, an id-scoped rule rather than a
   redefinition of `.a-btn.ghost`. Clean at 320-640px, panel open and closed — see
   week-agenda-architecture.md's UI lane report for the measured numbers. */
@media (max-width:639px){
  #altWeekAgendaBtn .a-lbl{
    display:none;
  }
  #altWeekAgendaBtn{
    padding-left:var(--a-1);
    padding-right:var(--a-1);
  }
}