/* quantetta-a: the one stylesheet. Every visual choice is a variable in :root; templates place,
   the viewer draws from these same variables (it reads them with getComputedStyle). Changing the
   register means editing this file only. */
:root {
  --ground: #ffffff;
  --panel: #000000;            /* figure panels: the data's background */
  --text: #111111;
  --muted: #5a5a5a;
  --accent: #c8102e;           /* the only accent: cursor, flags for a human, changed sensitivity cells */
  --link: #0b3d91;
  --rule: #d9d9d9;
  --rule-heavy: #111111;
  --code-ground: #f4f4f4;
  --code-comment: #117711;     /* MATLAB editor comment green */
  --tab-active: #ffffff;
  --tab-ground: #ededed;
  --control-ground: #ffffff;
  --shade-a: #f3f3f3;          /* timeline segment shading, alternating */
  --shade-b: #e4e4e4;
  --grid-on-panel: rgba(255,255,255,0.22);
  --on-panel: #ffffff;         /* axes, ticks, overlays drawn on a figure panel */
  --font-ui: system-ui, "Segoe UI", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: Menlo, Consolas, "Courier New", monospace;
  --font-fig: Helvetica, Arial, sans-serif;
  --fs: 14px;                  /* UI and prose */
  --fs-mono: 13px;
  --fs-small: 12.5px;
  --fs-h: 15px;                /* section headings */
  --fs-title: 17px;
  --fs-fig: 11px;              /* figure tick and axis labels */
  --u: 8px;                    /* spacing unit */
  --left-pane: 600px;
  --control-h: 26px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ground); color: var(--text); font: var(--fs)/1.4 var(--font-ui); }
body { min-height: 100vh; display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
main { flex: 1; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
.mono, code, pre, input, select, td.mono { font-family: var(--font-mono); font-size: var(--fs-mono); }
.flag { color: var(--accent); }
.muted { color: var(--muted); }

/* tab strip */
.tabs { display: flex; align-items: flex-end; background: var(--tab-ground); border-bottom: 1px solid var(--rule-heavy); padding: 0 var(--u); }
.tabs .wordmark { width: 160px; height: 30px; }       /* intentionally empty */
.tabs .tab { padding: 5px 14px; border: 1px solid var(--rule); border-bottom: none; margin-right: 2px; background: var(--tab-ground); color: var(--muted); }
.tabs .tab.active { background: var(--tab-active); color: var(--text); margin-bottom: -1px; border-color: var(--rule-heavy); }
.tabs .tab.file { font-family: var(--font-mono); font-size: var(--fs-mono); }
.tabs .spacer, .toolbar .spacer { flex: 1; }
.tabs .signout { display: flex; align-items: center; gap: var(--u); padding-bottom: 3px; font-size: var(--fs-small); }

/* toolbar */
.toolbar { display: flex; align-items: center; gap: var(--u); padding: calc(var(--u) * 0.75) calc(var(--u) * 2); border-bottom: 1px solid var(--rule); }
button, .btn { font: var(--fs-small)/1 var(--font-ui); height: var(--control-h); padding: 0 10px; display: inline-flex; align-items: center; background: var(--control-ground); color: var(--text); border: 1px solid var(--rule-heavy); border-radius: 0; cursor: pointer; }
.btn:hover { text-decoration: none; }
button:disabled { color: var(--muted); border-color: var(--rule); cursor: default; }
button.primary { background: var(--text); color: var(--ground); border-color: var(--text); }   /* the one filled button: Play */
button.on { background: var(--control-ground); color: var(--text); font-weight: 600; box-shadow: inset 0 -2px 0 var(--rule-heavy); }   /* the active view toggle, outlined */
.status .spacer { flex: 1; border-right: none; padding: 0; }
.status .keys { border-right: none; }
.subtabs { display: flex; }
.subtabs .tab { padding: 4px 14px; border: 1px solid var(--rule); border-left: none; color: var(--muted); }
.subtabs .tab:first-child { border-left: 1px solid var(--rule); }
.subtabs .tab.active { color: var(--text); border-color: var(--rule-heavy); border-bottom: 2px solid var(--rule-heavy); }

/* page head */
.head { padding: var(--u) calc(var(--u) * 2) 0; }
.crumbs { color: var(--muted); font-size: var(--fs-small); }
.crumbs a { color: var(--muted); }
.title { font-size: var(--fs-title); font-weight: 600; margin: 2px 0 0; }
.title .mono { font-size: var(--fs-title); font-weight: 600; }
.facts { margin: 0; }
.facts .mono { font-size: var(--fs-mono); }
.page { padding: var(--u) calc(var(--u) * 2) calc(var(--u) * 2); }

/* panes */
.panes { display: grid; grid-template-columns: var(--left-pane) 1fr; gap: calc(var(--u) * 3); padding: var(--u) calc(var(--u) * 2) calc(var(--u) * 2); }
h2 { font-size: var(--fs-h); font-weight: 600; margin: calc(var(--u) * 2) 0 var(--u); }
section:first-child h2 { margin-top: var(--u); }
.prose { margin: 0; max-width: 90ch; }

/* properties panel */
.properties { margin: var(--u) calc(var(--u) * 2) 0; padding: 0 0 var(--u); border-bottom: 1px solid var(--rule-heavy); }
.properties td:first-child { white-space: nowrap; color: var(--muted); width: 12em; }

/* login */
.login { display: grid; gap: var(--u); max-width: 24em; padding: var(--u) calc(var(--u) * 2); }
.login label { display: grid; gap: 2px; }
.login input { height: var(--control-h); border: 1px solid var(--rule-heavy); border-radius: 0; padding: 0 6px; }
.login button { width: max-content; }

/* code block */
pre.code { background: var(--code-ground); border: none; margin: 0; padding: var(--u) calc(var(--u) * 1.5); overflow-x: auto; line-height: 1.45; }
pre.code .c { color: var(--code-comment); }
pre.code .n { color: var(--text); }

/* tables: rules, not boxes */
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; vertical-align: top; padding: 3px 10px 3px 0; border-bottom: 1px solid var(--rule); font-weight: normal; }
th { font-weight: 600; border-bottom: 1.5px solid var(--rule-heavy); }
tbody > tr:last-child > td { border-bottom: 1.5px solid var(--rule-heavy); }
tr.group th { border-bottom: 1px solid var(--rule); font-style: italic; font-weight: normal; padding-top: 6px; }
tr.run td { font-weight: 600; }
td.unstable { color: var(--accent); }
.nowrap { white-space: nowrap; }
.inline { display: inline-flex; align-items: center; gap: 6px; }
.inline select { height: var(--control-h); border: 1px solid var(--rule-heavy); border-radius: 0; background: var(--control-ground); }
input.note { height: var(--control-h); border: 1px solid var(--rule); border-radius: 0; padding: 0 6px; width: 10em; }
.small { font-size: var(--fs-small); word-break: break-all; }
.upload { display: grid; grid-template-columns: max-content 1fr; gap: var(--u) calc(var(--u) * 2); max-width: 60em; align-items: center; }
.upload label { display: contents; }
.upload input, .upload select { height: var(--control-h); border: 1px solid var(--rule-heavy); border-radius: 0; padding: 0 6px; background: var(--control-ground); }
.upload input[type=file] { border: none; padding: 0; }
.upload button { grid-column: 2; width: max-content; }
table.review td { vertical-align: top; }
table.candidates td { vertical-align: top; }
.admit-by-doi { margin-bottom: var(--u); flex-wrap: wrap; }
.admit-by-doi input.doi { height: var(--control-h); border: 1px solid var(--rule-heavy); border-radius: 0; padding: 0 6px; width: 18em; }
tr.quotes > td { padding: 0 0 8px 0; border-bottom: 1.5px solid var(--rule-heavy); }
table.evidence { width: auto; margin-left: 10px; }
table.evidence td { border-bottom: none; padding: 1px 14px 1px 0; font-size: var(--fs-small); }
table.evidence td.mono { font-size: var(--fs-small); }
table.rules col.id { width: 16%; } table.rules col.desc { width: 50%; } table.rules col.expert { width: 20%; }
table.items col.topic { width: 24%; } table.items col.detail { width: 56%; }
table.sens th.seg { font-weight: normal; }
table.sens th, table.sens td { padding-right: 6px; }
.panes { grid-template-columns: var(--left-pane) minmax(0, 1fr); }
.right { min-width: 0; }
table.criteria { margin-top: calc(var(--u) * 1.5); }
.legend { font-size: var(--fs-small); margin: calc(var(--u) * 0.75) 0 0; }
.legend b { font-weight: 600; }

/* viewer: the layout of its parts; what it draws comes from viewer.js reading these variables */
.viewer { display: grid; grid-template-columns: auto 1fr; gap: var(--u) calc(var(--u) * 2); align-items: start; }
.viewer .full { grid-column: 1 / -1; }
.controls { display: flex; flex-wrap: wrap; gap: 6px var(--u); align-items: center; font-size: var(--fs-small); }
.controls + .controls, .controls + .readout, .readout + .controls { margin-top: 12px; }
.controls .group { display: flex; }
.controls .group button { margin-left: -1px; }
.controls label { display: inline-flex; align-items: center; gap: 4px; }
.controls input[type=number], .controls input[type=text] { height: var(--control-h); border: 1px solid var(--rule-heavy); border-radius: 0; padding: 0 6px; width: 7em; background: var(--control-ground); }
.controls input[type=checkbox] { margin: 0; }
.controls select { height: var(--control-h); border: 1px solid var(--rule-heavy); border-radius: 0; background: var(--control-ground); }
canvas { display: block; }
#frame { background: var(--panel); }
#timeline, #traces { width: 100%; }
.readout { font-family: var(--font-mono); font-size: var(--fs-mono); display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; }
.roi-list td { padding: 2px 10px 2px 0; }

/* status bar */
.status { display: flex; border-top: 1px solid var(--rule-heavy); background: var(--tab-ground); font-size: var(--fs-small); }
.status div { padding: 3px calc(var(--u) * 1.5); border-right: 1px solid var(--rule); }
.status .v { font-family: var(--font-mono); font-size: var(--fs-mono); margin-left: 6px; }