/* Trangles — a deliberately quiet estimation tool. */

/* == TRANGLES-TOKENS:START ==
   Every colour the interface paints is named in this block, and nothing below
   it may hard-code a colour value. The local colour lab reads and rewrites
   the block verbatim, so keep its shape when editing by hand:

     - one declaration per line
     - "@group" comments open a section in the lab
     - "@label" comments name the swatch in the lab

   Run the lab with TRANGLES_DEV=1 and open /dev/colors. It never ships:
   the route is registered only in dev mode and only answers loopback.
   == */
:root {
  /* @group Base surfaces */
  --paper: #161922;                            /* @label Page background */
  --paper-lift: #242B3B;                       /* @label Page top glow */
  --card: #202534;                             /* @label Neutral card (active round) */
  --card-raised: #282E40;                      /* @label Raised card / controls */
  --surface-input: #151A25;                    /* @label Recessed field */
  --surface-hover: #343D53;                    /* @label Neutral hover lift */
  --grid: #2A3040;                             /* @label Structural hairline */
  --border: #3A4358;                           /* @label Default border */

  /* @group Text */
  --ink: #F4F1E8;                              /* @label Primary text (on dark) */
  --muted: #AEB7C8;                            /* @label Secondary text (on dark) */
  --on-primary: #FFFFFF;                        /* @label Text on primary action */
  --on-pencil: #FFFFFF;                         /* @label Text on coral controls */
  --on-pending: #FFFFFF;                        /* @label Text on pending control */

  /* @group Control panels — shared plastic
     Organizer control panels are bright, so they invert: dark ink on a lit
     surface. These four inks are the only text colours used on them. */
  --panel-ink: #1C1710;                        /* @label Panel text */
  --panel-ink-soft: rgba(28, 23, 16, 0.90);    /* @label Panel secondary text */
  --panel-warn: #4A0B02;                       /* @label Panel warning text */
  --panel-slot: rgba(28, 23, 16, 0.09);        /* @label Recessed row on a panel */
  --panel-slot-edge: rgba(28, 23, 16, 0.24);   /* @label Recessed row edge */
  --panel-gloss: rgba(255, 255, 255, 0.28);    /* @label Panel sheen, lit corner */
  --panel-gloss-fade: rgba(255, 255, 255, 0.02); /* @label Panel sheen, fade-out */
  --panel-shade: rgba(0, 0, 0, 0.02);          /* @label Panel sheen, turn */
  --panel-shade-deep: rgba(0, 0, 0, 0.06);     /* @label Panel sheen, shaded corner */
  --panel-bevel: rgba(255, 255, 255, 0.55);    /* @label Panel top bevel */
  --panel-bevel-dark: rgba(0, 0, 0, 0.22);     /* @label Panel bottom bevel */
  --panel-cast-tight: rgba(4, 6, 13, 0.30);    /* @label Panel contact shadow */
  --panel-cast: rgba(4, 6, 13, 0.38);          /* @label Panel drop shadow */

  /* @group Control panels — issue family (honey) */
  --honey: #FFD166;                            /* @label Honey accent */
  --honey-lit: #FFCB55;                        /* @label Issue panel, lit corner */
  --honey-deep: #F7B32B;                       /* @label Issue panel, shaded corner */
  --honey-rim: #C98A12;                        /* @label Issue panel rim */
  --honey-halo: rgba(255, 209, 102, 0.16);     /* @label Honey focus halo */

  /* @group Control panels — aspect family (orange) */
  --orange: #FF9D42;                           /* @label Orange accent */
  --orange-lit: #FFA463;                       /* @label Aspect panel, lit corner */
  --orange-deep: #FB8942;                      /* @label Aspect panel, shaded corner */
  --orange-rim: #C75A16;                       /* @label Aspect panel rim */
  --orange-halo: rgba(255, 157, 66, 0.16);     /* @label Orange focus halo */

  /* @group Control panels — point-label family (blue) */
  --blue: #55C9FF;                             /* @label Blue accent */
  --blue-lit: #63CFF9;                         /* @label Point-label panel, lit corner */
  --blue-deep: #3BB0F0;                        /* @label Point-label panel, shaded corner */
  --blue-rim: #1177B4;                         /* @label Point-label panel rim */
  --blue-halo: rgba(85, 201, 255, 0.16);       /* @label Blue focus halo */

  /* @group Result surfaces (violet)
     Results stay deep so light text and the chart's light strokes keep
     working. They take the same diagonal treatment at a lower intensity. */
  --violet: #A98CFF;                           /* @label Violet accent */
  --violet-lit: #372A76;                       /* @label Result surface, lit corner */
  --violet-deep: #1E1652;                      /* @label Result surface, shaded corner */
  --violet-rim: #6152B8;                       /* @label Result surface rim */
  --violet-halo: rgba(169, 140, 255, 0.16);    /* @label Violet hover halo */
  --violet-glow: rgba(169, 140, 255, 0.12);    /* @label Setup chart halo */
  --violet-veil: rgba(169, 140, 255, 0.07);    /* @label Live score card fill */
  --violet-veil-edge: rgba(169, 140, 255, 0.28); /* @label Live score card edge */
  --deep-gloss: rgba(255, 255, 255, 0.07);     /* @label Result sheen, lit corner */
  --deep-gloss-fade: rgba(255, 255, 255, 0.01); /* @label Result sheen, fade-out */
  --deep-shade: rgba(0, 0, 0, 0.06);           /* @label Result sheen, turn */
  --deep-shade-deep: rgba(0, 0, 0, 0.14);      /* @label Result sheen, shaded corner */
  --deep-bevel: rgba(255, 255, 255, 0.11);     /* @label Result top bevel */
  --ring: #3B345D;                             /* @label Radar grid ring */

  /* @group Actions and status */
  --primary-action: #C7464D;                    /* @label Primary action */
  --primary-edge: #D7545B;                      /* @label Primary action edge / hover */
  --primary-edge-hot: #E66A70;                  /* @label Primary action hover edge */
  --primary-glow: rgba(199, 70, 77, 0.30);      /* @label Primary action glow */
  --panel-action: #FFF4D2;                      /* @label Bright-panel action surface */
  --panel-action-edge: #E3AD39;                 /* @label Bright-panel action edge */
  --panel-action-hover: #FFFFFF;                /* @label Bright-panel action hover */
  --panel-action-ink: #2B210F;                  /* @label Bright-panel action text */
  --pencil: #C7464D;                           /* @label Consensus coral */
  --pencil-hot: #D7545B;                       /* @label Consensus coral hover */
  --pencil-fill: rgba(199, 70, 77, 0.13);      /* @label Average shape fill */
  --pencil-cast: rgba(199, 70, 77, 0.26);      /* @label Coral action shadow */
  --pencil-glow: rgba(199, 70, 77, 0.36);      /* @label Timer glow */
  --pencil-glow-max: rgba(199, 70, 77, 0.55);  /* @label Wordmark glow */
  --pending: #C97586;                           /* @label Pending end-round action */

  /* @group Single-score estimate */
  --score-low: #F4F1E8;                         /* @label Score low — pale white */
  --score-mid: #FFD166;                         /* @label Score middle — yellow */
  --score-high: #FF6464;                        /* @label Score high — bright red */
  --score-track: #3A4358;                       /* @label Score unfilled track */

  /* @group Overlays and depth */
  --shadow-light: rgba(4, 6, 13, 0.20);        /* @label Card shadow */
  --shadow-medium: rgba(4, 6, 13, 0.36);       /* @label Timer shadow */
  --shadow-strong: rgba(4, 6, 13, 0.42);       /* @label Colour picker shadow */
  --shadow-modal: rgba(4, 6, 13, 0.50);        /* @label Demo guide shadow */
  --ink-veil: rgba(244, 241, 232, 0.08);       /* @label Light overlay tint */
  --ink-line: rgba(244, 241, 232, 0.14);       /* @label Light hairline */
  --ink-edge: rgba(244, 241, 232, 0.16);       /* @label Light overlay edge */
  --ink-rule: rgba(244, 241, 232, 0.18);       /* @label Light section rule */
  --ink-quiet: rgba(244, 241, 232, 0.50);      /* @label Light text, quietest */
  --ink-soft: rgba(244, 241, 232, 0.58);       /* @label Light text, soft */
  --ink-mid: rgba(244, 241, 232, 0.66);        /* @label Light text, mid */
  --ink-loud: rgba(244, 241, 232, 0.78);       /* @label Light text, loud */
  --ink-control: rgba(244, 241, 232, 0.65);    /* @label Light control border */
  --shape-fill: rgba(244, 241, 232, 0.10);     /* @label Personal shape fill */
  --demo-halo: rgba(255, 209, 102, 0.25);      /* @label Demo target halo */

  /* @group Chart axes and participant shapes
     Also the fallback participant palette; the server sends the authoritative
     copy on join and app.js reads these tokens to build it. */
  --axis-1: #A98CFF;                           /* @label Axis 1 / participant 1 */
  --axis-2: #4FC3FF;                           /* @label Axis 2 / participant 2 */
  --axis-3: #FFB14A;                           /* @label Axis 3 / participant 3 */
  --axis-4: #FF6464;                           /* @label Axis 4 / participant 4 */
  --axis-5: #65D69A;                           /* @label Axis 5 / participant 5 */
  --axis-6: #FF7AC6;                           /* @label Axis 6 / participant 6 */
  --axis-7: #739AFF;                           /* @label Axis 7 / participant 7 */
  --axis-8: #FF9D42;                           /* @label Axis 8 / participant 8 */

  /* @group Look
     Not colours, but they are what makes the panels read as raised plastic,
     so the lab tunes them alongside the ramps. */
  --panel-angle: 145deg;                       /* @label Panel ramp angle */
  --panel-sheen-angle: 160deg;                 /* @label Panel sheen angle */
}
/* == TRANGLES-TOKENS:END == */

