/* ==========================================================================
   Bibelressurs – shared stylesheet

   The design system, in the order it is built up:

     1. Tokens      colour, pigments, type, space, shape, motion
     2. Base        elements, links, focus
     3. Layout      container, page, page header
     4. Chrome      site header and colophon footer
     5. Components  cards, badges, buttons, notices, references, sources,
                    ornaments
     6. Tool pages  the side panel + stage shell shared by every tool

   The idea is a scholar's edition: parchment and iron-gall ink, with the
   vermilion "rubric" that manuscripts used for headings as the one accent,
   and gold kept for ornament. Garamond carries headings and every piece of
   reading text; a humanist sans carries controls and small labels. Rules
   are hairlines, corners are nearly square, and the paper has a faint grain.

   A page should never pick a colour of its own. Surfaces and text use the
   semantic tokens; data (routes, lanes, lineages) uses the pigments, which
   are tuned per theme so they need no dark-mode overrides where used. The
   living reference is /design/.
   ========================================================================== */

:root {
  /* theme.js stamps data-theme on <html> on every load — light unless the
     reader has chosen otherwise — so the media query below only decides the
     colours in the "system" setting, and for a reader without JavaScript.
     The dark tokens are written twice on purpose, once for each of those two
     ways in, because a media query cannot share a rule with a plain
     selector. */
  color-scheme: light dark;

  /* ---- Surfaces and ink ---- */
  --bg: #f3ead8;          /* the page: parchment */
  --bg-elev: #faf5ea;     /* a leaf laid on it: cards, panels, popovers */
  --bg-sunken: #e9dec7;   /* pressed in: control bars, wells, the map's ground */
  --text: #2a2017;        /* iron-gall ink */
  --text-muted: #6b5c49;
  --border: #dccdb0;      /* hairline rules */
  --border-strong: #b9a582;

  /* ---- The rubric (accent) and gold (ornament only) ---- */
  --accent: #9a3322;
  --accent-strong: #762416;
  --accent-soft: #efd8c6;
  --gold: #9c7424;
  --gold-soft: #eadcb5;
  --link: var(--accent);

  /* ---- State ---- */
  --focus: #2f5d8f;       /* lapis: selection and keyboard focus */
  --danger: #a3262a;
  --danger-soft: #f3d6cf;
  --ok: #4f6f2c;

  /* ---- Pigments: the categorical palette for data ----
     Earth and mineral colours a scribe could have ground. Routes, timeline
     lanes and family lines take these, in this order of preference. */
  --pig-vermilion: #b3402a;
  --pig-lapis: #2f5d8f;
  --pig-olive: #557a2e;
  --pig-murex: #6c4f86;
  --pig-ochre: #b3761a;
  --pig-verdigris: #2e7b72;
  --pig-madder: #a3456b;
  --pig-umber: #7a5a3a;

  /* ---- Type ---- */
  --font-serif: "EB Garamond", Garamond, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-ui: "Source Sans 3", "Source Sans Pro", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* A modular scale (≈1.2) for the UI; headings on reading pages use the
     fluid sizes in the base section. Garamond runs small, so reading text
     sits a step above the UI text beside it. */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-read: 1.1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;

  /* ---- Space: a 4px grid ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ---- Shape: nearly square, like a printed page ---- */
  --radius: 6px;
  --radius-sm: 3px;
  --shadow: 0 1px 1px rgba(60, 35, 10, 0.06), 0 4px 14px rgba(60, 35, 10, 0.07);
  --shadow-lg: 0 2px 3px rgba(60, 35, 10, 0.08), 0 16px 36px rgba(60, 35, 10, 0.14);
  --maxw: 1120px;
  --header-h: 60px;

  /* ---- Motion: quick, eased, never bouncy ---- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 120ms;
  --dur: 220ms;
  --dur-slow: 520ms;

  /* ---- Paper ----
     Fine grain: fractal noise pushed through a colour matrix into sparse
     brown specks. Tiled, so it costs one small image for the whole site. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .24 0 0 0 0 .1 .32 0 0 0 -.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* Warmer and darker towards the edges, as an old leaf is. */
  --vignette: radial-gradient(ellipse 120% 90% at 50% 20%, transparent 55%, rgba(140, 95, 40, 0.1));
}

