/* ==========================================================================
   ASCO-OS Dev Board — styles
   No build step. Plain CSS, custom properties, light + dark.

   Palette: warm paper / graphite ink, one confident pine accent, amber for
   "waiting", clay for "wrong". Deliberately not a blue-purple gradient.
   Type: an editorial serif for headings, the platform grotesque for UI
   (system-ui, explicitly NOT Inter), a mono for eyebrows and stamps.
   Section markers are ruled mono eyebrows, never emoji.
   ========================================================================== */

/* ---------- tokens: light ------------------------------------------------ */

:root {
  color-scheme: light;

  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
    Georgia, ui-serif, serif;
  --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  --bg: #f6f4ef;
  --bg-sunken: #edeae2;
  --surface: #fffefb;
  --surface-2: #faf8f3;
  --surface-3: #f2efe8;

  --ink: #1a1917;
  --ink-2: #46433d;
  --muted: #6f6b62;
  --faint: #948f85;

  --line: #e2ddd3;
  --line-strong: #cbc5b8;

  --accent: #0a6b5c;
  --accent-hover: #085a4d;
  --accent-strong: #075549;
  --accent-on: #ffffff;
  --accent-soft: #dceeea;
  --accent-line: #a3d2c8;

  --amber: #8f5606;
  --amber-soft: #fbedd5;
  --amber-line: #e5c68a;

  --clay: #982c1c;
  --clay-soft: #fbe3dd;
  --clay-line: #e6b0a3;

  --slate: #40525f;
  --slate-soft: #e4eaee;
  --slate-line: #bccbd4;

  --shadow-1: 0 1px 2px rgba(26, 25, 23, 0.06), 0 1px 3px rgba(26, 25, 23, 0.04);
  --shadow-2: 0 2px 4px rgba(26, 25, 23, 0.06), 0 8px 20px rgba(26, 25, 23, 0.08);
  --shadow-3: 0 4px 10px rgba(26, 25, 23, 0.1), 0 20px 44px rgba(26, 25, 23, 0.14);

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;

  --focus: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);
  --tap: 44px;
}

/* ---------- tokens: dark ------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #121417;
    --bg-sunken: #0c0e10;
    --surface: #191c21;
    --surface-2: #1f232a;
    --surface-3: #262b33;

    --ink: #eceae5;
    --ink-2: #c6c2ba;
    --muted: #948f86;
    --faint: #74706a;

    --line: #2b3038;
    --line-strong: #3d444e;

    --accent: #4ec8b2;
    --accent-hover: #63d6c1;
    --accent-strong: #7ae2cf;
    --accent-on: #06231f;
    --accent-soft: #123630;
    --accent-line: #1e5a50;

    --amber: #e2a94f;
    --amber-soft: #382a12;
    --amber-line: #5c451c;

    --clay: #e8886f;
    --clay-soft: #3a1f18;
    --clay-line: #5e3226;

    --slate: #9db3c1;
    --slate-soft: #1e262c;
    --slate-line: #33404a;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.42), 0 10px 24px rgba(0, 0, 0, 0.36);
    --shadow-3: 0 6px 14px rgba(0, 0, 0, 0.46), 0 24px 50px rgba(0, 0, 0, 0.5);

    --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
  }
}

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

  --bg: #121417;
  --bg-sunken: #0c0e10;
  --surface: #191c21;
  --surface-2: #1f232a;
  --surface-3: #262b33;

  --ink: #eceae5;
  --ink-2: #c6c2ba;
  --muted: #948f86;
  --faint: #74706a;

  --line: #2b3038;
  --line-strong: #3d444e;

  --accent: #4ec8b2;
  --accent-hover: #63d6c1;
  --accent-strong: #7ae2cf;
  --accent-on: #06231f;
  --accent-soft: #123630;
  --accent-line: #1e5a50;

  --amber: #e2a94f;
  --amber-soft: #382a12;
  --amber-line: #5c451c;

  --clay: #e8886f;
  --clay-soft: #3a1f18;
  --clay-line: #5e3226;

  --slate: #9db3c1;
  --slate-soft: #1e262c;
  --slate-line: #33404a;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.42), 0 10px 24px rgba(0, 0, 0, 0.36);
  --shadow-3: 0 6px 14px rgba(0, 0, 0, 0.46), 0 24px 50px rgba(0, 0, 0, 0.5);

  --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}

/* ---------- reset -------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
}

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

img,
svg {
  max-width: 100%;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

p {
  margin: 0;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus);
  border-radius: var(--r-sm);
}

::selection {
  background: var(--accent-soft);
  color: var(--ink);
}

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

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--accent);
  color: var(--accent-on);
  border-radius: var(--r-md);
  font-weight: 600;
  text-decoration: none;
  transition: top 120ms ease;
}

.skip-link:focus {
  top: 12px;
}

/* ---------- shared primitives ------------------------------------------- */

