/*
  TNCHS Research Library: base styles and components.
  Colors, sizes and spacing come from tokens.css. Do not type raw colors here.

  Sections:
   1 Base          6 Forms                11 Citation
   2 Type          7 Search box           12 Reference notes (AI)
   3 Layout        8 Filters              13 States and notices
   4 Masthead      9 Catalog cards        14 Motion
   5 Buttons      10 Paper page           15 Print
                                          16 Photographs
                                          17 Upload and import
                                          18 Catalog cabinet and pages
                                          19 Library (staff) pages
                                          20 Reader
                                          21 Admin tables and recycle bin
                                          22 Dashboard
                                          23 Printable label
                                          24 Settings
                                          25 Related words (staff)
*/

/* ---------- 1. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--paper);
  background-image: var(--paper-grain);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.75rem; /* 28px = 7 baselines */
  font-kerning: normal;
}

main { flex: 1 0 auto; }
main:focus { outline: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--highlight); color: var(--ink); }

/* One focus style everywhere: paper gap, green ring, amber halo.
   The transparent outline keeps focus visible in Windows High Contrast mode. */
:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--focus-gap), 0 0 0 4px var(--focus-ring), 0 0 0 6px var(--focus-halo);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  z-index: 10;
  padding: var(--space-2) var(--space-4);
  background: var(--brand);
  color: var(--on-brand);
  text-decoration: none;
}
.skip-link:focus { top: var(--space-2); }

/* ---------- 2. Type ---------- */
h1, h2, h3, h4, .t-h1, .t-h2, .t-h3 {
  margin: 0;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 500;
  color: var(--ink);
  text-wrap: balance;
}
h1, .t-h1 { font-size: var(--step-4); line-height: 1.08; font-weight: 400; letter-spacing: -0.015em; }
h2, .t-h2 { font-size: var(--step-2); line-height: 1.2; letter-spacing: -0.01em; }
h3, .t-h3 { font-size: var(--step-1); line-height: 1.3; }

p { margin: 0 0 var(--space-5); }

.t-display {
  margin: 0;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: var(--step-5);
  line-height: 1.02;
  font-weight: 350;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.t-lede {
  max-width: 36ch;
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 2rem;
  font-weight: 350;
  color: var(--ink-muted);
}
.t-body { font-size: var(--step-0); line-height: 1.75rem; }
.t-small { font-size: var(--step--1); line-height: 1.25rem; }

/* Small capitals for labels: "RESEARCH TYPE", "ABSTRACT" */
.label, .field__label {
  font-family: var(--font-body);
  font-size: var(--step--2);
  line-height: 1rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.meta {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  line-height: 1.25rem;
  color: var(--ink-faint);
}

/* Call numbers look like they were typed on a catalog card. */
.callno {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--step--1);
  line-height: 1.25rem;
  letter-spacing: 0.04em;
  color: var(--catalog-ink);
  font-variant-numeric: tabular-nums;
}

.prose { max-width: var(--measure); hyphens: auto; }
.prose p { margin-bottom: var(--space-4); }

a {
  color: var(--link);
  text-decoration-line: underline;
  text-decoration-color: var(--accent-deep);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
  transition: text-decoration-color var(--dur-fast) var(--ease);
}
a:hover { text-decoration-color: currentColor; }

mark { background: var(--highlight); color: var(--ink); padding-inline: 0.1em; }
code { font-family: var(--font-mono); font-size: 0.9em; }

/* ---------- 3. Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- 4. Masthead and footer ---------- */
.masthead {
  border-bottom: 3px double var(--rule-strong); /* journal-style double rule */
}
.masthead__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  padding-block: var(--space-4);
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-right: auto;
  color: var(--ink);
  text-decoration: none;
}
/* Placeholder box, shown only if LOGO_URL in .env is set to empty */
.brand__logo {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px dashed var(--field-border);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}
.brand__logo-img { flex: none; width: 3rem; height: 3rem; object-fit: contain; }
.brand__name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.75rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.brand__school {
  display: block;
  font-size: var(--step--2);
  line-height: 1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.masthead__nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); }
.masthead__user { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--step--1); color: var(--ink-muted); text-decoration: none; }
.masthead__user:hover { color: var(--ink); }
.masthead__nav .masthead__user { display: inline-flex; border-bottom: 0; }  /* beats the general nav-link rule */
.masthead__user .icon { width: 1rem; height: 1rem; }
.masthead__signout { margin: 0; }
.linklike {
  padding: var(--space-2) 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease);
}
.linklike:hover { border-bottom-color: var(--accent); }
.masthead__nav a {
  display: inline-block;
  padding-block: var(--space-2);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color var(--dur-fast) var(--ease);
}
.masthead__nav a:hover,
.masthead__nav a[aria-current="page"] { border-bottom-color: var(--accent); }

.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease);
}
.theme-toggle[hidden] { display: none; }
.theme-toggle:hover { border-color: var(--field-border); }
.theme-toggle .icon--sun,
.theme-toggle[aria-pressed="true"] .icon--moon { display: none; }
.theme-toggle[aria-pressed="true"] .icon--sun { display: block; }

.site-foot {
  margin-top: var(--space-9);
  padding-block: var(--space-6);
  border-top: 1px solid var(--rule);
  font-size: var(--step--1);
  line-height: 1.25rem;
  color: var(--ink-muted);
}
.site-foot p { margin: 0; }
.site-foot strong { color: var(--ink); font-weight: 600; }
.site-foot__grid { display: grid; gap: var(--space-4); }
@media (min-width: 48em) {
  .site-foot__grid { grid-template-columns: 2fr 1fr; }
}

/* ---------- 5. Icons and buttons ---------- */
.icon {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: 0 var(--space-5);
  border: 1px solid var(--brand);
  border-radius: var(--radius);
  background: var(--brand);
  color: var(--on-brand);
  font-size: var(--step--1);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
/* Hover draws an amber bar along the bottom edge, like a tab marker. No drop shadows. */
.btn:hover:not(:focus-visible) { box-shadow: inset 0 -3px 0 var(--accent); }
.btn:active { transform: translateY(1px); }
.btn--secondary { background: transparent; color: var(--brand); }
.btn--quiet {
  padding-inline: var(--space-2);
  border-color: transparent;
  background: transparent;
  color: var(--link);
}
.btn:disabled,
.btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; box-shadow: none; transform: none; }
@media (max-width: 30em) {
  .btn__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- 6. Forms ---------- */
.field {
  display: grid;
  gap: var(--space-2);
  max-width: 32rem;
  margin-bottom: var(--space-5);
}
.field p { margin: 0; }
.field__hint { font-size: var(--step--1); line-height: 1.25rem; color: var(--ink-faint); }
.field__error {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--step--1);
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--error);
}

.input, .select, .textarea {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  background: var(--paper-raised);
  color: var(--ink);
  font-size: var(--step-0);
  line-height: 1.5rem;
  transition: border-color var(--dur-fast) var(--ease);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-muted); }
.input::placeholder, .textarea::placeholder { color: var(--ink-faint); opacity: 1; }
.textarea { min-height: 7rem; resize: vertical; }

.select-wrap { position: relative; }
.select { appearance: none; padding-right: 2.5rem; cursor: pointer; }
.select-wrap .icon {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%);
  color: var(--ink-muted);
  pointer-events: none;
}

.field--error .input,
.field--error .select,
.field--error .textarea { border-color: var(--error); border-left-width: 4px; }

.check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  line-height: 1.5rem;
  cursor: pointer;
}
.check input {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0.1875rem 0 0;
  accent-color: var(--brand);
}

fieldset { margin: 0 0 var(--space-5); padding: 0; border: 0; }

/* Sign-in page */
.signin { max-width: 28rem; padding-block: var(--space-8); }
.signin h1 { margin: var(--space-2) 0 var(--space-3); }
.signin__intro { color: var(--ink-muted); }
.signin .notice { margin-bottom: var(--space-5); }
legend { margin-bottom: var(--space-3); padding: 0; }

/* ---------- 7. Search box ---------- */
.searchbox__label {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 2rem;
  font-weight: 350;
  font-style: italic;
  color: var(--ink-muted);
}
.searchbox__label strong {
  font-style: normal;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: lining-nums;
}
.searchbox {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border-bottom: 2px solid var(--rule-strong);
  transition: box-shadow var(--dur) var(--ease);
}
/* Focus: the rule thickens in green with a thin amber line beneath. */
.searchbox:focus-within { box-shadow: 0 2px 0 0 var(--focus-ring), 0 5px 0 0 var(--focus-halo); }
.searchbox > .icon { width: 1.75rem; height: 1.75rem; color: var(--ink-muted); }
.searchbox__input {
  flex: 1;
  min-width: 0;
  padding: var(--space-3) 0;
  border: 0;
  background: transparent;
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.2;
  font-weight: 350;
  color: var(--ink);
  caret-color: var(--accent-deep);
}
.searchbox__input:focus-visible { box-shadow: none; }
@media (max-width: 40em) {
  .searchbox__input { font-size: var(--step-1); }
}
.searchbox__input::placeholder { color: var(--ink-faint); opacity: 1; }
.searchbox .btn { flex: none; }
.searchform__hint { margin: var(--space-3) 0 0; }

/* ---------- 8. Filters: index tabs and drawer labels ---------- */
/* Strand tabs look like the divider tabs inside a catalog drawer. */
.tabs {
  display: flex;
  gap: var(--space-1);
  margin: 0;
  padding: var(--space-2) 0 0;
  list-style: none;
  overflow-x: auto;
  box-shadow: inset 0 -1px 0 var(--rule-strong);
}
.tabs li { flex: none; }
.tab {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--rule);
  border-bottom-color: var(--rule-strong);
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--paper-sunk);
  color: var(--ink-muted);
  font-size: var(--step--1);
  line-height: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.tab:hover { background: var(--paper-raised); color: var(--ink); }
.tab[aria-current="true"] {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--rule-strong);
  border-bottom-color: var(--paper);
  box-shadow: inset 0 3px 0 var(--accent);
}
.tab__count {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-faint);
}

/* Other filters sit in framed "label holders", like the brass frames on drawer fronts. */
.drawer-labels {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.drawer-label {
  position: relative;
  display: grid;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--paper-raised);
  cursor: pointer;
}
.drawer-label::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid var(--rule);
  pointer-events: none;
}
.drawer-label__name {
  font-size: var(--step--2);
  line-height: 1rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.drawer-label select {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0 1.5rem 0 0;
  border: 0;
  background: transparent;
  appearance: none;
  font-family: var(--font-display);
  font-size: var(--step-0);
  line-height: 1.5rem;
  color: var(--ink);
  cursor: pointer;
}
.drawer-label select:focus-visible { box-shadow: none; }
.drawer-label:focus-within {
  box-shadow: 0 0 0 2px var(--focus-gap), 0 0 0 4px var(--focus-ring), 0 0 0 6px var(--focus-halo);
}
.drawer-label .icon { position: absolute; right: var(--space-3); bottom: var(--space-2); color: var(--ink-muted); }
.drawer-label.is-set { box-shadow: inset 3px 0 0 var(--accent); }
.drawer-label.is-set:focus-within {
  box-shadow: inset 3px 0 0 var(--accent), 0 0 0 2px var(--focus-gap), 0 0 0 4px var(--focus-ring), 0 0 0 6px var(--focus-halo);
}

.results-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-6);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--rule-strong);
}
.results-head p { margin: 0; }
.related-note { order: 3; flex-basis: 100%; }   /* its own line, under the count and sort */
.sort { display: flex; align-items: baseline; gap: var(--space-4); font-size: var(--step--1); }
.sort a { color: var(--ink-muted); text-decoration: none; }
.sort a:hover { color: var(--ink); }
.sort a[aria-current="true"] {
  color: var(--ink);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--accent-deep);
  text-decoration-thickness: 2px;
}

/* ---------- 9. Catalog cards (search results) ---------- */
.cards { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--rule); }
.card {
  position: relative;
  display: grid;
  gap: var(--space-1) var(--space-6);
  padding: var(--space-5) var(--space-3);
  border-top: 1px solid var(--rule);
  transition: background-color var(--dur) var(--ease);
}
.card:hover { background: var(--paper-sunk); }
@media (min-width: 48em) {
  .card { grid-template-columns: 12.5rem minmax(0, 1fr); padding-inline: var(--space-4); }
}
.card p { margin: 0; }
.card__callno {
  align-self: start;
  padding-left: var(--space-3);
  border-left: 3px solid var(--accent);
}
.card__title { max-width: 40ch; margin-bottom: var(--space-1); font-size: var(--step-1); line-height: 1.75rem; }
.card__title a { color: var(--ink); text-decoration-color: transparent; }
.card__title a::after { content: ""; position: absolute; inset: 0; } /* whole card is clickable */
.card:hover .card__title a { text-decoration-color: var(--accent-deep); }
.card__authors { font-size: var(--step--1); line-height: 1.5rem; color: var(--ink-muted); }
.card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-3);
  margin: var(--space-1) 0 var(--space-2) !important;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  line-height: 1.25rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.card__meta span + span::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0.75em;
  margin-right: var(--space-3);
  background: var(--rule-strong);
  opacity: 0.35;
  vertical-align: -0.05em;
}
.card__abstract {
  max-width: var(--measure);
  font-size: var(--step--1);
  line-height: 1.5rem;
  color: var(--ink-muted);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* ---------- 10. Paper page (reads like a journal article) ---------- */
.paper { padding-top: var(--space-7); }
.paper p { margin-top: 0; }
.paper__head {
  display: grid;
  gap: var(--space-4);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--rule-strong);
}
.paper__kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  margin: 0;
}
.paper__title { max-width: 24ch; }
/* Research titles are long; keep them to a few lines on phones. */
@media (max-width: 40em) {
  .paper__title { font-size: var(--step-2); line-height: 1.15; }
}
.paper__byline { margin: 0; color: var(--ink-muted); }
.paper__byline strong { color: var(--ink); font-weight: 500; }
.paper__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }

.paper__grid { display: grid; gap: var(--space-7); padding-top: var(--space-6); }
@media (min-width: 64em) {
  .paper__grid { grid-template-columns: minmax(0, 42rem) 19rem; gap: var(--space-8); }
  .paper__side { position: sticky; top: var(--space-5); }
}
.paper__main { max-width: var(--measure); }
.paper__main > .label { display: block; margin-bottom: var(--space-3); }
.paper__side { align-self: start; display: grid; gap: var(--space-4); }
.paper__keywords { font-size: var(--step--1); line-height: 1.5rem; }
.paper__keywords .label { margin-right: var(--space-2); }
.related { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--rule-strong); max-width: var(--measure); }
.related__list { margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.related__list li { display: grid; gap: 2px; padding-block: var(--space-3); border-bottom: 1px solid var(--rule); }
.gaps-grid { display: grid; gap: var(--space-7); padding-block: var(--space-6); }
@media (min-width: 64em) { .gaps-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-8); } }
.gaps-filters { margin: var(--space-2) 0 var(--space-3); }
.gaps-log { margin-top: var(--space-5); }
.gaps-examples { margin-top: var(--space-3); }
.related__list a { font-family: var(--font-display); font-size: var(--step-0); line-height: 1.5rem; }

/* The metadata sidebar is drawn as a real catalog card. */
.catcard {
  position: relative;
  padding: var(--space-4) var(--space-4) var(--space-7);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--paper-raised);
}
.catcard__callno {
  margin: 0 0 var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--accent); /* the colored top line of a catalog card */
  font-size: var(--step-0);
}
.catcard dl { margin: 0; }
.catcard__row {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: var(--space-3);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--rule);
}
.catcard dt {
  padding-top: 0.25rem;
  font-size: var(--step--2);
  line-height: 1rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.catcard dd { margin: 0; font-size: var(--step--1); line-height: 1.5rem; }
/* The hole for the drawer rod. Decorative only. */
.catcard__hole {
  position: absolute;
  left: 50%;
  bottom: var(--space-4);
  width: 0.875rem;
  height: 0.875rem;
  margin-left: -0.4375rem;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  background: var(--paper);
}

/* ---------- 11. Citation ---------- */
.citation {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--rule-strong);
}
.citation__text {
  margin: var(--space-3) 0 var(--space-4);
  padding-left: 2rem;
  text-indent: -2rem; /* APA hanging indent */
  line-height: 1.75rem;
}
.citation__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.copy-status { font-size: var(--step--1); color: var(--success); }

/* ---------- 12. Reference notes (AI assistant) ----------
   Quiet and text-first, like a reference librarian's notes.
   No chat bubbles, no avatars, no "magic" styling. */
.notes {
  max-width: var(--measure);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 3px double var(--rule-strong);
}
.notes__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
}
.notes__head p { margin: 0; }
.notes__title { font-size: var(--step-2); }
.notes__privacy {
  margin: var(--space-2) 0 var(--space-5);
  font-size: var(--step--1);
  line-height: 1.25rem;
  color: var(--ink-faint);
}
.notes__log { margin: 0 0 var(--space-5); padding: 0; list-style: none; }
.note {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0 var(--space-3);
  padding-block: var(--space-4);
  border-top: 1px solid var(--rule);
}
.note__mark {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--step--1);
  line-height: 1.75rem;
  color: var(--catalog-ink);
}
.note__body p { margin: 0 0 var(--space-3); }
.note__body p:last-child { margin-bottom: 0; }
.note--q .note__body { font-family: var(--font-display); font-style: italic; color: var(--ink-muted); }
.note--pending .note__body { color: var(--ink-faint); }
.note__source {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3) !important;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  line-height: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.note__source .icon { width: 1rem; height: 1rem; }
.notes__form { display: grid; gap: var(--space-2); margin-top: var(--space-5); }
.notes__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
}
.notes__foot p { margin: 0; }
.note__answer { white-space: pre-line; }   /* keep the line breaks in answers */
.note--error .note__mark, .note--error .note__body { color: var(--error); }

/* ---------- 13. States and notices ---------- */
.notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  background: var(--paper-raised);
  font-size: var(--step--1);
  line-height: 1.5rem;
}
.notice p { margin: 0; }
.notice strong { font-weight: 600; }
.notice .icon { margin-top: 0.125rem; }
.notice--error { border-left-color: var(--error); }
.notice--error .icon { color: var(--error); }
.notice--lock { border-left-color: var(--brand); }

/* In-page states: empty drawer, no results, off-site */
.state {
  display: grid;
  gap: var(--space-4);
  max-width: 42rem;
  padding-block: var(--space-7);
}
@media (min-width: 48em) {
  .state { grid-template-columns: 4rem minmax(0, 1fr); gap: var(--space-5); }
}
.state p { margin: 0 0 var(--space-3); }
.state__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  color: var(--ink-muted);
}
.state__title { margin-bottom: var(--space-2); font-size: var(--step-2); }
.state__text { color: var(--ink-muted); }
.state__list { margin: 0 0 var(--space-4); padding-left: 1.25rem; }
.state__list li::marker { color: var(--accent-deep); }

/* Loading placeholder lines (they gently fade in and out) */
.loading-line { height: 0.75rem; margin-bottom: var(--space-3); background: var(--paper-sunk); }

/* Full-page error or notice: big, calm, left-aligned */
.state-page {
  display: grid;
  gap: var(--space-4);
  max-width: 44rem;
  padding-block: var(--space-9);
}
.state-page p { margin: 0; }
.state-page__code {
  padding-left: var(--space-3);
  border-left: 3px solid var(--accent);
}
.state-page__title {
  font-size: var(--step-5);
  line-height: 1.02;
  font-weight: 350;
  letter-spacing: -0.025em;
}
.state-page__text { max-width: 52ch; color: var(--ink-muted); }
.state-page__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

/* ---------- 14. Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Search results appear one after another, 45ms apart. */
  .reveal {
    animation: reveal var(--dur-slow) var(--ease) both;
    animation-delay: calc(var(--i, 0) * 45ms);
  }
  .pulse { animation: pulse 1.2s ease-in-out infinite alternate; }
}
@keyframes reveal {
  from { opacity: 0; transform: translateY(0.375rem); }
  to { opacity: 1; transform: none; }
}
@keyframes pulse {
  from { opacity: 1; }
  to { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 15. Print ---------- */
@media print {
  body { background: none; color: #000; }
  .masthead, .site-foot, .skip-link, .btn, .no-print { display: none !important; }
  a { text-decoration: none; }
}

/* ---------- 16. Photographs ----------
   The building photos are green duotones (see scripts/prepare_images.py).
   Text never sits directly on a photo: it always has its own paper panel. */
.search-band {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-9) var(--space-8);
  border-bottom: 1px solid var(--rule-strong);
  background: var(--paper-sunk);
}
.search-band__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  opacity: var(--photo-opacity);
}
.search-band__inner { position: relative; }
.search-band__panel {
  max-width: 46rem;
  padding: var(--space-6) var(--space-6) var(--space-5);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--paper);
}
.search-band__kicker { margin: 0 0 var(--space-4); }
@media (max-width: 40em) {
  .search-band { padding-block: var(--space-8) var(--space-6); }
  .search-band__panel { padding: var(--space-5) var(--space-4) var(--space-4); }
}

/* A photographic "plate" above the footer, like a plate in a printed journal */
.plate { margin: var(--space-9) 0 0; }
.plate__frame {
  height: clamp(8rem, 18vw, 14rem);
  overflow: hidden;
  border-top: 3px double var(--rule-strong);
  background: var(--paper-sunk);
}
.plate__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  opacity: var(--photo-opacity);
}
.plate__caption { padding-top: var(--space-2); }
.plate + .site-foot { margin-top: 0; }

/* ---------- 17. Upload and import ---------- */
/* Drop zone: works as a normal file picker without JavaScript. */
.dropzone {
  position: relative;
  display: grid;
  justify-items: start;
  gap: var(--space-2);
  padding: var(--space-6);
  border: 2px dashed var(--field-border);
  border-radius: var(--radius);
  background: var(--paper-raised);
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.dropzone p { margin: 0; }
.dropzone > .icon { width: 2rem; height: 2rem; color: var(--ink-muted); }
.dropzone__title { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.75rem; }
.dropzone__hint { font-size: var(--step--1); line-height: 1.25rem; color: var(--ink-faint); }
.dropzone__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
.dropzone input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dropzone label.btn:focus-within {
  box-shadow: 0 0 0 2px var(--focus-gap), 0 0 0 4px var(--focus-ring), 0 0 0 6px var(--focus-halo);
}
.dropzone.is-dragover { border-style: solid; border-color: var(--accent-deep); background: var(--paper-sunk); }
.dropzone--compact { padding: var(--space-4); }

/* Thin progress rule (reading a PDF, importing a batch) */
.meter { height: 4px; width: 100%; background: var(--rule); }
.meter > span { display: block; height: 100%; background: var(--brand); transition: width var(--dur) var(--ease); }

/* Where an auto-filled value came from */
.field__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-1) var(--space-3); }
.field__source {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  line-height: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.field__source .icon { width: 0.875rem; height: 0.875rem; }
.field__source--pdf { color: var(--success); }
.field__source--guess { color: var(--ink-muted); }
.field__source--missing { color: var(--error); }
.field--guess .input,
.field--guess .select,
.field--guess .textarea { border-left: 4px solid var(--accent-deep); }
.field--missing .input,
.field--missing .select,
.field--missing .textarea { border-left: 4px solid var(--error); }

/* Import queue: one ruled row per PDF */
.queue__summary { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.queue__summary p { margin: 0; }
.queue__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule-strong); }
.queue__item {
  display: grid;
  gap: var(--space-1) var(--space-4);
  padding: var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
@media (min-width: 48em) {
  .queue__item { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) 11rem 5rem; }
}
.queue__file { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue__title { font-size: var(--step--1); line-height: 1.5rem; }
.queue__title--unknown { color: var(--ink-faint); font-style: italic; }
.state-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  line-height: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
/* A small square marker; the words carry the meaning, the color is a helper */
.state-tag::before { content: ""; width: 0.5rem; height: 0.5rem; flex: none; background: var(--ink-faint); }
.state-tag--ready::before { background: var(--success); }
.state-tag--attention::before { background: var(--accent-deep); }
.state-tag--failed { color: var(--error); }
.state-tag--failed::before { background: var(--error); }
.state-tag--processing::before { background: var(--brand); }

/* ---------- 18. Catalog cabinet, pages and pager ---------- */
.home-grid, .browse-grid { display: grid; gap: var(--space-7); padding-block: var(--space-7); }
@media (min-width: 64em) {
  .home-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-8); }
  .browse-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-8); }
}
.section-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
}
.section-head p { margin: 0; }
.section-label { margin-bottom: var(--space-4); }
.more-link { display: inline-block; margin-top: var(--space-4); font-size: var(--step--1); }
.home-years { margin: var(--space-6) 0 var(--space-2); }
.page-head {
  display: grid;
  gap: var(--space-3);
  padding-block: var(--space-8) var(--space-5);
  border-bottom: 1px solid var(--rule-strong);
}
.page-head p { margin: 0; }

/* The card catalog cabinet: one drawer per strand */
.cabinet {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--paper-sunk);
}
.drawer {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-2) var(--space-3);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--paper-raised);
  color: var(--ink);
  text-align: center;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.drawer:hover { background: var(--paper); box-shadow: inset 0 -3px 0 var(--accent); }
.drawer__holder { padding: 2px; border: 1px solid var(--rule-strong); }
.drawer__code {
  display: block;
  padding: 0 var(--space-3);
  border: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--step-0);
  line-height: 1.75rem;
  color: var(--catalog-ink);
}
.drawer__label { font-size: var(--step--2); line-height: 1rem; color: var(--ink-muted); }
.drawer__count { font-size: var(--step--2); line-height: 1rem; }
/* the drawer's pull handle */
.drawer::after {
  content: "";
  width: 2.25rem;
  height: 0.5rem;
  margin-top: var(--space-1);
  border: 1px solid var(--rule-strong);
  border-top: 0;
  border-radius: 0 0 4px 4px;
}

.years { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.years li { display: flex; justify-content: space-between; padding-block: var(--space-2); border-bottom: 1px solid var(--rule); }
.year-table { width: 100%; border-collapse: collapse; }
.year-table td { padding-block: var(--space-2); border-bottom: 1px solid var(--rule); }
.year-table .num { text-align: right; font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-faint); }

.searchform--compact { padding-top: var(--space-6); margin-bottom: var(--space-5); }
.searchform--compact .searchbox__input { font-size: var(--step-2); }
@media (max-width: 40em) {
  .searchform--compact .searchbox__input { font-size: var(--step-1); }
}
.tab--empty { color: var(--ink-faint); }
.js .js-hide { display: none; }

.paper__staff-note { margin-bottom: var(--space-5); }
.citation__check { margin-top: var(--space-3); }

.pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-5);
  font-size: var(--step--1);
}
.pager a, .pager__off { display: inline-flex; align-items: center; gap: var(--space-2); }
.pager__off { color: var(--ink-faint); }
.pager .icon { width: 1rem; height: 1rem; }
.pager__prev .icon { transform: scaleX(-1); }

/* ---------- 19. Library (staff) pages ---------- */
.library-page { padding-bottom: var(--space-7); }
.library-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--space-4); }
.library-grid { display: grid; gap: 0 var(--space-8); }
@media (min-width: 64em) {
  .library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .library-grid .library-section:last-child { grid-column: 1 / -1; }
}
.library-section { padding-block: var(--space-6); border-bottom: 1px solid var(--rule); }
.library-section h2 { font-size: var(--step-1); margin-bottom: var(--space-4); }
.library-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.library-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-1) var(--space-4);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--rule);
}
.library-list li > span { display: grid; gap: 2px; min-width: 0; }
.library-list__title { font-size: var(--step--1); line-height: 1.5rem; }
.library-list__note { font-size: var(--step--2); line-height: 1rem; }

.upload-zone { margin-top: var(--space-6); }
.upload-note { max-width: 60ch; margin-top: var(--space-4); }
.upload-error { margin-top: var(--space-5); }
.folder-import { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--rule-strong); }
.folder-import h2 { margin-bottom: var(--space-4); }
.folder-import__form { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 var(--space-4); }
.folder-import__form .field { flex: 1 1 24rem; }
.folder-import__form .btn { margin-top: 1.5rem; }
.dropzone__progress { margin-top: var(--space-2); }
.dropzone__chosen:empty { display: none; }

.batch-summary { margin-top: var(--space-5); }
.queue__message { display: block; margin-top: 2px; font-size: var(--step--2); line-height: 1rem; }

.review-notices, .review-errors { display: grid; gap: var(--space-3); margin-block: var(--space-5) 0; }
.notice--attention { border-left-color: var(--accent-deep); }
.paper-form { margin-top: var(--space-6); }
.form-cols { display: grid; gap: 0 var(--space-7); }
@media (min-width: 64em) { .form-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.form-cols .field { max-width: none; }
.field-row { display: grid; gap: 0 var(--space-4); }
@media (min-width: 30em) { .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.textarea--short { min-height: 4.5rem; }
.suggestions { margin: calc(var(--space-3) * -1) 0 var(--space-5); }
.suggestions__list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.suggestion {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--paper-raised);
  font-size: var(--step--1);
  line-height: 1.5rem;
  cursor: pointer;
}
.suggestion:has(input:checked) { box-shadow: inset 3px 0 0 var(--accent); background: var(--paper-sunk); }
.suggestion input { accent-color: var(--brand); }
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-4);
  border-top: 1px solid var(--rule-strong);
  background: var(--paper);
}
@media (min-width: 64em) {
  .form-actions { position: sticky; bottom: 0; z-index: 2; }
  /* keep a keyboard-focused field from hiding behind the pinned buttons */
  html:has(.form-actions) { scroll-padding-bottom: 6rem; }
}
.form-actions__skip { margin-left: auto; }
.text-preview { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--rule); }
.text-preview summary { cursor: pointer; font-weight: 500; }
.text-preview__body {
  max-height: 24rem;
  overflow: auto;
  margin: var(--space-3) 0 0;
  padding: var(--space-4);
  border: 1px solid var(--rule);
  background: var(--paper-raised);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  line-height: 1.25rem;
  white-space: pre-wrap;
}

/* ---------- 20. Reader (full papers as watermarked page images) ---------- */
.reader { background: var(--paper-sunk); padding-bottom: var(--space-8); }
.reader__head { display: grid; gap: var(--space-2); padding-block: var(--space-6) var(--space-5); }
.reader__head p { margin: 0; }
.reader__head a { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--step--1); }
.icon--back { transform: scaleX(-1); width: 1rem; height: 1rem; }
.reader__pages {
  display: grid;
  gap: var(--space-5);
  justify-items: center;
  margin: 0;
  padding: 0 var(--gutter);
  list-style: none;
}
.reader__page { display: grid; gap: var(--space-2); justify-items: center; width: 100%; max-width: 56rem; }
.reader__page img {
  width: 100%;
  height: auto;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  user-select: none;
  -webkit-user-drag: none;
}
@media print {
  .reader__pages { display: none !important; }
  .reader::after { content: "Printing is turned off for full papers. Ask the librarian for help."; }
}

/* ---------- 21. Admin tables, row actions, recycle bin ---------- */
.library-head__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.delete-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-5); }
.bin-list li { align-items: center; }
.purge-form .check { margin: 0; }
.table-wrap { position: relative; overflow-x: auto; margin-top: var(--space-5); border-top: 1px solid var(--rule-strong); }  /* relative: keeps hidden labels inside */
.data-table { width: 100%; border-collapse: collapse; font-size: var(--step--1); line-height: 1.25rem; }
.data-table th {
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
  border-bottom: 1px solid var(--rule-strong);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-align: left;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
}
.data-table td { padding: var(--space-2) var(--space-3) var(--space-2) 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.data-table .mono, .credential { font-family: var(--font-mono); }
.credential { padding: 0 var(--space-1); background: var(--highlight); color: var(--ink); font-size: var(--step-0); letter-spacing: 0.04em; }
.row-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.row-actions form { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: 0; }
.btn--small { min-height: 2.25rem; padding: 0 var(--space-3); font-size: var(--step--2); }
.select--small { min-height: 2.25rem; padding-block: 0.25rem; font-size: var(--step--1); }
.audit-filters { margin-top: var(--space-5); }
.audit-filters .drawer-label input {
  width: 100%; padding: 0; border: 0; background: transparent;
  font-family: var(--font-display); font-size: var(--step-0); line-height: 1.5rem; color: var(--ink);
}
.audit-filters .drawer-label input:focus-visible { box-shadow: none; }
.admin-forms { margin-top: var(--space-6); }
.admin-forms h2 { font-size: var(--step-1); margin-bottom: var(--space-4); }
.csv-example {
  display: block; margin: var(--space-2) 0 var(--space-4); padding: var(--space-3);
  border: 1px solid var(--rule); background: var(--paper-raised); font-size: var(--step--1); white-space: pre;
}
/* The browser's own "Choose file" button, restyled to match */
.input[type="file"] { padding-block: 0.375rem; cursor: pointer; }
.input[type="file"]::file-selector-button {
  margin-right: var(--space-3);
  padding: 0.25rem var(--space-3);
  border: 1px solid var(--brand);
  border-radius: var(--radius);
  background: transparent;
  color: var(--brand);
  font: inherit;
  font-size: var(--step--1);
  font-weight: 500;
  cursor: pointer;
}

/* ---------- 22. Dashboard ----------
   Bar lists: one series per chart, one hue (brand) on a quiet track, and the value
   is always written as text too, so nothing depends on reading bar lengths. */
.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-3);
  margin: var(--space-5) 0 0;
}
.figure { margin: 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--paper-raised); }
.figure__label { font-family: var(--font-mono); font-size: var(--step--2); line-height: 1rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint); }
.figure__value { margin: var(--space-1) 0 0; font-family: var(--font-display); font-size: var(--step-3); line-height: 1.1; font-variant-numeric: lining-nums tabular-nums; }
.figure__value a { color: var(--ink); text-decoration-color: var(--accent-deep); }
.dashboard-grid { display: grid; gap: 0 var(--space-8); }
@media (min-width: 64em) {
  .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-wide { grid-column: 1 / -1; }
}
.dashboard-grid h2 { font-size: var(--step-1); margin-bottom: var(--space-4); }
.dashboard-hint { margin: calc(var(--space-2) * -1) 0 var(--space-3); }
.bars { margin: 0; padding: 0; list-style: none; }
.bars__row {
  display: grid;
  grid-template-columns: minmax(5rem, 10rem) minmax(0, 1fr) 2.5rem;
  gap: var(--space-3);
  align-items: center;
  padding-block: 3px;   /* keeps a small gap between neighbouring bars */
}
.bars__label { font-size: var(--step--1); line-height: 1.25rem; overflow-wrap: anywhere; }
.bars__track { height: 0.75rem; background: var(--paper-sunk); }
.bars__fill { display: block; height: 100%; min-width: 2px; background: var(--brand); border-radius: 0 4px 4px 0; }
.bars__value { font-family: var(--font-mono); font-size: var(--step--1); text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- 23. Printable label (always black on white: it's for paper) ---------- */
.label-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-top: var(--space-5); }
.label-actions p { margin: 0; }
.label-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.1in;
  gap: 0.12in;
  align-items: center;
  width: 3in;
  height: 2in;
  margin-top: var(--space-5);
  padding: 0.14in;
  border: 1px solid var(--rule-strong);
  background: #fff;
  color: #111;
  overflow: hidden;
}
.label-card p { margin: 0; }
.label-card__school { font-size: 6pt; line-height: 1.2; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.label-card__callno { margin-top: 0.05in !important; font-family: var(--font-mono); font-weight: 500; font-size: 8pt; line-height: 1.2; white-space: nowrap; }
.label-card__title {
  margin-top: 0.05in !important; font-family: var(--font-display); font-size: 8pt; line-height: 1.2;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.label-card__meta { margin-top: 0.05in !important; font-size: 6.5pt; line-height: 1.25; }
.label-card__qr svg { display: block; width: 1.1in; height: 1.1in; }
.label-card__qr span { display: block; font-size: 6pt; text-align: center; }
.label-url { margin-top: var(--space-3); overflow-wrap: anywhere; }
@media print {
  @page { size: 3in 2in; margin: 0; }
  body { background: #fff; }
  body * { visibility: hidden; }
  .label-card, .label-card * { visibility: visible; }
  .label-card { position: absolute; left: 0; top: 0; margin: 0; border: 0; }
}

/* ---------- 24. Settings ---------- */
.settings-backups__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3) var(--space-5); }
.settings-backups__head h2 { margin-bottom: var(--space-1); }
.settings-backups__head p { margin: 0; }
.settings-backups .notice { margin-top: var(--space-4); }
.figure__value--text { font-size: var(--step-1); line-height: 1.3; }
.settings-path { margin: var(--space-3) 0 var(--space-4); overflow-wrap: anywhere; }
.data-table .num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.data-table th.num { text-align: right; }
.settings-grid { display: grid; gap: 0 var(--space-8); }
@media (min-width: 64em) { .settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.settings-grid h2 { font-size: var(--step-1); margin-bottom: var(--space-4); }
.input--short { max-width: 8rem; }
.settings-page code { font-family: var(--font-mono); font-size: 0.9em; overflow-wrap: anywhere; }

/* ---------- 25. Related words (staff) ---------- */
.related-form { display: grid; gap: 0 var(--space-4); }
@media (min-width: 48em) { .related-form { grid-template-columns: minmax(10rem, 1fr) minmax(0, 3fr) auto; align-items: start; }
  .related-form .row-actions { padding-top: 1.75rem; } }
.related-row { display: grid; gap: var(--space-2) var(--space-3); align-items: center; width: 100%; }
@media (min-width: 48em) { .related-row { grid-template-columns: minmax(8rem, 1fr) minmax(0, 3fr) auto; } }
.related-row__word { font-weight: 600; overflow-wrap: anywhere; }
.related-row__word .meta { display: block; font-weight: 400; }
.related-list li { display: block; }