:root {
  color-scheme: light dark;
  --bg: #f7f7f8;
  --fg: #18181b;
  --muted: #71717a;
  --card: #ffffff;
  --border: #e4e4e7;
  --accent: #2563eb;
  --accent-fg: #ffffff;
  --ok: #059669;
  --warn-bg: #fef3c7;
  --warn-fg: #92400e;
  --error: #dc2626;
  --both: #dbeafe;
  --person-tint: 14%;
  --radius: 8px;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f0f11;
    --fg: #e4e4e7;
    --muted: #a1a1aa;
    --card: #18181b;
    --border: #2e2e33;
    --accent: #3b82f6;
    --warn-bg: #422006;
    --warn-fg: #fcd34d;
    --error: #f87171;
    --both: #1e3a5f;
    --person-tint: 28%;
  }
}
* { box-sizing: border-box; }
/* The window never scrolls, so nothing can rubber-band the header: it sits still above .page,
   which is the only thing that scrolls. Safari bounces even a window that can't scroll, hence
   overscroll-behavior on html too. */
html { overscroll-behavior: none; }
body { margin: 0; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); color: var(--fg); font-size: 15px; line-height: 1.45; }
.bar { flex: none; }
.page { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
a { color: var(--accent); }
main { max-width: 860px; margin: 0 auto; padding: 16px; }
h1 { font-size: 1.4rem; margin: 0.4rem 0; }
h2 { font-size: 1.1rem; margin: 1.4rem 0 0.6rem; }
h3 { font-size: 0.95rem; margin: 1rem 0 0.3rem; }
code { font-size: 0.85em; word-break: break-all; }

.bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--card); flex-wrap: wrap; }
.bar .brand { font-weight: 700; color: var(--fg); text-decoration: none; }
.bar nav { display: flex; gap: 14px; align-items: center; }
.bar nav form { margin: 0; }
.bar nav a, .bar nav button.link { color: var(--fg); text-decoration: none; }
.bar nav a:hover, .bar nav button.link:hover { text-decoration: underline; }

.sub { color: var(--muted); font-size: 0.85rem; margin: 0; font-weight: normal; }
.empty { color: var(--muted); }
.error { color: var(--error); display: block; font-size: 0.85rem; }
.flash { background: var(--card); border: 1px solid var(--border); border-left: 4px solid var(--ok); padding: 8px 12px; border-radius: var(--radius); }

.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; }
.card h2 { margin-top: 0; }
.signin { max-width: 420px; margin: 10vh auto; text-align: center; }

button, .button {
  font: inherit; font-size: 0.9rem; padding: 7px 12px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--card); color: var(--fg); cursor: pointer; text-decoration: none; display: inline-block;
}
button.primary, .button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
button.quiet { border-color: transparent; color: var(--muted); }
button.link { border: none; background: none; color: var(--accent); padding: 0; }
button:disabled { opacity: 0.5; cursor: not-allowed; }

.meetings { list-style: none; padding: 0; margin: 0; }
.meeting { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 8px; }
.meeting a { flex: 1; display: flex; flex-direction: column; padding: 10px 12px; color: var(--fg); text-decoration: none; }
.meeting .title { font-weight: 600; }
.meeting .sub { margin-top: 2px; }
.people { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 2px; }
.person { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 2px; border-radius: 999px; font-size: 0.78rem; font-weight: 500; background: color-mix(in srgb, var(--accent) var(--person-tint), transparent); color: color-mix(in srgb, var(--accent) 35%, var(--fg)); }
.person .initials { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); font-size: 0.6rem; font-weight: 700; }
.head .people { margin: 2px 0 6px; }
.head .person { font-size: 0.85rem; }
.head .person .initials { width: 20px; height: 20px; font-size: 0.65rem; }
.count { background: var(--accent); color: var(--accent-fg); border-radius: 999px; padding: 1px 9px; font-size: 0.8rem; margin-right: 12px; }
.state-analyzed { color: var(--accent); }
.state-done { color: var(--ok); }

/* The meeting page fills the window. .stage takes whatever height is left under the heading,
   and the video is as big as that height allows while leaving the tabs at least 560px (or 30%)
   of the width. The tabs sit beside it at the same height. */
