/* Hologram start-app chrome — rests on style-guide design tokens */
html, body {
  margin: 0;
  min-height: 100%;
  background: var(--surface, #fff);
  color: var(--text, #111);
  font-family: var(--font-sans, system-ui, sans-serif);
}

a { color: inherit; }

.content {
  /* Theme CSS sets container-type: inline-size on .content (for CQ demos).
     That size-containment collapses the box when it is a flex item under
     body.app-body > main — login/signup/etc. wrap letter-by-letter. Shell
     layouts already force container-type: normal; app pages need the same. */
  width: 100%;
  max-width: var(--layout-standard-max-width, var(--container-width, 1200px));
  margin: 0 auto;
  padding: var(--space-4, 2rem) var(--space-3, 1.5rem);
  box-sizing: border-box;
  container-type: normal;
  min-width: 0;
}

/* Auth forms: intentional narrow rail (not the 1ch collapse bug). */
.content.auth-page {
  max-width: 32rem;
  padding-top: clamp(2rem, 6vw, 4rem);
}

.sg-page-title {
  font-size: var(--font-size-3xl, 2rem);
  font-weight: 600;
  margin: 0 0 var(--space-2, 1rem);
}

.sg-page-intro {
  color: var(--text-secondary, #444);
  max-width: 42rem;
  margin: 0 0 var(--space-4, 2rem);
}

.sg-page-cta { margin-bottom: var(--space-5, 2.5rem); }

.sg-error {
  color: var(--error, #b00020);
  margin-bottom: var(--space-2, 1rem);
}

.sg-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-half, 0.25rem);
  margin-bottom: var(--space-2, 1rem);
}

.sg-field label,
.sg-field .field-label {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 600;
  letter-spacing: var(--letter-spacing-label, 0.04em);
  color: var(--text-muted, #666);
  text-transform: uppercase;
}

.sg-field input,
.sg-field select,
.sg-field textarea {
  width: 100%;
  box-sizing: border-box;
  height: var(--control-height, 2.5rem);
  padding: 0 var(--space-1-mid, 0.75rem);
  border: var(--border-thin, 1px) solid var(--border, #ddd);
  border-radius: var(--radius-sm, 4px);
  background: var(--surface, #fff);
  color: var(--text, #111);
  font: inherit;
}

.sg-field textarea { height: auto; min-height: 6rem; padding: var(--space-1, 0.5rem); }

.sg-field input:focus,
.sg-field select:focus,
.sg-field textarea:focus {
  outline: none;
  border-color: var(--brand-blue, #2563eb);
  box-shadow: 0 0 0 var(--border-heavy, 2px) color-mix(in srgb, var(--brand-blue, #2563eb) 25%, transparent);
}

.sg-form {
  width: 100%;
  max-width: 28rem;
}

.sg-form .btn,
.sg-form .sg-btn { width: 100%; }

.sg-form-footer {
  margin-top: var(--space-3, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 0.5rem);
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--text-secondary, #444);
}

.sg-form-footer a { text-decoration: underline; }

.sg-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 0.5rem);
  max-width: 28rem;
}

.sg-stack .btn,
.sg-stack .sg-btn { width: 100%; justify-content: center; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
}
.skip-link:focus {
  left: var(--space-2, 1rem);
  top: var(--space-2, 1rem);
  z-index: 1000;
  background: var(--surface-inverse, #111);
  color: var(--text-inverse, #fff);
  padding: var(--space-1, 0.5rem) var(--space-2, 1rem);
}

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--surface-alt, #f6f6f6);
  border-top: var(--border-thin, 1px) solid var(--border, #ddd);
  padding: var(--space-3, 1.5rem);
}

.cookie-banner__inner {
  max-width: var(--container-width, 1200px);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 1rem);
  align-items: center;
  justify-content: space-between;
}

.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1, 0.5rem);
}

.dark body,
html.dark body {
  color-scheme: dark;
}

/* ── Solid primary CTA (theme defines .btn / outline / ghost, not black) ── */
.btn-black {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--surface-inverse, #000);
  border-radius: var(--radius-sm, 2px);
  background: var(--surface-inverse, #000);
  color: var(--text-inverse, #fff);
  font-weight: 600;
  font-size: var(--font-size-sm, 0.875rem);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}
.btn-black:hover {
  background: color-mix(in srgb, var(--surface-inverse, #000) 88%, var(--brand-red, #e20613));
  border-color: transparent;
  color: var(--text-inverse, #fff);
}
.btn-black:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.btn-black.btn-sm {
  padding: 0.35rem 0.75rem;
  font-size: var(--font-size-xs, 0.75rem);
}

/* ── Stopwatch landing page (per-theme palette + robot hero) ─────────────────
   Light and dark values live in the SAME declaration via light-dark(), so a
   theme can never ship a dark surface with light-mode ink again. `color-scheme`
   below is the single switch: the explicit toggle sets html.light/html.dark,
   and "system" falls through to prefers-color-scheme.

   Do NOT re-introduce inline `--stopwatch-*` colors on <html>: an inline style
   outranks every rule here and pins one mode's palette onto both modes. Theme
   switching already works from `data-design-theme`, which Hologram swaps live.
   ────────────────────────────────────────────────────────────────────────── */
:root { color-scheme: light dark; }
html.light { color-scheme: light; }
html.dark { color-scheme: dark; }

:root,
html[data-design-theme="silver-screen"] {
  --stopwatch-bg: light-dark(#f7fbff, #0b1117);
  --stopwatch-ink: light-dark(#132238, #e8edf3);
  --stopwatch-muted: light-dark(#465b70, #b9c6d8);
  --stopwatch-panel: light-dark(rgb(255 255 255 / 0.86), rgb(19 32 56 / 0.72));
  --stopwatch-panel-strong: light-dark(#ffffff, #101b2f);
  --stopwatch-border: light-dark(rgb(32 62 92 / 0.18), rgb(202 219 255 / 0.20));
  --stopwatch-accent: #ff4081;
  --stopwatch-accent-text: light-dark(#c2185b, #ff7fae);
  --stopwatch-teal: light-dark(#0b7373, #3dd6d0);
  --stopwatch-coral: light-dark(#d81b60, #ff8a7a);
  --stopwatch-lemon: light-dark(#c98a00, #ffe08a);
  --stopwatch-violet: light-dark(#35688f, #8fbde8);
  --stopwatch-sky: light-dark(#2f9df4, #68c5ff);
  --stopwatch-palette-1: #ff4081;
  --stopwatch-palette-2: #35688f;
  --stopwatch-palette-3: #8d97a3;
  --stopwatch-palette-4: #0d1114;
  --stopwatch-palette-5: #ffffff;
  --sw-on-accent: #0d1114;
  --stopwatch-hero-image: url("/images/themes/silver-screen/robots-hero.png");
  --stopwatch-hero-aspect: 1693 / 669;
}

html[data-design-theme="style-guide"] {
  --stopwatch-accent: #ff4081;
  --stopwatch-accent-text: light-dark(#c2185b, #ff7fae);
  --stopwatch-teal: light-dark(#0b7373, #3dd6d0);
  --stopwatch-coral: light-dark(#d1503f, #ff8a7a);
  --stopwatch-violet: light-dark(#6a45d9, #b49cff);
  --stopwatch-palette-1: #ff4081;
  --stopwatch-palette-2: #0fb5b5;
  --stopwatch-palette-3: #8f6df2;
  --stopwatch-palette-4: #132238;
  --stopwatch-palette-5: #ffffff;
  --sw-on-accent: #0d1114;
  --stopwatch-hero-image: url("/images/themes/style-guide/robots-hero.png");
  --stopwatch-hero-aspect: 1693 / 669;
}

/* Nocturne theme — dark-native in both color schemes, by design. */
html[data-design-theme="cyberpunk"] {
  --stopwatch-bg: #050508;
  --stopwatch-ink: #e8ffff;
  --stopwatch-muted: #9d9db8;
  --stopwatch-panel: rgb(20 20 36 / 0.88);
  --stopwatch-panel-strong: #111118;
  --stopwatch-border: rgb(0 255 240 / 0.28);
  --stopwatch-accent: #ff00aa;
  --stopwatch-accent-text: #ff5cc8;
  --stopwatch-teal: #00fff0;
  --stopwatch-coral: #ff00aa;
  --stopwatch-lemon: #aaff00;
  --stopwatch-violet: #c07bff;
  --stopwatch-sky: #6b8cff;
  --stopwatch-palette-1: #00fff0;
  --stopwatch-palette-2: #ff00aa;
  --stopwatch-palette-3: #aaff00;
  --stopwatch-palette-4: #4466ff;
  --stopwatch-palette-5: #050508;
  --sw-on-accent: #0d1114;
  --stopwatch-hero-image: url("/images/themes/cyberpunk/robots-hero.png");
  --stopwatch-hero-aspect: 1280 / 518;
}

html[data-design-theme="sumi-e"] {
  --stopwatch-bg: light-dark(#f4efe6, #1a1814);
  --stopwatch-ink: light-dark(#1a1a1a, #f4efe6);
  --stopwatch-muted: light-dark(#544f46, #b8b0a2);
  --stopwatch-panel: light-dark(rgb(255 252 247 / 0.9), rgb(36 32 26 / 0.9));
  --stopwatch-panel-strong: light-dark(#fffdf8, #221e18);
  --stopwatch-border: light-dark(rgb(26 26 26 / 0.18), rgb(244 239 230 / 0.18));
  --stopwatch-accent: light-dark(#c23b22, #e05a42);
  --stopwatch-accent-text: light-dark(#a83218, #f08064);
  --stopwatch-teal: light-dark(#4a6139, #7a9464);
  --stopwatch-coral: light-dark(#c23b22, #e05a42);
  --stopwatch-lemon: light-dark(#8a6f24, #d4b86a);
  --stopwatch-violet: light-dark(#2b4570, #8aadc8);
  --stopwatch-sky: light-dark(#4c6f92, #8aadc8);
  --stopwatch-palette-1: #1a1a1a;
  --stopwatch-palette-2: #c23b22;
  --stopwatch-palette-3: #5a7247;
  --stopwatch-palette-4: #2b4570;
  --stopwatch-palette-5: #f4efe6;
  --sw-on-accent: light-dark(#fffdf8, #1a1814);
  --stopwatch-hero-image: url("/images/themes/sumi-e/robots-hero.png");
  --stopwatch-hero-aspect: 1280 / 518;
}

html[data-design-theme="swiss"] {
  --stopwatch-bg: light-dark(#ffffff, #0a0a0a);
  --stopwatch-ink: light-dark(#000000, #f5f5f5);
  --stopwatch-muted: light-dark(#454545, #b0b0b0);
  --stopwatch-panel: light-dark(rgb(255 255 255 / 0.94), rgb(18 18 18 / 0.92));
  --stopwatch-panel-strong: light-dark(#ffffff, #121212);
  --stopwatch-border: light-dark(rgb(0 0 0 / 0.2), rgb(255 255 255 / 0.2));
  --stopwatch-accent: light-dark(#e20613, #ff3340);
  --stopwatch-accent-text: light-dark(#c40510, #ff6670);
  --stopwatch-teal: light-dark(#0047ab, #3d7fd4);
  --stopwatch-coral: light-dark(#e20613, #ff3340);
  --stopwatch-lemon: light-dark(#8a6f00, #f5c518);
  --stopwatch-violet: light-dark(#0047ab, #3d7fd4);
  --stopwatch-sky: light-dark(#0047ab, #3d7fd4);
  --stopwatch-palette-1: #e20613;
  --stopwatch-palette-2: #0047ab;
  --stopwatch-palette-3: #f5c518;
  --stopwatch-palette-4: #000000;
  --stopwatch-palette-5: #ffffff;
  --sw-on-accent: light-dark(#ffffff, #0a0a0a);
  --stopwatch-hero-image: url("/images/themes/swiss/robots-hero.png");
  --stopwatch-hero-aspect: 1280 / 518;
}

/* Derived surfaces. Every one of these follows --stopwatch-bg / --stopwatch-ink,
   so scrims and tints can never disagree with the text they sit behind. */
.landing-page {
  --sw-scrim-solid: color-mix(in srgb, var(--stopwatch-bg) 97%, transparent);
  --sw-scrim-mid: color-mix(in srgb, var(--stopwatch-bg) 80%, transparent);
  --sw-scrim-none: color-mix(in srgb, var(--stopwatch-bg) 0%, transparent);

  background:
    radial-gradient(circle at 14% 10%, color-mix(in srgb, var(--stopwatch-lemon) 14%, transparent), transparent 26rem),
    radial-gradient(circle at 86% 32%, color-mix(in srgb, var(--stopwatch-violet) 12%, transparent), transparent 24rem),
    linear-gradient(180deg, var(--stopwatch-bg), color-mix(in srgb, var(--stopwatch-bg) 88%, var(--stopwatch-sky)));
  color: var(--stopwatch-ink);
  min-height: calc(100vh - 56px);
}

/* ── Hero ── */
.stopwatch-hero {
  position: relative;
  min-height: clamp(30rem, 66vh, 44rem);
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: clamp(3rem, 7vw, 6rem) clamp(1.25rem, 5vw, 5rem);
}

/* Robot art sits on the right; the scrim is opaque across the whole content
   column (43rem) and only fades after it, so hero copy contrast never depends
   on which part of the illustration happens to land under it. */
.stopwatch-hero__media {
  position: absolute;
  inset: 0;
  background-color: var(--stopwatch-bg);
  background-image:
    linear-gradient(
      90deg,
      var(--sw-scrim-solid) 0,
      var(--sw-scrim-solid) 44rem,
      var(--sw-scrim-mid) 56rem,
      var(--sw-scrim-none) 72rem
    ),
    var(--stopwatch-hero-image);
  background-size: auto, contain;
  background-position: center center, center right;
  background-repeat: no-repeat, no-repeat;
}

.stopwatch-hero__content {
  position: relative;
  z-index: 1;
  max-width: 43rem;
}

.stopwatch-kicker {
  margin: 0 0 0.85rem;
  font: 700 0.78rem/1.2 var(--font-mono, ui-monospace, monospace);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stopwatch-accent-text);
}

.stopwatch-hero h1 {
  margin: 0;
  max-width: 13ch;
  font-size: clamp(2.75rem, 7vw, 6rem);
  line-height: 0.94;
  letter-spacing: -0.01em;
  color: var(--stopwatch-ink);
}

.stopwatch-hero__copy {
  max-width: 38rem;
  margin: 1.5rem 0 0;
  color: var(--stopwatch-muted);
  font-size: clamp(1.05rem, 1.2vw, 1.2rem);
  line-height: 1.65;
}

/* Platform strip under the hero copy — replaces the raw palette swatches,
   which were style-guide chrome rather than a product claim. */
.stopwatch-platforms {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1.5rem 0 0;
  padding: 0;
}

.stopwatch-platforms li {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--stopwatch-border);
  border-radius: 999px;
  background: var(--stopwatch-panel);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--stopwatch-ink);
}

.stopwatch-platforms .stopwatch-status {
  font: 500 0.68rem/1 var(--font-mono, ui-monospace, monospace);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stopwatch-muted);
}

/* Brand swatch row — still rendered by ThemeBrandBanner on /styleguide.
   Removed from the marketing hero, where it read as decoration rather than
   product value. */
.stopwatch-palette {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.25rem 0 0;
  padding: 0;
}

.stopwatch-palette__swatch {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  border: 1px solid var(--stopwatch-border);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
}

.stopwatch-palette__swatch--1 { background: var(--stopwatch-palette-1); }
.stopwatch-palette__swatch--2 { background: var(--stopwatch-palette-2); }
.stopwatch-palette__swatch--3 { background: var(--stopwatch-palette-3); }
.stopwatch-palette__swatch--4 { background: var(--stopwatch-palette-4); }
.stopwatch-palette__swatch--5 { background: var(--stopwatch-palette-5); }

/* ── Buttons (landing-scoped: the theme .btn tokens are tuned for app chrome
   and invert independently of the hero ground) ── */
.stopwatch-actions {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.stopwatch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 2px);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

/* Accent fill with near-black label: reads >6:1 in both schemes because the
   accent hue is fixed and the label does not follow the mode. */
.stopwatch-btn--primary {
  background: var(--stopwatch-accent);
  border-color: var(--stopwatch-accent);
  color: var(--sw-on-accent);
}

.stopwatch-btn--primary:hover {
  background: color-mix(in srgb, var(--stopwatch-accent) 86%, var(--stopwatch-ink));
  color: var(--sw-on-accent);
}

.stopwatch-btn--ghost {
  background: transparent;
  border-color: color-mix(in srgb, var(--stopwatch-ink) 42%, transparent);
  color: var(--stopwatch-ink);
}

.stopwatch-btn--ghost:hover {
  border-color: var(--stopwatch-ink);
  background: color-mix(in srgb, var(--stopwatch-ink) 8%, transparent);
  color: var(--stopwatch-ink);
}

.stopwatch-btn:focus-visible {
  outline: 3px solid var(--stopwatch-sky);
  outline-offset: 2px;
}

/* ── Bands ── */
.stopwatch-band {
  padding: clamp(3rem, 7vw, 5.5rem) clamp(1.25rem, 5vw, 5rem);
}

.stopwatch-band--panel {
  background: color-mix(in srgb, var(--stopwatch-panel-strong) 88%, transparent);
}

/* Deliberately dark in BOTH schemes, so its palette is fixed rather than
   derived from --stopwatch-ink (which used to invert the band to near-white
   text on a near-white ground in dark mode). */
.stopwatch-band--ink {
  --sw-ink-band-fg: #f8fbff;
  background: linear-gradient(135deg, #16233d, #0d1526);
  color: var(--sw-ink-band-fg);
}

.stopwatch-band--cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--stopwatch-lemon) 20%, var(--stopwatch-panel-strong)),
    color-mix(in srgb, var(--stopwatch-sky) 16%, var(--stopwatch-panel-strong))
  );
  color: var(--stopwatch-ink);
}

.stopwatch-band--cta > div {
  max-width: 48rem;
}

.stopwatch-section-head {
  max-width: 46rem;
  margin-bottom: 2rem;
}

.stopwatch-section-head h2,
.stopwatch-band--cta h2 {
  margin: 0;
  font-size: clamp(1.9rem, 3.6vw, 3.1rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: inherit;
}

.stopwatch-section-head p:not(.stopwatch-kicker) {
  margin: 0.9rem 0 0;
  max-width: 44rem;
  color: var(--stopwatch-muted);
  font-size: 1.05rem;
  line-height: 1.6;
}

.stopwatch-band--cta p:not(.stopwatch-kicker) {
  margin: 1rem 0 0;
  color: var(--stopwatch-muted);
  font-size: 1.05rem;
  line-height: 1.6;
}

/* ── Card grids ── */
.stopwatch-feature-grid,
.stopwatch-privacy-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.stopwatch-platform-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.stopwatch-feature,
.stopwatch-privacy-grid article,
.stopwatch-platform-grid article {
  min-width: 0;
  border: 1px solid var(--stopwatch-border);
  border-radius: 8px;
  padding: 1.25rem;
  background: var(--stopwatch-panel);
}

.stopwatch-feature {
  border-top-width: 5px;
}

.stopwatch-feature--teal { border-top-color: var(--stopwatch-teal); }
.stopwatch-feature--coral { border-top-color: var(--stopwatch-coral); }
.stopwatch-feature--violet { border-top-color: var(--stopwatch-violet); }

.stopwatch-feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: 1.25rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--stopwatch-sky) 22%, transparent);
  color: var(--stopwatch-ink);
  font: 700 0.75rem/1 var(--font-mono, ui-monospace, monospace);
}

/* Numerals sit at mono-caption size; pictographic glyphs need the extra weight
   to stay legible in the same 2.25rem disc. */
.stopwatch-feature__icon--glyph {
  font-size: 1.2rem;
  font-family: var(--font-sans, system-ui, sans-serif);
  line-height: 1;
}

.stopwatch-feature h3,
.stopwatch-privacy-grid h3,
.stopwatch-platform-grid h3 {
  margin: 0 0 0.65rem;
  font-size: 1.15rem;
  letter-spacing: 0;
  color: inherit;
}

.stopwatch-feature p,
.stopwatch-privacy-grid p,
.stopwatch-platform-grid p {
  margin: 0;
  color: var(--stopwatch-muted);
  line-height: 1.6;
}

/* Availability chip — the landing page must not imply a shipped Windows or
   Linux agent, so every platform card states where it actually is. */
.stopwatch-platform-grid header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.stopwatch-status {
  flex-shrink: 0;
  font: 600 0.68rem/1 var(--font-mono, ui-monospace, monospace);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stopwatch-muted);
}

.stopwatch-status--live { color: var(--stopwatch-teal); }
.stopwatch-status--build { color: var(--stopwatch-accent-text); }

.stopwatch-band--ink .stopwatch-kicker { color: #ffd166; }
.stopwatch-band--ink .stopwatch-section-head p:not(.stopwatch-kicker) { color: rgb(248 251 255 / 0.82); }
.stopwatch-band--ink .stopwatch-privacy-grid article {
  background: rgb(255 255 255 / 0.08);
  border-color: rgb(255 255 255 / 0.2);
}
.stopwatch-band--ink .stopwatch-privacy-grid p { color: rgb(248 251 255 / 0.82); }

/* ── Integrations ── */
.stopwatch-integrations {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1rem;
}

.stopwatch-integrations li {
  border: 1px solid var(--stopwatch-border);
  border-left: 4px solid var(--stopwatch-accent);
  border-radius: 8px;
  padding: 1.1rem 1.25rem;
  background: var(--stopwatch-panel);
}

.stopwatch-integrations h3 {
  margin: 0 0 0.45rem;
  font-size: 1.05rem;
}

.stopwatch-integrations p {
  margin: 0;
  color: var(--stopwatch-muted);
  line-height: 1.6;
}

.stopwatch-integrations a {
  color: var(--stopwatch-accent-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 1100px) {
  .stopwatch-hero__media {
    background-image:
      linear-gradient(
        90deg,
        var(--sw-scrim-solid) 0,
        var(--sw-scrim-solid) 60%,
        var(--sw-scrim-mid) 76%,
        var(--sw-scrim-none) 100%
      ),
      var(--stopwatch-hero-image);
  }
  .stopwatch-feature-grid,
  .stopwatch-privacy-grid,
  .stopwatch-platform-grid {
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  }
}

@media (max-width: 800px) {
  .stopwatch-hero {
    min-height: auto;
    align-items: flex-start;
    padding-top: 3rem;
    padding-bottom: 16rem;
  }
  .stopwatch-hero__media {
    background-image:
      linear-gradient(
        180deg,
        var(--sw-scrim-solid) 0%,
        var(--sw-scrim-solid) 48%,
        var(--sw-scrim-mid) 66%,
        var(--sw-scrim-none) 92%
      ),
      var(--stopwatch-hero-image);
    background-size: auto, contain;
    background-position: center center, center bottom;
  }
  .stopwatch-hero h1 {
    max-width: 14ch;
  }
  .stopwatch-feature-grid,
  .stopwatch-privacy-grid,
  .stopwatch-platform-grid,
  .stopwatch-integrations {
    grid-template-columns: 1fr;
  }
  .stopwatch-band--cta {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── Global navbar (Swiss inverse chrome) ── */
.sg-navbar {
  position: sticky;
  top: 0;
  z-index: var(--z-chrome, 40);
  height: 56px;
  background: var(--surface-inverse, #0a0a0a);
  color: var(--text-inverse, #f5f5f5);
  border-bottom: 1px solid color-mix(in srgb, var(--text-inverse, #fff) 12%, transparent);
}
.sg-navbar__inner {
  max-width: 1440px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, 1.5rem);
  padding: 0 var(--space-3, 1.5rem);
}
.sg-navbar__brand {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.04em;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}
.sg-navbar__brand:hover { color: inherit; opacity: 0.9; }
.sg-navbar__links {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.sg-navbar__user {
  font-size: var(--font-size-xs, 0.75rem);
  font-family: var(--font-mono, ui-monospace, monospace);
  opacity: 0.75;
  text-decoration: none;
  color: inherit;
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 0.5rem;
}
.sg-navbar__user:hover { opacity: 1; color: inherit; }
.sg-navbar .sg-navbar__link {
  color: color-mix(in srgb, var(--text-inverse, #fff) 78%, transparent);
  text-decoration: none;
  font-size: var(--font-size-sm, 0.875rem);
  padding: 0.35rem 0.65rem;
  border-bottom: 2px solid transparent;
}
.sg-navbar .sg-navbar__link:hover {
  color: var(--text-inverse, #fff);
  text-decoration: none;
  border-bottom-color: var(--brand-red, #e20613);
}
.sg-navbar .btn-outline {
  color: var(--text-inverse, #fff);
  border-color: color-mix(in srgb, var(--text-inverse, #fff) 35%, transparent);
  background: transparent;
}
.sg-navbar .btn-outline:hover {
  border-color: var(--text-inverse, #fff);
  background: color-mix(in srgb, var(--text-inverse, #fff) 8%, transparent);
  color: var(--text-inverse, #fff);
}
.sg-navbar .btn-black {
  background: var(--brand-red, #e20613);
  border-color: var(--brand-red, #e20613);
  color: #fff;
}
.sg-navbar .btn-black:hover {
  background: color-mix(in srgb, var(--brand-red, #e20613) 85%, #000);
}

/* Theme switcher — lives in the navbar so every page can change theme. */
.sg-navbar__theme {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-right: 0.5rem;
  padding-right: 0.6rem;
  border-right: 1px solid color-mix(in srgb, var(--text-inverse, #fff) 20%, transparent);
}
.sg-navbar__theme-label {
  font-size: var(--font-size-xs, 0.75rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text-inverse, #fff) 62%, transparent);
}
.sg-navbar__theme-select {
  font-family: inherit;
  font-size: var(--font-size-xs, 0.75rem);
  padding: 0.25rem 0.4rem;
  border-radius: var(--radius-sm, 4px);
  border: 1px solid color-mix(in srgb, var(--text-inverse, #fff) 30%, transparent);
  background: color-mix(in srgb, var(--text-inverse, #fff) 10%, transparent);
  color: var(--text-inverse, #fff);
}
/* Native option lists render on the OS surface, not the navbar's. */
.sg-navbar__theme-select option {
  color: var(--text, #111);
  background: var(--surface, #fff);
}
.sg-navbar__theme-toggle {
  font: inherit;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem 0.45rem;
  border-radius: var(--radius-sm, 4px);
  border: 1px solid color-mix(in srgb, var(--text-inverse, #fff) 30%, transparent);
  background: transparent;
  color: var(--text-inverse, #fff);
}
.sg-navbar__theme-toggle:hover {
  background: color-mix(in srgb, var(--text-inverse, #fff) 12%, transparent);
}
@media (max-width: 640px) {
  .sg-navbar__theme-label { display: none; }
  .sg-navbar__theme { margin-right: 0.25rem; padding-right: 0.4rem; }
}

/* ── Authenticated app shell (macOS Stopwatch workbench) ── */
body.app-body {
  --timely-accent: var(--stopwatch-accent, #d61f73);
  --timely-teal: var(--stopwatch-teal, #05949e);
  --timely-violet: var(--stopwatch-violet, #6e4ae0);
  --timely-gold: var(--stopwatch-lemon, #db8c1f);
  --timely-success: #1aa352;
  --timely-warning: #c77a1a;
  --timely-danger: #c72424;
  --timely-radius: 8px;
  --timely-radius-btn: 6px;
  --timely-page-pad: 24px;
  --timely-card-pad: 14px;
  --timely-surface: color-mix(in srgb, var(--surface, #fff) 96%, var(--timely-accent) 4%);
  --timely-elevated: var(--surface, #fff);
  --timely-border: color-mix(in srgb, var(--border, #c8c8c8) 70%, transparent);
  --timely-secondary: var(--text-muted, #5c6b7a);
  --timely-warm-wash:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--timely-accent) 16%, transparent),
      color-mix(in srgb, var(--timely-gold) 10%, transparent),
      color-mix(in srgb, var(--timely-teal) 12%, transparent)
    );
  --timely-brand-gradient: linear-gradient(
    135deg,
    var(--timely-accent),
    var(--timely-violet),
    var(--timely-teal)
  );
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--stopwatch-bg, #f4f6f8);
  color: var(--stopwatch-ink, var(--text, #132238));
}
body.app-body > main#main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
body.app-body > main#main > .app-shell {
  flex: 1 1 auto;
  width: 100%;
}
body.app-body > main#main > .content {
  flex: 0 1 auto;
  align-self: stretch;
}

/* Compact top bar when signed in (macOS-like toolbar, not marketing nav) */
body.app-body .sg-navbar--app {
  background: color-mix(in srgb, var(--surface, #fff) 92%, transparent);
  border-bottom: 1px solid var(--timely-border);
  backdrop-filter: saturate(1.2) blur(10px);
  position: sticky;
  top: 0;
  z-index: 40;
}
body.app-body .sg-navbar--app .sg-navbar__inner {
  max-width: none;
  padding: 0.45rem 1rem;
  min-height: 48px;
}
body.app-body .sg-navbar--app .sg-navbar__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
  color: var(--stopwatch-ink, var(--text, #132238));
  text-decoration: none;
}
body.app-body .sg-navbar__bot {
  display: block;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 7px;
}
body.app-body .sg-navbar--app .sg-navbar__user {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
  color: var(--timely-secondary);
}
body.app-body .sg-footer--app {
  border-top: 1px solid var(--timely-border);
  background: color-mix(in srgb, var(--surface, #fff) 88%, transparent);
  font-size: 0.75rem;
  color: var(--timely-secondary);
  padding: 0.55rem 1rem;
}

/* Primary actions: brand gradient (macOS TimelyPrimaryButtonStyle) */
body.app-body .btn-primary,
body.app-body .btn-black {
  background: var(--timely-brand-gradient);
  color: #fff;
  border: none;
  border-radius: var(--timely-radius-btn);
  min-height: 34px;
  padding: 0 14px;
  font-weight: 600;
  font-size: 0.8125rem;
  box-shadow: 0 3px 8px color-mix(in srgb, var(--timely-accent) 18%, transparent);
}
body.app-body .btn-primary:hover,
body.app-body .btn-black:hover {
  filter: brightness(1.05);
  opacity: 0.95;
}
body.app-body .btn-outline {
  border-radius: var(--timely-radius-btn);
  min-height: 34px;
  padding: 0 12px;
  font-weight: 500;
  font-size: 0.8125rem;
  background: var(--timely-elevated);
  border: 1px solid var(--timely-border);
  color: var(--stopwatch-ink, var(--text, #132238));
}
body.app-body .btn-sm {
  min-height: 30px;
  padding: 0 11px;
  font-size: 0.78rem;
}
body.app-body .sg-field input:focus,
body.app-body .sg-field select:focus,
body.app-body .sg-field textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--timely-accent) 55%, transparent);
  outline-offset: 1px;
  border-color: var(--timely-accent);
}

.app-shell {
  display: grid;
  grid-template-columns: 200px 1fr;
  min-height: calc(100vh - 48px - 36px);
  width: 100%;
  max-width: none;
  margin: 0;
  background: transparent;
}
.app-shell__sidebar {
  border-right: 1px solid var(--timely-border);
  background: color-mix(in srgb, var(--surface, #fff) 94%, var(--timely-accent) 2%);
  color: var(--stopwatch-ink, var(--text, #132238));
  padding: 0.85rem 0.55rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-height: 100%;
}
.app-shell__sidebar-head {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.2rem 0.55rem 0.75rem;
  border-bottom: 1px solid var(--timely-border);
}
.app-shell__sidebar-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--timely-accent);
}
.app-shell__sidebar-user {
  font-size: 0.72rem;
  color: var(--timely-secondary);
  word-break: break-all;
  line-height: 1.35;
}
.app-shell__nav,
.app-shell__orgs {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 0 0 auto;
}
.app-shell__orgs {
  margin-top: 0.25rem;
  max-height: 28vh;
  overflow: auto;
}
.app-shell__nav-section {
  margin-top: 0.65rem;
  margin-bottom: 0.15rem;
  padding: 0 0.55rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--timely-secondary);
}
.app-shell__link {
  display: block;
  padding: 0.42rem 0.6rem;
  border-radius: 7px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--stopwatch-ink, #132238) 88%, transparent);
  text-decoration: none;
  border: 1px solid transparent;
}
.app-shell__link:hover {
  background: color-mix(in srgb, var(--timely-accent) 8%, transparent);
  color: var(--stopwatch-ink, #132238);
}
.app-shell__link--active {
  font-weight: 600;
  color: var(--timely-accent);
  background: color-mix(in srgb, var(--timely-accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--timely-accent) 28%, transparent);
}
.app-shell__footer {
  margin-top: auto;
  padding: 0.75rem 0.45rem 0.25rem;
  border-top: 1px solid var(--timely-border);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.app-shell__footer-hint {
  font-size: 0.68rem;
  color: var(--timely-secondary);
  padding: 0 0.2rem;
}
.app-shell__footer-btn {
  width: 100%;
}
.app-shell__main {
  padding: var(--timely-page-pad);
  min-width: 0;
  background: transparent;
}
.app-shell__content {
  max-width: 1180px;
  margin: 0 auto;
  width: 100%;
}
.app-shell__header {
  margin-bottom: 0.75rem;
}
.app-shell__header .sg-page-title {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.app-shell__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* macOS TimelyPageHeader */
.timely-page-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.timely-page-header__bar {
  width: 5px;
  min-height: 4.4rem;
  border-radius: 2px;
  background: var(--timely-brand-gradient);
  flex-shrink: 0;
}
.timely-page-header__text {
  min-width: 0;
  flex: 1;
}
.timely-page-header__eyebrow {
  margin: 0 0 0.2rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--timely-accent);
}
.timely-page-header__title {
  margin: 0;
  font-size: 1.85rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--stopwatch-ink, var(--text, #132238));
}
.timely-page-header__subtitle {
  margin: 0.3rem 0 0;
  font-size: 0.9rem;
  color: var(--timely-secondary);
  line-height: 1.4;
}

/* Thin theme ribbon (macOS section strip) */
.timely-ribbon {
  height: 44px;
  border-radius: var(--timely-radius);
  border: 1px solid var(--timely-border);
  margin-bottom: 1rem;
  background-color: color-mix(in srgb, var(--timely-accent) 8%, var(--surface, #fff));
  background-image:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--surface, #fff) 55%, transparent),
      transparent 35%,
      transparent 65%,
      color-mix(in srgb, var(--surface, #fff) 40%, transparent)
    ),
    var(--stopwatch-hero-image, none);
  background-size: cover, cover;
  background-position: center, center;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 20%, transparent);
}

/* Card / metric primitives (macOS timelyCard + TimelyMetricTile) */
.timely-card {
  border: 1px solid var(--timely-border);
  border-radius: var(--timely-radius);
  padding: var(--timely-card-pad);
  background:
    var(--timely-warm-wash),
    var(--timely-elevated);
  background-blend-mode: soft-light, normal;
}
.timely-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--timely-accent) 10%, transparent);
  color: var(--timely-accent);
}
.timely-pill--success {
  background: color-mix(in srgb, var(--timely-success) 12%, transparent);
  color: var(--timely-success);
}
.timely-pill--warning {
  background: color-mix(in srgb, var(--timely-warning) 12%, transparent);
  color: var(--timely-warning);
}
.timely-pill--danger {
  background: color-mix(in srgb, var(--timely-danger) 12%, transparent);
  color: var(--timely-danger);
}
.timely-pill--teal {
  background: color-mix(in srgb, var(--timely-teal) 12%, transparent);
  color: var(--timely-teal);
}

/* KPI metric cards — icon-tile style like macOS */
.app-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 0.85rem;
  margin-bottom: 0.25rem;
}
.app-kpi {
  border: 1px solid var(--timely-border);
  border-radius: var(--timely-radius);
  padding: 0.9rem 0.95rem;
  background:
    var(--timely-warm-wash),
    var(--timely-elevated);
  background-blend-mode: soft-light, normal;
  min-width: 0;
  border-left: none;
  box-shadow: none;
}
.app-kpi--success { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--timely-success) 25%, transparent); }
.app-kpi--warning { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--timely-warning) 25%, transparent); }
.app-kpi--accent { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--timely-accent) 28%, transparent); }
.app-kpi--info { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--timely-teal) 28%, transparent); }
.app-kpi__label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--timely-secondary);
  margin: 0 0 0.45rem;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}
.app-kpi__value {
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--stopwatch-ink, var(--text, #132238));
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: normal;
  overflow-wrap: normal;
  line-height: 1.15;
}
.app-kpi__hint {
  margin-top: 0.35rem;
  font-size: 0.75rem;
  color: var(--timely-secondary);
}

.app-dash-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 1rem;
}
.app-dash-panel {
  border: 1px solid var(--timely-border);
  border-radius: var(--timely-radius);
  background:
    var(--timely-warm-wash),
    var(--timely-elevated);
  background-blend-mode: soft-light, normal;
  overflow: hidden;
}
.app-dash-panel__title {
  margin: 0;
  padding: 0.85rem 1rem 0.55rem;
  font-size: 0.95rem;
  font-weight: 600;
  border-bottom: none;
  background: transparent;
  letter-spacing: -0.02em;
}
.app-dash-panel__body { padding: 0.25rem 1rem 1rem; }
.app-stack-gap { display: flex; flex-direction: column; gap: var(--space-2, 1rem); align-items: flex-start; }
.app-muted { color: var(--text-muted, #666); font-size: var(--font-size-sm, 0.875rem); margin: 0; }
.app-org-list { list-style: none; padding: 0; margin: 0.5rem 0 0; display: flex; flex-direction: column; gap: 0.5rem; }

.app-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm, 0.875rem);
}
.app-table th,
.app-table td {
  text-align: left;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--border, #ddd);
}
.app-table th {
  font-size: var(--font-size-xs, 0.75rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #666);
}
.app-badge {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--brand-blue, #0047ab) 12%, transparent);
  color: var(--brand-blue, #0047ab);
  text-transform: lowercase;
}
.app-badge--owner {
  background: color-mix(in srgb, var(--brand-red, #e20613) 12%, transparent);
  color: var(--brand-red, #e20613);
}
.app-badge--success {
  background: color-mix(in srgb, var(--success, #059669) 12%, transparent);
  color: var(--success, #059669);
}
.app-badge--danger {
  background: color-mix(in srgb, var(--danger, #dc2626) 12%, transparent);
  color: var(--danger, #dc2626);
}

.tracking-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 1rem);
}
.tracking-form .sg-field {
  margin-bottom: 0;
}
.tracking-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2, 1rem);
}
.tracking-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1, 0.5rem);
  align-items: center;
}
.tracking-table__actions {
  text-align: right;
  white-space: nowrap;
}
.voice-widget__status {
  float: right;
}
.voice-widget__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 13rem;
  gap: var(--space-2, 1rem);
}
.voice-widget__side {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 1rem);
}
.voice-widget__meta {
  border: 1px solid var(--border, #ddd);
  border-radius: var(--radius-sm, 4px);
  padding: var(--space-1, 0.5rem);
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--text-muted, #666);
}
.voice-widget__meta div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-1, 0.5rem);
}
.voice-widget__meta strong {
  color: var(--text, #111);
  text-transform: uppercase;
}
.voice-widget__error {
  margin-top: var(--space-2, 1rem);
}
.voice-widget__script {
  margin-top: var(--space-2, 1rem);
  border-top: 1px solid var(--border, #ddd);
  padding-top: var(--space-2, 1rem);
}
.voice-widget__script summary {
  cursor: pointer;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 600;
}
.voice-widget__script pre {
  max-height: 16rem;
  overflow: auto;
  white-space: pre-wrap;
  margin: var(--space-1, 0.5rem) 0 0;
  padding: var(--space-2, 1rem);
  border: 1px solid var(--border, #ddd);
  border-radius: var(--radius-sm, 4px);
  background: var(--surface-alt, #f6f6f6);
  font-size: var(--font-size-xs, 0.75rem);
}

@media (max-width: 800px) {
  .app-shell { grid-template-columns: 1fr; }
  .app-shell__sidebar {
    border-right: none;
    border-bottom: 1px solid var(--timely-border, var(--border, #e5e5e5));
  }
  .app-dash-grid { grid-template-columns: 1fr; }
  .tracking-form__grid { grid-template-columns: 1fr; }
  .tracking-table__actions {
    text-align: left;
    white-space: normal;
  }
  .voice-widget__grid {
    grid-template-columns: 1fr;
  }
  body.app-body .app-shell {
    min-height: auto;
  }
  .timely-page-header__title {
    font-size: 1.45rem;
  }
}

/* ── Post-login dashboard (dense action strip under page header) ── */
.app-dash-welcome {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  margin-bottom: 0.25rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--timely-border, var(--border, #e5e5e5));
  border-radius: var(--timely-radius, 8px);
  background:
    var(--timely-warm-wash, transparent),
    var(--timely-elevated, var(--surface, #fff));
  background-blend-mode: soft-light, normal;
}
.app-dash-welcome__kicker {
  margin: 0 0 0.15rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--timely-accent, var(--stopwatch-accent, #d61f73));
}
.app-dash-welcome__name {
  margin: 0 0 0.15rem;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--stopwatch-ink, var(--text, #132238));
}
.app-dash-welcome__email {
  margin: 0;
  font-size: 0.8rem;
}
.app-dash-welcome__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  align-items: center;
}
.app-dash-grid--home {
  grid-template-columns: 1.3fr 1fr;
}
.app-workspace-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-2, 1rem);
  margin-bottom: var(--space-3, 1.5rem);
}
.app-workspace-card {
  border: 1px solid var(--timely-border, var(--border, #e5e5e5));
  border-radius: var(--timely-radius, 8px);
  border-left: none;
  padding: 0.95rem 1rem;
  background:
    var(--timely-warm-wash, transparent),
    var(--timely-elevated, var(--surface, #fff));
  background-blend-mode: soft-light, normal;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--timely-accent, #d61f73) 12%, transparent);
}
.app-workspace-card .btn {
  margin-top: 0.35rem;
  align-self: stretch;
  text-align: center;
}
.app-workspace-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}
.app-workspace-card__name {
  font-weight: 700;
  font-size: var(--font-size-md, 1rem);
  color: var(--text, #111);
}
.app-workspace-card__slug {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--text-muted, #666);
  margin-bottom: 0.25rem;
}
.app-create-org {
  margin-top: var(--space-3, 1.5rem);
  padding-top: var(--space-3, 1.5rem);
  border-top: 1px dashed var(--border, #ddd);
  max-width: 22rem;
}
.app-create-org__title {
  margin: 0 0 var(--space-2, 1rem);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 600;
}
.app-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-3, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.app-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--text-secondary, #444);
}
.app-checklist__item--done {
  color: var(--text, #111);
}
.app-checklist__item--done .app-checklist__mark {
  color: var(--success, #059669);
  background: color-mix(in srgb, var(--success, #059669) 14%, transparent);
}
.app-checklist__mark {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted, #999);
  background: var(--surface-alt, #f3f3f3);
}
.app-checklist__link {
  margin-left: 0.35rem;
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--brand-red, #e20613);
}
.app-dash-hint {
  padding: var(--space-2, 1rem);
  border-radius: var(--radius-md, 2px);
  background: color-mix(in srgb, var(--brand-red, #e20613) 6%, var(--surface, #fff));
  border: 1px solid color-mix(in srgb, var(--brand-red, #e20613) 22%, var(--border, #ddd));
}
.app-dash-hint strong {
  display: block;
  font-size: 0.65rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.35rem;
  color: var(--brand-red, #e20613);
}
.app-flash {
  margin: 0 0 var(--space-3, 1.5rem);
  padding: var(--space-2, 1rem) var(--space-3, 1.5rem);
  border-radius: var(--radius-md, 8px);
  border: 1px solid color-mix(in srgb, var(--success, #059669) 35%, var(--border, #ddd));
  background: color-mix(in srgb, var(--success, #059669) 10%, var(--surface, #fff));
  font-size: var(--font-size-sm, 0.875rem);
}
.app-overview-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-2, 1rem);
}
.app-overview-card {
  border: 1px solid var(--border, #eee);
  border-radius: var(--radius-sm, 4px);
  padding: var(--space-2, 1rem);
  background: var(--surface-alt, #f8f8f8);
}
.app-overview-card__title {
  font-weight: 600;
  font-size: var(--font-size-sm, 0.875rem);
  margin-bottom: 0.35rem;
}
@media (max-width: 900px) {
  .app-dash-grid--home { grid-template-columns: 1fr; }
}

/* ── Marketing / landing surface ─────────────────────────────────
   The landing page uses the active design-system theme's tokens; these rules
   only add page rhythm (hero band, section spacing, footer) that the style
   guide itself does not define. */

/* Hero: only the marketing landing page — not login/signup/etc. */
main .content.landing > h1.sg-page-title {
  font-size: clamp(2.25rem, 5vw + 0.5rem, 4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: clamp(2.5rem, 6vw, 5rem) 0 var(--space-3, 1.25rem);
  max-width: 20ch;
}
main .content.landing > p.sg-page-intro {
  font-size: clamp(1.05rem, 0.6vw + 1rem, 1.35rem);
  line-height: 1.6;
  max-width: 62ch;
  color: var(--text-muted, #444);
}
main .content.landing > .sg-page-cta { margin: var(--space-4, 2rem) 0 clamp(3rem, 7vw, 5.5rem); }

/* Section rhythm — each h2 starts a new band (landing only). */
main .content.landing > h2 {
  font-size: clamp(1.5rem, 2vw + 0.75rem, 2.25rem);
  letter-spacing: -0.01em;
  margin: clamp(2.75rem, 6vw, 4.5rem) 0 var(--space-3, 1.25rem);
  padding-top: var(--space-3, 1.25rem);
  border-top: 1px solid var(--border, #e5e5e5);
}
main .content.landing > h2:first-of-type { border-top: 0; }

/* Marketing footer (landing / auth) */
.sg-footer {
  border-top: 1px solid var(--border, #e5e5e5);
  margin-top: clamp(3rem, 8vw, 6rem);
  padding: var(--space-4, 2rem) 0;
  background: var(--surface-alt, #fafafa);
}
.sg-footer__inner {
  max-width: var(--content-max, 1100px);
  margin: 0 auto;
  padding: 0 var(--space-3, 1.5rem);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 1rem);
  justify-content: space-between;
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--text-muted, #555);
}

/* App status bar — dense operational chrome, not marketing copy */
.sg-footer--app {
  margin-top: 0;
  padding: 0;
  height: 32px;
  background: var(--surface-alt, #f4f4f4);
  border-top: 1px solid var(--border, #e5e5e5);
  flex-shrink: 0;
}
.sg-footer--app .sg-footer__inner {
  max-width: none;
  height: 100%;
  align-items: center;
  font-size: 0.7rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  letter-spacing: 0.02em;
  color: var(--text-muted, #666);
}
.sg-footer__meta {
  opacity: 0.85;
}

/* Dark mode surfaces for app chrome */
html.dark body.app-body {
  background: var(--surface, #0b1117);
}
html.dark .app-shell__sidebar {
  background: color-mix(in srgb, var(--surface, #141b22) 96%, var(--timely-accent) 4%);
  border-right-color: var(--border, #2a333d);
}
html.dark .app-shell__main {
  background: transparent;
}
html.dark .app-kpi,
html.dark .app-dash-panel,
html.dark .app-workspace-card,
html.dark .app-dash-welcome,
html.dark .timely-card {
  background: var(--surface, #141b22);
  border-color: var(--border, #2a333d);
}
html.dark .app-dash-panel__title {
  background: transparent;
}
html.dark .sg-footer--app {
  background: var(--surface-alt, #1d252e);
  border-top-color: var(--border, #2a333d);
}
html.dark .sg-navbar--app {
  background: color-mix(in srgb, var(--surface, #141b22) 92%, transparent);
  border-bottom-color: var(--border, #2a333d);
}
html.dark .app-checklist__mark {
  background: var(--surface-alt, #1d252e);
}

/* ── Intermediate auth pages (SSO callback, web-session handoff) ── */
.auth-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--surface, #0a0a0a);
  color: var(--text, #f5f5f5);
}
.auth-topbar {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-3, 1.5rem);
  background: var(--surface-inverse, #000);
  color: var(--text-inverse, #fff);
  border-bottom: 1px solid color-mix(in srgb, #fff 12%, transparent);
}
.auth-topbar__brand {
  font-weight: 700;
  letter-spacing: -0.04em;
  text-decoration: none;
  color: inherit;
}
.auth-topbar__link {
  font-size: var(--font-size-sm, 0.875rem);
  color: color-mix(in srgb, #fff 80%, transparent);
  text-decoration: none;
}
.auth-topbar__link:hover { color: #fff; }
.auth-main {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4, 2rem) var(--space-3, 1.5rem);
}
.auth-card {
  width: min(28rem, 100%);
  padding: var(--space-4, 2rem);
  border: 1px solid color-mix(in srgb, #fff 12%, transparent);
  border-radius: var(--radius-md, 2px);
  border-left: 3px solid var(--brand-red, #e20613);
  background: color-mix(in srgb, #fff 4%, #111);
}
.auth-card__title {
  margin: 0 0 var(--space-2, 1rem);
  font-size: clamp(1.35rem, 2vw + 0.75rem, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.03em;
}
.auth-card__body {
  margin: 0 0 var(--space-3, 1.5rem);
  color: color-mix(in srgb, #fff 70%, transparent);
  font-size: var(--font-size-sm, 0.875rem);
  line-height: 1.5;
}
.auth-card__error {
  margin: 0 0 var(--space-3, 1.5rem);
  color: var(--danger, #f87171);
  font-size: var(--font-size-sm, 0.875rem);
  line-height: 1.5;
}
.auth-card__actions {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.auth-footer {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  color: color-mix(in srgb, #fff 45%, transparent);
  border-top: 1px solid color-mix(in srgb, #fff 8%, transparent);
}

/* ── Tracking page: fluid reflow ──
   The dashboard used to stack every panel in one column, so a maximized window
   showed a narrow ribbon of content with dead space to the right. These are
   structural rules only — colour comes from the active theme's vars. */
.tracking-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: var(--space-3, 1.5rem);
  align-items: start;
  margin-top: var(--space-3, 1.5rem);
}
/* The voice widget carries its own two-column layout, so it takes the whole
   row rather than being squeezed into one track. */
.tracking-grid > .voice-widget {
  grid-column: 1 / -1;
}

/* Wide tables scroll inside their panel instead of widening the page. */
.app-table-scroll {
  overflow-x: auto;
  max-width: 100%;
}

/* ── Report range presets ── */
.report-presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1, 0.5rem);
  margin-bottom: var(--space-2, 1rem);
}

.report-presets__label {
  font-size: 0.85em;
  margin-right: var(--space-half, 0.25rem);
}

/* ── Report breakdown drill-down ── */
/* The disclosure lives inside the cell rather than in a column of its own, so
   an expanded child row still lines up under its parent's label. */
.app-drill-toggle {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}

.app-drill-toggle:hover:not(:disabled) { text-decoration: underline; }
.app-drill-toggle:disabled { cursor: default; opacity: 0.6; }

.app-drill-toggle > span:first-child {
  color: var(--brand-red, #e20613);
  font-size: 0.8em;
  line-height: 1;
}

/* ── Date range navigation ── */
.date-range {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-2, 1rem);
  margin-bottom: var(--space-3, 1.5rem);
  padding: var(--space-2, 1rem);
  border: 1px solid var(--border, #ddd);
  border-radius: var(--radius-md, 8px);
  background: var(--surface-alt, #f6f6f6);
}
.date-range__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1, 0.5rem);
}
.date-range__current {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0 var(--space-1, 0.5rem);
}
.date-range__kicker {
  font-size: 0.65rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted, #666);
}
.date-range__label {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text, #111);
}
.date-range__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-2, 1rem);
}
.date-range__form .sg-field {
  margin-bottom: 0;
  min-width: 0;
}
.date-range__actions {
  display: flex;
  gap: var(--space-1, 0.5rem);
}

/* ── Expandable error / review badge ── */
.sg-error-badge {
  margin: 0 0 var(--space-2, 1rem);
  border: 1px solid var(--border, #ddd);
  border-radius: var(--radius-sm, 4px);
  overflow: hidden;
  font-size: var(--font-size-sm, 0.875rem);
}
.sg-error-badge--error {
  border-color: color-mix(in srgb, var(--danger, #dc2626) 45%, transparent);
  background: color-mix(in srgb, var(--danger, #dc2626) 8%, transparent);
}
.sg-error-badge--review {
  margin: 0;
  border-color: color-mix(in srgb, var(--warning, #d97706) 45%, transparent);
  background: color-mix(in srgb, var(--warning, #d97706) 8%, transparent);
}
.sg-error-badge__summary {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.sg-error-badge__summary:hover {
  background: color-mix(in srgb, currentColor 6%, transparent);
}
.sg-error-badge__chevron {
  flex: 0 0 auto;
  font-size: 0.7rem;
  line-height: 1;
}
.sg-error-badge__label {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
}
.sg-error-badge--error .sg-error-badge__label { color: var(--danger, #dc2626); }
.sg-error-badge--review .sg-error-badge__label { color: var(--warning, #d97706); }
.sg-error-badge__hint {
  flex: 0 0 auto;
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--text-muted, #666);
}
.sg-error-badge__detail {
  padding: 0.65rem 0.75rem 0.75rem;
  border-top: 1px solid var(--border, #ddd);
  background: var(--surface, #fff);
}
.sg-error-badge__message {
  margin: 0 0 var(--space-1, 0.5rem);
  line-height: 1.5;
}
.sg-error-badge__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0.35rem var(--space-2, 1rem);
  margin: 0;
}
.sg-error-badge__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-width: 0;
}
.sg-error-badge__row dt {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #666);
}
.sg-error-badge__row dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: var(--font-size-xs, 0.75rem);
}
.sg-error-badge__flags {
  list-style: none;
  margin: 0 0 var(--space-2, 1rem);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.sg-review-flag {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.35rem 0.5rem;
  border-left: 3px solid var(--warning, #d97706);
  background: var(--surface-alt, #f6f6f6);
  border-radius: var(--radius-sm, 4px);
}
.sg-review-flag__code {
  font-weight: 600;
}
.sg-review-flag__detail {
  min-width: 0;
  overflow-wrap: anywhere;
}
.sg-review-flag__meta {
  margin-left: auto;
  font-size: var(--font-size-xs, 0.75rem);
  font-family: var(--font-mono, ui-monospace, monospace);
  color: var(--text-muted, #666);
  white-space: nowrap;
}

/* Intermediate reflow: these grids get cramped well before the 800px sidebar
   collapse, because the sidebar eats 240px of the viewport. */
@media (max-width: 1000px) {
  .date-range {
    flex-direction: column;
    align-items: stretch;
  }
  .date-range__form {
    justify-content: flex-start;
  }
  .tracking-form__grid {
    grid-template-columns: 1fr;
  }
  .sg-review-flag__meta {
    margin-left: 0;
  }
}

/* Very wide screens: keep the sidebar proportional rather than a thin strip. */
@media (min-width: 1600px) {
  .app-shell {
    grid-template-columns: 280px 1fr;
  }
}

/* ── Charts ───────────────────────────────────────────────────
   Marks are boxes rather than inline SVG on purpose: Hologram's client
   renderer creates every element through snabbdom without a namespace, so an
   <svg> subtree survives the server's first paint and then vanishes on the
   first client patch. Geometry (percentages, gradient stops) is computed
   server-side in TimelyWeb.Charts; this file only says what the boxes look
   like.

   The eight categorical slots are a validated palette — checked for the
   lightness band, chroma floor, CVD separation and normal-vision separation
   against this app's own lightest light surface (#ffffff) and darkest dark
   surface (#0a0a0f). Slot ORDER is the colourblind-safety mechanism, not a
   matter of taste: do not reorder or extend these without re-validating. A
   ninth series folds into --chart-other instead of borrowing a slot.

   Slots are deliberately theme-independent. A theme changes the surface and
   the ink the charts sit on (below, via --surface / --text-muted / --border),
   but re-tinting the series per theme would break the validated separations
   and would repaint a reader's mental colour key on every theme switch. */
:root {
  --chart-series-1: #2a78d6;
  --chart-series-2: #eb6834;
  --chart-series-3: #1baf7a;
  --chart-series-4: #eda100;
  --chart-series-5: #e87ba4;
  --chart-series-6: #008300;
  --chart-series-7: #4a3aa7;
  --chart-series-8: #e34948;
  --chart-other: #898781;
  /* The separator between touching marks is the surface showing through. */
  --chart-gap: var(--surface, #ffffff);
  --chart-grid: var(--border, #e1e0d9);
}

/* The same eight hues stepped for a dark surface, not a second palette. */
html.dark {
  --chart-series-1: #3987e5;
  --chart-series-2: #d95926;
  --chart-series-3: #199e70;
  --chart-series-4: #c98500;
  --chart-series-5: #d55181;
  --chart-series-6: #008300;
  --chart-series-7: #9085e9;
  --chart-series-8: #e66767;
  --chart-other: #898781;
}

.app-chart { margin: 0; min-width: 0; }
.app-chart + .app-chart { margin-top: var(--space-3, 1.5rem); }
.app-chart__title {
  font-size: 0.65rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-weight: 600;
  color: var(--text-muted, #666);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-2, 1rem);
}
.app-chart__note { margin-bottom: var(--space-2, 1rem); }
.app-chart__empty { margin: var(--space-2, 1rem) 0; }

/* Two charts side by side, collapsing to one column well before the sidebar
   does — the sidebar has already taken 240px out of the viewport. */
.app-chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--space-3, 1.5rem);
}

.app-chart__body--split {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3, 1.5rem);
  align-items: center;
}

/* Donut: one conic-gradient, masked into a ring. The 2px separators are
   gradient stops in the surface colour rather than strokes around each wedge —
   a stroke would add ink that is not data. */
.app-chart__donut-wrap {
  position: relative;
  width: 200px;
  height: 200px;
  flex: 0 0 auto;
}
.app-chart__donut {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -webkit-mask: radial-gradient(circle closest-side at center, transparent 0 64%, #000 64.5%);
  mask: radial-gradient(circle closest-side at center, transparent 0 64%, #000 64.5%);
}
.app-chart__donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  pointer-events: none;
  text-align: center;
}
/* Proportional figures: tabular-nums gives every digit the width of a zero,
   which reads loose at display sizes. */
.app-chart__figure {
  font-size: var(--font-size-lg, 1.35rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text, #111);
  line-height: 1.1;
}
.app-chart__figure-label {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--text-muted, #666);
}

/* Legend text wears text tokens, never the series colour — a light hue is
   illegible as text. The swatch beside it carries identity. */
.app-chart__legend {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  flex: 1 1 220px;
  min-width: 0;
  font-size: var(--font-size-sm, 0.875rem);
}
.app-chart__legend--inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-2, 1rem);
  margin-bottom: var(--space-2, 1rem);
}
.app-chart__legend-item {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
}
.app-chart__swatch {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  align-self: center;
}
.app-chart__legend-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text, #111);
}
.app-chart__legend-value {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  color: var(--text, #111);
}
.app-chart__legend-share {
  flex: 0 0 auto;
  min-width: 3.2em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted, #666);
}

/* Horizontal bars. Values live in a fixed right column, so a short bar's
   label can never collide with a long bar's or be clipped by its own mark. */
.app-chart__bars { display: flex; flex-direction: column; gap: 0.5rem; }
.app-chart-bar {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2, 1rem);
  font-size: var(--font-size-sm, 0.875rem);
}
.app-chart-bar__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text, #111);
}
.app-chart-bar__track {
  position: relative;
  display: block;
  height: 18px;
  min-width: 0;
}
/* The wash is elapsed; the solid run inside it is billable. Both grow from the
   same baseline, so the bar is a meter rather than two bars. */
.app-chart-bar__elapsed,
.app-chart-bar__billable {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 0;
}
.app-chart-bar__elapsed { opacity: 0.24; border-radius: 0 4px 4px 0; }
.app-chart-bar__billable--full { border-radius: 0 4px 4px 0; }
.app-chart-bar__value {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text, #111);
  white-space: nowrap;
  line-height: 1.25;
}
.app-chart-bar__sub {
  display: block;
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--text-muted, #666);
}

/* Stacked columns over time. The 2px surface gap between the two segments is
   the flex gap, so it appears only where both are present — an all-billable
   day gets no stray notch. */
.app-chart__cols { display: flex; gap: 0.5rem; height: 200px; }
.app-chart__cols-axis {
  position: relative;
  flex: 0 0 auto;
  width: 2.6rem;
  font-size: var(--font-size-xs, 0.75rem);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted, #666);
}
.app-chart__tick {
  position: absolute;
  right: 0;
  transform: translateY(50%);
  line-height: 1;
}
.app-chart__plot {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  gap: 2px;
}
/* Solid hairlines, one step off the surface. Dashes read as "threshold". */
.app-chart__gridline {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--chart-grid, #e1e0d9);
  pointer-events: none;
}
.app-chart__col {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
/* Capped at 24px rather than filling the band: the leftover is deliberate air. */
.app-chart__col-stack {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  gap: 2px;
  width: 100%;
  max-width: 24px;
  height: 100%;
}
.app-chart__seg { display: block; width: 100%; }
.app-chart__seg--billable { background: var(--chart-series-1); }
.app-chart__seg--non-billable { background: var(--chart-series-2); }
.app-chart__col-stack > :last-child { border-radius: 4px 4px 0 0; }
.app-chart__x-labels {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0.5rem 0 0 3.1rem;
  font-size: var(--font-size-xs, 0.75rem);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted, #666);
}
.app-chart__x-label { white-space: nowrap; }

@media (max-width: 1000px) {
  .app-chart-bar { grid-template-columns: minmax(0, 7rem) minmax(0, 1fr) auto; }
}

/* ── Sidebar icon system + macOS-parity nav ───────────────────────
   Links become flex rows holding a 1.1rem icon (CSS mask data-URI) + label.
   mask + background:currentColor lets each icon inherit the link color, so
   hover/active recolor both the text and the glyph together. SVG data-URIs
   are written once as custom properties and referenced by -webkit-mask/mask. */
.app-shell__nav {
  --ic-today: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='7' height='7' rx='1'/><rect x='14' y='3' width='7' height='7' rx='1'/><rect x='14' y='14' width='7' height='7' rx='1'/><rect x='3' y='14' width='7' height='7' rx='1'/></svg>");
  --ic-week: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='12' width='5' height='9' rx='1'/><rect x='10' y='7' width='5' height='14' rx='1'/><rect x='17' y='4' width='5' height='17' rx='1'/></svg>");
  --ic-month: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><line x1='3' y1='10' x2='21' y2='10'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='16' y1='2' x2='16' y2='6'/></svg>");
  --ic-reports: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 3v18h18'/><polyline points='7,14 11,10 16,14 21,8'/></svg>");
  --ic-activity: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='22,12 18,12 15,21 9,3 6,12 2,12'/></svg>");
  --ic-subagents: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8' r='3.5'/><circle cx='17' cy='9' r='2.5'/><path d='M2.5 20v-1a5 5 0 0 1 5-5h3a5 5 0 0 1 5 5v1'/></svg>");
  --ic-music: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 18V5l12-2v13'/><circle cx='6' cy='18' r='3'/><circle cx='18' cy='16' r='3'/></svg>");
  --ic-work: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='7' width='20' height='14' rx='2'/><path d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/></svg>");
  --ic-clients: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2z'/></svg>");
  --ic-settings: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='4' y1='21' x2='4' y2='14'/><line x1='4' y1='10' x2='4' y2='3'/><line x1='12' y1='21' x2='12' y2='12'/><line x1='12' y1='8' x2='12' y2='3'/><line x1='20' y1='21' x2='20' y2='16'/><line x1='20' y1='12' x2='20' y2='3'/><line x1='2' y1='14' x2='6' y2='14'/><line x1='10' y1='8' x2='14' y2='8'/><line x1='18' y1='16' x2='22' y2='16'/></svg>");
  --ic-overview: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12l9-9 9 9'/><path d='M5 10v10h14V10'/></svg>");
}
.app-shell__link {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.app-shell__icon {
  width: 1.1rem;
  height: 1.1rem;
  flex: 0 0 auto;
  background: currentColor;
}
.app-shell__icon--today     { -webkit-mask: var(--ic-today)     center/contain no-repeat;          mask: var(--ic-today)     center/contain no-repeat; }
.app-shell__icon--week      { -webkit-mask: var(--ic-week)      center/contain no-repeat;          mask: var(--ic-week)      center/contain no-repeat; }
.app-shell__icon--month     { -webkit-mask: var(--ic-month)     center/contain no-repeat;          mask: var(--ic-month)     center/contain no-repeat; }
.app-shell__icon--reports   { -webkit-mask: var(--ic-reports)   center/contain no-repeat;          mask: var(--ic-reports)   center/contain no-repeat; }
.app-shell__icon--activity  { -webkit-mask: var(--ic-activity)  center/contain no-repeat;          mask: var(--ic-activity)  center/contain no-repeat; }
.app-shell__icon--subagents { -webkit-mask: var(--ic-subagents) center/contain no-repeat;          mask: var(--ic-subagents) center/contain no-repeat; }
.app-shell__icon--music     { -webkit-mask: var(--ic-music)     center/contain no-repeat;          mask: var(--ic-music)     center/contain no-repeat; }
.app-shell__icon--work      { -webkit-mask: var(--ic-work)      center/contain no-repeat;          mask: var(--ic-work)      center/contain no-repeat; }
.app-shell__icon--clients   { -webkit-mask: var(--ic-clients)   center/contain no-repeat;          mask: var(--ic-clients)   center/contain no-repeat; }
.app-shell__icon--settings  { -webkit-mask: var(--ic-settings)  center/contain no-repeat;          mask: var(--ic-settings)  center/contain no-repeat; }
.app-shell__icon--overview  { -webkit-mask: var(--ic-overview)  center/contain no-repeat;          mask: var(--ic-overview)  center/contain no-repeat; }
@media (prefers-reduced-motion: no-preference) {
  .app-shell__link { transition: background 0.15s ease, color 0.15s ease; }
}

/* Disabled "coming soon" rows — same shape as links, not navigable. */
.app-shell__link--soon {
  cursor: not-allowed;
  opacity: 0.55;
}
.app-shell__soon {
  margin-left: auto;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.05rem 0.32rem;
  border-radius: 999px;
  color: var(--text-muted, #74808d);
  background: color-mix(in srgb, var(--text-muted, #74808d) 16%, transparent);
}

/* ── Week / Month window views ─────────────────────────────────── */
.app-window-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--space-2, 1rem);
}
.app-window-nav__label {
  margin: 0 auto;
  font-size: 0.95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text, var(--stopwatch-ink));
}
.app-window-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-variant-numeric: tabular-nums;
}
.app-window-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 0.2rem;
  border-bottom: 1px solid var(--border, var(--theme-border));
}
.app-window-list__label { font-weight: 500; color: var(--text, var(--stopwatch-ink)); }
.app-window-list__elapsed { font-weight: 600; }
.app-window-list__billable { font-size: 0.78rem; color: var(--text-muted, #74808d); }


/* ── Time Box page ────────────────────────────────────────────
   Day-plan timeline + boundary modal. Colors ride the theme
   tokens (light-dark()), so both color schemes are covered.
   ──────────────────────────────────────────────────────────── */
.app-shell__icon--timebox {
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><polyline points='12 7 12 12 15.5 13.5'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><polyline points='12 7 12 12 15.5 13.5'/></svg>") center/contain no-repeat;
}

.tb-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-3, 1rem);
}

@media (max-width: 900px) {
  .tb-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.tb-timeline {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.tb-block {
  display: flex;
  gap: 0.9rem;
  align-items: stretch;
  padding: 0.65rem 0.85rem;
  border: 1px solid light-dark(rgb(32 62 92 / 0.18), rgb(202 219 255 / 0.20));
  border-left: 3px solid light-dark(rgb(32 62 92 / 0.35), rgb(202 219 255 / 0.40));
  border-radius: 10px;
  background: light-dark(rgb(255 255 255 / 0.6), rgb(19 32 56 / 0.45));
}

.tb-block--now,
.tb-block--active {
  border-left-color: var(--stopwatch-teal, #0b7373);
  background: light-dark(rgb(11 115 115 / 0.08), rgb(61 214 208 / 0.10));
}

.tb-block--done {
  opacity: 0.62;
  border-left-color: light-dark(#7a8a99, #64798c);
}

.tb-block--skipped {
  opacity: 0.55;
  border-left-color: var(--stopwatch-lemon, #c98a00);
}

.tb-block__time {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  color: var(--stopwatch-muted, #465b70);
  font-size: 0.82rem;
  padding-top: 0.1rem;
}

.tb-block__time-sep {
  margin: 0 0.25rem;
  opacity: 0.6;
}

.tb-block__body {
  flex: 1 1 auto;
  min-width: 0;
}

.tb-block__title {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.tb-block__badge {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: light-dark(rgb(32 62 92 / 0.10), rgb(202 219 255 / 0.14));
  color: var(--stopwatch-muted, #465b70);
}

.tb-block__badge--active {
  background: light-dark(rgb(11 115 115 / 0.16), rgb(61 214 208 / 0.20));
  color: var(--stopwatch-teal, #0b7373);
}

.tb-block__badge--done {
  background: light-dark(rgb(11 115 115 / 0.10), rgb(61 214 208 / 0.12));
  color: var(--stopwatch-muted, #b9c6d8);
}

.tb-block__badge--skipped {
  background: light-dark(rgb(201 138 0 / 0.14), rgb(255 224 138 / 0.16));
  color: var(--stopwatch-lemon, #c98a00);
}

.tb-block__actions {
  margin-top: 0.4rem;
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

/* Compact Time Box blocks surfaced on the week / month / home day lists.
   Clicking one (or the day's "Edit in Time Box" button) deep-links to
   /app/:org_id/time_box?day=… . Same theme tokens as .tb-block above. */
.app-window-list--timebox li {
  display: block;
}

.app-window-list__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 0.75rem;
}

.tb-miniblocks {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.45rem;
}

.tb-miniblock {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.35rem 0.6rem;
  border: 1px solid light-dark(rgb(32 62 92 / 0.18), rgb(202 219 255 / 0.20));
  border-left: 3px solid light-dark(rgb(32 62 92 / 0.35), rgb(202 219 255 / 0.40));
  border-radius: 8px;
  background: light-dark(rgb(255 255 255 / 0.6), rgb(19 32 56 / 0.45));
  cursor: pointer;
  font-size: 0.85rem;
}

.tb-miniblock:hover {
  border-color: light-dark(rgb(32 62 92 / 0.4), rgb(202 219 255 / 0.45));
}

.tb-miniblock--current,
.tb-miniblock--active {
  border-left-color: var(--stopwatch-teal, #0b7373);
  background: light-dark(rgb(11 115 115 / 0.08), rgb(61 214 208 / 0.10));
}

.tb-miniblock--upcoming {
  border-left-color: light-dark(#5b8bd0, #7fa7e8);
}

.tb-miniblock--done {
  opacity: 0.62;
  border-left-color: light-dark(#7a8a99, #64798c);
}

.tb-miniblock--skipped {
  opacity: 0.55;
  border-left-color: var(--stopwatch-lemon, #c98a00);
}

.tb-miniblock__time {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  color: var(--stopwatch-muted, #465b70);
  font-size: 0.78rem;
}

.tb-miniblock__title {
  font-weight: 600;
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 700px) {
  .app-window-list__row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.tb-suggestions {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.tb-suggestion {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  font-size: 0.88rem;
}

.tb-suggestion__time {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  color: var(--stopwatch-muted, #465b70);
  font-size: 0.8rem;
}

.tb-actions {
  display: flex;
  gap: 0.5rem;
}

.tb-error {
  color: var(--stopwatch-coral, #d81b60);
  margin: 0.4rem 0;
  font-size: 0.9rem;
}

.tb-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
}

.tb-modal {
  background: var(--stopwatch-panel-strong, light-dark(#ffffff, #101b2f));
  color: var(--stopwatch-ink, light-dark(#132238, #e8edf3));
  border: 1px solid light-dark(rgb(32 62 92 / 0.18), rgb(202 219 255 / 0.20));
  border-radius: 14px;
  padding: 1.4rem 1.6rem;
  max-width: 26rem;
  width: calc(100% - 2rem);
  box-shadow: 0 18px 48px rgb(0 0 0 / 0.35);
}

.tb-modal__title {
  margin: 0 0 0.35rem;
  font-size: 1.1rem;
}

.tb-modal__actions {
  margin-top: 1rem;
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/* ── Time Box calendar grid ───────────────────────────────────
   Day/week grid. Slot height (14px) is load-bearing: drag
   selection converts page coordinates to slot indexes with it
   (@slot_px in time_box_page.ex) — change both together.
   ──────────────────────────────────────────────────────────── */
.tb-cal-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.tb-cal-nav {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.tb-cal-nav__label {
  margin-left: 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--stopwatch-muted, #465b70);
}

.tb-cal {
  overflow: auto;
  max-height: 34rem;
  border: 1px solid light-dark(rgb(32 62 92 / 0.18), rgb(202 219 255 / 0.20));
  border-radius: 10px;
  background: light-dark(rgb(255 255 255 / 0.6), rgb(19 32 56 / 0.45));
  user-select: none;
}

.tb-cal__inner {
  display: flex;
  align-items: flex-start;
}

.tb-cal__hours {
  flex: 0 0 auto;
  width: 3rem;
  padding-top: 1.75rem; /* clears the sticky day head */
}

.tb-cal__hour-label {
  height: 56px; /* 4 slots */
  box-sizing: border-box;
  padding-right: 0.4rem;
  text-align: right;
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  color: var(--stopwatch-muted, #465b70);
}

.tb-cal__cols {
  flex: 1 1 auto;
  display: flex;
  min-width: 0;
}

.tb-cal__colwrap {
  flex: 1 1 0;
  min-width: 7rem; /* week view scrolls horizontally inside .tb-cal when narrow */
  display: flex;
  flex-direction: column;
}

.tb-cal__dayhead {
  position: sticky;
  top: 0;
  z-index: 4;
  height: 1.75rem;
  box-sizing: border-box;
  padding: 0.25rem 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  background: light-dark(rgb(247 250 252 / 0.95), rgb(16 27 47 / 0.95));
  border-bottom: 1px solid light-dark(rgb(32 62 92 / 0.12), rgb(202 219 255 / 0.14));
}

.tb-cal__dayhead--today {
  color: var(--stopwatch-teal, #0b7373);
}

.tb-cal__col {
  position: relative;
  height: 1344px; /* 96 slots x 14px */
}

.tb-cal-slot {
  height: 14px;
  box-sizing: border-box;
}

.tb-cal-slot--hour {
  border-top: 1px solid light-dark(rgb(32 62 92 / 0.10), rgb(202 219 255 / 0.12));
}

.tb-cal-slot:hover {
  background: light-dark(rgb(32 62 92 / 0.05), rgb(202 219 255 / 0.08));
}

.tb-cal-slot--sel {
  background: light-dark(rgb(11 115 115 / 0.20), rgb(61 214 208 / 0.24));
}

.tb-cal-block {
  position: absolute;
  /* Overlap lanes set left/width inline (percent of the column); the old
     2px inset is dropped so the lane math owns the geometry. */
  left: 0;
  width: 100%;
  z-index: 2;
  overflow: hidden;
  padding: 0.15rem 0.35rem;
  border: 1px solid light-dark(rgb(32 62 92 / 0.25), rgb(202 219 255 / 0.28));
  border-left: 3px solid var(--stopwatch-teal, #0b7373);
  border-radius: 6px;
  background: light-dark(rgb(11 115 115 / 0.12), rgb(61 214 208 / 0.16));
  font-size: 0.72rem;
  line-height: 1.25;
  cursor: pointer;
}

.tb-cal-block--now,
.tb-cal-block--active {
  background: light-dark(rgb(11 115 115 / 0.22), rgb(61 214 208 / 0.30));
}

.tb-cal-block--done {
  opacity: 0.62;
}

.tb-cal-block--skipped {
  opacity: 0.55;
  border-left-color: var(--stopwatch-lemon, #c98a00);
}

.tb-cal-block__title {
  display: block;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tb-cal-block__time {
  display: block;
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}

.tb-cal__now {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
  height: 2px;
  background: var(--stopwatch-coral, #d81b60);
  pointer-events: none;
}

.tb-form-time {
  padding: 0.4rem 0.6rem;
  border: 1px solid light-dark(rgb(32 62 92 / 0.18), rgb(202 219 255 / 0.20));
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
}

.tb-form-hint {
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  color: var(--stopwatch-muted, #465b70);
}

@media (prefers-reduced-motion: no-preference) {
  body.tb-pulse {
    animation: tb-pulse 0.5s ease-in-out 3;
  }

  @keyframes tb-pulse {
    0%, 100% { filter: none; }
    50% { filter: brightness(1.18) saturate(1.25); }
  }
}

/* Recurrence: badge on timeline blocks and calendar grid cells, plus the
   inline scope segment for series edit/delete choices. */
.tb-block__badge--recurs {
  background: light-dark(rgb(107 63 160 / 0.12), rgb(196 181 253 / 0.16));
  color: var(--stopwatch-muted, #6b3fa0);
}

.tb-rec-badge {
  display: block;
  font-size: 0.62rem;
  font-weight: 600;
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tb-scope-seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.tb-scope-btn {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid light-dark(rgb(32 62 92 / 0.22), rgb(202 219 255 / 0.28));
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.tb-scope-btn--on {
  background: light-dark(rgb(32 62 92 / 0.12), rgb(202 219 255 / 0.18));
  border-color: light-dark(rgb(32 62 92 / 0.4), rgb(202 219 255 / 0.5));
}

/* ── Time Box: flex/open blocks, keyboard hint, focus strip, open rail ──
   Same light-dark() token discipline as the rest of the Time Box chrome. */

/* Keymap hint under the page header; .tb-key mimics a keycap. */
.tb-keymap-hint {
  margin: 0.35rem 0 0.75rem;
  font-size: 0.75rem;
  color: var(--stopwatch-muted, #465b70);
}

.tb-key {
  display: inline-block;
  min-width: 1.1rem;
  padding: 0.05rem 0.35rem;
  border: 1px solid light-dark(rgb(32 62 92 / 0.28), rgb(202 219 255 / 0.32));
  border-bottom-width: 2px;
  border-radius: 4px;
  background: light-dark(rgb(255 255 255 / 0.7), rgb(19 32 56 / 0.55));
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.68rem;
  text-align: center;
}

/* "Time block | Open block" form tabs — same idiom as the Day|Week toggle. */
.tb-form-tabs {
  display: flex;
  gap: 0.3rem;
  margin-bottom: 0.85rem;
}

/* Focus rail: compact strip of running blocks; row one is the focus target. */
.tb-focus {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.85rem;
}

.tb-focus__head {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stopwatch-teal, #0b7373);
}

.tb-focus__rows {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.tb-focus__row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.5rem 0.75rem;
  border: 1px solid light-dark(rgb(32 62 92 / 0.18), rgb(202 219 255 / 0.20));
  border-left: 3px solid light-dark(rgb(32 62 92 / 0.35), rgb(202 219 255 / 0.40));
  border-radius: 8px;
  background: light-dark(rgb(255 255 255 / 0.6), rgb(19 32 56 / 0.45));
  font-size: 0.85rem;
}

.tb-focus__row--focus {
  border-left-color: var(--stopwatch-teal, #0b7373);
  background: light-dark(rgb(11 115 115 / 0.08), rgb(61 214 208 / 0.10));
}

.tb-focus__title {
  font-weight: 600;
  min-width: 0;
  overflow-wrap: anywhere;
}

.tb-focus__meta {
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  color: var(--stopwatch-muted, #465b70);
}

.tb-focus__actions {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-left: auto;
}

/* Open blocks rail: unpinned flex blocks with progress + Start/Pin/Edit/Delete. */
.tb-rail {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.tb-rail__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid light-dark(rgb(32 62 92 / 0.18), rgb(202 219 255 / 0.20));
  border-left: 3px solid var(--stopwatch-violet, #6e4ae0);
  border-radius: 8px;
  background: light-dark(rgb(255 255 255 / 0.6), rgb(19 32 56 / 0.45));
}

.tb-rail__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.tb-rail__title {
  font-weight: 600;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  overflow-wrap: anywhere;
}

.tb-rail__bar {
  height: 6px;
  border-radius: 999px;
  background: light-dark(rgb(32 62 92 / 0.12), rgb(202 219 255 / 0.16));
  overflow: hidden;
}

.tb-rail__bar-fill {
  height: 100%;
  min-width: 0;
  border-radius: 999px;
  background: var(--stopwatch-teal, #0b7373);
}

.tb-rail__meta {
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--stopwatch-muted, #465b70);
}

.tb-rail__actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  align-items: stretch;
}

@media (max-width: 700px) {
  .tb-rail__row {
    flex-direction: column;
  }
  .tb-rail__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .tb-focus__actions {
    margin-left: 0;
  }
}

/* Pin-mode: the grid visibly armed for the next click/drag. */
.tb-cal--pinning {
  border: 1px dashed var(--stopwatch-coral, #d81b60);
}

.tb-cal--pinning .tb-cal-slot:hover {
  background: light-dark(rgb(216 27 96 / 0.14), rgb(255 138 122 / 0.18));
}

.tb-form-hint--pin {
  color: var(--stopwatch-coral, #d81b60);
  font-weight: 600;
}

.mcp-install__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}
.mcp-install__blurb {
  margin-bottom: 0.75rem;
}
.mcp-install__url {
  word-break: break-all;
}
.mcp-install__pre {
  margin: 0 0 0.75rem;
  padding: 0.85rem 1rem;
  overflow-x: auto;
  font-size: 0.8rem;
  line-height: 1.45;
  border: 1px solid var(--timely-border, #ddd);
  border-radius: var(--timely-radius, 8px);
  background: var(--surface-alt, rgba(127, 127, 127, 0.08));
  white-space: pre-wrap;
}