/* =========================================================================
   contextbliss — design tokens
   Calm, friendly, modern. Soft cream surface, deep navy ink, sage accent.
   ========================================================================= */
:root {
  --bg: #f7f5ef;
  --bg-2: #efece2;
  --surface: #ffffff;
  --surface-2: #f4f1e8;
  --surface-sunken: #ebe7d9;

  --ink: #1c2530;
  --ink-soft: #3a4452;
  --muted: #6e7480;
  --muted-2: #9aa0aa;

  --line: #e3ddca;
  --line-strong: #cfc9b3;

  /* Brand: sage green primary. Confident but quiet. */
  --brand: #3f7a5e;
  --brand-hover: #2f6249;
  --brand-soft: rgba(63, 122, 94, 0.10);
  --brand-ring: rgba(63, 122, 94, 0.30);

  /* Semantic */
  --available: #3f7a5e;
  --available-soft: rgba(63, 122, 94, 0.12);
  --busy: #c2603a;
  --busy-soft: rgba(194, 96, 58, 0.12);
  --warn: #b58938;
  --warn-soft: rgba(181, 137, 56, 0.14);
  --neutral: #6e7480;
  --neutral-soft: rgba(110, 116, 128, 0.12);

  /* Context palette — distinct, but quiet */
  --ctx-coding: #3f7a5e;
  --ctx-research: #3a6ea5;
  --ctx-communication: #c2603a;
  --ctx-meeting: #b58938;
  --ctx-writing: #6f5396;
  --ctx-consumption: #a04848;
  --ctx-admin: #6e7480;
  --ctx-idle: #9aa0aa;
  --ctx-unknown: #b1b5bd;

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --display: "Fraunces", "Iowan Old Style", "Georgia", serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", monospace;

  --radius: 14px;
  --radius-sm: 10px;
  --radius-xs: 6px;

  --shadow-sm: 0 1px 2px rgba(20, 25, 35, 0.04);
  --shadow: 0 6px 22px rgba(20, 25, 35, 0.06);
  --shadow-lg: 0 18px 60px rgba(20, 25, 35, 0.10);

  --max-w: 1180px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14171d;
    --bg-2: #1b1f27;
    --surface: #1e222b;
    --surface-2: #232833;
    --surface-sunken: #181c24;

    --ink: #ecedf0;
    --ink-soft: #c8ccd2;
    --muted: #8e94a0;
    --muted-2: #6c727d;

    --line: #2c313c;
    --line-strong: #3a414e;

    --brand: #6cb594;
    --brand-hover: #82c7a8;
    --brand-soft: rgba(108, 181, 148, 0.12);
    --brand-ring: rgba(108, 181, 148, 0.35);

    --available: #6cb594;
    --available-soft: rgba(108, 181, 148, 0.16);
    --busy: #e4885f;
    --busy-soft: rgba(228, 136, 95, 0.14);
    --warn: #d6a85a;
    --warn-soft: rgba(214, 168, 90, 0.14);
    --neutral: #9aa0aa;
    --neutral-soft: rgba(154, 160, 170, 0.14);

    --ctx-coding: #6cb594;
    --ctx-research: #6aa3d4;
    --ctx-communication: #e4885f;
    --ctx-meeting: #d6a85a;
    --ctx-writing: #a48fcb;
    --ctx-consumption: #d27474;
    --ctx-admin: #9aa0aa;
    --ctx-idle: #6c727d;
    --ctx-unknown: #5c6371;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow: 0 6px 22px rgba(0, 0, 0, 0.40);
    --shadow-lg: 0 18px 60px rgba(0, 0, 0, 0.55);
  }
}

/* =========================================================================
   Base
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

/* Honour [hidden] even when component CSS sets display: flex/inline-flex.
   Several elements (.auth-zone, .user-pill, #signin-btn, #shift-banner,
   #empty-state, etc.) start with the `hidden` attribute and are toggled
   by JS — without this they leak into first paint. */
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--brand);
  text-decoration: none;
  border-radius: 4px;
}
a:hover { color: var(--brand-hover); text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: 3px; }

:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: 2px; border-radius: 6px; }

button { font: inherit; }
img, video, canvas { display: block; max-width: 100%; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* =========================================================================
   App shell
   ========================================================================= */
.app-header {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 14px 28px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink); font-weight: 600; letter-spacing: -0.01em;
}
.brand:hover { text-decoration: none; color: var(--ink); }
.brand-mark {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand); color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px var(--brand-soft);
}
.brand-mark svg { width: 16px; height: 16px; }
.brand-name { font-family: var(--sans); font-size: 15px; font-weight: 600; }
.brand-name .dot { color: var(--brand); }

.auth-zone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 8px;
}
.user-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  color: var(--ink);
  max-width: 320px;
}
.user-avatar {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
.user-email {
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.nav { display: inline-flex; align-items: center; gap: 4px; }
.nav a {
  color: var(--muted);
  font-size: 13px; font-weight: 500;
  padding: 7px 12px; border-radius: 8px;
}
.nav a:hover { color: var(--ink); background: var(--surface-2); text-decoration: none; }
.nav a.is-active { color: var(--ink); background: var(--surface); border: 1px solid var(--line); }

.app-main {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 36px 28px 80px;
}

@media (max-width: 720px) {
  .app-header { padding: 12px 16px; }
  .app-main { padding: 24px 16px 56px; }
}

/* =========================================================================
   Buttons & form controls
   ========================================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  font-size: 14px; font-weight: 500;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, transform 80ms ease, box-shadow 140ms ease;
}
.btn:hover:not(:disabled) { background: var(--surface-2); border-color: var(--muted); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-primary {
  background: var(--brand); color: #fff; border-color: var(--brand);
  box-shadow: 0 2px 8px var(--brand-soft);
}
.btn-primary:hover:not(:disabled) { background: var(--brand-hover); border-color: var(--brand-hover); color: #fff; }

.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); border-color: transparent; }

.btn-danger {
  background: transparent;
  color: var(--busy);
  border-color: color-mix(in srgb, var(--busy) 35%, transparent);
}
.btn-danger:hover:not(:disabled) {
  background: var(--busy-soft); border-color: var(--busy); color: var(--busy);
}

.btn-lg { padding: 14px 22px; font-size: 15px; border-radius: 12px; }
.btn-sm { padding: 6px 10px; font-size: 12px; border-radius: 8px; }
.btn-icon { width: 32px; padding: 6px; }

input[type="number"], input[type="text"], select {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  padding: 9px 11px;
  border-radius: 10px;
  font-family: var(--sans);
  font-size: 14px;
  min-width: 0;
}
input[type="number"] { width: 92px; font-variant-numeric: tabular-nums; }
input[type="number"]:focus, input[type="text"]:focus, select:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-soft);
}

label { color: var(--ink-soft); font-size: 13px; }

/* =========================================================================
   Status pill
   ========================================================================= */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.01em;
  background: var(--surface-2);
  color: var(--muted);
  border: 1px solid var(--line);
}
.pill .pill-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
}
.pill.is-running { background: var(--available-soft); color: var(--available); border-color: color-mix(in srgb, var(--available) 25%, transparent); }
.pill.is-running .pill-dot { background: var(--available); animation: pulse 1.6s ease-in-out infinite; }
.pill.is-analyzing { background: var(--brand-soft); color: var(--brand); border-color: var(--brand-ring); }
.pill.is-analyzing .pill-dot { background: var(--brand); animation: pulse 1s ease-in-out infinite; }
.pill.is-error { background: var(--busy-soft); color: var(--busy); border-color: color-mix(in srgb, var(--busy) 25%, transparent); }
.pill.is-idle .pill-dot { background: var(--muted-2); }

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.5; }
}

