/* ==========================================================================
   VibeNote workspace — design system
   Source of truth: docs/design (Foundations, Components, Implementation Contract).

   Rules this file keeps (Implementation Contract E.2):
     - one definition per component, in this file
     - flat selectors: one class, specificity 0-1-0; children are .block__child
     - variants are their own classes, never overrides of the base
     - no !important, no id selectors, colours only through the tokens below
   ========================================================================== */

/* ── Phase 1 · Tokens ─────────────────────────────────────────────────────── */
:root {
  /* surfaces */
  --bg: #0A0C11;
  --surface-1: #12151C;
  --surface-2: #191D26;
  --line: rgba(255, 255, 255, .08);
  --line-strong: rgba(255, 255, 255, .14);

  /* text — --text-4 is 18px+ only, never data */
  --text: #F4F6FA;
  --text-2: #A6B0C3;
  --text-3: #7B869B;
  --text-4: #5C6779;

  /* semantic: gold is the one next action, green is live and nothing else */
  --gold: #E0B85F;
  --gold-hover: #EDC876;
  --gold-press: #CFA84F;
  --gold-ink: #1A1205;
  --live: #34D399;
  --progress: #5D9BFF;
  --running: #FBBF24;
  --danger: #FF8A8A;
  --neutral: #7B869B;

  /* interaction states from the Components board */
  --surface-3: #232833;                 /* secondary button hover */
  --line-hover: rgba(255, 255, 255, .22);
  --hover-tint: rgba(255, 255, 255, .06);
  --press-tint: rgba(255, 255, 255, .10);

  /* tints are derived, so no new colour literals enter the file */
  --gold-tint: color-mix(in srgb, var(--gold) 12%, transparent);

  /* type */
  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* space */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  /* radii: 4 + pill */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px;

  /* elevation: cards separate by --line, not shadow */
  --e-1: 0 2px 8px rgba(0, 0, 0, .4);
  --e-2: 0 16px 48px rgba(0, 0, 0, .6);
  --scrim: rgba(0, 0, 0, .6);

  /* motion */
  --d-fast: 120ms; --d-base: 180ms; --d-slow: 260ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);

  /* layout contract */
  --content-max: 1280px;
  --gutter: 24px;
  --sidebar-w: 248px;
  --rail-w: 72px;
  --topbar-h: 68px;
  --bottomnav-h: 60px;
  /* where sticky page headers stop: the page area's own top on desktop, under
     the sticky topbar on phones, where the document scrolls */
  --sticky-top: 0px;
}

@media (max-width: 1199px) { :root { --gutter: 20px; } }
@media (max-width: 767px)  { :root { --gutter: 16px; --sticky-top: var(--topbar-h); } }

/* ── Phase 1 · Reset and layout contract ─────────────────────────────────── */
html, body { overflow-x: clip; }

.app {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 22px;
  -webkit-font-smoothing: antialiased;
}

.app :focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .app *, .app *::before, .app *::after {
    transition-duration: 0ms;
    animation-duration: 0ms;
    scroll-behavior: auto;
  }
}

/* ── Phase 2 · Shell ──────────────────────────────────────────────────────── */
/* Desktop and tablet: the page area scrolls inside a fixed-height shell, so the
   sidebar and topbar never move. Phones scroll the document instead (see the
   767px block), which keeps the browser's own toolbar behaviour. */
.shell {
  display: flex;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
}

.shell__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.shell__main {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  background: var(--bg);
}

/* The page container. */
.page {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--content-max) + 2 * var(--gutter));
  margin: 0 auto;
  padding: var(--gutter);
}

/* ── Sidebar ── */
.sidebar {
  width: var(--sidebar-w);
  flex: none;
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
  border-right: 1px solid var(--line);
  transition: width var(--d-slow) var(--ease-in-out);
}

.sidebar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  min-height: var(--topbar-h);
  box-sizing: border-box;
  padding: 0 var(--s-4);
  border-bottom: 1px solid var(--line);
}

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--text);
  font-size: 15px;
  line-height: 22px;
  font-weight: 800;
  letter-spacing: -.01em;
  text-decoration: none;
}

.sidebar__mono {
  width: 24px;
  height: 24px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  background: var(--gold);
  color: var(--gold-ink);
  font-size: 13px;
  font-weight: 800;
}

.sidebar__word { white-space: nowrap; overflow: hidden; }

.sidebar__nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s-4) var(--s-3);
}

.sidebar__label {
  padding: 6px 10px 10px;
  color: var(--text-3);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.sidebar__label--gap { padding-top: 18px; }

.sidebar__foot {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: 14px var(--s-4);
  border-top: 1px solid var(--line);
}

.sidebar__account {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--text);
  text-decoration: none;
  border-radius: var(--r-sm);
}

.sidebar__account-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.sidebar__account-name {
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar__account-meta {
  color: var(--text-3);
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Nav item ── */
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 40px;
  box-sizing: border-box;
  padding: 10px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
}

.nav-item:hover { background: var(--hover-tint); color: var(--text); }

.nav-item--active,
.nav-item--active:hover {
  background: var(--gold-tint);
  color: var(--gold);
  font-weight: 700;
}

/* the active bar sits flush to the item's left edge */
.nav-item__bar {
  position: absolute;
  left: 0;
  top: 9px;
  bottom: 9px;
  width: 2px;
  border-radius: var(--r-pill);
  background: transparent;
}

.nav-item--active .nav-item__bar { background: var(--gold); }

.nav-item__icon { display: flex; flex: none; }

.nav-item__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Icon button (topbar, sidebar controls) ── */
.icon-btn {
  width: 40px;
  height: 40px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
}

.icon-btn:hover { background: var(--hover-tint); color: var(--text); }

.icon-btn--bare { border-color: transparent; }

/* ── Avatar ── */
.avatar {
  width: 32px;
  height: 32px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

/* ── Topbar ── */
.topbar {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: var(--topbar-h);
  box-sizing: border-box;
  padding: 14px var(--gutter);
  background: var(--surface-1);
  border-bottom: 1px solid var(--line);
  flex: none;
}

.topbar__menu { display: none; }

.topbar__title {
  min-width: 0;
  margin: 0;
  color: var(--text);
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar__search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 340px;
  max-width: 34vw;
  flex: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0 var(--s-3);
  height: 40px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--text-3);
  transition: border-color var(--d-fast) var(--ease-out);
}

.topbar__search:focus-within { border-color: var(--gold); }

.topbar__search-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: 500 14px/20px var(--font);
  outline: none;
}

.topbar__search-input::placeholder { color: var(--text-3); }

.topbar__kbd {
  flex: none;
  padding: 2px 7px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--text-2);
  font: 12px/16px var(--mono);
}

.topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-left: auto;
}

.topbar__search-link { display: none; }

/* The primary action slot. Phase 3 turns this into .btn.btn--primary; until
   then it is scoped to the topbar so it cannot restyle the views' .btn. */
.topbar__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 40px;
  box-sizing: border-box;
  padding: 10px 18px;
  border-radius: var(--r-sm);
  background: var(--gold);
  color: var(--gold-ink);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--d-fast) var(--ease-out);
}

.topbar__cta:hover { background: var(--gold-hover); color: var(--gold-ink); }
.topbar__cta:active { background: var(--gold-press); }

/* ── Rail (72px) ──────────────────────────────────────────────────────────────
   Authored against 72px from scratch. The rail is its own layout, not the
   sidebar with parts hidden: 44px items, the monogram instead of the wordmark,
   labels out of the flow and carried by the tooltip. */
.sidebar--rail { width: var(--rail-w); }

.sidebar--rail .sidebar__head {
  justify-content: center;
  padding: 0;
}

.sidebar--rail .sidebar__mono {
  width: 32px;
  height: 32px;
  font-size: 15px;
}

.sidebar--rail .sidebar__word,
.sidebar--rail .sidebar__collapse,
.sidebar--rail .sidebar__label,
.sidebar--rail .nav-item__label,
.sidebar--rail .sidebar__account-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sidebar--rail .sidebar__nav {
  align-items: center;
  gap: 6px;
  padding: 18px 0;
}

.sidebar--rail .nav-item {
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  justify-content: center;
}