/* Layout scale. Deliberately outside the token block: the colour lab does not
   own geometry. */
:root {
  --radius: 16px;
  /* Content column. .end-rail positions against it, so both must move
     together — hence a variable rather than two matching magic numbers. */
  --column:      780px;
  --column-half: 390px;
  font-size: 16px;
}

* { box-sizing: border-box; }

/* Components below set `display`, which outranks the UA sheet's
   `[hidden] { display: none }` and left hidden panels on screen. Anything
   marked hidden must stay hidden. */
[hidden] { display: none !important; }

/* Every disclosure in the app uses the custom .caret, never the native
   triangle. Suppressing per-class meant each new <details> silently
   reintroduced the browser marker, so suppress it once, globally. */
summary::-webkit-details-marker { display: none; }
summary::marker { content: ""; }
/* Shared layout for any caret-bearing summary. */
summary { align-items: center; display: flex; gap: 8px; justify-content: space-between; }

body {
  margin: 0;
  color: var(--ink);
  font-family: "Public Sans", system-ui, sans-serif;
  line-height: 1.5;
  background: radial-gradient(circle at top, var(--paper-lift) 0, var(--paper) 42rem);
  min-height: 100vh;
}

.mono { font-family: "Spline Sans Mono", ui-monospace, monospace; }

/* Masthead ----------------------------------------------------------- */
.masthead {
	max-width: var(--column);
  margin: 0 auto;
  padding: 20px 16px 4px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.wordmark {
  color: var(--ink);
  text-decoration: none;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
}
.wordmark-angle { color: var(--pencil); font-size: 0.85em; text-shadow: 0 0 18px var(--pencil-glow-max); }
.code-chip {
  border: 1px solid var(--border);
  background: var(--card-raised);
  border-radius: var(--radius);
  padding: 4px 14px;
  font: inherit;
  font-size: 0.85rem;
  color: var(--muted);
  cursor: pointer;
}
.masthead-actions { align-items: center; display: flex; gap: 10px; }
/* Coral, not violet: this is a standing alert about what the room can see,
   and coral-on-white is the pairing this app uses for anything that alerts or
   moves the session forward. */
.privacy-badge {
  background: var(--pencil);
  border-radius: 999px;
  color: var(--on-pencil);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 4px 12px;
  text-transform: uppercase;
}
.code-chip .mono { color: var(--ink); font-weight: 700; letter-spacing: 0.12em; }
.code-chip:hover { border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-halo); }
.code-chip:active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.code-chip:active .mono { color: var(--paper); }
/* The chip is the only way into the session, and the organizer is the only
   person who can hand it out. Say so once on arrival rather than leaving it to
   be noticed; it dismisses itself the moment the code is copied. */
