/* OBSCURA OS: Case.

   One window: the top bar across, with the case and its six screens, and
   the screen under it. Five screens are pages that scroll (Overview, Load,
   Search terms, Batches, Share); Review is a working surface that does not,
   with the search across the top, the list on the left, the document in
   the middle and the coding on the right. On a phone Review shows the list
   or the document, one at a time, and the coding under the document.

   Every colour, size, corner and duration is a theme.css token, so Case
   follows the colourway, the dark mode and the motion setting the rest of
   the site does. */

body.ec-app { margin: 0; height: 100vh; height: 100dvh; overflow: hidden; background: var(--paper); color: var(--ink); font: var(--text-sm)/var(--leading-ui) var(--font-sans); }
.ec *, .ec *::before, .ec *::after { box-sizing: border-box; }
/* At no weight, so a button's own class decides its colour and weight:
   at one class's weight this reset outranked the main button's, which
   was then ink on the accent, unreadable in the default colourway. */
:where(.ec) :where(button, input, select, textarea) { font: inherit; color: inherit; }
.ec-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ec-grow { flex: 1; }
.ec code { font: var(--text-xs) var(--font-mono); padding: 1px var(--space-1); border-radius: var(--radius-sm); background: var(--paper-inset); }

.ec { height: 100vh; height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); }

/* ---------------------------------------------------------------- top bar */

.ec-top { display: flex; align-items: center; gap: var(--space-2); min-width: 0; padding: 6px 10px; background: var(--paper-raised); border-bottom: 1px solid var(--rule); }
.ec-home { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: var(--radius-md); color: var(--ink-soft); }
.ec-home:hover { background: var(--paper-inset); color: var(--ink); }
.ec-home svg { width: 20px; height: 20px; }
.ec-brand { margin: 0 var(--space-1) 0 0; font-size: var(--text-md); font-weight: 650; letter-spacing: -.01em; white-space: nowrap; }
.ec-casepick { position: relative; min-width: 0; }
.ec-case { display: inline-flex; align-items: center; gap: var(--space-1); max-width: 260px; min-height: 36px; padding: 6px 10px; border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--paper); cursor: pointer; }
.ec-case:hover, .ec-case[aria-expanded="true"] { border-color: var(--rule-strong); background: var(--paper-inset); }
.ec-case-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ec-case svg { flex: none; width: 16px; height: 16px; color: var(--ink-faint); }
.ec-menu { position: absolute; z-index: 50; top: calc(100% + var(--space-1)); left: 0; min-width: 280px; max-width: min(360px, calc(100vw - 20px)); padding: 6px; border-radius: var(--radius-lg); background: var(--paper-raised); box-shadow: 0 0 0 1px var(--rule), 0 14px 36px rgba(16, 16, 24, .18); animation: ec-pop var(--dur-3) var(--ease-standard); }
.ec-menu[hidden] { display: none; }
.ec-menu button { display: flex; width: 100%; align-items: baseline; justify-content: space-between; gap: var(--space-3); min-height: 36px; padding: var(--space-2) 11px; border: 0; border-radius: var(--radius-sm); background: transparent; text-align: left; cursor: pointer; }
.ec-menu button:hover, .ec-menu button:focus-visible { background: var(--paper-inset); outline: none; }
.ec-menu button span { font-size: var(--text-2xs); color: var(--ink-faint); }
.ec-menu button:disabled { color: var(--ink-faint); cursor: default; }
.ec-menu button:disabled:hover { background: transparent; }
.ec-menu button kbd { font: inherit; font-size: var(--text-2xs); color: var(--ink-faint); }
.ec-helppick { position: relative; flex: none; }
.ec-helppick .ec-menu { left: auto; right: 0; min-width: 240px; }
.ec-menu hr { margin: 6px var(--space-1); border: 0; border-top: 1px solid var(--rule); }
@keyframes ec-pop { from { opacity: 0; transform: translateY(-4px); } }

.ec-tabs { display: flex; gap: 2px; min-width: 0; padding: 2px; border: 1px solid var(--rule); border-radius: var(--radius-pill); background: var(--paper-inset); overflow-x: auto; scrollbar-width: none; }
.ec-tabs::-webkit-scrollbar { display: none; }
.ec-tabs button { flex: none; min-height: 30px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink-soft); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard); }
.ec-tabs button:hover { color: var(--ink); }
.ec-tabs button[aria-current="page"] { background: var(--paper-raised); color: var(--ink); box-shadow: 0 0 0 1px var(--rule), 0 1px 2px rgba(0, 0, 0, .08); }
.ec-tabs button:disabled { opacity: .45; cursor: default; }
.ec-tabs button:focus-visible, .ec-case:focus-visible, .ec-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ec-state { flex: none; margin: 0; max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--text-2xs)/1.6 var(--font-mono); letter-spacing: .02em; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.ec-state:not(:empty) { padding: 1px var(--space-2); border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper); }
.ec-state.is-busy { color: var(--ink-soft); }

/* ---------------------------------------------------------------- screens */

.ec-main { position: relative; min-height: 0; overflow: hidden; }
.ec-boot { margin: var(--space-6); }
.ec-boot[hidden] { display: none; }
.ec-view[hidden] { display: none !important; }
.ec-page { height: 100%; overflow-y: auto; padding: var(--space-5) max(var(--space-5), calc((100% - 1120px) / 2)) var(--space-7); animation: ec-arrive var(--dur-4) var(--ease-standard); }
@keyframes ec-arrive { from { opacity: 0; transform: translateY(6px); } }
.ec-h { margin: 0 0 var(--space-2); font: 650 var(--text-2xl)/1.15 var(--font-headline); letter-spacing: -.01em; }
.ec-h3 { margin: var(--space-6) 0 var(--space-2); font-size: var(--text-md); }
.ec-lead { max-width: var(--measure); margin: 0 0 var(--space-5); font-size: var(--text-md); line-height: var(--leading-prose); color: var(--ink-soft); }
.ec-hint { margin: var(--space-1) 0 var(--space-2); font-size: var(--text-xs); line-height: 1.5; color: var(--ink-faint); }
.ec-mono { font: var(--text-xs)/1.5 var(--font-mono); color: var(--ink-soft); overflow-wrap: anywhere; }
.ec-empty { margin: var(--space-6) var(--space-4); color: var(--ink-faint); text-align: center; }

.ec-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 6px 14px; border: 1px solid var(--rule-strong); border-radius: var(--radius-md); background: var(--paper-raised); color: var(--ink); font-weight: 600; cursor: pointer; text-decoration: none; transition: background-color var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard); }
.ec-btn:hover:not(:disabled) { background: var(--paper-inset); }
.ec-btn:active:not(:disabled) { transform: translateY(1px); }
.ec-btn:disabled { opacity: .5; cursor: default; }
.ec-btn-main { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.ec-btn-main:hover:not(:disabled) { background: var(--accent-strong); }
.ec-file { position: relative; overflow: hidden; }
.ec-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.ec-file:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
.ec-link { min-height: 32px; padding: 0 var(--space-1); border: 0; background: none; color: var(--accent-strong); font-size: var(--text-xs); font-weight: 600; cursor: pointer; }
.ec-link:hover { text-decoration: underline; }
.ec-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-2) 0; }

.ec-field { display: flex; flex-direction: column; gap: var(--space-1); margin: 0 0 var(--space-3); font-size: var(--text-xs); color: var(--ink-soft); }
.ec-field > span { font-weight: 600; }
.ec-field-inline { flex-direction: row; align-items: center; gap: var(--space-2); margin: 0; }
.ec-field-hint { margin: 0; font-weight: 400; }
/* A screen's one line, with the rest of what it does folded under it. */
.ec-about { max-width: var(--measure); margin: 0 0 var(--space-4); }
.ec-about summary { display: block; padding: 6px 0; font-size: var(--text-md); line-height: 1.45; color: var(--ink-soft); cursor: pointer; list-style: none; }
.ec-about summary::-webkit-details-marker { display: none; }
.ec-about summary::after { content: "More"; display: inline-block; margin-left: var(--space-2); vertical-align: 2px; padding: 0 var(--space-2); border: 1px solid var(--rule); border-radius: var(--radius-sm); font: 600 var(--text-2xs)/1.8 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); }
.ec-about[open] summary::after { content: "Less"; }
.ec-about summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }
.ec-about p { margin: var(--space-1) 0 0; font-size: var(--text-sm); line-height: var(--leading-prose); color: var(--ink-soft); }
.ec input:not([type="checkbox"]):not([type="file"]), .ec select, .ec textarea { width: 100%; min-height: 36px; padding: 6px var(--space-2); border: 1px solid var(--rule-strong); border-radius: var(--radius-md); background: var(--paper); color: var(--ink); font-size: var(--text-sm); }
.ec textarea { resize: vertical; font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.5; }
.ec input:focus, .ec select:focus, .ec textarea:focus { border-color: var(--accent); outline: 2px solid var(--accent-border); outline-offset: 0; }
.ec-field-inline select { width: auto; }
.ec-check { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font-size: var(--text-xs); color: var(--ink-soft); cursor: pointer; }
.ec-check input { width: 18px; height: 18px; accent-color: var(--accent); }
.ec-inline { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.ec-inline input { flex: 1; }

.ec-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-3); }
.ec-card, .ec-panel { padding: var(--space-4); border-radius: var(--radius-lg); background: var(--paper-raised); box-shadow: 0 0 0 1px var(--rule); }
.ec-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.ec-card h3, .ec-panel h3 { margin: 0 0 var(--space-2); font-size: var(--text-md); }
.ec-card p { margin: 0 0 var(--space-2); color: var(--ink-soft); line-height: 1.5; }
.ec-card .ec-field { width: 100%; }
.ec-card .ec-btn { margin-top: auto; }
.ec-panel { margin: 0 0 var(--space-3); }
.ec-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.ec-cols > .ec-panel { margin: 0 0 var(--space-3); }
.ec-cols-terms { grid-template-columns: minmax(260px, 2fr) minmax(0, 3fr); align-items: start; }
.ec-scroll { overflow-x: auto; }
.ec-prodform { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-3) var(--space-4); }
.ec-prodform > .ec-prodsum, .ec-prodform > .ec-row, .ec-prodform > #ecPRun { grid-column: 1 / -1; margin: 0; }
.ec-fs { min-width: 0; margin: 0; padding: 0; border: 0; }
.ec-fs legend { margin: 0 0 var(--space-2); padding: 0; font-size: var(--text-sm); font-weight: 650; color: var(--ink); }
.ec-fs .ec-check { display: flex; }
.ec-prodsum { font-size: var(--text-sm); line-height: 1.5; }
.ec-h3 { margin: var(--space-5) 0 var(--space-2); font-size: var(--text-md); }

/* Chronology */
.ec-ch { align-items: start; }
.ec-ch-filter .ec-field { flex: 1 1 140px; margin: 0; }
.ec-ch-sugs, .ec-ch-events { max-height: 70vh; margin: var(--space-2) 0 0; padding: 0; overflow: auto; list-style: none; }
.ec-ch-sugs li { display: grid; grid-template-columns: 9.5em minmax(0, 1fr) auto; gap: var(--space-2); align-items: center; padding: 6px 0; border-bottom: 1px solid var(--rule); font-size: var(--text-xs); }
.ec-ch-sugs li.is-pinned { color: var(--ink-faint); }
.ec-ch-sugs time { font-family: var(--font-mono); color: var(--ink-soft); }
.ec-ch-sugs .ec-btn { min-height: 28px; padding: 2px 10px; font-size: var(--text-xs); }
.ec-ch-events li { display: grid; gap: var(--space-1); padding: var(--space-2) 0; border-bottom: 1px solid var(--rule); }
.ec-ch-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ec .ec-ch-row input { flex: 1 1 180px; width: auto; }
.ec .ec-ch-row .ec-ch-when { flex: 0 1 11.5em; font-family: var(--font-mono); font-size: var(--text-xs); }
.ec .ec-ch-row select { width: auto; }
.ec .ec-ch-events textarea { font-family: var(--font-sans); font-size: var(--text-sm); }
.ec [aria-invalid="true"] { border-color: var(--danger); }