/* =========================================================================
   Onboarding (first-run)
   Motion: a quiet cascade-in on first paint, soft sage breath behind the
   hero, gentle pulse on the active step, and a checkmark draw when done.
   All durations 150–400ms transient, 2–6s ambient. Curves use a soft
   cubic-bezier(0.2, 0.7, 0.2, 1). A global prefers-reduced-motion rule
   later in this file flattens animation/transition durations to ~0ms,
   so nothing here needs to opt out individually — but ambient loops
   below add an explicit `animation: none` for safety.
   ========================================================================= */
.onboarding {
  position: relative;
  max-width: 720px;
  margin: 24px auto;
  padding: 40px 36px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  overflow: hidden; /* clip the breath glow */
  /* Card itself rises in on first paint */
  animation: onbCardIn 520ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
/* Hero breath: a sage radial that pulses behind the title. Lives at -1
   inside the (overflow:hidden) card so it never leaks outside. */
.onboarding::before {
  content: "";
  position: absolute;
  top: -120px; left: 50%;
  width: 620px; height: 620px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--brand) 14%, transparent) 0%,
    color-mix(in srgb, var(--brand) 6%, transparent) 40%,
    transparent 72%);
  filter: blur(8px);
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
  animation: onbBreath 6s ease-in-out infinite;
}
.onboarding > * { position: relative; z-index: 1; }

.onboarding-eyebrow {
  display: inline-block;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 14px;
  padding: 4px 10px;
  background: var(--brand-soft);
  border-radius: 999px;
  animation: onbRise 480ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: 60ms;
}
.onboarding h1 {
  margin: 0 0 12px 0;
  font-family: var(--display);
  font-size: 38px; line-height: 1.1; font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  animation: onbRise 520ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: 120ms;
}
.onboarding p.lead {
  margin: 0 0 22px 0;
  font-size: 16px; line-height: 1.6;
  color: var(--ink-soft);
  max-width: 60ch;
  animation: onbRise 540ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: 180ms;
}

.steps {
  list-style: none; margin: 0 0 24px 0; padding: 0; counter-reset: step;
  animation: onbRise 560ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: 240ms;
}
.step {
  display: grid; grid-template-columns: 36px 1fr; gap: 14px;
  padding: 18px 4px;
  border-top: 1px solid var(--line);
  counter-increment: step;
  /* Cross-fade between current/done — opacity, color, transform all
     shift on a single 280ms ramp. */
  transition:
    opacity 280ms cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 280ms cubic-bezier(0.2, 0.7, 0.2, 1),
    background-color 200ms ease;
}
.steps .step:last-child { border-bottom: 1px solid var(--line); }

/* Inactive (not current, not done) steps recede slightly. */
.step:not(.is-current):not(.is-done) {
  opacity: 0.55;
  transform: translateX(2px);
}
.step:not(.is-current):not(.is-done):hover {
  opacity: 0.78;
}
/* Current step lifts a hair; done steps return to baseline. */
.step.is-current {
  opacity: 1;
  transform: translateX(0);
}
.step.is-done {
  opacity: 0.85;
  transform: translateX(0);
}

.step .step-num {
  position: relative;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2);
  color: var(--muted);
  border-radius: 50%;
  font-size: 13px; font-weight: 600;
  border: 1px solid var(--line);
  transition:
    background-color 260ms cubic-bezier(0.2, 0.7, 0.2, 1),
    border-color 260ms cubic-bezier(0.2, 0.7, 0.2, 1),
    color 260ms cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.step .step-num::before {
  content: counter(step);
  transition: opacity 180ms ease;
}
.step.is-done .step-num {
  background: var(--brand); color: #fff; border-color: var(--brand);
  transform: scale(1.04);
  /* Slight pop when entering the "done" state */
  animation: onbStepPop 360ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.step.is-done .step-num::before { content: ""; }
.step.is-done .step-num::after {
  content: ""; width: 12px; height: 7px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(0, -2px);
  /* Checkmark draws in */
  animation: onbCheckIn 320ms cubic-bezier(0.2, 0.7, 0.2, 1) 80ms both;
  transform-origin: 0% 100%;
}
.step.is-current .step-num {
  background: var(--brand-soft); color: var(--brand); border-color: var(--brand);
}
/* Sage ring pulse around the active step indicator. Uses box-shadow so
   the bullet doesn't shift and we don't invalidate layout. */
.step.is-current .step-num::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--brand);
  opacity: 0;
  animation: onbStepRing 2.4s cubic-bezier(0.2, 0.7, 0.2, 1) infinite;
  pointer-events: none;
}

.step h3 { margin: 0 0 4px 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.step p { margin: 0 0 10px 0; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.step .step-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.step .added-list { font-size: 12px; color: var(--ink-soft); margin-top: 6px; }

/* When a primary button inside onboarding is disabled (i.e. requesting),
   show a quiet dot trio after the label — pure CSS, no markup change.
   The label JS swaps to "Requesting…" and we tag onto the trailing
   ellipsis with a bouncing trio for warmth. */
.onboarding .step-actions .btn-primary:disabled {
  position: relative;
}
.onboarding .step-actions .btn-primary:disabled::after {
  content: "";
  display: inline-block;
  width: 4px; height: 4px;
  margin-left: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
  box-shadow:
    8px 0 0 currentColor,
    16px 0 0 currentColor;
  animation: onbDots 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) infinite;
  vertical-align: middle;
}

/* Lift the active step's primary button on hover — feels touchable
   without being aggressive. Existing .btn transition handles the curve. */
.step.is-current .step-actions .btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px var(--brand-soft);
}
.step.is-current .step-actions .btn-primary:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 1px 4px var(--brand-soft);
}