.wrap {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 20px;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.eyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  flex: none;
}

.section-head {
  margin: 0 0 20px;
}

.section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(22px, 3.2vw, 29px);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.lede {
  margin-top: 6px;
  max-width: 68ch;
  color: var(--muted);
  font-size: 14px;
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.86em;
  letter-spacing: 0.01em;
}

.stamp {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--faint);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}

.pre {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
}

/* buttons ---------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  font-weight: 550;
  transition: background-color 120ms ease, border-color 120ms ease,
    transform 90ms ease, color 120ms ease;
}

.btn:hover {
  background: var(--surface-3);
}

.btn:active {
  transform: translateY(1px);
}

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

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-on);
}

.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.btn-quiet {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}

.btn-quiet:hover {
  background: var(--surface-3);
  color: var(--ink);
}

.btn-sm {
  min-height: 30px;
  padding: 4px 10px;
  font-size: 12.5px;
  border-radius: var(--r-sm);
}

.btn-danger {
  color: var(--clay);
  border-color: var(--clay-line);
}

.btn-danger:hover {
  background: var(--clay-soft);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* chips ------------------------------------------------------------------ */

/* A chip carries text somebody typed — a park reason, a card title, a
   waiting-on name — so it must be safe at ANY length. It wraps rather than
   sitting on one line, it can never exceed its container, and an unbroken
   token (a URL, an issue reference) breaks instead of overflowing.

   `overflow-wrap: anywhere` and not `break-word`, deliberately: only
   `anywhere` reduces the element's min-content width, and min-content is the
   number a fixed grid track and a flex item actually measure. Without it a
   long chip made its card wider than the 238px column and the card rendered
   over the top of the next one.

   `text-align: left` because most chips are buttons, and a button centres its
   text — which only shows once a chip is allowed to reach a second line. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  min-width: 0;
  padding: 2px 9px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--ink-2);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
}

.chip-accent {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-on);
}

.chip-accent-soft {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent);
}

.chip-amber {
  background: var(--amber-soft);
  border-color: var(--amber-line);
  color: var(--amber);
}

.chip-clay {
  background: var(--clay-soft);
  border-color: var(--clay-line);
  color: var(--clay);
}

.chip-slate {
  background: var(--slate-soft);
  border-color: var(--slate-line);
  color: var(--slate);
}

.chip-muted {
  background: transparent;
  border-color: var(--line);
  color: var(--muted);
  font-weight: 500;
}

.chip-dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.chip button,
button.chip {
  cursor: pointer;
}

/* inputs ----------------------------------------------------------------- */

.field {
  display: block;
  margin-bottom: 14px;
}

.field > .label {
  display: block;
  margin-bottom: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: 0.01em;
}

.input,
.textarea,
.select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 14.5px;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.input:hover,
.textarea:hover,
.select:hover {
  border-color: var(--muted);
}

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus);
}

.textarea {
  min-height: 92px;
  resize: vertical;
  line-height: 1.55;
}

.hint {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--muted);
}

/* ---------- login -------------------------------------------------------- */

.login {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(1100px 520px at 50% -10%, var(--surface-3), transparent 70%),
    var(--bg);
}

.login-card {
  width: 100%;
  max-width: 400px;
  padding: 30px 28px 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-3);
}

.login-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}

.login h1 {
  font-family: var(--font-display);
  font-size: 25px;
  margin-bottom: 4px;
}