/* bar flush to the rail's left edge: (72 - 44) / 2 = 14 */
.sidebar--rail .nav-item__bar {
  left: -14px;
  top: 11px;
  bottom: 11px;
}

.sidebar--rail .sidebar__foot {
  align-items: center;
  padding: 14px 0;
}

.sidebar--rail .sidebar__account { justify-content: center; }

.sidebar__expand { display: none; }
.sidebar--rail .sidebar__expand { display: inline-flex; width: 44px; height: 44px; }

/* Tablets always get the rail, so there is nothing for the expand button to do. */
@media (min-width: 768px) and (max-width: 1199px) {
  .sidebar--rail .sidebar__expand { display: none; }
}

/* Tooltip: rail only, opens after 300ms, reachable from the keyboard.
   It must not exist outside the rail: an invisible tooltip still overflows the
   scrolling nav and puts a horizontal scrollbar in the expanded sidebar. The
   rail's nav therefore does not scroll (it holds seven 44px items), so the
   tooltip can extend past the rail's edge without being clipped. */
.sidebar--rail .sidebar__nav { overflow: visible; }

.sidebar--rail .nav-item::after,
.sidebar--rail .sidebar__account::after {
  content: attr(data-tip);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  z-index: 50;
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  box-shadow: var(--e-1);
  color: var(--text);
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-4px, -50%);
  visibility: hidden;
  transition: opacity var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out), visibility 0s linear var(--d-fast);
}

.sidebar--rail .nav-item:hover::after,
.sidebar--rail .nav-item:focus-visible::after,
.sidebar--rail .sidebar__account:hover::after,
.sidebar--rail .sidebar__account:focus-visible::after {
  opacity: 1;
  transform: translate(0, -50%);
  visibility: visible;
  transition-delay: 300ms;
}

.sidebar__account { position: relative; }

/* ── Bottom nav and scrim (phones only) ── */
.bottomnav,
.scrim { display: none; }

/* ── Phones: under 768 ────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* the document scrolls; the shell stops clipping */
  .shell {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: visible;
  }

  .shell__main {
    overflow: visible;
    padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px));
  }

  /* the sidebar becomes an off-canvas drawer, always the full layout */
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 90;
    width: min(300px, 86vw);
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    border-radius: 0 var(--r-xl) var(--r-xl) 0;
    box-shadow: var(--e-2);
    transform: translateX(-104%);
    visibility: hidden;
    transition: transform var(--d-slow) var(--ease-in-out), visibility 0s linear var(--d-slow);
  }

  .shell--drawer-open .sidebar {
    transform: translateX(0);
    visibility: visible;
    transition: transform var(--d-slow) var(--ease-out), visibility 0s;
  }

  .scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 80;
    background: var(--scrim);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--d-slow) var(--ease-in-out);
  }

  .shell--drawer-open .scrim { opacity: 1; pointer-events: auto; }

  .sidebar__collapse { display: none; }

  .nav-item { min-height: 44px; }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 70;
    gap: var(--s-2);
    padding: 12px var(--gutter);
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
  }

  .topbar__menu {
    display: inline-flex;
    width: 44px;
    height: 44px;
    margin-left: -10px;
  }

  .topbar__search { display: none; }
  .topbar__search-link { display: inline-flex; }
  .topbar__actions { gap: var(--s-1); }

  .icon-btn { width: 44px; height: 44px; }

  /* the primary action keeps a 44px target, icon only */
  .topbar__cta {
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    justify-content: center;
  }

  .topbar__cta-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .topbar__avatar { display: none; }

  .bottomnav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    position: fixed;
    inset: auto 0 0 0;
    z-index: 70;
    padding: var(--s-1) var(--s-2) calc(var(--s-1) + env(safe-area-inset-bottom, 0px));
    background: var(--surface-1);
    border-top: 1px solid var(--line);
  }

  .bottomnav__item {
    min-height: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s-1);
    border-radius: var(--r-sm);
    color: var(--text-3);
    font-size: 11px;
    line-height: 14px;
    font-weight: 700;
    text-decoration: none;
  }

  .bottomnav__item--active { color: var(--gold); }
}

/* ── Phase 3 · Components ─────────────────────────────────────────────────────
   The phase-3 aliases for the old class names are gone (phase 6); every
   workspace view uses these names. main.css still styles the public pages, and
   on workspace pages it loads first, so rules here restate every property a
   main.css rule of the same name sets, so nothing leaks. */

/* ── Button ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 40px;
  box-sizing: border-box;
  margin: 0;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  box-shadow: none;
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  opacity: 1;
  filter: none;
  transform: none;
  transition: background var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
}

.btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: .4;
  cursor: not-allowed;
}

/* primary: one per screen region */
.btn--primary {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: none;
  color: var(--gold-ink);
}

.btn--primary:hover {
  background: var(--gold-hover);
  border-color: var(--gold-hover);
  box-shadow: none;
  color: var(--gold-ink);
  opacity: 1;
  filter: none;
  transform: none;
}

.btn--primary:active {
  background: var(--gold-press);
  border-color: var(--gold-press);
  transform: none;
}

.btn--secondary {
  background: var(--surface-2);
  border-color: var(--line-strong);
  color: var(--text);
}

.btn--secondary:hover {
  background: var(--surface-3);
  border-color: var(--line-hover);
  color: var(--text);
}

.btn--secondary:active {
  background: var(--surface-1);
  border-color: var(--line-strong);
}

.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-2);
  font-weight: 600;
}

.btn--ghost:hover { background: var(--hover-tint); color: var(--text); }

.btn--ghost:active { background: var(--press-tint); }

.btn--danger {
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  border-color: color-mix(in srgb, var(--danger) 40%, transparent);
  color: var(--danger);
}

.btn--danger:hover {
  background: color-mix(in srgb, var(--danger) 18%, transparent);
  border-color: color-mix(in srgb, var(--danger) 55%, transparent);
  color: var(--danger);
}

.btn--sm {
  min-height: 32px;
  padding: 7px 14px;
  font-size: 13px;
  line-height: 18px;
}

.btn--lg {
  min-height: 48px;
  padding: 12px 24px;
  font-size: 16px;
  line-height: 24px;
}

.btn--block { width: 100%; }

/* ── Status pill ──
   Nine statuses, six looks. The dot carries the hue so the label never relies
   on colour alone. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  box-sizing: border-box;
  padding: 5px 11px 5px 9px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--hover-tint);
  color: var(--text);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: none;
  white-space: nowrap;
}

.pill::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: var(--r-pill);
  background: currentColor;
}

.pill--live {
  background: color-mix(in srgb, var(--live) 14%, transparent);
  border-color: color-mix(in srgb, var(--live) 24%, transparent);
  color: var(--live);
}

.pill--running {
  background: color-mix(in srgb, var(--running) 14%, transparent);
  border-color: color-mix(in srgb, var(--running) 26%, transparent);
  color: var(--running);
}

.pill--progress {
  background: color-mix(in srgb, var(--progress) 14%, transparent);
  border-color: color-mix(in srgb, var(--progress) 26%, transparent);
  color: var(--progress);
}

.pill--error {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  border-color: color-mix(in srgb, var(--danger) 32%, transparent);
  color: var(--danger);
}

.pill--idle {
  background: color-mix(in srgb, var(--neutral) 14%, transparent);
  border-color: color-mix(in srgb, var(--neutral) 28%, transparent);
  color: var(--text-3);
}

/* Generated: built, awaiting review. Present but inert. */
.pill--inert {
  background: var(--line);
  border-color: var(--line-strong);
  color: var(--text);
}

.pill--lg { padding: 7px 14px 7px 12px; font-size: 13px; line-height: 18px; }

/* ── Field ── */
.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.field__label {
  color: var(--text-3);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.input,
.select,
.textarea {
  width: 100%;
  max-width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  margin: 0;
  padding: 11px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text);
  font: 500 14px/20px var(--font);
  transition: border-color var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out);
}

.textarea { min-height: 96px; line-height: 22px; resize: vertical; }

.input::placeholder,
.textarea::placeholder { color: var(--text-3); }

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 25%, transparent);
}

.field__help { color: var(--text-3); font-size: 12px; line-height: 18px; }

.field--error .input,
.field--error .select,
.field--error .textarea { border-color: color-mix(in srgb, var(--danger) 55%, transparent); color: var(--danger); }