/* People */
.ec-pm-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2) var(--space-3); }
.ec-pm-filters .ec-field { flex: 1 1 150px; margin: 0; }
.ec-pm-chart { margin: 0 0 var(--space-3); border-radius: var(--radius-lg); background: var(--paper-raised); box-shadow: 0 0 0 1px var(--rule); overflow: hidden; }
.ec-pm-svg { display: block; width: 100%; height: auto; }
.ec-pm-edge { stroke: var(--ink-faint); stroke-opacity: .45; }
.ec-pm-edge.is-bridge { stroke: var(--danger); stroke-dasharray: 6 3; stroke-opacity: .8; }
.ec-pm-edge.is-on { stroke: var(--accent); stroke-opacity: 1; }
.ec-pm-node { cursor: pointer; }
.ec-pm-node circle { fill: var(--accent); stroke: var(--paper-raised); stroke-width: 1.5; }
.ec-pm-node.is-cut circle { fill: var(--danger); }
.ec-pm-node.is-on circle { stroke: var(--ink); stroke-width: 3; }
.ec-pm-node:focus-visible { outline: none; }
.ec-pm-node:focus-visible circle { stroke: var(--focus, var(--accent)); stroke-width: 4; }
.ec-pm-node text { font: 600 var(--text-2xs) var(--font-sans); fill: var(--ink); }
.ec-table tr.is-on td { background: var(--accent-soft); }

/* Exhibits */
.ec-ex-list { grid-column: 1 / -1; max-height: 40vh; margin: 0; padding: 0; overflow: auto; list-style: none; }
.ec-ex-list li { display: grid; grid-template-columns: 3em minmax(0, 1fr) auto; gap: var(--space-2); align-items: center; padding: 4px 0; }
.ec-ex-list li b { font-family: var(--font-mono); }

/* The audit trail */
.ec-audit-state { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); font-size: var(--text-sm); overflow-wrap: anywhere; }
.ec-audit-state.is-ok { background: var(--good-soft); color: var(--good); }
.ec-audit-state.is-bad { background: var(--danger-soft); color: var(--danger); font-weight: 650; }
.ec-audit td:nth-child(5) { min-width: 260px; }
.ec-privlog td { min-width: 110px; }
.ec-privlog td:last-child { min-width: 220px; }
.ec-reviewer { margin-top: var(--space-4); }

.ec-caselist, .ec-list { list-style: none; margin: 0; padding: 0; }
.ec-caselist li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-3) 0; border-top: 1px solid var(--rule); }
.ec-caselist li:last-child { border-bottom: 1px solid var(--rule); }
.ec-caselist b { font-size: var(--text-md); }
.ec-caselist span { flex: 1; min-width: 12ch; color: var(--ink-faint); font-size: var(--text-xs); }
.ec-list li { display: flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: 2px 0; border-bottom: 1px solid var(--rule); }
.ec-list li:last-child { border-bottom: 0; }
.ec-list li > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-list .ec-n { font: var(--text-2xs) var(--font-mono); color: var(--ink-faint); }
.ec-list kbd, .ec-key, .ec-keylist kbd, .ec-qcbtns kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--paper); font: 600 var(--text-2xs) var(--font-mono); color: var(--ink-soft); }

/* Figures */
.ec-figures { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); margin: var(--space-4) 0 var(--space-5); }
.ec-fig { padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--paper-raised); box-shadow: 0 0 0 1px var(--rule); }
.ec-fig b { display: block; font: 650 var(--text-2xl)/1.1 var(--font-headline); font-variant-numeric: tabular-nums; }
.ec-fig span { display: block; margin-top: 2px; font-size: var(--text-xs); color: var(--ink-faint); }
.ec-meter { display: grid; grid-template-columns: minmax(90px, 1fr) 3fr auto; align-items: center; gap: var(--space-2); margin: var(--space-2) 0; font-size: var(--text-xs); }
.ec-meter .ec-bar { margin: 0; }
.ec-meter b { font-variant-numeric: tabular-nums; font-weight: 600; }

.ec-bar { position: relative; height: 8px; margin: var(--space-2) 0; overflow: hidden; border-radius: var(--radius-pill); background: var(--paper-inset); }
.ec-bar span { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: var(--radius-pill); background: var(--accent); transition: width var(--dur-3) var(--ease-standard); }
.ec-bar.is-busy span { width: 30%; animation: ec-busy var(--dur-sweep) var(--ease-standard) infinite; }
@keyframes ec-busy { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
:root[data-motion="none"] .ec-bar.is-busy span { animation: none; width: 100%; opacity: .5; }

.ec-table { width: 100%; border-collapse: collapse; font-size: var(--text-xs); }
.ec-table th, .ec-table td { padding: 6px var(--space-2); border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.ec-table th { position: sticky; top: 0; background: var(--paper-raised); color: var(--ink-faint); font-weight: 600; white-space: nowrap; }
.ec-table td.n, .ec-table th.n { text-align: right; font-variant-numeric: tabular-nums; }
.ec-table .ec-mono { white-space: nowrap; }
.ec-table tfoot td { font-weight: 650; border-top: 2px solid var(--rule-strong); }
.ec-terms td:first-child { font-family: var(--font-mono); overflow-wrap: anywhere; }
.ec-terms .ec-err { color: var(--danger); }
.ec-terms button { min-height: 32px; }

/* Load */
.ec-drop { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-6) var(--space-4); border: 2px dashed var(--rule-strong); border-radius: var(--radius-lg); background: var(--paper-raised); text-align: center; transition: border-color var(--dur-2) var(--ease-standard), background-color var(--dur-2) var(--ease-standard); }
.ec-drop.is-over { border-color: var(--accent); background: var(--accent-soft); }
.ec-drop svg { width: 34px; height: 34px; color: var(--ink-faint); }
.ec-drop p { margin: 0; font-weight: 600; }
.ec-drop-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.ec-loadopts { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-4) 0 0; }
.ec-loadopts .ec-field { min-width: 240px; }
.ec-chosen { margin: 0 0 var(--space-4); }
.ec-chosen p { margin: 0 0 var(--space-2); }
.ec-progress-panel p { margin: var(--space-1) 0; }
/* A production volume chosen: its check and its columns. */
.ec-recv > p { margin: 0 0 var(--space-2); line-height: 1.5; }
.ec-recv-probs { margin: 0 0 var(--space-3); padding: 0; list-style: none; font-size: var(--text-xs); }
.ec-recv-probs li { display: grid; grid-template-columns: minmax(0, 2fr) 3.5em minmax(0, 3fr); gap: var(--space-1) var(--space-3); padding: 6px 0; border-bottom: 1px solid var(--rule); }
.ec-recv-probs b { font-weight: 600; }
.ec-recv-probs .ec-n { text-align: right; font-variant-numeric: tabular-nums; }
.ec-recv-probs span:last-child { color: var(--ink-soft); overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .ec-recv-probs li { grid-template-columns: minmax(0, 1fr) auto; }
  .ec-recv-probs span:last-child { grid-column: 1 / -1; }
}
.ec-recv-cols { margin: 0 0 var(--space-3); }
.ec-recv-cols summary { min-height: 36px; display: flex; align-items: center; color: var(--accent-strong); font-weight: 600; cursor: pointer; }
.ec-recv-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 var(--space-3); }
.ec-recv-opts { align-items: flex-end; }
.ec-recv-opts .ec-field { flex: 1 1 260px; margin: 0; }
.ec-fails { max-height: 220px; overflow-y: auto; margin: var(--space-2) 0 0; padding-left: var(--space-5); font-size: var(--text-xs); color: var(--ink-soft); }

/* ---------------------------------------------------------------- Review */

.ec-review { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.ec-search { padding: var(--space-2) var(--space-3); background: var(--paper-raised); border-bottom: 1px solid var(--rule); }
.ec-searchrow { display: flex; gap: var(--space-2); }
.ec-searchrow input { flex: 1; font-family: var(--font-mono); }
.ec-qhelp { margin: var(--space-2) 0 0; padding: var(--space-3); border-radius: var(--radius-md); background: var(--paper-inset); font-size: var(--text-xs); }
.ec-qhelp[hidden] { display: none; }
.ec-qhelp dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2px var(--space-4); margin: 0; }
.ec-qhelp div { display: flex; gap: var(--space-2); }
.ec-qhelp dt { flex: none; }
.ec-qhelp dd { margin: 0; color: var(--ink-soft); }
.ec-filters { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-2); margin-top: var(--space-2); }
.ec-filters > label:not(.ec-check) { display: flex; flex-direction: column; gap: 2px; font-size: var(--text-2xs); color: var(--ink-faint); font-weight: 600; }
.ec-filters select, .ec-filters input[type="date"] { width: auto; min-width: 120px; max-width: 200px; min-height: 32px; padding: 4px 6px; font-size: var(--text-xs); }
.ec-saved { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin-top: var(--space-2); }
.ec-saved select { width: auto; min-width: 180px; max-width: 320px; min-height: 32px; padding: 4px 6px; font-size: var(--text-xs); }
.ec-saveform { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: var(--space-1); }
.ec-saveform input { width: 240px; max-width: 100%; min-height: 32px; padding: 4px 8px; font-size: var(--text-xs); }
.ec-qsaid { min-height: 1.4em; margin: var(--space-1) 0 0; font-size: var(--text-xs); color: var(--ink-faint); }
.ec-qsaid.is-bad { color: var(--danger); }

.ec-rv { display: grid; grid-template-columns: minmax(300px, 34%) minmax(0, 1fr) 300px; min-height: 0; }
.ec-rv-list { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; border-right: 1px solid var(--rule); background: var(--paper-raised); }
.ec-rv-listhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-2); padding: var(--space-1) var(--space-3); border-bottom: 1px solid var(--rule); font-size: var(--text-xs); color: var(--ink-faint); }
.ec-rv-listacts { display: inline-flex; gap: var(--space-1); }
.ec-bulk { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-1) var(--space-2); padding: var(--space-2) 0 var(--space-1); border-top: 1px solid var(--rule); }
.ec-bulk label { display: flex; flex-direction: column; gap: 2px; font-size: var(--text-2xs); font-weight: 600; color: var(--ink-faint); }
.ec-bulk select { min-width: 140px; min-height: 32px; padding: 4px 6px; font-size: var(--text-xs); }
.ec-bulk-said { flex: 1 1 100%; margin: 0; min-height: 1.4em; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.ec-vlist { position: relative; overflow-y: auto; min-height: 0; outline: none; }
.ec-vlist:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.ec-vlist-in { position: relative; }
.ec-row-doc { position: absolute; left: 0; right: 0; height: 60px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: var(--space-2); align-content: center; padding: 0 var(--space-3); border-bottom: 1px solid var(--rule); cursor: pointer; }
.ec-row-doc:hover { background: var(--paper-inset); }
.ec-row-doc[aria-selected="true"] { background: var(--accent-soft); }
.ec-row-doc.is-child { padding-left: calc(var(--space-3) + 14px); }
.ec-row-ico { grid-row: 1 / 3; display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--radius-sm); background: var(--paper-inset); color: var(--ink-soft); }
.ec-row-ico svg { width: 16px; height: 16px; }
.ec-row-top { display: flex; gap: var(--space-2); min-width: 0; font-size: var(--text-xs); color: var(--ink-faint); }
.ec-row-top b { color: var(--ink-soft); font: 600 var(--text-2xs) var(--font-mono); }
.ec-row-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ec-row-date { font-size: var(--text-2xs); color: var(--ink-faint); white-space: nowrap; }
.ec-row-tags { grid-column: 3; grid-row: 2; display: flex; gap: 3px; justify-content: flex-end; }
.ec-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-faint); }
.ec-dot[data-k="Responsive"] { background: var(--good); }
.ec-dot[data-k="Not responsive"] { background: var(--rule-strong); }
.ec-dot[data-k="Privileged"] { background: var(--warn); }
.ec-dot[data-k="Hot"] { background: var(--danger); }
.ec-dot[data-k="Confidential"] { background: var(--accent); }
.ec-flag { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: var(--radius-pill); background: var(--warn-soft); color: var(--warn); font-size: var(--text-2xs); font-weight: 600; white-space: nowrap; }
.ec-flag.is-dup { background: var(--paper-inset); color: var(--ink-faint); }

.ec-rv-doc { display: grid; grid-template-rows: auto auto minmax(0, 1fr); min-height: 0; min-width: 0; background: var(--paper); }
.ec-dochead { padding: var(--space-3) var(--space-4) var(--space-2); border-bottom: 1px solid var(--rule); background: var(--paper-raised); }
.ec-dochead h2 { margin: 0 0 2px; font-size: var(--text-lg); line-height: 1.3; overflow-wrap: anywhere; }
.ec-docid { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--ink-faint); }
.ec-docid b { font: 600 var(--text-xs) var(--font-mono); color: var(--ink-soft); }
.ec-meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px var(--space-3); margin: var(--space-2) 0 0; font-size: var(--text-xs); }
.ec-meta dt { color: var(--ink-faint); }
.ec-meta dd { margin: 0; overflow-wrap: anywhere; }
.ec-meta details { grid-column: 1 / -1; }
.ec-meta summary { cursor: pointer; color: var(--accent-strong); font-weight: 600; min-height: 28px; display: flex; align-items: center; }
.ec-doctools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: 6px var(--space-4); border-bottom: 1px solid var(--rule); background: var(--paper-raised); }
.ec-seg { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--rule); border-radius: var(--radius-pill); background: var(--paper-inset); }
.ec-seg button { min-height: 28px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink-soft); font-size: var(--text-xs); font-weight: 600; cursor: pointer; }
.ec-seg button[aria-pressed="true"] { background: var(--paper-raised); color: var(--ink); box-shadow: 0 0 0 1px var(--rule); }
.ec-hitnav { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--ink-soft); }
.ec-hitnav button { min-width: 32px; min-height: 28px; padding: 0 var(--space-2); border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper-raised); cursor: pointer; }
.ec-docbody { position: relative; overflow: auto; min-height: 0; padding: var(--space-4); }
.ec-text { max-width: 90ch; margin: 0; font: var(--text-sm)/1.6 var(--font-sans); white-space: pre-wrap; overflow-wrap: anywhere; }
.ec-text mark { padding: 0 1px; border-radius: var(--radius-sm); background: var(--warn-soft); color: inherit; box-shadow: 0 0 0 1px var(--warn); }
.ec-text mark.is-now { background: var(--accent); color: var(--on-accent); box-shadow: none; }
/* Redactions: a box on a page, or a passage of the text. Shown dark but
   see-through here, so the reviewer can check what they cover; a
   production paints them solid. */
.ec-redtools { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ec-redtools .ec-btn { min-height: 28px; padding: 2px 10px; font-size: var(--text-xs); }
.ec-redtools .ec-btn[aria-pressed="true"] { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }
.ec-why { min-height: 28px; max-width: 150px; padding: 0 var(--space-2); border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper-raised); color: var(--ink); font-size: var(--text-xs); }
.ec-text .ec-red { border-radius: var(--radius-sm); background: rgba(0, 0, 0, .78); color: var(--paper-raised); box-shadow: 0 0 0 1px var(--danger); }
.ec-pagewrap { position: relative; max-width: 100%; line-height: 0; }
.ec-redlayer { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.ec-redbox { position: absolute; display: flex; align-items: flex-start; justify-content: flex-start; min-width: 4px; min-height: 4px; padding: 0; overflow: hidden; border: 1px solid var(--danger); border-radius: 0; background: rgba(0, 0, 0, .6); color: var(--paper-raised); font: 600 var(--text-2xs)/1.2 var(--font-sans); cursor: default; pointer-events: auto; }
.ec-redbox span { padding: 1px 3px; white-space: nowrap; }
.ec-pagewrap.is-redacting { cursor: crosshair; touch-action: none; user-select: none; }
.ec-pagewrap.is-redacting .ec-redbox { cursor: pointer; }
.ec-pagewrap.is-redacting .ec-redbox:hover { background: rgba(0, 0, 0, .35); }
.ec-redghost { position: absolute; z-index: 2; border: 1px dashed var(--danger); background: rgba(0, 0, 0, .3); pointer-events: none; }
.ec-redlist li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.ec-redlist li span { color: var(--ink-soft); }
.ec-native { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.ec-native canvas, .ec-native img { max-width: 100%; height: auto; background: var(--paper-raised); box-shadow: 0 0 0 1px var(--rule), 0 6px 18px rgba(0, 0, 0, .08); }
.ec-note-box { margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--paper-inset); font-size: var(--text-xs); color: var(--ink-soft); }
.ec-note-box.is-warn { background: var(--warn-soft); color: var(--ink); }

.ec-rv-code { overflow-y: auto; min-height: 0; padding: var(--space-3); border-left: 1px solid var(--rule); background: var(--paper-raised); }
.ec-rv-code h3 { display: flex; align-items: center; justify-content: space-between; margin: var(--space-3) 0 var(--space-2); font-size: var(--text-2xs); font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.ec-rv-code h3:first-child { margin-top: 0; }
.ec-taggroup { display: flex; align-items: baseline; justify-content: space-between; margin: var(--space-3) 0 4px; font-size: var(--text-xs); font-weight: 650; color: var(--ink-soft); }
.ec-taggroup span { font: 500 var(--text-2xs) var(--font-mono); letter-spacing: .04em; color: var(--ink-faint); }
.ec-tagbtn.is-one .ec-tick { border-radius: var(--radius-pill); }
.ec-tagsets { margin: var(--space-3) 0 0; }
.ec-tagsets summary { min-height: 36px; display: flex; align-items: center; color: var(--accent-strong); font-size: var(--text-xs); font-weight: 600; cursor: pointer; }
.ec-tagsets .ec-list input:not([type="checkbox"]) { min-height: 32px; }
.ec-inline .ec-check input, .ec-list .ec-check input { flex: none; }
/* The tags on the Overview in columns: name, group, count, Remove. */
#ecTags li { display: grid; grid-template-columns: minmax(0, 1fr) auto 7.5em 4.2em; }
#ecTags li > span:first-child { grid-column: 1; }
#ecTags li > select { grid-column: 2; }
#ecTags li > .ec-n { grid-column: 3; text-align: right; }
#ecTags li > button { grid-column: 4; justify-self: end; }
@media (max-width: 760px) {
  #ecTags li { grid-template-columns: minmax(0, 1fr) auto; }
  #ecTags li > .ec-n { grid-column: 1; grid-row: 2; text-align: left; }
  #ecTags li > button { grid-column: 2; grid-row: 2; }
  .ec-taggroup-sel { min-width: 9.5em; max-width: 60vw; }
  #ecGroups li { flex-wrap: wrap; }
  #ecGroups li > span:first-child { flex: 1 1 100%; }
  #ecGroups li > .ec-n { margin-left: auto; }
}
.ec-taggroup-sel { width: auto !important; max-width: 46%; min-height: 32px !important; padding: 2px var(--space-1) !important; font-size: var(--text-xs) !important; }
.ec-tagset-row .ec-field-inline { flex: 1 1 220px; }
.ec-tagset-row select { flex: 1; min-width: 0; }
.ec-tagbtns { display: flex; flex-direction: column; gap: 4px; }
.ec-tagbtn { display: flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: 4px var(--space-2); border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--paper); text-align: left; cursor: pointer; transition: background-color var(--dur-1) var(--ease-standard), border-color var(--dur-1) var(--ease-standard); }
.ec-tagbtn:hover { border-color: var(--rule-strong); }
.ec-tagbtn[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.ec-tagbtn .ec-tick { display: grid; place-items: center; width: 18px; height: 18px; border: 1.5px solid var(--rule-strong); border-radius: var(--radius-sm); color: transparent; }
.ec-tagbtn[aria-pressed="true"] .ec-tick { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.ec-tick svg { width: 12px; height: 12px; }
.ec-tagbtn span:nth-child(2) { flex: 1; font-weight: 600; }
.ec-qcbtns .ec-tagbtn span { flex: 1; font-weight: 600; }
.ec-qc .is-closed td { color: var(--ink-faint); }
.ec-qc-acts { white-space: nowrap; }
.ec-qc-lead { max-width: var(--measure); }
.ec-keylist { margin: 0; }
.ec-keylist div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: var(--space-2); padding: 6px 0; border-bottom: 1px solid var(--rule); }
.ec-keylist dt, .ec-keylist dd { margin: 0; }
.ec-keylist dd { color: var(--ink-soft); }
.ec-codenote { min-height: 96px; }
.ec-coded { margin: var(--space-1) 0 0; font-size: var(--text-2xs); color: var(--ink-faint); }
.ec-navbtns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin: var(--space-3) 0 0; }
.ec-navbtns .ec-btn[data-nav="uncoded"] { grid-column: 1 / -1; }
.ec-rel { list-style: none; margin: 0; padding: 0; font-size: var(--text-xs); }
.ec-rel li button { display: flex; align-items: baseline; gap: var(--space-2); width: 100%; min-height: 32px; padding: 3px var(--space-2); border: 0; border-radius: var(--radius-sm); background: transparent; text-align: left; cursor: pointer; }
.ec-rel li button:hover { background: var(--paper-inset); }
.ec-rel li button[aria-current="true"] { background: var(--accent-soft); }
.ec-rel b { flex: none; font: 600 var(--text-2xs) var(--font-mono); color: var(--ink-soft); }
.ec-rel span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-found { margin: 0; padding: 0; list-style: none; font-size: var(--text-xs); }
.ec-found li { padding: 2px 0; overflow-wrap: anywhere; }
.ec-found li span { color: var(--ink-faint); }
.ec-keys { margin: var(--space-3) 0 0; font-size: var(--text-2xs); color: var(--ink-faint); line-height: 1.6; }
.ec-back { display: none; }

/* The site's privacy badge (privacyproof.js) sits in the bottom right
   corner, small, as in Foundry, over the foot of the coding panel, which
   leaves room for it, rather than over the list. */
body.ec-app #ppBadge { left: auto; right: var(--space-2); bottom: var(--space-1); min-height: 24px; padding: 1px var(--space-2); font-size: var(--text-2xs); box-shadow: none; }
/* The badge's own band at the foot of the right-hand pane, outside what
   scrolls: a border does not scroll with the content above it, so the
   coding panel's last lines (its dates, its addresses) are never under
   the badge, however far it is scrolled. */
.ec-rv-code { padding-bottom: var(--space-4); border-bottom: 34px solid var(--paper-raised); box-shadow: inset 0 -1px 0 var(--rule); }

/* Merge */
.ec-conflict td { vertical-align: middle; }
.ec-conflict label { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; margin-right: var(--space-2); }

/* ---------------------------------------------------------------- narrow */

@media (max-width: 1180px) {
  .ec-rv { grid-template-columns: minmax(260px, 36%) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .ec-rv-code { grid-column: 2; grid-row: 1; display: none; }
  .ec-rv.is-coding .ec-rv-doc { display: none; }
  .ec-rv.is-coding .ec-rv-code { display: block; }
  .ec-coding-toggle { display: inline-flex !important; }
  .ec-rv-doc { border-bottom: 34px solid var(--paper); }
}
.ec-coding-toggle { display: none !important; }
.ec-filters-btn { display: none; }

@media (max-width: 760px) {
  .ec-ch-sugs li { grid-template-columns: minmax(0, 1fr) auto; }
  .ec-ch-sugs time { grid-column: 1 / -1; }
  body.ec-app { height: auto; overflow: auto; }
  .ec { height: auto; min-height: 100dvh; }
  .ec-top { flex-wrap: wrap; row-gap: var(--space-1); }
  .ec-tabs { order: 5; flex: 1 1 100%; }
  .ec-state { order: 6; flex: none; max-width: 100%; }
  .ec-main { overflow: visible; }
  .ec-page { height: auto; overflow: visible; padding: var(--space-4) var(--space-4) var(--space-7); }
  .ec-cols, .ec-cols-terms { grid-template-columns: minmax(0, 1fr); }
  /* The page scrolls here rather than the panes: the list keeps a
     height of its own, for drawing only the rows on screen, and the
     document is as long as it is. The filters fold behind a button. */
  .ec-review { height: auto; display: block; }
  .ec-filters-btn { display: inline-flex; flex: 1; }
  .ec-search:not(.is-filtering) .ec-filters { display: none; }
  .ec-rv-list { height: calc(100dvh - 190px); min-height: 320px; }
  .ec-rv.is-reading .ec-rv-doc { display: block; }
  .ec-docbody { overflow: visible; }
  .ec-doctools .ec-grow { display: none; }
  .ec-filters > label:not(.ec-check) { flex: 1 1 40%; }
  .ec-filters select, .ec-filters input[type="date"] { max-width: none; width: 100%; }
  .ec-rv { grid-template-columns: minmax(0, 1fr); }
  .ec-rv-list, .ec-rv-doc { grid-column: 1; grid-row: 1; }
  .ec-rv-doc { display: none; }
  .ec-rv.is-reading .ec-rv-list { display: none; }
  .ec-rv.is-coding .ec-rv-doc, .ec-rv.is-coding .ec-rv-list { display: none; }
  .ec-rv-code { grid-column: 1; border-bottom: 0; box-shadow: none; }
  .ec-rv-doc { border-bottom: 0; }
  .ec-back { display: inline-flex; }
  .ec-searchrow { flex-wrap: wrap; }
  .ec-searchrow input { flex: 1 1 100%; }
  .ec-help-btn, .ec-rel-btn { flex: 1; }
  .ec-saved label { flex: 1 1 100%; }
  .ec-saved select { width: 100%; max-width: none; }
  .ec-saveform { flex: 1 1 100%; flex-wrap: wrap; }
  .ec-saveform input { flex: 1 1 100%; width: 100%; }
}

/* Near-duplicates: the threshold, and a document shown against its pivot. */
.ec-near-row { align-items: end; }
.ec-near-t { flex-direction: row; align-items: center; gap: var(--space-2); }
.ec-near-t input[type="range"] { width: 180px; max-width: 50vw; min-height: 32px; padding: 0; accent-color: var(--accent); }
.ec-near-t output { min-width: 3.5em; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
.ec-flag.is-near { background: var(--accent-soft); color: var(--accent); }
.ec-text ins { text-decoration: none; border-radius: var(--radius-sm); background: var(--good-soft); color: inherit; box-shadow: 0 0 0 1px var(--good, currentColor); }
.ec-text del { border-radius: var(--radius-sm); background: var(--danger-soft); color: inherit; text-decoration: line-through; text-decoration-color: var(--danger); }
.ec-cmp-key { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin: 0 0 var(--space-3); font-size: var(--text-xs); color: var(--ink-soft); }
.ec-cmp-key ins, .ec-cmp-key del { padding: 0 4px; }
.ec-rel .ec-sim { flex: none; margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ink-faint); }
/* A thread's messages: the subject on one line, and whether each is
   inclusive or held in a later message as a mark, with its key above. */
.ec-glyph { flex: none; display: inline-block; width: 8px; height: 8px; border: 1.5px solid var(--accent); border-radius: 50%; }
.ec-glyph.is-incl { background: var(--accent); }
.ec-glyph.is-held { border-color: var(--ink-faint); }
.ec-rel .ec-glyph { align-self: center; margin-left: auto; }
/* A thread's subject may take two lines rather than be cut off. */
.ec-rel li button.ec-thr { flex-wrap: wrap; row-gap: 1px; padding-top: 4px; padding-bottom: 4px; }
.ec-rel span.ec-rel-subj { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; flex: 1 1 100%; white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
.ec-navbtns .ec-like { grid-column: 1 / -1; }
.ec-rel-key { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: -2px 0 var(--space-1); font-size: var(--text-2xs); color: var(--ink-faint); }
.ec-rel-key span { display: inline-flex; align-items: center; gap: 5px; }

/* A finger needs more than a pointer. */
@media (pointer: coarse) {
  .ec-home, .ec-case, .ec-tabs button, .ec-btn, .ec-link, .ec-seg button, .ec-hitnav button, .ec-tagbtn, .ec-rel li button, .ec-check,
  .ec-menu button, .ec-meta summary, .ec input:not([type="checkbox"]):not([type="file"]), .ec select, .ec-filters select, .ec-filters input[type="date"],
  .ec-list li, .ec-conflict label, .ec-terms button, .ec-saved select, .ec-saveform input, .ec-bulk select, .ec-redtools .ec-btn, .ec-why, .ec-ch-sugs .ec-btn, .ec-near-t input[type="range"], .ec-recv-cols summary, .ec-tagsets summary, .ec-about summary { min-height: 44px; }
  .ec-taggroup-sel, .ec-tagsets .ec-list input:not([type="checkbox"]) { min-height: 44px !important; }
  .ec-home { width: 44px; }
  .ec-hitnav button { min-width: 44px; }
  .ec-check input { width: 22px; height: 22px; }
  .ec-row-doc { height: 64px; }
  body.ec-app #ppBadge { min-height: 44px; }
}
.ec-loadopts .ec-custpick { align-self: flex-end; min-height: 44px; }

/* Help, at the right of the bar, as every application has: the Help panel. */
.ec-help { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-md); background: none; color: var(--ink-soft); cursor: pointer; }
.ec-help:hover { background: var(--paper-inset); color: var(--ink); }
.ec-help svg { width: 20px; height: 20px; }

/* The pace of the review: documents coded each day of the last fortnight. */
.ec-pace-h { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-xs); font-weight: 650; color: var(--ink-soft); }
.ec-pace { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 2px; align-items: end; height: 72px; padding: 0 0 1px; border-bottom: 1px solid var(--rule-strong); }
.ec-pace-col { display: flex; align-items: flex-end; height: 100%; }
.ec-pace-bar { width: 100%; border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: var(--accent); }
.ec-pace-axis { display: flex; justify-content: space-between; margin: 4px 0 0; font: var(--text-2xs) var(--font-mono); color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.ec-orgs .ec-org-name { min-width: 12em; min-height: 32px; }

.ec-custody { margin: var(--space-3) 0 0; padding: var(--space-3) 0 0; border-top: 1px solid var(--rule); }
.ec-custody h3 { margin: 0 0 var(--space-1); font-size: var(--text-md); }
#ecOverlay { margin-top: var(--space-3); }
.ec-custody #ecHandForm { margin-top: var(--space-3); }
.ec-plug-list li { flex-wrap: wrap; }
.ec-plug-list .ec-plug-prod { width: auto; max-width: 100%; }
.ec-plug-out { margin: var(--space-3) 0 0; }
.ec-plug-out h4 { margin: 0 0 var(--space-1); font-size: var(--text-sm); }
#ecPlugins { margin-top: var(--space-3); }

/* ---------------------------------------------------------------- analytics */

/* A small fixed-width label: the state of a part of the screen. */
.ec-chip { display: inline-flex; align-items: center; min-height: 22px; padding: 0 var(--space-2); border: 1px solid var(--rule); border-radius: var(--radius-sm); font: 600 var(--text-2xs)/1 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }
.ec-chip.is-on { border-color: var(--accent); color: var(--accent-strong); }
.ec-an-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); }
.ec-an-head h3 { margin: 0; }
.ec-an-opts { row-gap: var(--space-1); }
.ec-an-said { min-height: 1.5em; }
.ec-an-h4 { margin: var(--space-4) 0 var(--space-1); font-size: var(--text-2xs); font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.ec-an-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.ec-an-fig { margin: 0; min-width: 0; }
.ec-an-metrics th { position: static; width: 34%; color: var(--ink-soft); font-weight: 600; white-space: normal; }
.ec-an-metrics td.n { width: 18%; font-weight: 650; }
.ec-an-metrics td.ec-hint { margin: 0; }
.ec-an-words { margin: var(--space-2) 0 0; font-size: var(--text-xs); line-height: 2; }
.ec-gain, .ec-clmap { display: block; width: 100%; height: auto; max-width: 360px; }
.ec-gain-axis { fill: none; stroke: var(--rule-strong); stroke-width: 1.5; }
.ec-gain-even { fill: none; stroke: var(--ink-faint); stroke-width: 1.5; stroke-dasharray: 3 4; }
.ec-gain-line { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linejoin: round; }
.ec-gain-t { fill: var(--ink-faint); font: var(--text-2xs) var(--font-mono); font-variant-numeric: tabular-nums; }
.ec-stop-fig { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-1); }
.ec-stop-fig b { font: 650 var(--text-2xl)/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.ec-stop-fig span { font-size: var(--text-xs); color: var(--ink-soft); }
.ec-clnode { cursor: pointer; }
.ec-clnode circle { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.5; }
.ec-clnode text { fill: var(--ink); font: 650 var(--text-2xs) var(--font-mono); pointer-events: none; }
.ec-clnode .ec-clword { fill: var(--ink-soft); font: var(--text-2xs) var(--font-sans); font-weight: 500; }
.ec-clnode:hover circle, .ec-clnode:focus-visible circle { fill: var(--accent); }
.ec-clnode:hover > text:not(.ec-clword), .ec-clnode:focus-visible > text:not(.ec-clword) { fill: var(--on-accent); }
.ec-clnode:focus { outline: none; }
.ec-cat-tags { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); }
.ec-cat { margin: var(--space-3) 0 0; padding: var(--space-3) 0 0; border-top: 1px solid var(--rule); }
.ec-cat-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ec-cat-head h4 { flex: 1 1 auto; margin: 0; font-size: var(--text-sm); }
.ec-cat-head h4 span { font: var(--text-2xs) var(--font-mono); color: var(--ink-faint); }
.ec-cat-list { margin: var(--space-2) 0 0; padding: 0; list-style: none; font-size: var(--text-xs); }
.ec-cat-list li { display: flex; align-items: center; gap: var(--space-2); min-height: 40px; border-bottom: 1px solid var(--rule); }
.ec-cat-list li:last-child { border-bottom: 0; }
.ec-cat-list .ec-cat-doc { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; font-weight: 500; color: var(--ink); }
.ec-cat-list .ec-cat-doc b { font: 600 var(--text-2xs) var(--font-mono); color: var(--ink-soft); }
.ec-cat-list .ec-sim { flex: none; min-width: 3.2em; text-align: right; font: var(--text-2xs) var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-faint); }
.ec-cat-list .ec-btn { min-height: 30px; padding: 2px 10px; font-size: var(--text-xs); }
.ec-flag.is-meta { background: var(--paper-inset); color: var(--ink-soft); }
.ec-flag.is-score { background: var(--paper-inset); color: var(--ink-soft); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Highlighting: each set's colour, from the theme's own. */
mark.ec-hl { padding: 0 1px; border-radius: var(--radius-sm); color: inherit; background: var(--accent-soft); box-shadow: inset 0 -2px 0 var(--accent); }
mark.ec-hl[data-c="2"] { background: var(--good-soft); box-shadow: inset 0 -2px 0 var(--good, var(--accent)); }
mark.ec-hl[data-c="3"] { background: var(--danger-soft); box-shadow: inset 0 -2px 0 var(--danger); }
mark.ec-hl[data-c="4"] { background: var(--paper-inset); box-shadow: inset 0 -2px 0 var(--rule-strong); }
.ec-hl-legend { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-3); font-size: var(--text-2xs); }
.ec-hl-list li { flex-wrap: wrap; }
.ec-hl-list .ec-check { flex: none; }
.ec-hl-terms { flex: 1 1 12em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--text-2xs) var(--font-mono); color: var(--ink-soft); }
.ec-hl-form { display: grid; grid-template-columns: minmax(0, 1fr) 9em minmax(0, 2fr) auto; gap: 0 var(--space-3); align-items: end; margin: var(--space-3) 0 0; }
.ec-hl-form .ec-btn { margin: 0 0 var(--space-3); }

/* Related words, under the search box. */
.ec-related { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin: var(--space-2) 0 0; font-size: var(--text-xs); }
.ec-related[hidden] { display: none; }
.ec-related .ec-hint { margin: 0 var(--space-1) 0 0; }
.ec-relword { min-height: 30px; padding: 2px var(--space-2); border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper-raised); color: var(--ink); font: var(--text-xs) var(--font-mono); cursor: pointer; }
.ec-relword:hover:not(:disabled) { border-color: var(--accent); }
.ec-relword:disabled { opacity: .55; cursor: default; }
.ec-relword:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* A locked file: the password asked for where the text would be. */
.ec-unlock p { margin: 0 0 var(--space-2); }
.ec-unlock .ec-row { margin: 0 0 var(--space-1); }
.ec-unlock input[type="password"] { min-width: 14em; min-height: 36px; }
.ec-unlock .ec-hint { margin: 0; }

@media (max-width: 760px) {
  .ec-an-cols { grid-template-columns: minmax(0, 1fr); }
  .ec-hl-form { grid-template-columns: minmax(0, 1fr); }
  .ec-unlock input[type="password"] { min-width: 0; width: 100%; }
  .ec-unlock .ec-field-inline { flex: 1 1 100%; }
}
@media (pointer: coarse) {
  .ec-relword, .ec-cat-list .ec-btn { min-height: 44px; }
}