/* Self-hosted Adobe Source fonts (OFL). Served from /static — no Google call. */
@font-face {
  font-family: "Source Sans 3";
  src: url("/static/fonts/SourceSans3VF-Upright.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("/static/fonts/SourceSans3VF-Italic.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/static/fonts/SourceSerif4VF-Roman.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

:root, [data-theme="day"] {
  --navy: #0f2535;
  --navy-fg: #f6f4ef;
  --bg: #f3efe6;
  --surface: #efebe1;
  --elevated: #f3efe6;
  --fg: #1c2733;
  --muted: #5c6670;
  --subtle: #8a9299;
  --border: color-mix(in oklab, #1c2733 16%, transparent);
  --rule: color-mix(in oklab, #1c2733 22%, transparent);
  --accent: #0d7a6f;
  --accent-fg: #f6f4ef;
  --danger: #b23b32;
  --warn: #9a5b00;
  --ok: #0d7a6f;
  --chip: #e8efe8;
  --shadow-border:
    0 0 0 1px rgba(15, 37, 53, 0.06),
    0 1px 2px -1px rgba(15, 37, 53, 0.06),
    0 2px 4px 0 rgba(15, 37, 53, 0.04);
  --font-sans: "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Source Serif 4", ui-serif, Georgia, serif;
  --navy-2: #163a52;
  --ink: var(--fg);
  --paper: var(--bg);
  --paper-2: var(--surface);
  --card: var(--elevated);
  --tint: var(--surface);
  --line: #d4cfc4;
  --accent-d: var(--accent);
  --accent-bg: var(--chip);
  --danger-bg: #f4e4e2;
  --warn-bg: #fff4e0;
  --warn-line: #e3b766;
  --warn-fg: var(--warn);
  color-scheme: light;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --radius: 10px;
}
[data-theme="night"], [data-theme="dark"] {
  --navy: #0a1924;
  --navy-fg: #f3eee4;
  --bg: #0f2535;
  --surface: #132b3c;
  --elevated: #0f2535;
  --fg: #f3eee4;
  --muted: #b7c4cc;
  --subtle: #8aa0ad;
  --border: color-mix(in oklab, #f3eee4 16%, transparent);
  --rule: color-mix(in oklab, #f3eee4 22%, transparent);
  --accent: #3aa89c;
  --accent-fg: #07141c;
  --chip: #1a3d3a;
  --ink: var(--fg);
  --paper: var(--bg);
  --paper-2: var(--surface);
  --card: var(--surface);
  --tint: #163a52;
  --line: #2a5470;
  --accent-d: var(--accent);
  --accent-bg: var(--chip);
  --danger: #e06b62;
  --danger-bg: #3a2321;
  --warn-bg: #3a2f14;
  --warn-line: #6b5320;
  --warn-fg: #e6c56a;
  color-scheme: dark;
}
[data-theme="red"] {
  --navy: #100808;
  --navy-fg: #f0c8b8;
  --bg: #140a0a;
  --surface: #1c0e0e;
  --elevated: #140a0a;
  --fg: #f0c8b8;
  --muted: #c48a7a;
  --subtle: #8a5c50;
  --border: color-mix(in oklab, #f0c8b8 18%, transparent);
  --rule: color-mix(in oklab, #f0c8b8 24%, transparent);
  --accent: #e07050;
  --accent-fg: #140a0a;
  --danger: #ff8a70;
  --warn: #e0a060;
  --ok: #d08060;
  --chip: #3a1c16;
  --ink: var(--fg);
  --paper: var(--bg);
  --paper-2: var(--surface);
  --card: var(--surface);
  --tint: var(--surface);
  --line: #3a1c16;
  --accent-d: var(--accent);
  --accent-bg: var(--chip);
  --danger-bg: #3a1c16;
  --warn-bg: #2a1810;
  --warn-line: #6b5320;
  --warn-fg: var(--warn);
  color-scheme: dark;
}
[data-look="cards"] {
  --surface: #faf7f1;
  --elevated: #fffcf7;
}
[data-theme="night"] [data-look="cards"],
[data-theme="dark"] [data-look="cards"] {
  --surface: #132b3c;
  --elevated: #163445;
}
[data-theme="red"] [data-look="cards"] {
  --surface: #1c0e0e;
  --elevated: #140a0a;
}
.shadow-border { box-shadow: var(--shadow-border); }
.wordmark { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.kicker { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
}

a { color: var(--accent-d); }

/* The type-shaped edit form toggles sections with the `hidden` attribute; grid/flex/
   subform sections set an explicit `display`, which beats the UA [hidden] rule — force it
   so hiding a section (e.g. Vendor on a to-do) actually hides it. */
[hidden] { display: none !important; }

/* top bar */
.topbar {
  background: var(--navy);
  color: #eef3f6;
  padding: env(safe-area-inset-top) 0 0;
  display: flex; align-items: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18);   /* clear separation from the content below */
}
.nav-toggle {
  background: none; border: 0; color: var(--fg); cursor: pointer;
  line-height: 1; padding: 14px; margin: 0;
  display: flex; align-items: center;
}
.nav-ico { width: 22px; height: 22px; display: block; }
.nav-ico svg { width: 100%; height: 100%; display: block; }
.topbar .brand {
  color: #fff; font-weight: 700; text-decoration: none;
  padding: 14px 8px 14px 0; letter-spacing: .2px;
  display: flex; align-items: center; gap: 8px; min-width: 0;
}
.topbar .theme-toggle {
  margin: 0 8px 0 auto;                 /* pushed to the right edge of the bar */
  min-width: 40px; min-height: 40px; padding: 6px 10px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px; color: #eef3f6; font-size: 18px; line-height: 1; cursor: pointer;
}
.topbar .theme-toggle:hover { background: rgba(255,255,255,.16); }
.brand-ico { width: 18px; height: 18px; flex: none; display: block; }
.brand-ico svg { width: 100%; height: 100%; display: block; }
.brand-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ---- Boat-AI ask bar (§9 Decision #1: persistent, every screen) -------------------------
   Sticks directly under the topbar so it is always reachable without scrolling — that is the
   whole point of the decision. Deliberately QUIET: it must not compete with the page's own
   primary action (Log / Post comment), so it is a thin input, not a filled block. */
/* topbar + askbar pin together as one stack (two sticky top:0 siblings would overlap) */
.topstack { position: sticky; top: 0; z-index: 10; }
.askbar { background: var(--paper); border-bottom: 1px solid var(--line); }
/* visually hidden but read by screen readers — the bar's label */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
           overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.askbar-form { display: flex; align-items: center; gap: var(--space-2);
               max-width: 720px; margin: 0 auto; padding: var(--space-2) var(--space-3); }
.askbar-input { flex: 1; min-width: 0; margin: 0; padding: 9px 12px; font-size: 15px; }
.askbar-mic, .askbar-go, .askbar-convo { margin: 0; flex: none; }
/* conversation-mode toggle (💬) — same 44px thumb target as the mic */
.askbar-convo { min-width: 44px; min-height: 44px; padding: 9px; border-radius: 10px;
                background: var(--card); border: 1px solid var(--line); cursor: pointer; font-size: 18px; }
.askbar-convo[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-bg); }
/* HOT-MIC banner — unmissable while the mic is live hands-free; honesty over subtlety */
.askbar-hotmic { display: flex; align-items: center; gap: var(--space-2);
                 max-width: 720px; margin: var(--space-2) auto 0; padding: 8px 12px;
                 background: var(--danger-bg); border: 1px solid var(--danger); border-radius: 10px;
                 font-size: 14px; color: var(--danger); }
.askbar-hotmic .hotmic-dot { width: 10px; height: 10px; border-radius: 50%;
                             background: var(--danger); animation: pulse 1s infinite; flex: none; }
.askbar-hotmic [data-ask-hotmic-text] { flex: 1; }
.askbar-hotmic .hotmic-end { margin: 0; padding: 4px 12px; min-height: 32px; border-radius: 8px;
                             background: var(--danger); border-color: var(--danger); color: #fff;
                             font-size: 13px; cursor: pointer; }
/* 44px floor = the thumb-on-deck minimum; an icon button sized to its icon is a miss-target */
.askbar-mic { display: flex; align-items: center; justify-content: center;
              min-width: 44px; min-height: 44px; padding: 9px; border-radius: 10px;
              background: var(--card); border: 1px solid var(--line); cursor: pointer; }
.askbar-mic .askbar-ico { width: 18px; height: 18px; display: block; color: var(--accent); }
.askbar-mic .askbar-ico svg { width: 100%; height: 100%; display: block; }
.askbar-mic[aria-pressed="true"] { border-color: var(--danger); background: var(--danger-bg); }
.askbar-mic[aria-pressed="true"] .askbar-ico { color: var(--danger); animation: pulse 1s infinite; }
.askbar-go { min-height: 44px; padding: 9px 14px; background: var(--accent);
             border-color: var(--accent); color: #fff; }
.askbar-go:disabled { opacity: .6; cursor: default; }
/* model-brain addendum — general knowledge, clearly SET APART from the records answer (never blended) */
.ask-addendum { margin: var(--space-2) 0; padding: 10px 12px; border-left: 3px solid var(--muted);
                background: rgba(0,0,0,.03); border-radius: 0 8px 8px 0; font-size: 14px; color: var(--muted); }
.ask-addendum-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em;
                      text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }

/* resilient-upload pill — a background/resumed upload's status, floating so it survives navigation */
.rupload-pill {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 60;
  max-width: min(92vw, 520px); padding: 10px 14px; border-radius: 999px;
  background: var(--card); color: var(--ink); border: 1px solid var(--line);
  box-shadow: 0 4px 16px rgba(0,0,0,.18); font-size: 13px; text-align: center;
}

/* the inline answer panel — dismissable, never a page you have to come back from */
.askbar-panel { max-width: 720px; margin: 0 auto;
                padding: 0 var(--space-3) var(--space-3); }
.askbar-panel .ask-head { display: flex; align-items: baseline; gap: var(--space-2);
                          margin: 0 0 var(--space-2); }
.askbar-panel .ask-lead { flex: 1; font-size: 13px; color: var(--muted); margin: 0; }
.askbar-panel .ask-x { margin: 0; padding: 2px 9px; line-height: 1.4; border-radius: 6px;
                       background: transparent; border: 1px solid var(--line);
                       color: var(--muted); font-size: 13px; cursor: pointer; }
.askbar-panel .ask-x:hover { border-color: var(--danger); color: var(--danger); }
.askbar-panel .ask-item { border: 1px solid var(--line); border-radius: var(--radius);
                          background: var(--card); padding: 10px 12px; margin-bottom: var(--space-2); }
.askbar-panel .ask-item h3 { font-size: 15px; margin: 0 0 2px; }
.askbar-panel .ask-meta { font-size: 12.5px; color: var(--muted); margin: 0; }
.askbar-panel .ask-miss { border: 1px dashed var(--line); border-radius: var(--radius);
                          padding: 12px; color: var(--muted); font-size: 14px; }
.askbar-panel .ask-answer { border: 1px solid var(--line); border-radius: var(--radius);
                            background: var(--card); padding: 12px; font-size: 15px;
                            line-height: 1.4; margin-bottom: var(--space-2); }
.askbar-panel .ask-chip { margin: 0 8px 8px 0; }
/* The panel is the ROOM: a persistent top bar (with the one Dismiss) over a scrolling list of exchanges,
   each turn separated by a rule. The list scrolls so a long conversation never pushes the page around. */
.askbar-panel .ask-topbar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center;
                            justify-content: space-between; gap: var(--space-2);
                            padding: 6px 0 8px; background: var(--bg);
                            border-bottom: 1px solid var(--line); margin-bottom: var(--space-2); }
.askbar-panel .ask-topbar-label { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
                                  color: var(--muted); }
.askbar-panel .ask-exchanges { max-height: 60vh; overflow-y: auto; }
.askbar-panel .ask-exchange { padding-top: var(--space-2); }
.askbar-panel .ask-exchange + .ask-exchange { border-top: 1px dashed var(--line); margin-top: var(--space-2); }
@media (max-width: 480px) {
  .askbar-input { font-size: 16px; }   /* <16px makes iOS zoom the viewport on focus */
  .askbar-go { padding: 9px 11px; }
  .askbar-panel .ask-exchanges { max-height: 55vh; }
}

/* Slide-in side menu (feedback: the top bar was too crowded). */
.drawer {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 30;
  width: 250px; max-width: 82vw;
  background: var(--navy); color: #eef3f6;
  padding: calc(env(safe-area-inset-top) + 10px) 0 16px;
  display: flex; flex-direction: column;
  transform: translateX(-100%); transition: transform .22s ease;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
body.nav-open .drawer { transform: translateX(0); box-shadow: 2px 0 22px rgba(0,0,0,.35); }
.drawer a {
  color: #c7d6e0; text-decoration: none; white-space: nowrap;
  padding: 12px 20px; font-size: 16px; display: flex; align-items: center; gap: 8px;
}
.drawer a.on { background: var(--navy-2); color: #fff; box-shadow: inset 3px 0 0 var(--accent); }
.drawer a.muted { color: #9fb4c2; margin-top: auto; border-top: 1px solid rgba(255,255,255,.09); }
/* Sidebar consolidation (1 Aug): the occasional tools fold under Settings. A <details>, so it opens
   with NO JavaScript — a drawer that needs script to open is a drawer that can strand someone. The
   summary carries the same geometry as a drawer link, so the row rhythm does not break where the
   list changes kind. */
.drawer .nav-more { border-top: 1px solid rgba(255,255,255,.09); margin-top: 4px; }
.drawer .nav-more > summary {
  color: #c7d6e0; padding: 12px 20px; font-size: 16px; cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
}
.drawer .nav-more > summary::-webkit-details-marker { display: none; }
.drawer .nav-more > summary::after { content: "▾"; margin-left: auto; opacity: .7; font-size: 13px; }
.drawer .nav-more[open] > summary::after { content: "▴"; }
.drawer .nav-more > summary.on { background: var(--navy-2); color: #fff; box-shadow: inset 3px 0 0 var(--accent); }
/* Indented, so a nested item reads as inside Settings rather than as a sibling of the daily tabs. */
.drawer .nav-more > a { padding-left: 34px; font-size: 15px; }
.nav-backdrop {
  position: fixed; inset: 0; z-index: 20; background: rgba(8,16,22,.45);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }

/* Phone daily dock (Captain, 13 Aug): Capture / Brief / Review / Logs / SOPs + More.
   Width, not UA — a narrow desktop window gets the dock; a wide phone window gets
   the left drawer. The dock is chrome only: same URLs, same seats, same badge. */
.dock { display: none; }
.dock-item {
  flex: 1; min-width: 0; min-height: 48px;
  display: flex; align-items: center; justify-content: center;
  gap: 3px; padding: 8px 2px; margin: 0;
  color: #c7d6e0; text-decoration: none;
  font-size: 11px; font-weight: 600; line-height: 1.15; letter-spacing: .01em;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  cursor: pointer; font-family: inherit;
  white-space: nowrap;
}
.dock-item.on, body.nav-open .dock-item.nav-toggle {
  color: #fff; box-shadow: inset 0 3px 0 var(--accent);
}
.dock-item .badge { margin-left: 1px; }

@media (max-width: 799px) {
  .look-head .nav-toggle { display: none; }
  .drawer a.dock-twin { display: none; }
  .dock {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
    background: var(--navy); color: #eef3f6;
    padding: 0 2px env(safe-area-inset-bottom);
    border-top: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 -2px 10px rgba(0,0,0,.18);
  }
  body:not(.room-mode) .wrap {
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }
  .rupload-pill {
    bottom: calc(64px + env(safe-area-inset-bottom));
  }
  /* Voice room keeps the hamburger and hides the dock so the composer is not covered. */
  body.room-mode .dock { display: none; }
  body.room-mode .look-head .nav-toggle { display: flex; }
  /* More is a popup, not a page: the drawer rises from the dock. */
  body.ledger:not(.room-mode) .drawer {
    top: auto; left: 0; right: 0; bottom: 0;
    width: 100%; max-width: none;
    max-height: min(72vh, calc(100dvh - 52px));
    transform: translateY(110%);
    border-radius: 14px 14px 0 0;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 28px rgba(0,0,0,.35);
  }
  body.ledger:not(.room-mode).nav-open .drawer { transform: translateY(0); }
  body.ledger:not(.room-mode) .nav-backdrop { z-index: 26; }
}

.badge {
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  padding: 0 7px;
  font-size: 12px;
  font-weight: 700;
}

/* layout */
.wrap { max-width: 760px; margin: 0 auto; padding: 18px 16px 64px; }
h1 { font-size: 22px; margin: 6px 0 4px; }
body.page-settings h1 {
  font-family: var(--font-display);
  font-size: 2rem; font-weight: 600; letter-spacing: -0.02em;
  color: var(--fg); margin: 0 0 8px;
}
body.page-settings h1 .h1-ico { color: var(--muted); }
body.page-settings .card {
  background: var(--elevated);
  border-color: var(--border);
}
body.page-settings main input,
body.page-settings main select,
body.page-settings main textarea {
  border-color: var(--rule) !important;
  background: var(--elevated) !important;
  color: var(--fg) !important;
}
body.page-settings table { color: var(--fg); }
body.page-settings table tr,
body.page-settings table th,
body.page-settings table td {
  border-color: var(--rule) !important;
}
/* icon inside a heading: sized in `em` so it tracks the heading, inline-block so the
   heading stays ordinary text flow (no :has(), which the Capacitor WebView may not have) */
.h1-ico { display: inline-block; width: .95em; height: .95em; vertical-align: -.1em;
          margin-right: .4em; color: var(--accent); }
.h1-ico svg { width: 100%; height: 100%; display: block; }
h2 { font-size: 18px; margin: 0 0 8px; }
.muted { color: var(--muted); }
.hint { color: var(--muted); font-size: 14px; }

/* Capture "working" banner — a clear, animated signal while the AI runs, so a
   multi-second photo/voice capture never looks frozen. */
.working {
  display: flex; align-items: center; gap: 10px;
  margin-top: 12px; padding: 12px 14px;
  background: #e7f3f0; border: 1px solid #bfe0d8; border-radius: 10px;
  color: #0a4c44; font-size: 14px;
}
.spinner {
  flex: 0 0 auto; width: 18px; height: 18px;
  border: 2px solid #bfe0d8; border-top-color: var(--accent);
  border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

.flash {
  background: #e7f3f0;
  border: 1px solid #bfe0d8;
  color: #0a4c44;
  padding: 10px 14px;
  border-radius: 10px;
  margin-bottom: 14px;
}
.zdr-alert {
  background: var(--danger-bg);
  border: 1px solid #e0989a;
  color: #7a1f1f;
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: 14px;
  font-size: 14px;
  line-height: 1.4;
}
.warn {
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  padding: 10px 14px;
  border-radius: 10px;
  margin-bottom: 14px;
}
.empty {
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 28px 18px;
  text-align: center;
  color: var(--muted);
}

/* cards */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  margin: 14px 0;
}

/* Review queue fills the ledger wrap (Bug 3). No inner max-width — that 640px
   cap left a tall strip and empty navy. Upload form stays max-width:520px. */
.review-queue {
  margin-top: 16px;
  border-left: 4px solid var(--accent, #2b6cb0);
}
.review-queue table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  table-layout: fixed;
}
.review-queue tr { border-bottom: 1px solid var(--line, #eee); }
.review-queue td { padding: 8px 6px; vertical-align: top; }
.review-queue-title { width: 70%; overflow-wrap: anywhere; }
.review-queue-acts { width: 30%; text-align: right; white-space: nowrap; }
@media (max-width: 799px) {
  .review-queue table,
  .review-queue tbody,
  .review-queue tr { display: block; width: 100%; }
  .review-queue-title,
  .review-queue-acts { display: block; width: 100%; }
  .review-queue-acts { white-space: normal; text-align: right; }
}

/* forms */
label { display: block; font-weight: 600; margin: 12px 0 6px; }
label:first-child { margin-top: 0; }
input, textarea, select {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
  background: var(--card);
  color: var(--ink);
}
textarea { resize: vertical; }
/* Checkboxes/radios must NOT inherit the full-width form-control rule above — a
   width:100% checkbox shoves its label text off the right edge (mobile edit-page bug
   #59). Keep them intrinsic-size so the label sits beside them in the flex row. */
input[type="checkbox"], input[type="radio"] {
  width: auto; padding: 0; margin: 0;
  flex: 0 0 auto; border: 0; border-radius: 0; background: none;
}
/* ---- Logs book (ledger rows + pane; not cards, not chips) ---- */
.log-filter-menu select { width: 100%; font: inherit; font-size: 13px; margin: 0 0 6px; background: inherit; color: inherit; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font: inherit; font-size: 13px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--card); color: var(--muted); cursor: pointer; line-height: 1.2; }
.chip:hover { border-color: var(--accent); color: var(--ink); }
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip-type { border-style: dashed; }
.chip-clear { color: var(--muted); }
.chip-select { font: inherit; font-size: 13px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); }
.rec-eq { color: var(--accent); text-decoration: none; font-weight: 600; }
.rec-eq:hover { text-decoration: underline; }
.rec-comments { color: var(--muted); }
/* equipment story */
.story-reg { border-left: 3px solid var(--accent); }
.story-k { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 4px; }
.story-open { padding: 10px 14px; margin: 0 0 8px; }
.story-timeline { border-left: 2px solid var(--line); margin: 4px 0 0 8px; padding-left: 16px; }
.story-node { position: relative; padding: 0 0 16px; }
.story-node::before { content: ""; position: absolute; left: -21px; top: 6px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--accent); }
.story-date { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.story-body { margin-top: 2px; }
.story-doc { padding: 10px 14px; margin: 0 0 8px; }

.rec-filters { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; margin-bottom: 14px; }
.rec-filter { max-width: 320px; margin-bottom: 0; display: flex; flex-direction: column; gap: 3px; }
.rec-filter span { color: var(--muted); font-weight: 600; font-size: 13px; }
#clear-filters { align-self: center; }
input[type="file"] { padding: 9px; background: var(--tint); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 520px) { .grid2 { grid-template-columns: 1fr; } }

button, .btn {
  display: inline-block;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  padding: 11px 16px;
  border-radius: 10px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  margin-top: 14px;
}
button.primary, .btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
button.primary:hover { background: var(--accent-d); }
button.danger, .btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
/* .cta = THE one dominant action of a card (Log, Ask, Post comment): filled + full-width so the
   hierarchy is obvious — it must never be smaller than the secondary tiles/buttons above it. */
.cta { display: block; width: 100%; padding: 15px 16px; font-size: 17px; margin-top: var(--space-4); }
/* icon inside a button/link: em-sized so it tracks the label, inline-block so the button
   stays ordinary text flow (see .h1-ico). */
.btn-ico { display: inline-block; width: 1em; height: 1em; vertical-align: -.12em;
           margin-right: .45em; }
.btn-ico svg { width: 100%; height: 100%; display: block; }
/* worklist item state. The emoji these replaced (✅🕓↩️⬜) carried meaning in COLOUR alone
   and rendered differently on every crew device; the SVG set is one shape everywhere and
   the colour stays a redundant cue, not the only one (the label says the state too). */
.state-ico { display: inline-block; width: 18px; height: 18px; vertical-align: -.2em;
             flex: none; color: var(--muted); }
.state-ico svg { width: 100%; height: 100%; display: block; }
.state-accepted  { color: var(--accent); }
.state-completed { color: var(--warn-fg); }
.state-returned  { color: var(--danger); }
button:disabled { opacity: .5; cursor: not-allowed; }
.demo-banner [data-demo-reset] button:disabled { opacity: .7; cursor: wait; }
.demo-banner [data-demo-reset][data-busy] .demo-resetting { display: inline; margin-left: 8px; }

/* draft / record */
.draft-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.draft-head h2 { margin: 0; }
.fields { margin: 10px 0 0; }
.fields dt { font-weight: 700; color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; margin-top: 10px; }
.fields dd { margin: 2px 0 0; }
.report-line { font-style: italic; }

.pill {
  font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: var(--chip); color: var(--fg); white-space: nowrap;
}
.pill-open { background: var(--chip); color: var(--fg); }
.pill-in-progress { background: var(--warn-bg); color: var(--warn-fg); }
.pill-waiting-for-parts { background: var(--danger-bg); color: var(--danger); }
.pill-completed { background: var(--chip); color: var(--ok); }

/* @position tags (#16) — tag the role, not the person, so it survives crew rotation */
.rec-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.rec-tag {
  font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: #e8eef9; color: #2a4d7a; white-space: nowrap;
}
.rec-label, .chip-label { background: #eef6ee; color: #2a5a32; }

.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.actions form { margin: 0; }
.actions button, .actions .btn { margin-top: 0; }

.thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.thumbs img { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }

.raw { margin-top: 12px; }
.raw summary { cursor: pointer; color: var(--muted); font-size: 14px; }
.raw pre { white-space: pre-wrap; word-wrap: break-word; background: var(--tint); padding: 10px; border-radius: 8px; font-size: 13px; }

.record summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.record summary::-webkit-details-marker { display: none; }
.rec-title { font-weight: 700; }
.rec-date { margin-left: auto; color: var(--muted); font-size: 13px; }

/* capture tiles */
/* tile-grid: ONE reusable component (capture + comment attachments). auto-fit + equal 1fr
   cells => every tile is the same width (no more label-sized tiles / orphaned last tile);
   icon ABOVE label, fixed min-height, thumb-sized on deck. */
.capture-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
                 gap: var(--space-2); margin: var(--space-4) 0 var(--space-1); }
/* FIXED height so every tile is identical in size; the icon+label live in ONE .tile-in wrapper
   that is centred as a single unit — so a hidden input / stray whitespace can never nudge the
   content off-centre (the first tile was doing exactly that). */
/* margin:0 is LOAD-BEARING — a .tile IS a <label>, so without it the generic `label` rule
   (margin:12px 0 6px) applies to all five while `label:first-child` zeroes the FIRST one's
   margin-top => the Picture tile rendered 12px higher than its siblings. Margins sit outside
   the box, so every height/rect measurement said "all equal" while eyes saw the offset. */
.tile { margin: 0; position: relative; display: grid; place-items: center; height: 78px;
        padding: var(--space-2); border: 1px solid var(--line); border-radius: var(--radius);
        background: var(--card); cursor: pointer; text-align: center;
        transition: border-color .15s, background .15s, box-shadow .15s; }
.tile:hover, .tile:focus-within { border-color: var(--accent); background: var(--tint); box-shadow: 0 1px 6px rgba(0,0,0,.06); }
.tile input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.tile-in { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tile.recording { border-color: var(--danger); background: var(--danger-bg); }
.tile.recording .tile-ico { animation: pulse 1s infinite; }
.tile-ico { width: 22px; height: 22px; color: var(--accent); display: block; }
.tile-ico svg { width: 100%; height: 100%; display: block; }
.tile-lbl { font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.15; }
.cap-files { list-style: none; padding: 8px 0 0; margin: 0; }
.cap-files li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted);
                padding: 4px 0 4px 22px; position: relative; }
.cap-files li::before { content: "📎"; position: absolute; left: 0; }
.cap-files .cap-name { flex: 1; word-break: break-all; }
.cap-rm { flex: none; margin: 0; padding: 2px 9px; min-height: 0; line-height: 1.4; border-radius: 6px;
          background: transparent; border: 1px solid var(--line); color: var(--muted); cursor: pointer; }
.cap-rm:hover { border-color: var(--danger); color: var(--danger); }
@media (max-width: 480px) { .capture-tiles { grid-template-columns: repeat(2, 1fr); } }

/* crew profile picker (login) */
.crew-list { display: flex; flex-direction: column; gap: 8px; margin: 18px 0; }
.crew-list form { margin: 0; }
.crew-btn { width: 100%; font-size: 17px; }
.crew-add { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.crew-pick { text-align: left; }
.capt-pw { margin-top: 10px; }

/* report controls */
.report-controls { margin-bottom: 16px; }
.report-form .report-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.report-row label { font-weight: 600; }
.report-row input[type="date"] { width: auto; margin: 0; }
.report-row button { margin-top: 0; }
.report-scope { margin: 6px 0 0; }

/* report output */
.report-actions { display: flex; gap: 10px; margin-bottom: 10px; }
.report-actions .btn { margin-top: 0; }
.report-body { white-space: pre-wrap; word-wrap: break-word; line-height: 1.6; }

/* login */
.login { max-width: 360px; margin: 12vh auto 0; text-align: center; }
.login h1 { font-size: 28px; }
.login form { text-align: left; margin-top: 18px; }
.login button { width: 100%; }

.bullets { padding-left: 18px; }
.bullets li { margin: 6px 0; }
.danger-zone { border-color: #e6c4bf; }
code { background: var(--chip); color: var(--fg); padding: 1px 5px; border-radius: 5px; font-size: .9em; }

/* entry-type tag */
.tag {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 3px 8px; border-radius: 999px; background: var(--chip); color: var(--fg); white-space: nowrap;
}

/* line items */
.items { margin-top: 12px; }
.items-head { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.items ul { margin: 6px 0 0; padding-left: 18px; }
.items li { margin: 3px 0; }
.items .qty { display: inline-block; min-width: 1.6em; font-weight: 700; color: var(--accent-d); }

/* attachments */
.attachments { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.att-thumb img { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.att-file {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--tint);
  text-decoration: none; color: var(--ink); max-width: 100%;
}
/* an SVG icon, not a glyph — needs a real box (font-size does nothing to it) */
.att-icon { width: 18px; height: 18px; flex: none; color: var(--accent); display: block; }
.att-icon svg { width: 100%; height: 100%; display: block; }
.att-name { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }

/* edit subforms */
.subform { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-top: 16px; }
.subform legend { font-weight: 700; padding: 0 6px; }
.item-row { display: grid; grid-template-columns: 1fr 70px 90px 1fr; gap: 8px; margin-bottom: 6px; }
.item-row.item-head { font-size: 12px; color: var(--muted); font-weight: 700; margin-bottom: 2px; }
.item-row input { padding: 8px 10px; }
.att-edit { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.att-edit-item { display: flex; align-items: center; gap: 10px; font-weight: 400; margin: 0; }
.att-edit-item img { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
.att-edit-item input[type="checkbox"] { width: auto; }
.att-remove { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.att-edit-item a.att-open {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  color: inherit; text-decoration: none;
}
.att-edit-item a.att-open:hover .att-name { text-decoration: underline; }
.date-alt { display: block; margin-top: 4px; font-size: 12px; }
.date-alt input[type="date"] { width: auto; display: inline-block; margin-left: 6px; }

/* voice recorder */
.voice legend { font-size: 15px; }
#recorder-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
#rec-btn { margin-top: 0; }
#rec-btn.recording { background: var(--danger); border-color: var(--danger); color: #fff; animation: pulse 1.2s infinite; }
#rec-status { font-size: 14px; }
#rec-preview { display: block; margin-top: 10px; max-width: 100%; }
#rec-fallback { margin-top: 6px; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .65; } }

/* inline media attachments (voice notes, video) */
.att-media { display: flex; flex-direction: column; gap: 4px; }
.att-media audio { height: 36px; }
.att-media video { max-width: 280px; border-radius: 8px; border: 1px solid var(--line); }
.att-dl { font-size: 13px; color: var(--muted); text-decoration: none; }

.pw-form { margin-top: 18px; }
.pw-form input { margin-bottom: 8px; }

/* What's-new modal (#22): a dimmed overlay with a card the crew dismisses
   with "Got it" (POSTs /changelog/seen). Server-rendered — visible without JS;
   app.js adds Esc / backdrop-tap dismissal as an enhancement. */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 18px; background: rgba(16, 28, 36, .55);
}
.modal-card {
  background: var(--card); border-radius: 14px; padding: 22px;
  max-width: 460px; width: 100%; max-height: 85vh; overflow-y: auto;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
}
.modal-card h2 { margin: 0 0 14px; }
.wn-entry { margin-bottom: 16px; }
.wn-head { margin-bottom: 4px; }
.wn-entry ul { margin: 0; padding-left: 20px; }
.wn-entry li { margin: 4px 0; }
.modal-card button { width: 100%; margin-top: 6px; }

/* Checklist records (#21 To-do / #26 SOP) -------------------------------- */
/* To-do quick view under Records: tick items off in place. */
.todo-quick { border-left: 3px solid var(--accent); }
.todo-group { margin: 10px 0; }
.todo-head { margin: 0 0 4px; }
.todo-items { list-style: none; margin: 0; padding: 0; }
.todo-items li { margin: 2px 0; }
.todo-items form { display: flex; align-items: center; gap: 8px; }
.todo-tick {
  background: none; border: none; padding: 0; margin: 0;
  font-size: 20px; line-height: 1; cursor: pointer; color: var(--accent-d);
}
.todo-tick:hover { background: none; }
.todo-text { flex: 1; }
.todo-items li.done .todo-text { text-decoration: line-through; color: var(--muted); }

/* Checklist editor rows on the edit form: text + reorder + remove. */
.check-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.check-row .check-name { flex: 1; }
.check-row .reorder { display: inline-flex; flex-direction: column; line-height: 0.7; }
.check-row .reorder button,
.check-row .row-del {
  background: transparent; border: 1px solid var(--line); color: var(--muted);
  cursor: pointer; padding: 1px 6px; font-size: 12px; border-radius: 6px;
}
.check-row .reorder button { padding: 0 5px; }
.check-row .row-del { align-self: stretch; }
#check-add { margin-top: 6px; }

/* @position autocomplete (#28): a menu under the capture box. ------------- */
.at-wrap { position: relative; }
.at-menu {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 30;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .14); overflow: hidden; max-height: 240px; overflow-y: auto;
}
.at-item { padding: 9px 12px; cursor: pointer; font-size: 15px; }
.at-item.active, .at-item:hover { background: #eef9f7; color: var(--accent-d); }

/* SOP browse tree (Location → Area → SOPs): tap-target cards + a clean list. */
.sop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 14px 0 4px; }
.sop-card {
  display: flex; flex-direction: column; gap: 4px; padding: 16px 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  text-decoration: none; color: var(--fg, inherit); min-height: 64px; justify-content: center;
}
.sop-card:hover { border-color: var(--accent); background: var(--tint); }
.sop-card-name { font-weight: 600; font-size: 16px; color: var(--accent-d); }
.sop-card-count { font-size: 13px; color: var(--muted); }
.sop-card-empty { opacity: .62; }
.sop-card-untagged { border-style: dashed; }
.sop-list { list-style: none; padding: 0; margin: 14px 0 0; }
.sop-list li {
  padding: 12px 4px; border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 2px;
}
.sop-list li a { font-size: 16px; font-weight: 600; }
.sop-list-sub { font-size: 13px; }

/* Drag-and-drop upload (#47): highlight the target form while dragging files over it. */
form.drag-over { outline: 2px dashed var(--accent-d); outline-offset: 4px; background: rgba(13, 122, 111, .05); }
/* Desktop-only hint — hide where there's no hover (touch), since drag-drop is a desktop thing. */
@media (hover: none) { .drag-hint { display: none; } }

/* ---- Conversation room (/voice) — full-height Claude-style chat (redesign 25 Jul). ----
   Layout: top bar → FEED (flex:1, only scroller) → hint → composer pinned at bottom.
   Height: --room-height is set from visualViewport by voice.js (Android Chrome/PWA: plain
   100dvh / fixed-inset:0 oversizes the layout viewport and overflow:hidden clips the
   composer — Captain screenshots 25 Jul, iOS OK / Android worse after .88). Fallback 100dvh.
   Bottom safe-area ONCE on .voice-type only. */

/* Room mode: fill the VISIBLE viewport; hide site chrome that steals vertical space. */
html:has(body.room-mode) { height: 100%; overflow: hidden; }
body.room-mode {
  position: fixed; top: 0; left: 0; right: 0; bottom: auto;
  width: 100%;
  height: var(--room-height, 100dvh);
  max-height: var(--room-height, 100dvh);
  display: flex; flex-direction: column;
  overflow: hidden;
}
body.room-mode .topstack,
body.room-mode .demo-banner { flex: none; }
body.room-mode .wrap {
  flex: 1 1 auto; min-height: 0; max-width: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; overflow: hidden;
}
body.room-mode .wrap > .flash,
body.room-mode .wrap > .zdr-alert { flex: none; margin: 8px 16px 0; }
body.room-mode .wrap > .muted { display: none; }          /* retire version footer in the room */
body.room-mode .nav-backdrop { /* unchanged — drawer still works */ }
/* End & leave — far right of the top bar, styled as an exit not a primary action. */
/* sits after the theme toggle (which already has margin-left:auto) — exit, not primary */
.topbar-end, .voice-end.topbar-end {
  margin: 0 10px 0 4px; padding: 6px 12px; min-height: 36px; min-width: 44px;
  border-radius: 8px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18);
  color: #c8d4dc; cursor: pointer; font-size: 13px; font-weight: 500; white-space: nowrap;
}
.topbar-end:hover, .voice-end.topbar-end:hover { color: #fff; background: rgba(255,255,255,.12); }

.voice-room {
  display: flex; flex-direction: column; flex: 1; min-height: 0;
  width: 100%; max-width: 760px; margin: 0 auto;
  /* NO bottom safe-area here — only .voice-type pads for the home indicator (double-count
     was clipping the composer on installed PWA; Captain screenshot 25 Jul). */
  padding: 0; text-align: left;
}
/* Compact status strip (listening / thinking / speaking) — no big "Ask or talk" heading. */
.voice-stage { display: flex; flex-direction: column; align-items: center; gap: 6px;
               padding: 8px 16px 4px; width: 100%; flex: none; text-align: center; }
.voice-state { display: flex; flex-direction: column; gap: 2px; min-height: 0; justify-content: center; }
.voice-state-label { font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--muted);
                     letter-spacing: 0; }
.voice-state-sub { font-size: 12px; color: var(--muted); opacity: .85; }
.voice-state[data-state="idle"] .voice-state-sub,
.voice-state[data-state="ended"] .voice-state-sub { display: none; }  /* bar carries the context when idle */
.voice-state[data-state="listening"] .voice-state-label { color: var(--danger); }
.voice-state[data-state="heard"] .voice-state-label { color: var(--accent); }
.voice-state[data-state="thinking"] .voice-state-label { color: var(--accent); animation: pulse 1.2s infinite; }
.voice-state[data-state="speaking"] .voice-state-label { color: var(--accent-d); }
.voice-state[data-state="idle"] .voice-state-label,
.voice-state[data-state="ended"] .voice-state-label { color: var(--muted); font-weight: 500; }

.voice-meter { display: flex; align-items: center; justify-content: center; gap: 4px; height: 28px; }
.voice-meter .voice-bar { width: 5px; height: 100%; border-radius: 3px; background: var(--danger);
                          transform: scaleY(.12); transform-origin: center;
                          transition: transform 90ms ease-out; }

/* FEED — the only scroller; edge to edge within the column; breaths between exchanges. */
.voice-feed {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  width: 100%; display: flex; flex-direction: column; gap: 14px;
  padding: 8px 16px 12px; text-align: left;
}
/* Asymmetry: user = small right bubble; Nita = unboxed plain text on the page (Claude reference). */
.voice-bubble { display: flex; flex-direction: column; gap: 2px; max-width: 92%; }
.voice-bubble .voice-who { font-size: 11px; font-weight: 600; color: var(--muted);
                           text-transform: none; letter-spacing: 0; }
.voice-bubble .voice-said { font-size: 15.5px; line-height: 1.55; color: var(--ink); white-space: pre-wrap; }
.voice-you { align-self: flex-end; max-width: 78%; padding: 10px 14px; border-radius: 16px 16px 4px 16px;
             background: var(--accent-bg); border: 1px solid transparent; }
.voice-you .voice-who { display: none; }                  /* bubble is enough; scan by alignment */
.voice-you .voice-said { font-size: 15px; line-height: 1.4; }
.voice-nita { align-self: flex-start; max-width: 100%; padding: 2px 0 0;
              background: transparent; border: 0; }
.voice-nita .voice-who { margin-bottom: 2px; }
/* Compose-failure line + retry control */
.voice-nita.voice-failed .voice-said { color: var(--muted); }
.voice-retry { align-self: flex-start; margin-top: 6px; padding: 6px 12px; min-height: 36px;
               border-radius: 8px; border: 1px solid var(--line); background: var(--card);
               color: var(--accent); font-weight: 600; font-size: 13px; cursor: pointer; }
.voice-retry:hover { border-color: var(--accent); }

.voice-addendum { align-self: flex-start; max-width: 100%; display: flex; flex-direction: column; gap: 3px;
                  padding: 8px 0 0; border: 0; background: transparent; }
.voice-addendum-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
                        color: var(--muted); }
.voice-addendum-body { font-size: 14px; line-height: 1.5; color: var(--ink); white-space: pre-wrap;
                       opacity: .92; }

/* Sources — quiet citation-style under the answer; collapse past ones to a compact line. */
.voice-sources { align-self: flex-start; max-width: 100%; display: flex; flex-direction: column; gap: 4px;
                 margin-top: 2px; }
.voice-sources-label { font-size: 11px; font-weight: 500; letter-spacing: 0; color: var(--muted);
                       text-transform: none; }
.voice-source { display: flex; flex-direction: column; gap: 1px; padding: 2px 0; border: 0;
                background: transparent; text-decoration: none; border-radius: 0; }
a.voice-source { cursor: pointer; }
a.voice-source:hover .voice-source-title,
a.voice-source:focus .voice-source-title { color: var(--accent); text-decoration: underline; }
.voice-source-title { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.voice-source-meta { font-size: 11px; color: var(--muted); opacity: .8; }
/* ARCHIVE CHIP (CHAT ruling 31 Jul, crawler ①) — a citation to a crawler-swept document must not look like
   a citation to a manual the crew uploaded and confirmed. Quiet, not alarming: it marks PROVENANCE, not a
   problem, so it must read as a fact about the source rather than a warning about the answer. */
.voice-source-tier { display: inline-block; margin-top: 3px; padding: 1px 6px; border-radius: 999px;
  font-size: 10px; letter-spacing: .02em; background: var(--warn-bg, #fff4e0);
  color: var(--warn-fg, #9a5b00); border: 1px solid rgba(154, 91, 0, .18); }
.voice-source-ref { opacity: .9; }
/* Collapsed past sources (follow-up): one tappable line; expand in place. */
.voice-sources.is-collapsed .voice-source { display: none; }
.voice-sources.is-collapsed .voice-sources-toggle { display: inline; }
.voice-sources-toggle { display: none; font-size: 12px; color: var(--muted); cursor: pointer;
                        background: none; border: 0; padding: 0; text-align: left; font-weight: 500; }
.voice-sources-toggle:hover { color: var(--accent); text-decoration: underline; }
.voice-sources.is-collapsed .voice-sources-label { display: none; }
/* D8: the "N other results" fold under an answer's used sources — same quiet toggle, always shown. */
.voice-sources-more { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.voice-sources-more .voice-sources-toggle { display: inline; align-self: flex-start; }
.voice-sources-more.is-collapsed .voice-source { display: none; }
/* In-app PDF manual viewer (D-fork B). Back lives in the sticky top bar (topbar_actions), always reachable
   even when the viewer opens scrolled to a cited page; scroll-margin keeps the jumped-to page clear of it.
   overflow-anchor: none (L2 R2 return, WAR_ROOM 19:25) — the viewer compensates its own height corrections
   (pdf_viewer.js setHeight shifts scrollTop when a page above the viewport is corrected); native scroll
   anchoring (Chrome 56+/Firefox 66+/newer WebKit) would make the SAME adjustment again and shove the
   cited-page jump ~1.6 page-heights past the target. Opting out makes the viewer's compensation the single
   authority on every engine (historic iOS never anchored — the Captain's phone masks the double-shift,
   which is why the anchoring-mode boot in ui_gate/tier1/pdf_viewer.test.js pins it). */
#pdf-viewer { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 6px; overflow-anchor: none; }
/* L2: no min-height — pdf_viewer.js reserves an explicit per-page height BEFORE any rendering (page-1
   ratio, corrected per page at render). A min-height would silently override the reserved height for
   landscape pages and make the geometry (honest scrollbar + cited-page jump) lie. overflow guards the box. */
.pdfv-page { width: 100%; display: flex; justify-content: center; scroll-margin-top: 110px; overflow: hidden; }
.pdfv-page canvas { box-shadow: 0 1px 6px rgba(0,0,0,.18); border-radius: 2px; background: #fff; max-width: 100%; }

/* Composer — ONE rounded container; mic + send inside; + reserved for show-and-ask.
   Sole owner of bottom safe-area so the input sits fully above the home indicator. */
.voice-type {
  flex: none; width: 100%; max-width: 760px; margin: 0 auto;
  display: flex; align-items: flex-end; gap: 6px;
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line); background: var(--bg, var(--card));
  box-sizing: border-box;
}
.voice-type-input {
  flex: 1; min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 22px;
  background: var(--card); color: var(--fg); font-size: 16px; line-height: 1.35;
  max-height: 120px;
}
.voice-type-input:focus { outline: none; border-color: var(--accent); }
.voice-plus {
  flex: none; width: 40px; height: 40px; min-width: 40px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--card); color: var(--muted);
  font-size: 20px; line-height: 1; cursor: not-allowed; opacity: .45;
}
.voice-mic {
  flex: none; width: 44px; height: 44px; min-width: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--card); color: var(--accent);
  cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0;
}
.voice-mic .voice-mic-ico { width: 22px; height: 22px; display: block; color: inherit; }
.voice-mic .voice-mic-ico svg { width: 100%; height: 100%; display: block; }
.voice-mic[aria-pressed="true"] { border-color: var(--danger); background: var(--danger-bg);
                                  color: var(--danger); animation: pulse 1.1s infinite; }
.voice-mic:disabled { opacity: .5; cursor: default; animation: none; }
.voice-type-send {
  flex: none; padding: 0 16px; min-height: 44px; min-width: 44px; border: 0; border-radius: 22px;
  background: var(--accent); color: #fff; font-weight: 600; cursor: pointer; font-size: 14px;
}
.voice-type-send:active { opacity: .85; }
/* Hint sits ABOVE the composer (HTML order) so overflow never hides the honesty line first. */
.voice-hint { flex: none; font-size: 11px; color: var(--muted); margin: 0; padding: 4px 16px 0;
              text-align: center; }
/* Legacy class kept so old selectors don't break if anything still targets it. */
.voice-controls { display: none; }
.voice-end:not(.topbar-end) { display: none; }

/* ---- Ledger chrome (Captain, 13 Aug — match the approved preview) ----------------------
   Desktop: persistent navy rail. Phone: same five doors on the dock. One URL, width split. */
.rail { display: none; }
.rail-brand {
  display: flex; flex-direction: column; gap: 2px;
  padding: 22px 18px 18px; text-decoration: none; color: #fff;
}
.rail-mark {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase;
}
.rail-vessel { font-size: 12px; color: #9fb4c2; }
.rail > a:not(.rail-brand) {
  color: #c7d6e0; text-decoration: none;
  padding: 10px 18px; font-size: 15px; display: flex; align-items: center; gap: 8px;
}
.rail > a:not(.rail-brand).on { color: #fff; background: var(--navy-2); box-shadow: inset 3px 0 0 var(--accent); }
.rail > a.muted { color: #9fb4c2; margin-top: auto; border-top: 1px solid rgba(255,255,255,.09); }
.rail .nav-more { border-top: 1px solid rgba(255,255,255,.09); margin-top: 4px; }
.rail .nav-more > summary {
  color: #c7d6e0; padding: 10px 18px; font-size: 15px; cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
}
.rail .nav-more > summary::-webkit-details-marker { display: none; }
.rail .nav-more > summary::after { content: "▾"; margin-left: auto; opacity: .7; font-size: 13px; }
.rail .nav-more[open] > summary::after { content: "▴"; }
.rail .nav-more > summary.on { background: var(--navy-2); color: #fff; box-shadow: inset 3px 0 0 var(--accent); }
.rail .nav-more > a { padding-left: 32px; font-size: 14px; color: #c7d6e0; text-decoration: none; display: block; padding-top: 9px; padding-bottom: 9px; }
.rail .nav-more > a.on { color: #fff; background: var(--navy-2); }

@media (min-width: 800px) {
  body.ledger:not(.room-mode) .rail {
    display: flex; flex-direction: column;
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 28;
    width: 220px; background: var(--navy); color: var(--navy-fg);
    overflow-y: auto;
  }
  body.ledger:not(.room-mode) .look-head .nav-toggle { display: none; }
  body.ledger:not(.room-mode) .topstack { margin-left: 220px; }
  body.ledger:not(.room-mode) .wrap {
    margin-left: 220px; max-width: none; padding: 12px 28px 64px;
  }
  body.ledger:not(.room-mode) .demo-banner { margin-left: 220px; }
  body.ledger:not(.room-mode) .drawer { display: none; }
  body.ledger:not(.room-mode).nav-open .drawer { display: flex; }
}

.look-head {
  position: sticky; top: 0; z-index: 10;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 48px;
  padding: env(safe-area-inset-top) 16px 0;
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg) 92%, transparent);
}
.look-head-row {
  display: flex; align-items: center; gap: 12px;
  height: 48px; min-height: 48px;
  width: 100%; min-width: 0;
}
.look-head button { margin-top: 0; }
.look-vessel {
  margin: 0; min-width: 0;
  font-size: 11px; letter-spacing: .04em; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 799px) {
  .look-vessel { display: none; }
}
.look-head [data-askbar] { flex: 1; min-width: 0; display: flex; }
form.ask.askbar-form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 12rem;
  max-width: none;
  height: 40px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--rule);
  background: #fffcf7;
  border-radius: 2px;
  box-sizing: border-box;
}
form.ask.askbar-form:focus-within {
  border-color: var(--fg);
}
[data-theme="night"] form.ask.askbar-form,
[data-theme="dark"] form.ask.askbar-form {
  background: #163445;
}
[data-theme="red"] form.ask.askbar-form {
  background: #1c0e0e;
}
.ask-label {
  flex-shrink: 0;
  font-size: 13px;
  color: var(--muted);
}
.ask input[type="text"],
.ask input[type="search"] {
  flex: 1;
  width: auto;
  min-width: 0;
  height: 38px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: 15px;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
.ask input[type="search"]::-webkit-search-decoration,
.ask input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
.ask input::placeholder { color: var(--subtle); }
.ask button[data-ask-go] {
  display: inline;
  flex-shrink: 0;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: none;
}
.book-bell {
  position: relative;
  flex: none;
  margin-left: auto;
}
.book-bell > summary { list-style: none; }
.book-bell > summary::-webkit-details-marker { display: none; }
.book-bell-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.book-bell-ico {
  width: 16px; height: 16px; flex: none;
  display: block; color: var(--muted);
}
.book-bell-ico svg { width: 16px; height: 16px; display: block; }
.book-bell-n {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--muted);
  line-height: 1;
}
.book-bell-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 40;
  width: min(360px, calc(100vw - 24px));
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 8px 24px rgba(0,0,0,.16);
}
.book-bell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
}
.book-bell-title { margin: 0; font-size: 14px; font-weight: 600; }
.book-bell-all {
  margin: 0; padding: 0; border: 0; background: none;
  color: var(--muted); font: inherit; font-size: 12px; cursor: pointer;
}
.book-bell-row {
  display: block; width: 100%; text-align: left;
  margin: 0; padding: 10px 12px;
  border: 0; border-top: 1px solid var(--line);
  background: none; color: inherit; font: inherit; cursor: pointer;
}
.book-bell-k, .book-bell-rec { display: block; font-size: 12px; color: var(--muted); }
.book-bell-line { display: block; font-size: 14px; margin: 2px 0; }
.book-bell-empty { margin: 0; padding: 10px 12px; font-size: 13px; }
.look-light {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  margin-left: 0;
}
.look-light button {
  display: inline;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font: inherit;
  font-size: 13px;
  font-weight: inherit;
  color: var(--subtle);
  cursor: pointer;
}
.look-light button:hover { color: var(--muted); }
.look-light button[aria-checked="true"] { color: var(--fg); }
.page-capture .app-ver { display: none; }
.app-ver { text-align: center; font-size: 12px; margin-top: 28px; }

.mx-auto { margin-left: auto; margin-right: auto; }
.max-w-xl { max-width: 36rem; }
.mb-6 { margin-bottom: 24px; }
.mt-2 { margin-top: 8px; }
.text-15 { font-size: 15px; }
.text-muted { color: var(--muted); }
.size-5 { width: 20px; height: 20px; display: block; }
.size-6 { width: 24px; height: 24px; display: block; }

.cap-h {
  margin: 0;
  font-family: var(--font-display);
  font-size: 2rem; font-weight: 600; letter-spacing: -0.02em; color: var(--fg);
}
.cap-ico {
  width: 20px; height: 20px; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.cap-ico svg { width: 20px; height: 20px; display: block; overflow: visible; }
.cap-ico-lg, .cap-ico-lg svg { width: 24px; height: 24px; }
.cap-hero {
  display: flex; cursor: pointer;
  min-height: 9rem; margin-bottom: 12px;
  flex-direction: column; align-items: center; justify-content: center;
  border: 1px dashed var(--rule); border-radius: 12px;
  background: var(--elevated); color: var(--muted); font-size: 14px;
  text-align: center;
}
.cap-hero.on { border-color: var(--accent); background: var(--chip); color: var(--accent); }
.cap-hero-in {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center;
}
.cap-card-in {
  border-radius: 12px; background: var(--elevated); padding: 12px 16px 16px;
}
.cap-ta {
  width: 100%; resize: vertical; border: 0; border-radius: 6px;
  background: transparent; padding: 12px; font: inherit; font-size: 16px;
  line-height: 1.55; outline: none; color: var(--fg);
}
.cap-ta::placeholder { color: var(--subtle); }
.cap-tiles {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px;
}
@media (min-width: 640px) { .cap-tiles { grid-template-columns: repeat(5, 1fr); } }
.cap-tiles .tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 72px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: var(--surface);
  box-shadow: none;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
}
.cap-tiles .tile.on { background: var(--chip); color: var(--accent); }
.icon-slot {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.icon-slot svg {
  display: block;
  width: 20px;
  height: 20px;
}
.tile-label {
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}
.cap-log-row { display: flex; justify-content: flex-end; margin-top: 16px; }
.cap-log {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; min-width: 7rem; padding: 0 16px; border: 0; border-radius: 6px;
  background: var(--accent); color: var(--accent-fg);
  font: inherit; font-size: 15px; font-weight: 500; cursor: pointer;
}
.cap-how {
  margin-top: 24px; border-radius: 8px; background: var(--surface); padding: 12px 16px;
}
.cap-how summary {
  display: flex; justify-content: space-between; align-items: center;
  cursor: pointer; list-style: none; font-size: 14px; font-weight: 500; color: var(--muted);
}
.cap-how summary::-webkit-details-marker { display: none; }
.cap-how summary span { font-size: 11px; }
.cap-how ul { margin: 12px 0 0; padding: 0 0 0 18px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.cap-how li { margin: 0 0 8px; }

/* Now — yard lanes from real records. Empty lane stays empty. */
.now-head { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.now-banner { font-size: 14px; margin: 0 0 22px; }
.now-lane { margin: 0 0 22px; }
.now-lane h2 {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  color: var(--muted); margin: 0 0 6px; border-bottom: 1px solid var(--line); padding-bottom: 6px;
}
.now-row {
  display: grid; grid-template-columns: 36px 64px 1fr auto;
  gap: 10px; align-items: start;
  padding: 10px 0; border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit;
}
.now-row:last-child { border-bottom: 0; }
.now-age { font-size: 12px; color: var(--muted); }
.now-kind { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.now-title { font-size: 15px; font-weight: 600; }
.now-sub { font-size: 13px; color: var(--muted); margin: 2px 0 0; }
.now-thumb { width: 72px; height: 48px; object-fit: cover; border-radius: 2px; display: block; }
.now-acts { display: flex; gap: 14px; font-size: 13px; margin-top: 6px; }
.now-acts button, .now-acts a {
  background: none; border: 0; padding: 0; color: var(--accent-d); cursor: pointer;
  font: inherit; text-decoration: none;
}
.now-empty { font-size: 13px; color: var(--muted); padding: 8px 0; }
.now-split { display: grid; grid-template-columns: 1fr 240px; gap: 36px; }
@media (max-width: 799px) { .now-split { grid-template-columns: 1fr; } }

/* Log book — desktop two panes; phone is list or detail, never both */
.log-book { display: block; }
.log-toolbar { margin: 0 0 10px; }
.log-kicker {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 6px;
}
.log-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin: 0 0 8px;
}
.log-count { margin: 0; font-size: 15px; }
.log-tools { display: flex; align-items: baseline; gap: 14px; margin-left: auto; }
.log-quick {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 6px 14px; margin: 0;
}
.log-quick-g { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.log-quick button {
  background: none; border: 0; padding: 0; font: inherit; font-size: 13px;
  color: var(--muted); cursor: pointer;
}
.log-quick button.on { color: var(--ink); font-weight: 600; }
.log-book .log-search {
  width: 16rem; max-width: 42vw; padding: 2px 0;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: transparent; font: inherit; font-size: 13px; color: var(--fg);
}
.log-book .log-search:focus { outline: none; border-bottom-color: var(--fg); }
.log-book .log-search::placeholder { color: var(--subtle); }
.log-filter { position: relative; }
.log-filter > summary {
  list-style: none; cursor: pointer; color: var(--muted); font-size: 13px;
}
.log-filter > summary::-webkit-details-marker { display: none; }
.log-filter-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 5;
  min-width: 14rem; max-width: 20rem; max-height: min(70vh, 28rem);
  overflow-x: hidden; overflow-y: auto; padding: 12px 14px;
  background: #f3efe6; color: #1c2733; border: 1px solid #1c2733;
}
[data-theme="night"] .log-filter-menu,
[data-theme="dark"] .log-filter-menu {
  background: #132b3c; color: #f3eee4; border-color: #f3eee4;
}
[data-theme="red"] .log-filter-menu {
  background: #1c0e0e; color: #f0c8b8; border-color: #f0c8b8;
}
.log-filter-folder { margin: 0 0 2px; }
.log-filter-folder > summary.log-filter-h,
.log-filter-h {
  display: block; margin: 0; padding: 5px 0;
  font-size: 13px; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: inherit; cursor: pointer;
}
.log-filter-folder[open] > summary.log-filter-h { margin-bottom: 2px; }
.log-filter-h:first-child { margin-top: 0; }
.log-filter-menu button {
  display: block; width: 100%; margin: 0; padding: 3px 0 3px 1.1em;
  border: 0; background: none; text-align: left;
  font: inherit; font-size: 13px; color: inherit; cursor: pointer;
  overflow-wrap: anywhere;
}
.log-filter-menu button.on { font-weight: 600; }
.log-filter-menu select {
  display: block; width: 100%; margin: 0 0 4px; padding: 2px 0 2px 0.4em;
  background: inherit; color: inherit; border: 1px solid currentColor;
  font: inherit; font-size: 13px;
}
.log-filter-actions { margin-top: 12px; padding-top: 8px; border-top: 1px solid currentColor; }
.log-row {
  display: grid; grid-template-columns: 2.6rem 3.4rem 1fr; gap: 8px;
  align-items: start; padding: 8px 8px;
  border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit;
}
.log-row[hidden] { display: none; }
.log-row-sel {
  outline: 1px solid var(--accent); outline-offset: -1px;
  background: none; box-shadow: none;
}
.log-row-date {
  font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums;
  padding-top: 2px;
}
.log-row-st {
  font-size: 10px; letter-spacing: .08em; font-variant: small-caps;
  text-transform: lowercase; color: var(--muted); padding-top: 3px;
}
.log-row-title { display: block; font-size: 14px; font-weight: 500; line-height: 1.35; }
.log-row-sub { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.log-archived { margin-top: 18px; color: var(--muted); font-size: 13px; }
.log-archived > summary { cursor: pointer; list-style: none; }
.log-archived > summary::-webkit-details-marker { display: none; }
.log-arch-row {
  display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap;
  padding: 8px 0; border-bottom: 1px solid var(--line);
}
.log-arch-row button {
  background: none; border: 0; padding: 0; font: inherit;
  color: var(--accent-d); cursor: pointer;
}
.log-back { display: none; font-size: 13px; text-decoration: none; margin: 0 0 10px; }
.log-pane-kicker {
  display: flex; gap: 14px; margin: 0 0 8px;
  font-size: 11px; letter-spacing: .08em; font-variant: small-caps;
  text-transform: lowercase; color: var(--muted);
}
.log-pane h2 { font-size: 22px; font-weight: 600; margin: 0 0 6px; line-height: 1.3; }
.log-pane-meta { font-size: 13px; color: var(--muted); margin: 0 0 12px; }
.log-hero { width: 100%; max-height: 360px; object-fit: cover; border-radius: 2px; margin: 10px 0; }
.log-quote, .log-body { margin: 0 0 12px; white-space: pre-wrap; }
.log-lines { margin: 0 0 12px; padding-left: 18px; }
.log-acts { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font-size: 13px; margin: 16px 0 0; }
.log-acts a, .log-acts button, .log-acts summary {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  padding: 0; margin: 0; min-height: 0; min-width: 0;
  color: var(--accent-d); cursor: pointer;
  font: inherit; font-weight: inherit; text-decoration: none; list-style: none;
}
.log-acts summary::-webkit-details-marker { display: none; }
.log-acts form, .log-acts details { display: contents; }
.share-box { font-size: 13px; }
.share-box summary { cursor: pointer; color: var(--accent-d); list-style: none; }
.share-box summary::-webkit-details-marker { display: none; }
.share-box-in { flex: 1 0 100%; margin: 10px 0 0; padding: 10px 12px; border: 1px solid var(--rule, #d5dde3); max-width: 36rem; }
.share-box-in p { margin: 0 0 8px; color: var(--muted); }
.share-box-in input[data-share-url] { width: 100%; font: inherit; padding: 6px 8px; margin: 0 0 8px; }
.share-guest-body { margin: 0; background: var(--bg, #f6f3ee); color: var(--ink, #1a1a1a); }
.share-guest-head { padding: 20px 16px 0; max-width: 40rem; margin: 0 auto; }
.share-guest-head .wordmark { font-weight: 650; letter-spacing: .02em; margin: 0; }
.share-vessel { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.share-guest { max-width: 40rem; margin: 0 auto; padding: 16px 16px 80px; }
.share-guest-banner { background: var(--warn-bg, #fff4e0); color: var(--warn-fg, #9a5b00); padding: 8px 10px; font-size: 14px; }
.share-guest-err { color: #8b1e1e; }
.share-job h1 { font-size: 22px; font-weight: 600; margin: 12px 0 6px; }
.share-comment-form label { display: block; margin: 10px 0 4px; }
.share-comment-form input, .share-comment-form textarea { width: 100%; font: inherit; }
.share-miss h1 { font-size: 22px; font-weight: 600; }
@media (min-width: 900px) {
  .log-book {
    display: grid; grid-template-columns: minmax(22rem, 28rem) 1fr;
    gap: 0 28px; align-items: start;
  }
  .log-toolbar { grid-column: 1 / -1; }
  .log-list { min-width: 0; }
  .log-pane { min-width: 0; display: block; }
  .log-book.gantt-on .log-gantt-pane { grid-column: 1 / -1; }
}
@media (max-width: 899px) {
  body { overflow-x: hidden; }
  .log-book, .log-toolbar {
    max-width: 100%;
    min-width: 0;
  }
  .log-book { display: block; }
  .log-pane { display: none; }
  .log-book--open .log-list { display: none; }
  .log-book--open .log-pane { display: block; }
  .log-book--open .log-back { display: inline-block; }
  .log-book.plan-on .log-list { display: none; }
  .log-book.plan-on .log-pane { display: none; }
  .log-book.plan-on .log-plan-pane { display: block; }
  .log-head { width: 100%; }
  .log-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-left: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .log-book .log-search {
    flex: 1 0 100%;
    width: 100%;
    max-width: 100%;
  }
  .log-quick {
    flex: 1 0 100%;
    max-width: 100%;
  }
  .log-filter > summary,
  #log-plan,
  #log-gantt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 10px 8px;
    flex: 0 0 auto;
    overflow: visible;
    white-space: nowrap;
  }
  .log-book--open .log-kicker,
  .log-book--open .log-search,
  .log-book--open .log-quick { display: none; }
  .log-book--open .log-head {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
  .log-book--open .log-tools {
    width: auto;
    margin-left: auto;
  }
  .log-book--open .log-toolbar .log-back {
    display: inline-flex;
    align-items: center;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
  }
  .log-book--open .log-pane .log-back { display: none; }
  .log-filter-menu {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    max-height: min(80vh, 100dvh);
  }
}
.log-word {
  background: none; border: 0; padding: 0; font: inherit; font-size: 13px;
  color: var(--muted); cursor: pointer;
}
.log-word.on, .log-word[aria-pressed="true"] { color: var(--ink); font-weight: 600; }
.log-plan-pane[hidden], .log-gantt-pane[hidden], .edit-plan-sheet[hidden] { display: none !important; }
.log-book.plan-on .log-pane { display: none; }
.log-book.plan-on .log-gantt-pane { display: none; }
.log-book.plan-on .log-plan-pane { display: block; }
.log-book.gantt-on .log-list,
.log-book.gantt-on .log-pane,
.log-book.gantt-on .log-plan-pane { display: none; }
.log-book.gantt-on .log-gantt-pane { display: block; }
.log-gantt-pane { overflow-x: auto; }
.gantt-tape { min-width: 280px; }
.gantt-days { display: grid; grid-template-columns: repeat(var(--gantt-n, 0), minmax(22px, 1fr)); margin: 0 0 8px 160px; }
.gantt-day { text-align: center; font-size: 11px; color: var(--muted); padding: 4px 0; }
.gantt-day.gantt-today { color: var(--ink); background: var(--tint); font-weight: 600; }
.gantt-row { display: grid; grid-template-columns: 160px 1fr; gap: 8px; align-items: center; margin: 0 0 6px; }
.gantt-title { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gantt-track { position: relative; height: 18px; }
.gantt-bar { position: absolute; top: 3px; height: 12px; background: var(--accent); border-radius: 2px; }
.gantt-nodate { margin-top: 22px; }
.gantt-nodate-h { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.gantt-nodate-row { display: flex; gap: 16px; margin: 0 0 4px; font-size: 13px; }
.gantt-why { color: var(--muted); }
.ga-sheet { position: relative; width: 100%; background: var(--card); border: 1px solid var(--line); }
.ga-draw { display: block; width: 100%; height: auto; }
.ga-pins { position: absolute; inset: 0; pointer-events: none; }
.ga-pin {
  position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px;
  padding: 0; border: 0; border-radius: 50%;
  background: var(--muted); pointer-events: auto; cursor: pointer;
}
.ga-pin-sel { background: var(--accent); outline: 2px solid var(--accent); outline-offset: 2px; }
.edit-plan-btn {
  display: block; width: 100%; box-sizing: border-box;
  font-size: 17px; font-weight: 600; line-height: 1.3;
  padding: 14px 16px; margin: 0 0 12px; min-height: 48px;
}
.edit-plan-btn[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--ink, #111); }
.edit-plan-hint { display: none; margin: -4px 0 12px; font-size: 13px; }
.edit-plan-sheet { margin: 0 0 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 899px) {
  .edit-plan-hint { display: block; }
}

/* More — ledger rows */
.more-sec { margin: 0 0 28px; }
.more-sec h2 {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 6px; margin: 0 0 0;
}
.more-row {
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit;
}
.more-row strong { display: block; font-size: 15px; }
.more-row span { font-size: 13px; color: var(--muted); }
.more-on { font-size: 12px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }

/* Watch tabs */
.watch-tabs { display: flex; gap: 18px; border-bottom: 1px solid var(--line); margin: 0 0 18px; }
.watch-tabs a { text-decoration: none; color: var(--muted); padding: 8px 0; font-size: 15px; }
.watch-tabs a.on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }

/* Desktop Capture doors. Prefix .desk-types / .cap-mobile only. */
.desk-types { display: none; }
.desk-types form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 22rem;
  margin: 48px auto 0;
}
.desk-types button {
  display: block;
  width: 100%;
  margin: 0;
  padding: 14px 18px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--elevated);
  box-shadow: none;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg);
  cursor: pointer;
}
.desk-types button:hover { border-color: var(--fg); }
@media (min-width: 900px) {
  .desk-types { display: block; }
  .cap-mobile { display: none; }
}

/* First-day coach: reuse modal-card chrome. Not a trap — page stays clickable. */
#first-day-coach.modal-overlay {
  pointer-events: none;
  background: transparent;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 16px 16px calc(88px + env(safe-area-inset-bottom, 0px));
  z-index: 200;
}
@media (min-width: 800px) {
  #first-day-coach.modal-overlay {
    align-items: center;
    justify-content: center;
    padding: 24px;
  }
}
#first-day-coach .modal-card {
  pointer-events: auto;
  max-width: 360px;
}
#first-day-coach .coach-kicker {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--muted);
}
#first-day-coach h3 { margin: 0 0 8px; font-size: 17px; }
#first-day-coach p { margin: 0 0 10px; font-size: 14px; line-height: 1.45; }
#first-day-coach .coach-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
#first-day-coach .coach-actions button {
  width: auto;
  flex: 1 1 auto;
  margin-top: 0;
}
[data-coach-on] {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* Due row acts. Desktop stays one row. Under 900px Close/Draft wrap above date+why+Extend. */
.due-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid var(--line, #eee);
  flex-wrap: wrap;
  max-width: 100%;
  min-width: 0;
}
.due-body { flex: 1; min-width: 240px; }
.due-acts {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  align-items: center;
}
.due-draft, .due-remove { display: inline; }
.due-extend { display: inline; }
.due-extend-date, .due-extend-why {
  padding: 4px;
  border: 1px solid var(--line, #ccc);
  border-radius: 8px;
}
.due-extend-why { width: 120px; }
.due-acts .btn { padding: 4px 10px; }
.due-remove .btn {
  background: transparent;
  padding: 4px 8px;
  color: var(--danger, #a00);
}
@media (max-width: 899px) {
  .due-body { min-width: 0; flex: 1 1 100%; }
  .due-acts {
    flex: 1 1 100%;
    flex-wrap: wrap;
    max-width: 100%;
    min-width: 0;
    white-space: normal;
  }
  .due-extend {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
  }
  .due-extend-date {
    flex: 0 1 auto;
    min-width: 7.5rem;
    max-width: 100%;
  }
  .due-extend-why {
    width: auto;
    min-width: 4.5rem;
    flex: 1 1 5rem;
    max-width: 100%;
  }
  .due-extend-go {
    flex: 0 0 auto;
    white-space: nowrap;
    overflow: visible;
  }
}

/* Ask 2.0 — Atlas-style chat thread */
body.page-ask2 .dock { display: none !important; }
body.page-ask2 .dock-item.on,
body.page-ask2 .dock-item:focus,
body.page-ask2 .dock-item:focus-visible,
body.page-ask2 .dock-item:focus-within {
  box-shadow: none;
  outline: none;
}
body.page-ask2 .look-vessel { display: none; }
body.page-ask2 .wrap {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 88px);
  padding-bottom: 8px;
}
body.page-ask2.room-mode .wrap {
  min-height: 0;
  padding-bottom: 0;
}
body.page-ask2 .wrap > .app-ver { display: none; }
@media (min-width: 800px) {
  body.ledger.page-ask2:not(.room-mode) .wrap {
    display: flex;
    flex-direction: column;
    min-height: calc(100dvh - 64px);
    padding-bottom: 8px;
  }
}
.ask2-shell {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  height: 100%;
  overflow: hidden;
  position: relative;
  gap: 0;
}
.ask2-hist {
  flex: none;
  width: 16.5rem;
  min-width: 0;
  min-height: 0;
  align-self: stretch;
  height: 100%;
  max-height: 100%;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 10px 8px 0;
  border-right: 1px solid var(--line);
  overflow: hidden;
}
.ask2-shell.is-hist-off .ask2-hist { display: none; }
.ask2-hist-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
.ask2-hist-title {
  margin: 0;
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
}
.ask2-hist-x {
  margin: 0;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.ask2-new-side {
  width: 100%;
  justify-self: stretch;
  text-align: center;
}
.ask2-hist-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 2px 8px 0;
}
.ask2-hist-empty {
  margin: 12px 4px;
  font-size: 13px;
}
.ask2-hist-row {
  display: flex;
  align-items: stretch;
  gap: 2px;
}
.ask2-hist-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  margin: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--fg);
  text-align: left;
  cursor: pointer;
}
.ask2-hist-item:hover { background: color-mix(in oklab, var(--fg) 8%, transparent); }
.ask2-hist-row.is-on .ask2-hist-item { background: #3a3c40; color: #f2f2f3; }
[data-theme="day"] .ask2-hist-row.is-on .ask2-hist-item {
  background: #ece6da;
  color: #1c2733;
}
.ask2-hist-del {
  flex: none;
  width: 28px;
  margin: 4px 0 4px 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
}
.ask2-hist-row:hover .ask2-hist-del,
.ask2-hist-row:focus-within .ask2-hist-del { opacity: 1; }
.ask2-hist-del:hover { color: #f2f2f3; background: #8b2e2e; }
.ask2-hist-preview {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ask2-hist-time {
  font-size: 11px;
  color: var(--muted);
}
.ask2-hist-row.is-on .ask2-hist-time { color: inherit; opacity: .7; }
.ask2-hist-open {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  flex: none;
  position: sticky;
  top: 0;
  z-index: 6;
  margin: 0;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.15;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #3a3c40;
  color: #f2f2f3;
  cursor: pointer;
}
.ask2-hist-open[aria-expanded="true"] {
  background: #4a4c52;
}
.ask2-hist-scrim {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 23;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, .4);
  cursor: pointer;
}
[data-theme="day"] .ask2-hist-open {
  background: #ece6da;
  color: #1c2733;
}
.ask2-page {
  max-width: 52rem;
  margin: 0 auto;
  width: 100%;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0 8px;
}
.ask2-room-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  flex: none;
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg);
}
.ask2-hist-open { justify-self: start; }
.ask2-room-mid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  justify-self: center;
}
.ask2-new { justify-self: end; }
.ask2-room-vessel,
.ask2-vessel-chip {
  margin: 0;
  font-size: 13px;
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ask2-vessel-chip {
  padding: 4px 10px;
  font-weight: 600;
  border-radius: 999px;
  background: color-mix(in oklab, var(--fg) 10%, var(--bg));
  color: var(--fg);
}
.ask2-stamp {
  flex: none;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  min-height: 1.2em;
}
.ask2-new {
  margin: 0;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 18px;
  border: 0;
  background: #2c2e31;
  color: #f2f2f3;
  cursor: pointer;
}
[data-theme="day"] .ask2-new {
  background: #ece6da;
  color: #1c2733;
}
.ask2-thread {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 2px 16px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ask2-thread::-webkit-scrollbar { display: none; }
.ask2-empty { margin: auto; text-align: center; max-width: 22rem; }
.ask2-row {
  display: flex;
  align-items: flex-start;
}
.ask2-row-user { justify-content: flex-end; }
.ask2-row-bot { justify-content: flex-start; }
.ask2-turn {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: min(42rem, 92%);
  min-width: 0;
}
.ask2-row-user .ask2-turn { align-items: flex-end; }
.ask2-row-bot .ask2-turn { align-items: flex-start; }
.ask2-quote {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--muted);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 4px;
}
.ask2-quote-mark { margin-right: 2px; opacity: .85; }
.ask2-pill {
  width: fit-content;
  max-width: 100%;
  padding: 10px 16px;
  border-radius: 20px;
  line-height: 1.45;
  font-size: 15px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border: 0;
}
.ask2-pill-user {
  background: #e8eaed;
  color: #1a1c1e;
  padding: 8px 14px;
  border-radius: 18px;
}
.ask2-pill-bot {
  background: color-mix(in oklab, var(--fg) 12%, var(--bg));
  color: var(--fg);
  padding: 14px 18px;
  border-radius: 20px;
}
[data-theme="night"] .ask2-pill-user,
[data-theme="dark"] .ask2-pill-user {
  background: #e4e6ea;
  color: #1a1c1e;
}
[data-theme="night"] .ask2-pill-bot,
[data-theme="dark"] .ask2-pill-bot {
  background: #2c2e31;
  color: #f2f2f3;
}
[data-theme="red"] .ask2-pill-user {
  background: #f0d8cc;
  color: #1a0e0c;
}
[data-theme="red"] .ask2-pill-bot {
  background: #2a1614;
  color: #f0c8b8;
}
[data-theme="day"] .ask2-pill-user {
  background: #dfe3e8;
  color: #1c2733;
}
[data-theme="day"] .ask2-pill-bot {
  background: #ece6da;
  color: #1c2733;
}
.ask2-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  max-width: min(22rem, 78vw);
}
.ask2-thumb {
  display: block;
  width: min(22rem, 78vw);
  max-height: 16rem;
  object-fit: cover;
  border-radius: 16px;
  background: #111;
}
.ask2-file-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.ask2-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg); color: var(--muted);
}
.ask2-chip img { width: 22px; height: 22px; object-fit: cover; border-radius: 4px; }
.ask2-chip-x {
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  font-size: 14px; line-height: 1; padding: 0 2px; margin: 0;
}
.ask2-composer {
  position: sticky;
  bottom: 0;
  z-index: 6;
  margin-top: auto;
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
  flex: none;
}
.ask2-pending { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.ask2-bar {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 6px 6px 6px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--surface) 78%, #000);
}
[data-theme="day"] .ask2-bar {
  background: color-mix(in oklab, var(--surface) 70%, #fff);
}
.ask2-bar.ask2-drop-on { outline: 2px solid var(--accent, #6ea8fe); }
.ask2-plus {
  flex: none;
  width: 36px; height: 36px;
  margin: 0; padding: 0;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.ask2-plus-ico { display: block; width: 22px; height: 22px; }
.ask2-plus-ico svg { width: 100%; height: 100%; display: block; }
.ask2-mic {
  flex: none;
  width: 36px; height: 36px;
  margin: 0; padding: 0;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.ask2-mic-ico { display: block; width: 20px; height: 20px; }
.ask2-mic-ico svg { width: 100%; height: 100%; display: block; }
.ask2-mic.is-on {
  color: #f2f2f3;
  background: #8b2e2e;
}
.ask2-mic.is-on .ask2-mic-ico { animation: ask2-mic-pulse 1.1s ease-in-out infinite; }
@keyframes ask2-mic-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .55; transform: scale(1.08); }
}
.ask2-tts-stop {
  flex: none;
  margin: 0 4px 0 0;
  padding: 6px 10px;
  border: 0;
  border-radius: 16px;
  background: #8b2e2e;
  color: #f2f2f3;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.ask2-voice-msg {
  margin: 6px 12px 0;
  font-size: 12px;
}
.ask2-bar textarea {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 8px 6px;
  border: 0;
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: 16px;
  line-height: 1.35;
  resize: none;
  min-height: 24px;
  max-height: 120px;
  outline: none;
  box-shadow: none;
}
.ask2-bar textarea::placeholder { color: var(--subtle); }
.ask2-send {
  flex: none;
  width: 36px; height: 36px;
  margin: 0; padding: 0;
  border: 0; border-radius: 50%;
  background: #f4f4f5;
  color: #111;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.ask2-send svg { width: 18px; height: 18px; display: block; }
.ask2-send:disabled { opacity: .45; cursor: default; }
[data-theme="day"] .ask2-send {
  background: var(--navy);
  color: #fff;
}
[data-theme="red"] .ask2-send {
  background: #f0c8b8;
  color: #1a0e0c;
}
.ask2-working { font-size: 12px; padding: 0 4px 8px 0; white-space: nowrap; }
.ask2-error { flex: none; margin: 0 0 8px; }
.ask2-notice-pill { max-width: min(36rem, 92%); }
.ask2-notice-ok {
  margin: 4px 0 0;
  cursor: pointer;
  font-weight: 600;
  align-self: flex-start;
}
.ask2-fb {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  max-width: min(42rem, 92%);
  font-size: 13px;
  color: var(--muted);
}
.ask2-fb-rates {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.ask2-fb-rate {
  margin: 0;
  padding: 4px 8px;
  font-size: 18px;
  line-height: 1.2;
  border-radius: 18px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.ask2-fb-rate.is-on {
  background: #e4e6ea;
}
.ask2-fb-review {
  margin: 0 0 0 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ask2-fb-thanks { display: none; }
.ask2-fb-rates.is-saved { opacity: .85; }
.ask2-review-pop {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, .45);
}
.ask2-review-pop[hidden] { display: none; }
.ask2-review-card {
  width: min(28rem, 100%);
  padding: 16px;
  border-radius: 20px;
  background: #2c2e31;
  color: #f2f2f3;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
}
[data-theme="day"] .ask2-review-card {
  background: #ece6da;
  color: #1c2733;
}
.ask2-review-title {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 600;
}
.ask2-review-text {
  display: block;
  width: 100%;
  margin: 10px 0 12px;
  padding: 10px 12px;
  border: 0;
  border-radius: 14px;
  background: color-mix(in oklab, #000 22%, transparent);
  color: inherit;
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
  resize: vertical;
  min-height: 6rem;
  outline: none;
}
[data-theme="day"] .ask2-review-text {
  background: #fff;
  color: #1c2733;
}
.ask2-review-acts {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.ask2-review-cancel,
.ask2-review-submit {
  margin: 0;
  padding: 8px 14px;
  border: 0;
  border-radius: 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.ask2-review-cancel {
  background: transparent;
  color: var(--muted);
}
.ask2-review-submit {
  background: #e4e6ea;
  color: #1a1c1e;
}
.ask2-turn { position: relative; }
.ask2-reply {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  opacity: 0;
  align-self: flex-start;
}
.ask2-row-user .ask2-reply { align-self: flex-end; }
.ask2-turn:hover .ask2-reply,
.ask2-turn:focus-within .ask2-reply { opacity: 1; }
.ask2-replying {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 12px 6px;
}
.ask2-replying[hidden] { display: none; }
.ask2-reply-clear {
  margin: 0;
  padding: 0 6px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.ask2-room button { margin-top: 0; }

@media (max-width: 640px) {
  .ask2-hist {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    z-index: 24;
    width: min(18rem, 86vw);
    padding: 10px 12px 12px;
    background: var(--bg);
    border-right: 1px solid var(--line);
    box-shadow: 10px 0 28px rgba(0, 0, 0, .35);
  }
  .ask2-shell:not(.is-hist-off) .ask2-hist-scrim { display: block; }
  .ask2-pill { font-size: 15px; }
  .ask2-turn { max-width: 94%; }
  .ask2-room-vessel,
  .ask2-vessel-chip { max-width: 36vw; }
  .ask2-page { padding: 0 2px; }
  .ask2-composer {
    position: sticky;
    bottom: 0;
  }
}