/* Dark: lamplight. The system preference, unless the reader chose light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1b1712;
    --bg-elev: #25201a;
    --bg-sunken: #14110d;
    --text: #ece2cf;
    --text-muted: #a99a80;
    --border: #3a3227;
    --border-strong: #5a4d3b;
    --accent: #e08466;
    --accent-strong: #f2a68b;
    --accent-soft: #3d241b;
    --gold: #d3aa5c;
    --gold-soft: #3a2f1c;
    --focus: #86aee0;
    --danger: #e8806e;
    --danger-soft: #3f1f1a;
    --ok: #9bbf6f;
    --pig-vermilion: #e4755c;
    --pig-lapis: #7fa6d6;
    --pig-olive: #9dbb62;
    --pig-murex: #ab93cc;
    --pig-ochre: #e0b050;
    --pig-verdigris: #5fb3a8;
    --pig-madder: #dc8bb0;
    --pig-umber: #c09a74;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.5), 0 16px 36px rgba(0, 0, 0, 0.5);
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .9 0 0 0 0 .7 .16 0 0 0 -.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --vignette: radial-gradient(ellipse 120% 90% at 50% 10%, rgba(255, 190, 110, 0.035), transparent 60%);
  }
}

/* Dark: chosen with the theme toggle, whatever the system says. */
:root[data-theme="dark"] {
  --bg: #1b1712;
  --bg-elev: #25201a;
  --bg-sunken: #14110d;
  --text: #ece2cf;
  --text-muted: #a99a80;
  --border: #3a3227;
  --border-strong: #5a4d3b;
  --accent: #e08466;
  --accent-strong: #f2a68b;
  --accent-soft: #3d241b;
  --gold: #d3aa5c;
  --gold-soft: #3a2f1c;
  --focus: #86aee0;
  --danger: #e8806e;
  --danger-soft: #3f1f1a;
  --ok: #9bbf6f;
  --pig-vermilion: #e4755c;
  --pig-lapis: #7fa6d6;
  --pig-olive: #9dbb62;
  --pig-murex: #ab93cc;
  --pig-ochre: #e0b050;
  --pig-verdigris: #5fb3a8;
  --pig-madder: #dc8bb0;
  --pig-umber: #c09a74;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.5), 0 16px 36px rgba(0, 0, 0, 0.5);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .9 0 0 0 0 .7 .16 0 0 0 -.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --vignette: radial-gradient(ellipse 120% 90% at 50% 10%, rgba(255, 190, 110, 0.035), transparent 60%);

  /* An explicit choice also settles scrollbars and form controls. */
  color-scheme: dark;
}

:root[data-theme="light"] {
  color-scheme: light;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background-color: var(--bg);
  background-image: var(--grain), var(--vignette);
  background-attachment: scroll, fixed;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: color-mix(in srgb, var(--accent) 24%, transparent);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.5em;
  letter-spacing: -0.005em;
  font-variant-numeric: oldstyle-nums;
}

h1 {
  font-size: clamp(2.1rem, 2.4vw + 1.2rem, 3rem);
  font-weight: 500;
}

h2 {
  font-size: clamp(1.45rem, 1vw + 1.1rem, 1.85rem);
}

h3 {
  font-size: 1.25rem;
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--link);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: 3px;
  transition: color var(--dur-fast) ease, text-decoration-color var(--dur-fast) ease;
}

