/*
 * OpenRTI — design system.
 * Warm off-white + stone tones + anthracite; the accent (dark petrol) is only for interaction and
 * selected states. The RTI inspection area is a neutral dark grey setting that brings out surface detail.
 * Fonts come from the system (no external requests); Unicode characters are fully supported.
 */

/* ── 1. Tokens ────────────────────────────────────────────────────────── */
/* Headings: Source Serif 4 (Adobe, SIL Open Font License, web/fonts/OFL.txt), served by the site itself so every
   device shows the same type (owner's choice, 9 Oct 2026). Latin and Latin Extended (Turkish names), regular and semibold. */
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/source-serif-4-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/source-serif-4-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/source-serif-4-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/source-serif-4-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  --paper: #f6f3ee;
  --paper-2: #efeae2;
  --home-band: #e3e3e3;         /* the home page's statement and contribute blocks (owner's choice, 13 Oct 2026) */
  --stone: #e4ddd2;
  --line: #d8d0c4;
  --line-strong: #8f8576;      /* borders of inputs and buttons: at least 3:1 on paper and surface (WCAG 1.4.11) */
  --ink: #24272b;
  --ink-2: #41464c;
  --muted: #676259;
  --petrol: #1e5b63;
  --petrol-strong: #164950;
  --petrol-tint: #e0ebeb;
  --on-accent: #fff;            /* text on the accent colour */
  --on-ink: #fff;               /* text on the ink colour (skip link) */
  --danger: #8f3a26;
  --danger-tint: #f6e5df;
  --ok: #2f6344;
  --ok-tint: #e3efe7;
  --surface: #ffffff;           /* cards, inputs, boxes on the paper background */
  /* The home showcase and the footer sit on the paper again (owner's decision, 9 Oct 2026: plain reads as more scholarly
     than the dark stage); the object keeps its own black frame. */
  --stage: var(--paper);
  --stage-ink: var(--ink); --stage-muted: var(--ink-2); --stage-line: var(--line);
  --on-dark: #f1ede6;            /* text on the black frames and tags over images */
  --petrol-light: #8fc9cf;      /* the accent on the dark stage */

  /* Inspection setting (light UI). The image area background can be light or dark. */
  --vw-bg: #dcd8d1;             /* image area background (light) */
  --thumb-bg: #000;             /* the bands around a fitted preview (cards, showcase, thumbnails); most are shot on black */
  --vw-bg-dark: #2a2c2f;        /* image area background (dark option) */
  --vw-surface: #ffffff;
  --vw-panel: #faf8f4;
  --vw-line: #d8d0c4;
  --vw-text: #24272b;
  --vw-muted: #676259;
  --vw-accent: #1e5b63;
  --vw-chrome: rgba(255, 255, 255, .94);   /* toolbar and labels over the image */
  --vw-hover: #efeae2;
  --vw-enh-bg: #fbf3e2; --vw-enh-line: #d9b36c; --vw-enh-text: #7a4d0c;

  --serif: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, monospace;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;   /* --s9: 96px with the grid */
  --radius: 6px;
  --radius-sm: 4px;
  /* Layout grid (9 Oct 2026, after the measured layouts of museum collection sites and the 12-column standard of design
     systems): content at most 1312px wide (1440 with its margins), 12 columns, 24px between columns. Every block starts and
     ends on a column edge; the main edges are those of four groups of three columns (1, 4, 7, 10). docs/LAYOUT.md. */
  --container: 1440px;
  --gutter: clamp(20px, 4.45vw, 64px);   /* the side margin: 64px on a 1440px screen, 20px on a phone */
  --col-gap: 24px;
  --col: calc((100cqw - 11 * var(--col-gap)) / 12);   /* one column, inside a .wrap */
  --s9: 96px;
  /* Type scale (major third, 1.25, on 16px): 13 · 14 · 16 · 20 · 25 · 32 · 40 · 48 · 64 */
  --fs-display: clamp(40px, 4.45vw, 64px);
  --fs-h1: clamp(34px, 3.35vw, 48px);
  --fs-statement: clamp(26px, 2.8vw, 40px);
  --fs-h2: clamp(25px, 2.25vw, 32px);
  --fs-h3: 20px;
  --fs-lede: clamp(18px, 1.4vw, 20px);
  --measure: calc(var(--col) * 7 + var(--col-gap) * 6);   /* text and figures on the text pages: columns 4–10 (about 75 characters a line) */
  --toc-width: calc(var(--col) * 3 + var(--col-gap) * 2);  /* the text pages' table of contents: columns 1–3 */
  --header-h: 64px;
  --shadow: 0 1px 2px rgba(36, 39, 43, .06), 0 4px 16px rgba(36, 39, 43, .06);
}

/* Site-wide dark theme (header switch; default light). Only tokens change, plus the few places where
   white text sits on the accent colour. The inspection area keeps its own light/dark glass logic. */
html[data-site-theme="dark"] {
  color-scheme: dark;
  --paper: #16181b; --paper-2: #1d2024; --home-band: #1d2024; --stone: #272a2e; --line: #33373c; --line-strong: #6b7178;
  --ink: #ebe7df; --ink-2: #cfc9bf; --muted: #a19b90;
  --petrol: #7cc3cb; --petrol-strong: #a6dce1; --petrol-tint: rgba(111, 176, 184, .16);
  --on-accent: #0f1416; --on-ink: #16181b;     /* the light accent and ink of the dark theme take dark text */
  --danger: #e59a86; --danger-tint: rgba(229, 154, 134, .12); --ok: #8fd0a8; --ok-tint: rgba(143, 208, 168, .12);
  --surface: #1f2226;
  --vw-bg: #2a2c2f; --vw-surface: #26292d; --vw-panel: #1f2226; --vw-line: #33373c; --vw-text: #ebe7df;
  --vw-muted: #a19b90; --vw-hover: #272a2e; --vw-chrome: rgba(31, 34, 38, .92); --vw-accent: #7cc3cb;
  --vw-enh-bg: rgba(217, 179, 108, .14); --vw-enh-line: #a8854a; --vw-enh-text: #e6c386;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .35);
}
html[data-site-theme="dark"] .btn-primary, html[data-site-theme="dark"] .auth-btn-orcid { background: #2a7a84; border-color: #2a7a84; color: #fff; }
html[data-site-theme="dark"] .btn-primary:hover, html[data-site-theme="dark"] .auth-btn-orcid:hover { background: #236870; border-color: #236870; color: #fff; }
html[data-site-theme="dark"] .auth-btn-email { background: var(--ink); border-color: var(--ink); color: #16181b; }
html[data-site-theme="dark"] .auth-btn-email:hover { background: #fff; border-color: #fff; color: #16181b; }
html[data-site-theme="dark"] .acc-danger-solid, html[data-site-theme="dark"] .acc-danger-solid:hover { color: var(--on-ink); }
html[data-site-theme="dark"] .chip-accent, html[data-site-theme="dark"] .alert-info { border-color: rgba(124, 195, 203, .35); }
html[data-site-theme="dark"] .alert-err { border-color: rgba(229, 154, 134, .35); }
html[data-site-theme="dark"] .alert-ok { border-color: rgba(143, 208, 168, .35); }
html[data-site-theme="dark"] .ws-overlay:not(.ws-tip) { background: rgba(22, 24, 27, .82); }
html[data-site-theme="dark"] .tool-group, html[data-site-theme="dark"] .ws-panel:not(.glass-dark), html[data-site-theme="dark"] .ws-drawer:not(.glass-dark) { background: rgba(31, 34, 38, .72); border-color: rgba(255, 255, 255, .1); }
html[data-site-theme="dark"] .ws-readout:not(.glass-dark) .rchip:not(.enhanced) { background: rgba(31, 34, 38, .82); border-color: rgba(255, 255, 255, .12); }
.theme-toggle { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: none; color: var(--ink-2); cursor: pointer; flex: none; }
.theme-toggle:hover { background: var(--paper-2); color: var(--ink); }

/* ── 2. Base ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.15; color: var(--ink); }
h1 { font-size: var(--fs-h1); font-weight: 400; line-height: 1.08; letter-spacing: -.02em; margin: 0 0 var(--s4); }
h2 { font-size: var(--fs-h2); font-weight: 600; line-height: 1.15; letter-spacing: -.01em; margin: 0 0 var(--s3); }   /* semibold for contrast (owner's choice, 9 Oct 2026) */
h3 { font-size: var(--fs-h3); margin: 0 0 var(--s2); }
p { margin: 0 0 var(--s4); }
a { color: var(--petrol); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--petrol-strong); }
small, .small { font-size: 14px; }
.muted { color: var(--muted); }
:focus-visible { outline: 2px solid var(--petrol); outline-offset: 2px; border-radius: 2px; }
/* A file picker is a visually hidden input inside a button-like label: the label shows its keyboard focus. */
label.btn:has(> input[type="file"]:focus-visible) { outline: 2px solid var(--petrol); outline-offset: 2px; }
::selection { background: var(--petrol-tint); }

.skip-link {
  position: absolute; left: var(--s3); top: -60px; z-index: 100;
  background: var(--ink); color: var(--on-ink); padding: var(--s2) var(--s3); border-radius: var(--radius-sm);
}
.skip-link:focus { top: var(--s3); color: var(--on-ink); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Full-width layout: content uses the whole screen; readability is kept by the text blocks'
   own max widths (ch). */
.wrap { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); container-type: inline-size; }
@media (max-width: 760px) { :root { --col-gap: 16px; } }

.eyebrow {
  font: 600 12px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 var(--s3);
}
.lede { font-size: 19px; line-height: 1.55; color: var(--ink-2); max-width: 46ch; }

/* ── 3. Buttons, inputs, badges ───────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 44px; padding: 0 var(--s5); border-radius: 3px;
  font: 600 15px/1 var(--sans); text-decoration: none; cursor: pointer;
  border: 1px solid transparent; transition: background-color .15s, border-color .15s, color .15s;
}
.btn-primary { background: var(--petrol); color: #fff; }
.btn-primary:hover { background: var(--petrol-strong); color: #fff; }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover { border-color: var(--ink); color: var(--ink); }
.btn-ghost { background: transparent; color: var(--petrol); padding: 0 var(--s3); }
.btn-ghost:hover { background: var(--petrol-tint); }
.btn-sm { min-height: 36px; padding: 0 var(--s4); font-size: 14px; }
.btn-lg { min-height: 50px; padding: 0 var(--s5); font-size: 16px; }
.btn[hidden] { display: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn svg { width: 18px; height: 18px; flex: none; }

.text-link { font-weight: 600; text-decoration: none; }
.text-link:hover { text-decoration: underline; }

.input, .select {
  width: 100%; min-height: 44px; padding: 0 var(--s3);
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); font: 15px/1.2 var(--sans);
}
.input:focus, .select:focus { outline: 2px solid var(--petrol); outline-offset: 0; border-color: var(--petrol); }
.select { padding-right: var(--s6); }

.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px;
  padding: 0 10px; border-radius: 999px; font-size: 13px; line-height: 1;
  background: var(--paper-2); color: var(--ink-2); border: 1px solid var(--line);
}
.chip-accent { background: var(--petrol-tint); color: var(--petrol-strong); border-color: #bcd3d4; }
/* Record tab: the missing fields of a group in one line; descriptions keep their line breaks. */
.meta-missing { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
.meta-missing > span { font-style: italic; }
.meta-dl .pre { white-space: pre-line; }
/* Virtual RTI is rendered from a 3D model, not photographed: a warm, dashed chip sets it apart from captured data. */
.chip-derived { background: #f6ecd9; color: #6b4a12; border: 1px dashed #c9a35b; }
html[data-site-theme="dark"] .chip-derived { background: rgba(201, 163, 91, .14); color: #e3c58c; border-color: rgba(201, 163, 91, .5); }
.chip button {
  border: 0; background: none; padding: 0; margin: 0 -4px 0 0; width: 20px; height: 20px;
  display: grid; place-items: center; cursor: pointer; color: inherit; border-radius: 50%;
}
.chip button:hover { background: rgba(0, 0, 0, .08); }
.tag {
  font: 600 11px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
}

/* ── 4. Site header and navigation ────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50; background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; gap: var(--s5); height: var(--header-h); }
.brand {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink);
  font: 600 21px/1 var(--serif); letter-spacing: -.01em; white-space: nowrap;
}
.brand:hover { color: var(--ink); }
/* The platform is still being developed (owner's request, 9 Oct 2026): a quiet "Beta" mark beside the header logo. */
.nav .brand::after {
  content: "Beta"; margin-left: -4px; padding: 3px 6px 2px; border: 1px solid var(--line); border-radius: 999px;
  font: 600 10px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2);
}
.brand svg { color: var(--petrol); flex: none; }
/* The logo (web/img/logo.png, and logo-dark.png with a light wordmark for the dark theme): one is shown */
.brand-logo { display: block; height: 32px; width: auto; flex: none; }
.brand-logo-dark { display: none; }
html[data-site-theme="dark"] .brand-logo:not(.brand-logo-dark) { display: none; }
html[data-site-theme="dark"] .brand-logo-dark { display: block; }
.site-footer .brand-logo { height: 28px; }
@media (max-width: 640px) { .nav .brand-logo { height: 28px; } }
.nav-links { display: flex; gap: var(--s6); margin-left: 0; height: 100%; }
@media (min-width: 961px) { .nav .brand { flex: 0 0 auto; width: calc(var(--col) * 3 + var(--col-gap) * 2); } .nav { gap: var(--col-gap); } }
.nav-group { position: relative; display: flex; align-items: center; }
.nav-main {
  position: relative; display: flex; align-items: center; height: 100%;
  color: var(--ink-2); text-decoration: none; font-size: 15px; font-weight: 500; white-space: nowrap;
}
.nav-main:hover, .nav-group:focus-within .nav-main { color: var(--ink); }
.nav-main[aria-current="page"] { color: var(--ink); }
.nav-main[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--petrol); }
/* The section's pages: a quiet panel under the heading on hover or keyboard focus. */
.nav-sub {
  position: absolute; top: calc(100% - 6px); left: -16px; min-width: 220px; z-index: 60;
  display: flex; flex-direction: column; padding: var(--s2); background: var(--surface);
  border: 1px solid var(--line); box-shadow: 0 14px 40px rgba(20, 22, 25, .12);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility .15s;
}
.nav-group:hover .nav-sub, .nav-group:focus-within .nav-sub { opacity: 1; visibility: visible; transform: none; }
.nav-sub a { padding: 8px 12px; color: var(--ink-2); text-decoration: none; font-size: 14.5px; white-space: nowrap; border-radius: 2px; }
.nav-sub a:hover { background: var(--paper-2); color: var(--ink); }
.nav-search { margin-left: auto; position: relative; width: 240px; }
.nav-search .input { min-height: 38px; padding-left: 34px; font-size: 14px; background: var(--paper); }
.nav-search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
/* A page with its own search (the artefacts page) hides the menu's, keeping its place (owner's decision, 9 Oct 2026). */
.has-page-search .nav-search { visibility: hidden; }
.nav-toggle {
  display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--line);
  background: transparent; border-radius: var(--radius-sm); color: var(--ink); cursor: pointer;
}
/* Account link (added by JS only while membership is open) */
.account-link {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; max-width: 18ch;
  padding: 8px 10px; border-radius: var(--radius-sm); font-weight: 600; font-size: 15px;
  color: var(--petrol); text-decoration: none;
}
.account-link svg { flex: none; }
.account-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 520px) {
  .account-link { padding: 8px; }
  .account-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.account-link:hover { background: var(--petrol-tint); color: var(--petrol-strong); }
button.account-link { border: 0; background: none; font-family: inherit; cursor: pointer; }
/* Sign-in dialog and account menu opened from the header */
.auth-dialog {
  border: 0; padding: 0; border-radius: 10px; width: min(420px, calc(100vw - 32px));
  background: var(--paper); color: var(--ink); box-shadow: 0 24px 64px rgba(20,24,28,.28), 0 2px 8px rgba(20,24,28,.12);
}
.auth-dialog[open] { animation: auth-in .18s ease-out; }
@keyframes auth-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .auth-dialog[open] { animation: none; } }
.auth-dialog::backdrop { background: rgba(28,31,35,.5); backdrop-filter: blur(3px); }
.auth-dialog-inner { position: relative; padding: 36px 32px 24px; }
/* Sharing a record: a roomy dialog; on phones a sheet rising from the bottom of the screen. */
.share-dialog { width: min(600px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); }
.share-dialog .auth-dialog-inner { padding: 28px 28px 20px; }
.share-title { font-size: 21px; margin: 0 36px 12px 0; overflow-wrap: anywhere; }
.share-dialog .acc-inline { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.share-dialog .acc-inline .input { flex: 1 1 220px; min-width: 0; }
@media (max-width: 600px) {
  .share-dialog { width: 100vw; max-width: 100vw; margin: auto 0 0; max-height: 92dvh; border-radius: 16px 16px 0 0; }
  .share-dialog .auth-dialog-inner { padding: 22px 16px 16px; }
  .share-dialog .acc-inline > * { flex: 1 1 100%; }
}
.auth-close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; border: 0; background: none; padding: 6px; border-radius: var(--radius-sm); color: var(--ink-2); cursor: pointer; }
.auth-close:hover { background: var(--paper-2); color: var(--ink); }
.auth-head { text-align: center; margin-bottom: 20px; }
.auth-head svg { color: var(--ink); }   /* the logo's ring takes the text colour; its point stays teal */
.auth-head h2, .auth-sent h2 { margin: 10px 0 6px; font-size: 24px; }
.auth-head p { margin: 0; color: var(--ink-2); font-size: 15px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 20px; background: var(--paper-2); border-radius: 8px; }
.auth-tabs button {
  min-height: 38px; border: 0; border-radius: 6px; background: none; color: var(--ink-2);
  font: 600 14px var(--sans); cursor: pointer; transition: background .15s, color .15s, box-shadow .15s;
}
.auth-tabs button:hover { color: var(--ink); }
.auth-tabs button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(20,24,28,.12); }
.auth-tabs button:focus-visible { outline: 2px solid var(--petrol); outline-offset: 1px; }
.auth-alert .alert { margin: 0 0 16px; }
/* Sign-in options (dialog and account page) */
.auth-options { display: flex; flex-direction: column; gap: 10px; }
.auth-btn {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 44px;
  border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--ink);
  font: 600 15px/1.2 var(--sans); text-decoration: none; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s;
}
.auth-btn svg { position: absolute; left: 16px; }
.auth-btn:hover { border-color: var(--ink-2); box-shadow: 0 2px 8px rgba(20,24,28,.1); color: var(--ink); }
.auth-btn:focus-visible { outline: 2px solid var(--petrol); outline-offset: 2px; }
.auth-btn:disabled { opacity: .6; cursor: progress; }
.auth-btn-orcid { background: var(--petrol); border-color: var(--petrol); color: #fff; }
.auth-btn-orcid:hover { background: var(--petrol-strong); border-color: var(--petrol-strong); color: #fff; }
.auth-btn-email { background: var(--ink); border-color: var(--ink); color: #fff; }
.auth-btn-email:hover { background: #000; border-color: #000; color: #fff; }
.auth-hint { margin: -2px 0 0; font-size: 13px; color: var(--muted); text-align: center; }
.auth-or { display: flex; align-items: center; gap: 12px; margin: 16px 0; font-size: 13px; color: var(--muted); }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-email { display: flex; flex-direction: column; gap: 8px; }
.auth-email label { font-size: 14px; font-weight: 600; }
.auth-email .input { width: 100%; min-height: 46px; border-radius: 8px; }
.auth-field-error { margin: 0; min-height: 0; font-size: 14px; color: var(--danger, #a1312a); }
.auth-field-error:empty { display: none; }
.auth-note { margin: 12px 0 0; font-size: 13px; color: var(--muted); text-align: center; }
.auth-legal { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.5; color: var(--muted); text-align: center; }
.auth-legal a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.auth-legal a:hover { color: var(--petrol); }
.auth-sent { text-align: center; padding: 8px 0 4px; }
.auth-sent-icon { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--petrol-tint); color: var(--petrol-strong); }
.auth-sent-icon svg { width: 26px; height: 26px; }
.auth-sent p { margin: 0 0 8px; color: var(--ink-2); }
.auth-sent strong { color: var(--ink); overflow-wrap: anywhere; }
.auth-sent-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.acc-danger { color: var(--danger); }
.acc-danger:hover { background: var(--danger-tint); color: var(--danger); }
.acc-danger-solid { background: var(--danger); border-color: var(--danger); color: #fff; }
.acc-danger-solid:hover { filter: brightness(.92); color: #fff; }
.acc-danger-solid:disabled { opacity: .5; cursor: not-allowed; filter: none; }
html[data-site-theme="dark"] .acc-danger-solid { background: #a8452e; border-color: #a8452e; }
.acc-signin { max-width: 460px; margin-inline: auto; padding: 32px; }
.account-menu {
  position: fixed; z-index: 50; display: flex; flex-direction: column; min-width: 200px; max-width: calc(100vw - 16px);
  padding: 6px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 8px 28px rgba(0,0,0,.16);
}
.account-menu .menu-head { padding: 8px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.account-menu [role="menuitem"] {
  display: block; padding: 8px 10px; border: 0; border-radius: var(--radius-sm); background: none; text-align: left;
  font: 15px var(--sans); color: var(--ink); text-decoration: none; cursor: pointer;
}
.account-menu [role="menuitem"]:hover, .account-menu [role="menuitem"]:focus-visible { background: var(--petrol-tint); color: var(--petrol-strong); }

@media (max-width: 960px) {   /* narrower screens fold the menu into the menu button: a full-screen sheet */
  .nav { gap: var(--s3); }
  .nav-toggle { display: grid; place-items: center; margin-left: 0; }
  .nav > .theme-toggle { margin-left: auto; }            /* the theme switch opens the right-hand group */
  .account-link ~ .theme-toggle { margin-left: 0; }
  .account-link { margin-left: auto; font-size: 14px; }
  .nav-links, .nav-search { display: none; }
  .site-header.open .nav-links {
    display: block; position: fixed; left: 0; right: 0; top: var(--header-h); bottom: 0; height: auto; overflow-y: auto;
    background: var(--paper); padding: calc(var(--s4) + 46px + var(--s4)) var(--gutter) var(--s6); margin: 0;
    overscroll-behavior: contain;
  }
  /* The search sits at the top of the open menu; each section lists its pages below its name. */
  .site-header.open .nav-group { display: block; border-bottom: 1px solid var(--line); padding: var(--s3) 0 var(--s4); }
  .site-header.open .nav-main { height: auto; padding: var(--s2) 0; font: 400 28px/1.15 var(--serif); color: var(--ink); }
  .site-header.open .nav-main[aria-current="page"]::after { display: none; }
  .site-header.open .nav-main[aria-current="page"] { color: var(--petrol-strong); }
  .site-header.open .nav-sub { position: static; opacity: 1; visibility: visible; transform: none; transition: none;
    min-width: 0; padding: 0; border: 0; box-shadow: none; background: none; }
  .site-header.open .nav-sub a { padding: 8px 0; font-size: 16px; }
  .site-header.open .nav-search {
    display: block; position: fixed; left: var(--gutter); right: var(--gutter); width: auto; z-index: 51;
    top: calc(var(--header-h) + var(--s4));
  }
  .site-header.open .nav-search .input { min-height: 46px; font-size: 16px; border-radius: 23px; padding-left: 40px; }
  .site-header.open .nav-search svg { left: 15px; }
  .has-page-search .site-header.open .nav-search { display: none; }
}

/* ── 5. Footer ────────────────────────────────────────────────────────── */
/* The dark stage closes every page (redesign, 9 Oct 2026): brand, then Explore / Learn / Contribute / About. */
.site-footer { background: var(--paper-2); color: var(--stage-muted); border-top: 1px solid var(--line); margin-top: var(--s8); }
.footer-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s7);
  padding-top: var(--s9); padding-bottom: var(--s8);
}
/* One row on wide screens (owner's request, 10 Oct 2026): the brand in columns 1-4, then the four sections, two columns each. */
.footer-brand { grid-column: 1 / 5; grid-row: 1; }
.footer-brand ~ .footer-col { grid-row: 1; }
.footer-col { grid-column: span 2; }
.footer-logo { height: 28px; width: auto; margin-bottom: var(--s4); }   /* shown or hidden with the theme (.brand-logo) */
.footer-grid p { color: var(--stage-muted); font-size: 15px; max-width: 36ch; }
.footer-mail a { color: var(--stage-ink); }
.footer-col h2 { font: 600 12px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--stage-ink); margin: 6px 0 var(--s4); }
.footer-col a { display: block; color: var(--stage-muted); text-decoration: none; padding: 5px 0; font-size: 15px; }
.site-footer a:hover { color: var(--stage-ink); text-decoration: underline; }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3);
  border-top: 1px solid var(--stage-line); padding-top: var(--s4); padding-bottom: var(--s5);
  font-size: 13.5px; color: var(--stage-muted);
}
.footer-bottom a { color: var(--stage-muted); }
/* The Learn, Contribute and About pages keep one paper colour down to the footer (owner's choice, 10 Oct 2026); the
   home page and Explore keep the cream footer. */
:is([data-page="about-rti"], [data-page="using"], [data-page="upload"], [data-page="contribute"], [data-page="about"], [data-page="terms"],
  [data-page="privacy"], [data-page="preservation"]) .site-footer { background: var(--paper); }
@media (max-width: 1200px) { .footer-brand { grid-column: 1 / 7; } .footer-brand ~ .footer-col { grid-row: 2; grid-column: span 3; } }   /* narrower: brand above, sections in a row */
@media (max-width: 960px) { .footer-brand { grid-column: 1 / -1; } .footer-brand ~ .footer-col { grid-row: auto; grid-column: span 6; } .footer-grid { padding-top: var(--s8); } }
@media (max-width: 420px) { .footer-grid { row-gap: var(--s6); } }

/* ── 6. Sections, page headings ───────────────────────────────────────── */
.section-head { display: flex; align-items: end; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s7); flex-wrap: wrap; }
.section-head h2 { margin: 0; }
.section-head p { margin: var(--s2) 0 0; color: var(--ink-2); max-width: 60ch; }
.page-head { padding: var(--s7) 0 var(--s5); border-bottom: 1px solid var(--line); margin-bottom: var(--s6); }
.page-head p { color: var(--ink-2); max-width: calc(var(--toc-width) + var(--col-gap) + var(--measure)); margin: 0; font-size: 18px; }   /* ends where the text pages' text ends */
@media (max-width: 640px) { .page-head { padding-top: var(--s6); } }

/* ── 7. Home page ─────────────────────────────────────────────────────── */
/* Redesign (9 Oct 2026). Every block sits on the 12-column grid: text in columns 1–5, images and lists in 7–12, the
   statement's label in 1–3 and its text from column 4, cards four to a row (three columns each). */
/* Home rhythm (owner's choice, 10 Oct 2026): paper and cream blocks alternate (hero paper, statement cream, views
   paper, contribute cream, records paper, footer cream), each with the same space above and below. */
.section { padding: var(--s9) 0; }
.statement-section, .contribute-section { background: var(--home-band); }
body[data-page="home"] .hero { border-bottom: 0; }
body[data-page="home"] .site-footer { margin-top: 0; background: var(--home-band); }   /* the same grey as the home blocks (13 Oct 2026) */
.home-split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: center; }
.home-split > :first-child { grid-column: 1 / 6; }
.home-split > :last-child { grid-column: 7 / 13; }
.eyebrow + h1, .eyebrow + h2 { margin-top: 0; }

/* The stage */
.hero { position: relative; background: var(--stage); color: var(--stage-ink); border-bottom: 1px solid var(--line); }
.hero-grid { min-height: clamp(520px, calc(100svh - var(--header-h) - 65px), 720px); padding-top: var(--s8); padding-bottom: var(--s8); }
.hero .eyebrow { color: var(--petrol); }
.hero h1 { color: var(--stage-ink); font-size: var(--fs-display); line-height: 1.04; margin-bottom: var(--s5); }
.hero h1 .accent { color: var(--petrol); }
.hero .lede { color: var(--stage-muted); font-size: var(--fs-lede); max-width: none; margin-bottom: var(--s7); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s5); }
.hero :focus-visible { outline-color: var(--petrol); }
.specimen { margin: 0; }
/* The showcase is the stage's subject: columns 6–12 (owner, 9 Oct 2026: it looked small beside the text). Its dark
   ground meets the stage, so it needs no empty column before it. */
@media (min-width: 961px) { .hero-grid > .specimen { grid-column: 6 / 13; } }
.specimen-frame { position: relative; aspect-ratio: 4 / 3; background: var(--thumb-bg); overflow: hidden; display: grid; place-items: center; }
/* Never cropped; the photograph's own dark ground fades into the frame's black: its black point is moved to black
   (#stage-black in index.html: values under about 7 % become black, the rest stretched by 14 %) and the edges fade out.
   Only the home showcase; the record page shows the data as they are. */
.specimen-frame :is(img, canvas) { filter: url(#stage-black); }
.specimen-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  -webkit-mask-image: radial-gradient(ellipse 75% 72% at 50% 50%, #000 66%, transparent 100%);
  mask-image: radial-gradient(ellipse 75% 72% at 50% 50%, #000 66%, transparent 100%); }
.specimen-frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair;
  -webkit-mask-image: radial-gradient(ellipse 75% 72% at 50% 50%, #000 66%, transparent 100%); mask-image: radial-gradient(ellipse 75% 72% at 50% 50%, #000 66%, transparent 100%); }
.specimen-empty { color: var(--on-dark); padding: var(--s5); text-align: center; font-size: 15px; }
.specimen-live { position: absolute; z-index: 1; left: var(--s4); bottom: var(--s4); display: inline-flex; gap: var(--s2); }   /* above the live canvas, added after it */
.specimen-live .btn { background: rgba(0, 0, 0, .72); color: var(--on-dark); border-color: rgba(241, 237, 230, .14); min-height: 36px; font-size: 13px; backdrop-filter: blur(6px); }
.specimen-live .btn:hover { background: rgba(0, 0, 0, .9); color: #fff; }
/* Once the light can be moved, a quiet line centred under the object instead of a button (owner's decision, 9 Oct 2026). */
.specimen-live.is-hint { left: 50%; transform: translateX(-50%); pointer-events: none; }
.specimen-hint { color: var(--on-dark); font-size: 13px; white-space: nowrap; text-shadow: 0 1px 3px rgba(0, 0, 0, .9); }
.hero-caption { border-top: 1px solid var(--stage-line); }
.hero-caption .wrap { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s1) var(--s5); min-height: 64px; padding-top: var(--s3); padding-bottom: var(--s3); font-size: 14px; color: var(--stage-muted); }
.hero-caption strong { font: 600 16px/1.3 var(--serif); color: var(--stage-ink); }
.hero-pid { font: 13px var(--mono); }
.hero-caption a { margin-left: auto; color: var(--stage-ink); font-weight: 600; text-decoration: none; }
.hero-caption a:hover { color: var(--petrol); text-decoration: underline; }

/* About OpenRTI: a text-only pause between the stage and the images (owner, 9 Oct 2026). */
.statement { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.statement > .eyebrow { grid-column: 4 / 13; grid-row: 1; margin: 0 0 var(--s4); }
/* The O of the logo (from OpenRTI_Logo.ai) in columns 1–3, its top on the statement's first line (owner, 9 Oct 2026). */
.statement-mark { grid-column: 1 / 4; grid-row: 1 / 4; justify-self: center; align-self: center; width: calc(var(--col) * 2 + var(--col-gap)); height: auto; color: #3f3c37; }   /* large, centred in columns 1-3 against the whole statement (owner's request, 10 Oct 2026) */
html[data-site-theme="dark"] .statement-mark { color: var(--ink-2); }
.statement-mark-dot { fill: var(--petrol); }
.statement-lead { grid-column: 4 / 13; grid-row: 2; margin: 0; font-size: var(--fs-statement); font-weight: 400; line-height: 1.2; letter-spacing: -.015em; }   /* a statement, not a heading: regular weight */
.statement-body { grid-column: 4 / 13; grid-row: 3; margin-top: var(--s5); }   /* as wide as the statement above it */
.statement-body p { color: var(--ink-2); font-size: var(--fs-lede); line-height: 1.6; margin-bottom: var(--s4); }

/* What RTI shows */
.readings-text > p:not(.eyebrow) { color: var(--ink-2); font-size: 18px; }
.mode-list { list-style: none; margin: var(--s6) 0 0; padding: 0; border-top: 1px solid var(--ink); }
.mode-list li { border-bottom: 1px solid var(--line); }
.mode-list button {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s1) 0; width: 100%; padding: var(--s4) 0; text-align: left;
  background: none; border: 0; cursor: pointer; font: inherit; color: inherit;
}
.mode-list .t { font: 600 var(--fs-h3)/1.3 var(--serif); color: var(--muted); transition: color .2s; }
.mode-list .d { font-size: 15px; color: var(--ink-2); display: none; }
.mode-list button:hover .t, .mode-list [aria-pressed="true"] .t { color: var(--ink); }
.mode-list [aria-pressed="true"] .d { display: block; }
.mode-list [aria-pressed="true"] { box-shadow: inset 2px 0 0 var(--petrol); padding-left: var(--s4); }   /* the view shown */
.mode-list button { transition: padding-left .15s; }
.readings-fig { margin: 0; }
.readings-frame { position: relative; aspect-ratio: 4 / 3; background: var(--thumb-bg); overflow: hidden; border-radius: 12px; }   /* a detail, cropped to 4:3 (owner, 9 Oct 2026: the square was too large); softly rounded (owner's request) */
.readings-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; }
.readings-frame img.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .readings-frame img { transition: none; } }
.readings-tag { position: absolute; left: var(--s4); bottom: var(--s4); padding: 6px 10px; background: rgba(0, 0, 0, .74); color: var(--on-dark); font: 12px var(--mono); letter-spacing: .03em; }
.readings-fig figcaption { display: flex; flex-direction: column; gap: var(--s1); margin-top: var(--s3); font-size: 13px; color: var(--muted); }
/* Wide screens: the figure starts level with the heading and ends level with the list's last rule (owner's request,
   9 Oct 2026); its caption hangs below. */
@media (min-width: 961px) {
  .readings.home-split { align-items: start; grid-template-rows: auto auto auto 1fr; }
  .readings-text { display: contents; }
  .readings-text > * { grid-column: 1 / 6; }
  .readings-text > .eyebrow { grid-row: 1; }
  .readings-text > h2 { grid-row: 2; }
  .readings-text > p:not(.eyebrow) { grid-row: 3; }
  .readings-text > .mode-list { grid-row: 4; align-self: end; }
  .readings-fig { grid-column: 7 / 13; grid-row: 2 / 5; align-self: stretch; position: relative; display: flex; flex-direction: column; }
  .readings-frame { aspect-ratio: auto; flex: 1; min-height: 320px; }
  .readings-fig figcaption { position: absolute; top: 100%; left: 0; right: 0; }
}

/* Contribute */
.contribute { align-items: start; }
.contribute > div > p:not(.eyebrow) { color: var(--ink-2); font-size: 18px; margin-bottom: var(--s6); }
.steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.steps li { display: grid; grid-template-columns: 48px 1fr; gap: var(--col-gap); align-items: start; padding: var(--s5) 0; border-bottom: 1px solid var(--line); }
/* Each step's mark: a line drawing of what happens, in the accent, inside a hairline square. */
.step-icon { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--line-strong); color: var(--petrol); background: var(--surface); }
.steps h3 { margin: 0 0 var(--s1); }
.steps p { margin: 0; color: var(--ink-2); font-size: 15px; }

@media (max-width: 960px) {
  .home-split > :first-child, .home-split > :last-child { grid-column: 1 / -1; }
  .home-split { row-gap: var(--s6); }
  .hero-caption a { margin-left: 0; flex-basis: 100%; }
  /* The object first, its museum label under it, then the words (owner's request, 10 Oct 2026). */
  .hero { display: flex; flex-direction: column; }
  .hero-grid { display: contents; }
  .hero-grid > .specimen { order: 1; padding: var(--s5) var(--gutter) 0; }
  .hero-caption { order: 2; border-top: 0; }
  .hero-text { order: 3; padding: var(--s5) var(--gutter) var(--s7); border-top: 1px solid var(--line); }
  .statement > .eyebrow, .statement-lead, .statement-body { grid-column: 1 / -1; grid-row: auto; padding-top: 0; }
  .statement-mark { grid-column: 1 / -1; grid-row: auto; justify-self: start; width: 72px; margin: 0 0 var(--s5); }
  .statement > .eyebrow { margin-bottom: var(--s3); }
  /* Heading and sentence first, then the figure, then the list that drives it (so a tapped view shows just above). */
  .readings.home-split { row-gap: 0; }
  .readings-text { display: contents; }
  .readings-text > * { grid-column: 1 / -1; }
  .readings-fig { order: 1; margin: var(--s3) 0 var(--s5); }
  .readings-text > .mode-list { order: 2; }
}
@media (max-width: 760px) { .section { padding: var(--s8) 0; } }
@media (max-width: 520px) { .hero-actions .btn { flex: 1 1 100%; } }
/* Phones: no room for the museum label under the showcase; the record is one tap away (owner's request, 10 Oct 2026). */
@media (max-width: 760px) { .hero-caption { display: none; } .hero-text { border-top: 0; } }

/* ── 8. Artifact cards and grids ──────────────────────────────────────── */
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s7) var(--col-gap); }
@media (max-width: 1100px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s6); } }
@media (max-width: 480px) { .grid { grid-template-columns: minmax(0, 1fr); } }
/* Home "Featured": one row that scrolls sideways, three cards a screen on wide screens (two, then one and a bit). */
.carousel { display: flex; gap: var(--col-gap); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding: 2px 0 var(--s3); margin-top: -2px; scrollbar-width: thin; }
.carousel > .card { flex: 0 0 calc((100% - 3 * var(--col-gap)) / 4); scroll-snap-align: start; min-width: 0; }
.carousel > .state { flex: 1 0 100%; }
.carousel:focus-visible { outline: 2px solid var(--petrol); outline-offset: 4px; }
.carousel-head { display: flex; align-items: center; gap: var(--s2); }
.carousel-head .text-link { margin-left: var(--s2); }
.carousel-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.carousel-btn:hover:not(:disabled) { border-color: var(--petrol); color: var(--petrol); }
.carousel-btn:disabled { opacity: .35; cursor: default; }
@media (max-width: 1100px) { .carousel > .card { flex-basis: calc((100% - 2 * var(--col-gap)) / 3); } }
@media (max-width: 760px) { .carousel > .card { flex-basis: calc((100% - var(--col-gap)) / 2); } }
@media (max-width: 600px) { .carousel > .card { flex-basis: 82%; } .carousel-btn { display: none; } .carousel-head .text-link { margin-left: 0; } }
@media (prefers-reduced-motion: no-preference) { .carousel { scroll-behavior: smooth; } }
.card {
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); color: var(--ink); }
.card:focus-visible { outline-offset: 3px; }
.card-media {
  position: relative; aspect-ratio: 4 / 3; background: var(--thumb-bg); display: grid; place-items: center; overflow: hidden;
}
/* Surface detail is never cropped: the image is fitted into the area (contain). */
.card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }   /* the frame, not the image, sets the height */
.card-media .placeholder { color: var(--vw-muted); font-size: 14px; padding: var(--s4); text-align: center; }
.card-body { padding: var(--s4); display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-body h3 { font-size: 19px; margin: 0; }
.card-meta { font-size: 14px; color: var(--muted); margin: 0; }
.card-foot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: var(--s2); }