.page:has(.stage) { display: flex; flex-direction: column; }
main:has(.stage) { flex: 1; display: flex; flex-direction: column; width: 100%; max-width: none; padding: 14px 24px 20px; }
.stage { flex: 1 1 0; min-height: 360px; margin-top: 12px; container-type: size; }
.split { display: grid; grid-template-columns: min(100cqh * 16 / 9, 100cqw - max(560px, 30cqw) - 16px) minmax(0, 1fr); gap: 16px; align-items: start; }
.player { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: #000; border-radius: var(--radius); }
.player.no-video { display: grid; place-items: center; padding: 24px; text-align: center; color: var(--muted); background: var(--card); border: 1px dashed var(--border); }
.side { position: relative; align-self: stretch; }
@media (max-width: 1080px) {
  .stage { flex: none; min-height: 0; container-type: normal; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .player { width: min(100%, 75vh * 16 / 9); }
  .player.no-video { width: 100%; aspect-ratio: auto; }
  .side { height: min(70vh, 640px); }
}

.tabs { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.tablist { display: flex; flex: none; padding: 0 6px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.tablist [role="tab"] { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem; padding: 11px 9px 9px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--muted); white-space: nowrap; }
.tablist [role="tab"]:hover { color: var(--fg); }
.tablist [role="tab"][aria-selected="true"] { color: var(--fg); font-weight: 600; border-bottom-color: var(--accent); }
.tablist [role="tab"]:focus-visible, .pane:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tablist .n { min-width: 18px; padding: 0 6px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; text-align: center; background: var(--border); color: var(--muted); }
.tablist [aria-selected="true"] .n { background: var(--accent); color: var(--accent-fg); }
.panes { position: relative; flex: 1; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.pane { padding: 14px 16px; font-size: 0.92rem; }
.pane[hidden] { display: none; }
.pane > .md:first-child > :first-child { margin-top: 0; }
.pane .item { background: var(--bg); }
.pane .actions { position: sticky; bottom: 0; align-items: center; margin: 14px -16px -14px; padding: 10px 16px; border-top: 1px solid var(--border); background: var(--card); }
.pane .actions #save-status { margin-right: auto; }
.pane .add { margin: 14px 0 4px; }

.md { font-size: 0.9rem; }
.md h2, .md h3, .md h4, .md h5 { font-size: 0.95rem; margin: 0.9rem 0 0.3rem; }
.md p { margin: 0.4rem 0; }
.md ul, .md ol { margin: 0.3rem 0; padding-left: 1.3rem; }
.md li { margin: 0.3rem 0; }
.md a { color: inherit; text-decoration-color: var(--muted); }
.md a[data-seek]:hover, .md a:hover { color: var(--accent); }
.transcript { list-style: none; margin: -4px -6px; padding: 0; font-size: 0.88rem; }
.transcript li { display: grid; grid-template-columns: 4.6em 1fr; column-gap: 8px; padding: 3px 6px; border-radius: 5px; }
.transcript li.now { background: var(--both); }
.transcript .ts { grid-row: span 2; color: var(--muted); font-variant-numeric: tabular-nums; text-decoration: none; padding-top: 1px; }
.transcript .ts:hover { color: var(--accent); }
.transcript .who { font-weight: 600; font-size: 0.8rem; }
/* Shown once you scroll the transcript away from the line being spoken. */
.follow { position: sticky; bottom: 0; display: flex; justify-content: center; pointer-events: none; padding-top: 8px; }
.follow button { pointer-events: auto; font-size: 0.8rem; padding: 4px 12px; border-radius: 999px; border-color: var(--accent); color: var(--accent); }
.quote a[data-seek] { font-style: normal; font-variant-numeric: tabular-nums; color: var(--muted); text-decoration: none; border: 1px solid var(--border); border-radius: 999px; padding: 0 7px; white-space: nowrap; }
.quote a[data-seek]:hover { color: var(--accent); border-color: var(--accent); }

.client { display: flex; gap: 8px; align-items: center; margin: 12px 0; font-weight: 600; }

.item { display: grid; grid-template-columns: 24px 1fr; gap: 8px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 8px; }
.item.done, .item.off { grid-template-columns: 1fr; }
.item.off { opacity: 0.6; }
.item:has(.pick:not(:checked)) { opacity: 0.6; }
.item .pick { margin-top: 6px; width: 18px; height: 18px; }
.item .body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.item .title { font-weight: 600; }
.item input.title, .item textarea, .add input, .add textarea { font: inherit; width: 100%; padding: 5px 7px; border: 1px solid var(--border); border-radius: 5px; background: transparent; color: var(--fg); }
.item input.title { font-weight: 600; }
.item textarea { font-size: 0.9rem; resize: vertical; }
.item textarea, .add textarea { field-sizing: content; min-height: 3lh; }
.quote { font-size: 0.82rem; color: var(--muted); font-style: italic; margin: 0; }
.meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.meta select, .meta input[type="date"] { font: inherit; font-size: 0.8rem; padding: 2px 4px; border: 1px solid var(--border); border-radius: 5px; background: var(--card); color: var(--fg); }
.chip { font-size: 0.75rem; border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; color: var(--fg); text-decoration: none; white-space: nowrap; }
.chip.source-both { background: var(--both); border-color: transparent; }
.chip.warn { background: var(--warn-bg); color: var(--warn-fg); border-color: transparent; }
.chip.ok { background: var(--ok); color: #fff; border-color: transparent; }

.actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin: 14px 0; }
.actions form { margin: 0; }
.backfill { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.backfill input { font: inherit; width: 5em; padding: 5px 7px; margin-left: 6px; border: 1px solid var(--border); border-radius: 5px; background: transparent; color: var(--fg); }
.add { margin: 12px 0 40px; }
.add summary { cursor: pointer; color: var(--accent); }
.add .fields { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; align-items: flex-start; }

/* Step labels can include a meeting title, so long ones are cut off rather than pushing the nav around. */
.bar nav .batch { color: var(--muted); font-size: 0.85rem; max-width: 24em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bar nav .batch.busy { color: var(--accent); }
.bar nav .batch.done { color: var(--ok); }
.bar nav .batch.failed { color: var(--error); }
.spinner { display: inline-block; vertical-align: -0.1em; margin-right: 6px; width: 0.8em; height: 0.8em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }