/* ============================================================================
 * Cruxwing Web — the same product, in a browser.
 * Palette is the Mac app's dark appearance (Theme.swift via the film set):
 * these are not new colours, they are THE colours.
 * ========================================================================== */
:root {
  --canvas: #050409;
  --sidebar: #08070E;
  --surface: #0F0C1A;
  --surface-hover: #17121F;
  --ink: #EDEAF6;
  --ink-2: #ADA6C6;
  --ink-3: #857EA0;
  --hairline: rgba(255, 255, 255, 0.09);
  --hairline-strong: rgba(150, 120, 235, 0.24);
  --accent: #9A6BFF;
  --accent-hover: #AE86FF;
  --cyan: #4FBBEA;
  --magenta: #D24BC0;
  --danger: #F06A85;
  --amber: #F5A623;
  --r-m: 11px;
  --r-l: 16px;
  /* The rest of the film set's vocabulary (Theme.swift literals) — the demo
     read nicer than the app because the app never adopted these. */
  --accent-soft: rgba(154, 107, 255, 0.22);
  --accent-tint: rgba(154, 107, 255, 0.12);
  --accent-text: #B79BFF;
  --record-red: #F05A6A;
  --speaker-them: #4FBBEA;
  --speaker-you: #D24BC0;
  --font: -apple-system, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --font-rounded: ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
}

/* The warmth carrier: the Mac app sets its display sizes in the rounded face
   (Typo.title/.headline are design:.rounded) and the film kept that. Headings
   in the text face are most of why the web felt colder than the demo. */
h1, h2:not(.day-head), .brand { font-family: var(--font-rounded); letter-spacing: -0.01em; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background:
    radial-gradient(1100px 640px at 80% -12%, rgba(124, 77, 216, 0.16), transparent 60%),
    radial-gradient(900px 560px at -6% 108%, rgba(70, 182, 232, 0.10), transparent 55%),
    var(--canvas);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

.brand { display: flex; align-items: center; gap: 0.55rem; font-weight: 700; letter-spacing: -0.01em; }
/* The product mark, same asset the marketing site's nav uses. */
.brand-mark {
  width: 22px; height: 22px; border-radius: 7px; display: block;
  box-shadow: 0 0 14px rgba(154, 107, 255, 0.35);
}

/* ---- sign-in ---- */
/* The UA stylesheet's `[hidden] { display: none }` loses to any author rule
   that sets `display` — .signin below sets `display: grid`, so a hidden
   sign-in card kept rendering UNDER the signed-in app. One guard, first, so
   every view container obeys its hidden attribute. */
[hidden] { display: none !important; }

/* Screen-reader-only text. Used by the settings toggle, whose visible state
   is the switch itself; without this the label printed across the control. */
.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.signin { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.signin-card {
  width: min(430px, 100%);
  background: linear-gradient(180deg, rgba(154,107,255,0.06), transparent 40%), var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-l);
  padding: 2rem 1.9rem;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
.signin-card h1 { font-size: 1.5rem; margin: 1.1rem 0 0.4rem; letter-spacing: -0.02em; }
.sub { color: var(--ink-2); font-size: 0.95rem; line-height: 1.5; margin: 0 0 1.2rem; }
label { display: block; font-size: 0.8rem; color: var(--ink-3); margin: 0.9rem 0 0.35rem; }
input {
  width: 100%; padding: 0.7rem 0.85rem;
  background: var(--canvas); color: var(--ink);
  border: 1px solid var(--hairline); border-radius: var(--r-m);
  font: inherit; font-size: 1rem;
}
input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(154, 107, 255, 0.22); }
.btn-primary {
  margin-top: 0.9rem; width: 100%;
  padding: 0.72rem 1rem; border: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--magenta) 70%, var(--cyan));
  color: white; font: 600 1rem var(--font); cursor: pointer;
}
.btn-primary:hover { filter: brightness(1.1); }
.btn-primary:disabled { opacity: 0.55; cursor: default; }
.error { color: var(--danger); font-size: 0.88rem; min-height: 1.2em; margin: 0.8rem 0 0; }

/* ---- shell ---- */
#view-app { display: grid; grid-template-columns: 264px 1fr; min-height: 100vh; }
.rail {
  background: var(--sidebar); border-right: 1px solid var(--hairline);
  padding: 1.2rem 1rem; display: flex; flex-direction: column; gap: 1.4rem;
}
.rail nav { display: grid; gap: 2px; }
.nav-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 8px; border-radius: var(--r-s);
  color: var(--ink-2); text-decoration: none;
  font: 400 13px/1.3 var(--font);
  transition: background var(--duration-fast, 150ms) ease;
}
.nav-item:hover { background: var(--surface); color: var(--ink); }
.nav-item em { font-style: normal; font-size: 0.7rem; color: var(--ink-3); border: 1px solid var(--hairline); padding: 0.1rem 0.45rem; border-radius: 999px; }
.nav-active { background: var(--surface-hover); color: var(--ink); font-weight: 500; }
.nav-soon { opacity: 0.7; cursor: default; }
.rail-foot { margin-top: auto; display: grid; gap: 0.5rem; font-size: 0.8rem; color: var(--ink-3);
  border-top: 1px solid var(--hairline); padding-top: 0.9rem; }
.btn-quiet {
  background: none; border: 1px solid var(--hairline); border-radius: 999px;
  color: var(--ink-2); padding: 0.4rem 0.9rem; font: 500 0.85rem var(--font); cursor: pointer;
}
.btn-quiet:hover { border-color: var(--hairline-strong); color: var(--ink); }

.content { padding: 2.2rem clamp(1.4rem, 4vw, 3.5rem); max-width: 880px; }
.content-head h1 { margin: 0 0 0.3rem; letter-spacing: -0.02em; }