/* Catalogue cards (redesign, 9 Oct 2026): the object on its dark ground, a museum label below, no box. */
.card.card-cat { background: none; border: 0; border-radius: 0; overflow: visible; }
.card.card-cat:hover { box-shadow: none; }
.card-cat .card-media { border-radius: 0; }
.card-cat .card-media img { transition: transform .5s ease; }
.card-cat:hover .card-media img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .card-cat .card-media img { transition: none; } .card-cat:hover .card-media img { transform: none; } }
.card-cat .card-body { padding: var(--s4) 0 0; gap: 6px; }
.card-cat .card-body h3 { font-size: 18px; line-height: 1.3; }
.card-cat:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.card-cat .card-meta { color: var(--ink-2); }
.card-cat .card-by { margin: auto 0 0; padding-top: var(--s2); border-top: 1px solid color-mix(in srgb, var(--line-strong) 40%, var(--line)); font-size: 13px; color: var(--ink-2); }   /* a tone darker (10 Oct 2026) */
.card-by.record-by { margin: 0 0 var(--s4); }   /* the record tab's uploader line, apart from the first heading */
.coll-card .count { font-size: 14px; color: var(--muted); }

/* ── 9. States (empty, error, loading) ────────────────────────────────── */
.state {
  border: 1px solid var(--line); border-top: 2px solid var(--ink); padding: var(--s7) var(--s5);
  text-align: center; color: var(--ink-2); background: var(--surface);
}
.state h2, .state h3 { font-size: 20px; margin-bottom: var(--s2); }
.state p { margin: 0 auto var(--s4); max-width: 52ch; }
.state:last-child p:last-child { margin-bottom: 0; }
.state-error { border-style: solid; border-color: #e3c2b7; background: var(--danger-tint); }
.alert { padding: var(--s3) var(--s4); border-radius: var(--radius-sm); font-size: 15px; margin: var(--s3) 0; border: 1px solid; }
.alert-err { background: var(--danger-tint); border-color: #e3c2b7; color: var(--danger); }
.alert-ok { background: var(--ok-tint); border-color: #bcd5c5; color: var(--ok); }
.alert-info { background: var(--petrol-tint); border-color: #bcd3d4; color: var(--petrol-strong); }
.skeleton { background: linear-gradient(90deg, var(--paper-2), var(--stone), var(--paper-2)); background-size: 200% 100%; animation: skel 1.4s linear infinite; border-radius: var(--radius); }
@keyframes skel { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } * { scroll-behavior: auto !important; } }

/* ── 10. Discovery (Artifacts) page ───────────────────────────────────── */
/* Redesign (9 Oct 2026): a large search under the heading, the filters as one row of buttons that open their values
   (one at a time), the results across the full width below. */
.browse-search { position: relative; max-width: calc(var(--col) * 9 + var(--col-gap) * 8); margin-top: var(--s6); }   /* ends on the ninth column */
.browse-search svg { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.browse-search .input { min-height: 58px; padding-left: 54px; font-size: 18px; background: var(--surface);
  border-radius: 0; border-color: var(--line); border-bottom: 2px solid var(--ink); }
.browse-search .input:focus { border-bottom-color: var(--petrol); }
.browse { display: block; }
.filters { position: sticky; top: var(--header-h); z-index: 20; margin: 0 calc(-1 * var(--gutter)) var(--s5); padding: var(--s3) var(--gutter);
  background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
#facets { display: flex; flex-wrap: wrap; gap: var(--s2); }
/* The row of filter buttons keeps its height before it is drawn, so the results are not pushed down when it is (layout
   shift 0.30 on the live site, 13 Oct 2026); the results are drawn first, so the room cannot depend on them. */
#facets:empty { min-height: 38px; }
.facet { position: relative; }
.facet summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; list-style: none; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: 19px; background: var(--surface); font-size: 14.5px; font-weight: 500; color: var(--ink-2);
  white-space: nowrap; user-select: none;
}
.facet summary::-webkit-details-marker { display: none; }
.facet summary:hover, .facet[open] summary { border-color: var(--ink); color: var(--ink); }
.facet summary svg { transition: transform .15s; }
.facet[open] summary svg { transform: rotate(180deg); }
.facet-on summary { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.facet-on summary:hover, .facet-on[open] summary { color: var(--paper); }
.facet-n { font: 600 12px var(--mono); color: var(--petrol-light); }
.facet-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 250px; max-height: min(420px, 60vh); overflow-y: auto;
  margin: 0; padding: var(--s2) var(--s3); border: 1px solid var(--line); background: var(--surface);
  box-shadow: 0 14px 40px rgba(20, 22, 25, .14);
}
.facet-pop .check { padding: 2px 4px; }
.facet-pop .check .n { color: var(--muted); }
body[data-page="artifacts"] .page-head { border-bottom: 0; margin-bottom: 0; }
body[data-page="artifacts"] .page-head p { max-width: calc(var(--col) * 9 + var(--col-gap) * 8); }   /* ends with the search below it */
.check { display: flex; align-items: center; gap: var(--s2); min-height: 32px; font-size: 15px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--petrol); margin: 0; }
.check .n { margin-left: auto; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.results-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s3); }
.results-bar .count { font-weight: 600; }
/* Room for the cards while the catalogue loads, so the footer is not drawn high and then pushed down. */
#results:empty { min-height: 70vh; }
.active-filters { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s4); min-height: 0; }
.filters-toggle { display: none; }

/* View switch (grid / list / table) */
.view-switch { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; }
.view-switch button {
  display: grid; place-items: center; width: 38px; height: 34px; border: 0; background: transparent; color: var(--ink-2); cursor: pointer;
}
.view-switch button + button { border-left: 1px solid var(--line); }
.view-switch button:hover { background: var(--paper-2); color: var(--ink); }
.view-switch button[aria-pressed="true"] { background: var(--petrol-tint); color: var(--petrol-strong); }

/* List view: one artifact per row */
.results-list { display: flex; flex-direction: column; gap: var(--s3); }
.lrow {
  display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: var(--s5); align-items: center;
  padding: var(--s3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--ink); text-decoration: none; transition: border-color .15s, box-shadow .15s;
}
.lrow:hover { border-color: var(--line-strong); box-shadow: var(--shadow); color: var(--ink); }
.lrow-media { border-radius: var(--radius-sm); }
.lrow-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lrow-body h3 { font-size: 19px; margin: 0; }
.lrow-facts { display: flex; flex-wrap: wrap; gap: 4px var(--s5); margin: 4px 0 0; font-size: 14px; }
.lrow-facts div { display: flex; gap: 6px; }
.lrow-facts dt { color: var(--muted); }
.lrow-facts dd { margin: 0; color: var(--ink-2); }
.lrow-side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s2); text-align: right; padding-right: var(--s2); }
.lrow-go { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: 14px; color: var(--petrol); }
@media (max-width: 760px) {
  /* Phone: preview beside the title, the details and the footer across the full width below. */
  .lrow { grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 6px var(--s3); align-items: start; }
  .lrow-media { grid-row: span 2; }
  .lrow-body { display: contents; }
  .lrow-body h3, .lrow-body .card-meta { grid-column: 2; }
  .lrow-body h3 { font-size: 17px; }
  .lrow-facts { grid-column: 1 / -1; display: block; margin-top: 4px; }
  .lrow-facts div { display: block; padding: 2px 0; }
  .lrow-facts dt, .lrow-facts dd { display: inline; }
  .lrow-facts dt::after { content: ": "; }
  .lrow-side { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; text-align: left; padding: 0; }
}

/* Table view: sortable columns; the table scrolls sideways inside its frame on narrow screens. */
.table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; line-height: 1.35; }
.data-table th, .data-table td { padding: 8px 10px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); }
.data-table td { min-width: 120px; max-width: 220px; }
/* What is RTI?: the capture methods compared, inside the prose. */
.prose { min-width: 0; }   /* a wide table scrolls inside its frame instead of widening the column */
.prose .table-wrap { margin: var(--s4) 0 var(--s5); max-width: 100%; }
.data-table tbody tr:last-child > * { border-bottom: 0; }
.data-table thead th { position: sticky; top: 0; background: var(--paper-2); font: 600 12px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; padding: 0; }
.data-table thead button {
  display: inline-flex; align-items: center; gap: 6px; width: 100%; padding: 10px; border: 0; background: none;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; text-align: left;
}
.data-table thead button:hover, .data-table th[aria-sort] button { color: var(--petrol-strong); }
.sort-mark { font-size: 12px; opacity: .45; }
.data-table th[aria-sort] .sort-mark { opacity: 1; }
.data-table tbody tr { cursor: pointer; transition: background-color .12s; }
.data-table tbody tr:hover > * { background: var(--paper-2); }
/* Title column: preview + name, fixed on the left while the table scrolls sideways */
.data-table .t-title { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: inset -1px 0 0 var(--line); }
.data-table thead .t-title { z-index: 2; background: var(--paper-2); }
.data-table tbody .t-title { font-weight: 600; min-width: 240px; max-width: 300px; }
.data-table .t-title > div { display: flex; align-items: center; gap: 10px; }
.data-table tbody th a { color: var(--ink); text-decoration: none; }
.data-table tbody tr:hover th a { color: var(--petrol-strong); text-decoration: underline; }
.data-table td { color: var(--ink-2); }
.data-table .t-media { flex: none; width: 64px; aspect-ratio: 4 / 3; border-radius: 4px; }
.data-table .t-media .placeholder { font-size: 10px; padding: 2px; }
.data-table .t-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.data-table .nd { color: var(--muted); }
@media (max-width: 900px) {
  /* Phones: the filters open as one panel (the "Filters" button), each filter's values listed below its name. */
  .filters { position: static; margin: 0 0 var(--s4); padding: 0; background: none; border: 0; backdrop-filter: none; }
  .filters:not(.open) { display: none; }
  .filters.open #facets { display: block; padding: var(--s2) var(--s4) var(--s4); border: 1px solid var(--line); background: var(--surface); }
  .filters.open .facet { border-bottom: 1px solid var(--line); }
  .filters.open .facet summary svg { margin-left: auto; }
  .filters.open .facet-n { color: var(--petrol-strong); }
  .filters.open .facet summary { width: 100%; border: 0; border-radius: 0; background: none; padding: 0; min-height: 48px; font-size: 16px; color: var(--ink); }
  .filters.open .facet-on summary { color: var(--petrol-strong); }
  .filters.open .facet-pop { position: static; min-width: 0; max-height: none; padding: 0 0 var(--s3); border: 0; box-shadow: none; background: none; }
  .browse-search .input { font-size: 16px; min-height: 52px; }   /* 16 px: iOS does not zoom into the field */
  .filters-toggle { display: inline-flex; }
}

/* ── 11. Long text pages (About RTI, About the Project, terms, privacy, preservation) ── */
/* On the layout grid (9 Oct 2026, replacing the full-width text of 6 Oct): the table of contents in columns 1–3, text
   and figures from column 4 to one right edge at column 10 (--measure), a readable line of about 75 characters. Wide lines get a larger type and more leading to stay readable; a label–value box keeps a narrow width so
   its values stay next to their labels. */
.prose-layout { display: grid; grid-template-columns: var(--toc-width) minmax(0, 1fr); gap: var(--col-gap); align-items: start; }   /* the text starts on column 4 */
.guide-cta { margin: var(--s7) 0 0; }
/* The upload form's three groups (owner's choice, 13 Oct 2026): every field in view, each group with its purpose. */
.up-group { border: 0; border-top: 1px solid var(--line); margin: var(--s5) 0 0; padding: var(--s4) 0 0; min-width: 0; }
.up-group > legend { padding: 0; font: 600 18px/1.3 var(--serif); color: var(--ink); }
.up-group > .help { margin: var(--s1) 0 var(--s3); }
.field .rec { margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: var(--paper-2); color: var(--muted); font: 500 11px/1.5 var(--sans); letter-spacing: .02em; }
.up-compact-h { margin: var(--s3) 0 var(--s2); font: 600 13px/1.3 var(--sans); color: var(--ink-2); }
.up-compact .field label { font-size: 13px; }
.up-compact .field { margin-bottom: var(--s2); }
.up-yourname { max-width: 420px; margin: var(--s4) 0; }
.inv-other > summary { cursor: pointer; font-weight: 600; }
.inv-other[open] > summary { margin-bottom: var(--s3); }
/* The welcome card of a new account. */
.acc-welcome { margin-bottom: var(--s5); }
.acc-welcome form { display: flex; gap: var(--s2); flex-wrap: wrap; margin: var(--s3) 0; }
.acc-welcome input { flex: 1 1 240px; }
.acc-notices .act-switch { width: 100%; }   /* the contributor guide ends with the way to the upload page */
/* Narrower screens: the text takes all the columns after the contents (4–12), and on phones the whole width. */
@media (max-width: 1200px) { :root { --measure: calc(var(--col) * 9 + var(--col-gap) * 8); } }
@media (max-width: 860px) { :root { --measure: 100%; } }
.toc { position: sticky; top: calc(var(--header-h) + var(--s4)); display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.toc a { color: var(--ink-2); text-decoration: none; padding: 6px 10px; border-left: 2px solid var(--line); transition: color .15s, border-color .15s; }
.toc a[aria-current="true"] { color: var(--petrol-strong); border-color: var(--petrol); font-weight: 600; }
.toc a:hover { color: var(--petrol); border-color: var(--petrol); }
.prose :is(p, ul, ol, h2, h3, h4, blockquote, .note, .timeline, .fig) { max-width: var(--measure); }
.prose .card-box { max-width: 720px; }
.prose .fig :is(p, ul, ol) { max-width: none; }
.prose section { scroll-margin-top: calc(var(--header-h) + var(--s4)); }   /* keep headings clear of the sticky menu when following an anchor link */
.prose section { max-width: var(--measure); padding-bottom: var(--s6); margin-bottom: var(--s6); border-bottom: 1px solid var(--line); }   /* the rule ends where the text ends (column 10) */
.prose section:last-child { border-bottom: 0; }
.prose p, .prose li { color: var(--ink-2); font-size: 17px; line-height: 1.7; }
@media (min-width: 1280px) { .prose p, .prose li { font-size: 18px; line-height: 1.8; } }
.prose li { margin-bottom: var(--s2); }
.prose h2 { margin-bottom: var(--s4); }
.prose .note { border-left: 3px solid var(--petrol); padding: var(--s3) var(--s4); background: var(--petrol-tint); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.prose .note p { margin: 0; font-size: 16px; color: var(--ink); }
/* Chronology: year column + description */
.timeline { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 0 var(--s4); margin: var(--s4) 0; }
.timeline dt { font: 600 15px/1.4 var(--serif); color: var(--petrol-strong); padding: var(--s3) 0; border-top: 1px solid var(--line); }
.timeline dd { margin: 0; padding: var(--s3) 0; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 16px; line-height: 1.65; }
.timeline dd strong { color: var(--ink); }
@media (max-width: 520px) { .timeline { grid-template-columns: 1fr; } .timeline dd { border-top: 0; padding-top: 0; } }
/* References: compact bibliography — small type, hanging indent, tight spacing */
.prose .ref-h { font: 600 12px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: var(--s4) 0 var(--s2); }
.prose .ref-h:first-of-type { margin-top: 0; }
.prose .references { list-style: none; padding: 0; margin: 0 0 var(--s3); }
.prose .references li { font-size: 14px; line-height: 1.5; margin: 0 0 6px; padding-left: 1.5em; text-indent: -1.5em; color: var(--ink-2); }
.prose .references li a { overflow-wrap: anywhere; }
.prose .references .ref-note { color: var(--muted); }
@media (max-width: 860px) {
  .prose-layout { grid-template-columns: 1fr; gap: var(--s4); }
  /* On mobile the table of contents is one scrollable row that sticks below the menu */
  .toc {
    position: sticky; top: var(--header-h); z-index: 5; flex-direction: row; flex-wrap: nowrap; overflow-x: auto;
    gap: 0; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); background: var(--paper);
    border-bottom: 1px solid var(--line); scrollbar-width: none;
  }
  .toc::-webkit-scrollbar { display: none; }
  .toc a { border-left: 0; border-bottom: 2px solid transparent; white-space: nowrap; padding: 10px 10px; font-size: 14px; }
  .toc a[aria-current="true"] { border-bottom-color: var(--petrol); }
  .prose section { scroll-margin-top: calc(var(--header-h) + 56px); }
  .page-head:has(+ .prose-layout) { margin-bottom: 0; border-bottom: 0; padding-bottom: var(--s4); }
}

/* ── 12. Artifact page: heading ───────────────────────────────────────── */
.record-head { padding: var(--s5) 0 var(--s4); }
.crumbs { font-size: 14px; color: var(--muted); margin-bottom: var(--s2); display: flex; gap: 6px; flex-wrap: wrap; }
.crumbs a { color: var(--muted); }
.record-head h1 { font-size: clamp(28px, 3.2vw, 40px); margin-bottom: var(--s2); }
.record-sub { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: center; font-size: 15px; color: var(--ink-2); }
.record-sub .sep { color: var(--line-strong); }

/* ── 13. Inspection workspace (dark) ──────────────────────────────────── */
.workspace {
  --panel-w: 320px;
  display: grid; grid-template-columns: minmax(0, 1fr) 10px var(--panel-w);
  height: calc(100vh - var(--header-h) - 24px); height: calc(100dvh - var(--header-h) - 24px);
  min-height: 520px; max-height: 1100px;
  background: var(--vw-bg); color: var(--vw-text); border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line);
}
.workspace.panel-closed { grid-template-columns: minmax(0, 1fr) 10px 0; }
/* The stage spans all three columns; the handle and the panel sit on top of it in the same row */
.ws-stage { grid-column: 1 / -1; grid-row: 1; }
.ws-resizer { grid-column: 2; grid-row: 1; z-index: 6; }
.ws-panel { grid-column: 3; grid-row: 1; z-index: 6; position: relative; }
.workspace.resizing { user-select: none; cursor: col-resize; }
.workspace.resizing canvas { pointer-events: none; }
/* Panel handle: drag to resize, the middle button hides/shows */
.ws-resizer { position: relative; background: transparent; cursor: col-resize; touch-action: none; }
.ws-resizer:hover::before, .ws-resizer:focus-visible::before, .workspace.resizing .ws-resizer::before { background: var(--vw-accent); opacity: .7; }
.ws-resizer::before { content: ""; position: absolute; left: 4px; width: 3px; top: 50%; height: 40px; margin-top: -72px; border-radius: 2px; background: rgba(36,39,43,.22); transition: background .15s, opacity .15s; }
.ws-collapse {
  position: absolute; top: 50%; left: -6px; width: 22px; height: 36px; margin-top: -18px; z-index: 5;
  border: 1px solid rgba(255,255,255,.7); border-radius: 8px; background: rgba(255,255,255,.6); color: var(--vw-muted);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  cursor: pointer; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(36,39,43,.12); font: 600 14px/1 var(--sans);
}
.ws-collapse:hover { background: var(--petrol-tint); color: var(--petrol-strong); }
.workspace.panel-closed .ws-panel { visibility: hidden; }
.workspace:fullscreen { border-radius: 0; height: 100vh; max-height: none; }

.ws-stage { position: relative; min-width: 0; min-height: 0; display: flex; }
.ws-panes { flex: 1; display: grid; grid-template-columns: 1fr; gap: 2px; min-width: 0; min-height: 0; background: var(--line); }
.ws-panes.compare { grid-template-columns: 1fr 1fr; }
/* When comparing, both views split the area not covered by the panel equally (same size, same scale) */
.ws-panes.compare { margin-right: var(--panel-cover, 0px); margin-left: var(--drawer-cover, 0px); }
.pane { position: relative; min-width: 0; min-height: 0; background: var(--vw-bg); outline: none; }
.pane canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.pane canvas.overlay { pointer-events: none; cursor: default; }
.pane[data-tool="measure"] canvas:not(.overlay) { cursor: crosshair; }
.pane[data-tool="light"] canvas { cursor: crosshair; }
.pane canvas:active { cursor: grabbing; }
.pane[data-tool="light"] canvas:active { cursor: crosshair; }
.pane .underlay {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  pointer-events: none; opacity: .55; transition: opacity .6s;
}
.pane .underlay.hide { opacity: 0; }
.ws-panes.compare .pane.active { box-shadow: inset 0 0 0 2px var(--vw-accent); }
.pane-label {
  position: absolute; top: 64px; right: var(--s3); z-index: 2; pointer-events: none; max-width: calc(100% - 24px);
  font: 600 12px/1 var(--sans); letter-spacing: .08em; padding: 6px 8px; border-radius: var(--radius-sm);
  background: var(--vw-chrome); color: var(--vw-text); border: 1px solid var(--vw-line);
}
.ws-panes:not(.compare) .pane-label { display: none; }
/* View B has no toolbar on top; its label sits near the corner. */
.ws-panes.compare .pane[data-pane="b"] .pane-label { top: var(--s3); }