.onboarding-footer {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
  margin-top: 6px;
  animation: onbRise 560ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: 320ms;
}
.onboarding-footer .privacy-note {
  font-size: 12px; color: var(--muted);
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 60%;
}

/* ---- Onboarding keyframes ---- */
@keyframes onbCardIn {
  from { opacity: 0; transform: translateY(10px) scale(0.992); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes onbRise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes onbBreath {
  0%, 100% { opacity: 0.55; transform: translateX(-50%) scale(1); }
  50%      { opacity: 0.95; transform: translateX(-50%) scale(1.06); }
}
@keyframes onbStepRing {
  0%   { opacity: 0.55; transform: scale(0.86); }
  70%  { opacity: 0;    transform: scale(1.18); }
  100% { opacity: 0;    transform: scale(1.18); }
}
@keyframes onbStepPop {
  0%   { transform: scale(0.86); }
  60%  { transform: scale(1.10); }
  100% { transform: scale(1.04); }
}
@keyframes onbCheckIn {
  from { clip-path: inset(0 100% 0 0); opacity: 0; }
  to   { clip-path: inset(0 0 0 0);    opacity: 1; }
}
@keyframes onbDots {
  0%, 80%, 100% { opacity: 0.25; box-shadow:  8px 0 0 currentColor, 16px 0 0 currentColor; }
  20%           { opacity: 0.95; box-shadow:  8px -2px 0 currentColor, 16px 0 0 currentColor; }
  40%           { opacity: 0.85; box-shadow:  8px 0 0 currentColor, 16px -2px 0 currentColor; }
  60%           { opacity: 0.75; box-shadow:  8px 0 0 currentColor, 16px 0 0 currentColor; }
}

/* Belt-and-suspenders: explicitly mute ambient loops for users who opt
   out of motion. The global rule above shortens duration to 0.001ms,
   which already kills perceived motion, but `animation: none` removes
   even that one-frame paint cost on the breath/ring. */
@media (prefers-reduced-motion: reduce) {
  .onboarding,
  .onboarding::before,
  .onboarding-eyebrow,
  .onboarding h1,
  .onboarding p.lead,
  .steps,
  .onboarding-footer,
  .step.is-current .step-num::after,
  .step.is-done .step-num,
  .step.is-done .step-num::after,
  .onboarding .step-actions .btn-primary:disabled::after {
    animation: none !important;
  }
  .step,
  .step .step-num {
    transition: none !important;
  }
}

/* =========================================================================
   Live page layout
   ========================================================================= */
.live-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
@media (max-width: 980px) {
  .live-grid { grid-template-columns: 1fr; }
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-sm);
}
.card + .card { margin-top: 16px; }

.card-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.card-title {
  margin: 0;
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.10em;
  color: var(--muted);
}

/* --- Hero state card --- */
.state-card {
  position: relative;
  padding: 26px 28px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--state-color, var(--brand)) 14%, transparent), transparent 60%),
    var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: background 400ms ease, border-color 400ms ease;
}
.state-card .state-glow {
  position: absolute; inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--state-color, var(--brand)) 35%, transparent);
}
.state-card[data-interruptible="true"] {
  --state-color: var(--available);
}
.state-card[data-interruptible="false"] {
  --state-color: var(--busy);
}
.state-card[data-state="unknown"], .state-card[data-state=""] {
  --state-color: var(--neutral);
}

/* Offline overlay — when monitoring is OFF, dim the cryptic stale state
   readout and show a clear primary CTA instead. The previous UI showed
   "settling in / 0% confident" indefinitely, leading users to think the
   system was running when it wasn't. The streak panel stays at full
   opacity because it shows "today so far" which is meaningful even
   when not currently monitoring (historical aggregate data).
   The state-offline overlay is positioned absolutely so it overlays the
   top portion of the card; the streak-wrap renders below it normally. */
.state-card[data-running="false"] > :not(.state-glow):not(.state-offline):not(.streak-wrap) {
  opacity: 0.18;
  filter: saturate(0.4);
  pointer-events: none;
  user-select: none;
  transition: opacity 240ms ease, filter 240ms ease;
}
/* When monitoring is OFF, the offline overlay sits over the upper portion
   of the card; clamp it to the top so the streak panel below stays usable.
   When running, it's hidden anyway. */
.state-card[data-running="false"] .state-offline {
  position: absolute;
  inset: 0 0 auto 0;
  height: 320px;
}
.state-card[data-running="true"] .state-offline,
.state-card:not([data-running="false"]) .state-offline {
  display: none;
}
.state-offline {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 36px 28px;
  z-index: 5;
  gap: 10px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--surface) 92%, transparent) 0%,
    color-mix(in srgb, var(--surface) 96%, transparent) 100%
  );
  border-radius: inherit;
}
.state-offline[hidden] { display: none; }
.state-offline-eyebrow {
  font: 500 12px/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--busy);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.state-offline-eyebrow::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--busy);
  animation: pulse 1.6s ease-in-out infinite;
}
.state-offline-headline {
  font-family: var(--display, "Fraunces", Georgia, serif);
  font-weight: 500;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 4px 0 2px;
}
.state-offline-summary {
  color: var(--ink-soft);
  font-size: 14px;
  margin: 0 0 14px;
  max-width: 420px;
}
@media (prefers-reduced-motion: reduce) {
  .state-card[data-running="false"] > :not(.state-glow):not(.state-offline) {
    transition: none;
  }
  .state-offline-eyebrow::before { animation: none; }
}

.state-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--state-color, var(--muted));
}
.state-eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--state-color, var(--muted));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--state-color, var(--muted)) 18%, transparent);
}
.state-card[data-running="true"] .state-eyebrow .dot { animation: pulse 2s ease-in-out infinite; }

.state-headline {
  margin: 14px 0 6px 0;
  font-family: var(--display);
  font-size: 42px; font-weight: 500; line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-transform: lowercase;
}
@media (max-width: 720px) { .state-headline { font-size: 32px; } }

.state-summary {
  margin: 0 0 16px 0;
  font-size: 16px; line-height: 1.55;
  color: var(--ink-soft);
}

.state-meta-row {
  display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center;
  margin-top: 14px;
}