.code-chip-wrap { position: relative; }
.code-callout {
  background: var(--pencil);
  border-radius: 10px;
  box-shadow: 0 10px 24px var(--pencil-cast);
  color: var(--on-pencil);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
  max-width: 15rem;
  padding: 9px 12px;
  position: absolute;
  right: 0;
  text-align: left;
  top: calc(100% + 10px);
  width: max-content;
  z-index: 5;
}
/* Points back at the chip it is describing. */
.code-callout::before {
  border: 6px solid transparent;
  border-bottom-color: var(--pencil);
  bottom: 100%;
  content: "";
  position: absolute;
  right: 18px;
}

/* Landing ------------------------------------------------------------ */
main { max-width: var(--column); margin: 0 auto; padding: 8px 16px 48px; }
.landing, #view-intake, #view-settings, #view-session { min-height: calc(100dvh - 76px); }
.landing, #view-intake.intake-initial, #view-settings, #view-session { display: flex; flex-direction: column; justify-content: center; }
.landing { text-align: center; }
.pitch {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: clamp(1.7rem, 5vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 48px 0 28px;
}
.pitch em { font-style: normal; color: var(--pencil); }

.card {
  background: linear-gradient(var(--panel-angle), var(--card-raised), var(--card));
  border: 1px solid var(--border);
  border-radius: var(--radius);
	box-shadow: 0 14px 30px var(--shadow-light);
	padding: 18px;
	margin-bottom: 12px;
  text-align: left;
}
.landing-primary { margin: 0 auto; max-width: 30rem; position: relative; width: 100%; }
.landing-card { margin: 0; }
/* Explicit tracks, not flex: 1 — the two columns hold different content and
   flex would let their intrinsic widths pull them apart. */
.landing-split { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 20px; margin-top: 4px; }
.landing-col { display: flex; flex-direction: column; gap: 10px; justify-content: flex-end; }
.landing-rule { width: 1px; background: var(--border); }
.entry-warning { color: var(--pencil); font-size: 0.8rem; margin: 10px 0 0; text-align: left; }
.hint { font-size: 0.8rem; color: var(--muted); margin: 0; }
.demo-help { align-items: center; background: var(--card-raised); border: 1px solid var(--border); border-radius: 10px; color: var(--ink); cursor: pointer; display: inline-flex; height: 42px; justify-content: center; padding: 0; width: 42px; }
.demo-help:hover { background: var(--surface-hover); border-color: var(--violet); }
.demo-help svg { fill: none; height: 20px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 20px; }
.demo-launcher-card { margin: 14px auto 0; max-width: 30rem; text-align: left; }
.demo-launcher-head { align-items: flex-start; display: flex; gap: 12px; justify-content: space-between; }
.demo-launcher-head h2 { font-family: "Bricolage Grotesque", sans-serif; font-size: 1.2rem; letter-spacing: -0.01em; margin: 3px 0 0; }
.demo-choice-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* Control panels ------------------------------------------------------ */
/* The organizer's editing surfaces are the bright objects in the room: a
   saturated ramp on the diagonal, a sheen crossing it at a slightly different
   angle, and a light top bevel over a dark bottom one. That reads as a moulded
   plastic panel rather than a tinted rectangle, and it separates "things you
   set up" from "things the room produced", which stay deep and violet.

   Bright surfaces cannot carry --ink, so panels invert to --panel-ink and
   every quiet child below is re-pointed at --panel-ink-soft. Fields stay dark
   and recessed; the contrast of light-on-dark inside them is unchanged. */
.panel {
  background-image:
    linear-gradient(var(--panel-sheen-angle),
      var(--panel-gloss) 0%, var(--panel-gloss-fade) 34%,
      var(--panel-shade) 72%, var(--panel-shade-deep) 100%),
    linear-gradient(var(--panel-angle), var(--panel-lit), var(--panel-deep));
  border-color: var(--panel-rim);
  box-shadow:
    inset 0 1px 0 var(--panel-bevel),
    inset 0 -1px 0 var(--panel-bevel-dark),
    0 1px 1px var(--panel-cast-tight),
    0 16px 34px var(--panel-cast);
  color: var(--panel-ink);
}
.issues-box { --panel-lit: var(--honey-lit); --panel-deep: var(--honey-deep); --panel-rim: var(--honey-rim); }
.aspects-box { --panel-lit: var(--orange-lit); --panel-deep: var(--orange-deep); --panel-rim: var(--orange-rim); }
.point-labels-box { --panel-lit: var(--blue-lit); --panel-deep: var(--blue-deep); --panel-rim: var(--blue-rim); }
/* Not a control surface, but the same plate: honey is already what this app
   uses to mean "this one wants your attention", so an alert borrows it rather
   than inventing a fifth family. */
.alert-box { --panel-lit: var(--honey-lit); --panel-deep: var(--honey-deep); --panel-rim: var(--honey-rim); }
/* Quiet copy on a lit surface. Same intent as --muted, opposite direction. */
.panel .hint,
.panel .eyebrow,
.panel .field-label,
.panel .point-label-row span,
.panel .draft-item-meta summary,
.panel .btn-quiet { color: var(--panel-ink-soft); }
.panel .btn-quiet:hover { color: var(--panel-ink); }
.panel .caret { border-bottom-color: var(--panel-ink-soft); border-right-color: var(--panel-ink-soft); }
.panel .setup-warning { color: var(--panel-warn); }
/* Rows read as slots milled into the panel, so they darken rather than
   lighten — a light overlay is invisible on a bright surface. */
.panel .intake-row,
.panel .draft-item-entry,
.panel .point-label-row,
.panel #draft-aspects .draft-item { background: var(--panel-slot); border-color: var(--panel-slot-edge); }

/* Issue intake -------------------------------------------------------- */
/* The screen that replaces the old launch console. One column, one question:
   which issue are we pointing? Everything configurable is a click away. */
.intake-card { margin: 40px auto 0; max-width: 34rem; padding: 26px 24px 20px; }
#view-intake { align-items: center; display: flex; flex-direction: column; justify-content: center; min-height: calc(100dvh - 76px); }
#view-intake.intake-initial { align-items: center; display: flex; min-height: calc(100dvh - 76px); }
#view-intake .intake-stage { max-width: 34rem; position: relative; width: 100%; }
#view-intake .intake-card { margin: 0; max-width: none; width: 100%; }
#view-intake.intake-initial .intake-card { margin: 0 auto; width: 100%; }
.intake-title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.6rem;
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin: 6px 0 4px;
}
.intake-tally { margin-bottom: 4px; }
.intake-items { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 8px; }
.intake-row { align-items: center; display: flex; gap: 8px; }
.issue-mode-field { flex: 1 1 14rem; position: relative; }
.issue-mode-field input { border-color: var(--honey); padding-right: 44px; }
.issue-mode-field.field-mode-link input { border-color: var(--blue); }
.issue-mode-field.field-mode-description input { border-color: var(--orange); }
.field-mode-toggle {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--honey);
  cursor: pointer;
  display: flex;
  height: 100%;
  justify-content: center;
  padding: 0 11px;
  position: absolute;
  right: 0;
  top: 0;
}
.field-mode-toggle svg { fill: none; height: 19px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 19px; }
.field-mode-link .field-mode-toggle { color: var(--axis-2); }
.field-mode-description .field-mode-toggle { color: var(--axis-3); }
.field-mode-toggle:hover { background: transparent; color: var(--pencil); }
.row-plus, .row-minus { flex: 0 0 44px; font-size: 1.35rem; line-height: 1; padding: 7px 0; }
.intake-actions { align-items: stretch; display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
#btn-launch { width: 100%; }
.intake-actions .btn:not(#btn-launch) { align-self: flex-start; }
.intake-settings { display: block; margin: 18px 0 0; padding: 4px 0; text-align: left; width: 100%; }
.intake-after-rail { margin-top: 14px; position: relative; width: 100%; }
#btn-intake-results { width: 100%; }
.intake-back-float { background: var(--pencil); border-color: var(--pencil-hot); color: var(--on-pencil); left: auto; padding: 12px 18px; position: absolute; right: calc(100% + 16px); top: 50%; transform: translateY(-50%); white-space: nowrap; }
.intake-back-float:hover:not(:disabled) { background: var(--pencil-hot); border-color: var(--pencil-hot); color: var(--on-pencil); }
.chart-loading { animation: chart-pulse 1.1s ease-in-out infinite; color: var(--muted); font-size: 0.85rem; letter-spacing: 0.08em; margin: 24px auto; text-align: center; text-transform: uppercase; }
.chart-box > .chart-loading { color: var(--ink-mid); }
@keyframes chart-pulse { 0%, 100% { opacity: 0.38; } 50% { opacity: 1; } }
.demo-focusable { margin-bottom: 24px; margin-top: 12px; }

/* Session settings ---------------------------------------------------- */
#view-settings { max-width: 720px; }
.settings-head { align-items: flex-start; display: flex; gap: 16px; justify-content: space-between; margin: 20px 0 14px; }
.settings-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.setup-title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.5rem;
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin: 4px 0 0;
}
.draft-items { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 12px; }
.draft-item-entry, .queue-item { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }
.draft-item { align-items: center; display: flex; gap: 8px; width: 100%; }
.draft-item input { flex: 1 1 auto; min-width: 0; width: auto; }
.draft-item .btn-quiet { margin: 0; }
.settings-item-title { font-weight: 600; margin-bottom: 8px; overflow-wrap: anywhere; }
.draft-item-meta { margin-top: 10px; }
.draft-item-meta summary { color: var(--muted); cursor: pointer; font-size: 0.78rem; }
.draft-item-meta .draft-meta-fields { padding-top: 10px; }
.draft-meta-fields { display: flex; flex-direction: column; gap: 8px; }
.issues-box .issue-mode-field input { border-color: var(--honey); }
.issues-box .field-mode-toggle { color: var(--honey); }
#draft-aspects .draft-item { border: 1px solid var(--panel-slot-edge); border-radius: 12px; padding: 7px; }
#draft-aspects .draft-item input { border-color: var(--orange); }
.point-labels-box .point-label-row { border: 1px solid var(--panel-slot-edge); border-radius: 12px; padding: 7px; }
.point-labels-box .point-label-row input { border-color: var(--blue); }

/* Result surfaces ----------------------------------------------------- */
/* Same diagonal construction as a control panel, dialled down: results are
   read, not operated, and the radar's light strokes need a dark floor. */
.chart-box, .summary-card, .history-card, .final-summary-card {
  background-image:
    linear-gradient(var(--panel-sheen-angle),
      var(--deep-gloss) 0%, var(--deep-gloss-fade) 34%,
      var(--deep-shade) 72%, var(--deep-shade-deep) 100%),
    linear-gradient(var(--panel-angle), var(--violet-lit), var(--violet-deep));
  border-color: var(--violet-rim);
  box-shadow: inset 0 1px 0 var(--deep-bevel), 0 14px 30px var(--shadow-light);
}
.chart-box #setup-full-plot { filter: drop-shadow(0 8px 18px var(--violet-glow)); }
.caret { border-bottom: 2px solid var(--muted); border-right: 2px solid var(--muted); height: 7px; margin: 0 4px; transform: rotate(45deg); transition: transform 120ms; width: 7px; }
details[open] > summary .caret { transform: rotate(225deg); }
.setup-warning { color: var(--pencil); font-size: 0.85rem; font-weight: 600; margin: 10px 0 0; }
.control-group { display: flex; flex-direction: column; gap: 6px; }
.control-group + .control-group { border-top: 1px solid var(--panel-slot-edge); margin-top: 16px; padding-top: 14px; }
.field-label { color: var(--muted); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
#setup-point-labels { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.point-label-row { align-items: center; display: flex; gap: 8px; width: 100%; }
.point-label-row span { color: var(--muted); font-family: "Spline Sans Mono", monospace; text-align: right; }
.point-label-row span { flex: 0 0 2rem; }
.point-label-row input { flex: 1 1 auto; min-width: 0; width: auto; }
#setup-full-plot { display: block; margin: 4px auto; max-width: 620px; overflow: visible; width: 100%; }

.field { display: block; }
.field span {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 4px;
}
input {
  width: 100%;
  font: inherit;
  color: var(--ink);
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-input);
}
input:focus-visible, button:focus-visible, .handle:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
}
/* Inside a control panel the accent border reads against the dark field, and
   the outline reads against the bright panel. Neither alone covers both. */