/* ---- usage rails: the budget bar, grown up ---- */
.usage { margin-top: 1.6rem; display: grid; gap: 1.1rem; }
.usage-head { display: flex; align-items: baseline; gap: 0.8rem; }
.tier-chip {
  text-transform: capitalize; font-weight: 600; font-size: 0.85rem;
  background: rgba(154, 107, 255, 0.16); color: var(--accent-hover);
  border: 1px solid var(--hairline-strong); border-radius: 999px; padding: 0.25rem 0.8rem;
}
.period { color: var(--ink-3); font-size: 0.85rem; }
.rail-top { display: flex; justify-content: space-between; font-size: 0.92rem; margin-bottom: 0.45rem; }
.rail-left { color: var(--ink-2); }
.rail-track {
  height: 8px; border-radius: 999px; background: var(--surface);
  border: 1px solid var(--hairline); overflow: hidden;
}
.rail-track i { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--speaker-them)); }
.rail-low .rail-track i { background: linear-gradient(90deg, var(--amber), var(--danger)); }
.rail-low .rail-left { color: var(--amber); }
.rail-sub { color: var(--ink-3); font-size: 0.8rem; margin-top: 0.35rem; }
.hours-line { color: var(--ink-2); font-size: 0.9rem; }
.usage-note { color: var(--ink-3); font-size: 0.85rem; line-height: 1.5; border-top: 1px solid var(--hairline); padding-top: 1rem; }
.loading { color: var(--ink-3); }

.privacy-strip {
  margin-top: 2.4rem; padding: 1.2rem 1.4rem;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-l);
}
.privacy-strip h2 { font-size: 0.95rem; margin: 0 0 0.4rem; color: var(--ink-2); }
.privacy-strip p { margin: 0; color: var(--ink-3); font-size: 0.88rem; line-height: 1.55; }

/* Phones. The rail becomes a top bar, and everything that was sized for a
   desktop column has to stop being wider than the screen: the nav scrolls
   horizontally instead of stretching the page, the board drops to one lane,
   and forms stack. Verified at 390px — the page must never scroll sideways. */
@media (max-width: 760px) {
  #view-app { grid-template-columns: 1fr; }
  .rail {
    flex-direction: row; align-items: center; gap: 0.8rem;
    padding: 0.7rem 1rem; overflow-x: auto; scrollbar-width: none;
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail nav { display: flex; gap: 0.3rem; flex: none; }
  .nav-item { white-space: nowrap; padding: 0.35rem 0.7rem; }
  /* Sign-out rides at the end of the scrolling bar rather than being hidden:
     a phone user who cannot sign out is a worse bug than a crowded bar. */
  .rail-foot { margin: 0 0 0 auto; display: flex; gap: 0.4rem; flex: none; }
  .rail-foot #who { display: none; }
  .rail-foot .btn-quiet { white-space: nowrap; padding: 0.3rem 0.7rem; font-size: 0.8rem; }
  .content { padding: 1.4rem 1rem 3rem; max-width: 100%; }
  .content-head h1 { font-size: 1.6rem; }

  .board { grid-template-columns: 1fr; gap: 0.8rem; }
  .commit-card, .decision-row, .team-card, .setting-row, .danger-zone { max-width: 100%; }
  .setting-row { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
  .danger-zone form, .team-create, .invite-form { flex-direction: column; align-items: stretch; }
  .invite-banner { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
  .decision-meta { row-gap: 0.4rem; }
  .shared-wrap { padding: 1.6rem 1rem 3rem; }
}

/* Nothing may make the page scroll sideways — a horizontal scrollbar on a
   phone is the difference between "reads fine" and "half the words are gone". */
html, body { overflow-x: hidden; }
#view-app, .content { min-width: 0; }

/* ---- meetings list ---- */
.meetings { margin-top: 1.4rem; }
.day-head { color: var(--ink-3); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; margin: 1.4rem 0 0.5rem; }
.meeting-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.85rem 1rem; border: 1px solid var(--hairline); border-radius: var(--r-m);
  background: var(--surface); margin-bottom: 0.5rem;
}
.meeting-row:hover { background: var(--surface-hover); border-color: var(--hairline-strong); }
.meeting-main { display: grid; gap: 0.2rem; }
.meeting-title { font-weight: 600; }
.meeting-meta { color: var(--ink-3); font-size: 0.82rem; }
.meeting-soon { color: var(--ink-3); font-size: 0.75rem; border: 1px solid var(--hairline); border-radius: 999px; padding: 0.2rem 0.6rem; }
.empty { border: 1px dashed var(--hairline-strong); border-radius: var(--r-l); padding: 2rem; text-align: center; }
.empty h3 { margin: 0 0 0.4rem; }
.empty p { margin: 0 auto; max-width: 40ch; color: var(--ink-3); font-size: 0.9rem; line-height: 1.55; }

/* ---- meeting detail ---- */
.meeting-row { cursor: pointer; }
.meeting-open { color: var(--ink-3); }
.back-link { color: var(--cyan); text-decoration: none; font-size: 0.88rem; }
.meeting-head { margin: 1rem 0 1.4rem; display: grid; gap: 0.4rem; justify-items: start; }
.meeting-head h2 { margin: 0.4rem 0 0; letter-spacing: -0.02em; }
.meeting-body { border-top: 1px solid var(--hairline); padding-top: 1.2rem; max-width: 68ch; }
.meeting-body p { line-height: 1.65; color: var(--ink-2); }
.empty-inline { color: var(--ink-3); }

/* ---- feedback ---- */
.feedback-slot { margin-top: 1.6rem; }
.feedback { display: flex; align-items: center; gap: 0.7rem; }
.feedback-q { color: var(--ink-3); font-size: 0.9rem; }
.feedback-note { display: flex; gap: 0.5rem; }
.feedback-note input { max-width: 34ch; }
.feedback-done { color: var(--ink-3); font-size: 0.9rem; }
.privacy-sub { margin-top: 0.5rem !important; }

/* ---- provider sign-in ---- */
.providers { display: grid; gap: 0.55rem; margin-bottom: 0.4rem; }
.btn-provider {
  display: block; text-align: center; padding: 0.65rem 1rem;
  border: 1px solid var(--hairline-strong); border-radius: 999px;
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.95rem;
  background: var(--surface);
}
.btn-provider:hover { background: var(--surface-hover); }
.or-line { display: flex; align-items: center; gap: 0.8rem; color: var(--ink-3); font-size: 0.8rem; margin: 1rem 0 0.2rem; }
.or-line::before, .or-line::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }

/* Ledger read screens: commitments board + decisions list. Lanes are urgency,
   not status — status is the small chip on each card. */
/* Four lanes read as one board only when they sit side by side; at 240px
   minimum the fourth wrapped to its own row and the board looked half-empty. */
.board { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; align-items: start; }
@media (min-width: 1100px) { .board { grid-template-columns: repeat(4, 1fr); } }
.lane[data-lane="Closed"] {
  grid-column: 1 / -1;
  border-top: 1px solid var(--hairline);
  padding-top: 1.1rem;
  margin-top: 0.4rem;
}
.lane[data-lane="Closed"] .commit-card { display: inline-block; vertical-align: top;
  width: min(260px, 100%); margin-right: 0.8rem; }
.lane-head { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 0.7rem; display: flex; gap: 0.5rem; align-items: baseline; }
.lane-count { color: var(--ink-2); font-weight: 600; }
.commit-card { border: 1px solid var(--hairline); border-radius: 12px; padding: 0.85rem 1rem; margin-bottom: 0.7rem; background: var(--surface); }
.commit-card.overdue { border-color: color-mix(in oklch, var(--danger, #e5484d) 45%, var(--hairline)); }
.commit-card h3 { margin: 0 0 0.45rem; font-size: 0.95rem; line-height: 1.35; }
.commit-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.4rem; font-size: 0.78rem; color: var(--ink-2); }
.commit-meta .owner { font-weight: 600; }
.commit-source { margin: 0; font-size: 0.78rem; color: var(--ink-3); }
.status { display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--hairline); border-radius: 999px; padding: 3px 9px;
  font: 600 10px/1 var(--font-rounded); letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--ink-2); }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
.status-decided, .status-done { background: var(--accent-tint); border-color: rgba(154,107,255,0.5);
  color: var(--accent-text); }
.status-decided::before, .status-done::before { background: var(--accent); }
.status-open, .status-in_progress, .status-proposed { background: rgba(79,187,234,0.10);
  border-color: rgba(79,187,234,0.35); color: var(--speaker-them); }
.status-open::before, .status-in_progress::before, .status-proposed::before { background: var(--speaker-them); }
.status-blocked, .status-reversed, .status-cancelled { background: rgba(240,90,106,0.10);
  border-color: rgba(240,90,106,0.35); color: var(--record-red); }
.status-blocked::before, .status-reversed::before, .status-cancelled::before { background: var(--record-red); }
.status-done { opacity: 0.75; }
.decision-list { display: flex; flex-direction: column; gap: 0.9rem; }
.decision-row { border: 1px solid var(--hairline); border-radius: 12px; padding: 0.95rem 1.1rem; background: var(--surface); }
.decision-row { cursor: pointer; transition: background var(--duration-fast, 150ms) ease,
  border-color var(--duration-fast, 150ms) ease; }
.decision-row:hover { background: var(--surface-hover); border-color: var(--hairline-strong); }
.decision-row:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 2px; }
.decision-row:hover .decision-open { color: var(--ink-1); transform: translateX(2px); }
.decision-open { color: var(--ink-3); margin-left: 0.6rem; flex: none;
  transition: transform var(--duration-fast, 150ms) ease, color var(--duration-fast, 150ms) ease; }
