/* ============================================================
   Agenda Health Check — app shell styles.
   This file owns the shell/topbar chrome, the input screen, the analyzing
   spinner, the sign-in gate wrapper, and the report screen's two-pane
   workspace layout (.ac-report__grid / .ac-report__main / .ac-rail). The
   components it lays out are NOT restyled here beyond that layout and the
   --wea-accent override below: the grade card is the ws-energy-arc
   component (components.css, same markup as agenda-check/r/index.php's
   share render), recommendation rows come from the .energy-arc-rec* rules
   in css/planner/prep.css, and the report agenda's cards are the planner's
   own ws-planner-card (LG, read-only) from the already-loaded
   includes/components/components.css — only the .ac-agenda-item time-gutter
   wrapper around each card is defined here. Tokens only (no raw hex/rgba);
   see /design-system/platform-tokens.css.
   Everything is scoped under .ac (mirrors synthesize/synthesize.css's
   .synth-* shell pattern, renamed).
   ============================================================ */

/* [hidden] must win over component display rules (e.g. .btn) */
.ac-shell [hidden] { display: none !important; }

/* ────────────────────────────────────────────────────────────
   APP SHELL — locked viewport, facilitator/synthesize pattern.
   ws_header on top; .ac-shell fills the rest; .ac-stage scrolls.
   ──────────────────────────────────────────────────────────── */
body.ac-app-body {
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ac-app-body #main-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* The tool's frame: a flex column carrying ws_app_bar above a stage that
   scrolls. Same shape as .synth-shell, and what a full-bleed shell step
   expects — .app-shell__main--bleed lays its single child out to fill the
   region, which is where the definite height below comes from. */
.ac-shell {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ---------- Stage ---------- */
.ac-stage {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* A size container, so .ac-rail can cap itself against this scroller rather
     than against the viewport. The rail used to subtract a hardcoded topbar
     height from 100vh, which was only ever true on the standalone page; inside
     the shell there is a platform header and an app bar above it instead, and
     at narrow widths the bar is a different height again. Asking the container
     removes the arithmetic and stays right when the chrome changes. */
  container-type: size;
}
.ac-stage .ac {
  min-height: 100%;
  /* A flex column so .ac-screen--input can actually claim the stage's height.
     Its `min-height: 100%` resolves against this element's height, which is
     auto — tall only by way of the min-height above — so the percentage
     computed to nothing and the composer sat pinned to the top. */
  display: flex;
  flex-direction: column;
}

/* ---------- Boot / analyzing spinner ---------- */
.ac-boot { display: grid; place-items: center; min-height: 50vh; }
.ac-spinner {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  border: 3px solid var(--phase-learn-light);
  border-top-color: var(--phase-learn);
  animation: ac-spin 0.9s linear infinite;
}
@keyframes ac-spin { to { transform: rotate(360deg); } }

.ac-analyzing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  min-height: 50vh;
  padding: var(--space-8) var(--space-4);
  text-align: center;
}
.ac-analyzing h2 {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--font-semibold);
  color: var(--color-ink);
  margin: 0;
}
.ac-analyzing p {
  font-family: var(--font-body);
  font-size: var(--text-ui);
  color: var(--color-ink-muted);
  margin: 0;
  max-width: 40ch;
}

/* ────────────────────────────────────────────────────────────
   SCREENS
   ──────────────────────────────────────────────────────────── */
.ac-screen {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-5);
}

/* ---------- Input screen: composer ---------- */
/* .ac-screen--input additionally centers the composer stack vertically in
   the stage — a small empty-state input shouldn't sit pinned to the top of
   a tall viewport. The report screen keeps the plain top-aligned .ac-screen. */
.ac-screen--input {
  flex: 1;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ac-input {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

/* One unified card: borderless textarea on top, an integrated footer bar
   below sharing the same border. The card (not the textarea) carries the
   border and focus ring — :focus-within promotes it whenever any control
   inside is focused, per the approved design. */
.ac-composer {
  width: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  overflow: hidden;
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), background var(--duration-base) var(--ease-out);
  animation: ac-composer-in var(--duration-base) var(--ease-out);
}
@keyframes ac-composer-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .ac-composer { animation: none; }
}
.ac-composer:focus-within {
  border-color: var(--focus-ring-color);
  box-shadow: 0 0 0 3px var(--focus-ring-color);
}
.ac-composer.is-dragover {
  border-color: var(--phase-learn);
  background: var(--phase-learn-very-light);
}

