/* authored. archive: the orange accent (Emma, 29 Oct 2026). Orange means "you are here" or "you can act": hover, selected, focus,
   the active tab, section markers and the one primary action on the phone. Resting surfaces stay quiet on paper white. */

/* Paper white under white cards, orange on state. */
body { background: var(--paper); }
.subnav, .tabbar, .footer { background: var(--paper); }
:focus-visible { outline-color: var(--orange); }
input:focus, select:focus, textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-soft); }

/* Sidebar and facets */
.facet-item { transition: background var(--duration) var(--ease), box-shadow var(--duration) var(--ease); }
.facet-item:hover:not(:disabled) { background: var(--orange-soft); }
.facet-item[aria-pressed="true"] { background: var(--orange-soft); box-shadow: inset 3px 0 0 var(--orange); font-weight: 500; padding-left: 10px; }
.facet-item[aria-pressed="true"] .facet-box { background: var(--orange); border-color: var(--orange); box-shadow: inset 0 0 0 2px var(--orange-soft); }
.facet-n { font-family: var(--mono); font-size: 11.5px; }
.date-year:hover { border-color: var(--orange-line); background: var(--orange-soft); }
.date-year[aria-pressed="true"] { border-color: var(--orange-line); background: var(--orange-soft); }
.date-year[aria-pressed="true"] .date-bar { background: var(--orange); }
.nav-menu a:hover, .nav-menu button:hover,
.nav-menu a:focus-visible, .nav-menu button:focus-visible { background: var(--orange-soft); }
.nav-sections a:hover, .nav-pages a:hover { color: var(--accent); }

/* Outlines only on state */
.arch-card:hover .arch-card-title { text-decoration-color: var(--orange); }
.arch-card:focus-visible, .arch-row:focus-visible { box-shadow: 0 0 0 2px var(--orange); }
.pf-card:hover, .rr-card:hover, .ph-card:hover, .set-card:hover,
.rs-card:hover, .pv-project:hover, .arch-card:hover, .arch-row:hover { border-color: var(--orange-line); }
.ph-frame[aria-selected="true"] { box-shadow: 0 0 0 2px var(--orange); }
.ph-frame[aria-selected="true"]::after { background: var(--orange); color: var(--encre); }
.chip.accepted { border-color: var(--orange-line); }
.chip.suggested { border-color: var(--orange-line); background: var(--orange-soft); }
/* .badge.accent stays neutral so it never reads as the warn badge. */
.tag-suggest li[aria-selected="true"], .tag-suggest li:hover { background: var(--orange-soft); }
button:not(.primary):not(.ghost):not(:disabled):hover, .btn:not(.btn-primary):hover { border-color: var(--orange-line); }
button.ghost:hover { background: var(--orange-soft); }

/* Active tab, section markers and the one primary action on the phone */
.nav-sections a[aria-current] { border-bottom-color: var(--orange); }
.door-tab[aria-current] { border-bottom-color: var(--orange); }
.tabbar [aria-current] { color: var(--accent); }
.tabbar [aria-current] .tab-icon { background: var(--orange-soft); border-radius: 999px; padding: 4px 16px; margin: -4px 0; box-shadow: 0 0 0 1px var(--orange-line); }
.eyebrow::before, .facet summary::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); margin-right: 8px; vertical-align: 1px; }
.facet-group > summary::before { display: none; }
.facet summary { justify-content: flex-start; }
.facet summary::after { margin-left: auto; }
.arch-group-head { border-bottom-color: var(--orange-line); }
.ql-big.primary, .ql-big.btn-primary { background: var(--orange); border-color: var(--orange); color: var(--encre); font-weight: 600; box-shadow: 0 2px 8px color-mix(in srgb, var(--orange) 40%, transparent); }
.ql-camera-dot { background: var(--orange); }
.ql-card { border-top: 3px solid var(--orange); }
.ql-pulse, .ql-streaming span { background: var(--orange); }
.nav-count { background: var(--orange-soft); color: var(--accent); }
.btn-primary:hover, button.primary:hover { opacity: 1; box-shadow: var(--shadow-lift), 0 0 0 3px var(--orange-soft); }

/* Mono for accession numbers, code and keys only; other figures just line up. */
.mono { font-variant-numeric: tabular-nums; }
.arch-id, .rv-id, .t-id, .ph-card-id, .ph-frame-id, .sh-frame-id, .lb-id .mono, .set-open, .ql-ref, code, kbd { font-family: var(--id); }

/* Side bar headings in Help match the filters; a heading's tooltip comes from js/tip.js. */
.help-contents h2.eyebrow { font: 600 14px/1.3 var(--sans); letter-spacing: 0.05em; color: var(--ink); }
.tip { position: fixed; z-index: 120; max-width: 260px; padding: 8px 12px; border-radius: var(--radius); background: var(--ink); color: var(--bg); font: 400 13px/1.4 var(--sans); box-shadow: var(--shadow-lift); pointer-events: none; }
.tip[hidden] { display: none; }

/* On the navy top bar and sign-in panel, hovers lighten the navy instead of tinting orange, so the white text stays readable. */
.topbar button:hover, .topbar .btn:hover, .topbar button.ghost:hover, .topbar .btn:not(.btn-primary):hover,
.topbar button:not(.primary):not(.ghost):not(:disabled):hover,
.signin-panel button.ghost:hover, .signin-panel .btn:not(.btn-primary):hover {
  background: color-mix(in srgb, currentColor 16%, transparent); color: inherit; border-color: color-mix(in srgb, currentColor 55%, transparent);
}
.topbar button:focus-visible, .topbar .btn:focus-visible, .topbar a:focus-visible { outline-color: var(--orange); }

/* The navy card from the research side bar: in Help, the group holding the open page; in the Archive filters, a filter with a choice in it. */
.help-contents .help-group:has(a[aria-current="page"]) ul, .facet:has(.facet-item[aria-pressed="true"]) .facet-list { padding: 8px; background: var(--encre-bleue); color: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.help-contents .help-group:has(a[aria-current="page"]) li a { margin-left: 0; border-left: 0; border-radius: var(--radius); color: var(--white); }
.help-contents .help-group:has(a[aria-current="page"]) li a:hover { background: var(--orange-soft); color: var(--accent); }
.help-contents .help-group:has(a[aria-current="page"]) li a[aria-current="page"] { background: var(--orange-soft); color: var(--accent); box-shadow: inset 3px 0 0 var(--orange); }
.facet:has(.facet-item[aria-pressed="true"]) .facet-item { color: var(--white); padding-inline: 8px; }
.facet:has(.facet-item[aria-pressed="true"]) .facet-n { color: color-mix(in srgb, var(--white) 70%, transparent); }
.facet:has(.facet-item[aria-pressed="true"]) .facet-box { border-color: color-mix(in srgb, var(--white) 60%, transparent); }
.facet:has(.facet-item[aria-pressed="true"]) .facet-item:hover:not(:disabled), .facet:has(.facet-item[aria-pressed="true"]) .facet-item[aria-pressed="true"] { background: var(--orange-soft); color: var(--accent); }
.facet:has(.facet-item[aria-pressed="true"]) .facet-item:hover:not(:disabled) .facet-n, .facet:has(.facet-item[aria-pressed="true"]) .facet-item[aria-pressed="true"] .facet-n { color: var(--muted); }

/* View as: an orange strip under the band for as long as it is on. Side bars that stay in view sit below it. */
.viewas { position: sticky; top: 56px; z-index: 19; display: flex; align-items: center; gap: 12px; padding: 6px var(--gutter); background: var(--orange-soft); color: var(--accent); border-bottom: 1px solid var(--orange-line); font-size: 14px; font-weight: 500; }
.viewas[hidden] { display: none; }
.viewas button { margin-left: auto; padding: 3px 12px; font-size: 13px; }
body.is-viewing .rs-bar, body.is-viewing .arch-facets { top: 108px; max-height: calc(100vh - 124px); }
body.is-viewing .rs-find { top: 93px; }
.nav-menu-line { font-size: 12px; line-height: 1.4; max-width: 240px; white-space: normal; }
@media (max-width: 720px) {
  .viewas { top: 0; padding-inline: 16px; font-size: 13px; }
  body.is-viewing .rs-strip { top: 37px; }
  body.is-viewing .rs-find { top: 83px; }
}

/* Text on a pale orange box is navy, resting or hovered (Emma, 31 Oct 2026). */
.rs-row:hover, .facet-item:hover:not(:disabled), .facet-item[aria-pressed="true"], .date-year:hover, .date-year[aria-pressed="true"],
.nav-menu a:focus-visible, .nav-menu button:focus-visible, .chip.suggested, .tag-suggest li[aria-selected="true"], .tag-suggest li:hover,
button.ghost:hover, .rs-mark, .tabbar [aria-current] .tab-icon { color: var(--accent); }

/* Menu icons: Phosphor Duotone in the navy. */
.ph-icon { display: inline-flex; flex: none; color: var(--accent); line-height: 0; margin-right: 6px; vertical-align: -3px; }
.nav-sections .ph-icon, .nav-pages .ph-icon, .tab-icon .ph-icon { margin-right: 0; }
.tab-icon .ph-icon { vertical-align: 0; }

/* Ask in the corner: a navy button that opens a panel, on every laptop page. Under the lightbox and pop-ups, over the page. */
.ask-launch { position: fixed; right: 24px; bottom: 24px; z-index: 70; display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px 11px 16px; border: 0; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: 500 15px var(--sans); box-shadow: var(--shadow-lift); cursor: pointer; }
.ask-launch:hover { background: var(--accent); color: var(--accent-ink); transform: translateY(-1px); }
.ask-launch .ph-icon { color: inherit; margin: 0; }
.ask-launch[hidden], .ask-chat[hidden] { display: none; }
.ask-chat { position: fixed; right: 24px; bottom: 24px; z-index: 70; width: min(440px, calc(100vw - 48px)); height: min(640px, calc(100vh - 96px)); display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); overflow: hidden; }
.ask-chat.is-big { width: min(760px, calc(100vw - 48px)); height: calc(100vh - 96px); }
.ask-chat-head { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 16px; border-bottom: 1px solid var(--line); }
.ask-chat-head .ph-icon { margin: 0; }
.ask-chat-title { flex: 1; min-width: 0; line-height: 1.25; }
.ask-chat-title strong { font-weight: 500; }
.ask-chat-where { display: flex; gap: 8px; white-space: nowrap; overflow: hidden; }
.ask-chat-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; }
.ask-chat-body { flex: 1; min-height: 0; overflow-y: auto; }
.ask.is-panel { max-width: none; min-height: 100%; padding: 0 16px; }
.ask.is-panel .ask-starters { grid-template-columns: 1fr; gap: 16px; padding: 14px 0; }
.ask.is-panel .ask-turn { padding: 16px 0; scroll-margin-top: 8px; }
.ask.is-panel .ask-q p:last-child { font-size: 15px; margin-bottom: 10px; }
.ask.is-panel .ask-dock { bottom: 0; background: var(--card); padding-bottom: 10px; }
.ask-card { z-index: 75; }
@media print { .ask-launch, .ask-chat { display: none !important; } }

/* ---------- Bolder pass (Emma, 4 Nov 2026) ----------
   Hover and press fill with full burnt orange and the text turns white, everywhere a pale orange tint was used.
   #B9531B keeps white text readable (4.9:1); the lighter --orange stays for dots, markers and focus rings. */
:root { --burnt: #B9531B; --burnt-press: #9E4515; }

/* Hover only where there is a pointer: on a touch screen a tapped item would stay orange. */
@media (hover: hover) {
  .facet-item:hover:not(:disabled), .date-year:hover,
  .nav-menu a:hover, .nav-menu button:hover, .nav-sheet a:hover, .nav-sheet button:hover, .tag-suggest li:hover,
  button.ghost:not(:disabled):hover, button:not(.primary, .ghost, .rv-value, .vw-thumb, .th-img, .pv-shot, .cap-card-thumb, .ph-play, .ask-launch, .lb-nav, :disabled):hover, .btn:not(.btn-primary):hover,
  button.primary:not(:disabled):hover, .btn-primary:hover, label[role="button"]:hover,
  .ql-row:hover, .ql-shoot-row:hover, .rs-row:hover, .page-back:hover, .rv-back:hover,
  .help-contents .help-group:has(a[aria-current="page"]) li a:hover,
  .facet:has(.facet-item[aria-pressed="true"]) .facet-item:hover:not(:disabled) {
    background: var(--burnt); border-color: var(--burnt); color: var(--white); opacity: 1;
  }
}
/* Pressed and chosen: the same fill, a shade deeper while the finger or button is down. */
.facet-item[aria-pressed="true"], .date-year[aria-pressed="true"], .tag-suggest li[aria-selected="true"],
.nav-menu a:focus-visible, .nav-menu button:focus-visible,
.facet:has(.facet-item[aria-pressed="true"]) .facet-item[aria-pressed="true"] {
  background: var(--burnt); border-color: var(--burnt); color: var(--white);
}
.facet-item:active:not(:disabled), .date-year:active, .nav-menu a:active, .nav-menu button:active, .nav-sheet a:active, .nav-sheet button:active,
button.ghost:not(:disabled):active, button:not(.primary, .ghost, .rv-value, .vw-thumb, .th-img, .pv-shot, .cap-card-thumb, .ph-play, .ask-launch, .lb-nav, :disabled):active, .btn:not(.btn-primary):active, button.primary:not(:disabled):active, .btn-primary:active,
label[role="button"]:active, .ql-row:active, .ql-shoot-row:active, .page-back:active, .rv-back:active {
  background: var(--burnt-press); border-color: var(--burnt-press); color: var(--white); opacity: 1;
}
/* Everything inside a filled item turns white with it: words, counts, icons, badges, dots' labels. The same
   conditions as the fill itself, so a phone's leftover :hover never turns text white on a white button. */
@media (hover: hover) {
  :is(button:not(.primary, .ghost, .rv-value, .vw-thumb, .th-img, .pv-shot, .cap-card-thumb, .ph-play, .ask-launch, .lb-nav, :disabled), button.ghost:not(:disabled), button.primary:not(:disabled), .btn, label[role="button"], .facet-item:not(:disabled), .date-year, .nav-menu a, .nav-menu button, .nav-sheet a, .nav-sheet button, .tag-suggest li, .ql-row, .ql-shoot-row, .rs-row, .page-back, .rv-back, .help-contents .help-group li a):hover * { color: var(--white) !important; }
  :is(button:not(.primary, .ghost, .rv-value, .vw-thumb, .th-img, .pv-shot, .cap-card-thumb, .ph-play, .ask-launch, .lb-nav, :disabled), button.ghost:not(:disabled), button.primary:not(:disabled), .btn, label[role="button"], .facet-item:not(:disabled), .date-year, .nav-menu a, .nav-menu button, .nav-sheet a, .nav-sheet button, .tag-suggest li, .ql-row, .ql-shoot-row, .rs-row, .page-back, .rv-back, .help-contents .help-group li a):hover .badge { background: color-mix(in srgb, var(--white) 22%, transparent); }
  .facet-item:not(:disabled):hover .facet-box { border-color: var(--white); }
  .ql-shoot-row:hover .ql-shoot-go { background: color-mix(in srgb, var(--white) 20%, transparent); }
}
:is(button:not(.primary, .ghost, .rv-value, .vw-thumb, .th-img, .pv-shot, .cap-card-thumb, .ph-play, .ask-launch, .lb-nav, :disabled), button.ghost:not(:disabled), button.primary:not(:disabled), .btn, label[role="button"], .facet-item:not(:disabled), .date-year, .nav-menu a, .nav-menu button, .nav-sheet a, .nav-sheet button, .tag-suggest li, .ql-row, .ql-shoot-row, .rs-row, .page-back, .rv-back, .help-contents .help-group li a):active *, :is(.facet-item, .date-year, .tag-suggest li, .nav-menu a, .nav-menu button):is([aria-pressed="true"], [aria-selected="true"], :focus-visible) *,
.help-contents .help-group:has(a[aria-current="page"]) li a[aria-current="page"] * { color: var(--white) !important; }
:is(button:not(.primary, .ghost, .rv-value, .vw-thumb, .th-img, .pv-shot, .cap-card-thumb, .ph-play, .ask-launch, .lb-nav, :disabled), button.ghost:not(:disabled), button.primary:not(:disabled), .btn, label[role="button"], .facet-item:not(:disabled), .date-year, .nav-menu a, .nav-menu button, .nav-sheet a, .nav-sheet button, .tag-suggest li, .ql-row, .ql-shoot-row, .rs-row, .page-back, .rv-back, .help-contents .help-group li a):active .badge, :is(.facet-item, .date-year):is([aria-pressed="true"]) .badge { background: color-mix(in srgb, var(--white) 22%, transparent); }
.facet-item[aria-pressed="true"] .facet-box { border-color: var(--white); background: var(--white); box-shadow: inset 0 0 0 3px var(--burnt); }
.ql-shoot-row:active .ql-shoot-go { background: color-mix(in srgb, var(--white) 20%, transparent); }
/* The current item in the open Help group and in menus is the burnt orange too, so here and hover read the same. */
.help-contents .help-group:has(a[aria-current="page"]) li a[aria-current="page"] { background: var(--burnt); color: var(--white); box-shadow: none; }

/* Cards: a burnt orange edge on hover, and the title takes the colour. */
.pf-card:hover, .rr-card:hover, .ph-card:hover, .set-card:hover, .rs-card:hover, .pv-project:hover, .arch-card:hover, .arch-row:hover { border-color: var(--burnt); }
.arch-card:hover .arch-card-title, .arch-row:hover .arch-row-title { color: var(--burnt); text-decoration-color: var(--burnt); }

/* Here: the active tab and page underline thicker and burnt; the phone's current tab is a filled pill with a white icon. */
.nav-sections a[aria-current], .door-tab[aria-current] { border-bottom-width: 3px; border-bottom-color: var(--burnt); font-weight: 600; }
.nav-pages a[aria-current] { color: var(--burnt); font-weight: 600; }
.tabbar [aria-current] { color: var(--burnt); }
.tabbar [aria-current] .tab-icon { background: var(--burnt); color: var(--white); box-shadow: none; }
.tabbar [aria-current] .tab-icon .ph-icon { color: var(--white); }
.tabbar [aria-current] span:not(.tab-icon) { font-weight: 600; }
.nav-count { background: var(--burnt); color: var(--white); font-weight: 600; }

/* Headings on open cards, records and sections are a third smaller, set heavier so they still lead. */
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.015em; }
h1 { font-size: clamp(20px, 2.2vw, 24px); }
h2 { font-size: 15px; }
h3 { font-size: 14px; }
.rv-title .rv-value { font-size: 15px; font-weight: 600; line-height: 1.35; }
.rv-id { font-size: 16px; }
.lb-title { font-size: 15px; font-weight: 600; }
.ql-what { font-size: 16px; font-weight: 600; }
.ql-queued .ql-what, .ql-err .ql-what { font-size: 15px; }
.dz-title { font-size: clamp(16px, 1.7vw, 18px); font-weight: 600; }
.pf-title-in { font-size: clamp(16px, 2vw, 20px); font-weight: 600; }
.rs-head h1 { font-size: clamp(18px, 1.8vw, 20px); }
h2.rs-note-title, .rs-section > h2 { font-size: 14px; }
.ph-sheet h2 { font-size: 14px; }
.ph-holder h2, .cap-sec-head h2 { font-size: 13px; }
.stg-count { font-size: 15px; font-weight: 600; }

/* Labels above sections: ink and heavier in the sans, not grey mono, so the page has a clear structure. */
.eyebrow, .rv-h { font: 600 11.5px/1.4 var(--sans); letter-spacing: 0.07em; color: var(--ink); }
.rv-h { padding-bottom: 8px; border-bottom: 2px solid var(--ink); display: inline-block; }

/* Badges as pills; buttons say what they do in a heavier weight. */
.badge { font: 600 10.5px/1 var(--sans); letter-spacing: 0.06em; padding: 5px 9px; border-radius: 999px; }
button, .btn { font-weight: 500; }
button.primary, .btn-primary, .ql-big { font-weight: 600; }
/* The fill and the white text change together and quickly, so text never shows white on white mid-change. */
button, .btn, label[role="button"], .facet-item, .date-year, .nav-menu a, .nav-sheet a, .tag-suggest li, .ql-row, .ql-shoot-row, .rs-row, .page-back, .rv-back, .help-group li a {
  transition: background-color 0.14s var(--ease), border-color 0.14s var(--ease), color 0.14s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}

/* A chosen toggle button (aria-pressed) is filled too, so chosen and hovered read the same: the Archive's To check and status buttons, Grid and List, and so on. */
button[aria-pressed="true"]:not(.primary, .ghost, .rv-value, .vw-thumb, .th-img, .pv-shot, .cap-card-thumb, .ph-play, .ask-launch, .lb-nav, :disabled) { background: var(--burnt); border-color: var(--burnt); color: var(--white); }
button[aria-pressed="true"]:not(.primary, .ghost, .rv-value, .vw-thumb, .th-img, .pv-shot, .cap-card-thumb, .ph-play, .ask-launch, .lb-nav, :disabled) * { color: var(--white) !important; }
button[aria-pressed="true"]:not(.primary, .ghost, .rv-value, .vw-thumb, .th-img, .pv-shot, .cap-card-thumb, .ph-play, .ask-launch, .lb-nav, :disabled) .badge { background: color-mix(in srgb, var(--white) 22%, transparent); }

/* The menu rows along the top fill as a block on hover, like the side bar. */
.nav-sections a, .nav-pages a { margin-block: 4px; border-radius: var(--radius); transition: background-color 0.14s var(--ease), color 0.14s var(--ease); }
.nav-sections a { margin-bottom: 3px; }
@media (hover: hover) {
  .nav-sections a:hover, .nav-pages a:hover { background: var(--burnt); color: var(--white); }
  .nav-sections a:hover *, .nav-pages a:hover * { color: var(--white) !important; }
  .nav-sections a:hover .nav-count, .nav-pages a:hover .nav-count { background: color-mix(in srgb, var(--white) 22%, transparent); }
}
.nav-sections a:active, .nav-pages a:active { background: var(--burnt-press); color: var(--white); }
.nav-sections a:active *, .nav-pages a:active * { color: var(--white) !important; }
/* Saved searches page */
.svp { max-width: 760px; }
.svp-head p { max-width: 60ch; }
.svp-rows { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.svp-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.svp-open { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--ink); }
.svp-name { font-weight: 600; }
.svp-open:hover .svp-name { color: var(--burnt); }
.svp-empty { margin-top: 16px; padding: 20px; background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }