/* Roundtable entry app — THE INSTRUMENT, operator side (WS1, 2026-08-11).
   ------------------------------------------------------------------
   The dashboard got the instrument pass on 2026-08-11 and this app did
   not, so for one day the product had two design systems: reticled
   hairline panels and mono-first density over there, rounded cards and
   sans over here. This sheet closes that fork. It is the SAME move the
   dashboard made — the class names are untouched, so not one renderer
   changes; only the values under them do.

   ONE TOKEN AUTHORITY. /dashboard/tokens.css (loaded first by
   index.html, and already on the served allowlist) owns every :root in
   the product. This sheet declares NONE — the old alias block
   (--paper/--wash/--navy/--teal/--danger/--focus…) is gone, and the
   rules below name the shared tokens directly. That is the "honest
   renaming" the 2026-08-09 collapse promised: two names for one colour
   is how a second design system starts. Guards test_p4 (no :root here)
   and test_p4b (every var() names a real token) hold it.

   DARK MODE ARRIVES WITH THE TOKENS. Nothing below is theme-aware on
   its own; every surface, rule and state colour is a token, so both
   themes fall out of tokens.css. The explicit `data-theme` stamp beats
   the OS default in both directions — theme.js does the stamping.

   TWO DELIBERATE DIFFERENCES FROM THE DASHBOARD, kept on purpose:
   1. This app stays TOP-NAV. Staff read it on a phone, mid-morning,
      standing up; a 210px left rail is furniture they cannot afford.
   2. FORM INPUTS STAY BIG. 44px targets, roomy padding, one column at
      375px. Density is for reading, not for typing — the dashboard's
      12.5px rows would be a data-entry accident here.

   TYPE (D1.1, the recommendation applied): mono is the voice for
   VALUES and metadata — inputs, tables, badges, buttons, chrome — and
   sans carries QUESTION TEXT and prose, because legibility while
   typing beats aesthetic purity. Clash Display survives in the
   wordmark only.

   Unchanged commitments: 44px touch targets, visible focus, no
   horizontal scroll at 375px, one reduced-motion standdown. */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  /* mono first — this one line is most of the character change */
  font: 13px/1.5 var(--mono);
  font-variant-numeric: tabular-nums;
  /* the faint blueprint grid from the dashboard: the ground reads as a
     surface being measured rather than a page. Brand v2: recoloured to
     var(--dot), matching the marketing site's dot-grid. */
  background-image: radial-gradient(var(--dot) 1.2px, transparent 1.2px);
  background-size: 34px 34px;
}
/* prose and question text are the exception, not the rule */
p, legend, .field label, .note, .muted, .who-role, .lead-why,
.setup-conn-steps li, .login-legal, .warn-list li,
.dialog-body p, .conn-sub, .conn-meta { font-family: var(--sans); }

/* ---- type: the display face leads a page, the mono bands a panel. */
h1, h2, h3 {
  font-family: var(--disp);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
h1 { font-size: 1.45rem; margin: 0 0 4px; }
h2 { font-size: 1.02rem; margin: 0; }
h3 { font-size: 0.95rem; margin: 14px 0 6px; }
#brand {
  font-family: "Clash Display", "GT America", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Helvetica, Arial, sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ---- chrome: the dev strip is a terminal, dark in BOTH themes ---- */
#dev-banner {
  /* --term-* rather than --ai: the terminal accents are the ones that
     hold their value across BOTH themes, and this strip is dark in
     both. --ai is tuned for readability on a white card, which is the
     opposite surface. */
  background: var(--topbar);
  color: var(--term-warn);
  text-align: center;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  padding: 6px 12px;
  position: sticky;
  top: 0;
  z-index: 30;
}

#topbar {
  position: relative;
  /* Brand v2 (2026-08-14): glass over the page's dot-grid ground, same
     treatment as the dashboard's #topbar — rgba fill, blur/saturate,
     hairline, inset top highlight. */
  background: var(--glass-bg);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  color: var(--ink);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-hi);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  padding: 8px 16px;
}
.tb-row { display: flex; align-items: center; justify-content: space-between;
  width: 100%; gap: 8px; }
#brand { display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink); font-size: 1.02rem; margin-right: auto; }
/* Scryos brand (kit v1.1): the header artwork IS the brand text; never
   below the kit's 120px wordmark floor. wm-light/wm-dark mirror the
   tokens.css theme rules - stamp wins, OS preference is the default. */
.brand-wordmark { width: 120px; height: auto; display: block; }
.wm-dark { display: none; }
html[data-theme="dark"] .wm-light { display: none; }
html[data-theme="dark"] .wm-dark { display: block; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .wm-light { display: none; }
  html:not([data-theme="light"]) .wm-dark { display: block; }
}

/* the theme toggle sits in the top bar, the same seat the dashboard
   gives it (D1.2) — one product, one place to change the light */
#themeBtn {
  background: transparent; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r);
  color: var(--muted); font: 600 9.5px var(--mono); letter-spacing: 0.1em;
  min-height: 30px; padding: 2px 9px;
}
#themeBtn:hover { border-color: var(--ink); color: var(--ink); }

/* the nav is a control strip, not a website menu */
#mainnav { display: flex; gap: 4px; width: 100%; flex-wrap: nowrap;
  overflow-x: auto; scrollbar-width: none; padding-bottom: 8px; }
#mainnav::-webkit-scrollbar { display: none; }
.nav-btn {
  background: transparent;
  color: var(--muted);
  border: 1px solid transparent;
  border-radius: var(--r);
  min-height: 40px;
  padding: 0 11px;
  font: 600 10.5px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  flex: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.nav-btn:hover { background: var(--soft); color: var(--ink); }
/* the active page is the ink pill - the dashboard's own nav grammar */
.nav-btn[aria-current="page"] {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.nav-dash { color: var(--blue); }
.nav-support { margin-left: auto; color: var(--muted); }

#menuBtn { width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--card);
  color: var(--ink); font: 600 13px var(--mono); cursor: pointer;
  flex: none; }
#menuBtn:hover { border-color: var(--ink); }
#menu { position: absolute; right: 10px; top: 54px; z-index: 40;
  background: var(--card); color: var(--ink); border-radius: var(--r);
  border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(7,37,28,0.16);
  min-width: 220px; padding: 8px; }
#whoami { display: block; font-size: 0.95rem; }
.who-name { margin: 6px 10px 0; font-weight: 600; color: var(--ink); }
.who-role { margin: 0 10px 6px; color: var(--muted); font-size: 0.8rem;
  letter-spacing: 0.08em; text-transform: uppercase; }
.menu-item { display: block; width: 100%; box-sizing: border-box;
  text-align: left; background: none; border: none; border-top: 1px solid
  var(--line); color: var(--ink); font: 12.5px var(--mono); padding: 12px 10px;
  min-height: 44px; cursor: pointer; text-decoration: none; }
.menu-item:hover { background: var(--bg); }

#main {
  max-width: 760px;
  margin: 0 auto;
  padding: 14px 12px 60px;
}

/* ---- shared text + layout helpers ---- */
.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin: 8px 0 12px;
}
.sched-controls { display: flex; gap: 10px; flex-wrap: wrap; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.muted.small { margin: 4px 0; }
.note { color: var(--muted); font-size: 0.88rem; margin: 6px 0; }
.warn { color: var(--warn); font-size: 0.88rem; margin: 6px 0; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- cards: flat hairline panels with corner reticles (WS1) ----
   The 12px rounded card was the single most "web app" thing on this
   screen; the bracket marks replace it and read as targeting — the
   same swap port.css made for .panel, on the class the entry
   renderers already build.

   Frames stay OPT-IN carriers: a border is information, and
   information that is everywhere is decoration. .bz-act asks for a
   ruling, .bz-ai is model-written, .bz-warn attention, .bz-bad
   critical. The carrier values are TOKENS now, matching the
   dashboard's own .panel.bz-* overrides. */
.bz-act{--bz:var(--blue)}
.bz-ai{--bz:var(--ai)}
.bz-warn{--bz:var(--warn)}
.bz-bad{--bz:var(--bad)}

.cards { display: flex; flex-direction: column; gap: 14px; }
.card {
  /* Brand v2: subtle glass tint over the dot-grid ground, matching the
     dashboard's .panel/.kcard. The corner reticles below already carry
     the corner-bracket treatment (retinted purple in tokens.css). */
  background: var(--glass-card-bg);
  backdrop-filter: blur(8px) saturate(1.15);
  -webkit-backdrop-filter: blur(8px) saturate(1.15);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 14px;
  position: relative;
  transition: box-shadow .25s, transform .25s;
}
.card::before, .card::after {
  content: ""; position: absolute; width: 7px; height: 7px;
  pointer-events: none; }
.card::before { top: -1px; left: -1px;
  border-top: 1.5px solid var(--reticle); border-left: 1.5px solid var(--reticle); }
.card::after { bottom: -1px; right: -1px;
  border-bottom: 1.5px solid var(--reticle); border-right: 1.5px solid var(--reticle); }
/* one restrained specular treatment on hover — a purple-tinted glow
   lift rather than a diagonal sheen sweep, because ::before/::after
   already carry the corner reticles (see above); prefers-reduced-
   motion is handled by the blanket transition-duration rule below. */
.card:hover { transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(124,92,196,.16); }
/* carriers AFTER the quiet defaults - at equal specificity the frame
   must win the cascade over .card/.group. The reticles take the
   function colour too, so the brackets say what the border says. */
.bz-frame { border: 1px solid var(--bz); border-radius: var(--r); }
.bz-frame::before, .bz-frame::after { border-color: var(--bz); }
/* a row-level functional marker (e.g. an AI-drafted action awaiting a
   human ruling): the frame color as a left rule, not a full border */
.ai-draft { border-left: 3px solid var(--bz); padding-left: 10px; }
.card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

/* ---- badges: a state readout, not a badge. Squared off, mono,
   uppercase — and every colour is a semantic token, so red/amber/
   green mean the same thing here as they do on the dashboard. */
.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--r);
  padding: 3px 8px;
  border: 1px solid var(--line);
  background: var(--chip);
  color: var(--muted);
  white-space: nowrap;
}
/* Draft is NOT a colour any more: an unfinished thing has no state to
   report yet, and giving it the accent put "not started" and "handed
   in" at the same visual weight. Progression now reads
   quiet -> accent -> good. */
.badge-draft     { background: var(--chip); color: var(--muted);
                   border-color: var(--line); }
.badge-submitted { background: var(--blue-bg); color: var(--blue);
                   border-color: var(--blue); }
.badge-reviewed  { background: var(--good-bg); color: var(--good);
                   border-color: var(--good); }
.badge-voided    { background: var(--bad-bg); color: var(--bad);
                   border-color: var(--bad); }
.badge-late      { background: var(--warn-bg); color: var(--warn);
                   border-color: var(--warn); }
/* Proxy is metadata about AUTHORSHIP, not a state, so it takes no
   semantic hue - an ink outline, which reads as "noted" rather than
   as good/bad. (The old violet was borrowed from nothing.) */
.badge-proxy     { background: var(--chip); color: var(--ink);
                   border-color: var(--ink); }
.badge-hyg       { background: var(--blue-bg); color: var(--blue);
                   border-color: var(--blue); }
.badge-closed, .badge-pto, .badge-off
                 { background: var(--chip); color: var(--faint);
                   border-color: var(--line); }
.badge-todo      { background: var(--card); color: var(--ink);
                   border-color: var(--ink); }
.badge-open      { background: var(--blue-bg); color: var(--blue);
                   border-color: var(--blue); }
.badge-loc       { background: var(--ink); color: var(--bg);
                   border-color: var(--ink); }
.badge-connected { background: var(--good-bg); color: var(--good);
                   border-color: var(--good); }
.badge-ok        { background: var(--good-bg); color: var(--good);
                   border-color: var(--good); }
.badge-warn      { background: var(--warn-bg); color: var(--warn);
                   border-color: var(--warn); }
.badge-pipe-off  { background: var(--chip); color: var(--faint); }
.badge-pipe-bad  { background: var(--bad-bg); color: var(--bad);
                   border-color: var(--bad); }

/* ---- rows (My Day, review queue) ---- */
.form-row {
  border-top: 1px solid var(--line);
  padding: 10px 0;
}
.form-row:last-child { padding-bottom: 0; }
.form-row-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.form-name { font-weight: 600; }
.queue-row .form-name { font-size: 0.95rem; }
.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

/* ---- buttons: controls, not web furniture. Touch targets are
   UNCHANGED at 40/44px - this is a phone app and the instrument pass
   is a font/colour/corner change here, never a shrink. */
.btn {
  min-height: 40px;
  padding: 0 14px;
  border-radius: var(--r);
  border: 1px solid var(--ink);
  background: var(--card);
  color: var(--ink);
  font: 600 10.5px var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.btn-primary { background: var(--ink); border-color: var(--ink);
               color: var(--bg); }
.btn-danger  { background: var(--card); border-color: var(--bad);
               color: var(--bad); }
.btn-quiet   { border-color: var(--line); color: var(--muted); }
.btn-identity {
  display: block;
  width: 100%;
  text-align: left;
  margin-top: 8px;
  /* an identity is a NAME, and a name is not a control label */
  font: 13px var(--mono);
  letter-spacing: 0;
  text-transform: none;
  padding: 10px 12px;
  min-height: 44px;
}
.btn:hover { filter: brightness(0.96); }
#whoami .btn { min-height: 36px; }
/* bare link-actions: tertiary and destructive-but-deliberate controls */
.btn-link { background: none; border: none; padding: 10px 4px;
  min-height: 44px; color: var(--ink); font: 12.5px var(--sans);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.btn-link-danger { color: var(--bad); }

/* Focus is the accent, at 3px: the dashboard's 2px ring is read at a
   desk, this one is found with a thumb in daylight. */
:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

/* ---- fields + inputs: THE PLACE DENSITY DOES NOT GO ----
   Labels are question text and stay sans; the value being typed is
   mono and tabular, which is what a number wants. Sizes are the
   pre-instrument sizes on purpose (D1.1). */
.field { margin: 0 0 14px; }
.field.slim { margin: 0; }
.field label {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
  margin-bottom: 5px;
  color: var(--ink);
}
.req { color: var(--bad); font-weight: 700; }
.input {
  width: 100%;
  max-width: 340px;
  min-height: 44px;
  padding: 8px 10px;
  font: 15px var(--mono);
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
  color: var(--ink);
}
.input:focus { border-color: var(--blue); }
.input:disabled { background: var(--bg); color: var(--muted); }

.form-groups { display: flex; flex-direction: column; gap: 14px; }
.group {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 0 0 12px;
  position: relative;
}
.group::before, .group::after {
  content: ""; position: absolute; width: 7px; height: 7px;
  pointer-events: none; }
.group::before { top: -1px; left: -1px;
  border-top: 1.5px solid var(--reticle); border-left: 1.5px solid var(--reticle); }
.group::after { bottom: -1px; right: -1px;
  border-bottom: 1.5px solid var(--reticle); border-right: 1.5px solid var(--reticle); }
/* a group title is metadata about the questions below it, so it takes
   the panel band the dashboard gives .panel > h3 */
.group > h2 {
  margin: 0 0 12px; padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface2);
  font: 600 10px/1.5 var(--mono); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink);
}
.group > *:not(h2) { margin-left: 12px; margin-right: 12px; }

/* ---- notes: errors speak, successes confirm, empties stay silent ---- */
.field-error, .error-note {
  color: var(--bad);
  background: var(--bad-bg);
  border: 1px solid var(--bad);
  border-radius: var(--r);
  padding: 6px 10px;
  font-size: 0.88rem;
  margin: 6px 0 0;
}
.field-error[hidden] { display: none; }
/* An alert with nothing to say must not look like an alert (2026-08-07). */
.field-error:empty, .error-note:empty { display: none; }
.ok-note {
  color: var(--good);
  background: var(--good-bg);
  border: 1px solid var(--good);
  border-radius: var(--r);
  padding: 6px 10px;
  font-size: 0.88rem;
  margin: 6px 0 0;
}

/* ---- form head + sticky footer ---- */
.form-head { margin: 8px 0 12px; }
.form-head-top { display: flex; align-items: center;
  justify-content: space-between; gap: 8px; }
.form-head h1 { margin: 2px 0 2px; }
.form-head p { margin: 0; }

.form-footer {
  position: sticky;
  bottom: 0;
  background: var(--bg);
  border-top: 1px solid var(--ink);
  margin-top: 16px;
  padding: 10px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.footer-row { display: flex; align-items: center; gap: 10px; width: 100%; }
.footer-row .save-status { margin-right: auto; }
.footer-row .btn-link { flex: none; }
.footer-row .btn { white-space: nowrap; }
.footer-secondary { display: flex; gap: 14px; padding-bottom: 6px; }
.footer-secondary[hidden] { display: none; }

.save-status { font: 600 9.5px var(--mono); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted); min-width: 90px; }
.save-unsaved, .save-saving, .save-saving_dirty { color: var(--warn); }
.save-saved { color: var(--good); }
.save-error { color: var(--bad); }

/* ---- timeline (record history) ---- */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  display: flex;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
}
.timeline li:first-child { border-top: 0; }
.tl-when { color: var(--muted); white-space: nowrap; }

/* ---- dialogs ---- */
.overlay {
  position: fixed;
  inset: 0;
  /* the same scrim the inspector uses on the dashboard */
  background: rgba(5, 10, 8, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 40;
}
.dialog {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  max-width: 560px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 18px;
}
.dialog h2 { margin-bottom: 10px; }
.dialog-body { margin-bottom: 14px; }
.dialog-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}
.dialog-quick { display: flex; gap: 8px; margin: 10px 0; flex-wrap: wrap; }
.warn-list { margin: 10px 0; padding-left: 20px; }
.warn-list li { margin: 6px 0; }

/* ---- 409 conflict reconciliation ---- */
.diff-row {
  border-top: 1px solid var(--line);
  padding: 10px 0;
}
.diff-label { font-weight: 600; margin: 0 0 6px; }
.diff-choice {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  cursor: pointer;
}
.diff-choice input[type="radio"] { width: 20px; height: 20px; }

/* ---- dev identity selector ---- */
.selector { max-width: 480px; margin: 30px auto; }
.identity-list { margin-top: 12px; }

/* ---- key-value tables (huddle and kin) ---- */
.table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.table td { padding: 6px 0; border-top: 1px solid var(--line);
  vertical-align: top; }
.table tr:first-child td { border-top: none; }
.table td:first-child { color: var(--muted); padding-right: 12px; }
.table td:last-child { text-align: right; color: var(--ink);
  font-weight: 600; font-variant-numeric: tabular-nums; }
.table th { font: 600 9.5px var(--mono); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--faint); text-align: left;
  padding: 4px 0; }

/* ---- training: the knowledge check ---- */
.qform fieldset { border: 1px solid var(--line); border-radius: var(--r);
  margin: 0 0 12px; padding: 10px 12px 12px; background: var(--card); }
.qform legend { font-weight: 600; font-size: 0.95rem; padding: 0 4px;
  color: var(--ink); }
.qopt { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.qopt input[type="radio"] { width: 20px; height: 20px; flex: none; }
.qopt label { font-family: var(--sans); font-size: 0.95rem;
  cursor: pointer; }

/* ---- sign-in ---- */
.login-card { max-width: 430px; margin: 44px auto 0; text-align: center; }
.login-brand { display: flex; flex-direction: column; align-items: center;
  margin-bottom: 4px; }
.login-lockup { display: flex; align-items: center; justify-content: center;
  gap: 11px; }
.login-wordmark-img { width: 220px; height: auto; }
.login-card .login-row { display: flex; gap: 10px; justify-content: center;
  flex-wrap: wrap; margin-top: 14px; }
.login-card input { text-align: center; min-width: 260px;
  border-radius: var(--r); padding: 10px 12px; }
.login-card .btn-primary { background: var(--ink); border-color: var(--ink); }
.login-card .btn-primary:hover { background: var(--navy); }
.login-legal { font-size: 11px; color: var(--faint); margin: 24px 0 4px; }

/* ---- Team (accounts) ---- */
.check-label { display: inline-flex; align-items: center; gap: 6px;
  margin-right: 14px; min-height: 44px; }
.field-row { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.field-row .input { max-width: 200px; }
.manage-panel { border-top: 1px solid var(--line); margin-top: 10px;
  padding-top: 10px; display: flex; flex-direction: column; gap: 8px;
  align-items: flex-start; }

/* ---- Connections: provider cards ----
   The provider mark is vendored and rendered EXACTLY as its owner
   supplies it - Intuit's brand rules forbid redrawn or restyled marks. */
.conn-card { padding: 0; overflow: hidden; }
.conn-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface2);
}
.conn-logo {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r);
  background: var(--card);
  border: 1px solid var(--line);
  overflow: hidden;
}
.conn-logo img { width: 100%; height: 100%; object-fit: contain; }
.conn-logo-fallback {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--muted);
}
.conn-title { flex: 1 1 auto; min-width: 0; }
.conn-title h2 {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.25;
}
.conn-title .conn-sub {
  margin: 2px 0 0;
  font-size: 0.82rem;
  color: var(--muted);
}
.conn-body { padding: 12px 16px 14px; }
.conn-body .conn-meta {
  margin: 0 0 10px;
  font-size: 0.85rem;
  color: var(--muted);
}
.conn-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
/* the provider's own connect button: supplied image, every pixel theirs */
.conn-connect {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 4px;
}
.conn-connect img { height: 36px; width: auto; display: block; }
.conn-connect:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}
@media (max-width: 560px) {
  .conn-actions { width: 100%; }
  .conn-actions .btn { flex: 1 1 auto; }
}
/* spending classes (040): the costing model's per-account vocabulary -
   a quiet hairline section on the card, no frame (classification is
   routine bookkeeping, not a signal) */
.conn-classes { margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--line); }
.conn-class-row { display: flex; align-items: center;
  justify-content: space-between; gap: 10px; padding: 4px 0; }
.conn-class-name { font-size: 0.85rem; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.conn-class-pick { flex: 0 0 auto; max-width: 55%; min-height: 44px; }

/* costing benches (041): rates + capacity rows, numbers-only inputs */
.cost-row { display: flex; align-items: center; gap: 8px;
  padding: 6px 0; flex-wrap: wrap; }
.cost-row-label { flex: 1 1 160px; font-size: 0.88rem;
  font-family: var(--sans); }
.cost-row input { width: 90px; min-height: 44px; padding: 4px 8px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--card); color: var(--ink);
  font: 15px var(--mono); font-variant-numeric: tabular-nums; }
.cost-row-cap input { width: 74px; }
/* Effective-from: one dated decision per card, named rather than assumed.
   Sits above the rows it governs because it applies to whichever row you
   save, and a control that governs several rows must not look like it
   belongs to one of them. */
.eff-from { display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; padding: 6px 0 10px;
  border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.eff-date { min-height: 44px; padding: 4px 8px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--card); color: var(--ink);
  font: 15px var(--mono); font-variant-numeric: tabular-nums; }
/* The server refuses a save with no date, so the field states the
   problem where the problem is rather than in a note elsewhere. */
.eff-date[aria-invalid="true"] { border-color: var(--warn);
  box-shadow: 0 0 0 2px var(--warn-bg); }
.btn-small { min-height: 32px; padding: 2px 8px; font-size: 9.5px; }

/* ---- Practice setup (021) ---- */
.setup-card { max-width: 720px; }
.setup-rail { display: flex; flex-wrap: wrap; gap: 6px; list-style: none;
  padding: 0; margin: 14px 0 18px; }
.setup-step { padding: 6px 10px; border: 1px solid var(--line);
  border-radius: var(--r); font-size: 12px; cursor: pointer;
  min-height: 34px; display: flex; align-items: center; gap: 6px; }
.setup-step.on { border-color: var(--ink); font-weight: 600; }
.setup-step.done { opacity: 0.75; }
.setup-step.skipped { opacity: 0.55; }
.setup-step .tag { font: 600 9px var(--mono); text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--faint); }
.setup-step-name { font-size: 12px; }
.setup-choices { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.setup-choices .choice { padding: 10px 14px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--card); color: var(--ink);
  font: 13px var(--mono); min-height: 44px;
  cursor: pointer; text-transform: capitalize; }
.setup-choices .choice.on { outline: 2px solid var(--ink); }
.setup-actions { display: flex; gap: 10px; margin-top: 16px; }
.setup-office-row { display: flex; gap: 10px; align-items: center;
  margin: 8px 0; }
.setup-office-row .setup-name { flex: 1; }
.setup-list { margin: 6px 0 12px; padding-left: 18px; }
.setup-procs { display: flex; flex-direction: column; gap: 6px;
  margin: 10px 0; }
.setup-proc { display: flex; gap: 8px; align-items: baseline; }
.setup-ref { margin-left: auto; font-size: 11px; }
.setup-conn { border: 1px solid var(--soft); border-radius: var(--r);
  padding: 12px 14px; margin: 10px 0; }
.setup-conn-head { display: flex; align-items: center; gap: 10px;
  justify-content: space-between; }
.setup-conn-steps { margin: 8px 0 2px; padding-left: 20px; }
.setup-conn-steps li { margin: 4px 0; color: var(--muted); }

/* ---- Leads (CRM) ---- */
.lead-row { border-top: 1px solid var(--line); padding: 10px 0; }
.lead-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lead-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.lead-acts .input { min-height: 40px; }
.lead-acts .btn { min-height: 40px; padding: 0 10px; }
.lead-procs { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0; }
.lead-proc { display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.88rem; color: var(--ink); }
.lead-note { display: flex; gap: 8px; width: 100%; margin-top: 8px; }
.lead-note .input { flex: 1; max-width: none; }
.huddle-calls .lead-why { color: var(--muted); font-size: 0.85rem; }

/* ---- motion: shared duration family from the token root ---- */
@keyframes rt-fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.card { animation: rt-fade-up var(--dur) var(--ease) backwards; }
.setup-pane > * { animation: rt-fade-up var(--dur) var(--ease) backwards; }
.setup-pane > *:nth-child(2) { animation-delay: 30ms; }
.setup-pane > *:nth-child(3) { animation-delay: 60ms; }
.setup-pane > *:nth-child(n+4) { animation-delay: 90ms; }
@keyframes rt-pop {
  0% { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.setup-step .tag { animation: rt-pop var(--dur-fast) var(--ease) backwards; }
button { transition: background-color var(--dur-fast) var(--ease),
                     color var(--dur-fast) var(--ease),
                     transform var(--dur-fast) var(--ease); }
button:active { transform: scale(0.97); }
input, select { transition: border-color var(--dur-fast) var(--ease),
                            box-shadow var(--dur-fast) var(--ease); }

/* ---- responsive ----
   375px is the floor, and the floor is the DEFAULT: everything above
   stacks in one column with no fixed widths, so nothing here has to
   un-break a narrow screen. */
@media (min-width: 700px) {
  .cards { gap: 16px; }
  #main { padding-top: 20px; }
}

/* ---- reduced motion: ONE standdown for everything ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---- print / save-as-PDF (My Performance + huddle sheet) ----
   Chrome hidden; data cards print clean on white; renders exactly the
   on-screen, server-filtered view.

   The literals here are deliberate and are the ONE place this sheet
   leaves the token system: paper has no theme. Printing a dark-mode
   page through tokens would put graphite ink on a graphite field and
   empty a toner cartridge saying nothing. */
@media print {
  #dev-banner, #topbar, .row-actions, .btn, .no-print { display: none !important; }
  body { background: #fff; background-image: none; color: #000; }
  #main { padding: 0; max-width: none; }
  .card { border: 1px solid #999; box-shadow: none; break-inside: avoid;
    background: #fff; }
  .card::before, .card::after { display: none; }
  .table th, .table td { border-bottom: 1px solid #bbb; color: #000; }
  .muted { color: #333; }
}