.issues-box input:focus-visible { border-color: var(--honey); box-shadow: 0 0 0 3px var(--honey-halo); outline-color: var(--panel-ink); }
.aspects-box input:focus-visible { border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-halo); outline-color: var(--panel-ink); }
.point-labels-box input:focus-visible { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-halo); outline-color: var(--panel-ink); }
.panel button:focus-visible { outline-color: var(--panel-ink); }

.btn {
  font: inherit;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card-raised);
  color: var(--ink);
  cursor: pointer;
}
.btn:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--violet); }
.btn-primary { background: var(--primary-action); border-color: var(--primary-edge); color: var(--on-primary); box-shadow: 0 8px 18px var(--primary-glow); }
.btn-primary:hover:not(:disabled) { background: var(--primary-edge); border-color: var(--primary-edge-hot); }
.btn-panel-action { background: var(--panel-action); border-color: var(--panel-action-edge); color: var(--panel-action-ink); box-shadow: 0 6px 14px var(--panel-cast-tight); }
.btn-panel-action:hover:not(:disabled) { background: var(--panel-action-hover); border-color: var(--panel-action-edge); }
.btn-session-commit { background: var(--pencil); border-color: var(--pencil-hot); color: var(--on-primary); box-shadow: 0 8px 18px var(--pencil-cast); }
.btn-session-commit:hover:not(:disabled) { background: var(--pencil-hot); border-color: var(--pencil-hot); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-quiet {
  border-color: transparent;
  color: var(--muted);
  font-weight: 400;
  padding: 4px 8px;
  margin-top: 10px;
  font-size: 0.85rem;
}
.btn-quiet:hover { color: var(--pencil); background: none; }
.intake-settings.btn-panel-action { margin-top: 18px; min-height: 46px; padding: 10px 12px; text-align: center; }

/* Round card --------------------------------------------------------- */
.eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.round-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.round-head-actions { align-items: center; display: flex; gap: 10px; }

/* Personal colour. A single dot in the corner of the issue, opening a small
   palette — enough personalisation to find your own shape on the overlay,
   not enough to become another thing to configure. */
.color-picker { position: relative; }
.color-swatch {
  background: var(--ink);
  border: 2px solid var(--card);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--border);
  cursor: pointer;
  height: 18px;
  padding: 0;
  width: 18px;
}
.color-swatch:hover { box-shadow: 0 0 0 1px var(--ink); }
.color-options {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 24px var(--shadow-strong);
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, 1fr);
  padding: 10px;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 40;
}
.color-option {
  border: 2px solid transparent;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--border);
  cursor: pointer;
  height: 22px;
  padding: 0;
  width: 22px;
}
.color-option.is-mine { border-color: var(--ink); }
/* Taken colours stay on show so the pool reads as fixed, but go flat and inert. */
.color-option:disabled { cursor: not-allowed; opacity: 0.28; }
.timer { color: var(--pencil); font-weight: 700; text-shadow: 0 0 16px var(--pencil-glow); }
.timer.is-paused { color: var(--muted); }
.round-title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: -0.01em;
  margin: 4px 0 8px;
  overflow-wrap: anywhere;
}
.round-title.idle { color: var(--muted); font-weight: 500; }
.round-title a { color: inherit; text-decoration: none; }
.round-title a[href] { text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; }
.round-description { color: var(--muted); margin: -2px 0 10px; white-space: pre-wrap; }