.ws-toolbar {
  /* in the middle of the visible area (excluding the side panel) */
  position: absolute; top: var(--s3); left: calc(var(--drawer-cover, 0px) + (100% - var(--drawer-cover, 0px) - var(--panel-cover, 0px)) / 2); transform: translateX(-50%); z-index: 3; display: flex; flex-wrap: wrap; gap: 4px;
  max-width: calc(100% - var(--drawer-cover, 0px) - var(--panel-cover, 0px) - 24px); width: max-content; justify-content: center;
}
.tool-group {
  display: flex; gap: 2px; padding: 3px; border-radius: var(--radius);
  background: rgba(250,248,244,.4); border: 1px solid rgba(255,255,255,.6);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 6px 20px rgba(36,39,43,.10), 0 1px 2px rgba(36,39,43,.06);
}
.tbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 40px; height: 40px; padding: 0 10px; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--vw-text); font: 500 13px/1 var(--sans); cursor: pointer;
}
.tbtn:hover { background: rgba(255,255,255,.55); }
.tbtn[aria-pressed="true"] { background: var(--vw-accent); color: var(--on-accent); }
.tbtn:disabled { opacity: .4; cursor: not-allowed; }
.tbtn svg { width: 18px; height: 18px; flex: none; }
.tbtn .lbl { white-space: nowrap; }
.workspace :focus-visible { outline: 2px solid var(--vw-accent); outline-offset: 2px; }

.ws-readout {
  position: absolute; left: calc(var(--s3) + var(--drawer-cover, 0px)); right: calc(var(--s3) + var(--panel-cover, 0px)); bottom: var(--s3); z-index: 3;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; pointer-events: none;
}
.ws-readout > * { pointer-events: auto; }
.rchip {
  font: 500 12px/1.3 var(--sans); padding: 6px 9px; border-radius: var(--radius-sm);
  background: rgba(250,248,244,.7); color: var(--vw-text); border: 1px solid rgba(255,255,255,.6);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-variant-numeric: tabular-nums;
}
.rchip.changed { border-color: var(--vw-accent); color: var(--petrol-strong); }
.rchip.enhanced { border-color: var(--vw-enh-line); color: var(--vw-enh-text); background: var(--vw-enh-bg); }
.ws-status { margin-left: auto; }

.ws-overlay {
  position: absolute; inset: 0 var(--panel-cover, 0px) 0 var(--drawer-cover, 0px); z-index: 4; display: grid; place-items: center; padding: var(--s5);
  background: rgba(246, 243, 238, .82); text-align: center;
}
.ws-overlay .box { max-width: 420px; background: var(--vw-panel); border: 1px solid var(--vw-line); border-radius: var(--radius); padding: var(--s5); }
.ws-overlay h2 { color: var(--vw-text); font-size: 20px; margin-bottom: var(--s2); }
.ws-overlay p { color: var(--vw-muted); font-size: 15px; }
.ws-overlay ul { text-align: left; color: var(--vw-text); font-size: 15px; padding-left: var(--s5); margin: 0 0 var(--s4); }
.ws-overlay li { margin-bottom: 6px; }
.ws-overlay kbd, .ws-panel kbd { font: 12px var(--mono); border: 1px solid var(--vw-line); border-bottom-width: 2px; border-radius: 3px; padding: 1px 5px; color: var(--vw-text); }
.ws-overlay .box { box-shadow: var(--shadow); }
.ws-overlay .btn-secondary { color: var(--vw-text); border-color: var(--vw-line); }
.ws-overlay .btn-secondary:hover { border-color: var(--vw-text); }
/* First-visit tip: a small card in the corner; the image stays visible and usable behind it. */
.ws-overlay.ws-tip { inset: auto auto 56px calc(12px + var(--drawer-cover, 0px)); display: block; padding: 0; background: none; text-align: left; pointer-events: none; }
.ws-overlay.ws-tip .box { pointer-events: auto; max-width: 340px; padding: 14px 16px; }
.ws-overlay.ws-tip h2 { font-size: 16px; margin-bottom: 6px; }
.ws-overlay.ws-tip ul { font-size: 13px; padding-left: 18px; margin-bottom: 10px; }
.ws-overlay.ws-tip li { margin-bottom: 3px; }
/* On phones the tip sits above the bottom sheet, clear of the toolbar (which may take two rows). */
@media (max-width: 760px), (max-height: 500px) and (orientation: landscape) and (pointer: coarse) {
  /* Between the toolbar and the sheet, whatever the sheet's height; a tall tip scrolls inside itself. */
  .ws-overlay.ws-tip { inset: 8px 12px 48px 12px; display: flex; align-items: flex-end; z-index: 5; }
  .ws-overlay.ws-tip .box { max-width: none; width: 100%; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; }
  /* Compact on narrow screens, so the tip leaves the object in view (owner's review, 9 Oct 2026). */
  .ws-overlay.ws-tip .box { padding: 12px 14px; }
  .ws-overlay.ws-tip h2 { font-size: 15px; margin-bottom: 4px; }
  .ws-overlay.ws-tip ul { font-size: 13.5px; margin-bottom: 8px; }
  .ws-overlay.ws-tip li { margin-bottom: 2px; }
  /* One line and its button (owner's decision, 9 Oct 2026). */
  .ws-overlay.ws-tip .box.tip-compact { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
  /* Just under the image when it sits under the toolbar (workspace.js::phoneSpareBelow), not at the screen's foot. */
  .workspace[style*="--ws-image-foot"] .ws-overlay.ws-tip:has(.tip-compact) { inset: calc(var(--ws-image-foot) + 12px) 12px auto 12px; align-items: flex-start; }
  .ws-overlay.ws-tip .tip-compact p { margin: 0; flex: 1; font-size: 13.5px; line-height: 1.4; }
  .ws-overlay.ws-tip .tip-kbd { display: none; }
}
/* A phone held sideways has little height: the tip keeps to the left so most of the image stays in view. */
@media (max-height: 500px) and (orientation: landscape) and (pointer: coarse) {
  .ws-overlay.ws-tip .box { max-width: min(400px, 55%); }
}

/* Side panel */
.ws-panel {
  display: flex; flex-direction: column; min-height: 0; margin: 10px 10px 10px 0; overflow: hidden;
  background: rgba(250,248,244,.4); border: 1px solid rgba(255,255,255,.6); border-radius: 12px;
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 10px 30px rgba(36,39,43,.10), 0 1px 2px rgba(36,39,43,.06);
  --vw-line: rgba(36,39,43,.12);
}
.ws-tabs { display: flex; border-bottom: 1px solid var(--vw-line); flex: none; padding: 0 6px; }
.ws-tabs button {
  flex: 1; min-height: 38px; border: 0; background: none; color: var(--vw-muted); cursor: pointer;
  font: 600 12.5px/1 var(--sans); border-bottom: 2px solid transparent;
}
.ws-tabs button[aria-selected="true"] { color: var(--vw-text); border-bottom-color: var(--vw-accent); }
.ws-tabs button:hover { color: var(--vw-text); }
.ws-body { overflow-y: auto; padding: 12px 14px; flex: 1; min-height: 0; scrollbar-width: thin; }
.ws-section { border-bottom: 1px solid var(--vw-line); padding-bottom: 12px; margin-bottom: 12px; }
.ws-section:last-child { border-bottom: 0; margin-bottom: 0; }
.ws-section > h2, .ws-section > h3 {
  font: 600 10.5px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--vw-muted); margin: 0 0 8px; display: flex; justify-content: space-between; align-items: center; min-height: 22px;
}
.ws-section p, .ws-help { color: var(--vw-muted); font-size: 12px; line-height: 1.5; margin: 6px 0 0; }
.ws-section { position: relative; }
.ws-subhead { font: 600 10.5px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--vw-muted); margin: 12px 0 6px; }
.ws-section .h-t { display: inline-flex; align-items: center; gap: 6px; }
/* Explanation attached to a heading: a small "?" and a note that opens below the heading (does not push the flow) */
.help-q {
  width: 16px; height: 16px; flex: none; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--vw-line); background: var(--vw-surface); color: var(--vw-muted);
  font: 700 10px/1 var(--sans); letter-spacing: 0; text-transform: none; display: inline-grid; place-items: center;
}
.help-q:hover, .help-q[aria-expanded="true"] { border-color: var(--vw-accent); color: var(--vw-accent); background: var(--petrol-tint); }
.help-pop {
  position: absolute; left: 0; right: 0; z-index: 20; margin-top: -4px;
  background: var(--vw-surface); color: var(--vw-text); border: 1px solid var(--vw-line); border-radius: var(--radius-sm);
  box-shadow: 0 6px 20px rgba(36,39,43,.16); padding: 10px 12px;
  font: 400 12.5px/1.5 var(--sans); letter-spacing: normal; text-transform: none;
}
.help-pop[hidden] { display: none; }
/* Dark glass: if the image behind is dark, the panel, toolbar and bottom labels switch to light text */
.glass-dark {
  --vw-text: #f3f1ec; --vw-muted: rgba(243,241,236,.74); --vw-line: rgba(255,255,255,.18);
  --vw-surface: #2c2f33; --vw-hover: rgba(255,255,255,.12);
  --vw-accent: #7cc3cb; --petrol-strong: #a6dce1; --petrol-tint: rgba(111,176,184,.24);
}
.ws-panel, .ws-drawer, .tool-group, .rchip { transition: background-color .3s, border-color .3s, color .3s; }
.ws-panel.glass-dark, .ws-drawer.glass-dark { background: rgba(24,26,29,.4); border-color: rgba(255,255,255,.14); color: var(--vw-text); }
.ws-toolbar.glass-dark .tool-group { background: rgba(24,26,29,.4); border-color: rgba(255,255,255,.14); }
.ws-toolbar.glass-dark .tbtn { color: var(--vw-text); }
.ws-toolbar.glass-dark .tbtn:hover { background: rgba(255,255,255,.12); }
.ws-toolbar.glass-dark .tbtn[aria-pressed="true"] { background: #2a7a84; color: #fff; }
.ws-readout.glass-dark .rchip:not(.enhanced) { background: rgba(24,26,29,.7); border-color: rgba(255,255,255,.14); color: var(--vw-text); }
.glass-dark .pbtn { background: rgba(255,255,255,.08); }
.glass-dark .pbtn:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.3); }
.glass-dark .field-dark input[type="number"], .glass-dark .field-dark input[type="text"] { background: rgba(0,0,0,.25); }
.glass-dark .views-list li { background: rgba(255,255,255,.06); }
.glass-dark .cite-box { background: rgba(0,0,0,.25); }
.glass-dark .ws-tabs button[aria-selected="true"] { color: #fff; }
.panel-dark .ws-collapse { background: rgba(24,26,29,.55); color: #f3f1ec; border-color: rgba(255,255,255,.2); }
.help-pop p { margin: 0; color: var(--vw-text); }
.help-pop p + p { margin-top: 6px; }
.ws-row { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.ws-row + .ws-row { margin-top: var(--s2); }
.pbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 32px; padding: 0 10px; border-radius: 7px; cursor: pointer;
  background: rgba(255,255,255,.45); color: var(--vw-text); border: 1px solid var(--vw-line); font: 500 12.5px/1.1 var(--sans);
}
.pbtn:hover { border-color: rgba(36,39,43,.25); background: rgba(255,255,255,.8); }
.pbtn[aria-pressed="true"] { border-color: var(--vw-accent); color: var(--petrol-strong); background: var(--petrol-tint); font-weight: 600; }
.pbtn:disabled { opacity: .45; cursor: not-allowed; }
.pbtn svg { width: 14px; height: 14px; flex: none; }
.pbtn.grow { flex: 1; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.seg .m-s, .ws-el-lbl { display: none; }
.seg .pbtn { justify-content: flex-start; text-align: left; }
.ws-specular { grid-column: 1 / -1; }   /* Specular Enhancement's three settings, a row of their own */
.field-dark { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--vw-muted); min-width: 0; }
.field-dark input[type="number"], .field-dark input[type="text"] {
  min-height: 30px; background: rgba(255,255,255,.6); color: var(--vw-text); border: 1px solid var(--vw-line);
  border-radius: 7px; padding: 0 8px; font: 13px var(--sans); width: 100%; font-variant-numeric: tabular-nums;
}
.field-dark .val { color: var(--vw-text); font-variant-numeric: tabular-nums; }
.field-dark .fd-head { display: flex; justify-content: space-between; align-items: baseline; }
/* Radiance Scaling's Colour switch; the swatches are radiance-math.js::RS_WARM and RS_COOL on white. */
.ws-rs-colour { margin-top: 6px; min-height: 28px; font-size: 11.5px; color: var(--vw-text); }
.ws-rs-colour input { width: 15px; height: 15px; }
.rs-tip { margin: 2px 0 0; font-size: 11px; color: var(--vw-muted); }
.ws-rs-colour .rs-key { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--vw-muted); }
.rs-sw { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-left: 4px; }
.rs-warm { background: rgb(255, 158, 56); }
.rs-cool { background: rgb(77, 143, 255); }
.range { width: 100%; accent-color: var(--vw-accent); min-height: 20px; margin: 0; }
.light-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; }
.light-row .field-dark + .field-dark { margin-top: 6px; }
/* Angle boxes next to their labels; rotate light below them */
.light-fields { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-inline { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--vw-muted); }
.field-inline span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.field-inline input {
  width: 58px; flex: none; min-height: 28px; padding: 0 6px; text-align: right; font: 13px var(--sans); font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,.6); color: var(--vw-text); border: 1px solid var(--vw-line); border-radius: 7px;
}
.glass-dark .field-inline input { background: rgba(0,0,0,.25); }
.light-fields .pbtn { min-height: 28px; font-size: 12px; padding: 0 8px; }
.light-trackball { display: block; width: 96px; height: 96px; touch-action: none; cursor: crosshair; border-radius: 50%; }