/* The textarea itself is borderless — the card supplies the frame. */
.ac-composer .ac-input__textarea {
  border: none;
  border-radius: 0;
  background: transparent;
  padding: var(--space-5) var(--space-5) var(--space-3);
  min-height: 224px; /* ~10 rows at this font-size/line-height */
  max-height: 55vh;
  resize: none;
  overflow-y: hidden; /* toggled to auto by JS once content clamps at max-height */
}
.ac-composer .ac-input__textarea:focus {
  outline: none;
  border: none;
  box-shadow: none;
}
.ac-input__textarea {
  width: 100%;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-small);
  line-height: 1.6;
}
.ac-input__textarea::placeholder { color: var(--color-ink-faint); font-family: var(--font-body); }

/* Integrated footer bar, inside the same card border. */
.ac-composer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-2) var(--space-3) var(--space-3);
  border-top: 1px solid var(--gray-100);
}
.ac-composer__bar-left,
.ac-composer__bar-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.ac-composer__field {
  padding: var(--space-1-5) var(--space-2);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-small);
}
.ac-composer__field:focus {
  outline: none;
  border-color: var(--focus-ring-color);
}
.ac-composer__field--participants {
  width: var(--space-16); /* 64px */
  text-align: center;
}
.ac-composer__field--time {
  width: 6.5rem;
}
.ac-composer__count {
  color: var(--color-ink-muted);
  font-size: var(--text-small);
  white-space: nowrap;
}
.ac-composer__kbd {
  display: inline-flex;
  align-items: center;
  margin-left: var(--space-1-5);
  padding: 1px var(--space-1-5);
  border: 1px solid var(--text-inverse);
  border-radius: var(--radius-sm);
  color: var(--text-inverse);
  font-family: var(--font-body);
  font-size: var(--text-nano);
  font-weight: var(--font-semibold);
  opacity: 0.75;
}

/* Slim dropzone strip under the composer — a single row, not a 140px block. */
.ac-dropzone {
  width: 100%;
  border: 1.5px dashed var(--gray-300);
  border-radius: var(--radius-xl);
  color: var(--color-ink-muted);
  background: var(--bg-subtle);
  cursor: pointer;
  transition: border-color var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out);
}
.ac-dropzone:hover,
.ac-dropzone.is-dragover {
  border-color: var(--phase-learn);
  background: var(--phase-learn-very-light);
}
.ac-dropzone.is-dragover { color: var(--phase-learn-dark); }
.ac-dropzone--slim {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-small);
}
.ac-dropzone--slim .material-symbols-outlined {
  color: var(--phase-learn);
  font-size: var(--text-ui);
}

/* Empty-state ghost chip: only visible while the textarea is empty. */
/* The sample-agenda button is a plain ws_button secondary — the dashed pill
   that used to live here was a one-off chip with no other instance in the
   platform. #acSampleChip is still the JS handle (it toggles hidden as the
   textarea fills), so the id is contract; the styling is the component's. */

.ac-input__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-3);
}

/* ---------- Report screen: two-pane workspace ---------- */
/* The report screen widens past the input screen's 880px cap — a work
   surface + 340px rail needs more room than a centered composer. */
/* Full-width workspace. At the two-pane width the left column's edge aligns
   with the global header's light-red section tag (.wsh-header__tag) — its x
   is measured at render time into --ac-align-left (see render() in
   agenda-check.js) since it depends on the logo's rendered width. Narrower
   viewports fall back to the topbar's own inline padding. */
.ac-screen--report { max-width: none; margin: 0; }
@media (min-width: 1024px) {
  .ac-screen--report { padding-left: var(--ac-align-left, var(--space-5)); }
}
@media (max-width: 640px) {
  .ac-screen--report { padding-inline: var(--space-3); }
}

.ac-report {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Single column below 1024px: source order puts .ac-rail before
   .ac-report__main (see agenda-check.js renderReportScreen), so the rail —
   card, verdict, issues (with its sign-in gate), then actions — stacks
   above the work surface (just the agenda timeline) by default. At
   >=1024px explicit grid-column placement moves .ac-report__main to the
   left column and .ac-rail to the right regardless of source order. */
.ac-report__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 1024px) {
  .ac-report__grid {
    grid-template-columns: minmax(0, 1fr) 630px;
    align-items: start;
  }
  .ac-report__main { grid-column: 1; grid-row: 1; }
  .ac-rail {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: var(--space-4);
    padding-right: var(--space-6); /* 24px breathing room at the workspace's right edge */
    /* The issues section can run long (many rows, or the gated anon blur
       block) — cap the sticky rail to the height of the stage it scrolls
       inside, so it scrolls internally instead of running past the bottom
       and breaking stickiness. */
    max-height: calc(100cqh - var(--space-8));
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--gray-300) transparent;
  }
  .ac-rail::-webkit-scrollbar { width: 6px; }
  .ac-rail::-webkit-scrollbar-track { background: transparent; }
  .ac-rail::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: var(--radius-full); }
  /* At this breakpoint the rail column is exactly 340px — the same cap the
     ws-energy-arc card carries — so, unlike the share page's wider hero
     (agenda-check/r/index.php, where the card sits narrower than its 640px
     container), there's no horizontal slack beside the card for the corner
     letter. Reserve room above the card instead: the letter becomes a
     smaller stamp overlapping the card's top-right corner rather than
     floating beside it. Below 1024px the rail column is wider than the
     card's 340px cap, so the original share-page-style sizing/position
     applies unchanged. */
  .ac-rail .ac-report__hero { padding-top: var(--space-6); max-width: none; margin: 0; }
  .ac-rail .ac-grade__letter {
    top: 0;
    right: var(--space-2);
    font-size: var(--text-h1); /* fixed — a fixed-width column, not viewport-relative */
  }
}

.ac-report__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
}

.ac-report__hero {
  position: relative;
  width: 100%;
  /* Cap + center for non-rail contexts (the share page r/index.php wraps
     ws_energy_arc_card in this class inside a plain .ac-screen) — the rail
     overrides this cap in the ≥1024px media query. */
  max-width: 640px;
  margin-inline: auto;
}

/* ---------- Report agenda: time-gutter rows around ws-planner-card ----------
   The card itself (ws-planner-card--lg) is unstyled here — components.css
   owns it entirely, including the sanctioned type-color exception to Red
   Unification (exercise blue / icebreaker green / break gray / custom
   purple). Only the running-clock gutter beside each card belongs to this
   app, mirroring the planner timeline's own time-gutter look. */
