/*
  CeyLabs Waitlist admin
  ======================
  Inspired by getdroppy.app rather than copied from it: a light paper
  canvas with grain, one warm ink for text, the notch dock and dark
  controls, flat wells with no borders or shadows, Instrument Sans
  headlines, Inter Tight headings and buttons, Inter for body copy.

  Droppy's slate paper is swapped for warm stone so it sits with the one
  brand colour: Ceylon Cash maroon #8d1539, used only on primary actions
  (create, save, sign in). Everything else is ink or glass.

  Light is the default. Dark keeps the same structure on a warm night
  canvas. An inline script in <head> sets html[data-theme] before paint.

  The project pages are still written in Tailwind utilities (Play CDN).
  The "Tailwind bridge" at the bottom re-points those colour, border and
  radius utilities at these tokens. Bridge selectors carry :root so they
  outrank the utilities Tailwind injects after this file.
*/

/* ---------------------------------------------------------------------- */
/* Tokens                                                                 */
/* ---------------------------------------------------------------------- */

:root,
:root[data-theme="light"] {
  color-scheme: light;

  /* Warm stone paper; wells step lighter, fields lightest. */
  --bg: #dbd5d0;
  --well: #e6e1dd;
  --well-raised: #eeeae6;
  --field: #f4f1ee;

  /* One warm ink for text, the dock and dark controls. */
  --ink: #2b2226;
  --ink-hover: #3a2f34;
  --on-ink: #ebe3e5;
  --on-ink-soft: rgba(235, 227, 229, 0.66);

  --glass: rgba(43, 34, 38, 0.055);
  --glass-strong: rgba(43, 34, 38, 0.09);
  --glass-hover: rgba(43, 34, 38, 0.14);

  --text: #2b2226;
  --text-2: rgba(43, 34, 38, 0.78);
  --text-3: rgba(43, 34, 38, 0.62);
  --text-4: rgba(43, 34, 38, 0.48);

  /* Ceylon Cash maroon. White on it is 9.1:1. */
  --accent: #8d1539;
  --accent-hover: #a01b44;
  --accent-active: #76112f;
  --on-accent: #ffffff;
  --accent-soft: rgba(141, 21, 57, 0.09);
  --accent-soft-strong: rgba(141, 21, 57, 0.18);
  --accent-text: #8d1539;
  --ring: #8d1539;

  --hairline: rgba(43, 34, 38, 0.08);
  --row-hover: rgba(43, 34, 38, 0.03);

  --success: #17784b;
  --success-soft: rgba(23, 120, 75, 0.12);
  --warning: #8a5a06;
  --warning-soft: rgba(176, 116, 12, 0.14);
  --error: #b42318;
  --error-soft: rgba(180, 35, 24, 0.1);
  --info: #2c57b0;
  --info-soft: rgba(44, 87, 176, 0.1);

  --shadow-float: 0 12px 32px rgba(43, 34, 38, 0.16);

  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.17 0 0 0 0 0.13 0 0 0 0 0.15 0 0 0 0.055 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #1b1618;
  --well: #241e21;
  --well-raised: #2c2529;
  --field: #322a2e;

  --ink: #0f0c0d;
  --ink-hover: #1f191c;
  --on-ink: #ebe3e5;
  --on-ink-soft: rgba(235, 227, 229, 0.62);

  --glass: rgba(255, 255, 255, 0.05);
  --glass-strong: rgba(255, 255, 255, 0.08);
  --glass-hover: rgba(255, 255, 255, 0.12);

  --text: #efe8ea;
  --text-2: rgba(239, 232, 234, 0.76);
  --text-3: rgba(239, 232, 234, 0.58);
  --text-4: rgba(239, 232, 234, 0.42);

  --accent: #8d1539;
  --accent-hover: #a51c45;
  --accent-active: #76112f;
  --accent-soft: rgba(214, 70, 113, 0.16);
  --accent-soft-strong: rgba(214, 70, 113, 0.3);
  --accent-text: #f29bb7;
  --ring: #e0567f;

  --hairline: rgba(255, 255, 255, 0.07);
  --row-hover: rgba(255, 255, 255, 0.025);

  --success: #3fd08a;
  --success-soft: rgba(63, 208, 138, 0.14);
  --warning: #f5c04e;
  --warning-soft: rgba(245, 192, 78, 0.14);
  --error: #ff7b6e;
  --error-soft: rgba(255, 123, 110, 0.14);
  --info: #8fb6ff;
  --info-soft: rgba(143, 182, 255, 0.14);

  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);

  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 0.94 0 0 0 0 0.96 0 0 0 0.03 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

:root {
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 999px;

  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Instrument Sans", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-heading: "Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --container: 1120px;
  --pad: 24px;
  --nav-bar: 8px;
  --nav-h: 56px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dock-curve: cubic-bezier(0.32, 1.22, 0.36, 1);
  --fast: 150ms;
  --slow: 600ms;
}

@media (max-width: 720px) {
  :root { --pad: 16px; }
}

/* ---------------------------------------------------------------------- */
/* Base                                                                   */
/* ---------------------------------------------------------------------- */

/* Tailwind's reset normally provides border-box; the login page doesn't load
   Tailwind, and without it padded 100% inputs overflow their card. */
*, *::before, *::after { box-sizing: border-box; }
/* Stable gutter: short and long tabs would otherwise shift the page sideways
   as the scrollbar comes and goes. */
html { overflow-x: clip; scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background-color: var(--bg);
  background-image: var(--grain);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 300ms var(--ease), color 300ms var(--ease);
}