.views-list { list-style: none; margin: var(--s3) 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.views-list li { display: flex; align-items: center; gap: 4px; background: rgba(255,255,255,.5); border: 1px solid var(--vw-line); border-radius: 7px; padding: 4px 4px 4px 8px; }
.views-list .name { flex: 1; min-width: 0; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.views-list .when { font-size: 11px; color: var(--vw-muted); }
.views-list .pbtn { min-height: 26px; padding: 0 6px; font-size: 12px; }
.toast { min-height: 16px; font-size: 12px; color: var(--vw-accent); margin-top: var(--s2); }

/* Record and citation (in the panel, dark) */
.meta-group { margin-bottom: var(--s4); }
.meta-group h3 { font: 600 10.5px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--vw-muted); margin: 0 0 var(--s2); }
.meta-dl { display: grid; grid-template-columns: minmax(90px, 38%) minmax(0, 1fr); gap: 5px 10px; margin: 0; font-size: 12.5px; }
.meta-dl dt { color: var(--vw-muted); }
.meta-dl dd { margin: 0; color: var(--vw-text); overflow-wrap: anywhere; }
.meta-dl .auth-term { color: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.meta-dl .auth-term:hover { color: var(--accent); text-decoration-color: currentColor; }
.meta-dl .auth-src { margin-left: 5px; font-size: 11px; color: var(--muted); text-decoration: none; display: inline-block; }
.meta-dl code.hash { font-size: 10.5px; overflow-wrap: anywhere; user-select: all; }
.ws-subhead { font: 600 10.5px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--vw-muted); margin: var(--s3) 0 var(--s1); }
.ws-versions { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--vw-text); }
.ws-versions li { margin: 2px 0; }
.ws-refs { margin: 0; padding-left: 18px; }
.ws-refs li { margin: 0 0 4px; }
.ws-export { margin-top: 10px; }
.ws-export .pbtn { display: inline-flex; align-items: center; gap: 6px; }
.ws-versions li[aria-current] strong { color: var(--accent); }
.ws-versions .ws-note { color: var(--vw-muted); }
.meta-dl dd.empty { color: var(--vw-muted); font-style: italic; }
.meta-dl a { color: var(--vw-accent); }
.cite-box {
  white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.5 var(--mono); color: var(--vw-text);
  background: rgba(255,255,255,.55); border: 1px solid var(--vw-line); border-radius: var(--radius-sm);
  padding: var(--s3); margin: var(--s3) 0; max-height: 260px; overflow: auto; user-select: all;
}
.ws-panel a { color: var(--vw-accent); }
.fmt-seg { display: flex; gap: 4px; }
.fmt-seg .pbtn { min-height: 28px; font-size: 12px; }
.ws-panel .check { font-size: 12.5px; min-height: 28px; gap: 8px; }   /* the general .check is 15px; in the panel the same size as the other controls */

/* Record drawer (an artifact with several faces): a glass card on the left of the image with the faces and a
   quick record; the image is fitted into the area it leaves free. Closed, a slim tab stays at the left edge. */
.ws-drawer {
  position: absolute; top: 10px; left: 10px; bottom: 10px; width: var(--drawer-w, 248px); z-index: 5;
  display: flex; flex-direction: column; overflow: hidden; color: var(--vw-text);
  background: rgba(250,248,244,.4); border: 1px solid rgba(255,255,255,.6); border-radius: 12px;
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 10px 30px rgba(36,39,43,.10), 0 1px 2px rgba(36,39,43,.06);
  --vw-line: rgba(36,39,43,.12);
}
.ws-drawer[hidden] { display: none; }
.ws-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 6px 8px 14px; border-bottom: 1px solid var(--vw-line); flex: none; }
.ws-drawer-head h2 { font: 600 10.5px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--vw-muted); margin: 0; }
.ws-drawer-close {
  width: 28px; height: 28px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--vw-muted);
  font: 600 16px/1 var(--sans); cursor: pointer; display: grid; place-items: center;
}
.ws-drawer-close:hover { background: var(--petrol-tint); color: var(--petrol-strong); }
.ws-drawer-body { overflow-y: auto; padding: 12px 14px 14px; flex: 1; min-height: 0; scrollbar-width: thin; }
.ws-drawer a { color: var(--vw-accent); }
.ws-drawer-tab {
  position: absolute; left: 10px; top: 50%; z-index: 5; transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl; display: inline-flex; align-items: center; gap: 8px; padding: 12px 7px;
  border: 1px solid rgba(255,255,255,.7); border-radius: 10px; background: rgba(250,248,244,.62); color: var(--vw-text);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 2px 8px rgba(36,39,43,.12);
  font: 600 12px/1 var(--sans); letter-spacing: .02em; cursor: pointer;
}
.ws-drawer-tab svg { transform: rotate(90deg); }
.ws-drawer-tab:hover { background: var(--petrol-tint); color: var(--petrol-strong); }
/* The same edge handle as the side panel: drag to resize, the middle button hides/shows. On desktop it
   replaces the tab and the header button (both stay for phones, where the drawer floats over the image). */
.ws-drawer-resizer { position: absolute; top: 0; bottom: 0; left: calc(10px + var(--drawer-w, 248px)); width: 10px; z-index: 6; }
.ws-drawer-resizer::before { left: 3px; }
.workspace:not(.drawer-open) .ws-drawer-resizer { left: 0; }
.workspace:not(.drawer-open) .ws-drawer-resizer::before { display: none; }
.ws-drawer-tab, .ws-drawer-close { display: none; }
.ws-panel-head { display: contents; }
.ws-panel-tab, .ws-panel-close { display: none; }
/* Where the light comes from, while it moves (phones, or a closed panel): a small sphere above the bottom bar. */
.ws-light-hud {
  position: absolute; left: 8px; bottom: 44px; z-index: 4; width: 76px; height: 76px; padding: 4px; border-radius: 50%;
  background: rgba(20, 22, 25, .45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  pointer-events: none; opacity: 0; transition: opacity .25s ease;
}
.ws-light-hud.show { opacity: 1; }
.ws-light-hud .light-trackball { width: 68px !important; height: 68px !important; display: block; }
html[data-site-theme="dark"] .ws-drawer-tab { background: rgba(31,34,38,.78); border-color: rgba(255,255,255,.16); }

/* Faces inside the drawer: the catalogue cards of the artifacts page, one under another, in a smaller size */
.face-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
/* A face: its image and its name; the face being shown is framed in the accent colour. */
.face-card { display: block; text-decoration: none; color: var(--vw-text); }
.face-card .card-media { border-radius: 4px; outline: 1px solid var(--vw-line); outline-offset: -1px; }
.face-card h3 { margin: 8px 2px 0; font-size: 15px; font-weight: 600; }
.face-card:hover .card-media { outline-color: var(--vw-accent); }
.face-card[aria-current="true"] .card-media { outline: 2px solid var(--vw-accent); outline-offset: 2px; }
.face-card[aria-current="true"] h3 { color: var(--vw-accent); }

/* Mobile: the viewer fills the whole area; controls live in a translucent bottom sheet
   (when closed only the tabs show; tapping a tab opens it). */
/* The phone layout: narrow screens, and phones held sideways (a large iPhone is wider than 900 px then). Same query
   as PHONE_LAYOUT in workspace.js. */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) and (pointer: coarse) {
  .ws-resizer { display: none; }
  .workspace, .workspace.panel-closed {
    position: relative; grid-template-columns: 1fr; grid-template-rows: 1fr;
    border-radius: 0; margin: 0 calc(-1 * var(--gutter)); min-height: 360px;
  }
  .ws-stage { grid-column: 1; grid-row: 1; }
  /* The panel floats at the right edge over the image (the mirror of the faces drawer): closed, a slim
     "Examine" tab stays at the edge; open, it takes the height between the toolbar and the bottom bar. */
  .ws-panel {
    position: absolute; top: 58px; right: 8px; bottom: 8px; left: auto; margin: 0; z-index: 7;
    width: min(296px, calc(100% - 60px)); max-height: none; border-radius: 12px;
    background: rgba(250,248,244,.92);   /* over the image, not beside it: nearly opaque so the text stays readable */
    transition: transform .25s ease, visibility 0s, background-color .3s;
  }
  html[data-site-theme="dark"] .ws-panel:not(.glass-dark) { background: rgba(31,34,38,.92); }
  .workspace.panel-closed .ws-panel { visibility: hidden; transform: translateX(calc(100% + 16px)); transition: transform .25s ease, visibility 0s .25s; }
  .ws-panel-head { display: flex; align-items: stretch; border-bottom: 1px solid var(--vw-line); flex: none; }
  .ws-panel-head .ws-tabs { flex: 1; border-bottom: 0; min-width: 0; }
  /* Closing is plain to see (owner's request, 13 Oct 2026): a round arrow button that nudges once towards the edge it
     closes to, and a grip on the panel's outer edge saying it can be swiped away. */
  .ws-panel-close, .ws-drawer-close {
    display: grid; place-items: center; flex: none; align-self: center; width: 34px; height: 34px; margin: 0 8px; padding: 0;
    border: 1px solid var(--vw-line); border-radius: 50%; background: rgba(255,255,255,.6); color: var(--vw-text); cursor: pointer;
  }
  html[data-site-theme="dark"] .ws-panel-close, html[data-site-theme="dark"] .ws-drawer-close,
  .glass-dark .ws-panel-close, .glass-dark .ws-drawer-close { background: rgba(255,255,255,.08); }
  .workspace:not(.panel-closed) .ws-panel-close svg { animation: ws-nudge-right .5s ease-in-out .35s 2; }
  .workspace.drawer-open .ws-drawer-close svg { animation: ws-nudge-left .5s ease-in-out .35s 2; }
  .ws-panel::before, .ws-drawer::after {
    content: ""; position: absolute; top: 50%; z-index: 2; width: 4px; height: 40px; margin-top: -20px; border-radius: 2px;
    background: rgba(36,39,43,.22); pointer-events: none;
  }
  html[data-site-theme="dark"] .ws-panel::before, html[data-site-theme="dark"] .ws-drawer::after,
  .glass-dark.ws-panel::before, .glass-dark.ws-drawer::after { background: rgba(255,255,255,.28); }
  .ws-panel::before { left: 4px; }
  .ws-drawer::after { right: 4px; }
  .ws-light-hud { top: 58px; bottom: auto; }   /* below the toolbar: the bottom of the viewer may sit under the browser bar */
  .ws-panel-tab {
    position: absolute; right: 6px; top: 40%; transform: translateY(-50%); z-index: 5; display: inline-flex; align-items: center; gap: 8px; padding: 10px 6px;
    writing-mode: vertical-rl; border: 1px solid rgba(255,255,255,.7); border-radius: 10px; background: rgba(250,248,244,.62);
    color: var(--vw-text); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 2px 8px rgba(36,39,43,.12);
    font: 600 12px/1 var(--sans); letter-spacing: .02em; cursor: pointer;
  }
  html[data-site-theme="dark"] .ws-panel-tab { background: rgba(31,34,38,.78); border-color: rgba(255,255,255,.16); }
  .workspace:not(.panel-closed) .ws-panel-tab { display: none; }
  .ws-panel { color: var(--vw-text); }
  .ws-tabs button { min-height: 44px; font-size: 13.5px; }
  .ws-body { overflow-y: auto; overscroll-behavior: contain; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .ws-panes.compare { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; margin-right: 0; }
  /* Every control stays whole: slightly smaller buttons, and on the narrowest phones a second row. */
  .ws-toolbar { top: 8px; left: 50%; max-width: calc(100% - 16px); flex-wrap: wrap; row-gap: 4px; }
  .field-inline input { min-height: 36px; font-size: 16px; width: 64px; }
  .tool-group { padding: 2px; }
  .tbtn .lbl { display: none; }
  .tbtn { min-width: 35px; height: 38px; padding: 0 5px; }
  .tool-group { gap: 1px; }
  .ws-readout { bottom: 8px; left: 8px; right: 8px; }
  .rchip { padding: 4px 7px; font-size: 11.5px; }
  .ws-overlay { inset: 0; }
  /* The drawer floats over the image (closed by default) between the toolbar and the bottom sheet. */
  .ws-drawer {
    top: 58px; left: 8px; bottom: auto; max-height: calc(100% - 66px); width: min(272px, calc(100% - 16px)); z-index: 7;
    background: rgba(250,248,244,.9);   /* over the image, not beside it: nearly opaque so the text stays readable */
  }
  html[data-site-theme="dark"] .ws-drawer:not(.glass-dark) { background: rgba(31,34,38,.92); }
  .ws-drawer-tab { left: 6px; top: 40%; padding: 10px 6px; }
  .ws-drawer-resizer { display: none; }
  .ws-drawer-close { display: grid; margin-right: 0; }
  .ws-drawer-tab { display: inline-flex; }
  .workspace.drawer-open .ws-drawer-tab { display: none; }
  .ws-drawer .card-media { aspect-ratio: 16 / 9; }   /* shorter cards: two fit between the toolbar and the sheet */
  .pane-label { top: 60px; }
  .ws-panes.compare .pane[data-pane="b"] .pane-label { top: var(--s2); }
  .hide-mobile { display: none !important; }
  .light-row { grid-template-columns: 104px minmax(0, 1fr); }
  .light-trackball { width: 104px; height: 104px; }
  .pbtn { min-height: 38px; }
  .field-dark input[type="number"], .field-dark input[type="text"] { min-height: 38px; font-size: 16px; }   /* prevent iOS from zooming */
  .help-q { width: 22px; height: 22px; font-size: 12px; position: relative; }
  .help-q::after { content: ""; position: absolute; inset: -11px; }   /* a 44 px target around the small mark */
  /* Readable text and finger-sized controls in the sheet */
  .ws-section p, .ws-help { font-size: 13px; }
  .ws-subhead { font-size: 11.5px; }
  .field-dark, .field-inline { font-size: 13px; }
  .meta-dl, .ws-versions { font-size: 14px; }
  .light-fields .pbtn, .fmt-seg .pbtn, .views-list .pbtn { min-height: 38px; font-size: 13px; }
  .ws-panel .check { min-height: 38px; font-size: 14px; }
  .views-list .name { font-size: 14px; }
  .views-list .when { font-size: 12px; }
  .range { min-height: 32px; }
  .ws-panel .pbtn { font-size: 13.5px; }

  /* A compact Examine tab: the light is moved by a finger on the image (a small sphere in the corner shows where it
     comes from), so the dial and the angle fields give way to one row (elevation slider + orbit); the modes fit one row
     with short names; gain and brightness sit side by side.
 */
  .ws-section[aria-labelledby="ws-h-light"] { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: end; }
  .ws-section[aria-labelledby="ws-h-light"] > h2, .ws-section[aria-labelledby="ws-h-light"] > .help-pop { grid-column: 1 / -1; }
  .ws-section[aria-labelledby="ws-h-light"] [data-light], .light-fields .field-inline { display: none; }
  .ws-section[aria-labelledby="ws-h-light"] .light-row { grid-column: 2; grid-row: 2; display: block; }
  .ws-el-row { grid-column: 1; grid-row: 2; display: block; min-width: 0; }
  .ws-el-lbl { display: flex; gap: 6px; font-size: 12.5px; opacity: .85; }
  .ws-el-row .range { margin-top: 2px !important; }
  .seg { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }   /* the modes of the data in one row */
  .seg[data-count="5"], .seg[data-count="6"] { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* five or six do not fit: 3 + 2, 3 + 3 */
  .seg .pbtn { justify-content: center; text-align: center; padding: 0 2px; font-size: 12px; }
  .seg .m-l { display: none; }
  .seg .m-s { display: inline; }
  .ws-sliders { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .ws-sliders:has(> [data-gain][hidden]) { grid-template-columns: 1fr; }
  .ws-sliders .field-dark { margin-top: 8px !important; }
}

/* The standalone viewer page (viewer/index.html) */
.standalone { height: 100vh; height: 100dvh; margin: 0; display: flex; flex-direction: column; background: var(--vw-bg); }
.standalone-bar { display: flex; align-items: center; gap: var(--s4); padding: 0 var(--s4); height: 52px; background: var(--vw-panel); color: var(--vw-text); border-bottom: 1px solid var(--vw-line); flex: none; }
.standalone-bar .brand { color: var(--vw-text); font-size: 18px; }
.standalone-bar .brand-logo { height: 26px; }
.acc-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
/* Sharing a record (Share box on the account page) */
.acc-share-h { margin: 12px 0 4px; font: 600 11.5px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.acc-share-h:first-child { margin-top: 2px; }
.select-sm { min-height: 32px; padding-top: 4px; padding-bottom: 4px; font-size: 13px; width: auto; max-width: 100%; }

/* Embedded viewer (web/embed.html): the workspace fills the frame at every width; the bar sits below it. */
body.embed { height: 100vh; height: 100dvh; min-height: 0; margin: 0; display: flex; flex-direction: column; overflow: hidden; }
body.embed .workspace, body.embed .workspace.panel-closed { flex: 1; height: auto; min-height: 0; max-height: none; margin: 0; border: 0; border-radius: 0; }
.embed-bar { display: flex; align-items: center; gap: var(--s3); padding: 0 var(--s3); min-height: 36px; background: var(--vw-panel); color: var(--vw-text); border-top: 1px solid var(--vw-line); font-size: 12.5px; flex: none; }
.embed-bar .embed-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.embed-bar .embed-meta { color: var(--vw-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.embed-bar a { color: var(--vw-accent); white-space: nowrap; }
.standalone-bar .title { color: var(--vw-muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.standalone-bar a.back { margin-left: auto; color: var(--vw-accent); font-size: 14px; white-space: nowrap; }
.standalone .workspace { flex: 1; height: auto; max-height: none; min-height: 0; border-radius: 0; border: 0; }
/* Tablets and narrow windows: the open panel covers less than half of the image; the catalogue shows two columns. */
@media (min-width: 540px) and (max-width: 900px) { .ws-panel { width: min(288px, 46%); } }
@media (min-width: 480px) and (max-width: 900px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .standalone { height: auto; min-height: 100vh; } .standalone .workspace { margin: 0; } }

/* ── 14. Forms and the upload page ─────────────────────────────────────── */
.card-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s5); margin-bottom: var(--s4); }
.card-box h2 { font-size: 20px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--s3); font-size: 14px; }
.field input, .field select, .field textarea { min-height: 42px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 8px 10px; font: 15px var(--sans); background: var(--surface); }
.req { color: var(--danger); }
.help { font-size: 14px; color: var(--muted); }
.dropzone { border: 2px dashed var(--line-strong); border-radius: var(--radius); padding: var(--s6); text-align: center; cursor: pointer; }
.dropzone:hover, .dropzone.over { border-color: var(--petrol); background: var(--petrol-tint); }
.stages { list-style: none; padding: 0; }
.progressbar { height: 6px; background: var(--paper-2); border-radius: 3px; overflow: hidden; }
/* Upload page (membership) */
.up-step h2 { display: flex; align-items: center; gap: 10px; }
.up-n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--petrol-tint); color: var(--petrol-strong); font: 700 14px var(--sans); }
.up-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s4); }
.up-grid .wide { grid-column: 1 / -1; }
.up-done { color: var(--ok); font-weight: 600; }
.up-faces { display: grid; gap: var(--s3); margin-top: var(--s4); }
/* One card per face, all alike: name, what data it has (with a preview), and its actions */
.up-face { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s3) var(--s4); }
.up-face .field { margin: 0 0 var(--s3); max-width: 360px; }
.up-face-main { display: flex; gap: var(--s4); align-items: center; }
.up-face-main.dropzone { padding: var(--s5); justify-content: center; text-align: left; cursor: default; }
.up-face-thumb img { display: block; width: 132px; height: 88px; object-fit: contain; background: var(--thumb-bg); border-radius: var(--radius-sm); }
.up-face-state { flex: 1; min-width: 0; }
.up-face-state > strong { display: block; font-size: 15px; }
.up-face-state .help { margin: 4px 0 0; }
.up-face-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s3); }
.up-face-actions [data-remove] { margin-left: auto; }
.up-face [data-err] { margin: var(--s2) 0 0; }
.up-face [data-err]:empty { display: none; }
.up-face-add { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-top: var(--s4); }
.up-face-add .help { margin: 0; }
.up-quota { margin-top: var(--s2); }
.linkbtn { border: 0; background: none; padding: 0; color: var(--petrol); text-decoration: underline; cursor: pointer; font: inherit; }
.progressbar i { display: block; height: 100%; width: 0; background: var(--petrol); transition: width .2s; }
.progressbar { margin-top: var(--s3); }
@media (max-width: 760px) { .up-grid { grid-template-columns: 1fr; } .up-face-main { flex-direction: column; align-items: flex-start; } .up-face-actions [data-remove] { margin-left: 0; } }