.field--error .field__help { color: var(--danger); }

/* ── Panel ── */
.panel {
  box-sizing: border-box;
  min-width: 0;
  padding: var(--s-5);
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: none;
}

.panel--flush { padding: 0; overflow: hidden; }

.panel__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) 20px;
  border-bottom: 1px solid var(--line);
}

.panel__title {
  min-width: 0;
  margin: 0;
  color: var(--text);
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
}

.panel__aside {
  margin-left: auto;
  color: var(--text-3);
  font-size: 13px;
  line-height: 20px;
}

.panel__link {
  margin-left: auto;
  color: var(--gold);
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.panel__link:hover { color: var(--gold-hover); }

.label {
  margin: 0;
  color: var(--text-3);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.count {
  display: inline-flex;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--running) 14%, transparent);
  color: var(--running);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

/* ── Stat tile: only allowed when it links to a queue ── */
.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 18px 20px;
  background: var(--surface-1);
  color: var(--text);
  text-decoration: none;
  transition: background var(--d-fast) var(--ease-out);
}

a.stat:hover { background: var(--surface-2); }

.stat__value {
  color: var(--text);
  font-size: 28px;
  line-height: 36px;
  font-weight: 800;
  letter-spacing: -.01em;
}

.stat__value--running  { color: var(--running); }
.stat__value--live     { color: var(--live); }
.stat__value--progress { color: var(--progress); }
.stat__value--danger   { color: var(--danger); }

.stat__sub {
  color: var(--text-2);
  font-size: 13px;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stat__action {
  color: var(--gold);
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
}

/* ── List rows (queues, recent clients, activity) ── */
.list { margin: 0; padding: 0; list-style: none; }

.list__row {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-width: 0;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
}

.list__row:last-child { border-bottom: 0; }

.list__row--top { align-items: flex-start; gap: var(--s-3); }

.list__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.list__title,
.list__meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list__title { color: var(--text); font-size: 14px; line-height: 22px; font-weight: 700; text-decoration: none; }
.list__title--plain { font-weight: 600; }
.list__title--grow { flex: 1; }
.list__meta  { color: var(--text-2); font-size: 13px; line-height: 20px; }
.list__age   { flex: none; color: var(--text-3); font-size: 12px; line-height: 16px; white-space: nowrap; }
.list__text  { min-width: 0; color: var(--text); font-size: 13px; line-height: 20px; }
.list__when  { color: var(--text-3); font-size: 12px; line-height: 18px; }

.list__empty {
  padding: 20px;
  color: var(--text-3);
  font-size: 13px;
  line-height: 20px;
}

.dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--neutral);
}

.dot--sm       { width: 7px; height: 7px; margin-top: 7px; }
.dot--live     { background: var(--live); }
.dot--running  { background: var(--running); }
.dot--progress { background: var(--progress); }
.dot--danger   { background: var(--danger); }
.dot--gold     { background: var(--gold); }

/* monogram tile for a client */
.monotile {
  width: 32px;
  height: 32px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 800;
}

/* ── Alert ── */
.alert {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0 0 var(--s-4);
  padding: var(--s-4) 18px;
  border: 1px solid var(--line-strong);
  border-left-width: 3px;
  border-radius: var(--r-md);
  background: var(--surface-1);
  color: var(--text-2);
  font-size: 13px;
  line-height: 20px;
}

.alert__title { font-size: 14px; line-height: 22px; font-weight: 700; color: inherit; }
.alert__body  { color: var(--text-2); }

.alert--running {
  background: color-mix(in srgb, var(--running) 7%, transparent);
  border-color: color-mix(in srgb, var(--running) 22%, transparent);
  border-left-color: var(--running);
  color: var(--running);
}

.alert--danger {
  background: color-mix(in srgb, var(--danger) 6%, transparent);
  border-color: color-mix(in srgb, var(--danger) 22%, transparent);
  border-left-color: var(--danger);
  color: var(--danger);
}

.alert--progress {
  background: color-mix(in srgb, var(--progress) 7%, transparent);
  border-color: color-mix(in srgb, var(--progress) 22%, transparent);
  border-left-color: var(--progress);
  color: var(--progress);
}

.alert--live {
  margin: 0 0 var(--s-4);
  padding: var(--s-4) 18px;
  border: 1px solid color-mix(in srgb, var(--live) 22%, transparent);
  border-left: 3px solid var(--live);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--live) 7%, transparent);
  color: var(--live);
  font-size: 13px;
}

/* ── Toast: one position, one elevation ── */
.toast {
  position: fixed;
  right: var(--s-5);
  bottom: var(--s-5);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  max-width: min(420px, calc(100vw - 2 * var(--gutter)));
  box-sizing: border-box;
  padding: 14px var(--s-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface-2);
  box-shadow: var(--e-2);
  color: var(--text);
  font-size: 13px;
  line-height: 20px;
}

/* ── Copy field: DNS records, panel keys ── */
.copyfield {
  display: flex;
  align-items: stretch;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}

.copyfield__value {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  color: var(--text-2);
  font: 12px/20px var(--mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.copyfield__btn {
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
  border: 0;
  border-left: 1px solid var(--line-strong);
  background: transparent;
  color: var(--gold);
  font: 700 12px/20px var(--font);
  cursor: pointer;
}

.copyfield__btn--done { color: var(--live); }

/* ── Empty state: icon, one line, one action ── */
.empty,
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: var(--s-6) 22px;
  text-align: center;
}

.empty__icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  color: var(--text-3);
}

.empty__title { margin: 0; color: var(--text); font-size: 16px; line-height: 24px; font-weight: 700; }
.empty__body  { margin: 0; max-width: 320px; color: var(--text-2); font-size: 13px; line-height: 20px; }

/* ── Menu ── */
.menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 200px;
  box-sizing: border-box;
  padding: 6px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface-2);
  box-shadow: var(--e-1);
}

.menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-2);
  font: 500 13px/20px var(--font);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.menu__item:hover { background: var(--hover-tint); color: var(--text); }
.menu__item--danger { color: var(--danger); font-weight: 600; }
.menu__item--danger:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); }
.menu__sep { height: 1px; margin: 4px 0; background: var(--line); }

/* ── Tabs and the segmented switch ── */
.tabs {
  display: flex;
  gap: 22px;
  border-bottom: 1px solid var(--line);
}

.tabs__item {
  padding: 0 0 11px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-2);
  font: 500 14px/20px var(--font);
  text-decoration: none;
  cursor: pointer;
}

.tabs__item--active { color: var(--text); font-weight: 700; border-bottom-color: var(--gold); }

.seg {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}

.seg__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-2);
  font: 600 13px/18px var(--font);
  cursor: pointer;
}

.seg__item:hover { color: var(--text); }
.seg__item--active,
.seg__item--active:hover { background: var(--gold); color: var(--gold-ink); font-weight: 700; }

/* ── Job progress: the number survives reduced motion ── */
.progress {
  height: 6px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--surface-2);
}

.progress__bar {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--running);
}

.spinner {
  width: 16px;
  height: 16px;
  flex: none;
  box-sizing: border-box;
  border: 2px solid color-mix(in srgb, var(--running) 30%, transparent);
  border-top-color: var(--running);
  border-radius: var(--r-pill);
  animation: vn-spin 800ms linear infinite;
}

@keyframes vn-spin { to { transform: rotate(360deg); } }

.skeleton {
  display: block;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2));
  background-size: 200% 100%;
  animation: vn-shimmer 1.4s linear infinite;
}

@keyframes vn-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ── Modal ── */
.modal {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
  background: var(--scrim);
}

.modal__dialog {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  width: 100%;
  max-width: 440px;
  box-sizing: border-box;
  padding: 22px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  background: var(--surface-2);
  box-shadow: var(--e-2);
}

.modal__title { margin: 0; font-size: 18px; line-height: 26px; font-weight: 700; }
.modal__body  { margin: 0; color: var(--text-2); font-size: 13px; line-height: 20px; }
.modal__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.modal__dialog--wide { max-width: 880px; }

/* ── Table ── */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); }

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  line-height: 20px;
}

.table th {
  padding: 11px var(--s-4);
  border-bottom: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--text-3);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: .06em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.table td {
  padding: 13px var(--s-4);
  background: var(--surface-1);
  color: var(--text-2);
  vertical-align: middle;
}