a:hover {
  color: var(--accent-strong);
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

img,
svg {
  max-width: 100%;
}

button {
  font: inherit;
  color: inherit;
}

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

.skip-link {
  position: absolute;
  left: 8px;
  top: -48px;
  background: var(--accent);
  color: var(--bg-elev);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  z-index: 100;
}

.skip-link:focus {
  top: 8px;
}

/* Everything stops moving for a reader who has asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 32px;
}

main {
  flex: 1 0 auto;
}

/* Block padding only: a `padding` shorthand here would have the same
   specificity as .container's and would wipe out its side gutter. */
.page {
  padding-block: var(--space-7) var(--space-8);
}

.page--narrow {
  max-width: 760px;
}

/* A section's title page: the name, a line of Garamond italic, and the
   ornamental rule that closes it off from the list below. */
.page-header {
  margin-bottom: var(--space-6);
}

.page-header h1 {
  margin-bottom: 0.25em;
}

.page-header .lead {
  color: var(--text-muted);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.45;
  max-width: 60ch;
  margin: 0;
}

.page-header::after {
  content: "";
  display: block;
  height: 9px;
  margin-top: var(--space-5);
  background:
    linear-gradient(var(--border-strong), var(--border-strong)) left 4px / 100% 1px no-repeat;
  -webkit-mask: linear-gradient(to right, #000 70%, transparent);
  mask: linear-gradient(to right, #000 70%, transparent);
}

/* Small caps above a heading: the section a page belongs to, the kind of an
   item. The one place letter-spacing is used. */
.eyebrow {
  display: block;
  margin: 0 0 var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   Header / nav
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg-elev) 90%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

/* The second line of a double rule, as under a running head in a printed
   book. Absolutely placed, so it takes no height from the page below. */
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: var(--border);
  pointer-events: none;
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}

.brand:hover {
  color: var(--accent-strong);
}

/* The favicon's book beside the name; it takes the accent and turns with the
   name on hover, so the two read as one link. */
.brand__mark {
  width: 28px;
  height: 28px;
  flex: none;
  color: var(--accent);
  transition: transform var(--dur) var(--ease);
}

.brand__page {
  fill: var(--bg-elev);
}

.brand:hover .brand__mark {
  color: var(--accent-strong);
  transform: rotate(-4deg);
}

.site-nav {
  display: flex;
  gap: 2px;
  margin-left: auto;
}

.site-nav a {
  position: relative;
  display: inline-block;
  padding: 8px 10px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.95rem;
  white-space: nowrap;
}

/* A rubric underline that draws in from the centre. */
.site-nav a::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 2px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform var(--dur) var(--ease);
}

.site-nav a:hover {
  color: var(--text);
}

.site-nav a:hover::after {
  transform: scaleX(0.5);
}

.site-nav a[aria-current="page"] {
  color: var(--text);
  font-weight: 600;
}

.site-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.site-nav a.is-planned {
  font-style: italic;
  opacity: 0.6;
}

.nav-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  cursor: pointer;
}

/* The search link beside the menu and the theme button: a round icon like
   the theme button, so it stays in the row when the nav folds into Meny.
   On the search page itself it is filled in, like the current nav link.
   The theme button cycles system → light → dark (theme.js) and comes last,
   at the right edge both beside the nav and next to the menu button. */
.header-search,
.theme-toggle {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: none;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.header-search:hover,
.header-search[aria-current="page"],
.theme-toggle:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-strong);
}

/* The two round buttons read as a pair, closer than the header's gap. */
.header-search + .theme-toggle {
  margin-left: calc(8px - var(--space-4));
}

.header-search svg,
.theme-toggle svg {
  width: 17px;
  height: 17px;
  display: block;
}

/* Between a laptop and the fold: the row still fits, but only just, so the
   links give up some of their padding before the menu gives up the row. */
@media (max-width: 1080px) {
  .site-nav a {
    padding: 8px 7px;
    font-size: 0.9rem;
  }

  .site-nav a::after {
    left: 7px;
    right: 7px;
  }
}

@media (max-width: 720px) {
  /* A phone has no room for the wide gutter; the content still clears the
     edge by a comfortable margin. */
  .container {
    padding: 0 20px;
  }

  .brand {
    font-size: 1.25rem;
  }
}

/* Below this the links no longer fit on one line beside the name and the
   two round buttons (the row needs about 955px), so it becomes the dropdown
   behind the Meny button. */
@media (max-width: 980px) {
  .nav-toggle {
    display: inline-block;
  }

  /* The dropdown has room again, so the links take their full padding back. */
  .site-nav a {
    padding: 10px 10px;
    font-size: 0.95rem;
  }

  .site-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--header-h) + 4px);
    flex-direction: column;
    background: var(--bg-elev);
    border-bottom: 1px solid var(--border);
    padding: 8px 12px 12px;
    box-shadow: var(--shadow);
  }

  .site-nav.is-open {
    display: flex;
    animation: drop-in var(--dur) var(--ease);
  }

  .site-nav a::after {
    left: 0;
    right: auto;
    top: 10px;
    bottom: 10px;
    width: 2px;
    height: auto;
    transform: scaleY(0);
  }

  .site-nav a[aria-current="page"]::after {
    transform: scaleY(1);
  }

  /* "Om nettstedet" is not a section, so a hairline sets it apart here. */
  .site-nav a.site-nav__extra {
    display: block;
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
  }

  /* One hairline sets the extras apart from the sections, not one each. */
  .site-nav a.site-nav__extra + a.site-nav__extra {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }
}

/* --------------------------------------------------------------------------
   Footer: a colophon — what the pages link to and what they are built on
   -------------------------------------------------------------------------- */

