/* Plum design system — drop this in and use the tokens.
 *
 * The light palette is Plum's real one, lifted from site/styles.css in the
 * insurwreck-kit repo. Do not invent values; use these.
 *
 * The dark palette is derived. The published system has no dark theme and says
 * so plainly ("white page background; never use a dark section"), so these are
 * the light tokens carried onto a dark ground with WCAG AA preserved: the
 * neutrals keep the warm #211D20 hue rather than going to a blue-grey or a flat
 * black, and plum is lifted because #7A315D on a dark ground fails contrast.
 */

:root {
  color-scheme: light dark;

  /* ink and surface */
  --ink:        #211d20;   /* primary text */
  --stone:      #696267;   /* secondary text */
  --faint:      #9a9297;   /* tertiary labels, metadata */
  --paper:      #FFF1E6;   /* page background */
  --mist:       #f8f2ec;   /* soft section and code background */
  --line:       #e9e5e7;   /* every border and divider */

  /* accent — plum is the only recurring one */
  --plum:       #7a315d;   /* links, active states, workflow path */
  --plum-ink:   #54203f;   /* accent hover, dark accent text */
  --plum-wash:  #f7eef3;   /* highlight and selected-state background */

  /* signal — at most once per page */
  --signal:     #c65a32;
  --signal-wash:#fbf0eb;

  /* breach — the 4th, most-severe urgency tier (AT_RISK_BREACHED) */
  --breach:     #4a1224;
  --breach-wash:#efe2e6;

  /* dynamic status theme — red/amber/green, literal per the product brief
     (not the plum-family urgency tier above). One hue family per bucket;
     ACTION_REQUIRED shares AT_RISK's hue but a deeper wash, per spec. */
  --track-good:      #1a7a4c; --track-good-bg:      #eaf7ee; --track-good-line: #bfe6cc;
  --track-warn:      #EF9B0F; --track-warn-bg:      #fdf6df; --track-warn-line: #f0dfa0;
  --track-warn-strong-bg: #faecc0;
  --track-crit:      #b3261e; --track-crit-bg:      #fdecec; --track-crit-line: #f3b7b3;

  /* type */
  --display: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  /* layout */
  --wrap: 1120px;
  --radius: 18px;          /* cards: 1px line, 18px radius, no drop shadow */
  --section: 88px;         /* 64px on mobile */
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:        #f4f1f3;
    --stone:      #a79fa4;
    --faint:      #7b7379;
    --paper:      #171416;  /* warm near-black, same hue family as --ink */
    --mist:       #1f1b1e;
    --line:       #322c30;

    --plum:       #c97ba5;  /* lifted: #7A315D fails AA on a dark ground */
    --plum-ink:   #e3aac8;  /* hover goes lighter on dark, not darker */
    --plum-wash:  #2a1b24;

    --signal:     #e08a62;
    --signal-wash:#2e1e17;

    --breach:     #e6a3b8;
    --breach-wash:#2b1219;

    --track-good: #6fcf9a; --track-good-bg: #12251a; --track-good-line: #2c4a37;
    --track-warn: #e0b34d; --track-warn-bg: #2a2211; --track-warn-line: #4d4023;
    --track-warn-strong-bg: #34290f;
    --track-crit: #ef8f88; --track-crit-bg: #2c1614; --track-crit-line: #4d2b28;
  }
}