.table tr { border-bottom: 1px solid var(--line); }
.table tr:last-child { border-bottom: 0; }

/* Phones: every control keeps a 44px target. */
@media (max-width: 767px) {
  .btn,
  .btn--sm,
  .btn--lg { min-height: 44px; }
  .panel { padding: var(--s-4); }
  .toast {
    left: var(--gutter);
    right: var(--gutter);
    max-width: none;
    bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px) + var(--s-3));
  }
  .seg__item { min-height: 44px; }
  .panel__link { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ── Phase 4 · Overview, Projects, Operations ─────────────────────────────── */

.stack { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.stack--tight { gap: var(--s-4); }

/* ── Overview ── */
.overview__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 20px;
  align-items: start;
}

.overview__health { display: none; }

.overview__start {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
}

.overview__start-icon {
  width: 40px;
  height: 40px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: var(--r-md);
  background: var(--surface-1);
  border: 1px solid var(--line-strong);
  color: var(--gold);
}

.overview__start .btn { margin-left: auto; flex: none; }

.metric { display: flex; align-items: baseline; gap: 10px; }

/* Overview deploys: a period switch, and two dates for a custom range. */
.deploys__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); }
.deploys__custom { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.metric__value { font-size: 28px; line-height: 36px; font-weight: 800; letter-spacing: -.01em; }
.metric__sub { color: var(--text-2); font-size: 13px; line-height: 20px; }

.spark {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 56px;
}

.spark__bar {
  flex: 1;
  min-width: 0;
  border-radius: 3px 3px 0 0;
  background: color-mix(in srgb, var(--gold) 45%, transparent);
}

.spark__bar--empty { background: var(--line); }

.spark__axis,
.kv {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: 12px;
  line-height: 16px;
  color: var(--text-3);
}

.kv { font-size: 13px; line-height: 20px; }
.kv__key { color: var(--text-2); }
.kv__val { color: var(--text); font-weight: 700; }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

.recent__when { width: 96px; flex: none; text-align: right; color: var(--text-3); font-size: 13px; line-height: 20px; }

/* ── Projects: one row markup, three renderers ── */
.filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.filterbar__search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 300px;
  max-width: 100%;
  box-sizing: border-box;
  height: 40px;
  padding: 0 var(--s-3);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--text-3);
}

.filterbar__search:focus-within { border-color: var(--gold); }

.filterbar__search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: 500 14px/20px var(--font);
  outline: none;
}

.filterbar__search input::placeholder { color: var(--text-3); }

.filterbar .select {
  width: auto;
  min-height: 40px;
  padding: 9px 13px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  color: var(--text-2);
  background-color: transparent;
}

.filterbar .select--on { background-color: var(--gold); border-color: var(--gold); color: var(--gold-ink); font-weight: 700; }

.filterbar__clear {
  padding: 9px 4px;
  border: 0;
  background: transparent;
  color: var(--gold);
  font: 700 13px/18px var(--font);
  cursor: pointer;
}

.filterbar .seg { margin-left: auto; }

.results { color: var(--text-3); font-size: 13px; line-height: 20px; }

.prows[data-view="list"] {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.prow-head,
.prows[data-view="list"] .prow {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) 150px minmax(0, 1.4fr) 120px 120px 132px 44px;
  gap: 0 var(--s-4);
  align-items: center;
  padding: 0 var(--s-4);
}

.prow-head {
  min-height: 40px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-strong);
}

.prow-head span {
  color: var(--text-3);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.prows:not([data-view="list"]) .prow-head { display: none; }

.prows[data-view="list"] .prow {
  min-height: 56px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--line);
}

.prows[data-view="list"] .prow:nth-child(even) { background: var(--surface-2); }
.prows[data-view="list"] .prow:last-child { border-bottom: 0; }