.site-footer {
  margin-top: var(--space-6);
  padding: var(--space-5) 0 var(--space-6);
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-align: center;
}

.site-footer .ornament {
  margin-bottom: var(--space-4);
}

.site-footer__about {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.02rem;
}

.site-footer ul {
  list-style: none;
  padding: 0;
  margin: var(--space-2) 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 0;
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
}

.site-footer li + li::before {
  content: "·";
  margin: 0 10px;
  color: var(--border-strong);
}

.site-footer__about-link {
  margin: var(--space-3) 0 0;
}

.site-footer__about-link a {
  text-decoration: none;
  border-bottom: 1px solid var(--border-strong);
  padding-bottom: 2px;
}

.site-footer a {
  color: var(--text-muted);
}

.site-footer a:hover {
  color: var(--accent-strong);
}

/* --------------------------------------------------------------------------
   Ornament: a hairline with a gold lozenge in the middle. Used to close the
   title of the hub and above the colophon — no more often than that.
   -------------------------------------------------------------------------- */

.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--gold);
}

.ornament::before,
.ornament::after {
  content: "";
  flex: 0 1 120px;
  height: 1px;
  background: linear-gradient(to var(--dir, right), transparent, var(--border-strong));
}

.ornament::after {
  --dir: left;
}

.ornament svg {
  width: 22px;
  height: 10px;
  flex: none;
  display: block;
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 20px;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background-color: var(--bg-elev);
  background-image: var(--grain);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 22px 24px 20px;
  color: inherit;
  text-decoration: none;
  transition: border-color var(--dur) ease;
}

/* Flat on purpose: no shadow and no lift. A rubric rule draws across the
   top edge instead, and the title takes the accent, the way a link does. */
a.card::before {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: -1px;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease);
}

a.card:hover {
  border-color: var(--border-strong);
  color: inherit;
}

a.card:hover::before {
  transform: scaleX(1);
}

a.card h2,
a.card h3 {
  transition: color var(--dur) ease;
}

a.card:hover h2,
a.card:hover h3 {
  color: var(--accent-strong);
}

/* Cards come in with a short rise, one after another. */
.card-grid > .card,
.hub-grid > .card {
  animation: rise var(--dur-slow) var(--ease) both;
}

.card-grid > .card:nth-child(2),
.hub-grid > .card:nth-child(2) { animation-delay: 50ms; }
.card-grid > .card:nth-child(3),
.hub-grid > .card:nth-child(3) { animation-delay: 100ms; }
.card-grid > .card:nth-child(4),
.hub-grid > .card:nth-child(4) { animation-delay: 150ms; }
.card-grid > .card:nth-child(5) { animation-delay: 200ms; }
.card-grid > .card:nth-child(6) { animation-delay: 250ms; }
.card-grid > .card:nth-child(n + 7) { animation-delay: 300ms; }

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@keyframes drop-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

/* The card is a flex column, which would stretch a badge across it. */
.card > .badge {
  align-self: flex-start;
}

/* On a card the kind of item is a small-caps label, not a pill. */
.card > .badge--accent {
  padding: 0;
  background: none;
  color: var(--accent);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.card h2,
.card h3 {
  margin: 2px 0 0;
  font-size: 1.55rem;
  font-weight: 600;
}

/* Section icon on the hub cards only; the lists inside each section go
   without, so the icons keep marking the site's main doors. */
.card__icon {
  display: block;
  width: 36px;
  height: 36px;
  color: var(--accent);
}

.card__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* The hub numbers its sections like the parts of a book. */
.card__num {
  position: absolute;
  top: 18px;
  right: 22px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--gold);
}

.card p {
  margin: 0;
  color: var(--text-muted);
  font-family: var(--font-serif);
  font-size: 1.08rem;
  line-height: 1.45;
}

.card__meta {
  margin-top: auto;
  padding-top: 12px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.card__meta:empty {
  display: none;
}

/* --------------------------------------------------------------------------
   Small components
   -------------------------------------------------------------------------- */

.badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  background: var(--bg-sunken);
  color: var(--text-muted);
  vertical-align: middle;
}

.badge--accent {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.badge--warn {
  background: var(--danger-soft);
  color: var(--danger);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg-elev);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1.3;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.btn:hover {
  border-color: var(--accent);
  color: var(--accent-strong);
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg-elev);
}

.btn--primary:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--bg-elev);
}