.plot-wrap { display: flex; flex-direction: column; align-items: center; }
.plot-wrap.is-loading { justify-content: center; min-height: 320px; }
/* A live round is neutral on purpose: several participant colours share the
   surface, and a tinted floor would bias how they read against each other. */
.round-card .chart-box, .live-inputs.chart-box { background: var(--card); background-image: none; border-color: var(--border); box-shadow: none; }
.plot-wrap.chart-box, .simple-wrap.chart-box { border-radius: 14px; padding: 12px; }
#plot { width: 100%; max-width: 600px; touch-action: none; user-select: none; cursor: crosshair; overflow: visible; }

.readouts { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 18px; margin: 2px 0 12px; }
.readout { text-align: center; }
.readout .val { font-family: "Spline Sans Mono", monospace; font-weight: 700; font-size: 1.15rem; }
.readout .lbl { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }

.submit-row { display: flex; align-items: stretch; gap: 14px; justify-content: center; width: 100%; }
.submit-row .btn { flex: 1 1 auto; padding-bottom: 15px; padding-top: 15px; width: 100%; }
.progress { font-size: 0.85rem; color: var(--muted); }

/* SVG plot ----------------------------------------------------------- */
.ring { fill: none; stroke: var(--ring); stroke-width: 1; }
.ring-outer { stroke: var(--violet); opacity: 0.72; }
.axis-line { stroke: var(--ink); stroke-width: 1.5; opacity: 0.55; }
.axis-label { fill: var(--ink); font: 600 12px "Public Sans", sans-serif; letter-spacing: 0.06em; text-transform: uppercase; }
.tick-label {
  font: 500 9px "Spline Sans Mono", monospace;
  fill: var(--ink);
  /* Tick numbers now sit on their own axis line; knock the line out from
     behind the glyphs so they stay legible. */
  paint-order: stroke;
  stroke: var(--card);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.my-shape { fill: var(--shape-fill); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.avg-shape {
  fill: var(--pencil-fill);
  stroke: var(--pencil);
  stroke-width: 2;
  stroke-dasharray: 5 4;
  stroke-linejoin: round;
}
.handle { cursor: grab; pointer-events: all; }
.handle:active { cursor: grabbing; }
.handle .dot { fill: var(--card-raised); stroke-width: 2.5; r: 7; }
.handle .hit { fill: transparent; r: 20; }
.plot-disabled .handle { cursor: default; }
.live-shape { cursor: help; fill-opacity: 0.13; stroke-width: 2.5; stroke-linejoin: round; }

/* Summary ------------------------------------------------------------ */
.summary-card { border-left: 4px solid var(--violet); }
/* Capstone ----------------------------------------------------------- */
/* Deliberately NOT a .card. The estimating screens are pale cards on graph
   paper; this inverts to dark so the session reads as finished at a glance
   rather than as one more step in the same stack. */
.final-summary-card {
  border: 1px solid var(--violet-rim);
  border-radius: var(--radius);
  color: var(--ink);
  margin: 28px 0 16px;
  padding: 34px 30px 28px;
}
.capstone-head { border-bottom: 1px solid var(--ink-rule); padding-bottom: 18px; }
.capstone-kicker {
  color: var(--honey);
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.capstone-title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 6px 0 4px;
}
.capstone-sub { color: var(--ink-mid); margin: 0; max-width: 34rem; }

.capstone-total { align-items: baseline; display: flex; flex-wrap: wrap; gap: 12px; padding: 22px 0 6px; }
.capstone-points {
  color: var(--ink);
  font-size: clamp(3rem, 9vw, 4.5rem);
  font-weight: 700;
  line-height: 1;
}
.capstone-points-label { color: var(--ink-mid); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; }
.capstone-meta { color: var(--ink-quiet); font-size: 0.8rem; margin-left: auto; }

.final-issues { display: flex; flex-direction: column; margin-top: 10px; }
.final-issue {
  align-items: baseline;
  border-top: 1px solid var(--ink-line);
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding: 11px 0;
}
.final-issue .title { font-weight: 600; overflow-wrap: anywhere; }
.final-issue .mono { color: var(--honey); font-size: 1.05rem; font-weight: 700; }
.session-insights { border-top: 1px solid var(--ink-rule); margin-top: 16px; padding-top: 16px; }
.capstone-insights { color: var(--ink-loud); margin: 10px 0 0; padding-left: 1.2rem; }
.capstone-insights li + li { margin-top: 4px; }
.capstone-foot { color: var(--ink-quiet); margin: 18px 0 0; }
.summary-head { display: flex; gap: 18px; align-items: center; margin-bottom: 12px; }
.points-block { text-align: center; min-width: 92px; }
.points-num {
  display: block;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  color: var(--pencil);
}
.points-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.points-why { color: var(--muted); font-size: 0.9rem; margin: 0; }

.axis-stats { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.axis-row { display: grid; grid-template-columns: 7.2rem 1fr 6rem; gap: 10px; align-items: center; }
.axis-row .lbl { font-size: 0.8rem; font-weight: 600; }
.axis-bar { height: 8px; border-radius: 4px; background: var(--paper); position: relative; overflow: hidden; }
.axis-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 4px; }
.axis-row .num { font-size: 0.8rem; color: var(--muted); text-align: right; }

.observations { margin: 0 0 14px; padding-left: 1.2rem; }
.observations li { margin-bottom: 4px; }
.insights-title { color: var(--muted); font-size: 0.72rem; letter-spacing: 0.1em; margin: 0 0 6px; text-transform: uppercase; }

.minis { display: flex; flex-wrap: wrap; gap: 12px; }
.mini { text-align: center; width: 84px; }
.mini svg { width: 84px; height: 78px; }
.mini .name { font-size: 0.72rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini.is-outlier .name { color: var(--pencil); font-weight: 600; }
.mini-shape { fill: var(--shape-fill); stroke: var(--ink); stroke-width: 1.5; }
.mini.is-outlier .mini-shape { stroke: var(--pencil); }
.mini .ring { stroke: var(--grid); }

/* People ------------------------------------------------------------- */
.people-card { margin: 0 0 16px; }
.people { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.person {
  display: inline-flex;
  align-items: center;
  gap: 6px;
	padding: 2px 0;
  font-size: 0.85rem;
	background: transparent;
}
.person .check { color: var(--border); font-weight: 700; }
.person.submitted .check { color: var(--pencil); }
/* The organizer contributes no estimate, so their tick can never mean
   "submitted". It takes the wordmark's coral as identity instead of sitting
   greyed out as though they were still deciding. */
.person.is-organizer .check { color: var(--pencil); }
.person .org { font-size: 0.65rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.person .default-vote { color: var(--muted); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; }

/* Live organizer charts --------------------------------------------- */
.live-head { align-items: start; display: flex; gap: 12px; justify-content: space-between; }
.live-head .hint { margin-top: 3px; }
.view-switch { display: flex; gap: 6px; }
.view-switch .btn { font-size: 0.8rem; padding: 6px 10px; }
.live-toggles { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 14px 0 8px; }
.live-toggle { align-items: center; display: inline-flex; font-size: 0.82rem; gap: 5px; }
.live-toggle input { width: auto; }
.live-toggle i { border-radius: 999px; height: 8px; width: 8px; }
.live-overlay { display: block; margin: 0 auto; max-width: 660px; overflow: visible; width: 100%; }
/* The stage holds whichever view is showing. Its floor matches the overlay's
   drawn height (viewBox 500x434, capped at 660 wide) so Individual lands in
   the same box; a grid too tall for it still grows past it. */
.live-stage { min-height: min(573px, 87vw); }
.live-stage.is-loading { align-items: center; display: flex; justify-content: center; }
.live-stage.has-empty { align-items: center; display: flex; justify-content: center; min-height: 5rem; }
/* An empty stage is a waiting state, not an error, so it reads exactly like a
   chart that has not drawn yet — same pulse, same casing, same rhythm. */
.live-empty { animation: chart-pulse 1.1s ease-in-out infinite; letter-spacing: 0.08em; max-width: 26rem; padding: 12px 0; text-align: center; text-transform: uppercase; }
/* This one can sit on screen for minutes rather than the moment a chart takes,
   so it holds still for anyone who asked motion to stop. */
@media (prefers-reduced-motion: reduce) { .live-empty { animation: none; } }
.live-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(170px, 200px)); justify-content: center; margin-top: 12px; }
.live-mini { text-align: center; }
.live-mini svg { display: block; width: 100%; }
.live-mini span { font-size: 0.78rem; font-weight: 600; }
.live-scores { border-top: 1px solid var(--grid); display: flex; flex-direction: column; gap: 9px; margin: 14px auto 0; max-width: 660px; padding-top: 12px; width: 100%; }
.live-scores-head { align-items: baseline; color: var(--muted); display: flex; font-size: 0.78rem; justify-content: space-between; letter-spacing: 0.06em; text-transform: uppercase; }
.live-scores-head strong { color: var(--ink); font-size: 0.78rem; letter-spacing: 0; text-transform: none; }
.live-score-row { align-items: center; display: grid; gap: 10px; grid-template-columns: minmax(5rem, 9rem) 1fr 2rem; text-align: left; }
.live-score-name { font-size: 0.82rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-score-track { background: var(--surface-input); border-radius: 999px; height: 8px; overflow: hidden; position: relative; }
.live-score-track i { border-radius: inherit; display: block; height: 100%; }
.live-score-row strong { color: var(--ink); font-size: 0.85rem; text-align: right; }
.live-score-card { align-items: stretch; background: var(--violet-veil); border: 1px solid var(--violet-veil-edge); border-radius: 12px; display: flex; padding: 12px; width: 100%; }
.live-score-card .live-score-row { flex: 1; }

/* Organizer shelf ---------------------------------------------------- */
.organizer-shelf { border-top: 1px solid var(--border); margin-top: 20px; padding-top: 8px; }
.organizer-shelf summary { align-items: center; color: var(--muted); cursor: pointer; display: flex; font-size: 0.8rem; font-weight: 600; justify-content: space-between; letter-spacing: 0.08em; text-transform: uppercase; }
.shelf-body { display: flex; flex-direction: column; padding: 14px 0 4px; }
/* Groups carry their own heading at the shelf's left edge, so the shelf reads
   as one column of sections rather than a tree of drawers. */
.shelf-group { display: flex; flex-direction: column; gap: 8px; }
.shelf-group + .shelf-group { border-top: 1px solid var(--grid); margin-top: 16px; padding-top: 16px; }
.shelf-action { align-self: flex-start; margin-top: 0; }
/* Close session is the one shelf action that should not be missed: it spans
   the full content column so it reads as the same width as the cards above. */
.shelf-close-group { padding-top: 18px; }
.btn-close-session { width: 100%; }
.console-row { align-items: center; display: flex; gap: 8px; flex-wrap: wrap; }
.aspect-toggle { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--muted); }
.aspect-toggle input { width: auto; }
.console-row input#in-seconds { flex: 0 0 7rem; text-align: center; }
.pending-people { color: var(--muted); flex: 1 1 12rem; font-size: 0.85rem; }

/* Floating End round ------------------------------------------------- */
/* Anchored to the left edge of the 680px content column and fixed, so the
   organizer can cut a round short from any scroll position — the session-view
   counterpart of the sticky launch rail in setup. */
.end-rail { align-items: center; display: flex; flex-direction: column; gap: 6px; position: fixed; top: 50%; left: calc(50% - var(--column-half) - 18px); transform: translate(-100%, -50%); z-index: 30; }
.end-float { background: var(--pencil); border-color: var(--pencil); color: var(--on-pencil); box-shadow: 0 10px 22px var(--pencil-cast); min-height: 64px; white-space: nowrap; }
.end-float:hover:not(:disabled) { background: var(--pencil-hot); border-color: var(--pencil-hot); }
.end-float.is-pending { background: var(--pending); border-color: var(--pending); color: var(--on-pending); }
.end-float.is-confirm { background: var(--pencil); border-color: var(--pencil); }
.end-vote-count { color: var(--muted); font-size: 0.78rem; }
.end-hint { color: var(--pencil); font-size: 0.75rem; max-width: 10rem; text-align: center; }

/* History ------------------------------------------------------------ */
.history-card { border-left: 4px solid var(--border); }
.history-head { align-items: center; display: flex; justify-content: space-between; gap: 12px; }
.history-nav { align-items: center; display: flex; gap: 8px; }
.history-arrow { font-size: 1rem; line-height: 1; padding: 4px 12px; }
.history-title { font-family: "Bricolage Grotesque", sans-serif; font-size: 1.15rem; font-weight: 700; margin: 6px 0 12px; overflow-wrap: anywhere; }
.history-body { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.history-body.is-loading { align-items: center; display: flex; justify-content: center; min-height: 320px; }
#history-chart { display: block; overflow: visible; width: 100%; }
.history-facts { display: flex; flex-direction: column; gap: 12px; }
.history-facts .points-block { text-align: left; }
.history-facts .points-num { color: var(--ink); font-size: 2.2rem; }

/* Floating countdown --------------------------------------------------- */
/* The clock belongs to the room, not to one card, so it sits clear of the
   content where everyone can find it without scrolling. */
.timer-float {
  align-items: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: 0 10px 22px var(--shadow-medium);
  display: flex;
  gap: 10px;
  padding: 6px 14px;
  position: fixed;
  right: 18px;
  top: 16px;
  z-index: 50;
}
.timer-float .timer { font-size: 1.05rem; }
.timer-controls { display: flex; gap: 4px; }
.timer-mini {
  background: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.7rem;
  padding: 2px 9px;
}
.timer-mini:hover { border-color: var(--ink); color: var(--ink); }

/* Estimate mode ------------------------------------------------------- */
.mode-switch { display: flex; gap: 6px; margin: 4px 0 12px; }
.mode-switch .btn { font-size: 0.8rem; padding: 6px 12px; }
/* Simple pointing: one number, given the same room the chart would have had
   so switching modes does not make the card jump. */
.simple-wrap { align-items: center; display: flex; flex-direction: column; gap: 4px; padding: 22px 0 18px; }
.simple-value { color: var(--score-color, var(--score-low)); font-size: 3.4rem; font-weight: 700; line-height: 1; }
.simple-label { color: var(--muted); font-size: 0.8rem; letter-spacing: 0.1em; min-height: 1.2em; text-transform: uppercase; }
.simple-slider {
  appearance: none;
  background: linear-gradient(to right, var(--score-color, var(--score-low)) 0 var(--score-percent, 0%), var(--score-track) var(--score-percent, 0%) 100%);
  border-radius: 999px;
  height: 10px;
  margin-top: 10px;
  max-width: 30rem;
  width: 100%;
}
.simple-slider::-webkit-slider-thumb { appearance: none; background: var(--score-color, var(--score-low)); border: 2px solid var(--ink); border-radius: 50%; box-shadow: 0 0 0 3px color-mix(in srgb, var(--score-color, var(--score-low)) 30%, transparent); height: 22px; width: 22px; }
.simple-slider::-moz-range-thumb { background: var(--score-color, var(--score-low)); border: 2px solid var(--ink); border-radius: 50%; box-shadow: 0 0 0 3px color-mix(in srgb, var(--score-color, var(--score-low)) 30%, transparent); height: 18px; width: 18px; }
.simple-scale { color: var(--muted); display: flex; font-size: 0.75rem; justify-content: space-between; max-width: 30rem; width: 100%; }

/* Scope selects ------------------------------------------------------- */
/* Every optional control says what it applies to, so "for this issue" and
   "for all remaining issues" are never left to be inferred. The padding mirrors
   .btn and input so a dropdown never reads shorter than the control beside it. */
.scope-select {
  background: var(--surface-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--ink);
  font: inherit;
  padding: 9px 12px;
}
/* Selects size to content; keep them from collapsing narrower than the field
   they sit next to, and align them to the same baseline as the buttons. */
.console-row .scope-select { flex: 0 0 auto; }

/* Attribution --------------------------------------------------------- */
.site-footer { margin: 0 auto; max-width: var(--column); padding: 0 16px 28px; text-align: center; }
.attribution { color: var(--ink-quiet); font-size: 0.78rem; margin: 0; }
.attribution-link { color: var(--ink-soft); text-decoration: none; }
.attribution-link:hover { color: var(--ink); text-decoration: underline; }

/* Toast -------------------------------------------------------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  /* Longhand, deliberately: the shorthand would reset background-image and
     the alert variant below paints with the shared panel gradient. */
  background-color: var(--card-raised);
  border: 1px solid var(--border);
  color: var(--ink);
  padding: 8px 18px;
  border-radius: 6px;
  font-size: 0.9rem;
  max-width: 90vw;
}
/* A reminder is an alert, not a status line. It takes the issue panel's honey
   plate and its dark ink, so the one message that expects a response looks
   like the surface the organizer already associates with acting. */
.toast.panel { border-color: var(--panel-rim); color: var(--panel-ink); }

/* Guided demo --------------------------------------------------------- */
/* The guide is deliberately a compact companion instead of a modal. The
   production interface remains visible so the explanation and behavior stay
   connected. */
.demo-guide {
  background: var(--card-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 16px 36px var(--shadow-modal);
  color: var(--ink);
  max-width: 25rem;
  padding: 16px;
  position: fixed;
  right: 18px;
  top: 76px;
  width: calc(100% - 36px);
  z-index: 70;
}
.demo-guide .eyebrow { color: var(--honey); }
.demo-guide .btn-quiet { color: var(--ink-mid); }
.demo-guide .btn-quiet:hover { color: var(--ink); }
.demo-guide-head { align-items: center; display: flex; justify-content: space-between; }
.demo-title { font-family: "Bricolage Grotesque", sans-serif; font-size: 1.25rem; letter-spacing: -0.01em; margin: 8px 0 4px; }
.demo-copy { color: var(--ink-loud); font-size: 0.9rem; margin: 0; }
.demo-peer-preview { background: var(--ink-veil); border: 1px solid var(--ink-edge); border-radius: 10px; margin-top: 14px; padding: 10px; }
.demo-peer-preview h3 { font-size: 0.9rem; margin: 3px 0 5px; }
.demo-peer-preview p { color: var(--ink-mid); font-size: 0.8rem; margin: 0; }
.demo-guide-actions { align-items: center; display: flex; gap: 10px; justify-content: space-between; margin-top: 14px; }
.demo-step-actions { display: flex; gap: 6px; }
.demo-guide-actions .btn { border-color: var(--ink-control); background: transparent; color: var(--ink); font-size: 0.8rem; padding: 6px 10px; }
.demo-guide-actions .btn:disabled { opacity: 0.35; }
.demo-guide-actions .hint { color: var(--ink-soft); text-align: right; }
.is-demo #code-chip,
.is-demo #code-callout,
.is-demo #timer-float,
.is-demo #organizer-shelf,
.is-demo #end-rail,
.is-demo #submit-row,
.is-demo #mode-switch,
.is-demo #color-picker,
.is-demo .view-switch,
.is-demo .history-nav { display: none !important; }
.is-demo #plot { cursor: default; }
.is-demo .handle { cursor: default; pointer-events: none; }
.demo-target { outline: 3px solid var(--honey); outline-offset: 8px; position: relative; z-index: 5; }
/* A short, target-anchored tooltip names the current control. The adjacent
   guide carries the longer explanation and, for organizers, the peer view. */
.demo-role-switch { display: flex; gap: 6px; margin-top: 14px; }
.demo-role-switch .btn { flex: 1; font-size: 0.8rem; padding: 6px 10px; }
.demo-role-switch .btn[aria-pressed="true"] { background: var(--violet); border-color: var(--violet); color: var(--ink); }

/* Below this the side gutter is too narrow to hold the button clear of the
   content column, so it becomes a floating bar above the fold instead. */
@media (max-width: 1080px) {
  .end-rail { bottom: 18px; left: 50%; top: auto; transform: translateX(-50%); }
  .end-float { min-height: 0; padding: 12px 22px; }
}

@media (max-width: 760px) {
  .history-body { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .landing-split { grid-template-columns: 1fr; }
  .landing-rule { display: none; }
  .intake-card { margin-top: 20px; }
  .landing-primary { max-width: 30rem; }
  .intake-actions .btn { flex: 1 1 100%; }
  .intake-back-float { margin-top: 10px; position: static; transform: none; width: 100%; }
  .settings-head { flex-direction: column; }
  .summary-head { flex-direction: column; text-align: center; }
  .axis-row { grid-template-columns: 6rem 1fr 5rem; }
  .live-head { align-items: stretch; flex-direction: column; }
  /* The masthead already occupies the top-right on a narrow screen. */
  .timer-float { right: 50%; top: auto; bottom: 16px; transform: translateX(50%); }
  .demo-guide { bottom: 12px; right: 12px; top: auto; width: calc(100% - 24px); }
}

@media (prefers-reduced-motion: no-preference) {
  .btn, .code-chip, input { transition: background 120ms, border-color 120ms, color 120ms; }
}