.prow__client {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.prow__name {
  min-width: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prow__name:hover { color: var(--gold); }

.prow__domain {
  min-width: 0;
  color: var(--text-2);
  font: 12px/18px var(--mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prow__domain--pending { color: var(--running); }
.prow__domain--none { color: var(--text-3); font-family: var(--font); }

.prow__cell { min-width: 0; color: var(--text-3); font-size: 13px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow__action { justify-self: end; }
.prow__menu { position: relative; justify-self: end; }
.prow__sub { display: none; }
.prow__thumb { display: none; }

.prow__menu .menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
}

.icon-btn--sm { width: 36px; height: 36px; }

/* grid and preview: the same row, rendered as a card */
.prows[data-view="grid"],
.prows[data-view="preview"] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.prows[data-view="preview"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.prows[data-view="grid"] .prow,
.prows[data-view="preview"] .prow {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "thumb thumb"
    "client status"
    "domain domain"
    "meta meta"
    "action menu";
  gap: 10px 12px;
  padding: var(--s-4);
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--d-fast) var(--ease-out), background var(--d-fast) var(--ease-out);
}

.prows[data-view="grid"] .prow:hover,
.prows[data-view="preview"] .prow:hover { background: var(--surface-2); border-color: var(--line-strong); }

.prows[data-view="grid"] .prow--error,
.prows[data-view="preview"] .prow--error { border-color: color-mix(in srgb, var(--danger) 40%, transparent); }

.prows:not([data-view="list"]) .prow__client { grid-area: client; }
.prows:not([data-view="list"]) .prow__status { grid-area: status; }
.prows:not([data-view="list"]) .prow__domain { grid-area: domain; }
.prows:not([data-view="list"]) .prow__deploy,
.prows:not([data-view="list"]) .prow__updated { display: none; }
.prows:not([data-view="list"]) .prow__sub { display: block; grid-area: meta; padding-top: 10px; border-top: 1px solid var(--line); color: var(--text-3); font-size: 12px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prows:not([data-view="list"]) .prow__action { grid-area: action; justify-self: stretch; }
.prows:not([data-view="list"]) .prow__btn { width: 100%; }
.prows:not([data-view="list"]) .prow__menu { grid-area: menu; }
.prows:not([data-view="list"]) .monotile { display: none; }
.prows:not([data-view="list"]) .prow__sub-domain { display: none; }

.prows[data-view="preview"] .prow { padding-top: 0; overflow: hidden; }
.prows[data-view="preview"] .prow__thumb {
  display: block;
  grid-area: thumb;
  position: relative;
  height: 150px;
  margin: 0 calc(-1 * var(--s-4));
  overflow: hidden;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}

.prow__thumb iframe {
  width: 400%;
  height: 400%;
  border: 0;
  background: var(--text);
  transform: scale(.25);
  transform-origin: top left;
  pointer-events: none;
}

.prow__thumb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 100%;
  color: var(--text-3);
  font-size: 12px;
  line-height: 16px;
}

/* ── Operations ── */
.ops-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ops-stats .stat__value { font-size: 22px; line-height: 30px; }

.state { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; font-weight: 700; white-space: nowrap; }
.state::before { content: ""; width: 6px; height: 6px; border-radius: var(--r-pill); background: currentColor; flex: none; }
.state--live { color: var(--live); }
.state--running { color: var(--running); }
.state--neutral { color: var(--text-3); }

.ops-table { table-layout: fixed; }
.ops-table .ops-name { color: var(--text); font-size: 14px; font-weight: 600; }
.ops-table .ops-host { font-family: var(--mono); font-size: 12px; }
.ops-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-table .ops-act { text-align: right; overflow: visible; }

.healthy { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-1); }
.healthy > summary {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 52px;
  padding: 0 20px;
  color: var(--text-2);
  font-size: 14px;
  line-height: 22px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.healthy > summary::-webkit-details-marker { display: none; }
.healthy > summary::after { content: "Show"; margin-left: auto; color: var(--gold); font-size: 13px; font-weight: 700; }
.healthy[open] > summary::after { content: "Hide"; }
.healthy[open] > summary { border-bottom: 1px solid var(--line); }
.healthy .table-wrap { border: 0; border-radius: 0 0 var(--r-lg) var(--r-lg); }

.section-head { display: flex; align-items: center; gap: var(--s-3); }

/* column widths: the name gets the room, the action a fixed slot */
.ops-table th:nth-child(1) { width: 30%; }
.ops-table th:nth-child(2) { width: 24%; }
.ops-table th:nth-child(3) { width: 15%; }
.ops-table th.ops-col-deploy,
.ops-table th.ops-col-panel { width: 12%; }
.ops-table th.ops-act { width: 120px; }

/* ── Tablet ── */
@media (max-width: 1199px) {
  .overview__grid { grid-template-columns: minmax(0, 1fr); }
  .overview__side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .ops-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* list keeps Client, Status and the action; the rest folds under the name */
  .prow-head,
  .prows[data-view="list"] .prow { grid-template-columns: minmax(0, 1fr) 140px 132px 44px; }
  .prow-head .prow-head__domain,
  .prow-head .prow-head__deploy,
  .prow-head .prow-head__updated,
  .prows[data-view="list"] .prow__domain,
  .prows[data-view="list"] .prow__deploy,
  .prows[data-view="list"] .prow__updated { display: none; }
  .prows[data-view="list"] .prow {
    grid-template-areas: "client status action menu" "sub status action menu";
    row-gap: 2px;
    padding-block: 10px;
  }
  .prows[data-view="list"] .prow__client { grid-area: client; }
  .prows[data-view="list"] .prow__status { grid-area: status; }
  .prows[data-view="list"] .prow__action { grid-area: action; }
  .prows[data-view="list"] .prow__menu { grid-area: menu; }
  .prows[data-view="list"] .prow__sub {
    display: block;
    grid-area: sub;
    min-width: 0;
    padding-left: 39px;
    color: var(--text-3);
    font-size: 12px;
    line-height: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .prows[data-view="grid"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prows[data-view="preview"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ops-table .ops-col-panel { display: none; }
}

/* ── Phones: two questions only — is everything live, does anything need me ── */
@media (max-width: 767px) {
  .overview .stats,
  .overview__recent,
  .overview__side { display: none; }

  .overview__health {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-4);
    background: var(--surface-1);
    border: 1px solid color-mix(in srgb, var(--live) 24%, transparent);
    border-radius: var(--r-lg);
  }

  .overview__health .dot { width: 10px; height: 10px; }
  .overview__health--warn { border-color: color-mix(in srgb, var(--running) 24%, transparent); }

  .overview .list__row { flex-wrap: wrap; row-gap: 10px; }
  .overview .list__main { flex-basis: calc(100% - 40px); }
  .overview .list__meta { white-space: normal; }
  .overview .list__age,
  .overview .panel__aside { display: none; }
  .overview .list__btn { flex-basis: 100%; }

  .overview__start { flex-wrap: wrap; }
  .overview__start .btn { margin-left: 0; width: 100%; }

  .filterbar__search { width: 100%; height: 44px; }
  .filterbar .select { flex: 1 1 calc(50% - 5px); min-width: 0; min-height: 44px; }
  .filterbar .seg { margin-left: 0; }

  /* list becomes stacked cards: name, status, one line, the action */
  .prow-head { display: none; }
  .prows[data-view="list"] { border: 0; border-radius: 0; overflow: visible; display: flex; flex-direction: column; gap: 10px; }
  .prows[data-view="list"] .prow,
  .prows[data-view="list"] .prow:nth-child(even) {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "client status" "sub sub" "action menu";
    gap: 12px;
    padding: 14px;
    background: var(--surface-1);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
  }
  .prows[data-view="list"] .prow__client { grid-area: client; }
  .prows[data-view="list"] .prow__status { grid-area: status; }
  .prows[data-view="list"] .prow__action { grid-area: action; justify-self: stretch; }
  .prows[data-view="list"] .prow__btn { width: 100%; }
  .prows[data-view="list"] .prow__menu { grid-area: menu; }
  .prows[data-view="list"] .prow__sub { padding-left: 0; }
  .prows[data-view="list"] .monotile { display: none; }

  .prows[data-view="grid"],
  .prows[data-view="preview"] { grid-template-columns: minmax(0, 1fr); }

  .icon-btn--sm { width: 44px; height: 44px; }

  .ops-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ops-table .ops-col-deploy { display: none; }
}

/* ── Phase 5 · Project header, pipeline, ops line ────────────────────────── */

/* The project pages' own wrappers (.gen-shell, .manage-shell…) are columns:
   header on top, page below. Kept as aliases until each page is rebuilt. */
.pshell {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.phead {
  position: sticky;
  top: var(--sticky-top);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-self: stretch;
  padding: 18px var(--gutter);
  background: var(--surface-1);
  border-bottom: 1px solid var(--line);
}

.phead__top {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  min-width: 0;
}

.phead__id {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.phead__crumb { color: inherit; text-decoration: none; }
.phead__crumb:hover { color: var(--text); }

.phead__name {
  color: var(--text);
  font-size: 22px;
  line-height: 30px;
  font-weight: 700;
  letter-spacing: -.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phead__actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: none;
}

.pipeline__stages {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pipeline__stage {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
}

.pipeline__bar {
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--line);
}

.pipeline__label {
  color: var(--text-3);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
}

a.pipeline__label:hover { color: var(--gold-hover); }

.pipeline__note {
  color: var(--text-3);
  font-size: 13px;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pipeline__stage--done .pipeline__bar,
.pipeline__stage--current .pipeline__bar { background: var(--gold); }
.pipeline__stage--done .pipeline__label { color: var(--gold); }
.pipeline__stage--done .pipeline__note { color: var(--text-2); }
.pipeline__stage--current .pipeline__label,
.pipeline__stage--current .pipeline__note { color: var(--text); }
.pipeline__stage--failed .pipeline__bar { background: var(--danger); }
.pipeline__stage--failed .pipeline__label,
.pipeline__stage--failed .pipeline__note { color: var(--danger); }
.pipeline__stage--here .pipeline__label { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }

.pipeline__compact { display: none; }

.pipeline__compact-bar--1 { width: 25%; }
.pipeline__compact-bar--2 { width: 50%; }
.pipeline__compact-bar--3 { width: 75%; }
.pipeline__compact-bar--4 { width: 100%; }
.pipeline__compact-bar { background: var(--gold); }
.pipeline__compact-bar--failed { background: var(--danger); }

.opsline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  min-width: 0;
}

.opsline .state { font-size: 13px; line-height: 20px; }

.opsline__item {
  min-width: 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opsline__item--warn { color: var(--running); }
.opsline .panel__link { margin-left: 0; font-weight: 600; }

@media (max-width: 1199px) {
  .phead__overview { display: none; }
}

@media (max-width: 767px) {
  .phead { gap: 14px; padding: 14px var(--gutter); }
  .phead__top { gap: var(--s-3); flex-wrap: wrap; }
  .phead__back { width: 44px; height: 44px; }
  .phead__name { font-size: 18px; line-height: 26px; }
  .phead__actions { flex-basis: 100%; }
  .phead__actions .btn { flex: 1; }
  .pipeline__stages { display: none; }
  .pipeline__compact {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    background: var(--surface-2);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
  }
  .pipeline__compact-text { font-size: 13px; line-height: 20px; font-weight: 700; }
  .pipeline__compact .progress { height: 3px; }
}

.manage-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-5); }
@media (max-width: 767px) { .manage-actions .btn { flex: 1 1 auto; } }

/* ── Generate: one job panel, three states ── */
.gen-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 20px;
  align-items: start;
}

.gen-job .gen-running,
.gen-job .gen-done { display: none; }
.gen-job[data-state="running"] .gen-idle,
.gen-job[data-state="done"] .gen-idle { display: none; }
.gen-job[data-state="running"] .gen-running { display: flex; }
.gen-job[data-state="done"] .gen-done { display: flex; }

.gen-headline { color: var(--running); }

.gen-pages { margin-top: var(--s-2); }

.gen-page {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 11px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
  line-height: 22px;
}

.gen-page:first-child { border-top: 0; }

.gen-page__name {
  min-width: 0;
  color: var(--text);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gen-page__state {
  flex: none;
  color: var(--text-3);
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
}

.gen-page__state--live    { color: var(--live); }
.gen-page__state--running { color: var(--running); }
.gen-page__state--danger  { color: var(--danger); }

.gen-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;
  color: var(--text);
  font-size: 14px;
  line-height: 22px;
  cursor: pointer;
}

.gen-option input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--gold); flex: none; }
.gen-stop { align-self: flex-start; }

.gen-preview { display: flex; flex-direction: column; gap: 10px; margin-top: var(--s-2); }

.gen-preview__frame {
  width: 100%;
  height: 420px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--text);
}

.gen-fail-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* client.md: edit raw, download. */
.gen-md { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gen-md__editor { min-height: 60vh; font: 400 13px/20px var(--mono); white-space: pre; overflow-wrap: normal; }
.gen-fail-actions .btn--primary { flex: 1; }
.gen-cap { text-transform: capitalize; }
.gen-tpl-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gen-tpl-remove { margin-left: auto; }

.gen-advanced { padding: 0; }

.gen-advanced__summary {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0 20px;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.gen-advanced__summary::-webkit-details-marker { display: none; }
.gen-advanced__summary::after { content: "Show"; margin-left: auto; color: var(--gold); font-size: 13px; font-weight: 700; }
.gen-advanced[open] .gen-advanced__summary::after { content: "Hide"; }
.gen-advanced[open] .gen-advanced__summary { border-bottom: 1px solid var(--line); }
.gen-advanced__body { padding: 20px; }

/* File drop (Components B.3) */
.drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 26px 20px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: var(--bg);
  color: var(--text-3);
  text-align: center;
}

.drop--over {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 7%, transparent);
  color: var(--gold);
}

.drop__text { color: var(--text-2); font-size: 14px; line-height: 22px; }

.drop__browse {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--gold);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

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

/* Publish checklist */
.check { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.check:first-child { border-top: 0; }
.check__label { flex: 1; min-width: 0; color: var(--text-2); font-size: 13px; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.check__value { flex: none; font-size: 12px; line-height: 16px; font-weight: 700; color: var(--text-3); }
.check__value--live    { color: var(--live); }
.check__value--running { color: var(--running); }
.check__value--danger  { color: var(--danger); }

/* ── Phase 6 · Brief wizard ─────────────────────────────────────────────────
   The client fills this from a link, so it has no workspace shell: a steps
   column and one form panel. Embedded in the agency's project page it is the
   form panel alone. Replaces onboarding.css. */
.brief-page { min-height: 100vh; }
.brief-page--embedded { min-height: 0; background: transparent; }

.brief-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  box-sizing: border-box;
  max-width: calc(1120px + 2 * var(--gutter));
  margin: 0 auto;
  padding: 20px var(--gutter);
}

.brief-top__id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.brief-top__name {
  overflow: hidden;
  color: var(--text);
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brief {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  box-sizing: border-box;
  max-width: calc(1120px + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter) var(--s-7);
}

.brief--embedded { grid-template-columns: minmax(0, 1fr); max-width: none; padding: 0; }

.brief-steps { position: sticky; top: 20px; padding: 20px; }
.brief-steps__title { margin: 0 0 var(--s-2); }
.brief-steps__list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }

.brief-step {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.brief-step:first-child { border-top: 0; }

.brief-step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  box-sizing: border-box;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--text-3);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

.brief-step__num--done { border-color: transparent; background: var(--gold-tint); color: var(--gold); }
.brief-step__num--now  { border-color: var(--gold); background: var(--gold); color: var(--gold-ink); }

.brief-step__label {
  min-width: 0;
  overflow: hidden;
  color: var(--text-2);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brief-step__label--now  { color: var(--text); font-weight: 700; }
.brief-step__label--link:hover { color: var(--text); text-decoration: underline; }

.brief-step__note { color: var(--text-3); font-size: 12px; line-height: 16px; font-weight: 700; }
.brief-step__note--now { color: var(--gold); }

.brief-steps__foot { margin: var(--s-4) 0 0; color: var(--text-3); font-size: 12px; line-height: 18px; }

/* Phones only: "Step n of 5" and a bar instead of the list. */
.brief-compact { display: none; }
.brief-compact__text { color: var(--text-2); font-size: 13px; line-height: 20px; font-weight: 700; }
.brief-compact__bar { background: var(--gold); }
.brief-compact__bar--1 { width: 20%; }
.brief-compact__bar--2 { width: 40%; }
.brief-compact__bar--3 { width: 60%; }
.brief-compact__bar--4 { width: 80%; }
.brief-compact__bar--5 { width: 100%; }

.brief-main { padding: var(--s-6); }

.brief-main__title { margin: 0; color: var(--text); font-size: 24px; line-height: 32px; font-weight: 800; }
.brief-main__sub { margin: 6px 0 var(--s-5); color: var(--text-2); font-size: 14px; line-height: 22px; }

.brief-form { display: flex; flex-direction: column; gap: var(--s-5); }

.brief-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }

.brief-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.brief-legend { margin-bottom: 7px; padding: 0; }

.brief-import {
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg);
}

.brief-import__row { display: flex; gap: var(--s-2); }

.field__help--error { color: var(--danger); }
.field__help--ok { color: var(--live); }

/* Repeating rows: services, reviews, questions. */
.repeat { display: flex; flex-direction: column; gap: var(--s-2); }
.repeat__row { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: var(--s-2); }
.repeat__row--pair { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) 44px; }
.repeat__add { align-self: flex-start; }

.repeat__remove {
  width: 44px;
  height: 44px;
  box-sizing: border-box;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-3);
  font-size: 18px;
  cursor: pointer;
}

.repeat__remove:hover { border-color: color-mix(in srgb, var(--danger) 55%, transparent); color: var(--danger); }

.repeat__card {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg);
}