.decision-line { display: flex; justify-content: space-between; gap: 0.8rem; align-items: baseline; }
.decision-line h1, .decision-line h2, .decision-line h3 { margin: 0; font-size: 1rem; }
.decision-statement { margin: 0.45rem 0 0; color: var(--ink-2); font-size: 0.9rem; line-height: 1.45; }
.decision-meta { margin: 0.5rem 0 0; font-size: 0.78rem; color: var(--ink-3); display: flex; gap: 0.4rem; flex-wrap: wrap; }

/* Settings: one honest toggle. */
.setting-row { display: flex; justify-content: space-between; gap: 1.4rem; align-items: flex-start; border: 1px solid var(--hairline); border-radius: 12px; padding: 1.1rem 1.2rem; background: var(--surface); max-width: 620px; }
.setting-copy h2 { margin: 0 0 0.4rem; font-size: 1rem; }
.setting-copy p { margin: 0; font-size: 0.88rem; color: var(--ink-2); line-height: 1.5; }
.setting-note { margin-top: 0.4rem !important; color: var(--ink-3) !important; font-size: 0.78rem !important; }
.setting-foot { margin-top: 1rem; font-size: 0.8rem; color: var(--ink-3); max-width: 620px; }
.setting-error { color: #e5484d; font-size: 0.8rem; margin: 0.5rem 0 0; }
.toggle { flex: none; width: 44px; height: 26px; border-radius: 999px; border: 1px solid var(--hairline); background: var(--surface-hover, rgba(127,127,127,0.15)); position: relative; cursor: pointer; transition: background 150ms ease; }
.toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.35); transition: transform 150ms ease; }
.toggle.on { background: #6e56cf; }
.toggle.on::after { transform: translateX(18px); }
.toggle:disabled { opacity: 0.6; cursor: wait; }

/* Public shared-decision page */
.shared-wrap { max-width: 680px; margin: 0 auto; padding: 2.5rem 1.2rem 4rem; }
.shared-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1.6rem; }
.shared-cta { font-size: 0.85rem; color: var(--ink-3); text-decoration: none;
  border: 1px solid var(--hairline); border-radius: 999px; padding: 0.3rem 0.8rem;
  transition: color 150ms ease, border-color 150ms ease; }