::selection { background: var(--accent-soft-strong); color: inherit; }
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 3px;
}
.nav :focus-visible { outline-color: #f29bb7; }

.wn-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); }
/* Bottom padding clears the floating dock on every signed-in page. */
.wn-main { padding-block: 112px 136px; }

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

/* overflow-anchor: none keeps the browser from using a still-offset reveal
   element as its scroll anchor when restoring position on reload. Without
   it, every refresh scrolled the page down by the 20px entrance offset. */
.reveal {
  overflow-anchor: none;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------------------------------------------------------------------- */
/* Page transitions                                                       */
/* ---------------------------------------------------------------------- */
/* Soft navigation (assets/app/nav.js) swaps pages inside a view transition;
   full document loads (form posts, login) get the native cross-document
   one. The notch and dock have their own names so they hold still while
   the page underneath crossfades. */

@view-transition { navigation: auto; }
.nav { view-transition-name: notch; }
.dock { view-transition-name: dock; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 180ms; animation-timing-function: var(--ease); }
::view-transition-group(notch),
::view-transition-group(dock) { animation-duration: 260ms; }

/* Intro animations play once per session (flag set in <head>). */
.is-returning .nav__pill,
.is-returning .dock { animation: none; }

/* Soft-nav progress: a thin maroon line under the notch strip. */
.navprogress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 120;
  width: 100%;
  height: 2px;
  background: var(--accent);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
}
.is-navigating .navprogress { opacity: 1; transform: scaleX(0.8); transition: opacity 120ms var(--ease), transform 2.4s cubic-bezier(0.1, 0.8, 0.2, 1); }
:root[data-theme="dark"] .navprogress { background: var(--accent-text); }

/* Programmatic focus on the new page heading after a swap. */
h1[tabindex="-1"]:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------------------------------------------------------------------- */
/* Notch dock                                                             */
/* ---------------------------------------------------------------------- */

.nav {
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.nav::before {
  content: "";
  position: absolute;
  top: calc(-1 * env(safe-area-inset-top, 0px) - 1px);
  left: 0;
  right: 0;
  height: calc(env(safe-area-inset-top, 0px) + var(--nav-bar) + 2px);
  background: var(--ink);
}
.nav__pill {
  --fillet: 24px;
  position: relative;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: calc(100% - 2 * var(--fillet) - 8px);
  height: var(--nav-h);
  margin-top: var(--nav-bar);
  padding: 6px 7px 6px 12px;
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  background: var(--ink);
  color: var(--on-ink);
  box-shadow: 0 calc(-1 * var(--nav-bar)) 0 0 var(--ink);
  transform-origin: 50% 0;
  animation: navDock 640ms var(--dock-curve) 120ms both;
}
.nav__pill::before,
.nav__pill::after {
  content: "";
  position: absolute;
  top: calc(-1 * var(--nav-bar));
  width: var(--fillet);
  height: calc(var(--fillet) + var(--nav-bar));
  pointer-events: none;
}
.nav__pill::before {
  left: calc(-1 * var(--fillet) + 1px);
  background: radial-gradient(circle var(--fillet) at 0 100%, transparent calc(var(--fillet) - 1px), var(--ink) var(--fillet));
}
.nav__pill::after {
  right: calc(-1 * var(--fillet) + 1px);
  background: radial-gradient(circle var(--fillet) at 100% 100%, transparent calc(var(--fillet) - 1px), var(--ink) var(--fillet));
}
@keyframes navDock {
  0%   { opacity: 0; transform: translateY(-6px) scaleX(0.78); filter: blur(8px); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: none; filter: blur(0); }
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--on-ink);
}
.nav__logo img { width: 24px; height: 24px; border-radius: 6px; }
.nav__badge {
  margin-right: 8px;
  padding: 1px 8px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.08);
  color: var(--on-ink-soft);
  font-size: 0.72rem;
  font-weight: 500;
}
.nav__links { display: flex; align-items: center; gap: 18px; margin-right: 8px; }
.nav__link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--on-ink-soft);
  white-space: nowrap;
  transition: color var(--fast) var(--ease);
}
.nav__link:hover,
.nav__link.is-active { color: var(--on-ink); }
.nav__link--mobile { display: none; }

.nav__user {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.1);
  color: var(--on-ink);
  font-size: 0.78rem;
  font-weight: 600;
}

.nav__menu {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
}
.nav__menu span {
  display: block;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: var(--on-ink);
  transition: transform 320ms var(--dock-curve), opacity 180ms ease;
}
.nav__pill.is-open .nav__menu span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__pill.is-open .nav__menu span:nth-child(2) { opacity: 0; }
.nav__pill.is-open .nav__menu span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Phones: Droppy's expanding notch. */
@media (max-width: 820px) {
  .nav__pill {
    width: calc(100% - 2 * var(--fillet) - 8px);
    height: auto;
    min-height: var(--nav-h);
    flex-wrap: wrap;
    column-gap: 4px;
    row-gap: 0;
    padding: 6px 8px 6px 12px;
  }
  .nav__badge { margin-right: auto; }
  .nav__menu { display: inline-flex; order: 2; }
  .theme-toggle { order: 1; }
  .nav__user, .nav__pill .nav__signout { display: none; }
  .nav__links {
    order: 5;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 2px;
    transition: max-height 560ms var(--dock-curve), opacity 240ms ease, padding 560ms var(--dock-curve);
  }
  .nav__pill.is-open .nav__links { max-height: 360px; opacity: 1; padding: 8px 2px 6px; }
  .nav__link { padding: 13px 12px; border-radius: 12px; font-size: 15px; pointer-events: none; }
  .nav__link.is-active { background: rgba(255, 255, 255, 0.06); }
  .nav__pill.is-open .nav__link { pointer-events: auto; }
  .nav__link--mobile { display: block; }
}