.repeat__card-remove { align-self: flex-end; }

/* Choice cards (radio) and chips (checkbox): the input is hidden, the card
   shows the state, and keyboard focus still shows the ring. */
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.choice-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.choice {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
  padding: var(--s-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color var(--d-fast) var(--ease-out), background var(--d-fast) var(--ease-out);
}

.choice--compact { padding: var(--s-3) 14px; }
.choice:hover { border-color: var(--line-hover); }
.choice:has(:checked) { border-color: var(--gold); background: var(--gold-tint); }
.choice:has(:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }

.choice__name { color: var(--text); font-size: 15px; line-height: 22px; font-weight: 700; }
.choice__desc { color: var(--text-2); font-size: 13px; line-height: 20px; }

.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.chip-check {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  box-sizing: border-box;
  padding: var(--s-2) 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  color: var(--text-2);
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
  cursor: pointer;
}

.chip-check:hover { border-color: var(--line-hover); color: var(--text); }
.chip-check:has(:checked) { border-color: color-mix(in srgb, var(--gold) 50%, transparent); background: var(--gold-tint); color: var(--gold); }
.chip-check:has(:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Colour picker with its hex value. */
.swatch {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  box-sizing: border-box;
  padding: 4px 12px 4px 4px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}

.swatch__input {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}

.swatch__input::-webkit-color-swatch-wrapper { padding: 0; }
.swatch__input::-webkit-color-swatch { border: 0; border-radius: 4px; }
.swatch__input::-moz-color-swatch { border: 0; border-radius: 4px; }
.swatch__hex { color: var(--text-2); font: 500 13px/20px var(--mono); }

/* Uploads: a .drop the whole of which is the file input. */
.drop--file { position: relative; cursor: pointer; }
.drop--file:has(:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }

.drop__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.drop__preview { max-width: 200px; max-height: 72px; object-fit: contain; border-radius: var(--r-sm); }

.upload-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 12px;
  line-height: 18px;
}

.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--s-3); }

.thumb {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding-bottom: var(--s-2);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
}

.thumb__img { display: block; width: 100%; height: 96px; object-fit: cover; }

.thumb__name {
  padding: 0 var(--s-2);
  overflow: hidden;
  color: var(--text-2);
  font-size: 12px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thumb__badge { align-self: flex-start; margin: 0 var(--s-2); }

.thumb__remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  color: var(--text);
  font-size: 16px;
  cursor: pointer;
}

.thumb__remove:hover { background: var(--danger); color: var(--bg); }

.brief-skip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
  padding: 14px 18px;
  border: 1px solid color-mix(in srgb, var(--gold) 25%, transparent);
  border-radius: var(--r-md);
  background: var(--gold-tint);
}

.brief-skip__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.brief-skip__title { color: var(--gold); font-size: 13px; line-height: 20px; font-weight: 700; }

.brief-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-3);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}

