/* Theme tokens. Light is the default; dark follows the system preference unless the
   user forces a theme with the toggle (stored in localStorage, applied as data-theme). */
:root {
  color-scheme: light;
  --bg:#f6f7f9; --card:#fff; --ink:#1b1f24; --muted:#5b6470; --line:#d9dee5;
  --accent:#1d4f91; --accent-ink:#fff; --link:#1d4f91;
  --brand:#1d4f91; --brand-ink:#fff; --brand-dot:#f2c46d;
  --chip:#eef1f5; --thead:#f0f3f7; --hover:#fafbfd; --input-bg:#fff; --code-bg:#eef1f5;
  --warn-bg:#fff4e0; --warn-ink:#7a4b00; --warn-line:#f1d6a5;
  --ok-bg:#e3f4e8; --ok-ink:#1d5b2f;
  --danger-bg:#fde2e1; --danger-ink:#8a1c1c;
  --special-bg:#f7e3f0; --special-ink:#7a1e5c;
  --grade-bg:#e6eef7; --grade-ink:#1d4f91;
  --notice-bg:#e9f1fa; --notice-line:#c9dcef;
  --shadow: none;
  --g-r4:#c9646b; --g-r3:#d08a5a; --g-r2:#b8a75f; --g-r1:#8e97a3; --g-r0:#6c7480;
  --c-good:#8fae6a; --c-mid:#d3a35c; --c-low:#c9646b; --c-warn:#c9a24a; --c-bad:#b85b5b; --c-none:#9aa3ad;
  --c-1:#5d8fc7; --c-2:#7e9e6a; --c-3:#b98a5e; --c-4:#8f7cc1; --c-5:#c37a9d; --c-6:#6f9ea8;
  --bar-ink:#fff; --bar-track:#e3e7ec;
  --focus-ring: rgba(29,79,145,.22); --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%235b6470' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:#12161b; --card:#1a1f26; --ink:#e6e9ee; --muted:#9aa4b1; --line:#2c343e;
  --accent:#78a9e8; --accent-ink:#0b1420; --link:#8fbcf2;
  --brand:#2a63ad; --brand-ink:#f4f7fb; --brand-dot:#f2c46d;
  --chip:#262d37; --thead:#20272f; --hover:#1f252d; --input-bg:#12161b; --code-bg:#262d37;
  --warn-bg:#3a2b10; --warn-ink:#f2c46d; --warn-line:#5a4318;
  --ok-bg:#15301f; --ok-ink:#8fd3a5;
  --danger-bg:#3c1a1a; --danger-ink:#f0a1a1;
  --special-bg:#3a1a30; --special-ink:#e8a4d2;
  --grade-bg:#1c2b3d; --grade-ink:#8fc1f0;
  --notice-bg:#172433; --notice-line:#264260;
  --g-r4:#d17a80; --g-r3:#d9945f; --g-r2:#b6a56a; --g-r1:#8d97a4; --g-r0:#5d6572;
  --c-good:#8fb56d; --c-mid:#d7a95d; --c-low:#d17a80; --c-warn:#cfae56; --c-bad:#c46a6a; --c-none:#586170;
  --c-1:#6b9bd1; --c-2:#8aad74; --c-3:#c29466; --c-4:#9b89cf; --c-5:#cb86a8; --c-6:#7aaab3;
  --bar-ink:#f4f6f8; --bar-track:#252c35;
  --focus-ring: rgba(120,169,232,.30); --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%239aa4b1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:#12161b; --card:#1a1f26; --ink:#e6e9ee; --muted:#9aa4b1; --line:#2c343e;
    --accent:#78a9e8; --accent-ink:#0b1420; --link:#8fbcf2;
    --brand:#2a63ad; --brand-ink:#f4f7fb; --brand-dot:#f2c46d;
    --chip:#262d37; --thead:#20272f; --hover:#1f252d; --input-bg:#12161b; --code-bg:#262d37;
    --warn-bg:#3a2b10; --warn-ink:#f2c46d; --warn-line:#5a4318;
    --ok-bg:#15301f; --ok-ink:#8fd3a5;
    --danger-bg:#3c1a1a; --danger-ink:#f0a1a1;
    --special-bg:#3a1a30; --special-ink:#e8a4d2;
    --grade-bg:#1c2b3d; --grade-ink:#8fc1f0;
    --notice-bg:#172433; --notice-line:#264260;
    --g-r4:#d17a80; --g-r3:#d9945f; --g-r2:#b6a56a; --g-r1:#8d97a4; --g-r0:#5d6572;
    --c-good:#8fb56d; --c-mid:#d7a95d; --c-low:#d17a80; --c-warn:#cfae56; --c-bad:#c46a6a; --c-none:#586170;
    --c-1:#6b9bd1; --c-2:#8aad74; --c-3:#c29466; --c-4:#9b89cf; --c-5:#cb86a8; --c-6:#7aaab3;
    --bar-ink:#f4f6f8; --bar-track:#252c35;
  --focus-ring: rgba(120,169,232,.30); --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%239aa4b1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin:0; font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color:var(--ink); background:var(--bg); }
a { color: var(--link); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.small { font-size: 12px; } .muted { color: var(--muted); } .nowrap { white-space: nowrap; }
.site-header { background:var(--card); border-bottom:1px solid var(--line); }
.nav { display:flex; gap:16px; align-items:center; padding:10px 20px; max-width:1600px; margin:0 auto; flex-wrap:wrap; }
.brand { display:inline-flex; align-items:center; gap:9px; font-weight:700; text-decoration:none; color:var(--ink); letter-spacing:-.01em; margin-right:6px; }
.brand-mark { flex:none; }
.brand-word { font-size:17px; }
.brand-dot { color: var(--brand-dot); font-weight:900; }
.login-brand { display:flex; justify-content:center; margin: 6px 0 4px; }
.login-brand .brand-word { font-size: 26px; }
.tagline { text-align:center; color: var(--muted); margin: 0 0 18px; font-style: italic; }
.footer-brand { color: var(--ink); }
.nav .case-switch { font-size:12px; color: var(--muted); display:inline-flex; gap:6px; align-items:center; }
.nav .case-switch .dropdown { width: 230px; font-size: 12px; }
.nav .case-switch .dropdown > summary { min-height: 30px; padding: 4px 26px 4px 8px; font-size: 12px; border-radius: 6px; background-position: right 8px center; background-size: 10px; }
.nav .case-switch .dropdown-panel { min-width: 280px; }
.spacer { flex:1; }
.inline { display:inline; }
.linklike { background:none; border:0; color:var(--link); cursor:pointer; padding:0; font:inherit; text-decoration:underline; }
/* Navbar buttons */
.nav { gap: 8px; padding: 8px 20px; }
.nav-group { display:inline-flex; align-items:center; gap:4px; }
.nav-btn { display:inline-flex; align-items:center; gap:7px; padding:6px 10px; border-radius:8px; border:1px solid transparent; background:transparent; color:var(--ink); text-decoration:none; font:inherit; font-size:13px; line-height:1; cursor:pointer; white-space:nowrap; }
.nav-btn:hover { background: var(--chip); }
.nav-btn.active { background: var(--grade-bg); color: var(--grade-ink); border-color: transparent; }
.nav-btn.icon-only { padding:6px; }
/* Icons are stroke drawings and carry no size of their own: without this they fill their box
   and paint solid black wherever they are used outside the navbar. */
.icon { width:16px; height:16px; flex:none; vertical-align:-3px; stroke: currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.nav-btn .icon { width:17px; height:17px; flex:none; stroke: currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.nav-user { margin-left: 4px; padding-left: 10px; border-left: 1px solid var(--line); }
.nav-user-name { color: var(--muted); font-size:13px; margin-right:4px; max-width: 180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.case-switch .icon { width:16px; height:16px; stroke: var(--muted); fill:none; stroke-width:1.8; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.theme-toggle .theme-sun, .theme-toggle .theme-moon, .theme-toggle .theme-auto { display:none; }
.theme-toggle[data-mode="light"] .theme-sun, .theme-toggle[data-mode="dark"] .theme-moon, .theme-toggle[data-mode="auto"] .theme-auto, .theme-toggle:not([data-mode]) .theme-auto { display:inline; }
/* Seven entries plus the case switcher fit one row on a laptop: the switcher truncates long
   case titles and the user name gives way first. */
@media (max-width: 1400px) { .nav-user-name { display:none; } }
@media (max-width: 1240px) { .nav-label { display:none; } .nav-btn { padding:6px 8px; } }
@media (max-width: 900px) { .nav-label { display:none; } .nav-btn { padding:6px 8px; } .nav-user-name { display:none; } }
.main { max-width:1600px; margin:0 auto; padding:16px 20px 40px; }
/* Vertical rhythm for whatever a page puts at its top level: cards, tables, a two-column block.
   Margins collapse here, so a heading or paragraph that already carries more keeps it, and the
   containers that space their own children (.stack, .two-col, .charts, .help-layout) are unaffected. */
.main > * + * { margin-top:12px; }
.site-footer { max-width:1600px; margin:0 auto; padding:16px 20px 30px; color:var(--muted); font-size:12px; border-top:1px solid var(--line); }
h1 { font-size: 22px; margin: 8px 0 12px; } h2 { font-size:18px; margin:0 0 10px; } h3 { font-size:14px; margin:16px 0 6px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
h3 small { text-transform:none; letter-spacing:0; font-weight:normal; }
.card { background:var(--card); border:1px solid var(--line); border-radius:6px; padding:14px 16px; }
.narrow { max-width: 480px; margin: 40px auto; }
.stack { display:flex; flex-direction:column; gap:12px; }
.stack label { display:flex; flex-direction:column; gap:4px; }
/* Form controls: one quiet, consistent look everywhere. */
input[type=text], input[type=password], input[type=date], input[type=number], input[type=email], input[type=search], input[type=url], select, textarea {
  font: inherit; font-size: 14px; line-height: 1.3; color: var(--ink); background: var(--input-bg);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; min-height: 38px; width: 100%; max-width: 100%;
  transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}
textarea { min-height: 84px; line-height: 1.45; resize: vertical; }
select { appearance: none; -webkit-appearance: none; padding-right: 30px; cursor: pointer;
  background-image: var(--select-arrow); background-repeat: no-repeat; background-position: right 10px center; background-size: 12px; }
select[multiple] { background-image: none; padding-right: 10px; }
:is(input, select, textarea):hover { border-color: var(--muted); }
:is(input, select, textarea):focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
:is(input, select, textarea):disabled { opacity: .6; cursor: not-allowed; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .75; }
/* A text box with a control attached to its right edge (the Topic bar and its match level). */
.input-group { display: flex; align-items: stretch; width: 100%; }
.input-group > input { flex: 1 1 auto; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > :focus-visible { position: relative; z-index: 1; }
.btn { display:inline-block; padding:8px 14px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--ink); text-decoration:none; font:inherit; font-size:13px; line-height:1.3; cursor:pointer; transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease; }
.btn:hover { border-color: var(--muted); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.btn.primary { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.filters { margin-bottom: 12px; }
.filter-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap:8px 12px; }
.filter-grid label { display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--muted); }
.filter-grid label small { color: var(--muted); font-size: 11px; }
.filter-grid .field { display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--muted); }
.filter-grid .field > label { font-size:12px; color:var(--muted); }
.filter-grid .field small { color: var(--muted); font-size: 11px; }
.filter-grid .wide { grid-column: span 3; }
.actions { display:flex; gap:8px; align-items:center; margin-top:10px; flex-wrap:wrap; }
.result-count { color: var(--muted); margin: 6px 0; }
.result-count code { background:var(--code-bg); padding:1px 4px; border-radius:3px; }
code { background: var(--code-bg); padding:1px 4px; border-radius:3px; }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:6px; background:var(--card); }
/* A sticky header only sticks inside its nearest scrolling ancestor. Wherever the table is shown as
   a table (phones stack it instead), the wrapper stops being a scroll container so the header sticks
   to the viewport; on mid-sized screens the columns squeeze to fit rather than scroll sideways. */
@media (min-width: 1080px) { .table-wrap:not(.scroll-x) { overflow: visible; } }
table.register { border-collapse: separate; border-spacing: 0; width:100%; min-width: 1100px; }
/* From a laptop up the register squeezes to fit the viewport rather than overflow it, so the last
   column (Heads) is never cut off: shorter minimum widths, tighter padding, and dates and headers
   allowed to wrap. Narrower than that, the wrapper scrolls sideways (and phones stack the rows). */
@media (min-width: 1080px) {
  table.register { min-width: 0; }
  table.register .desc-col { min-width: 190px; max-width: none; } table.register .title-col { min-width: 115px; }
  table.register th, table.register td { padding: 6px 6px; }
  table.register td.nowrap, table.register thead th a { white-space: normal; }
  table.register td.nowrap .badge { white-space: nowrap; }
}
@media (min-width: 1400px) {
  table.register .desc-col { min-width: 260px; } table.register .title-col { min-width: 140px; }
  table.register th, table.register td { padding: 8px 8px; }
}
table.register th, table.register td { text-align:left; vertical-align:top; padding:8px 10px; border-bottom:1px solid var(--line); }
table.register thead th { position: sticky; top:0; background:var(--thead); z-index:2; font-size:12px; text-transform:uppercase; letter-spacing:.03em; box-shadow: 0 1px 0 var(--line); }
table.compact { min-width: 0; }
table.register thead th a { color: var(--ink); text-decoration:none; white-space:nowrap; }
/* Column sort indicators: a faint double arrow on sortable columns, a solid one on the sorted column. */
.sort-mark { display:inline-block; margin-left:4px; font-size:10px; opacity:.35; transform: translateY(-1px); }
th.sorted .sort-mark { opacity:1; color: var(--accent); }
table.register thead th a:hover .sort-mark { opacity:.8; }
table.register tbody tr:hover { background:var(--hover); }
tr.status-superseded td, tr.status-withdrawn td { color: var(--muted); }
.desc-col { min-width: 320px; max-width: 520px; } .title-col { min-width:180px; }
.empty { text-align:center; color:var(--muted); padding:30px !important; }
.finding-aid .fa-text { white-space: pre-wrap; }
.finding-aid .fa-meta { margin-top:4px; font-size:12px; color:var(--muted); display:flex; gap:8px; flex-wrap:wrap; align-items:baseline; }
.basis { color: var(--muted); font-size: 12px; }
.basis-small { font-size: 11px; color: var(--muted); }
.badge { display:inline-block; font-size:11px; padding:1px 6px; border-radius:10px; background:var(--chip); color:var(--ink); white-space:nowrap; }
.badge.warn { background: var(--warn-bg); color: var(--warn-ink); }
.badge.ok { background: var(--ok-bg); color: var(--ok-ink); }
.badge.muted { color: var(--muted); }
.badge.special { background:var(--special-bg); color:var(--special-ink); }
/* A question mark beside a field's name, and the bubble it opens. No script: hover, or reach the
   button with the keyboard, and :focus-within shows it. The bubble sits above the field and is
   nudged back inside the window near the right-hand edge of the grid. */
/* Every label in the filter grid is a column, so the name and its mark share one row of it. */
.label-row { display:flex; flex-direction:row; align-items:center; gap:0; min-width:0; }
.label-row > label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hint-wrap { position:relative; display:inline-flex; vertical-align:middle; }
.hint { display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; margin-left:5px;
        padding:0; border:1px solid var(--line); border-radius:50%; background:var(--card); color:var(--muted);
        font-size:10px; font-weight:700; line-height:1; cursor:help; }
.hint:hover, .hint:focus-visible { background:var(--grade-bg); color:var(--grade-ink); border-color:var(--grade-bg); outline:none; }
.hint-bubble { display:none; position:absolute; left:50%; bottom:calc(100% + 9px); transform:translateX(-50%); z-index:60;
               width:max-content; max-width:min(320px, 72vw); padding:9px 11px; border:1px solid var(--line); border-radius:6px;
               background:var(--card); color:var(--ink); box-shadow:0 8px 22px rgba(0,0,0,.20); font-size:12px; font-weight:400;
               line-height:1.45; text-align:left; white-space:normal; text-transform:none; letter-spacing:normal; }
.hint-wrap:hover .hint-bubble, .hint-wrap:focus-within .hint-bubble { display:block; }
.hint-bubble::after { content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
                      border:6px solid transparent; border-top-color:var(--line); }
/* Near the right of a row there is no room to centre on; hang the bubble from its right edge instead. */
.filter-grid > *:nth-child(3n) .hint-bubble, .filter-grid > *:last-child .hint-bubble { left:auto; right:-4px; transform:none; }
.filter-grid > *:nth-child(3n) .hint-bubble::after, .filter-grid > *:last-child .hint-bubble::after { left:auto; right:10px; transform:none; }
.badge.acronym { background:var(--chip); color:var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:10px; letter-spacing:.03em; }
/* In an option row the code sits at the right edge, so a column of them lines up and reads as codes. */
.dropdown-options label .badge.acronym { margin-left:auto; }
/* A list loaded on demand is people rather than codes: their names read proportionally, which
   leaves the acronym badge as the only monospaced thing in the row. */
.multiselect[data-source] .dropdown-options label { font-family: inherit; }
.badge.grade { background:var(--grade-bg); color:var(--grade-ink); font-weight:600; }
.badge.priv-privileged, .badge.priv-part_privileged, .badge.priv-without_prejudice { background:var(--danger-bg); color:var(--danger-ink); }
.badge.priv-unassessed { background: var(--warn-bg); color: var(--warn-ink); }
.badge.priv-not_privileged, .badge.priv-waived { background: var(--ok-bg); color: var(--ok-ink); }
a.party { text-decoration:none; color: var(--ink); }
a.party:hover { background: var(--grade-bg); color: var(--grade-ink); }
.party, .head { display:inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px; background:var(--chip); padding:0 5px; border-radius:3px; margin:0 3px 3px 0; }
.party.cc { opacity:.7; }
.pagination { display:flex; gap:12px; justify-content:center; padding:14px; color:var(--muted); flex-wrap:wrap; }
.notice { padding:10px 12px; border-radius:6px; background:var(--notice-bg); border:1px solid var(--notice-line); margin:10px 0; }
.notice.warn { background: var(--warn-bg); border-color:var(--warn-line); color: var(--warn-ink); }
.error { color:var(--danger-ink); }
/* Toast cards, top right */
.toasts { position: fixed; top: 64px; right: 16px; z-index: 50; display:flex; flex-direction:column; gap:10px; width: min(380px, calc(100vw - 32px)); pointer-events:none; }
.toast { pointer-events:auto; display:flex; align-items:stretch; gap:10px; background: var(--card); color: var(--ink); border:1px solid var(--line); border-radius:8px; box-shadow: 0 6px 24px rgba(0,0,0,.14); overflow:hidden; animation: toast-in .22s ease-out; }
.toast-out { opacity:0; transform: translateX(12px); transition: opacity .25s, transform .25s; }
@keyframes toast-in { from { opacity:0; transform: translateY(-8px); } to { opacity:1; transform:none; } }
.toast-bar { width:5px; flex:none; background: var(--accent); }
.toast-success .toast-bar { background: var(--c-good); } .toast-warning .toast-bar { background: var(--c-warn); } .toast-error .toast-bar { background: var(--c-bad); } .toast-info .toast-bar { background: var(--accent); }
.toast-body { padding:10px 4px 10px 6px; flex:1; min-width:0; font-size:13px; line-height:1.4; overflow-wrap:anywhere; }
.toast-title { display:block; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color: var(--muted); margin-bottom:2px; }
.toast-success .toast-title { color: var(--ok-ink); } .toast-warning .toast-title { color: var(--warn-ink); } .toast-error .toast-title { color: var(--danger-ink); }
.toast-close { flex:none; align-self:flex-start; margin:6px 6px 0 0; width:26px; height:26px; border:0; border-radius:6px; background:transparent; color: var(--muted); font-size:18px; line-height:1; cursor:pointer; }
.toast-close:hover { background: var(--chip); color: var(--ink); }
@media (max-width: 600px) { .toasts { top: 8px; right: 8px; left: 8px; width:auto; } }
.two-col { display:grid; grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr); gap:16px; align-items:start; }
@media (max-width: 1000px) { .two-col { grid-template-columns: 1fr; } .filter-grid .wide { grid-column: span 2; } }
.facts { display:grid; grid-template-columns: max-content 1fr; gap:4px 14px; margin:6px 0; }
.facts dt { color: var(--muted); } .facts dd { margin:0; overflow-wrap:anywhere; }
.plain { list-style:none; padding:0; margin:4px 0; } .plain li { margin:2px 0; }
.party-role { margin-bottom:8px; }
.dl { display:grid; gap:6px; padding:8px 0; border-top:1px solid var(--line); }
.crumbs { color: var(--muted); margin:0; }
h1 .type { font-size:14px; color:var(--muted); font-weight:normal; font-family: system-ui, sans-serif; }
.badges { margin: 0 0 10px; display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.badges .badge { line-height:1.5; align-self:center; }
.badges .btn { margin-right:6px; }
table.compact td, table.compact th { padding: 5px 8px; font-size: 12px; }
.access-log { margin-top: 16px; }
.badge.case { text-decoration:none; color: var(--muted); }
/* Disclosure membership badges and the register's "Add to" bar. */
.badge.disc { text-decoration:none; }
.badge.disc.locked { background: var(--ok-bg); color: var(--ok-ink); }
.badge.disc.preparing { background: var(--warn-bg); color: var(--warn-ink); }
.badge.disc.superseded, .badge.disc.withdrawn { color: var(--muted); text-decoration: line-through; }
.disclose-bar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:8px 10px; margin:6px 0; border:1px solid var(--line); border-radius:6px; background:var(--card); }
.disclose-bar .disclose-label { font-weight:600; font-size:13px; }
.disclose-bar .dropdown { min-width: 220px; }
th.tick, td.tick { width: 28px; text-align:center; padding-left:8px; padding-right:4px; }
th.tick input, td.tick input { margin:0; }

/* Overview charts: stacked bars whose bands are filters */
.charts { display:grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap:14px 24px; margin: 6px 0 14px; }
.chart { min-width:0; }
.chart-title { margin: 0 0 8px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color: var(--muted); font-weight:600; }
.chart-sub { text-transform:none; letter-spacing:0; font-weight:normal; }
.bar { display:flex; height:40px; border-radius:6px; overflow:hidden; background: var(--bar-track); gap:3px; }
.seg { flex: 0 1 0; min-width: 5px; display:flex; align-items:center; justify-content:center; text-decoration:none; color: var(--bar-ink); font: 13px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow:hidden; white-space:nowrap; transition: filter .12s; }
.seg:hover { filter: brightness(1.12); }
.seg.active { outline: 2px solid var(--ink); outline-offset: -2px; }
.seg-text { padding: 0 8px; overflow:hidden; text-overflow:ellipsis; }
.g-r4 { background: var(--g-r4); } .g-r3 { background: var(--g-r3); } .g-r2 { background: var(--g-r2); } .g-r1 { background: var(--g-r1); } .g-r0 { background: var(--g-r0); }
.c-good { background: var(--c-good); } .c-mid { background: var(--c-mid); } .c-low { background: var(--c-low); } .c-warn { background: var(--c-warn); } .c-bad { background: var(--c-bad); } .c-none { background: var(--c-none); }
.c-1 { background: var(--c-1); } .c-2 { background: var(--c-2); } .c-3 { background: var(--c-3); } .c-4 { background: var(--c-4); } .c-5 { background: var(--c-5); } .c-6 { background: var(--c-6); }
.chart-summary { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.legend { list-style:none; padding:0; margin: 6px 0 0; display:flex; flex-wrap:wrap; gap: 4px 18px; font-size: 13px; }
.legend .dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:-1px; }
@media (max-width: 700px) { .charts { grid-template-columns: 1fr; } }

/* Users and invitations */
.field { display:flex; flex-direction:column; gap:4px; }
.field-cases ul { list-style:none; padding:0; margin:0; display:grid; gap:4px; }
/* Checkboxes and radios: the control sits left of its own text, on one line, whatever the form's
   label layout is. A label that directly wraps such an input is laid out as a row. */
input[type=checkbox], input[type=radio] { width:16px; height:16px; margin:0; flex:none; accent-color: var(--accent); }
label:has(> input[type=checkbox]), label:has(> input[type=radio]), .check { display:flex; flex-direction:row; align-items:flex-start; gap:8px; font-weight:normal; line-height:1.35; color: var(--ink); }
label:has(> input[type=checkbox]) > input, label:has(> input[type=radio]) > input, .check > input { margin-top:2px; }
.choice-text { display:flex; flex-direction:column; gap:2px; }
.choice-text small { line-height:1.4; }
.field-cases > div > div, .field-cases li { margin:3px 0; }
.field-check small, .field-check .error { margin-left:24px; }
.access-form { display:grid; gap:4px; }
.btn.small { padding:5px 10px; font-size:12px; }
table.users td { vertical-align: top; }

/* Insights */
.insight { margin-bottom: 22px; }
.insight h2 { font-size: 16px; margin: 0 0 4px; }
.insight .lede { color: var(--muted); margin: 0 0 10px; font-size: 13px; }
.insight svg { width: 100%; height: auto; display: block; }
.scroll-x { overflow-x:auto; }
.insight .table-wrap.scroll-x { padding-bottom: 6px; }
.insight .axis text { fill: var(--muted); font-size: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.insight .axis line, .insight .axis path { stroke: var(--line); }
.tl-bar rect { transition: opacity .12s; } .tl-bar:hover rect { opacity: .8; }
.g-r4 rect, rect.g-r4 { fill: var(--g-r4); } .g-r3 rect, rect.g-r3 { fill: var(--g-r3); } .g-r2 rect, rect.g-r2 { fill: var(--g-r2); }
.g-r1 rect, rect.g-r1 { fill: var(--g-r1); } .g-r0 rect, rect.g-r0 { fill: var(--g-r0); }
rect.c-1 { fill: var(--c-1); } rect.c-2 { fill: var(--c-2); } rect.c-3 { fill: var(--c-3); } rect.c-4 { fill: var(--c-4); } rect.c-5 { fill: var(--c-5); } rect.c-6 { fill: var(--c-6); } rect.c-none { fill: var(--c-none); }
.heat-cell { fill: var(--accent); stroke: var(--card); stroke-width: 1; }
.heat-empty { fill: var(--bar-track); stroke: var(--card); stroke-width: 1; }
.heat-label text { fill: var(--ink); font-size: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.heat-total text { fill: var(--muted); font-size: 11px; }
.heat-count { fill: var(--muted); font-size: 10px; }
.net-edge { stroke: var(--muted); stroke-opacity: .35; fill: none; }
.net-edge:hover { stroke: var(--accent); stroke-opacity: .9; }
.net-node circle { fill: var(--accent); fill-opacity: .85; stroke: var(--card); stroke-width: 1.5; }
.net-node:hover circle { fill-opacity: 1; }
.net-node text { fill: var(--ink); font-size: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; paint-order: stroke; stroke: var(--card); stroke-width: 3px; }
.insight-controls { display:flex; gap:12px; align-items:center; flex-wrap:wrap; font-size: 13px; color: var(--muted); margin: 6px 0 0; }
.insight-controls input[type=number] { width: 70px; }
.two-up { display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
@media (max-width: 1100px) { .two-up { grid-template-columns: 1fr; } }
.range-bar { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid var(--line); }
.range-bar label { display:inline-flex; gap:6px; align-items:center; font-size:12px; color: var(--muted); }
.range-bar input[type=date] { width:auto; }

/* Multi-select filters rendered as inline checkboxes */
/* Dropdown components (components/dropdown.html, components/multiselect.html): a <details> whose
   summary reads like a select and whose panel holds the real radios or checkboxes. Opens without
   script and by keyboard; controls.js adds live summaries, close-on-choose, type-to-filter and
   on-demand loading. */
.dropdown { position: relative; min-width: 0; }
.filter-grid > *, .filter-grid .field { min-width: 0; }
.dropdown > summary { list-style: none; display: flex; align-items: center; min-width: 0; min-height: 38px; padding: 8px 30px 8px 10px;
  border: 1px solid var(--line); border-radius: 8px; color: var(--ink); font-size: 14px; line-height: 1.3; cursor: pointer; user-select: none;
  background: var(--input-bg) var(--select-arrow) no-repeat right 10px center / 12px; transition: border-color .12s ease, box-shadow .12s ease; }
.dropdown > summary::-webkit-details-marker { display: none; }
.dropdown > summary:hover { border-color: var(--muted); }
.dropdown > summary:focus-visible, .dropdown[open] > summary { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.dropdown-value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown-panel { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 100%; max-width: min(440px, 92vw);
  background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 28px rgba(0,0,0,.14); padding: 6px; }
.dropdown-options { max-height: 260px; overflow: auto; overscroll-behavior: contain; }
.dropdown-search { min-height: 32px; padding: 5px 8px; margin: 0 0 6px; font-size: 13px; border-radius: 6px; }
.dropdown-status { padding: 6px 8px 2px; }
.dropdown-options label { display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; color: var(--ink);
  font-size: 13px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dropdown-options label:hover { background: var(--chip); }
.dropdown-options label.is-selected { background: var(--grade-bg); color: var(--grade-ink); }
.dropdown-options input[type=checkbox], .dropdown-options input[type=radio] { margin-top: 0; }
.multiselect .dropdown-options label { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
/* attached to the right edge of a text box */
.input-group > .dropdown { flex: 0 0 auto; }
.input-group > .dropdown > summary { min-width: 84px; margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0;
  background-color: var(--chip); color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.input-group > .dropdown .dropdown-panel { left: auto; right: 0; min-width: 120px; }
.access-form .dropdown { min-width: 200px; }
/* Case grant matrix: one row per case, three ticks. */
.grants { border-collapse: collapse; margin: 0 0 6px; font-size: 13px; }
.grants th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; padding: 2px 8px; text-align: center; }
.grants th:first-child, .grants td.grant-case { text-align: left; padding-left: 0; }
.grants td { padding: 4px 8px; text-align: center; border-top: 1px solid var(--line); }
.grants tr:first-child td { border-top: 0; }
.grants input[type=checkbox]:disabled { opacity: .55; }
@media (pointer: coarse) { .dropdown-options label { min-height: 40px; } }
.file-dot { display:inline-block; width:8px; height:8px; border-radius:50%; vertical-align:middle; margin-left:2px; }
.file-dot.present { background: var(--c-good); } .file-dot.bad { background: var(--c-bad); }

/* Small screens: phones and narrow tablets. Verified by rendering every page at 390px wide. */
@media (pointer: coarse) {
  .nav-btn { padding: 9px; }                 /* 40px tap targets */
  .btn.small { padding: 6px 10px; }
  .check, .field-cases label { min-height: 32px; align-items: center; }
}
@media (max-width: 760px) {
  .nav { padding: 6px 12px; gap: 6px; row-gap: 6px; }
  .brand { margin-right: 0; }
  .brand-word { display: none; }                  /* the mark alone; the word is in the title */
  .nav .spacer { display: none; }
  /* Two rows: brand and section buttons, then the case switcher stretched beside the user buttons. */
  .nav .case-switch { flex: 1 1 45%; order: 5; min-width: 0; }
  .nav .case-switch .dropdown { flex: 1; width: auto; min-width: 0; }
  .nav-user { order: 6; margin-left: auto; padding-left: 6px; }
  .main { padding: 12px 12px 32px; }
  .site-footer { padding: 12px 12px 24px; }
  h1 { font-size: 20px; }
  .narrow { margin: 16px auto; }
  .card { padding: 12px; }
  .filter-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .filter-grid .wide { grid-column: 1 / -1; }
  /* 16px inputs stop iOS from zooming into a focused field */
  input[type=text], input[type=password], input[type=date], input[type=number], input[type=email], select, textarea { font-size: 16px; }
  .facts { grid-template-columns: minmax(80px, max-content) minmax(0, 1fr); }
  /* Wide tables become a stack of cards; each cell shows its column name from data-label. */
  .table-wrap.stackable { overflow: visible; border: 0; border-radius: 0; background: transparent; }
  .stackable table, .stackable tbody, .stackable tr, .stackable td { display: block; min-width: 0; width: auto; max-width: none; }
  .stackable thead { display: none; }
  .stackable tr { background: var(--card); border: 1px solid var(--line); border-radius: 6px; margin: 0 0 10px; padding: 6px 0; }
  .stackable tbody tr:hover { background: var(--card); }
  .stackable td { border: 0; padding: 4px 12px; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 2px 10px; align-items: start; white-space: normal; overflow-wrap: anywhere; }
  .stackable td::before { content: attr(data-label); color: var(--muted); font: 600 11px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; text-transform: uppercase; letter-spacing: .03em; padding-top: 3px; }
  .stackable td:empty, .stackable td:not([data-label])::before { display: none; }
  .stackable td:not([data-label]), .stackable td.desc-col, .stackable td.grant-cell { grid-template-columns: minmax(0, 1fr); }
  .stackable td.empty { padding: 20px 12px !important; }
  .stackable .desc-col, .stackable .title-col { min-width: 0; max-width: none; }
  .stackable .access-form { gap: 6px; }
  /* The grant matrix nested in a stacked row stays a real table: its column names are the point. */
  .stackable .grants { display: table; width: 100%; }
  .stackable .grants thead { display: table-header-group; }
  .stackable .grants tbody { display: table-row-group; }
  .stackable .grants tr { display: table-row; background: transparent; border: 0; border-radius: 0; margin: 0; padding: 0; }
  .stackable .grants th { padding: 2px 4px; white-space: nowrap; font-size: 10px; letter-spacing: 0; }
  .stackable .grants td { display: table-cell; padding: 4px; border-top: 1px solid var(--line); }
  .stackable .grants td::before { content: none; }
  /* Charts drawn to a fixed width stay legible and scroll sideways instead of shrinking. */
  .timeline-wrap svg { min-width: var(--natural-w, 640px); max-width: none; }
  .badges .btn { margin-bottom: 4px; }
  .range-bar { gap: 6px 8px; }
}
@media (max-width: 420px) {
  .filter-grid { grid-template-columns: 1fr 1fr; }
}

/* Help manual */
.help-layout { display:grid; grid-template-columns: 220px minmax(0, 1fr); gap:16px; align-items:start; }
.help-toc { position: sticky; top: 16px; align-self: start; font-size:13px; }
.help-toc li { padding: 3px 0; }
.help-toc li.current a { font-weight:600; }
.help-body { max-width: 860px; }
.help-section { scroll-margin-top: 16px; }
.help-section.came-for, .help-section:target { border-color: var(--accent); }
.help-section h2 { font-size: 18px; margin: 0 0 8px; display:flex; align-items:center; gap:8px; }
.prose { max-width: 72ch; line-height: 1.55; }
.prose p { margin: 0 0 10px; }
.prose code { font-size: 12px; }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 10px; }
.prose strong { font-weight: 600; }
@media (max-width: 1000px) { .help-layout { grid-template-columns: 1fr; } .help-toc { position: static; } }

/* Confirmation modal: a card in the middle of a dimmed page, sized to its text. */
dialog.modal { border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); padding: 0; width: min(440px, calc(100vw - 32px)); box-shadow: 0 18px 50px rgba(0,0,0,.35); }
dialog.modal::backdrop { background: rgba(0,0,0,.45); backdrop-filter: blur(1px); }
dialog.modal .modal-body { margin: 0; padding: 18px 20px 16px; }
dialog.modal .modal-title { margin: 0 0 8px; font-size: 16px; }
dialog.modal .modal-text { margin: 0 0 16px; color: var(--ink); line-height: 1.5; overflow-wrap: anywhere; }
dialog.modal .modal-actions { display: flex; gap: 8px; justify-content: flex-end; }
dialog.modal [hidden] { display: none !important; }
.btn.danger { background: var(--danger-bg); border-color: var(--danger-bg); color: var(--danger-ink); }

/* Sharing a disclosure version: the step-up fieldset and the neutral recipient header. */
fieldset.stepup { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px 10px; margin: 0; display: flex; flex-direction: column; gap: 8px; }
fieldset.stepup legend { font-size: 12px; color: var(--muted); padding: 0 4px; }
.shared-title { font-size: 15px; }

/* Register rows: the recipients beyond the first few sit behind a small control. */
.more-parties[hidden] { display: none; }
.show-more { background: var(--chip); border: 1px solid var(--line); color: var(--muted); border-radius: 10px; font: inherit; font-size: 11px; padding: 1px 7px; cursor: pointer; margin: 1px 2px; line-height: 1.5; white-space: nowrap; }
.show-more:hover { color: var(--ink); border-color: var(--muted); }
.dropdown-none{margin:0;padding:.4rem .6rem;color:var(--muted);font-size:.9em}

/* The corpus tree: one grid, so a folder's rows line up with its parent's at any depth. */
.tree-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:10px 0 8px; }
.tree-bar .crumbs { margin:0; }
.tree { border:1px solid var(--line); border-radius:10px; overflow:hidden; font-size:.94em; }
.tree-row { display:grid; grid-template-columns: minmax(0,1fr) 104px 96px 116px 40px; gap:12px;
            align-items:center; padding:5px 12px; border-top:1px solid var(--line); min-height:32px; }
.tree > .tree-row:first-child, .tree > details:first-of-type > .tree-row { border-top:0; }
.tree-head { font-size:.82em; text-transform:uppercase; letter-spacing:.04em; color:var(--muted);
             padding-top:8px; padding-bottom:8px; border-top:0; }
.tree-head a { color:inherit; text-decoration:none; white-space:nowrap; }
.tree-head a:hover { color:var(--ink); }
.tree-head .sorted { color:var(--ink); font-weight:600; }
.tree-name { display:flex; align-items:center; gap:7px; min-width:0; overflow-wrap:anywhere; }
.tree-name .icon { width:15px; height:15px; color:var(--muted); }
.tree-count { color:var(--muted); font-size:.85em; flex:none; }
.tree-folder > summary { cursor:default; list-style:none; }
.tree-folder > summary::-webkit-details-marker { display:none; }
.tree-folder > summary .tree-name::before { content:"›"; flex:none; color:var(--muted); width:.7em;
    text-align:center; cursor:pointer; transition:transform .12s ease; display:inline-block; }
.tree-folder[open] > summary .tree-name::before { transform:rotate(90deg); }
.tree-folder > summary a, .tree-file a { text-decoration:none; }
.tree-folder > summary a:hover, .tree-file a:hover { text-decoration:underline; }
.tree-folder > summary:hover, .tree-file:hover { background:rgba(127,127,127,.06); }
.tree-row .num, .tree-row .nowrap { color:var(--muted); font-size:.9em; }
.tree-file .mono { font-size:.88em; }
.tree-act { display:flex; justify-content:flex-end; }
.tree-act form { display:contents; }
.icon-btn { background:none; border:0; padding:3px; border-radius:6px; cursor:pointer; color:var(--muted); line-height:0; }
.icon-btn:hover { background:rgba(127,127,127,.14); color:var(--ink); }
.tree-absent { color:var(--warn-ink); font-size:.82em; font-style:italic; white-space:normal; }
.tree-children { padding-left:16px; border-left:1px solid var(--line); margin-left:12px; }
.tree-loading, .tree-empty .tree-name { color:var(--muted); font-size:.9em; padding:6px 0; margin:0; }
.tree-more { background:rgba(127,127,127,.04); }
@media (max-width: 760px) {
  .tree-row { grid-template-columns: minmax(0,1fr) 92px 40px; }
  .tree-row > :nth-child(3), .tree-row > :nth-child(4) { display:none; }
}

/* An import run's rows: the old value muted and struck, the kept ones marked. */
.facts.tight { margin:0; display:grid; grid-template-columns:auto 1fr; gap:2px 10px; }
.facts.tight dt { color:var(--muted); font-size:.9em; }
.facts.tight dd { margin:0; }
.was { color:var(--muted); text-decoration:line-through; }
.kept { color:var(--warn-ink); }


/* Insights: sections load on their own; a progress bar says how many are in. */
.load-progress { display:flex; align-items:center; gap:12px; font-size:12px; color:var(--muted); margin: 4px 0 2px; }
.load-progress-track { flex:1 1 auto; height:6px; border-radius:3px; background:var(--bar-track); overflow:hidden; }
.load-progress-bar { height:100%; background:var(--accent); border-radius:3px; transition: width .25s ease; }
.load-progress.done { opacity:.55; }
.load-progress.done .load-progress-bar { width:100% !important; }
.skeleton { border-radius:6px; background: linear-gradient(90deg, var(--bar-track) 25%, var(--chip) 50%, var(--bar-track) 75%); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.part-body.is-loading { opacity:.75; }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

/* Zoom: ± buttons and a two-handled slider over the corpus' whole range. */
.zoom-bar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin: 0 0 8px; }
.range-slider { position:relative; flex:1 1 240px; min-width:200px; height:28px; }
.range-slider-track { position:absolute; left:0; right:0; top:12px; height:4px; border-radius:2px; background:var(--bar-track); }
.range-slider-fill { position:absolute; top:0; height:100%; border-radius:2px; background:var(--accent); }
.range-slider input[type=range] { position:absolute; left:0; right:0; top:0; width:100%; height:28px; margin:0; padding:0; background:none; border:0; min-height:0; pointer-events:none; -webkit-appearance:none; appearance:none; }
.range-slider input[type=range]::-webkit-slider-runnable-track { background:transparent; height:4px; }
.range-slider input[type=range]::-moz-range-track { background:transparent; height:4px; }
.range-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; pointer-events:auto; width:16px; height:16px; margin-top:-6px; border-radius:50%; background:var(--card); border:2px solid var(--accent); cursor:ew-resize; }
.range-slider input[type=range]::-moz-range-thumb { pointer-events:auto; width:12px; height:12px; border-radius:50%; background:var(--card); border:2px solid var(--accent); cursor:ew-resize; }
.range-slider input[type=range]:focus-visible { outline:none; }
.range-slider input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--focus-ring); }
.insight svg.timeline { cursor: ew-resize; }

/* Quality against relevance: cells, dots by tier, a draggable selection. */
.qr-wrap { user-select:none; }
.qr-plot { touch-action: none; }
.qr-cell { fill: var(--bar-track); stroke: var(--card); stroke-width: 2; }
.qr-cell.is-selected { fill: var(--notice-bg); stroke: var(--accent); }
.qr-count { fill: var(--muted); font-size: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; pointer-events:none; }
.qr-dot circle { fill-opacity:.85; stroke: var(--card); stroke-width:.6; }
.qr-dot:hover circle { fill-opacity:1; r:4.5; }
.qr-dot.t-1 circle, .dot.t-1 { fill: var(--g-r4); background: var(--g-r4); }
.qr-dot.t-2 circle, .dot.t-2 { fill: var(--c-1); background: var(--c-1); }
.qr-dot.t-3 circle, .dot.t-3 { fill: var(--c-good); background: var(--c-good); }
.qr-dot.t-4 circle, .dot.t-4 { fill: var(--c-none); background: var(--c-none); }
.qr-dot.t-none circle, .dot.t-none { fill: var(--g-r1); background: var(--g-r1); }
.qr-selection { fill: var(--accent); fill-opacity:.08; stroke: var(--accent); stroke-width:2; stroke-dasharray: 6 4; pointer-events:none; }
.qr-tools { margin-top: 12px; }
.qr-tool h3 { margin: 4px 0 6px; }
.qr-form { display:flex; flex-direction:column; gap:8px; }
.qr-form label { display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--muted); }
.qr-form .actions { margin-top: 2px; }
.qr-form label.check { flex-direction:row; font-size:13px; color:var(--ink); }
.tier-ticks { display:grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap:6px 12px; }