.theme-toggle {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--on-ink-soft);
  cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.theme-toggle:hover { background: rgba(255, 255, 255, 0.08); color: var(--on-ink); }
.theme-toggle:active { transform: scale(0.94); }
.theme-toggle svg {
  grid-area: 1 / 1;
  width: 17px;
  height: 17px;
  transition: opacity 340ms linear, filter 340ms cubic-bezier(0.22, 1, 0.36, 1), transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Shows the theme you'd switch to: moon on light paper, sun at night. */
.theme-toggle__sun,
:root[data-theme="dark"] .theme-toggle__moon {
  opacity: 0;
  filter: blur(8px);
  transform: rotate(-40deg) scale(0.7);
}
:root[data-theme="dark"] .theme-toggle__sun { opacity: 1; filter: blur(0); transform: none; }

/* ---------------------------------------------------------------------- */
/* Buttons                                                                */
/* ---------------------------------------------------------------------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding-inline: 20px;
  border: 0;
  border-radius: var(--r-lg);
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease), transform var(--fast) var(--ease), opacity var(--fast) var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; cursor: default; transform: none; }
.btn svg { width: 16px; height: 16px; }
.btn--sm { height: 38px; padding-inline: 16px; border-radius: 13px; }
.btn--lg { height: 58px; padding-inline: 28px; border-radius: 20px; font-size: 17px; }
.btn--block { width: 100%; }

/* :root on the fills: Tailwind's reset clears [type=button] and
   [type=submit] backgrounds and is injected after this file. */
:root .btn--primary { background: var(--accent); color: var(--on-accent); }
:root .btn--primary:hover { background: var(--accent-hover); }
:root .btn--primary:active { background: var(--accent-active); }

/* Droppy's dark pill: the ink control for everything that isn't the one
   primary action. */
:root .btn--ink { background: var(--ink); color: var(--on-ink); }
:root .btn--ink:hover { background: var(--ink-hover); }

:root .btn--glass {
  background: var(--glass-strong);
  color: var(--text);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
}
:root .btn--glass:hover { background: var(--glass-hover); }

/* The dock CTA is a light pill on the ink notch, like Droppy's Purchase. */
:root .btn--nav { height: 40px; padding-inline: 16px; border-radius: var(--r-full); background: var(--on-ink); color: #2b2226; }
:root .btn--nav:hover { background: #fff; }

.btn-morph {
  --morph-dur: 340ms;
  --morph-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --morph-blur: 16px;
  --morph-tap-dur: 620ms;
}
.btn-morph__face {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: inherit;
  transition: opacity var(--morph-dur) linear, filter var(--morph-dur) var(--morph-ease);
}
.btn-morph__face--hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  filter: blur(var(--morph-blur));
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .btn-morph--icon:not(:disabled):hover .btn-morph__face--rest { opacity: 0; filter: blur(var(--morph-blur)); }
  .btn-morph--icon:not(:disabled):hover .btn-morph__face--hover { opacity: 1; filter: blur(0); }
  .btn-morph--label:not(:disabled):hover .btn-morph__face--rest { animation: morphDissolve var(--morph-dur) var(--morph-ease); }
}
.btn-morph--icon.is-tapmorph .btn-morph__face--rest { animation: morphTapOut var(--morph-tap-dur) var(--morph-ease); }
.btn-morph--icon.is-tapmorph .btn-morph__face--hover { animation: morphTapIn var(--morph-tap-dur) var(--morph-ease); }
@keyframes morphTapOut {
  0% { opacity: 1; filter: blur(0); }
  32%, 68% { opacity: 0; filter: blur(var(--morph-blur)); }
  100% { opacity: 1; filter: blur(0); }
}
@keyframes morphTapIn {
  0% { opacity: 0; filter: blur(var(--morph-blur)); }
  32%, 68% { opacity: 1; filter: blur(0); }
  100% { opacity: 0; filter: blur(var(--morph-blur)); }
}
@keyframes morphDissolve {
  0% { filter: blur(0); opacity: 1; }
  45% { filter: blur(var(--morph-blur)); opacity: 0.3; }
  100% { filter: blur(0); opacity: 1; }
}
.btn-morph > .btn-morph__face--hover > .btn-morph__mark { width: var(--morph-mark, 20px); height: var(--morph-mark, 20px); }
.btn--lg.btn-morph { --morph-mark: 24px; }
.btn--nav.btn-morph, .btn--sm.btn-morph { --morph-blur: 11px; --morph-mark: 17px; }

/* ---------------------------------------------------------------------- */
/* Flash messages                                                         */
/* ---------------------------------------------------------------------- */

.flashes { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 28px; }
.msg {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  padding: 10px 16px 10px 12px;
  border-radius: 14px;
  background: var(--info-soft);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--info);
}
.msg svg { width: 18px; height: 18px; flex: none; }
.msg--error { background: var(--error-soft); color: var(--error); }
.msg--ok { background: var(--success-soft); color: var(--success); }

/* ---------------------------------------------------------------------- */
/* Login                                                                  */
/* ---------------------------------------------------------------------- */

.auth {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 88px var(--pad) 24px;
}
.auth__card {
  width: 100%;
  max-width: 400px;
  padding: 32px;
  border-radius: 28px;
  background: var(--well);
}
.auth__mark { width: 44px; height: 44px; margin-bottom: 22px; border-radius: 12px; }
.auth__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.auth__sub { margin: 8px 0 0; font-size: 0.95rem; color: var(--text-3); }
.auth__form { display: flex; flex-direction: column; gap: 14px; margin-top: 26px; }
.auth__label { display: block; margin-bottom: 8px; font-size: 0.85rem; font-weight: 600; color: var(--text-2); }
.auth__form .btn { margin-top: 8px; }
@media (max-width: 420px) {
  .auth__card { padding: 26px 20px; border-radius: 24px; }
}

.field-input {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 0;
  border-radius: 14px;
  background: var(--field);
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
  outline: none;
  transition: box-shadow var(--fast) var(--ease);
}
.field-input::placeholder { color: var(--text-4); }
.field-input:focus { box-shadow: 0 0 0 2px var(--accent-soft-strong); }

/* ---------------------------------------------------------------------- */
/* Page intro (create project)                                            */
/* ---------------------------------------------------------------------- */

.dash__sub {
  max-width: 540px;
  margin: 18px 0 0;
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  line-height: 1.55;
  color: var(--text-3);
}

/* ---------------------------------------------------------------------- */
/* Overview dashboard                                                     */
/* ---------------------------------------------------------------------- */
/* Anatomy from the OpenAnalytics dashboard: every card is a "frame" (a
   hairline-bordered shell with a label strip) holding a raised inset
   "panel". Here the frame is the paper well and the panel the lighter
   field surface, so it reads the same on the Droppy canvas. */

.ov { display: flex; flex-direction: column; gap: 20px; }

.ov__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
.ov__title { display: flex; align-items: baseline; gap: 10px; }
.ov__title h1 { margin: 0; font-family: var(--font-heading); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.035em; }
.ov__live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-heading); font-size: 1rem; font-weight: 500; color: var(--success); }
.ov__live-dot { position: relative; width: 8px; height: 8px; border-radius: var(--r-full); background: var(--success); }
.ov__live-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  background: var(--success);
  opacity: 0.35;
  animation: livePulse 2s var(--ease) infinite;
}
@keyframes livePulse { 0% { transform: scale(0.5); opacity: 0.45; } 100% { transform: scale(1.6); opacity: 0; } }