.login .lede {
  margin-bottom: 22px;
  font-size: 13.5px;
}

.login .btn {
  width: 100%;
  min-height: 44px;
  font-size: 15px;
}

.form-error {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--clay-line);
  border-radius: var(--r-md);
  background: var(--clay-soft);
  color: var(--clay);
  font-size: 13.5px;
}

/* ---------- app shell ---------------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(1.6) blur(12px);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
}

@supports not (backdrop-filter: blur(2px)) {
  .topbar {
    background: var(--surface);
  }
}

.topbar-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 58px;
  padding-top: 8px;
  padding-bottom: 8px;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-on);
  flex: none;
}

.brand-mark svg {
  display: block;
}

.brand-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.brand-name span {
  color: var(--muted);
  font-weight: 400;
}

.brand-sub {
  padding-left: 10px;
  margin-left: 2px;
  border-left: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.icon-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--ink-2);
  transition: background-color 120ms ease, color 120ms ease;
}

.icon-btn:hover {
  background: var(--surface-3);
  color: var(--ink);
}

.icon-btn[aria-expanded="true"] {
  background: var(--surface-3);
  border-color: var(--line);
  color: var(--ink);
}

.bell-count {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--clay);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}

:root[data-theme="dark"] .bell-count,
:root:not([data-theme="light"]) .bell-count {
  color: #fff;
}

.who {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 4px 4px;
  border-radius: var(--r-pill);
}

.avatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--slate-soft);
  border: 1px solid var(--slate-line);
  color: var(--slate);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex: none;
}

.who-name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
}

.who-role {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* tabs ------------------------------------------------------------------- */

.tabs {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tabs-inner {
  display: flex;
  gap: 2px;
}

.tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 13px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 550;
  white-space: nowrap;
  transition: color 120ms ease, border-color 120ms ease;
}

.tab:hover {
  color: var(--ink);
}

.tab[aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
  font-weight: 650;
}

.tab-count {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

.tab[aria-selected="true"] .tab-count {
  background: var(--accent-soft);
  color: var(--accent);
}

.tab-count.is-hot {
  background: var(--clay);
  color: #fff;
}

/* connection strip -------------------------------------------------------- */

.conn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}

.conn-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--faint);
  flex: none;
}

.conn[data-mode="live"] .conn-dot {
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent-line);
  animation: breathe 2.6s ease-in-out infinite;
}

.conn[data-mode="poll"] .conn-dot {
  background: var(--amber);
}

.conn[data-mode="down"] .conn-dot {
  background: var(--clay);
}

/* main ------------------------------------------------------------------- */

/* `main` also carries .wrap, and .wrap's `padding` shorthand out-specifies a
   bare element selector — so the vertical padding is set on the id. */
#main {
  padding-top: 26px;
  padding-bottom: 90px;
}

.panel {
  animation: rise 220ms ease both;
}

/* ---------- tiles -------------------------------------------------------- */

.tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 26px;
}

.tile {
  padding: 14px 16px 15px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}

.tile-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.tile-value {
  display: block;
  margin: 6px 0 2px;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.tile-sub {
  font-size: 12.5px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.tile.is-hot {
  border-color: var(--accent-line);
  background: linear-gradient(180deg, var(--accent-soft), var(--surface) 62%);
}

.tile.is-hot .tile-value,
.tile.is-hot .tile-label {
  color: var(--accent);
}

/* ---------- questions ---------------------------------------------------- */

.q-list {
  display: grid;
  gap: 14px;
}

.qcard {
  position: relative;
  padding: 18px 20px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  transition: box-shadow 160ms ease, border-color 160ms ease;
}

.qcard:hover {
  box-shadow: var(--shadow-2);
}

.qcard.is-urgent {
  border-left: 3px solid var(--accent);
}

.qcard.is-leaving {
  animation: collapse 260ms ease forwards;
  overflow: hidden;
  pointer-events: none;
}

.qcard-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}

.qcard h3 {
  flex: 1 1 auto;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
}

.qcard-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  margin-bottom: 12px;
}

/* "you are the blocker" line under a question, and its emphatic variant.
   The whole point of the Questions page is that a person can see what their
   answer releases — a question with no visible consequence reads as paperwork. */
.qcard-unblock {
  margin: -4px 0 14px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--slate-line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  font-size: 12.5px;
  color: var(--muted);
}

.qcard-unblock.is-last {
  border-left-color: var(--amber-line);
  background: var(--amber-soft);
  color: var(--amber);
}

.qcard-unblock strong {
  color: inherit;
}

/* Arriving from a bell link: mark what you were sent to, briefly. Without it a
   deep link drops you on a long page with no idea which row it meant. */
.qcard.is-flash,
.answered-row.is-flash {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.qcard-context {
  padding: 12px 14px;
  margin-bottom: 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: var(--r-md);
  max-height: 320px;
  overflow: auto;
}

.options {
  display: grid;
  gap: 9px;
}

@media (min-width: 720px) {
  .options.is-pair {
    grid-template-columns: 1fr 1fr;
  }
}

.option {
  position: relative;
  display: block;
  width: 100%;
  padding: 13px 15px;
  padding-right: 44px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--ink);
  text-align: left;
  overflow: hidden;
  transition: border-color 130ms ease, background-color 130ms ease,
    transform 90ms ease;
}

.option:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.option:active {
  transform: translateY(1px);
}

.option-label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

.option-desc {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  color: var(--muted);
}

.option-go {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  color: var(--faint);
  display: grid;
  place-items: center;
  transition: color 130ms ease;
}

.option:hover .option-go {
  color: var(--accent);
}

.option-fill {
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

.option-check {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%) scale(0.6);
  opacity: 0;
  color: var(--accent-on);
  pointer-events: none;
}

.option.is-confirming {
  border-color: var(--accent);
  color: var(--accent-on);
}

.option.is-confirming .option-desc {
  color: color-mix(in srgb, var(--accent-on) 76%, transparent);
}

.option.is-confirming .option-label,
.option.is-confirming .option-desc {
  position: relative;
  z-index: 1;
}

.option.is-confirming .option-go {
  opacity: 0;
}

.option.is-confirming .option-fill {
  animation: sweep 380ms cubic-bezier(0.3, 0.8, 0.3, 1) forwards;
}

.option.is-confirming .option-check {
  z-index: 2;
  animation: pop 240ms 300ms ease forwards;
}

.other {
  margin-top: 12px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface-2);
}

.other > summary {
  padding: 10px 14px;
  list-style: none;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--r-md);
}

.other > summary::-webkit-details-marker {
  display: none;
}

.other > summary:hover {
  color: var(--ink);
}

.other > summary .caret {
  transition: transform 150ms ease;
}

.other[open] > summary .caret {
  transform: rotate(90deg);
}

.other-body {
  padding: 0 14px 14px;
}

.qcard-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.qcard-foot .spacer {
  flex: 1 1 auto;
}