/* The viewer's own toggle must beat the OS preference in both directions. */
:root[data-theme="dark"] {
  --ink:#f4f1f3; --stone:#a79fa4; --faint:#7b7379;
  --paper:#171416; --mist:#1f1b1e; --line:#322c30;
  --plum:#c97ba5; --plum-ink:#e3aac8; --plum-wash:#2a1b24;
  --signal:#e08a62; --signal-wash:#2e1e17;
  --breach:#e6a3b8; --breach-wash:#2b1219;
  --track-good: #6fcf9a; --track-good-bg: #12251a; --track-good-line: #2c4a37;
  --track-warn: #e0b34d; --track-warn-bg: #2a2211; --track-warn-line: #4d4023;
  --track-warn-strong-bg: #34290f;
  --track-crit: #ef8f88; --track-crit-bg: #2c1614; --track-crit-line: #4d2b28;
}
:root[data-theme="light"] {
  --ink:#211d20; --stone:#696267; --faint:#9a9297;
  --paper:#FFF1E6; --mist:#f8f2ec; --line:#e9e5e7;
  --plum:#7a315d; --plum-ink:#54203f; --plum-wash:#f7eef3;
  --signal:#c65a32; --signal-wash:#fbf0eb;
  --breach:#4a1224; --breach-wash:#efe2e6;
  --track-good: #1a7a4c; --track-good-bg: #eaf7ee; --track-good-line: #bfe6cc;
  --track-warn: #EF9B0F; --track-warn-bg: #fdf6df; --track-warn-line: #f0dfa0;
  --track-warn-strong-bg: #faecc0;
  --track-crit: #b3261e; --track-crit-bg: #fdecec; --track-crit-line: #f3b7b3;
}

/* ---------------------------------------------------------------- base --- */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
@media (min-width: 768px) { .wrap { padding: 0 40px; } }

h1, h2 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font: 650 1.05rem/1.3 var(--body); margin: 0 0 .4em; }
p  { max-width: 68ch; color: var(--stone); }

/* Eyebrows are mono, uppercase, plum — the system's most recognisable tell. */
.eyebrow {
  font: 500 11px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--plum);
}

a { color: var(--plum); text-underline-offset: 3px; }
a:hover { color: var(--plum-ink); }
:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; }

/* --------------------------------------------------------- components --- */

.card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  position: relative; /* .urgency-breached's top accent bar needs this */
  /* No drop shadows. The hairline does the work. */
}

.surface { background: var(--mist); border-radius: var(--radius); padding: 20px 22px; }
.highlight { background: var(--plum-wash); border-radius: var(--radius); padding: 20px 22px; }

.btn {
  font: 600 15px/1 var(--body);
  padding: 12px 20px;
  min-height: 44px;              /* touch target floor */
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.btn:hover { border-color: var(--plum); color: var(--plum); }
.btn-primary { background: var(--plum); border-color: var(--plum); color: #fff; }
.btn-primary:hover { background: var(--plum-ink); border-color: var(--plum-ink); color: #fff; }

code, .mono {
  font: 500 .875em/1.5 var(--mono);
  background: var(--mist);
  padding: 1px 6px;
  border-radius: 5px;
}

table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); }
th {
  font: 500 11px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--faint);
}
td { color: var(--stone); }
.num { font-variant-numeric: tabular-nums; font-family: var(--mono); }

section { padding-top: 64px; }
@media (min-width: 768px) { section { padding-top: var(--section); } }

/* ------------------------------------------------------- lookup forms --- */
/* Shared by the dashboard's "check something specific" module and the
   nav-bar mini-lookup in base.html. */

form.check { display: flex; gap: 10px; margin: 0; flex-wrap: wrap; align-items: center; }
input[type=text] {
  flex: 1; min-width: 180px; font: 500 15px/1 var(--mono); padding: 12px 16px;
  border: 1px solid var(--line); border-radius: 999px; min-height: 44px;
  background: #ffffff; color: var(--ink);
}
input[type=text]:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; }
select.type-toggle {
  font: 500 13px/1 var(--mono); padding: 10px 14px; min-height: 44px;
  border: 1px solid var(--line); border-radius: 999px;
  background: #ffffff; color: var(--stone);
}

/* --------------------------------------------------------------- badge --- */

.badge {
  display: inline-flex; align-items: center; gap: 8px; font: 600 13px/1 var(--body);
  padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line);
}
.badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.badge.state-NO_ACTION { border-color: var(--line); color: var(--stone); font-weight: 500; }
.badge.state-NO_ACTION .dot { background: var(--faint); }
.badge.state-AT_RISK { border-color: var(--plum); color: var(--plum); font-weight: 600; }
.badge.state-AT_RISK .dot { background: var(--plum); }
.badge.state-ACTION_REQUIRED { border-color: var(--signal); color: var(--signal); font-weight: 600; }
.badge.state-ACTION_REQUIRED .dot { background: var(--signal); }
.badge.state-AT_RISK_BREACHED {
  border-color: var(--breach); color: var(--breach); font-weight: 650; font-size: 14px;
}
.badge.state-AT_RISK_BREACHED .dot { background: var(--breach); }

/* Bucket-named aliases (ON_TRACK/BREACHED) for badges built off the
   dashboard/case bucket rather than a raw rules.py state string. */
.badge.bucket-ON_TRACK { border-color: var(--line); color: var(--stone); font-weight: 500; }
.badge.bucket-ON_TRACK .dot { background: var(--faint); }
.badge.bucket-AT_RISK { border-color: var(--plum); color: var(--plum); font-weight: 600; }
.badge.bucket-AT_RISK .dot { background: var(--plum); }
.badge.bucket-ACTION_REQUIRED { border-color: var(--signal); color: var(--signal); font-weight: 600; }
.badge.bucket-ACTION_REQUIRED .dot { background: var(--signal); }
.badge.bucket-BREACHED { border-color: var(--breach); color: var(--breach); font-weight: 650; font-size: 14px; }
.badge.bucket-BREACHED .dot { background: var(--breach); }

/* ---------------------------------------------------- quote / field-row --- */

.quote {
  border-left: 3px solid var(--plum); background: var(--plum-wash);
  padding: 12px 16px; border-radius: 0 8px 8px 0; margin: 12px 0; color: var(--ink);
}
.field-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.field-row:last-child { border-bottom: none; }
.field-row .k { font: 500 12px/1.4 var(--mono); color: var(--stone); text-transform: uppercase; letter-spacing: .06em; }
.field-row .v { font: 500 14px/1.4 var(--body); color: var(--ink); text-align: right; }

.error-card { border-color: var(--signal); background: var(--signal-wash); }

.slack-preview { background: #1a1d21; color: #d1d2d3; border-radius: var(--radius); padding: 18px 20px; font: 400 14px/1.6 var(--body); white-space: pre-wrap; }
.slack-preview strong { color: #fff; }

/* mode-note: informational, not urgent — reuses --mist/--faint, never the
   urgency palette. */
.mode-note {
  background: #ffffff; border-radius: var(--radius); padding: 16px 20px;
  color: var(--stone); font-size: 14px;
}
.mode-note .eyebrow { color: var(--faint); }

/* --------------------------------------------------- urgency modifiers --- */
/* Applied to the specific card/section only — never to <body> or a
   page-wide wrapper. Four tiers matching SEVERITY in app.py. */

.card.urgency-at-risk { border-color: var(--plum); background: var(--plum-wash); color: var(--ink); }
.card.urgency-at-risk .eyebrow { color: var(--plum); }

.card.urgency-action { border-color: var(--signal); background: var(--signal-wash); color: var(--ink); }
.card.urgency-action .eyebrow { color: var(--signal); }

.card.urgency-breached { border: 2px solid var(--breach); background: var(--breach-wash); color: var(--ink); }
.card.urgency-breached .eyebrow { color: var(--breach); }
.card.urgency-breached::before {
  content: ""; position: absolute; top: -2px; left: -2px; right: -2px;
  height: 4px; background: var(--breach); border-radius: var(--radius) var(--radius) 0 0;
}

/* ------------------------------------------------------------------ hero --- */
/* Next Best Action — the visual climax of the case page. Larger padding and
   type than any other card, urgency-colored per the bucket. */

.hero {
  padding: 36px 40px; border-width: 2px;
}
.hero .hero-action {
  font: 650 clamp(1.3rem, 3vw, 1.9rem)/1.2 var(--display);
  color: var(--ink); margin: 10px 0 20px;
}
.hero .eyebrow { display: block; margin-bottom: 6px; }

/* -------------------------------------------------------------- stat-chip --- */

.stat-chips { display: flex; gap: 12px; flex-wrap: wrap; margin: 20px 0; }
.stat-chip {
  flex: 1; min-width: 140px; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 18px; background: var(--paper);
}
.stat-chip .stat-count { font: 700 1.8rem/1 var(--display); }
.stat-chip .stat-label { font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--faint); margin-top: 6px; }
.stat-chip.bucket-ON_TRACK .stat-count { color: var(--stone); }
.stat-chip.bucket-AT_RISK { border-color: var(--plum); background: var(--plum-wash); }
.stat-chip.bucket-AT_RISK .stat-count { color: var(--plum); }
.stat-chip.bucket-ACTION_REQUIRED { border-color: var(--signal); background: var(--signal-wash); }
.stat-chip.bucket-ACTION_REQUIRED .stat-count { color: var(--signal); }
.stat-chip.bucket-BREACHED { border-color: var(--breach); background: var(--breach-wash); }
.stat-chip.bucket-BREACHED .stat-count { color: var(--breach); }

/* ------------------------------------------------------------- countdown --- */

.countdown { font: 500 13px/1 var(--mono); color: var(--stone); }
.countdown.countdown--soon { font-weight: 600; color: var(--signal); }
.countdown.countdown--overdue { font-weight: 650; color: var(--breach); }
.countdown-colon { animation: countdown-blink 1s step-start infinite; }

@keyframes countdown-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .25; } }