.ac-report__agenda {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
/* Plain block — the card spans the full column width so its left edge aligns
   with the page content edge; the start time rides inside the card header
   (.ac-card-time) instead of a gutter column. */
.ac-agenda-item {
  display: block;
}
/* Drag to reorder. The handle and grab cursor come off ws_planner_card's own
   is-draggable / __handle rules (includes/components/components.css); what is
   local here is the list's dragging and re-scoring states. */
.ac-report__agenda .sortable-ghost {
  opacity: 0.4;
}
.ac-report__agenda .sortable-chosen .ws-planner-card {
  box-shadow: var(--shadow-lg);
}
/* While the new order is being scored the list is not draggable (no Sortable
   instance is mounted), so it says so rather than silently ignoring a drag. */
.ac-report__agenda.is-rescoring {
  opacity: 0.6;
  pointer-events: none;
}

.ac-card-time {
  margin-left: auto; /* header is flex (component); push time to the right */
  color: var(--color-ink-muted);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ac-report__issues {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Issues section header — mirrors .ws-section-header's markup (left-aligned
   variant) with an added meta-count slot that component has no equivalent
   for. Overrides the component's hero-scale defaults (40px margin, h2 type)
   down to an in-content section header. */
.ac-issues__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.ac-issues__header .ws-section-header__title {
  font-size: var(--text-h3);
  margin-bottom: 0;
}
.ac-issues__meta {
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: var(--text-small);
  color: var(--color-ink-muted);
  white-space: nowrap;
}
.ac-issues__subhead {
  margin: var(--space-2) 0 0;
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--font-semibold);
  color: var(--color-ink-muted);
}

/* ---------- Inspector rail ---------- */
.ac-rail {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}
/* Red Unification: ws_energy_arc_card()'s default --wea-accent is
   --color-info-dark (blue) — override so the score value and metric bars
   render in the platform's single brand color instead of leaking blue. */
.ac-rail .ws-energy-arc {
  --wea-accent: var(--phase-learn);
  /* The shared component self-caps at 340px; the rail column is wider, and
     the card should fill it edge to edge. */
  max-width: none;
  width: 100%;
}

/* ---------- Dataviz stat-tile/meter contract ----------
   Rail-scoped overrides ONLY — the shared ws-energy-arc rules in
   components.css are never edited here; Coach/Facilitator keep the
   component's own serif score, uppercase labels, and 2x2 grid unchanged. */

/* Hero figure: the dataviz mark spec requires a hero number to render in
   the platform sans (never a display/serif face), >=48px. The shared
   component sets font-style: italic at 32px. DESIGN.md's Fraunces-for-
   headlines rule governs headlines, not figures, so this is a deliberate,
   rail-scoped deviation rather than a font-family swap of the platform's
   heading face. --text-display-lg (56px) clears the >=48px floor. */
.ac-rail .ws-energy-arc__score-value {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: var(--font-semibold);
  font-size: var(--text-display-lg);
  letter-spacing: normal;
}

/* Meters: same-ramp track. The unfilled track becomes a light step of the
   RED ramp (the fill's own ramp, via --wea-accent above) instead of the
   component's neutral gray track, so state reads across the whole bar. */
.ac-rail .ws-energy-arc__metric-bar {
  background: var(--phase-learn-very-light);
}

/* Labels sentence case: the data is already sentence-cased by the server
   (see renderGradeCard()'s comment in agenda-check.js) — this only undoes
   the shared component's ALL-CAPS eyebrow styling. Values stay in primary
   ink, which .ws-energy-arc__metric-value already uses (--wea-text) —
   no override needed there. */
.ac-rail .ws-energy-arc__metric-label {
  text-transform: none;
  letter-spacing: normal;
}

/* Layout: 4 stacked rows (label left / value right, thin meter bar
   beneath) instead of the component's cramped 2x2 grid — a 340px rail has
   no room for two side-by-side metrics. Each piece is reassigned to a
   named grid area rather than reordered in markup, so the shared
   .ws-energy-arc__metric DOM (label, bar, value) stays untouched — only
   its visual placement changes here. The bar itself is already 4px tall
   with a full pill radius in the shared component (components.css) — that
   already matches the dataviz mark spec (2-4px tall, 4px rounded ends), so
   only its width (56px -> 100%, to span the stacked row) is overridden. */
.ac-rail .ws-energy-arc__metrics {
  grid-template-columns: 1fr;
  row-gap: var(--space-2);
}
.ac-rail .ws-energy-arc__metric {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "label value" "bar bar";
  row-gap: var(--space-1);
  column-gap: var(--space-2);
}
.ac-rail .ws-energy-arc__metric-label { grid-area: label; }
.ac-rail .ws-energy-arc__metric-value { grid-area: value; }
.ac-rail .ws-energy-arc__metric-bar { grid-area: bar; width: 100%; }

/* Issue rows (.energy-arc-rec, css/planner/prep.css) compacted for the
   340px rail — the shared component's --space-5 padding/gap was sized for
   prep.php's wider single-column layout. */
.ac-rail .energy-arc-rec {
  padding: var(--space-3);
  gap: var(--space-3);
}
.ac-rail .energy-arc-rec__body {
  gap: var(--space-2);
}

.ac-rail__verdict {
  font-family: var(--font-body);
  font-size: var(--text-small);
  color: var(--color-ink-muted);
  line-height: 1.5;
  margin: 0;
}
.ac-rail__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Additive letter-grade flourish on top of the ws-energy-arc card — the card
   itself is not restyled here beyond the --wea-accent override above. The
   one deliberate motion flourish per motion.md; everything else in this
   file stays restrained.
   Solid tinted chip (not bare colored text): at the >=1024px .ac-rail scale
   below, the letter shrinks to text-h1 and sits mostly above the card in the
   page's --bg-page area — plain text there read as nearly invisible. A solid
   background (the color-*-light family, same band as the text color) gives
   it contrast against either the card or the page, at any size. Padding is
   em-based so it scales with the clamp()'d font-size at both this default
   rule and the smaller fixed size the rail override below applies. */
.ac-grade__letter {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  /* Must paint above the ws-energy-arc card's opaque surface — with z-index
     auto the later-painted card covers the chip. */
  z-index: 1;
  display: inline-flex;
  align-items: center;
  padding: 0.1em 0.35em;
  border-radius: var(--radius-lg);
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  /* Fluid letter-grade flourish must interpolate between a floor and
     ceiling; no type-scale token expresses a clamp() range. */
  font-size: clamp(4rem, 8vw, 6rem); /* ds-lint-disable-line — clamp(64px, ..., 96px) */
  line-height: 1;
  color: var(--color-ink);
  pointer-events: none;
  opacity: 0;
  animation: ac-grade-reveal var(--duration-reveal-lg) var(--ease-reveal) forwards;
}
.ac-grade__letter--good { color: var(--color-success-dark); background: var(--color-success-light); }
.ac-grade__letter--warn { color: var(--color-warning-dark); background: var(--color-warning-light); }
.ac-grade__letter--risk { color: var(--color-error-dark); background: var(--color-error-light); }

@keyframes ac-grade-reveal {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .ac-grade__letter { animation: none; opacity: 1; transform: none; }
}

/* ---------- Sign-in gate ---------- */
.ac-gate { position: relative; }
.ac-gate__blur {
  filter: blur(4px);
  pointer-events: none;
  user-select: none;
  transition: filter var(--duration-base) var(--ease-out);
}

/* ---------- Issue rows ----------
   The rows reuse .energy-arc-rec from css/planner/prep.css, which dresses them
   in a cream fill, a 3px orange rule down the left edge and an orange glyph.
   Two things are wrong with that here. The cream and the ink are
   var(--warm-cream) and var(--warm-ink), custom properties defined nowhere in
   the codebase, so the hardcoded fallbacks always paint — cream #FEF7F1 is the  ds-lint-disable-line
   page background this platform retired in July 2026. And the orange is a
   second accent hue in a platform that unified on red, carrying no meaning
   while it does it: the linter ships a `severity` on every issue and this
   client never reads it, so the colour marks nothing.

   Restated in the platform's own card vocabulary. The rule down the edge goes
   rather than turning red — a heavy coloured edge is decoration standing in
   for hierarchy, and the icon already says which kind of issue this is.
   Scoped to .ac so the planner's own prep page keeps what it has. */
.ac .energy-arc-rec {
  background: var(--bg-surface);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
}

.ac .energy-arc-rec__icon {
  color: var(--color-primary-on-white);
}

.ac .energy-arc-rec__text {
  color: var(--color-ink-secondary);
}

/* ---------- Print ---------- */
/* Export copies the agenda as text and then prints. Inside the shell the page
   carries a platform header, a side rail, an app bar and a launcher, none of
   which belong in the printout, so the report is isolated the way the
   Impact Report stylesheet does: hide everything, then bring back only the
   report subtree. */
@media print {
  body * { visibility: hidden; }
  .ac-report, .ac-report * { visibility: visible; }
  /* Undo the frame before positioning the report. .ac-stage is a finite-height
     scroller and a size container, which on screen is exactly what it should
     be — but in print it would clip a long report to one stage's worth and
     anchor the absolute positioning below to itself rather than the page. The
     Prove report has no contained scroll ancestor and so needs none of this. */
  .ac-shell, .ac-stage {
    display: block;
    height: auto;
    max-height: none;
    min-height: 0;
    overflow: visible;
    container-type: normal;
  }
  .ac-report {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    max-width: none;
  }
  .ws-app-bar,
  .ac-gate,
  .ac-rail__actions {
    display: none !important;
  }
  /* The rail is sticky on-screen only; let it flow with the page in print. */
  .ac-rail { position: static; max-height: none; overflow: visible; }
  .ac-report__grid { grid-template-columns: 1fr; }
}