.ov__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ov__range { margin: 0; }
.ov__select {
  height: 38px;
  padding: 0 34px 0 14px;
  border: 1px solid var(--hairline);
  border-radius: 13px;
  background: var(--field) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23887d81' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='m4 6 4 4 4-4'/></svg>") no-repeat right 12px center / 11px;
  color: var(--text);
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 600;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

/* Frame + panel */
.frame {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 4px;
  border: 1px solid var(--hairline);
  border-radius: 28px;
  background: var(--well);
}
.frame__label,
.frame__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  margin: 0;
  padding: 2px 12px 4px 14px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-2);
}
.frame__bar { justify-content: space-between; }
.frame__bar h2 { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 0.925rem; font-weight: 500; color: var(--text); }
.frame__bar h2 svg { width: 16px; height: 16px; color: var(--text-3); }
.frame__more { display: inline-flex; align-items: center; gap: 3px; font-size: 0.8rem; color: var(--text-3); transition: color var(--fast) var(--ease); }
.frame__more:hover { color: var(--text); }
.frame__more svg { width: 13px; height: 13px; }
.frame__panel {
  position: relative;
  flex: 1;
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: 23px;
  background: var(--field);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.tip { position: relative; display: inline-grid; place-items: center; color: var(--text-4); cursor: help; }
.tip svg { width: 13px; height: 13px; }
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  z-index: 20;
  width: max-content;
  max-width: 220px;
  padding: 7px 10px;
  border-radius: 10px;
  background: #1c1a1b;
  color: #f3eeef;
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 4px);
  transition: opacity 140ms var(--ease), transform 140ms var(--ease);
}
[data-tip]:hover::after,
[data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }

/* Stat cards */
.ov__stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.stat-panel { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 64px; padding: 10px 16px; }
.stat-panel__value {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.stat-panel__of { color: var(--text-4); font-weight: 400; }
.delta {
  padding: 3px 8px;
  border-radius: var(--r-full);
  background: var(--success-soft);
  color: var(--success);
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.delta--down { background: var(--error-soft); color: var(--error); }
.delta--muted { background: var(--glass-strong); color: var(--text-3); }

/* Frames that act as filters or links (queue status cards, project cards). */
.frame--link { color: inherit; transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.frame--link:hover { background: var(--well-raised); }
.frame--link.is-active { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.frame__dot { width: 7px; height: 7px; border-radius: var(--r-full); background: var(--c, var(--text-4)); }
.frame__count {
  padding: 1px 8px;
  border-radius: var(--r-full);
  background: var(--glass-strong);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.ov__live--idle { color: var(--text-3); }
.ov__range { display: flex; flex-wrap: wrap; gap: 8px; }
.frame .qtable th { padding-top: 14px; }
.ov__stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Search field in heading rows */
.search {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0;
}
.search svg { position: absolute; left: 12px; width: 15px; height: 15px; color: var(--text-4); pointer-events: none; }
.search input {
  width: 220px;
  height: 38px;
  padding: 0 12px 0 34px;
  border: 1px solid var(--hairline);
  border-radius: 13px;
  background: var(--field);
  color: var(--text);
  font: inherit;
  font-size: 0.875rem;
  outline: none;
  transition: box-shadow var(--fast) var(--ease), width 300ms var(--ease);
}
.search input::placeholder { color: var(--text-4); }
.search input:focus { box-shadow: 0 0 0 2px var(--accent-soft-strong); }
@media (max-width: 640px) { .search, .search input { width: 100%; } }

/* Status filter tabs */
.segmented {
  display: flex;
  gap: 2px;
  width: fit-content;
  max-width: 100%;
  padding: 4px;
  overflow-x: auto;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: var(--well);
}
.segmented__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 13px;
  border-radius: 12px;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-3);
  white-space: nowrap;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.segmented__item span { font-size: 0.75rem; color: var(--text-4); font-variant-numeric: tabular-nums; }
.segmented__item:hover { color: var(--text); }
.segmented__item.is-active { background: var(--ink); color: var(--on-ink); }
.segmented__item.is-active span { color: var(--on-ink-soft); }

/* Project site cards (OpenAnalytics' sites picker anatomy) */
.site-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.site-card { border-radius: 28px; }
.site-card:active { transform: scale(0.99); }
.site-card .frame__bar { min-height: 36px; }
.site-card__name { display: inline-flex; align-items: center; gap: 9px; min-width: 0; overflow: hidden; font-weight: 500; color: var(--text); white-space: nowrap; text-overflow: ellipsis; }
.site-card__chev { display: grid; color: var(--text-4); transition: transform 300ms var(--ease), color 300ms var(--ease); }
.site-card__chev svg { width: 15px; height: 15px; }
.site-card:hover .site-card__chev { transform: translateX(2px); color: var(--accent-text); }
.site-card__panel { display: flex; flex-direction: column; gap: 14px; padding: 14px 16px; }
.site-card__id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.site-card__mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--on-ink);
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
}
.site-card__text { display: flex; flex-direction: column; min-width: 0; }
.site-card__domain { overflow: hidden; font-size: 0.9rem; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.site-card__domain small { color: var(--text-4); font-size: 0.75rem; }
.site-card__slug { overflow: hidden; font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-4); white-space: nowrap; text-overflow: ellipsis; }
.site-card__nums { display: flex; gap: 18px; font-size: 0.8rem; color: var(--text-3); }
.site-card__nums b { margin-right: 3px; font-family: var(--font-heading); font-size: 1.25rem; font-weight: 500; letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.site-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid var(--hairline); font-size: 0.75rem; }
.site-card__tags { display: flex; flex-wrap: wrap; gap: 4px; }
.site-card__when { color: var(--text-4); text-align: right; }
.tag { padding: 2px 8px; border-radius: var(--r-full); background: var(--accent-soft); color: var(--accent-text); font-weight: 600; white-space: nowrap; }
.tag--muted { background: var(--glass-strong); color: var(--text-3); }

.empty-panel { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 52px 24px; text-align: center; }
.empty-panel > svg { width: 22px; height: 22px; margin-bottom: 4px; color: var(--text-4); }
.empty-panel h2 { margin: 0; font-family: var(--font-heading); font-size: 1.05rem; font-weight: 600; }
.empty-panel p { margin: 0 0 10px; max-width: 320px; font-size: 0.9rem; color: var(--text-3); }

/* Signups table extras */
.cell-person { display: inline-flex; align-items: center; gap: 10px; }
.cell-person .row__avatar { width: 26px; height: 26px; border-radius: 8px; font-size: 0.7rem; }
.cell-link { font-weight: 500; color: var(--text); }
.cell-link:hover { color: var(--accent-text); }
.cell-details { max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 6px 14px; }
.pager__info { font-size: 0.8rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
.pager__btns { display: flex; gap: 6px; }
.btn.is-disabled { opacity: 0.45; pointer-events: none; }
@media (max-width: 1080px) { .ov__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ov__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Chart */
.frame--chart { border-radius: 36px; }
.chart {
  /* flex: none, or the panel's flex: 1 (basis 0) wins over the height */
  flex: none;
  height: clamp(260px, 38vh, 380px);
  border-radius: 31px;
  overflow: hidden;
  /* the dotted grid behind the plot */
  background-image: radial-gradient(circle, var(--glass-hover) 1px, transparent 1.3px);
  background-size: 14px 14px;
  background-position: 7px 7px;
  touch-action: pan-y;
}
.chart svg { position: absolute; inset: 0; display: block; }
.chart__line { fill: none; stroke: var(--accent-text); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart__tick { fill: var(--text-3); font-family: var(--font); font-size: 12px; }
.chart__guide { stroke: var(--text-4); stroke-width: 1; stroke-dasharray: 3 3; }
.chart__dot { fill: var(--field); stroke: var(--accent-text); stroke-width: 2.5; }
.chart__tip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 12px;
  border-radius: 12px;
  background: #1c1a1b;
  color: #f3eeef;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  font-size: 0.75rem;
  pointer-events: none;
  white-space: nowrap;
}
.chart__tip span { color: rgba(243, 238, 239, 0.62); }
.chart__tip strong { font-size: 0.875rem; font-weight: 600; }
.chart__empty {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-content: center;
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-3);
  text-align: center;
  pointer-events: none;
}
.chart__empty a { color: var(--accent-text); font-weight: 600; pointer-events: auto; }

/* Breakdown cards */
.ov__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1020px) { .ov__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .ov__grid { grid-template-columns: minmax(0, 1fr); } }
.frame--list .frame__panel { height: 268px; overflow-y: auto; scrollbar-width: thin; }

.rows { margin: 0; padding: 8px 0; list-style: none; }
.row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 6px 16px;
  color: inherit;
  font-size: 0.9rem;
}
/* Share bar behind the row, like a ranked list. */
.row::before {
  content: "";
  position: absolute;
  inset: 4px auto 4px 8px;
  /* --share is a percentage of the row; trimmed so a 100% bar keeps the
     same 8px inset on both sides. */
  width: calc(var(--share, 0%) * 0.96);
  border-radius: 10px;
  background: var(--accent-soft);
  transition: background var(--fast) var(--ease);
}
.row:hover::before { background: var(--accent-soft-strong); }
.row--stacked::before { display: none; }
.row:hover { background: var(--row-hover); }
.row > * { position: relative; }
.row__dot { flex: none; width: 7px; height: 7px; border-radius: var(--r-full); background: var(--text-4); }
.row__dot--on { background: var(--success); }
.row__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__label small { display: block; overflow: hidden; text-overflow: ellipsis; font-size: 0.75rem; color: var(--text-4); }
.row__value { font-variant-numeric: tabular-nums; }
.row__pct { width: 38px; text-align: right; font-size: 0.8rem; color: var(--text-4); font-variant-numeric: tabular-nums; }
.row__time { flex: none; font-size: 0.78rem; color: var(--text-4); }
.row__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--ink);
  color: var(--on-ink);
  font-size: 0.75rem;
  font-weight: 600;
}
.rows__empty { margin: 0; padding: 40px 20px; text-align: center; font-size: 0.9rem; color: var(--text-3); }
.rows__empty a { color: var(--accent-text); font-weight: 600; }