/* ----------------------------------------------------- watchlist cards --- */

.watchlist-card { display: block; text-decoration: none; margin-bottom: 16px; }
.watchlist-card .headline {
  color: var(--stone); margin: 8px 0 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.watchlist-card.unavailable {
  border-style: dashed; color: var(--faint);
}
.watchlist-card.unavailable .headline, .watchlist-card.unavailable p { color: var(--faint); }

/* -------------------------------------------------------------- timeline --- */
/* Pure CSS/HTML — no JS chart library, no canvas/SVG. Points positioned by
   an inline `left: {pct}%` computed server-side in app.py's build_timeline(). */

.timeline {
  position: relative;
  height: 110px;
  margin: 32px 4px 12px;
}
.timeline::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 50%;
  height: 2px; background: var(--line);
}
.timeline .timeline-segment-highlight {
  position: absolute; top: 50%; height: 2px; background: var(--plum);
}
.timeline-marker {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
}
.timeline-marker .dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--plum);
  margin: 0 auto;
}
.timeline-marker.shape-diamond .dot {
  border-radius: 3px; transform: rotate(45deg);
}
.timeline-marker.shape-today .dot {
  background: var(--plum); border-color: var(--plum); width: 10px; height: 10px;
  animation: pulse 2s ease-in-out infinite;
}
.timeline-marker .marker-label {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 140px; text-align: center; font-size: 12px; line-height: 1.35;
}
.timeline-marker.label-above .marker-label { bottom: 22px; }
.timeline-marker.label-below .marker-label { top: 22px; }
.timeline-marker .marker-label .lbl { font: 600 12px/1.3 var(--body); color: var(--ink); display: block; }
.timeline-marker .marker-label .sub { font: 500 10px/1.4 var(--mono); color: var(--faint); display: block; }
.timeline-marker .marker-label .date { font: 500 11px/1.4 var(--mono); color: var(--stone); display: block; }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

/* --------------------------------------------------------- micro-interactions --- */

.stagger-in {
  opacity: 0; transform: translateY(6px);
  transition: opacity .26s ease-out, transform .26s ease-out;
}
.stagger-in.is-visible { opacity: 1; transform: translateY(0); }
.stagger-in:nth-child(1) { transition-delay: 0ms; }
.stagger-in:nth-child(2) { transition-delay: 40ms; }
.stagger-in:nth-child(3) { transition-delay: 80ms; }
.stagger-in:nth-child(4) { transition-delay: 120ms; }
.stagger-in:nth-child(5) { transition-delay: 160ms; }

/* --------------------------------------------------------------- nav / footer --- */

.top-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 20px 0; flex-wrap: wrap;
}
.top-nav .brand { font: 800 44px/1 var(--display); color: var(--plum); text-decoration: none; }
.top-nav .mini-lookup { display: flex; gap: 8px; align-items: center; }
.top-nav .mini-lookup input[type=text] { min-width: 160px; padding: 8px 14px; min-height: 36px; font-size: 13px; }
.top-nav .mini-lookup select.type-toggle { padding: 8px 10px; min-height: 36px; font-size: 12px; }
.top-nav .mini-lookup .btn { padding: 8px 16px; min-height: 36px; font-size: 13px; }

.breadcrumb { font: 500 13px/1 var(--mono); color: var(--faint); text-decoration: none; display: inline-block; margin-bottom: 16px; }