/* The agency's project page that embeds the wizard. */
.brieffill__bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.brieffill__track { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.brieffill__name { color: var(--text); font-size: 17px; line-height: 24px; font-weight: 700; }
.brieffill__progress { max-width: 480px; margin-top: 6px; }
.brieffill__frame { display: block; width: 100%; height: 720px; border: 0; background: transparent; }

@media (max-width: 1199px) {
  .brief { grid-template-columns: 220px minmax(0, 1fr); }
  .brief--embedded { grid-template-columns: minmax(0, 1fr); }
  .choice-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phones: one column, one line of progress, and the action stays in reach. */
@media (max-width: 767px) {
  .brief { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .brief--embedded { gap: 0; }
  .brief-top { padding: var(--s-4) var(--gutter); }
  .brief-steps { display: none; }
  .brief-compact { display: flex; flex-direction: column; gap: var(--s-2); }
  .brief-main { padding: var(--s-4); }
  .brief-main__title { font-size: 20px; line-height: 28px; }
  .brief-row,
  .choice-grid { grid-template-columns: minmax(0, 1fr); }
  .repeat__row--pair { grid-template-columns: minmax(0, 1fr) 44px; }
  .repeat__second { grid-row: 2; grid-column: 1; }
  .chip-check { min-height: 44px; }
  .brief-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 0 calc(-1 * var(--s-4)) calc(-1 * var(--s-4));
    padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
    background: var(--surface-1);
  }
  .brief-actions__primary { flex: 1; }
  .brieffill__bar { flex-direction: column; align-items: stretch; }
}

/* ── Phase 6 · Client panel ─────────────────────────────────────────────────
   The workspace shell and components, stripped to content work. The panel's
   private stylesheet (every .vpanel-* style) is gone. */
.nav-item--button,
.bottomnav__item--button {
  width: 100%;
  margin: 0;
  border: 0;
  background: transparent;
  font-family: var(--font);
  text-align: left;
  cursor: pointer;
}

.cp-note { margin: 0; color: var(--text-3); font-size: 12px; line-height: 18px; }

.cp-status {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4);
}

.cp-status__main { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); min-width: 0; }
.cp-status__title { margin: 0; color: var(--text); font-size: 22px; line-height: 30px; font-weight: 800; overflow-wrap: anywhere; }
.cp-status__meta { margin: 0; color: var(--text-2); font-size: 13px; line-height: 20px; }
.cp-status__actions { display: flex; flex-wrap: wrap; gap: 10px; }

.cp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }

.cp-link { padding: 0; border: 0; background: transparent; font-family: var(--font); cursor: pointer; }

.cp-intro__title { margin: 0; color: var(--text); font-size: 22px; line-height: 30px; font-weight: 800; }
.cp-intro__sub { margin: 4px 0 0; color: var(--text-2); font-size: 14px; line-height: 22px; }

.cp-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
.cp-file { color: var(--text-3); font: 500 12px/16px var(--mono); }

.cp-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.cp-form__full { grid-column: 1 / -1; }

.cp-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.cp-actions--start { justify-content: flex-start; }

.cp-textarea--tall { min-height: 280px; }

.cp-assets { display: flex; flex-wrap: wrap; gap: 20px; }

.cp-asset {
  width: 180px;
  height: 96px;
  box-sizing: border-box;
  padding: var(--s-3);
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg);
}

.cp-asset--icon { width: 72px; height: 72px; }

.cp-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s-3); }

.cp-media__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
}

.cp-media__img { width: 100%; height: 120px; object-fit: cover; border-radius: var(--r-sm); background: var(--bg); }

.cp-selected { background: var(--gold-tint); }

/* The panel's sign-in page. */
.cp-access {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  box-sizing: border-box;
  padding: var(--gutter);
}

.cp-access__card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 420px;
  padding: var(--s-6);
}

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

@media (max-width: 767px) {
  .cp-form { grid-template-columns: minmax(0, 1fr); }
  .cp-hide-phone { display: none; }
  .cp-status { align-items: stretch; }
  .cp-status__actions { width: 100%; }
}

/* ── Template gallery ──
   The card and its thumbnail frame come from the template styles already in
   main.css; what the gallery adds is the row of filter values under the name,
   and the mark on a template that suits the brief being worked on. */
.tpl__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.tpl--rec {
  border-color: color-mix(in srgb, var(--live) 34%, transparent);
}

/* ── Phase 7 · Auth ───────────────────────────────────────────────────────
   One shell for sign in, sign up, onboarding and the password pages: proof on
   the left, the form on the right. Under 900px the proof panel is removed from
   the layout rather than stacked, so the form opens at the top of the screen.
   (900 is not a layout breakpoint here - the panel is dropped at 768 with the
   rest of the tablet layout.) */
.auth {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  min-height: 100vh;
  background: var(--bg);
}

.auth__proof {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  overflow: hidden;
  padding: 40px;
  background: var(--surface-1);
  border-right: 1px solid var(--line);
}

.auth__glow {
  position: absolute;
  top: -180px;
  left: -160px;
  width: 520px;
  height: 520px;
  border-radius: var(--r-pill);
  background: radial-gradient(circle, color-mix(in srgb, var(--gold) 16%, transparent), transparent 62%);
  pointer-events: none;
}

.auth__mark {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  align-self: flex-start;
  color: var(--text);
  font-size: 15px;
  line-height: 22px;
  font-weight: 800;
  letter-spacing: -.01em;
  text-decoration: none;
}

.auth__mark-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-sm);
  background: var(--gold);
  color: var(--gold-ink);
  font-size: 14px;
  font-weight: 800;
}

.auth__pitch {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: auto;
  max-width: 460px;
}

.auth__headline {
  margin: 0;
  color: var(--text);
  font-size: 28px;
  line-height: 36px;
  font-weight: 800;
  letter-spacing: -.01em;
  text-wrap: pretty;
}

.auth__proofs {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.auth__proof-row {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  color: var(--text-2);
  font-size: 14px;
  line-height: 22px;
}

.auth__tick {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--live) 14%, transparent);
  color: var(--live);
}

.auth__pane {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 44px;
}

.auth__form {
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 100%;
  max-width: 372px;
}

.auth__head {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.auth__title {
  margin: 0;
  color: var(--text);
  font-size: 28px;
  line-height: 36px;
  font-weight: 800;
  letter-spacing: -.01em;
}

.auth__sub {
  margin: 0;
  color: var(--text-2);
  font-size: 14px;
  line-height: 22px;
}

.auth__link {
  color: var(--gold);
  font-weight: 700;
  text-decoration: none;
}

.auth__link:hover { color: var(--gold-hover); }
.auth__link--sm { font-size: 13px; line-height: 20px; font-weight: 600; }

/* The step rail is the only place sign-up step state lives. */
.auth__steps {
  display: flex;
  gap: var(--s-2);
}

.auth__step {
  flex: 1;
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
}

.auth__step--on { background: var(--gold); }

.auth__google { justify-content: center; gap: var(--s-3); height: 44px; }

.auth__or {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.auth__or::before,
.auth__or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

.auth__fields {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  margin: 0;
}

.field__labelrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
}

.auth__pw { position: relative; display: flex; }
.auth__pw .input { padding-right: 62px; }

.auth__pw-toggle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  padding: 0 13px;
  border: 0;
  background: transparent;
  color: var(--text-2);
  font: 700 12px/16px var(--font);
  cursor: pointer;
}

.auth__pw-toggle:hover { color: var(--text); }

.auth__check {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  color: var(--text-2);
  font-size: 14px;
  line-height: 22px;
}

.auth__check input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--gold);
  flex: none;
}

/* One message, directly above the submit button. Never a toast. */
.auth__error {
  margin: 0;
  color: var(--danger);
  font-size: 13px;
  line-height: 20px;
}

.auth__foot {
  margin: 0;
  color: var(--text-3);
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}

@media (max-width: 1199px) {
  .auth { grid-template-columns: minmax(0, 1fr) 420px; }
}

@media (max-width: 767px) {
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth__proof { display: none; }
  .auth__pane { align-items: flex-start; padding: 32px var(--gutter) calc(32px + env(safe-area-inset-bottom)); }
  .auth__form { max-width: none; }
}

