:root {
  --bg: #f6f6f7; --panel: #ffffff; --fg: #1d1d1f; --muted: #6e6e73; --line: #d2d2d7;
  --accent: #0a66c2; --accent-fg: #ffffff; --sel: #dbe9fb; --error: #b00020;
  --yellow: #fff4c2; --red: #f8cbc4; --ink: #1b1b1b; --warn-bg: #fff3cd; --warn-fg: #664d03;
  --warn-line: #e0b000; --overlay: rgba(0, 0, 0, .35);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #161618; --panel: #1f1f22; --fg: #f2f2f4; --muted: #a1a1a6; --line: #3a3a3e;
    --accent: #4c9aff; --accent-fg: #0b0b0c; --sel: #24364f; --error: #ff7b7b;
    --overlay: rgba(0, 0, 0, .55); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #161618; --panel: #1f1f22; --fg: #f2f2f4; --muted: #a1a1a6; --line: #3a3a3e;
  --accent: #4c9aff; --accent-fg: #0b0b0c; --sel: #24364f; --error: #ff7b7b;
  --overlay: rgba(0, 0, 0, .55); color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--fg); font: 14px/1.4 -apple-system, "Segoe UI", system-ui, sans-serif; }
button, input, select { font: inherit; color: inherit; }
button { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 4px 12px; cursor: pointer; }
button:disabled { opacity: .45; cursor: default; }
button.primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
button.link { border: 0; background: none; color: var(--accent); padding: 0 2px; text-decoration: underline; }
input, select { background: var(--panel); border: 1px solid var(--line); border-radius: 5px; padding: 3px 6px; }
input.missing { border: 2px solid var(--error); }
.loading { display: grid; place-items: center; height: 100vh; color: var(--muted); }
.lines { white-space: pre-wrap; }
.note { color: var(--muted); margin: 4px 0 10px; }
.grow { flex: 1; }

.app { display: flex; flex-direction: column; height: 100vh; }
header.top { display: flex; align-items: center; gap: 14px; padding: 6px 14px; background: var(--panel); border-bottom: 1px solid var(--line); }
header.top .who { margin-left: auto; color: var(--muted); }
.menus { display: flex; gap: 2px; }
.menu { position: relative; }
.menu > button { border: 0; background: none; padding: 4px 10px; }
.menu > button.open { background: var(--sel); }
.menu .items { position: absolute; z-index: 20; top: 100%; left: 0; min-width: 240px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 4px; box-shadow: 0 6px 20px rgba(0,0,0,.18); display: flex; flex-direction: column; }
.menu .items button { border: 0; background: none; text-align: left; padding: 6px 10px; border-radius: 4px; }
.menu .items button:hover:not(:disabled) { background: var(--sel); }