/* Sizing hooks for _icons.html's inline SVGs — this codebase has no
   Tailwind, so these small utilities exist just for the icon macro. */
.w-3 { width: 12px; }
.h-3 { height: 12px; }
.w-4 { width: 16px; }
.h-4 { height: 16px; }

.icon-btn {
  border: none; background: none; padding: 2px; margin: 0; cursor: pointer;
  color: var(--plum); display: inline-flex; align-items: center; line-height: 0;
  border-radius: 6px; transition: color .15s ease, background .15s ease;
}
.icon-btn:hover { color: var(--plum-ink); background: var(--mist); }

.kept-toast {
  position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%) translateY(8px);
  background: var(--ink); color: #fff; font: 600 13px/1 var(--body);
  padding: 12px 20px; border-radius: 999px; z-index: 100;
  opacity: 0; transition: opacity .2s ease, transform .2s ease;
  pointer-events: none; white-space: nowrap;
}
.kept-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.breadcrumb:hover { color: var(--plum); }

footer { padding: 64px 0 40px; }

/* ------------------------------------------------------- dynamic theme --- */
/* One wrapper class per real bucket, swapping three custom properties that
   every themed component below reads from — so the red/amber/green ramp
   is defined once, not once per component. Applied to a single wrapper
   around the case page's content, never to <body>. */

.theme-ON_TRACK        { --accent: var(--track-good); --accent-bg: var(--track-good-bg); --accent-line: var(--track-good-line); }
.theme-AT_RISK         { --accent: var(--track-warn); --accent-bg: var(--track-warn-bg); --accent-line: var(--track-warn-line); }
.theme-ACTION_REQUIRED { --accent: var(--track-warn); --accent-bg: var(--track-warn-strong-bg); --accent-line: var(--track-warn-line); }
.theme-BREACHED        { --accent: var(--track-crit); --accent-bg: var(--track-crit-bg); --accent-line: var(--track-crit-line); }

.theme-page { background: var(--accent-bg); min-height: 100vh; transition: background .3s ease; }

/* Darkens the page backdrop itself (not the accent-bg used by cards/badges)
   to match the mood of the grey/storm weather scene behind it. */