.btn--small {
  padding: 4px 10px;
  font-size: 0.85rem;
}

.notice {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  background: var(--bg-elev);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin: 16px 0;
}

.notice--error {
  border-left-color: var(--danger);
  background: var(--danger-soft);
}

.notice--muted {
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* A verse reference: the site's footnote mark. Sans, a touch smaller than
   the text around it, in the rubric, with a dotted rule under it. */
.bible-ref {
  white-space: nowrap;
  font-family: var(--font-ui);
  font-size: 0.9em;
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  text-decoration-style: dotted;
  text-decoration-color: color-mix(in srgb, currentColor 55%, transparent);
}

.bible-ref:hover {
  text-decoration-style: solid;
}

.ref-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* display:flex above outranks the browser's own [hidden] rule. */
.ref-list[hidden] {
  display: none;
}

.prose {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  line-height: 1.65;
  max-width: 66ch;
  font-variant-numeric: oldstyle-nums;
}

.prose h2,
.prose h3 {
  margin-top: 1.6em;
}

/* --------------------------------------------------------------------------
   Full-height tool pages (maps, timelines, trees)

   Wide screens get two columns: a side panel and the stage. The panel holds
   everything that explains the tool — back link, title, the context text, the
   controls, and an "Om" block with the how-to hint and the sources — and it
   stays open there, because a strip above the stage was too easy to read past.

   Below 860px the same panel folds into a header strip above the stage: title
   row, controls, and two clamped lines of context that the "Om" button opens
   in place. The stage keeps its own height either way, so a tap on it is
   never scrolled out of view.

   Anything that follows what is on screen — details, ordered browsing,
   zooming — still lives on the stage itself: the detail drawer, the floating
   controls and the stepper.
   -------------------------------------------------------------------------- */

.tool-page {
  display: grid;
  /* minmax(0, …) rather than a bare 1fr: grid items floor at min-content, and
     the stage would otherwise widen the page instead of scrolling inside
     itself. */
  grid-template-columns: clamp(280px, 26vw, 350px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  /* The extra pixel is the site header's bottom border, which --header-h (its
     min-height) does not count; without it the page scrolls by 1px. */
  height: calc(100vh - var(--header-h) - 1px);
  height: calc(100dvh - var(--header-h) - 1px);
  min-width: 0;
  max-width: 100%;
}

.tool-panel {
  grid-column: 1;
  grid-row: 1;
  /* Positioned above the stage: on a phone the popovers hang out of the strip
     and over the map, whose Leaflet panes carry high z-indexes of their own. */
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  /* The panel scrolls on its own so the stage never leaves the viewport. */
  overflow: auto;
  overscroll-behavior: contain;
  background-color: var(--bg-elev);
  background-image: var(--grain);
  border-right: 1px solid var(--border);
}

.tool-panel__head {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  background-color: var(--bg-elev);
  background-image: var(--grain);
  border-bottom: 1px solid var(--border);
}

.tool-panel__head h1 {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.15;
}

/* An SVG arrow, not a ← glyph: the character's ink sits off-centre in its
   em box, so the round button looked lopsided however the box was aligned. */
.tool-back {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--text-muted);
  text-decoration: none;
}

.tool-back svg {
  width: 18px;
  height: 18px;
  display: block;
}

.tool-back:hover {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

/* --------------------------------------------------------------------------
   The title is the menu of the section: every other map (timeline, tree) is
   one click away from the one on screen, so moving between them never goes
   through the index page. The title row is the one part of a tool page that
   is always in view, in the side panel as well as in the phone strip.
   -------------------------------------------------------------------------- */

/* Both classes, so this wins over the .popover defaults further down. */
.tool-switcher.popover {
  /* Static rather than relative, so the list is measured against the head —
     the full width of the panel — and not against the truncated title. */
  position: static;
  flex: 1 1 auto;
  min-width: 0;
}

.tool-switcher > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 2px 6px;
  margin: -2px -6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.tool-switcher > summary:hover {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

/* The caret hugs the title instead of being pushed to the far edge, so it
   reads as one control rather than two. In the panel a long title still wraps;
   only the phone strip clips it to one line (see the media query below). */
.tool-switcher > summary > h1 {
  flex: 0 1 auto;
}

/* A section with a single entry has nothing to switch to: a plain heading. */
.tool-switcher.is-single > summary {
  pointer-events: none;
  padding: 0;
  margin: 0;
}

.tool-switcher.is-single > summary::after {
  content: none;
}

.tool-switcher > .popover__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 16px;
  right: 16px;
  z-index: 5;
  max-height: min(70vh, 520px);
  overflow: auto;
  margin-top: 0;
  padding: 6px;
  box-shadow: var(--shadow-lg);
}

.tool-switcher__list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tool-switcher__list a {
  display: block;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  font-family: var(--font-serif);
  font-size: 1.08rem;
  line-height: 1.25;
}

.tool-switcher__list a:hover {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.tool-switcher__list a[aria-current] {
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 600;
}

.tool-switcher__era {
  display: block;
  margin-top: 1px;
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 400;
}

.tool-switcher__all {
  display: block;
  margin-top: 4px;
  padding: 8px 9px 4px;
  border-top: 1px solid var(--border);
  color: var(--accent-strong);
  font-size: 0.85rem;
  text-decoration: none;
}

.tool-switcher__all:hover {
  text-decoration: underline;
}

/* The panel is open on a wide screen, so the toggle is a small-screen control. */
.tool-panel__toggle {
  display: none;
  flex: none;
}

.tool-panel__toggle::after {
  content: "\25be";
  color: var(--text-muted);
  transition: transform var(--dur) var(--ease);
}

.tool-panel.is-open .tool-panel__toggle::after {
  transform: rotate(180deg);
}

.tool-context {
  padding: 16px 18px;
  color: var(--text);
  font-family: var(--font-serif);
  font-size: var(--text-read);
  line-height: 1.5;
  font-variant-numeric: oldstyle-nums;
}

.tool-context:empty {
  display: none;
}

.tool-context p {
  margin: 0 0 10px;
}

.tool-context p:last-child {
  margin-bottom: 0;
}

.tool-context h2 {
  margin: 0 0 2px;
  font-size: 1.3rem;
  color: var(--text);
}

.tool-context__years {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}

/* The controls: stacked rows in the panel, one scrolling row on a phone. */
.tool-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-width: 0;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-sunken) 70%, var(--bg-elev));
}

.tool-bar[hidden] {
  display: none;
}

/* The hint, the caveats and the sources: the tail of the panel, pushed to its
   bottom edge when the context is short. */
.tool-info {
  display: grid;
  gap: 8px;
  margin-top: auto;
  padding: 14px 18px 16px;
  border-top: 1px solid var(--border);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.tool-info:empty {
  display: none;
}

.tool-info p {
  margin: 0;
}

.tool-stage {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  min-height: 0;
  min-width: 0;
  /* The closed detail drawer sits translated past the right edge; without
     this it widens the page. Fixed-position children (the mobile bottom
     sheet) are not clipped. */
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Control furniture: chip rows and popovers

   In the panel both take the full width and open downwards in the flow; the
   phone overrides below turn them back into one sideways-scrolling row with a
   floating popover panel.
   -------------------------------------------------------------------------- */

.chips {
  flex: 1 1 100%;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  /* Fade whichever edge the row can still be scrolled towards, so a chip cut
     off by a narrow window reads as "there is more" rather than as the end of
     the list. tool-page.js sets the classes. Both widths are 0 until then,
     which makes the mask a no-op in the wide panel, where the chips wrap. */
  --fade-start: 0px;
  --fade-end: 0px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade-start),
      #000 calc(100% - var(--fade-end)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--fade-start),
      #000 calc(100% - var(--fade-end)), transparent);
}

.chips.can-scroll-left {
  --fade-start: 22px;
}

.chips.can-scroll-right {
  --fade-end: 22px;
}

.chips::-webkit-scrollbar {
  display: none;
}

.chips .btn {
  flex: none;
  white-space: nowrap;
}

.chips .btn {
  border-color: var(--border);
}

.chips .btn.is-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-strong);
}

.popover {
  position: relative;
  flex: 1 1 100%;
}

.popover > summary {
  list-style: none;
}

.popover > summary::-webkit-details-marker {
  display: none;
}

.popover > summary::after {
  content: "\25be";
  color: var(--text-muted);
}

.popover[open] > summary {
  border-color: var(--accent);
  color: var(--accent-strong);
}

.popover[open] > .popover__panel {
  animation: drop-in var(--dur) var(--ease);
}