/* ── 15. Artifact page: full-screen inspection setting ─────────────────────
   The viewer spans edge to edge and the full height below the header strip;
   it behaves like the page itself, not like an embedded box. */
.page-object { --record-h: 56px; }
.page-object main.wrap { padding: 0; max-width: none; }
/* The record fills the screen from the first paint, so the footer is not drawn high and then pushed down (layout shift,
   performance audit 13 Oct 2026). */
.page-object main.wrap { min-height: calc(100dvh - var(--header-h)); }
.page-object .site-header .wrap { max-width: none; }
.page-object #record-state { margin: var(--s7) var(--gutter); }
.page-object .record-head {
  display: flex; align-items: center; gap: var(--s2) var(--s4); flex-wrap: nowrap;
  height: var(--record-h); padding: 0 var(--gutter); border-bottom: 1px solid var(--line); overflow: hidden;
}
.page-object .crumbs { margin: 0; flex: none; }
.page-object .crumbs #crumb-title, .page-object .crumbs span[aria-hidden] { display: none; }
.page-object .record-head h1 {
  font-size: 22px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto;
}
.page-object .record-sub { flex-wrap: nowrap; overflow: hidden; white-space: nowrap; font-size: 14px; min-width: 0; }
/* Faces of one artifact: a segmented switch in the record bar */
.face-tabs { display: flex; flex: none; margin-left: auto; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; max-width: 60%; overflow-x: auto; }
.face-tabs button { flex: none; border: 0; background: none; padding: 6px 12px; font: 600 13px var(--sans); color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.face-tabs button + button { border-left: 1px solid var(--line); }
.face-tabs button:hover { background: var(--paper-2); color: var(--ink); }
.face-tabs button[aria-pressed="true"] { background: var(--petrol); color: var(--on-accent); }
html[data-site-theme="dark"] .face-tabs button[aria-pressed="true"] { background: #2a7a84; }
.page-object .workspace {
  border: 0; border-radius: 0; max-height: none;
  height: calc(100vh - var(--header-h) - var(--record-h));
  height: calc(100dvh - var(--header-h) - var(--record-h));
}
.page-object .site-footer { margin-top: 0; }
/* Similar artifacts: cards below the viewer (wide screens); a short list in the Record tab on phones. */
.page-object .related { padding: var(--s6) 0 var(--s7); border-top: 1px solid var(--line); }
.related-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s4); flex-wrap: wrap; }
.related-head h2 { margin: 0; font-size: 22px; }
.related-head a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; }
.ws-related { display: none; }
.ws-related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ws-related a { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: center; color: inherit; text-decoration: none; min-height: 44px; }
.ws-related-media { width: 64px; height: 48px; border-radius: 6px; overflow: hidden; background: var(--thumb-bg); }
.ws-related-media img { width: 100%; height: 100%; object-fit: contain; display: block; }   /* never cropped */
.ws-related strong { display: block; font-size: 14px; line-height: 1.3; font-weight: 600; }
.ws-related small { display: block; font-size: 12.5px; opacity: .75; margin-top: 2px; }
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) and (pointer: coarse) {
  /* One-line title; details are in the Record tab. The viewer fills the rest of the screen. */
  .page-object { --record-h: 44px; }
  .page-object .record-head { gap: var(--s2); }
  .page-object .record-head h1 { font-size: 17px; }
  .page-object .record-sub { display: none; }
  /* An unpublished record keeps its label in the heading line on phones too */
  .page-preview .record-sub { display: flex; flex: none; }
  .page-preview .record-sub > :not([data-preview-note]) { display: none; }
  .face-tabs { max-width: 55%; }
  .face-tabs button { padding: 4px 10px; font-size: 12px; }
  /* The page moves by exactly the site header's height: pushing it up hides the header and lets Safari fold its
     own bars, so the viewer gets (nearly) the whole screen. The viewer is one screen tall below the record bar,
     and the side panel keeps to the screen, so everything is visible before and after. Dragging the
     image never moves the page (the canvas takes the touch). */
  .page-object .workspace, .page-object .workspace.panel-closed {
    margin: 0;
    height: calc(100vh - var(--record-h));
    height: calc(100dvh - var(--record-h));
  }
  .page-object .site-header { position: relative; }   /* it scrolls away instead of staying on top */
  /* the panel keeps to the screen: anchored at its bottom, as tall as the viewer below the toolbar while the header shows */
  .page-object .ws-panel { position: fixed; top: auto; bottom: 8px; height: calc(100vh - var(--header-h) - var(--record-h) - 74px); height: calc(100dvh - var(--header-h) - var(--record-h) - 74px); }
  .page-object .workspace.ws-full .ws-panel { position: absolute; top: 58px; bottom: 8px; height: auto; }
  .page-object:has(#record:not([hidden])) .site-footer { display: none; }
  .page-object .related { display: none; }
  .page-object .ws-related { display: block; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--vw-line); }
}
@media (max-height: 500px) and (orientation: landscape) and (pointer: coarse) {
  .page-object .workspace, .page-object .workspace.panel-closed { min-height: 0; }
}

/* ── Account page (account.html) ──────────────────────────────────────── */
.acc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
.acc-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); padding: var(--s5); min-width: 0; }
.acc-card h2 { font-size: 20px; margin: 0 0 var(--s3); }
.acc-card > p:last-child { margin-bottom: 0; }
.acc-wide { grid-column: 1 / -1; }
.acc-buttons { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s4) 0; }
.acc-form { display: flex; flex-direction: column; gap: var(--s2); }
.acc-form label:not(.check) { font-weight: 600; font-size: 15px; }
.acc-form .small { margin: 0; }
.acc-orcid { margin: var(--s2) 0 0; font-size: 15px; }
.acc-orcid a { display: inline-flex; align-items: center; gap: 6px; word-break: break-all; }
.acc-methods, .acc-list { list-style: none; margin: 0 0 var(--s3); padding: 0; }
.acc-methods li, .acc-list li {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s3) 0; border-bottom: 1px solid var(--line);
}
.acc-methods li > span:first-child { font-weight: 600; margin-right: auto; }
.acc-list li > :first-child { font-weight: 600; margin-right: auto; }
.acc-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s2); }
.acc-head h2 { margin: 0; }
.acc-actions { display: inline-flex; gap: 4px; }
.acc-note { flex-basis: 100%; margin: 0; font-size: 14px; color: var(--ink-2); background: var(--danger-tint); padding: 8px 10px; border-radius: var(--radius-sm); }
.chip-wait { background: var(--vw-enh-bg); border-color: var(--vw-enh-line); color: var(--vw-enh-text); }
.chip-back { background: var(--danger-tint); border-color: var(--danger); color: var(--danger); }
.review-item { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--s4); padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.review-item img { width: 180px; height: 135px; object-fit: contain; background: var(--thumb-bg); border-radius: var(--radius-sm); }
.review-item h3 { margin: 0 0 4px; font-size: 18px; }
.review-facts { display: grid; grid-template-columns: max-content 1fr; gap: 2px var(--s3); margin: var(--s2) 0; font-size: 14px; }
.review-facts dt { color: var(--muted); }
.review-facts dd { margin: 0; }
.review-reject textarea { width: 100%; margin-top: 4px; }
@media (max-width: 760px) { .review-item { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .acc-grid { grid-template-columns: 1fr; } .acc-card { padding: var(--s4); } }

/* Account: sections as tabs (the address follows them), an overview, and the member's records as catalogue cards */
body[data-page="account"] .page-head { margin-bottom: var(--s5); display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s4); align-items: end; }
body[data-page="account"] .page-head > :not(.acc-head-upload) { grid-column: 1; }
.acc-head-upload { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.acc-panel[hidden] { display: none !important; }
.acc-tabs {
  display: flex; align-items: flex-end; gap: 2px; margin: 0 0 var(--s5); border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none;
}
.acc-tabs::-webkit-scrollbar { display: none; }
/* On a phone the tabs wrap onto a second line rather than run off the screen unseen (user test, 13 Oct 2026). */
@media (max-width: 640px) { .acc-tabs { flex-wrap: wrap; overflow: visible; } .acc-tabs [role="tab"] { padding: 8px 10px; } }
.acc-tabs [role="tab"] {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; margin-bottom: -1px; white-space: nowrap;
  border-bottom: 2px solid transparent; color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 15px;
}
.acc-tabs [role="tab"]:hover { color: var(--ink); }
.acc-tabs [role="tab"][aria-selected="true"] { color: var(--ink); border-bottom-color: var(--petrol); }
.acc-count {
  display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: 999px; text-align: center;
  background: var(--paper-2); border: 1px solid var(--line); color: var(--ink-2); font: 600 12px/1.4 var(--sans);
}
.acc-count-wait { background: var(--vw-enh-bg); border-color: var(--vw-enh-line); color: var(--vw-enh-text); }
.acc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); margin-bottom: var(--s5); }
.acc-stat {
  display: flex; flex-direction: column; gap: 6px; padding: var(--s4); text-align: left; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); font: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.acc-stat:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.acc-stat-n { font: 600 30px/1 var(--serif); }
.acc-stat-l { color: var(--ink-2); font-size: 14px; }
.acc-attn { list-style: none; margin: 0; padding: 0; }
.acc-attn li { display: flex; flex-direction: column; gap: 8px; padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.acc-attn li:last-child { border-bottom: 0; }
.acc-attn .chip { margin-left: 6px; }
.acc-meter { height: 10px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--line); overflow: hidden; }
.acc-meter span { display: block; height: 100%; background: var(--petrol); border-radius: inherit; }
.acc-meter[data-level="high"] span { background: var(--vw-enh-text); }
.acc-meter[data-level="full"] span { background: var(--danger); }
.acc-meter-text { margin: var(--s2) 0 0; font-size: 15px; }
.acc-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); }
.acc-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.acc-filter {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink-2); font: 600 14px/1 var(--sans);
}
.acc-filter:hover:not(:disabled) { border-color: var(--line-strong); color: var(--ink); }
.acc-filter[aria-pressed="true"] { background: var(--petrol-tint); border-color: #bcd3d4; color: var(--petrol-strong); }
.acc-filter:disabled { opacity: .45; cursor: default; }
.acc-search { width: min(280px, 100%); }
.acc-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--s5); }
.acc-art { background: var(--surface); }
.acc-art-media { display: block; }
.acc-art .card-body h3 { font-size: 18px; }
.acc-art h3 a { color: inherit; text-decoration: none; }
.acc-art h3 a:hover { text-decoration: underline; }
.acc-art .card-foot { margin-top: 0; padding-top: 2px; }
.acc-art .acc-note { font-size: 13.5px; }
.acc-art .acc-actions { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin-top: auto; padding-top: var(--s3); }
.acc-art .acc-actions > .btn { width: 100%; }
/* The other actions, one to a line under a hairline; the settings as switches under another (owner's request, 11 Oct 2026). */
.acc-art .act-more { display: flex; flex-direction: column; align-items: flex-start; border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
.acc-art .act-more .btn { padding: 0; min-height: 32px; }
.acc-art .act-more .btn:hover { background: none; text-decoration: underline; }
.acc-art .act-settings { align-items: stretch; }
.act-switch { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0; border: 0; background: none; font: 500 14px/1 var(--sans); color: var(--ink-2); cursor: pointer; }
.act-switch-label { flex: 1; text-align: left; }
.act-switch-track { position: relative; flex: none; width: 34px; height: 20px; border-radius: 10px; background: var(--line-strong); transition: background .15s; }
.act-switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s; }
.act-switch[aria-checked="true"] .act-switch-track { background: var(--petrol); }
.act-switch[aria-checked="true"] .act-switch-track::after { transform: translateX(14px); }
.act-switch-state { width: 2.2em; font-size: 13px; color: var(--muted); }
.act-switch:focus-visible { outline: 2px solid var(--petrol); outline-offset: 2px; }
.act-switch:disabled { opacity: .6; cursor: default; }
@media (prefers-reduced-motion: reduce) { .act-switch-track, .act-switch-track::after { transition: none; } }
.acc-views { list-style: none; margin: 0 0 var(--s4); padding: 0; }
.acc-views li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--s3); padding: 10px 0; border-bottom: 1px solid var(--line); }
.acc-views li > a { font-weight: 600; }
.acc-views li > .muted { margin-right: auto; }
.acc-views-h { font-size: 17px; margin: var(--s4) 0 0; display: flex; align-items: center; gap: 8px; }
.acc-views-h:first-child { margin-top: 0; }
.acc-views-h a { color: inherit; }
/* Administration: a sub-navigation, compact record rows with a thumbnail, members and the activity feed */
.acc-subnav { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--s5); }
.acc-subnav a {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink-2); font: 600 14px/1 var(--sans);
}
.acc-subnav a:hover { border-color: var(--line-strong); color: var(--ink); }
.acc-subnav a[aria-current] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
[data-admin-view][hidden] { display: none !important; }
.acc-stat-s { color: var(--muted); font-size: 13px; }
.adm-owner { display: flex; align-items: center; gap: var(--s3); margin: 0 0 var(--s3); font-size: 15px; }
.adm-records, .adm-members, .adm-activity { list-style: none; margin: 0; padding: 0; }
/* Records (administration): a header row, then thumbnail | record | uploaded by | uploaded | size, actions below */
.adm-rec, .adm-head { display: grid; grid-template-columns: 96px minmax(0, 2.6fr) minmax(0, 1.3fr) minmax(0, 1.1fr) minmax(72px, .6fr); gap: var(--s2) var(--s4); }
.adm-rec { padding: var(--s4) 0; border-bottom: 1px solid var(--line); align-items: start; }
.adm-head { padding: 0 0 var(--s2); border-bottom: 1px solid var(--line-strong); font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.adm-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14.5px; overflow-wrap: anywhere; }
.adm-col a { text-decoration: none; }
.adm-size { text-align: right; align-items: flex-end; }
.adm-label { display: none; }
.adm-rec .adm-actions { grid-column: 2 / -1; }
.adm-thumb { width: 96px; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); background: var(--thumb-bg); overflow: hidden; }
.adm-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.adm-main { min-width: 0; }
.adm-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 600; }
.adm-title a { color: var(--ink); }
.adm-title .chip { font-weight: 500; min-height: 24px; font-size: 12.5px; }
.adm-main > p { margin: 4px 0 0; }
.adm-gaps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 0; }
.adm-gaps .chip { min-height: 24px; font-size: 12.5px; }
.adm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--s3); margin-top: var(--s2); }
.adm-actions .check { font-size: 14px; min-height: 32px; }
.adm-actions select.input { min-height: 32px; padding-top: 0; padding-bottom: 0; width: auto; }
.adm-members li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--line); align-items: center; }
.adm-member-stats { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 14px; text-align: right; }
.adm-members .adm-actions { grid-column: 1 / -1; margin-top: 0; }
.adm-members .adm-actions:empty { display: none; }
.adm-activity li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--s3); padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.adm-activity li:last-child { border-bottom: 0; }
/* Administration: vocabulary */
.adm-term-kinds { margin-bottom: var(--s4); }
.adm-terms { list-style: none; margin: 0 0 var(--s4); padding: 0; }
.adm-term { padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.adm-term-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 90px; gap: var(--s2) var(--s3); align-items: end; }
.adm-term-fields label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink-2); min-width: 0; }
.adm-term-fields label span a { font-size: 12px; }
.adm-term-fields .input { min-height: 34px; }
.adm-term-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--s3); margin-top: var(--s2); }
.adm-term-meta .adm-actions { margin: 0 0 0 auto; }
.adm-term-add { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); }
.adm-term-add h3 { font-size: 17px; margin: 0 0 var(--s3); }
.review-proposals { background: var(--vw-enh-bg); border: 1px solid var(--vw-enh-line); border-radius: var(--radius-sm); padding: 8px 10px; }
/* Record form: the dating's century range under the period list */
.up-century { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.up-century select { flex: 1; min-width: 0; }
@media (max-width: 760px) { .adm-term-fields { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
  .adm-rec { grid-template-columns: 72px minmax(0, 1fr); gap: 4px var(--s3); }
  .adm-head { display: none; }
  .adm-col { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; font-size: 14px; }
  .adm-size { text-align: left; align-items: baseline; }
  .adm-label { display: inline; color: var(--ink-2); }
  .adm-label::after { content: ":"; }
  .adm-thumb { width: 72px; }
  .adm-activity li { grid-template-columns: 1fr; gap: 2px; }
}
@media (max-width: 760px) {
  .acc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-page="account"] .page-head { grid-template-columns: 1fr; }
  .acc-head-upload { grid-column: 1; grid-row: auto; justify-self: start; margin-top: var(--s4); }
}

/* Upload page: the record's tab and one tab per face (each face's own information) */
.up-tabs { margin: var(--s2) 0 var(--s4); }
.up-tabs button[role="tab"] { background: none; border: 0; border-bottom: 2px solid transparent; font-family: inherit; cursor: pointer; }
.up-face-info[hidden], #up-panel-main[hidden] { display: none; }
.up-face-info [data-note]:empty { display: none; }

/* Phones: text links (“All artifacts →”, “Examine artifact →”) get a finger-sized target without changing the layout. */
@media (max-width: 640px) {
  .text-link, .specimen figcaption a { display: inline-block; padding: 8px 0; margin: -8px 0; }
}

/* Full screen where the browser offers none (iPhones, in-app browsers): the viewer covers the window. */
.workspace.ws-full {
  position: fixed !important; inset: 0; z-index: 1000; margin: 0 !important; border: 0 !important; border-radius: 0 !important;
  height: 100vh !important; height: 100dvh !important; max-height: none !important; min-height: 0 !important;
}
html.ws-full-open, html.ws-full-open body { overflow: hidden; }
/* A phone held sideways: two views side by side, not one above the other. */
@media (max-height: 500px) and (orientation: landscape) and (pointer: coarse), (max-width: 900px) and (orientation: landscape) {
  .ws-panes.compare { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
  .ws-panes.compare .pane[data-pane="b"] .pane-label { top: 60px; }
}
/* Artifacts page: “Show results” closes the filters on phones and goes to the list. */
.filters-done { display: none; }
@media (max-width: 900px) { .filters.open .filters-done { display: inline-flex; width: 100%; } }

/* Figures on the information pages (About RTI): images computed from published records, and original diagrams */
.prose .fig { margin: var(--s5) 0 var(--s6); }
.prose .fig img { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); background: var(--stone); }
.prose .fig figcaption { margin-top: var(--s2); font-size: 14px; line-height: 1.55; color: var(--muted); }
.prose .fig-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.prose .fig-grid > div { position: relative; }
.prose .fig-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .prose .fig-grid-3 { grid-template-columns: 1fr; } }
.prose .fig-narrow { max-width: 520px; }   /* phone screens: not wider than they are read */
.prose .fig-tag {
  position: absolute; left: 8px; bottom: 8px; padding: 3px 8px; border-radius: 6px;
  background: rgba(20, 22, 25, .72); color: #fff; font: 600 12.5px/1.3 var(--sans);
}
.capture-svg { display: block; width: 100%; height: auto; color: var(--ink-2); }
.capture-svg .dome { fill: none; stroke: var(--line-strong); stroke-dasharray: 4 5; }
.capture-svg .ground { stroke: var(--line-strong); }
.capture-svg .ray { stroke: var(--muted); stroke-width: 1; opacity: .35; }
.capture-svg .ray-key { stroke: var(--petrol); stroke-width: 2; }
.capture-svg .lamp { fill: var(--paper); stroke: var(--ink-2); stroke-width: 1.5; }
.capture-svg .lamp-key { fill: var(--petrol); stroke: var(--petrol); }
.capture-svg .object { fill: var(--stone); stroke: var(--ink-2); stroke-width: 1.5; }
.capture-svg .sphere { fill: var(--ink); }
.capture-svg .sphere-hi { fill: #fff; }
.capture-svg .camera { fill: var(--ink-2); }
.capture-svg .view { stroke: var(--ink-2); stroke-dasharray: 2 4; }
.capture-svg .mark circle { fill: var(--ink); }
.capture-svg .mark text { font: 700 15px var(--sans); fill: var(--paper); }
.capture-svg .mark-key circle { fill: var(--petrol); }
/* Capture methods (About RTI): one tab per method (tabs.js); without the script the panels stand one under another */
.prose .method-tabs { margin: var(--s4) 0 var(--s6); max-width: var(--measure); }
.prose .method-tablist { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.prose .method-tablist [role="tab"] { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 10px 16px; font: 600 15px/1.2 var(--sans); color: var(--muted); cursor: pointer; }
.prose .method-tablist [role="tab"]:hover { color: var(--ink); }
.prose .method-tablist [role="tab"][aria-selected="true"] { color: var(--ink); border-bottom-color: var(--petrol); }
.prose .method-tablist [role="tab"]:focus-visible { outline: 2px solid var(--petrol); outline-offset: -2px; border-radius: 4px 4px 0 0; }
.prose .method-panel { padding-top: var(--s2); }
.prose .method-panel > .method-h:first-child { margin-top: var(--s3); }
.prose .method-h { font: 600 18px/1.3 var(--serif); color: var(--ink); margin: var(--s4) 0 var(--s2); }
.prose .method-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px var(--s4); margin: var(--s3) 0 var(--s4);
  padding: var(--s3) var(--s4); border-left: 3px solid var(--line-strong); font-size: 15px; line-height: 1.5; }
.prose .method-facts dt { font-weight: 600; color: var(--ink); }
.prose .method-facts dd { margin: 0; color: var(--ink-2); }
.prose .method-fig { width: 83%; margin: var(--s4) auto 0; }   /* the dome at the H-RTI drawing's scale (owner's request, 10 Oct 2026) */
@media (max-width: 480px) { .prose .method-facts { grid-template-columns: 1fr; gap: 0; } .prose .method-facts dd { margin-bottom: 6px; }
  .prose .method-tablist [role="tab"] { flex: 1; padding: 10px 6px; } }
.capture-svg .dome-shell { fill: none; stroke: var(--ink-2); stroke-width: 2.2; }
.capture-svg .dome-rim { fill: none; stroke: var(--line-strong); }
.capture-svg .dome-leds circle { fill: var(--paper); stroke: var(--ink-2); stroke-width: 1.2; }
.capture-svg .vlamps circle { fill: none; stroke: var(--ink-2); stroke-width: 1.2; stroke-dasharray: 2 2; }
.capture-svg .mesh { fill: var(--stone); stroke: var(--ink-2); stroke-width: 1.2; }
.capture-svg .mesh-edge { fill: none; stroke: var(--ink-2); stroke-width: .8; opacity: .6; }
.capture-svg .vcamera { fill: none; stroke: var(--ink-2); stroke-width: 1.4; stroke-dasharray: 3 2; }
.prose .fig-legend { margin: var(--s3) 0 0; padding-left: 1.6em; font-size: 15px; color: var(--ink-2); columns: 2; column-gap: var(--s5); }
.prose .fig-legend li { margin: 0 0 4px; break-inside: avoid; font-size: 15px; line-height: 1.5; }
.prose .fig-legend li.key { color: var(--petrol-strong); font-weight: 600; }
@media (max-width: 640px) { .prose .fig-legend { columns: 1; } .prose .fig-tag { font-size: 11.5px; } }

/* "Show more" under a list drawn a page at a time (web/paging.js). */
.more-row { margin: var(--s4) 0; text-align: center; }

/* The record summary the server writes into a record page (worker/src/share.js::recordSummary): shown while the page
   script loads, then hidden with the loading state. */
.record-summary { max-width: 720px; margin: 0 auto; text-align: left; }
.record-summary h1 { font-size: clamp(26px, 3vw, 36px); }
.record-summary img { width: auto; max-width: 100%; height: auto; max-height: 360px; margin: var(--s3) 0; background: var(--thumb-bg); }
.record-summary dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px var(--s4); margin: var(--s3) 0; }
.record-summary dt { color: var(--muted); }
.record-summary dd { margin: 0; }
/* With scripts on, only its loading line shows: the interactive record follows at once (no flash of the plain text). */
html.js .record-summary > :not(.muted) { display: none; }

/* Who uploaded a record and how often it was opened (web/app.js::cardByline). */
.card-by { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }

/* Visibility of an upload: Public (sent for review) or Private (saved for the owner and the people it is shared with). */
.up-visibility { border: 0; padding: 0; margin: var(--s4) 0; }
.up-visibility legend { font-weight: 600; margin-bottom: var(--s2); }
.up-vis-seg { display: inline-flex; width: max-content; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; }
.up-vis-seg label { position: relative; padding: 8px 22px; cursor: pointer; font-weight: 600; color: var(--ink-2); }
.up-vis-seg label + label { border-left: 1px solid var(--line-strong); }
.up-vis-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.up-vis-seg label:has(input:checked) { background: var(--petrol); color: var(--on-accent); }
.up-vis-seg label:has(input:focus-visible) { outline: 2px solid var(--petrol); outline-offset: 2px; }

/* The close arrow's nudge on phones (see .ws-panel-close); still for those who ask for less motion. */
@keyframes ws-nudge-right { 50% { transform: translateX(3px); } }
@keyframes ws-nudge-left { 50% { transform: translateX(-3px); } }
@media (prefers-reduced-motion: reduce) { .ws-panel-close svg, .ws-drawer-close svg { animation: none !important; } }