body.body-ON_TRACK { background: #fdeeee; }
body.body-AT_RISK, body.body-ACTION_REQUIRED { background: #e7e3de; }
body.body-BREACHED { background: #545d68; }
body.body-BREACHED header .eyebrow { color: #d8dae0; }
body.body-BREACHED header h1 { color: #fff; }
body.body-BREACHED header a,
body.body-BREACHED header .icon-btn { color: #fff; }

.dyn-badge {
  display: inline-flex; align-items: center; gap: 9px; font: 650 15px/1 var(--body);
  padding: 9px 18px; border-radius: 999px; border: 1.75px solid transparent;
  color: #fff; background: var(--accent);
}
.dyn-badge .dot { width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 #fff; animation: badge-blink 1.1s ease-in-out infinite; }

@keyframes badge-blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px 2px rgba(255,255,255,.9); }
  50% { opacity: .35; box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

.dyn-flag {
  border-color: var(--accent-line) !important; background: var(--accent-bg) !important;
}
.dyn-flag .eyebrow { color: var(--accent); }
.dyn-flag .surface, .dyn-flag .mono { background: #ffffff; }

.dyn-hero { border: 2px solid var(--accent); background: var(--accent-bg); }
.dyn-hero .eyebrow { color: var(--accent); }
.dyn-hero .hero-action { color: var(--ink); }

.dyn-topbar { height: 4px; background: var(--accent); border-radius: 4px 4px 0 0; }

/* ------------------------------------------------------------- tabs --- */

.tabset { display: flex; gap: 4px; background: var(--mist); border-radius: 12px; padding: 4px; margin: 14px 0; }
.tabset .tab-btn {
  flex: 1; border: none; background: transparent; color: var(--plum);
  font: 600 13px/1 var(--body); padding: 9px 12px; border-radius: 9px; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.tabset .tab-btn.is-active { background: var(--plum); color: #fff; box-shadow: 0 1px 0 var(--line) inset; }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }
.draft-textarea {
  width: 100%; min-height: 130px; margin-top: 12px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--mist);
  color: var(--ink); font: 400 14px/1.6 var(--body); resize: vertical;
}
.draft-textarea:focus-visible { outline: 2px solid var(--plum); outline-offset: 1px; }

/* --------------------------------------------------------- checklist --- */

.checklist-step {
  display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line);
}
.checklist-step:last-child { border-bottom: none; }
.checklist-step .step-num {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 600 12px/1 var(--mono); border: 1px solid var(--line); color: var(--stone);
}
.checklist-step.is-done .step-num { background: var(--track-good-bg); border-color: var(--track-good-line); color: var(--track-good); }
.checklist-step .step-title { font: 650 14px/1.3 var(--body); color: var(--ink); }
.checklist-step .step-desc { font-size: 13px; color: var(--stone); margin-top: 3px; line-height: 1.5; }
.checklist-step .step-done-tag { font: 650 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--track-good); margin-left: 8px; }
.concept-note { display: none; font: 500 12px/1.4 var(--mono); color: var(--signal); margin-top: 8px; }
.concept-note.is-visible { display: block; }

/* ---------------------------------------------------------- landing --- */

.landing-hero { position: relative; min-height: calc(100vh - 100px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 24px 180px; }
.landing-hero .wordmark { font: 800 clamp(3rem, 9vw, 5.5rem)/1 var(--display); letter-spacing: -0.03em; margin: 0; color: var(--plum); }
.landing-hero .tagline { color: var(--stone); font-size: 1.05rem; margin: 14px 0 40px; max-width: 60ch; white-space: nowrap; }
.landing-search { display: flex; gap: 10px; width: 100%; max-width: 560px; flex-wrap: wrap; justify-content: center; }
.landing-search select.type-toggle { min-height: 52px; }
.landing-search input[type=text] { min-height: 52px; font-size: 16px; }
.landing-search .btn-primary { min-height: 52px; padding: 12px 28px; }

/* ------------------------------------------------------------- mascot --- */
/* Fixed bottom-RIGHT on every page. Never changes position — but it's
   continuously alive: the outer wrapper breathes (idle bob), the eyes
   blink on their own clock, and the character group carries one
   pose-specific gesture on top, chosen server-side from the real bucket. */

.kept-mascot {
  position: fixed; right: 16px; bottom: 16px; z-index: 40;
  pointer-events: none; filter: drop-shadow(0 2px 6px rgba(0,0,0,.1));
  animation: mascot-bob 3s ease-in-out infinite;
  transform-origin: 50% 100%;
}
.kept-mascot svg { overflow: visible; }
.kept-mascot-body { fill: #c17f3e; }
.kept-mascot--worried .kept-mascot-body { fill: #f5b301; }
.kept-mascot--fire .kept-mascot-body { fill: var(--track-crit); }

.kept-mascot-arm { stroke: #a8672d; }
.kept-mascot-arm circle { fill: #a8672d; }

.kept-mascot-eyes { transform-origin: 50px 62px; animation: mascot-blink 4.6s ease-in-out infinite; }

.kept-mascot--wave .kept-mascot-arm { animation: mascot-wave 2.2s ease-in-out infinite; transform-origin: 78px 70px; }
.kept-mascot--flower .kept-mascot-flower { animation: mascot-sway 3s ease-in-out infinite; }
.kept-mascot--worried .kept-mascot-exclaim { animation: mascot-exclaim-pop 1s ease-in-out infinite; }
.kept-mascot--worried .kept-mascot-char { animation: mascot-wobble 2.4s ease-in-out infinite; transform-origin: 50px 90px; }
.kept-mascot--fire .kept-mascot-char { animation: mascot-shake .5s ease-in-out infinite; transform-origin: 50px 90px; }
.kept-mascot--fire .kept-mascot-flame-halo { animation: mascot-flicker .8s ease-in-out infinite; }
.kept-mascot--fire .kept-mascot-sparks circle { animation: mascot-spark 1.4s ease-in-out infinite; transform-origin: center; }
.kept-mascot--fire .kept-mascot-sparks circle:nth-child(2) { animation-delay: .3s; }
.kept-mascot--fire .kept-mascot-sparks circle:nth-child(3) { animation-delay: .6s; }
.kept-mascot--fire .kept-mascot-sparks circle:nth-child(4) { animation-delay: .9s; }
.kept-mascot--fire .kept-mascot-sparks circle:nth-child(5) { animation-delay: .45s; }

@keyframes mascot-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@keyframes mascot-blink {
  0%, 90%, 100% { transform: scaleY(1); }
  94% { transform: scaleY(.12); }
}
@keyframes mascot-wave {
  0%, 100% { transform: rotate(0deg); }
  15% { transform: rotate(-20deg); }
  30% { transform: rotate(6deg); }
  45% { transform: rotate(-16deg); }
  60% { transform: rotate(4deg); }
  75% { transform: rotate(0deg); }
}
@keyframes mascot-sway {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(6deg); }
}
@keyframes mascot-wobble {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  25% { transform: translateX(-2px) rotate(-2deg); }
  75% { transform: translateX(2px) rotate(2deg); }
}
@keyframes mascot-shake {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  25% { transform: translateX(-1.6px) rotate(-2.5deg); }
  75% { transform: translateX(1.6px) rotate(2.5deg); }
}
@keyframes mascot-flicker {
  0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
  25% { opacity: .92; transform: scale(1.05) rotate(-2deg); }
  50% { opacity: .8; transform: scale(.9) translateY(2px) rotate(1deg); }
  75% { opacity: .95; transform: scale(1.03) rotate(2deg); }
}
@keyframes mascot-spark {
  0% { opacity: 0; transform: translateY(0) scale(.6); }
  30% { opacity: 1; transform: translateY(-4px) scale(1); }
  100% { opacity: 0; transform: translateY(-14px) scale(.4); }
}
@keyframes mascot-exclaim-pop {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.12); }
}
@keyframes pulse-soft { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

@media (max-width: 640px) {
  .kept-mascot svg { width: 48px; height: 58px; }
}

/* ------------------------------------------------------ weather scene --- */
/* Fixed full-viewport mood image behind the case page's white cards — stays
   put while the page scrolls over it. Transparent PNGs, so the page's own
   peach background shows through everywhere except the art itself. */

.wrap { position: relative; z-index: 1; }

.weather-scene {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-repeat: no-repeat; background-position: bottom center; background-size: 100% auto;
}
.weather-sunny { background-image: url('weather-sunny.png'); }
.weather-overcast { background-image: url('weather-overcast.png'); }
.weather-storm { background-image: url('weather-storm.png'); }

.landing-string-img {
  position: absolute; z-index: -1; left: 50%; bottom: -70px;
  transform: translateX(-50%);
  width: auto; height: auto;
  max-width: min(1300px, 96vw); max-height: 48vh;
  pointer-events: none;
}

/* -------------------------------------------------------- mascot speech --- */
/* Shown/hidden on a loop by kept.js — 2s after load, then a repeating
   10s-visible / 5s-hidden cycle for as long as the page stays open. Sits to
   the mascot's left, with a clean CSS-triangle tail pointing back at her
   (a bordered triangle, made of two stacked border-triangles, not a rotated
   square — a rotated square reads as a diamond poking out, not a tail). */

.mascot-speech {
  position: fixed; right: 91px; bottom: 58px; z-index: 41;
  max-width: 220px; background: #fff; color: var(--ink);
  font: 600 14px/1.4 var(--body); padding: 10px 16px; border-radius: 16px;
  border: 1px solid var(--line); box-shadow: 0 4px 14px rgba(0,0,0,.1);
  opacity: 0; transform: translateY(6px) scale(.96); transform-origin: bottom right;
  transition: opacity .25s ease, transform .25s ease; pointer-events: none;
}
.mascot-speech::before, .mascot-speech::after {
  content: ""; position: absolute; bottom: 14px; width: 0; height: 0;
  border-top: 7px solid transparent; border-bottom: 7px solid transparent;
}
.mascot-speech::before { right: -9px; border-left: 9px solid var(--line); }
.mascot-speech::after { right: -7.5px; border-left: 8px solid #fff; }
.mascot-speech.is-visible { opacity: 1; transform: translateY(0) scale(1); }

@media (max-width: 640px) {
  .mascot-speech { right: 62px; bottom: 44px; max-width: 170px; font-size: 13px; }
}

/* Motion is functional and short. Anything decorative does not belong. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ----------------------------------------------------------- auth widget --- */
.auth-widget {
  position: fixed; top: 68px; right: 16px; z-index: 50;
  display: flex; align-items: center; gap: 10px;
}
.auth-widget .auth-email {
  font: 500 12px/1 var(--mono); color: var(--stone);
  background: var(--paper); padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line);
}
.auth-widget .auth-btn {
  font: 600 12px/1 var(--body); color: var(--plum); background: var(--paper);
  border: 1px solid var(--plum); border-radius: 999px; padding: 7px 14px;
  cursor: pointer;
}
.auth-widget .auth-btn:hover { background: var(--plum-wash); }

/* Auth gate. Body carries .auth-unknown until the session check resolves, then
   .auth-in / .auth-out — so gated content never flashes before we know. */
body.auth-unknown .auth-only,
body.auth-out .auth-only { display: none !important; }
body.auth-unknown .anon-only,
body.auth-in .anon-only { display: none !important; }

/* The body-BUCKET tint is server-rendered, so a logged-out visitor would both
   see an unreadable gate on a dark ground and learn the case's status from the
   colour alone. Neutralise it until there's a session. */
body.auth-unknown, body.auth-out { background: var(--paper) !important; }

.auth-gate { text-align: center; max-width: 420px; margin: 0 auto; }
.auth-gate p { color: var(--stone); font-size: 15px; margin: 0 0 20px; }
.auth-gate .btn-primary { min-height: 52px; padding: 12px 28px; }

/* ------------------------------------------------------- agent queue --- */
/* Rows reuse the .theme-BUCKET tokens, so --accent here is the same colour
   the case page uses for that bucket — one source of truth for severity. */
.queue-row {
  display: block; text-decoration: none; background: #fff;
  border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: 12px; padding: 14px 18px; margin-bottom: 10px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.queue-row:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.07); }
.queue-row-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.queue-ticket { font-size: 13px; font-weight: 600; color: var(--plum); }
.queue-stage { font-size: 14px; font-weight: 600; color: var(--ink); flex: 1; }
.queue-pill { font-size: 12px !important; padding: 5px 12px !important; border-width: 1.25px !important; }
.queue-pill .dot { width: 7px !important; height: 7px !important; }
.queue-line { margin-top: 7px; font-size: 13px; line-height: 1.55; color: var(--stone); }

@media (max-width: 640px) {
  .queue-stage { flex: 1 1 100%; order: 3; }
}

/* --------------------------------------------------- promise dashboard --- */
.total-strip { display: flex; align-items: baseline; gap: 12px; margin: 18px 0 4px; }
.total-num { font: 800 44px/1 var(--display); color: var(--plum); }
.total-label { font-size: 14px; color: var(--stone); }

.tile-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px; margin: 18px 0 28px;
}
.tile {
  display: flex; flex-direction: column; gap: 3px; text-decoration: none;
  background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--accent);
  border-radius: 12px; padding: 16px 18px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.tile:hover { transform: translateY(-2px); box-shadow: 0 5px 16px rgba(0,0,0,.08); }
.tile.is-selected { box-shadow: 0 0 0 2px var(--accent); }
.tile-num { font: 800 30px/1 var(--display); color: var(--accent); }
.tile-label { font: 650 14px/1.2 var(--body); color: var(--ink); }
.tile-hint { font-size: 11.5px; line-height: 1.4; color: var(--faint); }
/* The gap no other tile can see — given the width to say so. */
.tile-wide { grid-column: span 2; }
@media (max-width: 620px) { .tile-wide { grid-column: span 1; } }

.drill { margin-bottom: 40px; }
.drill-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 12px;
}
.sort-toggle { font-size: 12.5px; text-decoration: none; color: var(--plum); }
.sort-toggle:hover { text-decoration: underline; }
.queue-pnrd { font: 500 12px/1 var(--mono); color: var(--accent); }
.queue-status {
  font: 500 11px/1 var(--mono); color: var(--faint);
  text-transform: uppercase; letter-spacing: .06em;
}