.deliv { padding: 16px 18px; }
.deliv__top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.deliv__big { font-family: var(--font-heading); font-size: 1.9rem; font-weight: 500; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.deliv__sub { font-size: 0.85rem; color: var(--text-3); }
.deliv__bar { height: 8px; margin: 12px 0 6px; overflow: hidden; border-radius: var(--r-full); background: var(--error-soft); }
.deliv__bar span { display: block; height: 100%; border-radius: inherit; background: var(--success); }
.deliv__list { margin: 12px 0 0; }
.deliv__list div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--hairline); font-size: 0.85rem; }
.deliv__list dt { color: var(--text-3); }
.deliv__list dd { margin: 0; font-variant-numeric: tabular-nums; }
.deliv__list b { font-weight: 600; color: var(--error); }

/* Floating dock (OpenAnalytics' bottom tab bar, in the notch ink). */
.dock {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px;
  border-radius: 20px;
  background: var(--ink);
  box-shadow: 0 10px 30px rgba(20, 12, 16, 0.28);
  transform: translateX(-50%);
  animation: dockIn 560ms var(--dock-curve) 300ms both;
}
@keyframes dockIn { from { opacity: 0; transform: translate(-50%, 16px) scale(0.94); } to { opacity: 1; transform: translate(-50%, 0); } }
.dock__item {
  display: grid;
  place-items: center;
  width: 42px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 15px;
  background: transparent;
  color: var(--on-ink-soft);
  cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.dock__item svg { width: 19px; height: 19px; }
.dock__item:hover { color: var(--on-ink); background: rgba(255, 255, 255, 0.07); }
.dock__item.is-active { color: var(--on-ink); background: rgba(255, 255, 255, 0.12); }
.dock__item:disabled { opacity: 0.5; cursor: default; }
.dock__sep { width: 1px; height: 20px; margin: 0 5px; background: rgba(255, 255, 255, 0.14); }
.dock [data-tip]::after { bottom: calc(100% + 12px); }

/* The active item opens up to show its label, so the current page or
   section is readable without hovering. grid 0fr -> 1fr animates the
   width without measuring. */
.dock__item--labelled { display: flex; align-items: center; width: auto; min-width: 42px; padding: 0 11.5px; }
.dock__label {
  display: grid;
  grid-template-columns: 0fr;
  margin-left: 0;
  transition: grid-template-columns 380ms var(--dock-curve), margin 380ms var(--dock-curve);
}
.dock__label > span {
  overflow: hidden;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}
.dock__item.is-active .dock__label { grid-template-columns: 1fr; margin-left: 7px; }
.dock__item.is-active[data-tip]::after { display: none; }
@media (max-width: 420px) {
  .dock__item.is-active .dock__label { grid-template-columns: 0fr; margin-left: 0; }
  .dock__item.is-active[data-tip]::after { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .ov__live-dot::after, .dock { animation: none; }
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: var(--r-full);
  background: var(--glass-strong);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-3);
}
.status::before { content: ""; width: 6px; height: 6px; border-radius: var(--r-full); background: currentColor; }
.status--on { background: var(--success-soft); color: var(--success); }

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 56px 24px;
  border-radius: 28px;
  background: var(--well);
  text-align: center;
}
.empty h3 { margin: 0; font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; letter-spacing: -0.02em; }
.empty p { margin: 0 0 14px; color: var(--text-3); }

/* ---------------------------------------------------------------------- */
/* Project header + tabs                                                  */
/* ---------------------------------------------------------------------- */

.phead { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 36px; text-align: center; }
.phead__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-3);
  transition: color var(--fast) var(--ease);
}
.phead__back:hover { color: var(--text); }
.phead__back svg { width: 14px; height: 14px; transition: transform 220ms var(--ease); }
.phead__back:hover svg { transform: translateX(-2px); }
.phead__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5.5vw, 3.25rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

/* Status pill + the current section's name (updated on tab switch). The
   section links themselves live in the bottom dock. */
.phead__meta { display: flex; align-items: center; gap: 10px; }
.phead__section {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-3);
}
.phead__section:not(:empty)::before { content: "·"; margin-right: 10px; color: var(--text-4); }

/* Tab swaps: a cold tab dims the current one; the new one settles in. */
#tab-content { transition: opacity 160ms var(--ease); }
#tab-content.is-pending { opacity: 0.5; pointer-events: none; }
#tab-content.is-entering { animation: tabIn 240ms var(--ease) both; }
@keyframes tabIn { from { opacity: 0.35; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.skeleton { display: grid; gap: 16px; }
.skeleton__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.sk { height: 88px; border-radius: 22px; background: var(--glass-strong); animation: skPulse 1.4s ease-in-out infinite; }
.sk--tall { height: 260px; }
@keyframes skPulse { 50% { opacity: 0.5; } }

/* ---------------------------------------------------------------------- */
/* Queue monitor                                                          */
/* ---------------------------------------------------------------------- */

.panel__scroll { overflow-x: auto; }
.qtable { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.qtable th {
  padding: 18px 18px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-align: left;
  color: var(--text-4);
  white-space: nowrap;
}
.qtable td { padding: 14px 18px; border-top: 1px solid var(--hairline); white-space: nowrap; }
.qtable tbody tr:hover td { background: var(--row-hover); }
.qtable strong { font-weight: 600; }
.qtable__mono { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
.qtable__muted { color: var(--text-4); font-size: 0.85rem; }
.qtable__error { display: inline-block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; font-size: 0.85rem; color: var(--error); }
.qtable__empty { padding: 56px 18px !important; text-align: center; color: var(--text-4); }
.qstatus {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--c) 14%, transparent);
  color: var(--c);
  font-size: 0.78rem;
  font-weight: 600;
}
.qstatus::before { content: ""; width: 6px; height: 6px; border-radius: var(--r-full); background: currentColor; }

/* ---------------------------------------------------------------------- */
/* Toasts                                                                 */
/* ---------------------------------------------------------------------- */

.toasts {
  position: fixed;
  left: 50%;
  /* above the floating dock */
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: calc(100vw - 24px);
  transform: translateX(-50%);
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 12px;
  border-radius: 18px;
  background: var(--ink);
  color: var(--on-ink);
  box-shadow: var(--shadow-float);
  font-size: 0.9rem;
  font-weight: 500;
  animation: toastIn 460ms var(--dock-curve) both;
}
.toast.closing { animation: toastOut 260ms var(--ease) both; }
.toast__icon { display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--r-full); background: rgba(255, 255, 255, 0.12); }
.toast__icon svg { width: 14px; height: 14px; }
.toast--success .toast__icon { background: #3fd08a; color: #0f0c0d; }
.toast--error .toast__icon { background: #ff7b6e; color: #0f0c0d; }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(14px) scale(0.92); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes toastOut { to { opacity: 0; transform: translateY(10px) scale(0.96); } }

.spin { width: 16px; height: 16px; animation: spin 800ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .nav__pill, .toast, .toast.closing, .sk, #tab-content.is-entering { animation: none; }
  .reveal, .dock__label { transition: none; }
}

/* ---------------------------------------------------------------------- */
/* Tailwind bridge                                                        */
/* ---------------------------------------------------------------------- */

/* Surfaces: flat wells, no outlines, no shadows. */
:root .bg-white { background-color: var(--well); }
:root .shadow-sm, :root .shadow { box-shadow: none; }
:root .bg-white.rounded-xl { border-radius: 24px; }
:root .bg-white.border { border-color: transparent; }
:root .shadow-lg, :root .shadow-xl { box-shadow: var(--shadow-float); }

:root .rounded-lg { border-radius: 12px; }
:root .rounded-xl { border-radius: 18px; }
:root .rounded-2xl { border-radius: 24px; }

:root .bg-gray-50 { background-color: var(--glass); }
:root .bg-gray-100 { background-color: var(--glass-strong); }
:root .bg-gray-200 { background-color: var(--glass-hover); }
:root .bg-gray-300, :root .bg-gray-400, :root .bg-gray-500 { background-color: var(--text-4); }
:root .bg-gray-600 { background-color: var(--text-3); }
:root .bg-gray-800, :root .bg-gray-900 { background-color: var(--ink); }
:root pre.bg-gray-900 { border-radius: 16px; font-family: var(--font-mono); line-height: 1.65; }
:root .hover\:bg-gray-50:hover { background-color: var(--row-hover); }
:root .hover\:bg-gray-100:hover { background-color: var(--glass-strong); }
:root .hover\:bg-gray-200:hover { background-color: var(--glass-hover); }
:root .hover\:bg-gray-600:hover, :root .hover\:bg-gray-700:hover, :root .hover\:bg-gray-800:hover { background-color: var(--ink-hover); }

:root .border-gray-50, :root .border-gray-100, :root .border-gray-200,
:root .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
:root .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--hairline); }
:root .border-gray-300 { border-color: var(--glass-hover); }
:root .border-gray-800 { border-color: rgba(255, 255, 255, 0.08); }

:root .text-gray-900, :root .text-gray-800 { color: var(--text); }
:root .text-gray-700 { color: var(--text-2); }
:root .text-gray-600, :root .text-gray-500 { color: var(--text-3); }
:root .text-gray-400, :root .text-gray-300 { color: var(--text-4); }
:root pre .text-gray-400, :root .bg-gray-800.text-gray-400 { color: var(--on-ink-soft); }
:root .text-gray-100 { color: var(--on-ink); }
:root .hover\:text-gray-900:hover, :root .hover\:text-gray-800:hover,
:root .hover\:text-gray-700:hover, :root .hover\:text-gray-600:hover { color: var(--text); }
:root .group:hover .group-hover\:text-indigo-600 { color: var(--accent-text); }

/* Brand: indigo, purple and the old green save buttons all become maroon,
   so there is one primary colour. */
:root .bg-indigo-600, :root .bg-indigo-500, :root .bg-purple-600, :root .bg-blue-600,
:root .bg-green-600 { background-color: var(--accent); color: var(--on-accent); }
:root .hover\:bg-indigo-700:hover, :root .hover\:bg-blue-700:hover,
:root .hover\:bg-green-700:hover { background-color: var(--accent-hover); }
:root .bg-indigo-50, :root .bg-indigo-100, :root .bg-purple-100 { background-color: var(--accent-soft); }
:root .hover\:bg-indigo-50:hover, :root .hover\:bg-indigo-100:hover { background-color: var(--accent-soft-strong); }
:root .text-indigo-500, :root .text-indigo-600, :root .text-purple-600 { color: var(--accent-text); }
:root .hover\:text-indigo-600:hover, :root .hover\:text-indigo-700:hover { color: var(--accent-text); opacity: 0.85; }
:root .border-indigo-600 { border-color: var(--accent); }
:root .hover\:border-indigo-300:hover { border-color: var(--accent-soft-strong); }
/* Entry avatars were indigo gradients; they become ink tiles. */
:root .bg-gradient-to-br.from-indigo-500,
:root .bg-gradient-to-br.from-indigo-400,
:root .bg-gradient-to-r.from-indigo-500,
:root .bg-gradient-to-r.from-indigo-600 { background-image: none; background-color: var(--ink); color: var(--on-ink); }
:root .peer:checked ~ .peer-checked\:bg-indigo-600 { background-color: var(--accent); }
:root .text-indigo-600[type="checkbox"] { accent-color: var(--accent); }

/* Status tints. */
:root .bg-green-50, :root .bg-green-100 { background-color: var(--success-soft); }
:root .text-green-500, :root .text-green-600, :root .text-green-700 { color: var(--success); }
:root .bg-green-500 { background-color: var(--success); }
:root .border-green-100, :root .border-green-200, :root .border-green-400 { border-color: color-mix(in srgb, var(--success) 30%, transparent); }

:root .bg-red-50, :root .bg-red-100 { background-color: var(--error-soft); }
:root .text-red-400, :root .text-red-500, :root .text-red-600, :root .text-red-700 { color: var(--error); }
:root .hover\:text-red-500:hover { color: var(--error); }
:root .bg-red-600 { background-color: #b42318; }
:root .hover\:bg-red-700:hover { background-color: #962016; }
:root .border-red-100, :root .border-red-200, :root .border-red-400 { border-color: color-mix(in srgb, var(--error) 30%, transparent); }

:root .bg-blue-50, :root .bg-blue-100 { background-color: var(--info-soft); }
:root .text-blue-500, :root .text-blue-600, :root .text-blue-700, :root .text-blue-800, :root .text-blue-900 { color: var(--info); }
:root .hover\:text-blue-600:hover, :root .hover\:text-blue-700:hover { color: var(--info); opacity: 0.85; }
:root .hover\:bg-blue-50:hover { background-color: var(--info-soft); }
:root .border-blue-200, :root .hover\:border-blue-300:hover { border-color: color-mix(in srgb, var(--info) 30%, transparent); }

:root .bg-yellow-50, :root .bg-yellow-100, :root .bg-amber-50, :root .bg-orange-100 { background-color: var(--warning-soft); }
:root .text-yellow-600, :root .text-yellow-800, :root .text-yellow-900, :root .text-amber-700, :root .text-orange-600 { color: var(--warning); }
:root .border-yellow-200, :root .border-amber-100 { border-color: color-mix(in srgb, var(--warning) 30%, transparent); }
:root .bg-amber-600, :root .bg-orange-600 { background-color: #8a5a06; }
:root .hover\:bg-orange-700:hover { background-color: #724a05; }

/* Form controls inside the Tailwind pages. */
:root .bg-white input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
:root .bg-white select,
:root .bg-white textarea {
  border-color: transparent;
  border-radius: 12px;
  background-color: var(--field);
  color: var(--text);
  font-size: 0.9rem;
}
:root .bg-white input::placeholder, :root .bg-white textarea::placeholder { color: var(--text-4); }
:root .bg-white input:focus, :root .bg-white select:focus, :root .bg-white textarea:focus {
  --tw-ring-color: var(--accent-soft-strong);
  border-color: transparent;
  outline: none;
}
:root select option { background: var(--well); color: var(--text); }

:root thead tr.bg-gray-50, :root thead.bg-gray-50 { background-color: transparent; }
:root th { color: var(--text-4); }
:root code.bg-gray-100 { font-family: var(--font-mono); }

/* Headings inside the Tailwind cards pick up the heading face, and stat
   numbers the display face, matching the dashboard. */
:root .bg-white h2, :root .bg-white h3 { font-family: var(--font-heading); letter-spacing: -0.02em; }
:root .bg-white .text-2xl.font-bold,
:root .bg-white .text-lg.font-bold { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.03em; }
:root .bg-white .text-2xl.font-bold { font-size: 2.1rem; line-height: 1.15; }