.intake { padding: 10px 14px 6px; display: flex; flex-direction: column; gap: 8px; }
.drop { border: 2px dashed var(--muted); border-radius: 10px; padding: 10px; text-align: center; color: var(--muted); }
.drop.hot { border-color: #c9a227; color: var(--fg); }
.videos { max-height: 170px; overflow: auto; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); outline: none; }
.videos .empty { margin: 8px 10px; color: var(--muted); }
table.grid { border-collapse: collapse; width: 100%; }
table.grid th, table.grid td { padding: 3px 8px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
table.grid th { position: sticky; top: 0; background: var(--panel); font-weight: 600; z-index: 1; }
table.grid tr.selected td { background: var(--sel); }
table.grid td.num, table.grid th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.grid td.name { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
table.grid td.status { white-space: normal; }
table.grid td.status.error { color: var(--error); }
input.guild { width: 140px; }
label.check { display: inline-flex; align-items: center; gap: 6px; }
.buttons { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.buttons.left { justify-content: flex-start; margin-top: 0; }
progress { width: 100%; height: 8px; }
.statusline { color: var(--muted); min-height: 1.4em; white-space: pre-wrap; }

.tabs { flex: 1; display: flex; flex-direction: column; min-height: 0; border-top: 1px solid var(--line); }
.tabs.empty { border-top: 0; }
.tabbar { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px 10px 0; }
.tabbar button { border-radius: 6px 6px 0 0; border-bottom: 0; }
.tabbar button.on { background: var(--sel); font-weight: 600; }
.tabpage { flex: 1; overflow: auto; padding: 10px 14px; background: var(--panel); border-top: 1px solid var(--line); }

.overlay { position: fixed; inset: 0; background: var(--overlay); display: grid; place-items: center; z-index: 50; }
.dialog { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.dialog.wide { width: min(820px, calc(100vw - 32px)); }
.dialog h2 { margin: 0 0 10px; font-size: 17px; }
.dialog label.row { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.dialog label.row input, .dialog label.row select { flex: 1; min-width: 0; }
.dialog pre { white-space: pre-wrap; font-size: 12px; max-height: 300px; overflow: auto; }
.error { color: var(--error); }

@media (max-width: 700px) {
  header.top { flex-wrap: wrap; }
  table.grid td.name { max-width: 140px; }
}

/* login and the boot dialogs */
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.dialog.login { width: min(440px, calc(100vw - 32px)); }
.lock-layer { position: fixed; inset: 0; z-index: 80; background: var(--bg); }
.radios { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; }
.small { font-size: 12px; }
pre.code { font-size: 15px; padding: 10px; border: 1px solid var(--line); border-radius: 6px; user-select: all; word-break: break-all; white-space: pre-wrap; }
.scroll { max-height: 55vh; overflow: auto; border: 1px solid var(--line); border-radius: 6px; }
.dialog .tabbar { padding: 0 0 6px; }

/* review screens */
.board, .matrix, .preview { display: flex; flex-direction: column; gap: 8px; height: 100%; min-height: 0; }
.board-head { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.board-info, .row-line { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.warnbox { background: var(--warn-bg); color: var(--warn-fg); border: 1px solid var(--warn-line); border-radius: 4px; padding: 3px 6px; }
.board-table { flex: 1; min-height: 160px; overflow: auto; border: 1px solid var(--line); border-radius: 6px; outline: none; }
table.review td { cursor: default; }
table.review td.flag { background: var(--row); color: var(--ink); }
table.review tr.selected td { background: var(--sel); color: inherit; }
table.review tr.selected td.flag { box-shadow: inset 0 0 0 999px rgba(10, 102, 194, .18); background: var(--row); color: var(--ink); }
table.review td.current { outline: 2px solid var(--accent); outline-offset: -2px; }
table.review td.thumb { padding: 2px 4px; }
table.review td.thumb img { display: block; }
input.cell-edit { width: 100%; min-width: 80px; }
.evidence { display: flex; gap: 12px; align-items: flex-start; min-height: 124px; }
.evidence img { max-width: 70%; border: 1px solid var(--line); }
.legend { color: var(--muted); }
.tabbar.sub { padding: 0; }
.matrix-table, .sheet { flex: 1; min-height: 0; }
th.multi { white-space: pre-line; vertical-align: bottom; cursor: pointer; }
table.xl { border-collapse: collapse; table-layout: fixed; background: #fff; color: #1b1b1b; }
table.xl th { background: #eee; color: #555; font-weight: normal; border: 1px solid #ccc; position: sticky; top: 0; }
table.xl th.rownum { position: sticky; left: 0; }
table.xl td { border: 1px solid #ddd; padding: 2px 4px; overflow: hidden; white-space: pre-wrap; vertical-align: middle; font-size: 13px; }
table.xl td img { display: block; }

/* the Analysis window */
.analysis { position: fixed; inset: 0; z-index: 30; background: var(--bg); display: flex; flex-direction: column; }
.analysis header.top { flex-wrap: wrap; }
.tabbar.inline { padding: 0; }
.tabbar.inline button { border-radius: 6px; border-bottom: 1px solid var(--line); }
.analysis-body { flex: 1; min-height: 0; overflow: auto; padding: 10px 14px; }
.analysis h2 { font-size: 18px; margin: 4px 0; }
.ov, .strike-page, .settings-screen { display: flex; flex-direction: column; gap: 8px; }
.strike-page { height: 100%; }
.tiles { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tile { border: 1px solid var(--line); border-radius: 6px; padding: 4px 12px; min-width: 90px; }
.tile .value { font-size: 20px; font-weight: 700; }
.tile .caption { font-size: 12px; }
.tiles .summary { flex: 1; min-width: 260px; }
.split { flex: 1; min-height: 300px; display: flex; gap: 12px; }
.members { display: flex; flex-direction: column; gap: 4px; min-width: 0; max-width: 55%; }
.members .scroll, .chart-panel .chart-scroll { flex: 1; min-height: 0; }
.chart-panel { flex: 1; min-width: 320px; display: flex; flex-direction: column; gap: 4px; }
table.members-table td.box { text-align: center; cursor: pointer; }
table.members-table tr.muted td { color: var(--muted); }
table.members-table td.struck { text-decoration: line-through; }
table.grid th { cursor: pointer; }
.chart { position: relative; }
.chart canvas { display: block; }
.chart-tip { position: absolute; z-index: 5; max-width: 420px; background: var(--panel); color: var(--fg); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; box-shadow: 0 6px 18px rgba(0,0,0,.2); pointer-events: none; font-size: 12.5px; }
.panel { border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; }
.panel p { margin: 2px 0 6px; }
label.off { color: var(--muted); }
.settings-screen input[type=number] { width: 70px; }
@media (max-width: 1100px) { .split { flex-direction: column; } .members { max-width: none; } }

/* the trade window */
.dialog.trade { width: min(1180px, calc(100vw - 32px)); height: min(860px, calc(100vh - 32px)); display: flex; flex-direction: column; }
.trade-body { flex: 1; min-height: 0; display: flex; gap: 10px; }
.trade-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.trade-side .scroll { flex: 1; min-height: 120px; max-height: none; }
.trade-mid { display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.trade-mid hr { width: 100%; border: 0; border-top: 1px solid var(--line); }
table.trade-table tr { cursor: pointer; }
table.trade-table tr.muted td { color: var(--muted); }
.menu-anchor { position: relative; }
.menu-anchor .items { position: absolute; z-index: 60; left: 0; top: 100%; width: 360px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 4px; display: flex; flex-direction: column; box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.menu-anchor .items button { border: 0; background: none; text-align: left; padding: 6px 8px; white-space: normal; }
.menu-anchor .items button:hover { background: var(--sel); }