.context-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  background: color-mix(in srgb, var(--ctx-color, var(--neutral)) 12%, transparent);
  color: var(--ctx-color, var(--neutral));
  border: 1px solid color-mix(in srgb, var(--ctx-color, var(--neutral)) 30%, transparent);
  text-transform: lowercase; letter-spacing: 0.01em;
}
.context-pill .ctx-swatch {
  width: 8px; height: 8px; border-radius: 2px;
  background: var(--ctx-color, var(--neutral));
}
.context-pill[data-ctx="coding"] { --ctx-color: var(--ctx-coding); }
.context-pill[data-ctx="research"] { --ctx-color: var(--ctx-research); }
.context-pill[data-ctx="communication"] { --ctx-color: var(--ctx-communication); }
.context-pill[data-ctx="meeting"] { --ctx-color: var(--ctx-meeting); }
.context-pill[data-ctx="writing"] { --ctx-color: var(--ctx-writing); }
.context-pill[data-ctx="consumption"] { --ctx-color: var(--ctx-consumption); }
.context-pill[data-ctx="admin"] { --ctx-color: var(--ctx-admin); }
.context-pill[data-ctx="idle"] { --ctx-color: var(--ctx-idle); }
.context-pill[data-ctx="unknown"] { --ctx-color: var(--ctx-unknown); }

.meta-chip {
  font-size: 12px; color: var(--muted);
  display: inline-flex; align-items: center; gap: 6px;
}
.meta-chip svg { width: 12px; height: 12px; opacity: 0.8; }

.confidence-meter {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--muted);
}
.confidence-meter .meter {
  width: 56px; height: 6px;
  background: var(--surface-sunken);
  border-radius: 999px; overflow: hidden;
}
.confidence-meter .meter-fill {
  height: 100%; background: var(--state-color, var(--brand));
  border-radius: 999px;
  transition: width 400ms ease;
}

.signals-list {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 12px;
}
.signal-chip {
  font-size: 11.5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  border: 1px solid var(--line);
}

/* --- Suggested-question chips ------------------------------------------- */
.suggestions-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.suggestions-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
}
.suggestions-label svg { width: 13px; height: 13px; opacity: 0.85; }
.suggestions-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  flex: 1; min-width: 0;
}
.suggest-chip {
  font: inherit;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease,
              transform 80ms ease, box-shadow 140ms ease, color 140ms ease;
  text-align: left;
  line-height: 1.35;
  max-width: 100%;
}
.suggest-chip:hover:not(:disabled) {
  background: var(--brand-soft);
  border-color: var(--brand-ring);
  color: var(--brand);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(20, 25, 35, 0.04);
}
.suggest-chip:active:not(:disabled) { transform: translateY(0); }
.suggest-chip:disabled { opacity: 0.6; cursor: progress; }
.suggest-chip.is-loading {
  background: var(--brand-soft);
  border-color: var(--brand-ring);
  color: var(--brand);
}
.suggest-chip.is-loading::after {
  content: "";
  display: inline-block;
  width: 9px; height: 9px;
  margin-left: 7px; vertical-align: -1px;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: chipSpin 700ms linear infinite;
}
@keyframes chipSpin { to { transform: rotate(360deg); } }

/* --- Reply panel -------------------------------------------------------- */
.reply-panel {
  position: relative;
  margin-top: 14px;
  padding: 14px 16px 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  animation: bannerIn 240ms ease both;
}
.reply-panel .reply-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.reply-panel .reply-question {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--brand);
  line-height: 1.45;
  flex: 1; min-width: 0;
  word-break: break-word;
}
.reply-panel .reply-body {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.55;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.reply-panel .reply-body.is-loading {
  color: var(--muted);
  font-style: italic;
}
.reply-panel .reply-close {
  background: transparent; border: 0;
  padding: 4px;
  color: var(--muted);
  cursor: pointer; border-radius: 6px;
  flex-shrink: 0;
}
.reply-panel .reply-close:hover { background: var(--surface); color: var(--ink); }

/* --- Voice (always-listening) ----------------------------------------- */
.voice-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.voice-toggle.btn {
  display: inline-flex; align-items: center; gap: 7px;
}
.voice-toggle[data-on="true"] {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.voice-toggle[data-on="true"]:hover:not(:disabled) {
  background: var(--brand-hover);
  border-color: var(--brand-hover);
}
.voice-toggle .voice-indicator {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.18);
  animation: pulse 1.4s ease-in-out infinite;
}
.voice-status {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  /* Hearing: "Hello, what's on screen?" can grow long — clip rather than
     wrap to a second line and shove the privacy hint around. */
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}
.voice-status[data-kind="on"] { color: var(--brand); }
.voice-status[data-kind="speaking"] { color: var(--brand-hover); font-weight: 600; }
.voice-status[data-kind="thinking"] { color: var(--warn); font-weight: 500; font-style: italic; }
.voice-status[data-kind="ignored"] { color: var(--muted); font-style: italic; }
.voice-status[data-kind="error"] { color: var(--busy); }
/* "Wrong?" chip on the Ignored flash — single-tap feedback so we can tune
   VOICE_INTENT_THRESHOLD against real wrong-rate. Inline so the status row
   doesn't reflow; ghost-button styling so it doesn't compete with the
   ignored label visually. */
.voice-wrong-chip {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  font: 500 11px/1 Inter, system-ui, sans-serif;
  padding: 3px 8px 4px;
  border-radius: 999px;
  margin-left: 8px;
  cursor: pointer;
  vertical-align: 1px;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.voice-wrong-chip:hover { background: var(--surface-2); color: var(--ink); border-color: var(--line-strong); }
.voice-wrong-chip:active { transform: translateY(0.5px); }
.voice-wrong-chip.is-marked,
.voice-wrong-chip:disabled {
  background: var(--brand-soft);
  color: var(--brand);
  border-color: color-mix(in srgb, var(--brand) 25%, transparent);
  cursor: default;
}
@media (prefers-reduced-motion: reduce) {
  .voice-wrong-chip { transition: none; }
}
/* Per-state indicator visual: solid pulse listening, fast pulse hearing,
   spin-like fade thinking, steady glow speaking, dim ignored. */
.voice-toggle .voice-indicator[data-state="hearing"] { animation: pulse 0.6s ease-in-out infinite; }
.voice-toggle .voice-indicator[data-state="thinking"] {
  animation: pulse 0.9s ease-in-out infinite;
  background: var(--warn, #b58938);
}
.voice-toggle .voice-indicator[data-state="speaking"] {
  animation: none;
  background: #fff;
  box-shadow: 0 0 0 6px rgba(255,255,255,0.32);
}
.voice-toggle .voice-indicator[data-state="ignored"] {
  animation: none;
  background: var(--muted-2, #9aa0aa);
  box-shadow: none;
}
.voice-privacy {
  font-size: 11.5px;
  color: var(--muted-2);
  font-style: italic;
  margin-left: auto;
}

.voice-transcript-wrap {
  margin-top: 10px;
}
.voice-transcript-toggle {
  font-size: 11px;
  padding: 4px 8px;
  color: var(--muted);
}
.voice-transcript {
  display: block;
  margin-top: 8px;
  max-height: 180px;
  overflow-y: auto;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-soft);
  white-space: pre-wrap;
  word-break: break-word;
}
.voice-transcript[data-collapsed="true"] { display: none; }
.voice-transcript .vt-line { padding: 4px 0; border-top: 1px dotted var(--line); }
.voice-transcript .vt-line:first-child { border-top: 0; }
.voice-transcript .vt-model { color: var(--ink); }
.voice-transcript .vt-hint  { color: var(--warn); font-style: italic; }
.voice-transcript .vt-intent { color: var(--muted); font-style: italic; }

/* --- Shift banner / toast --- */
.shift-banner {
  display: flex; align-items: center; gap: 14px;
  margin-top: 14px;
  padding: 12px 16px;
  background: var(--brand-soft);
  border: 1px solid var(--brand-ring);
  border-radius: 12px;
  color: var(--brand);
  font-size: 13.5px;
  animation: bannerIn 360ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.shift-banner .banner-icon {
  width: 28px; height: 28px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand); color: #fff;
  flex-shrink: 0;
}
.shift-banner .banner-icon svg { width: 14px; height: 14px; }
.shift-banner .banner-text { flex: 1; min-width: 0; color: var(--ink); }
.shift-banner .banner-text strong { color: var(--brand); font-weight: 600; }
.shift-banner .banner-shift { font-weight: 600; text-transform: lowercase; }
.shift-banner .banner-arrow {
  display: inline-block;
  margin: 0 4px;
  color: var(--brand);
}
.shift-banner .banner-play {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: var(--surface);
  border: 1px solid var(--brand-ring);
  border-radius: 999px;
  color: var(--brand); font-size: 12px; font-weight: 600;
  cursor: pointer;
}
.shift-banner .banner-play:hover { background: var(--brand); color: #fff; }
.shift-banner .banner-close {
  background: transparent; border: 0; padding: 4px;
  color: var(--muted); cursor: pointer; border-radius: 6px;
}
.shift-banner .banner-close:hover { background: var(--surface); color: var(--ink); }

@keyframes bannerIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- Capture preview --- */
.capture-card { padding: 18px; }
.capture-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.video-frame {
  position: relative;
  background: #0b0e13;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--line);
}
.video-frame video { width: 100%; height: 100%; object-fit: cover; }
.video-frame .frame-label {
  position: absolute; left: 10px; bottom: 10px;
  padding: 4px 9px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 11px;
  border-radius: 6px;
  letter-spacing: 0.02em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.video-frame .frame-empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 13px; padding: 16px; text-align: center;
}
#cam { transform: scaleX(-1); }

.screen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.screen-tile {
  background: #0b0e13;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  aspect-ratio: 16 / 10;
}
.screen-tile video { width: 100%; height: 100%; object-fit: cover; }
.screen-tile .tile-meta {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px;
  padding: 7px 10px;
  background: linear-gradient(to top, rgba(0,0,0,0.65), transparent);
  color: #fff;
  font-size: 11px;
}
.screen-tile .tile-label {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1;
}
.screen-tile .tile-remove {
  background: rgba(255,255,255,0.12);
  color: #fff; border: 0;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px; cursor: pointer;
}
.screen-tile .tile-remove:hover { background: rgba(255,255,255,0.25); }

.empty-screens {
  padding: 18px;
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

/* --- Controls bar (start/stop/interval) --- */
.live-controls {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin-top: 14px;
}
.live-controls .interval-input {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--muted); font-size: 13px;
}
.live-controls .interval-input input { background: transparent; border: 0; padding: 6px 0; width: 60px; }
.live-controls .interval-input input:focus { box-shadow: none; }

/* Settings cluster — sits at the right end of the live-controls bar.
   Cadence dropdown + webcam toggle. Compact and quiet so they don't
   compete with the primary Start/Pause buttons. */
.live-settings {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  flex-wrap: wrap;
}
.live-setting {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 12px;
  color: var(--ink-soft);
  cursor: pointer;
}
.live-setting:hover { background: var(--surface); border-color: var(--line-strong); }
.live-setting-label { font-weight: 500; }
.live-setting-select {
  background: transparent;
  border: 0;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  padding: 0;
}
.live-setting-select:focus { outline: 0; box-shadow: none; }
.live-setting input[type="checkbox"] {
  appearance: none;
  width: 14px; height: 14px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: var(--surface);
  cursor: pointer;
  position: relative;
  margin: 0;
}
.live-setting input[type="checkbox"]:checked {
  background: var(--brand);
  border-color: var(--brand);
}
.live-setting input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px; top: 1px;
  width: 4px; height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* --- Recent observations / timeline --- */
.timeline {
  display: flex; flex-direction: column;
  gap: 4px;
  max-height: 460px;
  overflow-y: auto;
  padding-right: 4px;
  margin: 4px -4px -4px 0;
}
.timeline-row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  border: 1px solid transparent;
  transition: background 140ms ease;
}
.timeline-row:hover { background: var(--surface-2); }
.timeline-row .t-time { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12px; }
.timeline-row .t-summary { color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timeline-row .t-context { font-size: 11px; }
.timeline-row.is-shift {
  background: var(--brand-soft);
  border-color: var(--brand-ring);
}
.timeline-row.is-shift .t-summary { color: var(--ink); font-weight: 500; }

.timeline-empty {
  text-align: center;
  padding: 28px 16px;
  color: var(--muted);
  font-size: 13.5px;
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
}
.timeline-empty .icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--muted);
  margin-bottom: 10px;
}

/* =========================================================================
   Mobile fallback
   ========================================================================= */
.mobile-block {
  max-width: 480px; margin: 80px auto; padding: 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  text-align: center;
  box-shadow: var(--shadow);
}
.mobile-block h2 { margin: 12px 0 8px; font-family: var(--display); font-weight: 500; font-size: 24px; }
.mobile-block p { color: var(--muted); margin: 0 0 16px; }
.mobile-block .icon-circle {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--brand-soft); color: var(--brand);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
}

/* =========================================================================
   Dashboard
   ========================================================================= */
.dashboard-header {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: end;
  justify-content: space-between;
  margin-bottom: 28px;
}
.dashboard-header h1 {
  margin: 0;
  font-family: var(--display);
  font-size: 32px; font-weight: 500; letter-spacing: -0.02em;
  color: var(--ink);
}
.dashboard-header .sub {
  color: var(--muted); font-size: 14px; margin-top: 4px;
}
.dashboard-controls {
  display: inline-flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.window-input {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 12px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  font-size: 13px; color: var(--ink-soft);
}
.window-input input { border: 0; background: transparent; padding: 6px 0; width: 56px; }
.window-input input:focus { box-shadow: none; }

.insight-card {
  padding: 28px 30px;
  background:
    radial-gradient(80% 100% at 0% 0%, var(--brand-soft), transparent 70%),
    var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
}
.insight-card .eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 10px;
}
.insight-headline {
  font-family: var(--display);
  font-size: 28px; font-weight: 500; line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 8px 0;
  max-width: 60ch;
}
.insight-body {
  font-size: 15px; color: var(--ink-soft); line-height: 1.6;
  max-width: 70ch; margin: 0;
}
.insight-body em { color: var(--brand); font-style: normal; font-weight: 600; }

.kpi-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin: 20px 0;
}
.kpi {
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.kpi .kpi-label {
  color: var(--muted);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.kpi .kpi-value {
  font-family: var(--display);
  font-size: 30px; font-weight: 500;
  margin-top: 8px; color: var(--ink);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.kpi .kpi-sub {
  font-size: 12px; color: var(--muted); margin-top: 4px;
}

.section-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 8px;
}
@media (max-width: 820px) { .section-grid { grid-template-columns: 1fr; } }

.bar-list { display: flex; flex-direction: column; gap: 12px; }
.bar-row {
  display: grid;
  grid-template-columns: 130px 1fr 70px;
  gap: 12px; align-items: center;
  font-size: 13px;
}
.bar-row .label {
  color: var(--ink-soft);
  text-transform: lowercase; font-weight: 500;
}
.bar-row .label .swatch {
  display: inline-block; width: 10px; height: 10px; border-radius: 3px;
  background: var(--bar-color, var(--brand));
  margin-right: 8px; vertical-align: -1px;
}
.bar-row .pct {
  color: var(--muted); text-align: right;
  font-variant-numeric: tabular-nums; font-size: 12px;
}
.bar-track {
  height: 10px;
  background: var(--surface-sunken);
  border-radius: 999px;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  background: var(--bar-color, var(--brand));
  border-radius: 999px;
  width: 0;
  transition: width 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.shift-list, .window-list {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 360px; overflow-y: auto;
  padding-right: 4px; margin-right: -4px;
}
.shift-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 13px;
}
.shift-row .shift-time {
  color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.shift-row .shift-from-to { color: var(--ink); font-weight: 500; }
.shift-row .shift-from-to .arrow { color: var(--muted); margin: 0 6px; }
.shift-row .shift-summary { color: var(--muted); font-size: 12.5px; margin-top: 2px; }

.window-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}
.window-row .duration {
  font-weight: 600; color: var(--available);
  background: var(--available-soft);
  padding: 2px 9px; border-radius: 999px;
  font-size: 12px;
}

.empty-block {
  text-align: center;
  padding: 48px 24px;
  color: var(--muted);
}
.empty-block .empty-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--brand-soft); color: var(--brand);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}
.empty-block h3 {
  margin: 0 0 6px;
  font-family: var(--display); font-weight: 500;
  font-size: 22px; letter-spacing: -0.01em;
  color: var(--ink);
}
.empty-block p { margin: 0 0 14px; font-size: 14px; }

/* Scrollbars */
.timeline::-webkit-scrollbar,
.shift-list::-webkit-scrollbar,
.window-list::-webkit-scrollbar { width: 8px; }
.timeline::-webkit-scrollbar-thumb,
.shift-list::-webkit-scrollbar-thumb,
.window-list::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }
.timeline::-webkit-scrollbar-track,
.shift-list::-webkit-scrollbar-track,
.window-list::-webkit-scrollbar-track { background: transparent; }

/* Toast for errors */
.toast {
  position: fixed; bottom: 24px; right: 24px;
  z-index: 50;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  font-size: 13px;
  max-width: 320px;
  display: flex; gap: 10px; align-items: flex-start;
  animation: bannerIn 280ms ease both;
}
.toast.is-error { border-color: color-mix(in srgb, var(--busy) 35%, var(--line-strong)); }
.toast.is-error .toast-icon { color: var(--busy); }
.toast .toast-icon { flex-shrink: 0; }
.toast .toast-close {
  background: transparent; border: 0; color: var(--muted);
  cursor: pointer; padding: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* Background-recording indicator — surfaced when the user backgrounds the
   tab while monitoring is active. Sits at the bottom-center of the
   viewport so the user notices it the moment they switch back. The pulsing
   dot mirrors the .pill.is-running treatment for visual consistency. */
.bg-recording-indicator {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--available-soft);
  color: var(--available);
  border: 1px solid color-mix(in srgb, var(--available) 28%, transparent);
  font: 500 13px/1 Inter, system-ui, sans-serif;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  z-index: 9999;
  pointer-events: none;
}
.bg-recording-indicator[hidden] { display: none; }
.bg-recording-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--available);
  animation: pulse 1.4s ease-in-out infinite;
}

/* =========================================================================
   Animated background — gentle drifting blobs in the current context tint.
   Lives behind everything (z=-1). Pauses on prefers-reduced-motion.
   ========================================================================= */
.bg-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: var(--bg);
}
.bg-blob {
  position: absolute;
  width: 56vw;
  height: 56vw;
  max-width: 880px;
  max-height: 880px;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.55;
  will-change: transform;
  transition: background 1200ms ease;
  background: var(--ctx-color, var(--brand));
  mix-blend-mode: multiply;
}
@media (prefers-color-scheme: dark) {
  .bg-blob { mix-blend-mode: screen; opacity: 0.10; filter: blur(140px); }
}
.bg-blob-a {
  top: -22vw;
  left: -14vw;
  background: var(--brand);
  animation: blobDrift1 42s ease-in-out infinite alternate;
}
.bg-blob-b {
  top: 30vh;
  right: -18vw;
  background: var(--ctx-color, var(--ctx-research));
  animation: blobDrift2 56s ease-in-out infinite alternate;
}
.bg-blob-c {
  bottom: -22vw;
  left: 30vw;
  background: var(--ctx-color, var(--ctx-writing));
  opacity: 0.32;
  animation: blobDrift3 70s ease-in-out infinite alternate;
}
.bg-grain {
  position: absolute; inset: 0;
  opacity: 0.025;
  background-image: radial-gradient(currentColor 0.6px, transparent 0.6px);
  background-size: 3px 3px;
  color: var(--ink);
  pointer-events: none;
}
@keyframes blobDrift1 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(8vw, 6vh, 0) scale(1.08); }
}
@keyframes blobDrift2 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-7vw, -10vh, 0) scale(1.05); }
}
@keyframes blobDrift3 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-6vw, 8vh, 0) scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  .bg-blob { animation: none !important; }
}
/* The body bg becomes transparent so the canvas shows through; the
   canvas owns the actual bg color. */
body { background: transparent; }

/* The state-card dictates the background tint via --ctx-color. */
.state-card[data-ctx="coding"] { --ctx-color: var(--ctx-coding); }
.state-card[data-ctx="research"] { --ctx-color: var(--ctx-research); }
.state-card[data-ctx="communication"] { --ctx-color: var(--ctx-communication); }
.state-card[data-ctx="meeting"] { --ctx-color: var(--ctx-meeting); }
.state-card[data-ctx="writing"] { --ctx-color: var(--ctx-writing); }
.state-card[data-ctx="consumption"] { --ctx-color: var(--ctx-consumption); }
.state-card[data-ctx="admin"] { --ctx-color: var(--ctx-admin); }
.state-card[data-ctx="idle"] { --ctx-color: var(--ctx-idle); }

/* =========================================================================
   Segmented nav (Live | Report)
   ========================================================================= */
.nav-segmented {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 4px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  gap: 2px;
}
.nav-segmented .nav-cell {
  position: relative;
  z-index: 1;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  transition: color 200ms ease;
  line-height: 1.2;
}
.nav-segmented .nav-cell:hover { text-decoration: none; color: var(--ink); }
.nav-segmented .nav-cell.is-active { color: #fff; }
.nav-segmented .nav-marker {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 0;
  border-radius: 999px;
  background: var(--brand);
  box-shadow: 0 2px 8px var(--brand-soft);
  transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
              width 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: 0;
}
@media (prefers-reduced-motion: reduce) {
  .nav-segmented .nav-marker { transition: none; }
}

/* =========================================================================
   User menu (avatar + popover)
   ========================================================================= */
.user-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.user-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 80ms ease;
}
.user-pill:hover { border-color: var(--line-strong); background: var(--surface-2); }
.user-pill:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: 2px; }
.user-pill .user-avatar {
  width: 28px;
  height: 28px;
  font-size: 12px;
}
.user-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 40;
  animation: popoverIn 180ms cubic-bezier(0.18, 0.89, 0.32, 1.05);
  transform-origin: top right;
}
.user-popover .user-email {
  display: block;
  font-size: 12px;
  color: var(--muted);
  word-break: break-all;
  max-width: none;
  white-space: normal;
  overflow: visible;
}
.user-popover .btn { justify-content: flex-start; }
@keyframes popoverIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .user-popover { animation: none; }
}

/* =========================================================================
   Floating capture panel
   ========================================================================= */
.capture-floating {
  position: fixed;
  /* Default position: bottom-right of the viewport. JS may override with a
     persisted drag position; before JS runs, anchoring via bottom/right
     keeps the panel pinned to the bottom-right corner across resizes. */
  bottom: 20px;
  right: 20px;
  width: 360px;
  max-width: calc(100vw - 32px);
  z-index: 28;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 18px 50px rgba(20, 25, 35, 0.18),
    0 4px 12px rgba(20, 25, 35, 0.08);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  overflow: hidden;
  transition: width 220ms ease, height 220ms ease, box-shadow 200ms ease;
}
@media (prefers-color-scheme: dark) {
  .capture-floating {
    background: color-mix(in srgb, var(--surface) 80%, transparent);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.04) inset,
      0 18px 50px rgba(0,0,0,0.55),
      0 4px 12px rgba(0,0,0,0.35);
  }
}
.capture-floating[data-collapsed="true"] {
  width: auto;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.capture-floating.is-dragging { transition: none; cursor: grabbing; }

.capture-floating-handle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px 10px 14px;
  cursor: grab;
  user-select: none;
  border-bottom: 1px solid var(--line);
}
.capture-floating[data-collapsed="true"] .capture-floating-handle { display: none; }
.capture-floating-handle:active { cursor: grabbing; }
.capture-floating-title { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.capture-floating-actions { display: inline-flex; gap: 4px; }

.capture-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.capture-iconbtn:hover { background: var(--surface-2); color: var(--ink); }
.capture-iconbtn svg { width: 14px; height: 14px; }

.capture-floating-body { padding: 14px; }

.capture-floating .capture-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.capture-floating .video-frame { aspect-ratio: 16 / 10; }
.capture-floating .screen-grid {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.capture-floating .live-controls { margin-top: 12px; gap: 8px; }
.capture-floating .empty-screens {
  padding: 10px 12px;
  font-size: 12px;
  border-radius: 8px;
}
.capture-screens-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 8px;
}
.capture-screens-label {
  font-size: 11px; color: var(--muted);
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.10em;
}
.capture-screens-actions { display: inline-flex; gap: 6px; }

/* The chip view (collapsed). */
.capture-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 12px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  color: var(--ink);
  box-shadow: var(--shadow);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}
.capture-chip:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); border-color: var(--brand-ring); }
.capture-chip-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--available);
  box-shadow: 0 0 0 4px var(--available-soft);
  animation: pulse 1.6s ease-in-out infinite;
}
.capture-chip-text { font-weight: 600; letter-spacing: 0.01em; }
.capture-chip svg { color: var(--muted); }

/* On narrow screens, dock the floating capture into the column rather than
   floating it (mobile already redirects to the unsupported view, but we
   still cover the in-between widths down to ~iPad portrait). */
@media (max-width: 1024px) {
  .capture-floating {
    position: relative;
    top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
    width: 100%;
    max-width: 100%;
    margin: 16px auto 0;
  }
}

/* =========================================================================
   Realtime ribbon (replaces the static recent-timeline panel)
   ========================================================================= */
.streak-wrap {
  position: relative;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}
.streak-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.streak-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.10em;
  color: var(--muted);
}
.streak-label svg { width: 12px; height: 12px; opacity: 0.85; }
.streak-more {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--muted);
  border-radius: 6px; padding: 2px 6px;
}
.streak-more:hover { color: var(--ink); text-decoration: none; background: var(--surface-2); }

/* The streak card — single hero sentence. Tinted by the live context. */
.streak-card {
  position: relative;
  padding: 14px 16px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ctx-color, var(--neutral)) 6%, var(--surface)) 0%,
    var(--surface) 70%
  );
  overflow: hidden;
  transition: background 280ms ease, border-color 280ms ease;
}
.streak-card[data-ctx="coding"] { --ctx-color: var(--ctx-coding); }
.streak-card[data-ctx="research"] { --ctx-color: var(--ctx-research); }
.streak-card[data-ctx="communication"] { --ctx-color: var(--ctx-communication); }
.streak-card[data-ctx="meeting"] { --ctx-color: var(--ctx-meeting); }
.streak-card[data-ctx="writing"] { --ctx-color: var(--ctx-writing); }
.streak-card[data-ctx="consumption"] { --ctx-color: var(--ctx-consumption); }
.streak-card[data-ctx="admin"] { --ctx-color: var(--ctx-admin); }
.streak-card[data-ctx="idle"] { --ctx-color: var(--ctx-idle); }
.streak-card[data-ctx="unknown"] { --ctx-color: var(--ctx-unknown); }

.streak-card[data-state="empty"] {
  background: var(--surface);
}
/* Calling-out tint — slightly heavier left edge. Same palette, just louder. */
.streak-card[data-state="nag"] {
  border-color: color-mix(in srgb, var(--ctx-color, var(--busy)) 40%, var(--line));
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ctx-color, var(--busy)) 12%, var(--surface)) 0%,
    var(--surface) 80%
  );
}
.streak-card[data-state="nag"]::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--ctx-color, var(--busy));
  border-radius: 12px 0 0 12px;
}

.streak-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 60% at 100% 0%, color-mix(in srgb, var(--ctx-color, transparent) 12%, transparent) 0%, transparent 60%);
  opacity: 0.7;
}

.streak-line {
  position: relative;
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.25;
  color: var(--ink);
  letter-spacing: -0.01em;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}
.streak-prefix {
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0;
}
.streak-verb {
  color: var(--ctx-color, var(--ink));
  font-weight: 600;
  text-transform: lowercase;
}
.streak-duration {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ctx-color, var(--neutral)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ctx-color, var(--neutral)) 22%, transparent);
}
.streak-best {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  margin-left: 6px;
}
.streak-best strong {
  color: var(--ink-soft);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.streak-callout {
  position: relative;
  margin: 8px 0 0;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--busy);
  letter-spacing: 0.01em;
}

/* Day-so-far stacked bar */
.daybar-wrap {
  margin-top: 14px;
}
.daybar {
  display: flex;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-sunken);
  border: 1px solid var(--line);
}
.daybar-seg {
  display: block;
  height: 100%;
  background: var(--ctx-color, var(--neutral));
  transition: width 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
  cursor: default;
}
.daybar-seg[data-ctx="coding"] { --ctx-color: var(--ctx-coding); background: var(--ctx-coding); }
.daybar-seg[data-ctx="research"] { --ctx-color: var(--ctx-research); background: var(--ctx-research); }
.daybar-seg[data-ctx="communication"] { --ctx-color: var(--ctx-communication); background: var(--ctx-communication); }
.daybar-seg[data-ctx="meeting"] { --ctx-color: var(--ctx-meeting); background: var(--ctx-meeting); }
.daybar-seg[data-ctx="writing"] { --ctx-color: var(--ctx-writing); background: var(--ctx-writing); }
.daybar-seg[data-ctx="consumption"] { --ctx-color: var(--ctx-consumption); background: var(--ctx-consumption); }
.daybar-seg[data-ctx="admin"] { --ctx-color: var(--ctx-admin); background: var(--ctx-admin); }
.daybar-seg[data-ctx="idle"] { --ctx-color: var(--ctx-idle); background: var(--ctx-idle); }
.daybar-seg[data-ctx="unknown"] { --ctx-color: var(--ctx-unknown); background: var(--ctx-unknown); }

.daybar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 10px;
}
.daybar-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--muted);
}
.daybar-swatch {
  width: 8px; height: 8px; border-radius: 2px;
  background: var(--ctx-color, var(--neutral));
}
.daybar-legend-item[data-ctx="coding"] .daybar-swatch { background: var(--ctx-coding); }
.daybar-legend-item[data-ctx="research"] .daybar-swatch { background: var(--ctx-research); }
.daybar-legend-item[data-ctx="communication"] .daybar-swatch { background: var(--ctx-communication); }
.daybar-legend-item[data-ctx="meeting"] .daybar-swatch { background: var(--ctx-meeting); }
.daybar-legend-item[data-ctx="writing"] .daybar-swatch { background: var(--ctx-writing); }
.daybar-legend-item[data-ctx="consumption"] .daybar-swatch { background: var(--ctx-consumption); }
.daybar-legend-item[data-ctx="admin"] .daybar-swatch { background: var(--ctx-admin); }
.daybar-legend-item[data-ctx="idle"] .daybar-swatch { background: var(--ctx-idle); }
.daybar-legend-item[data-ctx="unknown"] .daybar-swatch { background: var(--ctx-unknown); }
.daybar-name {
  color: var(--ink-soft);
  font-weight: 500;
}
.daybar-pct {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.daybar-empty {
  padding: 10px 4px 0;
  font-size: 12px;
  color: var(--muted);
}

@media (max-width: 640px) {
  .streak-line { font-size: 18px; }
  .streak-duration { font-size: 14px; }
  .streak-best { display: block; margin-left: 0; margin-top: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .streak-card, .daybar-seg { transition: none !important; }
}

/* =========================================================================
   Live grid overrides — state card now spans full width
   ========================================================================= */
.live-view { position: relative; }

/* Web font loading — kept inline-style-light. Falls back gracefully. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: local("Inter");
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: local("Fraunces"), local("Iowan Old Style"), local("Georgia");
}

/* =========================================================================
   Report-issue floating action button + feedback modal
   ========================================================================= */
.report-issue-fab {
  position: fixed;
  bottom: 20px;
  left: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  font: 500 13px/1 Inter, system-ui, sans-serif;
  box-shadow: 0 4px 16px rgba(20, 25, 35, 0.08);
  cursor: pointer;
  z-index: 30;
  transition: background 120ms ease, color 120ms ease, transform 80ms ease;
}
.report-issue-fab:hover {
  background: var(--brand-soft);
  color: var(--brand);
  border-color: color-mix(in srgb, var(--brand) 35%, transparent);
}
.report-issue-fab:active { transform: translateY(1px); }
.report-issue-fab[hidden] { display: none; }

.feedback-modal {
  position: fixed; inset: 0;
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
}
.feedback-modal[hidden] { display: none; }
.feedback-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(20, 25, 35, 0.45);
  backdrop-filter: blur(2px);
}
.feedback-modal-card {
  position: relative;
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  padding: 22px 24px;
}
.feedback-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.feedback-modal-head h2 {
  margin: 0;
  font: 500 18px/1.2 var(--display, "Fraunces", Georgia, serif);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.feedback-modal-close {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
}
.feedback-modal-close:hover { color: var(--ink); background: var(--surface-2); }
.feedback-modal-body { display: flex; flex-direction: column; gap: 14px; }
.feedback-row { display: flex; flex-direction: column; gap: 6px; }
.feedback-row-label {
  font: 500 12px/1 Inter, system-ui, sans-serif;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.feedback-select, .feedback-textarea {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font: 14px/1.4 Inter, system-ui, sans-serif;
  padding: 10px 12px;
  outline: none;
  resize: vertical;
}
.feedback-select:focus, .feedback-textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-ring);
}
.feedback-textarea { min-height: 110px; }
.feedback-hint { margin: 0; color: var(--muted); font-size: 12px; }
.feedback-modal-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 18px;
}

@media (prefers-reduced-motion: reduce) {
  .report-issue-fab { transition: none; }
}