.park {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
  width: 100%;
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.park .field {
  flex: 1 1 160px;
  margin: 0;
}

/* groups (collapsed) ------------------------------------------------------ */

.group {
  margin-top: 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  overflow: hidden;
}

.group > summary {
  padding: 12px 16px;
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
}

.group > summary::-webkit-details-marker {
  display: none;
}

.group > summary .caret {
  transition: transform 150ms ease;
  color: var(--muted);
}

.group[open] > summary .caret {
  transform: rotate(90deg);
}

.group-body {
  padding: 4px 16px 16px;
  display: grid;
  gap: 10px;
}

.answered-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.answered-row .tick {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  flex: none;
}

.answered-main {
  flex: 1 1 auto;
  min-width: 0;
}

.answered-title {
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.answered-sub {
  font-size: 12.5px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* ---------- board -------------------------------------------------------- */

.board-scroll {
  overflow-x: auto;
  padding-bottom: 10px;
  margin: 0 -20px;
  padding-left: 20px;
  padding-right: 20px;
  scrollbar-width: thin;
}

/* The tracks are a FIXED 238px, not minmax(238px, 1fr): the page measure is
   allowed to grow on a wide screen (see the wide-screen block at the bottom of
   this file) and `1fr` would pour that extra width into the columns, which is
   exactly what a fixed-width kanban must not do. Spare width is left unused,
   to the right of the last column, because that is where the eye is not. */
.board {
  display: grid;
  grid-template-columns: repeat(var(--col-count, 8), 238px);
  justify-content: start;
  gap: 12px;
  min-width: calc(var(--col-count, 8) * 238px + (var(--col-count, 8) - 1) * 12px);
  align-items: start;
}

/* min-width:0 on every box between the track and the card: a grid or flex
   child defaults to min-width:auto (its min-content size), and one stubborn
   child is all it takes for a long string to push a card out over the next
   column. */
.col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  min-height: 140px;
  transition: border-color 130ms ease, background-color 130ms ease,
    opacity 130ms ease;
}

.col-head {
  padding: 11px 13px 9px;
  border-bottom: 1px solid var(--line);
}

.col-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.col-title h3 {
  font-size: 13.5px;
  font-weight: 650;
  letter-spacing: 0.01em;
}

.col-n {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.col-hint {
  margin-top: 3px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--faint);
}

.col-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
  padding: 10px;
  align-content: start;
}

.col-empty {
  padding: 14px 4px;
  text-align: center;
  font-size: 12.5px;
  color: var(--faint);
}

body.is-dragging .col:not(.can-drop) {
  opacity: 0.45;
}

.col.can-drop {
  border-color: var(--accent-line);
}

.col.is-over {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.bcard {
  position: relative;
  min-width: 0;
  padding: 10px 11px 9px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  transition: box-shadow 130ms ease, transform 90ms ease, opacity 130ms ease;
}

.bcard.is-movable {
  cursor: grab;
}

.bcard.is-movable:active {
  cursor: grabbing;
}

.bcard:hover {
  box-shadow: var(--shadow-2);
}

.bcard.is-ghost {
  opacity: 0.4;
}

.bcard.is-saving {
  opacity: 0.6;
}

.bcard.is-reverted {
  animation: shake 320ms ease;
  border-color: var(--clay);
}

.bcard-title {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.bcard-title:hover {
  color: var(--accent);
}

.bcard-chips {
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
  gap: 5px;
  margin-top: 8px;
}

/* Why a parked card is parked. The schema refuses the move without a reason,
   so this is the one line on the card that has to survive — in full, wrapped,
   never cut at a character count. */
.bcard-note {
  margin-top: 7px;
  padding: 5px 8px;
  border-left: 2px solid var(--amber-line);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--amber-soft);
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.bcard-note-k {
  font-weight: 650;
  color: var(--amber);
}

/* The plan checkpoint on a Ready-for-Review card. It sits between the chips
   and the foot because it is a decision, not a status: on that column it is the
   only thing the reader is being asked to do. */
.bcard-approve {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
}

.bcard-approve .hint {
  flex: 1 1 140px;
  min-width: 0;
  margin-top: 0;
}

.bcard-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
  padding-top: 7px;
  border-top: 1px solid var(--line);
}

.bcard-foot .stamp {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lane-now {
  background: var(--clay-soft);
  border-color: var(--clay-line);
  color: var(--clay);
}

.lane-next {
  background: var(--amber-soft);
  border-color: var(--amber-line);
  color: var(--amber);
}

.lane-later {
  background: var(--slate-soft);
  border-color: var(--slate-line);
  color: var(--slate);
}

.pulse {
  animation: breathe 2s ease-in-out infinite;
}

/* move menu -------------------------------------------------------------- */

.menu {
  /* fixed, because it is positioned from getBoundingClientRect() and must
     escape the board's overflow-x container */
  position: fixed;
  z-index: 90;
  min-width: 208px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-3);
}

.menu-label {
  padding: 6px 8px 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 9px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  text-align: left;
  font-size: 13.5px;
  color: var(--ink);
}

.menu-item:hover {
  background: var(--surface-3);
}

.menu-none {
  padding: 8px 9px;
  font-size: 12.5px;
  color: var(--muted);
}

/* ---------- activity ----------------------------------------------------- */

.streams {
  display: grid;
  gap: 10px;
}

.stream {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
}

.stream-dot {
  margin-top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

.stream-main {
  flex: 1 1 auto;
  min-width: 0;
}

.stream h3 {
  font-size: 15px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.stream-detail {
  margin-top: 3px;
  font-size: 13.5px;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

.stream-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  margin-top: 8px;
}

.stream.is-active .stream-dot {
  animation: breathe 1.8s ease-in-out infinite;
}

.stream.is-blocked {
  border-left-color: var(--amber);
  background: linear-gradient(90deg, var(--amber-soft), var(--surface) 46%);
}

.stream.is-blocked .stream-dot {
  background: var(--amber);
}

.stream.is-stale {
  border-left-color: var(--amber);
  border-style: solid;
  background: var(--surface-2);
}

.stream.is-stale .stream-dot {
  background: transparent;
  border: 2px solid var(--amber);
  animation: none;
}

.stream.is-done {
  opacity: 0.55;
  border-left-color: var(--line-strong);
}

.stream.is-done .stream-dot {
  background: var(--faint);
  animation: none;
}

.progress {
  height: 4px;
  margin-top: 9px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
}

.progress > i {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--accent);
  transition: width 400ms ease;
}

.stale-note {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--amber);
}

/* ---------- reports ------------------------------------------------------ */

.feed {
  display: grid;
  gap: 12px;
}

.report {
  padding: 15px 17px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
}

.report-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: baseline;
  margin-bottom: 6px;
}

.report h3 {
  flex: 1 1 240px;
  font-size: 15.5px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.report-sub {
  margin-bottom: 9px;
  font-size: 13px;
  color: var(--accent);
  font-weight: 550;
}

.report-body {
  padding: 11px 13px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  max-height: 300px;
  overflow: auto;
}

/* ---------- users -------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

table.data th {
  padding: 11px 14px;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  white-space: nowrap;
}

table.data td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

table.data tr:last-child td {
  border-bottom: 0;
}

.user-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-name {
  font-weight: 600;
}

.user-email {
  font-size: 12.5px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* ---------- how this works ----------------------------------------------- */

/* Reference material people come back to, so it is built to be scanned: a jump
   list, short sections, and lookup tables rather than paragraphs. Prose keeps a
   reading measure; the tables are allowed to be wider because a table is read
   across, not down a column. */

.help-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.help-jump {
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 550;
  text-decoration: none;
  transition: background-color 120ms ease, border-color 120ms ease,
    color 120ms ease;
}

.help-jump:hover {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
}

/* minmax(0, 1fr), not the implicit `auto` track: a section holds a table with a
   min-width, and an auto track sizes itself to that — which on a phone made
   every paragraph in the panel 540px wide and scrolled the whole page
   sideways. The table scrolls inside its own wrapper instead. */
.help {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 36px;
}

.help-sec {
  min-width: 0;
  /* The top bar and the tab strip are sticky: without this, a jump link lands
     the heading underneath them. */
  scroll-margin-top: 118px;
  outline: none;
}

.help-sec h3 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 13px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
}

.help-n {
  flex: none;
  min-width: 22px;
  padding: 1px 4px;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

/* A sub-heading inside a help section — one level under the numbered h3, used
   where a section carries two distinct lookups (the columns, then the two ways
   a plan is approved). */
.help-h4 {
  margin: 20px 0 8px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.help-p {
  margin: 0 0 13px;
  max-width: 72ch;
  color: var(--ink-2);
  font-size: 14px;
}

.help-list {
  margin: 0 0 13px;
  padding-left: 21px;
  max-width: 72ch;
  display: grid;
  gap: 8px;
  color: var(--ink-2);
  font-size: 14px;
}

.help-list li::marker {
  color: var(--faint);
}

.help-note {
  margin: 0 0 15px;
  padding: 11px 14px;
  max-width: 72ch;
  border: 1px solid var(--accent-line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--ink-2);
  font-size: 14px;
}

.help-note strong {
  color: var(--accent);
}

.help-note.is-warn {
  border-color: var(--amber-line);
  border-left-color: var(--amber);
  background: var(--amber-soft);
}

.help-note.is-warn strong {
  color: var(--amber);
}

.help-table {
  min-width: 0;
  margin: 0 0 15px;
  max-width: 980px;
}

.help-table table.data {
  /* Below this the sentences in a three-column table become two words a line,
     so the wrapper scrolls instead — the same bargain the Users table makes. */
  min-width: 540px;
  font-size: 13.5px;
}

.help-table td,
.help-table tbody th {
  vertical-align: top;
  overflow-wrap: anywhere;
}

/* The first cell of every row is a row header, not a column header: undo the
   uppercase mono treatment table.data gives <th>. */
.help-table tbody th {
  padding: 12px 14px;
  min-width: 9em;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  white-space: normal;
}

.help-table tbody tr:last-child th {
  border-bottom: 0;
}

/* ---------- notifications panel ------------------------------------------ */

.pop {
  position: fixed;
  right: 16px;
  top: 56px;
  z-index: 95;
  width: min(400px, calc(100vw - 32px));
  max-height: min(70vh, 560px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  overflow: hidden;
}

.pop-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.pop-head h2 {
  flex: 1 1 auto;
  font-family: var(--font-display);
  font-size: 16px;
}

.pop-body {
  overflow-y: auto;
  padding: 6px;
}

.note {
  display: block;
  width: 100%;
  padding: 10px 11px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  text-align: left;
  color: inherit;
  text-decoration: none;
}

.note:hover {
  background: var(--surface-3);
}

/* A notification is a row of two acts: open it, or dismiss it. They were one
   button, which meant the only way to clear something was to open it. */
.note-row {
  display: flex;
  align-items: flex-start;
  gap: 2px;
}

.note-row + .note-row {
  border-top: 1px solid var(--line);
}

.note-row .note {
  flex: 1 1 auto;
  min-width: 0;
}

.note-x {
  flex: none;
  width: 28px;
  height: 28px;
  margin-top: 8px;
  opacity: 0.5;
}

.note-x:hover {
  opacity: 1;
}

.note-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
}

.note.is-unread .note-title::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

.note.is-read {
  color: var(--muted);
}

.note-body {
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* ---------- empty / error ------------------------------------------------ */

.empty {
  padding: 42px 24px;
  text-align: center;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--surface-2);
}

.empty h3 {
  font-family: var(--font-display);
  font-size: 18px;
  margin-bottom: 6px;
}

.empty p {
  max-width: 52ch;
  margin: 0 auto;
  color: var(--muted);
  font-size: 14px;
}

.notice {
  padding: 14px 16px;
  border: 1px solid var(--amber-line);
  border-left: 3px solid var(--amber);
  border-radius: var(--r-md);
  background: var(--amber-soft);
  color: var(--ink-2);
  font-size: 13.5px;
}

.notice h3 {
  margin-bottom: 5px;
  font-size: 14.5px;
  color: var(--amber);
}

.notice code {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 1px 5px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  overflow-wrap: anywhere;
}

.skeleton {
  height: 92px;
  border-radius: var(--r-lg);
  background: linear-gradient(
    90deg,
    var(--surface-2) 25%,
    var(--surface-3) 50%,
    var(--surface-2) 75%
  );
  background-size: 240% 100%;
  animation: shimmer 1.3s linear infinite;
}

/* ---------- toasts ------------------------------------------------------- */

.toasts {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 200;
  display: grid;
  gap: 8px;
  width: min(360px, calc(100vw - 32px));
}

.toast {
  padding: 11px 14px;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-3);
  font-size: 13.5px;
  animation: rise 200ms ease both;
}

.toast.is-error {
  border-left-color: var(--clay);
}

.toast.is-error strong {
  color: var(--clay);
}

.toast strong {
  display: block;
  font-size: 13.5px;
  margin-bottom: 2px;
}

.toast span {
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* ---------- dialog ------------------------------------------------------- */

.scrim {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: 20px;
  background: color-mix(in srgb, #0b0c0e 52%, transparent);
  animation: fade 150ms ease both;
}

.dialog {
  width: min(680px, 100%);
  max-height: min(84vh, 760px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  box-shadow: var(--shadow-3);
  overflow: hidden;
  animation: rise 200ms ease both;
}

.dialog-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--line);
}

.dialog-head h2 {
  flex: 1 1 auto;
  font-family: var(--font-display);
  font-size: 20px;
  overflow-wrap: anywhere;
}

.dialog-body {
  padding: 18px 20px 22px;
  overflow-y: auto;
  display: grid;
  gap: 16px;
}

.block h4 {
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.block .pre {
  padding: 11px 13px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  max-height: 320px;
  overflow: auto;
}

.linklist {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.linklist a {
  font-size: 13.5px;
  overflow-wrap: anywhere;
}

/* ---------- animation ---------------------------------------------------- */

@keyframes sweep {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes pop {
  from {
    opacity: 0;
    transform: translateY(-50%) scale(0.5);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
}

@keyframes collapse {
  from {
    opacity: 1;
    max-height: 900px;
    margin-bottom: 0;
    transform: none;
  }
  to {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
    margin-bottom: -14px;
    transform: translateY(-4px);
  }
}

@keyframes breathe {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.45;
    transform: scale(0.86);
  }
}

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

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-5px);
  }
  40% {
    transform: translateX(5px);
  }
  60% {
    transform: translateX(-3px);
  }
  80% {
    transform: translateX(3px);
  }
}

/* ---------- responsive --------------------------------------------------- */

@media (max-width: 1040px) {
  .tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  body {
    font-size: 14.5px;
  }

  .wrap {
    padding: 0 14px;
  }

  .board-scroll {
    margin: 0 -14px;
    padding-left: 14px;
    padding-right: 14px;
  }

  .topbar-inner {
    gap: 8px;
  }

  .brand-sub {
    display: none;
  }

  .who-name,
  .who-role {
    display: none;
  }

  .tiles {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .tile {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 12px 14px;
  }

  .tile-value {
    margin: 0;
    font-size: 26px;
    order: -1;
    min-width: 40px;
  }

  .qcard {
    padding: 15px 15px 14px;
  }

  .qcard h3 {
    font-size: 17px;
  }

  .board {
    grid-template-columns: repeat(var(--col-count, 8), 220px);
    min-width: calc(var(--col-count, 8) * 220px + (var(--col-count, 8) - 1) * 12px);
  }

  .pop {
    right: 8px;
    left: 8px;
    width: auto;
  }

  .toasts {
    right: 10px;
    left: 10px;
    bottom: 10px;
    width: auto;
  }

  .park {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ---------- wide screens: the board escapes the page measure -------------- */

/*
   .wrap caps the page at 1360px, which is right for prose and wrong for a
   kanban. Eight 238px columns plus seven 12px gaps need 1,988px, so the last
   column sat off the right edge no matter how large the monitor was — the cap,
   not the column sizing, was the reason.

   Above the width where the whole board genuinely fits, the page measure grows
   to exactly the board's width plus its gutters:

       8 * 238px  +  7 * 12px  +  2 * 20px  =  2,028px

   and the threshold is that number plus room for a vertical scrollbar (the
   `width` media feature includes one; the layout viewport does not).

   Both numbers come off --col-count, which app.js sets on <html> from
   COLUMNS.length, so adding a ninth column widens the cap on its own. Only the
   threshold is written for eight, and being wrong there is graceful: the board
   simply keeps scrolling until the viewport catches up.

   The class is on <body> and only while the Board tab is showing, so every text
   panel — Questions, Working now, Reports, Users, How this works — keeps the
   1360px measure and its 68ch lede.
*/
@media (min-width: 2060px) {
  body.board-wide .wrap {
    max-width: calc(
      var(--col-count, 8) * 238px + (var(--col-count, 8) - 1) * 12px + 44px
    );
  }
}

/* ---------- reduced motion ----------------------------------------------- */

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

  .option.is-confirming .option-fill {
    transform: scaleX(1);
  }

  .option.is-confirming .option-check {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }

  .stream.is-active .stream-dot,
  .conn[data-mode="live"] .conn-dot,
  .pulse {
    opacity: 1;
    transform: none;
  }
}

/* ---------- print (a board someone prints for a standup) ----------------- */

@media print {
  .topbar,
  .tabs,
  .toasts,
  .pop,
  .conn {
    display: none !important;
  }

  body {
    background: #fff;
  }

  .card,
  .qcard,
  .bcard,
  .report,
  .stream {
    box-shadow: none;
  }
}