/* ── Phase 7 · Agency profile ─────────────────────────────────────────────
   Identity band, then details on the left and what the client sees on the
   right. Save is explicit: one button, disabled until something is dirty. */
.profile {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.profile__bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
}

.profile__title {
  margin: 0;
  color: var(--text);
  font-size: 22px;
  line-height: 30px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.profile__sub {
  margin: 2px 0 0;
  color: var(--text-2);
  font-size: 14px;
  line-height: 22px;
}

.profile__bar-actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.profile__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 20px;
  align-items: start;
}

.profile__main,
.profile__side {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.idband {
  display: flex;
  align-items: center;
  gap: var(--s-5);
}

.idband__avatar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 84px;
  height: 84px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  color: var(--gold);
  font-size: 26px;
  font-weight: 800;
}

.idband__logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--s-2);
  box-sizing: border-box;
}

.idband__id {
  flex: 1;
  min-width: 0;
}

.idband__namerow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
}

.idband__name {
  color: var(--text);
  font-size: 28px;
  line-height: 36px;
  font-weight: 800;
  letter-spacing: -.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.idband__meta {
  margin: var(--s-1) 0 0;
  color: var(--text-2);
  font-size: 14px;
  line-height: 22px;
}

.idband__replace { flex: none; cursor: pointer; }

.fieldgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
  padding: 20px;
}

.brand__intro {
  margin: 0;
  padding: var(--s-4) 20px 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 20px;
}

.brand__note {
  margin: 0;
  padding: var(--s-3) 20px 20px;
  color: var(--text-3);
  font-size: 12px;
  line-height: 18px;
}

.brandrow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) 20px;
}

.brandrow__swatch {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}

.brandrow__swatch--logo { background: var(--surface-2); }

.brandrow__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brandrow__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.brandrow__label {
  color: var(--text);
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
}

.brandrow__value {
  color: var(--text-3);
  font: 12px/18px var(--mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

@media (max-width: 767px) {
  .fieldgrid { grid-template-columns: minmax(0, 1fr); }
  .idband { flex-wrap: wrap; gap: var(--s-4); }
  .idband__name { font-size: 22px; line-height: 30px; }
  .profile__bar-actions { width: 100%; }
}

/* ── Phase 7 · Project overview ───────────────────────────────────────────
   "Screens - Auth, Agency Profile, Project Overview": one title, one status
   pill, tabs in the header, and the four stages as a strip that states the
   fact proving each one finished. The four action cards are gone. */

.phead__title {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
}

.phead__more { position: relative; }

/* The header's tab row sits on the header's own bottom edge. */
.tabs--phead {
  margin-bottom: -18px;
  border-bottom: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs--phead .tabs__item { padding-bottom: 16px; white-space: nowrap; }

/* A primary action that is only reporting (a build in flight) does not invite
   a click, but stays legible. */
.btn--busy { pointer-events: none; opacity: .65; }

.btn--danger-ghost {
  border-color: color-mix(in srgb, var(--danger) 36%, transparent);
  color: var(--danger);
}

.btn--danger-ghost:hover { border-color: var(--danger); color: var(--danger); }

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

.pov__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 20px;
  align-items: start;
}

.pov__main,
.pov__side {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

/* ── Pipeline strip ── */
.pipe { padding: 0; overflow: hidden; }

.pipe__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--line);
}

.pipe__cell {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
  padding: 18px 20px;
  background: var(--surface-1);
}

.pipe__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--text-3);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

.pipe__cell--done .pipe__mark {
  background: color-mix(in srgb, var(--live) 16%, transparent);
  color: var(--live);
}

.pipe__cell--running .pipe__mark {
  background: color-mix(in srgb, var(--running) 16%, transparent);
  color: var(--running);
}

.pipe__cell--failed .pipe__mark {
  background: color-mix(in srgb, var(--danger) 16%, transparent);
  color: var(--danger);
}

.pipe__name {
  color: var(--text);
  font-size: 14px;
  line-height: 22px;
  font-weight: 700;
}

.pipe__fact {
  color: var(--text-2);
  font-size: 13px;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pipe__action {
  color: var(--text-2);
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  text-decoration: none;
}

.pipe__action:hover { color: var(--text); }
.pipe__action--next { color: var(--gold); }
.pipe__action--next:hover { color: var(--gold-hover); }
.pipe__action--off { color: var(--text-4); }

/* ── The site itself ── */
.sitecard {
  display: flex;
  gap: 20px;
  padding: 20px;
}

.sitecard__shot {
  position: relative;
  flex: none;
  width: 220px;
  height: 132px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface-2);
}

.sitecard__bar {
  position: absolute;
  inset: 0 0 auto;
  height: 16px;
  background: var(--surface-3);
  border-bottom: 1px solid var(--line);
}

.sitecard__frame {
  position: absolute;
  top: 16px;
  left: 0;
  width: 1280px;
  height: 800px;
  border: 0;
  transform: scale(.172);
  transform-origin: 0 0;
  pointer-events: none;
}

.sitecard__empty {
  position: absolute;
  inset: 16px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  font-size: 13px;
  line-height: 20px;
}

.sitecard__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--s-3);
  min-width: 0;
}

.sitecard__sum {
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 20px;
}

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
}

.fact {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
}

.fact__value {
  color: var(--text);
  font-size: 14px;
  line-height: 22px;
  font-weight: 700;
}

.fact__value--live { color: var(--live); }
.fact__value--running { color: var(--running); }

/* ── Share with client ── */
.share { padding: 0; }
.share .field { padding: var(--s-4) 20px 0; }

.share__key { font-family: var(--mono); }

.share__actions {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-4) 20px 20px;
}

.share__actions form { margin: 0; }

/* ── Details, with delete as its last row ── */
.details { padding: 0; }

.kv {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0 20px;
}

.kv__row {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.kv__label {
  flex: none;
  width: 112px;
  color: var(--text-3);
  font-size: 13px;
  line-height: 20px;
}

.kv__value {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kv__value--mono { font-family: var(--mono); }

.details__delete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4) 20px;
}

.details__delete-text {
  color: var(--text-3);
  font-size: 13px;
  line-height: 20px;
}

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

@media (max-width: 767px) {
  .pipe__grid { grid-template-columns: minmax(0, 1fr); }
  .sitecard { flex-direction: column; }
  .sitecard__shot { width: 100%; }
  .sitecard__frame { transform: scale(.26); }
  .phead__visit { display: none; }
}

/* ── Phase 8 · Design system picker ───────────────────────────────────────
   A name and a sentence cannot say what a design looks like. The catalogue
   carries each design's real palette, so every card shows it: the primary takes
   the room, the supporting colours sit beside it. The colours themselves are
   inline on the element - they belong to the design, not to this stylesheet. */
.dsn-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
}

.dsn-tools .input,
.dsn-tools .select {
  flex: 1 1 180px;
  width: auto;
  min-height: 38px;
  padding: 8px 12px;
  font-size: 13px;
}

.dsn-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-2);
  max-height: 340px;
  overflow-y: auto;
  padding: 2px;
}

.dsn {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 0 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text-2);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--d-fast) var(--ease-out), background var(--d-fast) var(--ease-out);
}

.dsn:hover {
  border-color: var(--line-hover);
  background: var(--hover-tint);
}

.dsn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

.dsn--on {
  border-color: var(--gold);
  background: var(--gold-tint);
}

.dsn__specimen {
  display: flex;
  height: 46px;
  width: 100%;
  border-bottom: 1px solid var(--line);
}

.dsn__swatch {
  flex: 1 1 0;
  min-width: 0;
}

.dsn__swatch--lead {
  flex-grow: 3;
}

/* The "no design" card shows no palette, because it has none to show. */
.dsn__specimen--auto {
  background: var(--surface-3);
}

.dsn__name {
  padding: 0 10px;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
}

.dsn__note {
  display: -webkit-box;
  padding: 0 10px;
  color: var(--text-3);
  font-size: 11px;
  line-height: 15px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dsn-empty {
  grid-column: 1 / -1;
  padding: var(--s-4);
  color: var(--text-3);
  font-size: 13px;
  text-align: center;
}

@media (max-width: 767px) {
  .dsn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 300px; }
}

/* [hidden] must win over components that set display (menus, modals, empty
   states). Placed last so it also beats equal-specificity component rules. */
.app [hidden] { display: none; }