.popover__panel {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   Stage furniture shared by maps, timelines and family trees: the floating
   controls, the ordered-stop stepper and the detail drawer (right edge on
   wide screens, bottom sheet on narrow ones).
   -------------------------------------------------------------------------- */

.stage-controls {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: flex;
  gap: 6px;
  z-index: 5;
}

.stage-controls .btn {
  width: 34px;
  height: 34px;
  padding: 0;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: var(--shadow);
}

/* Walks an ordered sequence (a journey's stops) without a list to scroll. */
.stage-stepper {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 2px;
  max-width: calc(100% - 24px);
  padding: 3px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
}

.stage-stepper[hidden] {
  display: none;
}

.stage-stepper button {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.stage-stepper button:hover:not(:disabled) {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.stage-stepper button:disabled {
  opacity: 0.35;
  cursor: default;
}

.stage-stepper__label {
  min-width: 0;
  padding: 0 8px;
  font-family: var(--font-serif);
  font-size: 1.02rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stage-stepper__num {
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.detail-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(400px, 48%);
  background-color: var(--bg-elev);
  background-image: var(--grain);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  z-index: 6;
  overflow: auto;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--dur) var(--ease), visibility 0s linear var(--dur);
}

.detail-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform var(--dur) var(--ease), visibility 0s;
}

.detail-drawer__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: var(--bg-sunken);
  color: var(--text-muted);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
}

.detail-drawer__close:hover {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.detail-drawer__body {
  padding: 22px 48px 24px 24px;
}

.detail-drawer h2 {
  font-size: 1.7rem;
  line-height: 1.1;
  margin: 0 0 4px;
}

.detail-drawer h2:focus {
  outline: none;
}

.detail__years {
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.detail__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.detail-drawer p {
  margin: 0 0 12px;
  font-family: var(--font-serif);
  font-size: var(--text-read);
  line-height: 1.5;
  font-variant-numeric: oldstyle-nums;
}

.detail-drawer .ref-list {
  margin-bottom: 10px;
}

.detail-drawer .date-note {
  font-family: var(--font-ui);
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text-muted);
  border-left: 2px solid var(--gold);
  padding-left: 12px;
  margin: 12px 0;
}

.detail-drawer .date-note strong {
  color: var(--text);
}

.detail__dates {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  row-gap: 2px;
  margin: 0 0 10px;
  font-size: 0.9rem;
}

.detail__dates dt {
  color: var(--text-muted);
}

.detail__dates dd {
  margin: 0;
}

/* A manuscript's card of facts: language, material, where it is kept. */
.detail__facts {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  row-gap: 4px;
  margin: 0 0 14px;
  padding: 10px 12px;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: 0.86rem;
  line-height: 1.4;
}

.detail__facts dt {
  color: var(--text-muted);
}

.detail__facts dd {
  margin: 0;
}

.detail__links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

/* "Bibelbøkene: Første Mosebok · Andre Mosebok" – the books an item or a page
   draws on, each a link to its book page (shared/links.js). */
.book-line,
.detail-drawer .book-line {
  margin: 10px 0 0;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.book-line__label {
  color: var(--text-muted);
}

/* A button that reads as a link: a name in the drawer that selects on the stage. */
.link-btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  cursor: pointer;
}

.link-btn:hover {
  color: var(--accent-strong);
}

/* Sources: set like the apparatus at the foot of a scholarly page — a
   small-caps head, then numbered notes in Garamond. They are why a reader
   can trust the page, so they are quiet but never hidden away entirely. */
.sources {
  font-size: 0.82rem;
}

.sources summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.sources summary::-webkit-details-marker {
  display: none;
}

.sources summary::before {
  content: "\203A";
  font-size: 1rem;
  line-height: 1;
  color: var(--accent);
  transition: transform var(--dur) var(--ease);
}

.sources[open] summary::before {
  transform: rotate(90deg);
}

.sources summary:hover {
  color: var(--accent-strong);
}

.sources ol,
.sources ul {
  margin: 8px 0 0;
  padding: 8px 0 0 1.4em;
  border-top: 1px solid var(--border);
  font-family: var(--font-serif);
  font-size: 0.98rem;
  line-height: 1.4;
  color: var(--text);
  font-variant-numeric: oldstyle-nums;
}

.sources[open] ol,
.sources[open] ul {
  animation: fade-in var(--dur) ease;
}

.sources li + li {
  margin-top: 4px;
}

.sources li::marker {
  color: var(--gold);
  font-size: 0.85em;
}

/* --------------------------------------------------------------------------
   Phones and narrow tablets: the panel folds into a strip above the stage.
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .tool-page {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }

  .tool-panel {
    grid-column: 1;
    grid-row: 1;
    /* Closed, the strip must not clip the popovers and the search results
       that hang below the control bar. Opened, it scrolls inside itself
       rather than squeezing the stage down to nothing. */
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .tool-panel.is-open {
    max-height: 60vh;
    max-height: 60dvh;
    overflow: auto;
  }

  .tool-stage {
    grid-column: 1;
    grid-row: 2;
  }

  /* Title row and controls stay at the top; the reading text follows them. */
  .tool-panel__head,
  .tool-bar {
    order: -1;
  }

  .tool-panel__head {
    padding: 8px 12px;
  }

  .tool-panel__head h1 {
    font-size: 1.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .tool-switcher > .popover__panel {
    left: 12px;
    right: 12px;
  }

  .tool-panel__toggle {
    display: inline-flex;
  }

  .tool-bar {
    flex-wrap: nowrap;
    padding: 6px 12px;
    gap: 6px;
    border-top: 0;
  }

  /* One row that scrolls sideways, so the bar stays one row high. */
  .chips {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 2px 0;
  }

  .popover {
    flex: none;
  }

  .popover__panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 20;
    min-width: 210px;
    max-height: 60vh;
    overflow: auto;
    margin-top: 0;
    box-shadow: var(--shadow-lg);
  }

  /* Hidden outright while the strip is closed: a teaser clamped mid-sentence
     reads as a rendering fault and costs map height that a phone has none of.
     "Om" opens it along with the info block. */
  .tool-context {
    display: none;
    padding: 10px 12px;
    font-size: 1rem;
  }

  .tool-panel.is-open .tool-context:not(:empty) {
    display: block;
  }

  .tool-info {
    display: none;
    margin-top: 0;
    padding: 10px 12px;
  }

  .tool-panel.is-open .tool-info {
    display: grid;
  }

  .detail-drawer {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-height: 70vh;
    max-height: 70dvh;
    border-left: 0;
    border-top: 1px solid var(--border);
    border-radius: 10px 10px 0 0;
    transform: translateY(100%);
  }

  .detail-drawer.is-open {
    transform: translateY(0);
  }

  .detail-drawer::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--border);
    margin: 8px auto 0;
  }

  .detail-drawer__body {
    padding-top: 8px;
  }

  .stage-controls {
    bottom: 8px;
    left: 8px;
  }

  .stage-stepper {
    bottom: 8px;
  }
}

/* --------------------------------------------------------------------------
   The search field and its dropdown (shared/search-field.js)

   Used on the front page and at the top of /search/. The results themselves
   are styled in search/search.css; only the field and the suggestions are
   shared.
   -------------------------------------------------------------------------- */

.search-field {
  position: relative;
  margin: 0 auto var(--space-5);
  max-width: 44rem;
  /* The front page centres its hero text; the field and its list read left. */
  text-align: left;
}

.search-field__box {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}

.search-field__box:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.search-field__icon {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--text-muted);
}

.search-field__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--text-md);
  padding: var(--space-2) 0;
}

.search-field__input:focus {
  outline: none;
}

/* Safari draws its own clear button, which fights the one border. */
.search-field__input::-webkit-search-decoration,
.search-field__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.search-field__go {
  flex: none;
}

.search-suggest {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  margin: 0;
  padding: var(--space-1);
  list-style: none;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  max-height: 60vh;
  overflow-y: auto;
}

.search-suggest[hidden] {
  display: none;
}

.search-suggest__item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.search-suggest__item:hover,
.search-suggest__item.is-active {
  background: var(--bg-sunken);
}

.search-suggest__title {
  font-family: var(--font-serif);
  font-size: var(--text-read);
  line-height: 1.2;
}

.search-suggest__sub {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* What the query matched. A wash of the rubric, never a highlighter. */
mark {
  background: var(--accent-soft);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

/* A small link in a row of them: where an item is shown, what it hangs
   together with. */
.chip {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 2px 9px;
  margin: 0 var(--space-1) var(--space-1) 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-elev);
  color: var(--text);
  text-decoration: none;
  font-size: var(--text-sm);
  line-height: 1.5;
}

a.chip:hover {
  border-color: var(--accent);
  color: var(--accent-strong);
}

.chip__kind {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: lowercase;
}

@media (max-width: 600px) {
  .search-field__go {
    /* The magnifier in the field already says what it is, and the button
       would take a third of the row and crowd out the placeholder. */
    display: none;
  }
}