.shared-cta:hover { color: var(--ink-1); border-color: var(--hairline-strong); }
.shared-cta:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 2px; }
.shared-scope { border: 1px solid var(--hairline); border-left: 3px solid #6e56cf; border-radius: 8px; padding: 0.8rem 1rem; font-size: 0.85rem; color: var(--ink-2); margin-bottom: 1.2rem; line-height: 1.5; }
.shared-items-head { margin: 1.4rem 0 0.7rem; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.btn-share { border: 1px solid var(--hairline); background: none; color: inherit; border-radius: 999px; padding: 0.1rem 0.7rem; font-size: 0.75rem; cursor: pointer; }
.btn-share:hover { border-color: #6e56cf; }
.share-note { font-size: 0.75rem; color: var(--ink-3); word-break: break-all; }

/* Team screen */
.team-card { border: 1px solid var(--hairline); border-radius: 12px; padding: 1rem 1.2rem; background: var(--surface); max-width: 620px; margin-bottom: 1rem; }
.team-line { display: flex; justify-content: space-between; align-items: baseline; }
.team-line h2 { margin: 0; font-size: 1.05rem; }
.team-count { font-size: 0.8rem; color: var(--ink-3); }
.member-list { list-style: none; margin: 0.8rem 0 0; padding: 0; }
.member-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.45rem 0; border-top: 1px solid var(--hairline); font-size: 0.9rem; }
.member-name { flex: 1; }
.role-chip { border: 1px solid var(--hairline); border-radius: 999px; padding: 0.05rem 0.6rem; font-size: 0.72rem; }
.role-owner { border-color: #6e56cf; color: #a394e8; }
.btn-remove { border: 1px solid var(--hairline); background: none; color: inherit; border-radius: 999px; padding: 0.1rem 0.6rem; font-size: 0.72rem; cursor: pointer; }
.btn-remove:hover { border-color: #e5484d; color: #e5484d; }
.team-note { margin: 0.8rem 0 0; font-size: 0.76rem; color: var(--ink-3); }
.team-create { display: flex; gap: 0.6rem; max-width: 620px; margin-top: 0.4rem; }
.team-create input { flex: 1; background: none; border: 1px solid var(--hairline); border-radius: 8px; padding: 0.5rem 0.8rem; color: inherit; }

/* Keyboard focus: one visible ring everywhere, never stripped. */
:focus-visible { outline: 2px solid #6e56cf; outline-offset: 2px; border-radius: 4px; }
.toggle:focus-visible { outline-offset: 3px; }

/* Invites + danger zone + blind-spot archive */
.invite-banner { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border: 1px solid #6e56cf55; border-radius: 10px; padding: 0.7rem 1rem; margin-bottom: 1rem; background: #6e56cf14; font-size: 0.9rem; }
.invite-form { display: flex; gap: 0.6rem; align-items: center; margin-top: 0.8rem; }
.invite-form input { flex: 1; background: none; border: 1px solid var(--hairline); border-radius: 8px; padding: 0.42rem 0.7rem; color: inherit; }
.invite-note { font-size: 0.75rem; color: var(--ink-3); }
.danger-zone { border: 1px solid #e5484d55; border-radius: 12px; padding: 1.1rem 1.2rem; margin-top: 1.6rem; max-width: 620px; }
.danger-zone h2 { margin: 0 0 0.4rem; font-size: 1rem; color: #e5484d; }
.danger-zone p { margin: 0 0 0.8rem; font-size: 0.85rem; color: var(--ink-2); }
.danger-zone form { display: flex; gap: 0.6rem; }
.danger-zone input { flex: 1; background: none; border: 1px solid var(--hairline); border-radius: 8px; padding: 0.5rem 0.8rem; color: inherit; }
.btn-danger { border: 1px solid #e5484d; color: #e5484d; background: none; border-radius: 8px; padding: 0.5rem 1rem; cursor: pointer; }
.btn-danger:hover { background: #e5484d1a; }
.bs-archive { margin-top: 1.6rem; max-width: 680px; }
.bs-archive h2 { font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 0.7rem; }
.bs-card { border: 1px solid var(--hairline); border-left: 3px solid #6e56cf; border-radius: 10px; padding: 0.85rem 1rem; margin-bottom: 0.7rem; background: var(--surface); }
.bs-label { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: #a394e8; }
.bs-card h3 { margin: 0.3rem 0 0.4rem; font-size: 0.95rem; }
.bs-card blockquote { margin: 0 0 0.4rem; padding-left: 0.8rem; border-left: 2px solid var(--hairline); color: var(--ink-2); font-size: 0.88rem; font-style: italic; }
.bs-card p { margin: 0; font-size: 0.85rem; color: var(--ink-2); }
.bs-note { font-size: 0.75rem; color: var(--ink-3); }

/* The moment between coming back from a provider and the session existing.
   Showing the sign-in form here made a successful login look like a failed
   one for a beat, then jump. */
.signing-card { text-align: center; }
.signing-note { color: var(--ink-2); margin: 1rem 0 0.2rem; }

/* Search. Sits above the list rather than in the rail: it searches THIS
   screen's material, and a global box would promise more than it covers. */
.search-bar { display: flex; gap: 0.6rem; margin: 1.2rem 0 0.4rem; max-width: 620px; }
.search-bar input { flex: 1; }
.meeting-snippet { display: block; color: var(--ink-3); font-size: 0.85rem; line-height: 1.5; margin-top: 0.3rem; }
mark { background: rgba(154, 107, 255, 0.28); color: var(--ink); border-radius: 3px; padding: 0 2px; }

/* Said when a page is not the whole account. */
.list-note { color: var(--ink-3); font-size: 0.85rem; margin: 1rem 0 0; }

/* Provenance of the material a call rested on. Deliberately plain: it is a
   citation list, not a document viewer — the documents never left the Mac. */
.context-sources { margin-top: 1.6rem; max-width: 680px; }
.context-sources h2 { font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 0.7rem; }
.context-sources ul { list-style: none; margin: 0; padding: 0; }
.context-sources li { display: flex; gap: 0.7rem; align-items: baseline; padding: 0.5rem 0; border-top: 1px solid var(--hairline); font-size: 0.9rem; }
.ctx-source { color: var(--accent-hover); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; flex: none; }
.ctx-name { flex: 1; }
.ctx-size { color: var(--ink-3); font-size: 0.8rem; }
.ctx-note { margin: 0.7rem 0 0; font-size: 0.78rem; color: var(--ink-3); }

/* The lead: what the call set out to do, and what it produced. Sized above the
   transcript deliberately — the summary is the answer, the transcript is the
   evidence for it. */
.summary { margin: 1.4rem 0 0; max-width: 680px; }
.summary-goal { margin: 0 0 1rem; padding-top: 0.9rem; font-size: 0.95rem; color: var(--ink-2); }
.summary-goal span { color: var(--ink-3); font-size: 0.8rem; text-transform: uppercase;
  letter-spacing: 0.06em; margin-right: 0.45rem; }
.summary-points { list-style: none; margin: 0; padding: 0; }
.summary-points li { position: relative; padding: 0 0 0 1.1rem; margin-bottom: 0.6rem;
  font-size: 1rem; line-height: 1.55; }
.summary-points li::before { content: ""; position: absolute; left: 0; top: 0.62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent-hover); }
.summary-points strong { font-weight: 600; color: var(--ink-1); }

/* The transcript stops being the page and becomes a section of it. */
.transcript-block { margin-top: 2.2rem; }
.transcript-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; border-top: 1px solid var(--hairline); padding-top: 1.1rem; margin-bottom: 0.6rem; }
.transcript-head h2 { font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-3); margin: 0; }

.summary-rate { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem;
  margin-top: 1.1rem; font-size: 0.82rem; color: var(--ink-3); }

/* Decision detail. The statement leads at reading size; everything else is
   apparatus around it — who, what it obliged, who can see it, how it moved. */
.decision-head { margin-bottom: 1.2rem; }
.decision-statement.lead { font-size: 1.15rem; line-height: 1.5; max-width: 62ch; margin: 0 0 1.4rem; }
.decision-why { margin-bottom: 1.4rem; max-width: 62ch; }
.decision-why h3, .decision-people h3, .decision-items h3, .shares h3, .audit h3 {
  font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 0.5rem; }
.decision-why p { margin: 0; line-height: 1.55; }
.decision-people ul, .decision-items ul, .shares ul, .audit ol {
  list-style: none; margin: 0; padding: 0; }
.decision-people li { display: inline-flex; align-items: baseline; gap: 0.4rem;
  padding: 0.3rem 0.7rem; margin: 0 0.4rem 0.4rem 0; border: 1px solid var(--hairline);
  border-radius: 999px; font-size: 0.88rem; }
.decision-people li span { color: var(--ink-3); font-size: 0.76rem; }
.decision-people, .decision-items, .shares, .audit { margin-bottom: 1.6rem; }
.decision-items li { display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.55rem 0; border-top: 1px solid var(--hairline); font-size: 0.92rem; }
.item-meta { color: var(--ink-3); font-size: 0.82rem; white-space: nowrap; }

/* Share links are a security surface, so a live one is legible at a glance and
   a dead one stays visible rather than vanishing. */
.share-row { display: flex; align-items: center; gap: 0.8rem; padding: 0.5rem 0;
  border-top: 1px solid var(--hairline); font-size: 0.88rem; }
.share-row.is-revoked { color: var(--ink-3); }
.share-state { margin-left: auto; font-size: 0.8rem; color: var(--ink-3); }
.share-row.is-revoked .share-state { text-decoration: line-through; }

.audit-row { display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.45rem 0; border-top: 1px solid var(--hairline); font-size: 0.86rem; }
.audit-when { color: var(--ink-3); white-space: nowrap; }

/* A closed commitment stays on the board, dimmed. Removing it would make the
   board disagree with the ledger, which is the one thing it must not do. */
.commit-card.is-done { opacity: 0.55; }
.commit-card.is-done h3 { text-decoration: line-through; }
.commit-done { margin-top: 0.6rem; }

.commit-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.6rem; }
/* Assignment is an edit, so it opens in place rather than navigating away —
   the card stays visible next to the lane it will move between. */
.assign-form { display: grid; gap: 0.5rem; margin-top: 0.7rem;
  padding-top: 0.7rem; border-top: 1px solid var(--hairline); }
.assign-form label { display: grid; gap: 0.25rem; font-size: 0.75rem;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); }
.assign-form input { background: var(--surface-2); border: 1px solid var(--hairline);
  border-radius: 8px; padding: 0.4rem 0.55rem; color: var(--ink-1);
  font: inherit; font-size: 0.88rem; text-transform: none; letter-spacing: 0; }
.assign-form input:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 1px; }
.assign-actions { display: flex; gap: 0.5rem; }

.board-toggle { grid-column: 1 / -1; margin: 0.6rem 0 0; }

.board-flash { grid-column: 1 / -1; margin: 0.6rem 0 0; font-size: 0.85rem;
  color: var(--ink-2); border-left: 2px solid var(--accent-hover); padding-left: 0.7rem; }

/* Ledger filter bar. Sits above the list rather than in a sidebar: with two
   controls a drawer costs more attention than it saves. */
.ledger-filters { display: flex; gap: 1rem; flex-wrap: wrap; align-items: end;
  margin-bottom: 1.2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--hairline); }
.ledger-filters label { display: grid; gap: 0.3rem; font-size: 0.72rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.ledger-filters select { background: var(--surface-2); border: 1px solid var(--hairline);
  border-radius: 8px; padding: 0.4rem 0.6rem; color: var(--ink-1); font: inherit;
  font-size: 0.88rem; text-transform: none; letter-spacing: 0; min-width: 10rem; }
.ledger-filters select:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 1px; }

/* Transcript as a conversation. One chip per turn, not one label per chunk —
   the Mac emits four-second fragments and the join happens here. */
.turn { display: grid; grid-template-columns: 7.5rem 1fr; gap: 0.9rem;
  padding: 0.55rem 0; align-items: baseline; }
.turn + .turn { border-top: 1px solid var(--hairline); }
.turn-speaker { font: 500 0.7rem/1.6 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--speaker-them); text-align: right; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.turn.is-you .turn-speaker { color: var(--speaker-you); }
.turn-text { margin: 0; line-height: 1.6; }
@media (max-width: 560px) {
  .turn { grid-template-columns: 1fr; gap: 0.15rem; }
  .turn-speaker { text-align: left; }
}

/* What the call produced, scannable. Muted by design: these guide the eye
   between rows, they do not compete with the titles. */
.meeting-badges { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.3rem; }
.meeting-badges span { font-size: 0.72rem; color: var(--ink-3);
  border: 1px solid var(--hairline); border-radius: 999px; padding: 0.1rem 0.55rem; }

/* The pre-call brief. Sits above usage on the default screen: "about to walk
   into a meeting" is the moment this page is opened in a hurry. */
.brief-panel { border: 1px solid var(--hairline); border-radius: 12px;
  padding: 1.1rem 1.25rem; margin-bottom: 1.6rem; max-width: 680px;
  background: var(--surface); }
.brief-panel h2 { font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 0.7rem; }
.brief-title { display: flex; gap: 0.6rem; align-items: baseline; flex-wrap: wrap;
  margin: 0 0 0.4rem; font-size: 1.05rem; }
.brief-stale { font-size: 0.75rem; color: var(--warn, #e5b567); }
.brief-headline { margin: 0 0 0.6rem; color: var(--ink-2); }
.brief-points { list-style: none; margin: 0 0 0.8rem; padding: 0; }
.brief-points li { position: relative; padding-left: 1rem; margin-bottom: 0.4rem;
  font-size: 0.92rem; line-height: 1.5; }
.brief-points li::before { content: ""; position: absolute; left: 0; top: 0.55em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent-hover); }
.brief-readfor { color: var(--ink-3); font-size: 0.85rem; }
.brief-open h3 { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 0.4rem; }
.brief-open ul { list-style: none; margin: 0; padding: 0; }
.brief-open li { display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.35rem 0; border-top: 1px solid var(--hairline); font-size: 0.88rem; }
.brief-open li.is-overdue { color: var(--danger, #e5677a); }

/* Master-detail meetings (Fireflies posture): the list is a fixture, the
   detail opens beside it. Below 980px the panes swap like screens — a phone
   has no room for a fixture. */
@media (min-width: 980px) {
  .meetings-split { display: grid; grid-template-columns: 340px minmax(0, 1fr);
    gap: 1.6rem; align-items: start; }
  .meetings-list-pane { position: sticky; top: 1rem; max-height: calc(100vh - 2rem);
    overflow-y: auto; padding-right: 0.2rem; }
  /* The list is a rail now: tighter rows, no day-group indent to spare. */
  .meetings-list-pane .meeting-row { padding: 0.6rem 0.7rem; }
  .meetings-list-pane .meeting-title { font-size: 0.92rem; }
  /* The back link is for the stacked flow; beside the list it is noise. */
  .meetings-detail-pane .back-link { display: none; }
}
@media (max-width: 979px) {
  .meetings-split.has-detail .meetings-list-pane { display: none; }
  .meetings-split:not(.has-detail) .meetings-detail-pane { display: none; }
}
.meeting-row.is-active { background: var(--surface-hover); border-color: var(--accent-hover); }
.detail-empty { border: 1px dashed var(--hairline); border-radius: 12px;
  padding: 2.2rem 1.6rem; color: var(--ink-3); text-align: center; margin-top: 0.4rem; }

/* Rail counts, the film's .section-count idiom: quiet numerals that answer
   "how much is in there" before a click. */
.nav-item { display: flex; align-items: center; }
.nav-count { margin-left: auto; font: 500 0.7rem/1 var(--font-mono);
  color: var(--ink-2); background: rgba(255,255,255,0.05);
  border-radius: 999px; padding: 3px 7px; }
.nav-item.active .nav-count { color: var(--ink-2); }

/* The film's clock column: speaker above, mono second below, both right-aligned. */
.turn-side { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.turn-ts { font: 400 0.66rem/1.4 var(--font-mono); color: var(--ink-3); text-align: right; }
@media (max-width: 560px) {
  .turn-side { flex-direction: row; gap: 0.5rem; align-items: baseline; }
  .turn-ts { text-align: left; }
}

/* Film chip.hot: the one action a card most wants you to take. Everything
   else stays quiet, or nothing reads as primary. */
.btn-hot { background: var(--accent-soft); border-color: rgba(154, 107, 255, 0.5);
  color: var(--accent-text); }
.btn-hot:hover { background: rgba(154, 107, 255, 0.3); }

/* Item 2 — the film's brief-line idiom for "still open with these people":
   4px bullet, red when overdue, mono source line. The panel's open items map
   onto it exactly. */
.brief-open li { display: flex; gap: 7px; align-items: flex-start;
  border-top: none; padding: 0.25rem 0; font-size: 0.82rem; color: var(--ink-2); }
.brief-open li::before { content: ""; width: 4px; height: 4px; border-radius: 50%;
  margin-top: 0.5em; background: var(--ink-3); flex: none; }
.brief-open li.is-overdue { color: var(--ink); }
.brief-open li.is-overdue::before { background: var(--record-red); }
.brief-open li .muted { margin-left: auto; font: 400 0.72rem/1.4 var(--font-mono); }

/* Item 3 — overlay elevation, the film's sheet shadows scaled to inline
   disclosure: the assign form opens "above" its card. */
.assign-form:not([hidden]) { background: var(--surface-sunken);
  border-radius: var(--r-m); padding: 0.7rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); border-top: none; }

/* Detail tabs, the film's segmented idiom: quiet row, the active tab carries
   the surface and an accent underline. */
.detail-tabs { display: flex; gap: 0.25rem; margin: 1.1rem 0 1rem;
  border-bottom: 1px solid var(--hairline); }
.detail-tabs [role="tab"] { appearance: none; background: none; border: none;
  color: var(--ink-3); font: 500 0.85rem/1 var(--font); padding: 0.55rem 0.9rem;
  cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.detail-tabs [role="tab"]:hover { color: var(--ink-2); }
.detail-tabs [role="tab"][aria-selected="true"] { color: var(--ink);
  border-bottom-color: var(--accent); }
.detail-tabs [role="tab"]:focus-visible { outline: 2px solid var(--accent-hover);
  outline-offset: -2px; border-radius: 4px; }

/* Density pass (parity P3, film chrome scale): list rows and card chrome sit
   at the film's 13px, metadata at 11px. Reading surfaces (transcript,
   statements, summaries) deliberately stay at reading size. */
.meeting-title { font-size: 0.88rem; }
.meeting-meta { font-size: 0.72rem; }
.meeting-badges span { font-size: 0.68rem; padding: 0.08rem 0.5rem; }
.commit-card h3 { font-size: 0.88rem; }
.commit-meta, .commit-source { font-size: 0.74rem; }
.day-head { font-size: 0.72rem; }
.decision-row h2 { font-size: 1rem; }
.decision-meta { font-size: 0.76rem; }
.content-head h1 { font-size: 1.5rem; }
.content-head .sub { font-size: 0.88rem; }

/* P4: the meeting toolbar — actions for the whole meeting sit with its name,
   once, instead of scattered per tab. */
.meeting-head-line { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.meeting-head-line h2 { margin: 0; flex: 1; min-width: 0; }
.meeting-toolbar { display: flex; gap: 0.45rem; flex: none; }

/* ─── Ask this meeting: the film's right third, on the archive page. ───────
   Two independent facts decide the layout, and each gets its own query:
   1) The SHELL widens only when a wide window is showing a meeting with an
      ask panel — .content caps at 880px otherwise, and a 300px sidebar
      inside 880 minus the 340px list is one word per line.
   2) The side-by-side itself keys on the DETAIL PANE's own width via a
      container query, so it engages exactly when the pane can afford it —
      whatever the shell, the list, or a future redesign does around it.
   Browsers without :has/@container degrade the same way narrow screens do:
   the panel stacks below the meeting.
   `grid-row: span 99` pins the panel to the top across however many content
   blocks the left column has — surplus implicit rows are empty and free. */
@media (min-width: 1280px) {
  .content:has(#meetings-detail.with-ask) { max-width: 1360px; }
}
/* The QUERIED element cannot be its own container: the query walks
   ancestors, and .meetings-detail-pane is the SAME element as
   #meetings-detail. The split is the nearest true ancestor, so it is
   the container, and the threshold is in split-widths: the detail
   fits a 300px sidebar when the split (list 340 + gap + detail>=700)
   clears about 1060px. */
.meetings-split { container-type: inline-size; }
@container (min-width: 1060px) {
  #meetings-detail.with-ask {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    column-gap: 1.4rem;
    align-items: start;
  }
  #meetings-detail.with-ask > :not(.ask-column) { grid-column: 1; }
  #meetings-detail.with-ask > .ask-column {
    grid-column: 2;
    grid-row: 1 / span 99;
    position: sticky;
    top: 1rem;
  }
  #meetings-detail.with-ask > .ask-column .ask-panel { margin-top: 0; }
}

.ask-panel {
  background: var(--surface-sunken);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 0.9rem;
  margin-top: 1rem;
}
@media (min-width: 1280px) { .ask-panel { margin-top: 0; } }
.ask-head { margin: 0 0 0.6rem; font-size: 0.95rem; }

/* Film chip finish: surface fill, hairline, pill radius, 13px/500. */
.ask-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.7rem; }
.ask-panel .chip {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
  transition: background var(--fast, 150ms), border-color var(--fast, 150ms), color var(--fast, 150ms);
}
.ask-panel .chip:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-text);
}

.ask-panel [data-ask-form] { display: flex; gap: 0.4rem; }
.ask-panel [data-ask-form] input {
  flex: 1;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  color: var(--ink-1);
  font: inherit;
  font-size: 0.85rem;
  padding: 0.4rem 0.6rem;
}
.ask-panel [data-ask-form] input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.ask-note {
  margin: 0.7rem 0 0;
  font-size: 0.8rem;
  color: var(--ink-2);
  border-left: 3px solid var(--danger, #e5484d);
  padding: 0.35rem 0 0.35rem 0.6rem;
}
.ask-note.ask-upgrade { border-left-color: var(--accent); background: var(--accent-tint); }

.ask-thread { margin-top: 0.8rem; display: grid; gap: 0.8rem; }
.ask-q { margin: 0 0 0.3rem; font-size: 0.8rem; font-weight: 600; color: var(--ink-2); }
.ask-answer {
  background: var(--accent-tint);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  padding: 0.55rem 0.7rem;
  font-size: 0.85rem;
}
.ask-answer p { margin: 0 0 0.45rem; }
.ask-answer p:last-child { margin-bottom: 0; }
.ask-waiting { color: var(--ink-3); }
.ask-meta { font-size: 0.72rem; color: var(--ink-3); }

/* Follow-up proposals under an answer: the same chip language, quieter, and
   full-width so a question-length label stays readable. */
.ask-followups { display: grid; gap: 0.35rem; margin-top: 0.6rem; }
.ask-followups .chip { text-align: left; white-space: normal; line-height: 1.35; }

/* Two panels share the right column: this meeting first, the archive under it. */
.ask-column { display: grid; gap: 1rem; align-content: start; }
.ask-starters-head { margin: 0 0 0.35rem; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.ask-starters .chip { border-color: var(--hairline-strong); }

/* BPC-007: ledger chips reuse the ask-chip language, quieter on cards. */
.ledger-chat { margin: 0.7rem 0 0.2rem; }
.commit-card .ledger-chat, .decision-row .ledger-chat { margin-top: 0.55rem; }
.ledger-chat-head {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ledger-chat-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ledger-chat .chip {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.25rem 0.6rem;
  cursor: pointer;
}
.ledger-chat .chip:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-text);
}
.ledger-chat .chip-cost {
  margin-left: 0.25rem;
  font-size: 0.68rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.ledger-chat-note {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  color: var(--ink-2);
  border-left: 3px solid var(--danger, #e5484d);
  padding: 0.35rem 0 0.35rem 0.6rem;
}
.ledger-chat-note.ask-upgrade { border-left-color: var(--accent); }
.ledger-chat-thread { margin-top: 0.6rem; display: grid; gap: 0.7rem; }
.ledger-chat [data-ledger-follow-form] {
  display: grid; gap: 0.35rem; margin-top: 0.5rem;
}
.ledger-chat [data-ledger-follow-form] textarea {
  width: 100%; min-height: 2.6rem; resize: vertical;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 8px;
  color: var(--ink); font: inherit; font-size: 0.85rem; padding: 0.4rem 0.55rem;
}
.bs-ask { margin-top: 0.5rem; font-size: 0.78rem; }

/* The per-point ask affordance in the summary: present but quiet — reading
   stays primary, asking is one hop away. */
.summary-points li { position: relative; }
.summary-points .point-ask {
  margin-left: 0.5rem; padding: 0.05rem 0.5rem;
  background: none; border: 1px solid var(--hairline); border-radius: 999px;
  color: var(--ink-3); font-size: 0.7rem; cursor: pointer; vertical-align: middle;
}
.summary-points .point-ask:hover { border-color: var(--accent); color: var(--accent-text); }

/* The composer's "+" and mic, ported from the Mac's ask field. */
.ask-panel [data-ask-form] { align-items: center; }
.ask-plus { position: relative; }
.ask-plus > summary {
  list-style: none; cursor: pointer; user-select: none;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-hover); color: var(--ink-2);
  font-weight: 600; font-size: 0.95rem;
}
.ask-plus > summary::-webkit-details-marker { display: none; }
.ask-plus[open] > summary { color: var(--accent-text); background: var(--accent-soft); }
.ask-plus-menu {
  position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 30;
  min-width: 240px; max-height: 320px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--hairline-strong);
  border-radius: 10px; padding: 0.4rem;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
  display: grid; gap: 2px;
}
.ask-plus-head { margin: 0.3rem 0.4rem 0.15rem; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.ask-plus-menu [role="menuitem"] {
  text-align: left; background: none; border: 0; cursor: pointer;
  color: var(--ink-2); font-size: 0.82rem; padding: 0.3rem 0.45rem; border-radius: 6px;
}
.ask-plus-menu [role="menuitem"]:hover { background: var(--surface-hover); color: var(--ink); }
.ask-mic {
  background: none; border: 1px solid var(--hairline); border-radius: 50%;
  width: 30px; height: 30px; cursor: pointer; font-size: 0.85rem;
}
.ask-mic.is-listening { border-color: var(--record-red); box-shadow: 0 0 0 3px rgba(240, 90, 106, 0.25); }

/* Fold idiom: every big block collapses, the choice is remembered. The
   summary row reads as a header with a disclosure caret, not as a control
   bar — hiding text should cost one quiet click. */
.block-fold > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 0.45rem;
}
.block-fold > summary::-webkit-details-marker { display: none; }
.block-fold > summary::before {
  content: '▸'; font-size: 0.7rem; color: var(--ink-3);
  transition: transform var(--duration-fast, 150ms) ease;
}
.block-fold[open] > summary::before { transform: rotate(90deg); }
.block-fold > summary .fold-label { font-size: inherit; }
.block-fold > summary h2 { margin: 0; font-size: 0.95rem; display: inline; }
.ask-panel .block-fold { margin-bottom: 0.6rem; }
.ask-panel .block-fold .ask-chips { margin-top: 0.5rem; }
.summary .block-fold > summary h2, .bs-archive .block-fold > summary h2 {
  font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2);
}

/* The bigger composer: a real textarea on its own row, controls beneath. */
.ask-panel [data-ask-form] { display: grid; grid-template-columns: auto 1fr auto auto; gap: 0.4rem; align-items: end; }
.ask-panel [data-ask-form] textarea {
  grid-column: 1 / -1;
  width: 100%; min-height: 3.4rem; max-height: 10rem; resize: vertical;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 10px;
  color: var(--ink); font: inherit; font-size: 0.88rem; line-height: 1.45;
  padding: 0.5rem 0.65rem;
}
.ask-panel [data-ask-form] textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ask-attachments { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.ask-attachment {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: var(--surface); border: 1px solid var(--hairline-strong);
  border-radius: 999px; padding: 0.15rem 0.55rem; font-size: 0.75rem; color: var(--ink-2);
}
.ask-attachment button { background: none; border: 0; color: var(--ink-3); cursor: pointer; font-size: 0.7rem; }
.ask-attachment button:hover { color: var(--danger); }

/* Small screens: the ask column becomes a drawer behind a floating button.
   Same DOM, different geometry — the panel "appears somehow" on 13" and 11"
   screens instead of drowning below the transcript. */
.ask-fab { display: none; }
@media (max-width: 1279px) {
  #meetings-detail.with-ask .ask-fab {
    /* Above the drawer (z 40): the control that opens it must stay reachable
       to close it, or the drawer becomes a trap. */
    display: block; position: fixed; right: 1rem; bottom: 1rem; z-index: 41;
    border-radius: 999px; padding: 0.6rem 1.3rem; font-weight: 600;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  }
  #meetings-detail.with-ask .ask-column {
    display: none;
    position: fixed; z-index: 40;
    top: 3.5rem; right: 0.75rem; bottom: 0.75rem;
    width: min(380px, 92vw);
    overflow-y: auto;
    background: var(--canvas);
    border: 1px solid var(--hairline-strong); border-radius: 14px;
    padding: 0.75rem;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  }
  #meetings-detail.with-ask.ask-open .ask-column { display: grid; }
}