/* ==========================================================================
   De Materia Medica — Dioscorides, c. 50–70 AD

   Design direction: the pigment palette of the Vienna Dioscurides (Cod. Med.
   gr. 1, c. 512 AD) — azurite blue, verdigris, and minium (red lead) on
   vellum. Minium is used strictly as rubrication: it marks the citation
   reference and toxicity, and appears nowhere else. Type is Palatino, the
   face the source edition is actually set in.
   ========================================================================== */

:root {
  /* --- ground & ink --------------------------------------------------- */
  --ground:        #e8e6de;   /* vellum, biased cool-green rather than cream */
  --panel:         #f2f1eb;
  --recess:        #dedcd2;
  --plate-ground:  #f7f6f1;   /* behind contained illustrations */

  --ink:           #1f1d19;   /* iron gall */
  --ink-2:         #565248;
  --ink-3:         #8a857a;

  --rule:          #cfccc0;
  --rule-2:        #b4b0a1;

  /* --- pigments ------------------------------------------------------- */
  --azurite:       #23486f;   /* primary accent */
  --azurite-lift:  #2f5c8c;
  --azurite-wash:  #dde4ee;
  --verdigris:     #4a6b53;   /* organic / plant */
  --verdigris-wash:#dde6de;
  --minium:        #b0392a;   /* rubrication ONLY */
  --minium-wash:   #f2ded9;

  /* --- form ----------------------------------------------------------- */
  --r:   2px;
  --r-2: 3px;
  --lift: 0 1px 0 rgba(31,29,25,.04), 0 8px 24px -12px rgba(31,29,25,.30);
  --lift-2: 0 24px 70px -20px rgba(20,22,26,.45);

  --serif: Palatino, "Palatino Linotype", "Iowan Old Style", "Book Antiqua",
           "URW Palladio L", "Sitka Text", Georgia, serif;
  --sans:  ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
           Roboto, Helvetica, Arial, sans-serif;

  --bar: 60px;
  --rail: 264px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:       #14161a;
    --panel:        #1b1e23;
    --recess:       #101216;
    --plate-ground: #23272e;

    --ink:          #e4e2da;
    --ink-2:        #a5a396;
    --ink-3:        #74726a;

    --rule:         #2b2f36;
    --rule-2:       #3d434c;

    --azurite:      #7ba7d8;
    --azurite-lift: #9dc0e6;
    --azurite-wash: #1b2836;
    --verdigris:    #85ad8e;
    --verdigris-wash:#1a2620;
    --minium:       #e0705c;
    --minium-wash:  #2e1a17;

    --lift:   0 1px 0 rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.7);
    --lift-2: 0 24px 70px -20px rgba(0,0,0,.85);
  }
}

:root[data-theme="dark"] {
  --ground:       #14161a;
  --panel:        #1b1e23;
  --recess:       #101216;
  --plate-ground: #23272e;

  --ink:          #e4e2da;
  --ink-2:        #a5a396;
  --ink-3:        #74726a;

  --rule:         #2b2f36;
  --rule-2:       #3d434c;

  --azurite:      #7ba7d8;
  --azurite-lift: #9dc0e6;
  --azurite-wash: #1b2836;
  --verdigris:    #85ad8e;
  --verdigris-wash:#1a2620;
  --minium:       #e0705c;
  --minium-wash:  #2e1a17;

  --lift:   0 1px 0 rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.7);
  --lift-2: 0 24px 70px -20px rgba(0,0,0,.85);
}

:root[data-theme="light"] {
  --ground:       #e8e6de;
  --panel:        #f2f1eb;
  --recess:       #dedcd2;
  --plate-ground: #f7f6f1;
  --ink:          #1f1d19;
  --ink-2:        #565248;
  --ink-3:        #8a857a;
  --rule:         #cfccc0;
  --rule-2:       #b4b0a1;
  --azurite:      #23486f;
  --azurite-lift: #2f5c8c;
  --azurite-wash: #dde4ee;
  --verdigris:    #4a6b53;
  --verdigris-wash:#dde6de;
  --minium:       #b0392a;
  --minium-wash:  #f2ded9;
  --lift: 0 1px 0 rgba(31,29,25,.04), 0 8px 24px -12px rgba(31,29,25,.30);
  --lift-2: 0 24px 70px -20px rgba(20,22,26,.45);
}

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

/* Several components below set an explicit `display`, and an author-sheet
   class beats the UA sheet's `[hidden] { display: none }`. Without this the
   loading overlay stays painted on top of a fully rendered app. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

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

/* --- rubrication ---------------------------------------------------------
   The citation reference is the one piece of structure that is genuinely
   ancient: book and position, the way this text has been cited for two
   millennia. It gets the red, and nothing else does. */

.rubric {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--minium);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- loading -- */

.loading {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-content: center; justify-items: center; gap: 18px;
  background: var(--ground);
}
.loading-mark {
  width: 34px; height: 34px;
  border: 1.5px solid var(--rule-2);
  border-top-color: var(--azurite);
  border-radius: 50%;
  animation: spin 900ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading p {
  margin: 0; font-size: 12px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3);
}

/* -------------------------------------------------------------- topbar -- */

.topbar {
  position: sticky; top: 0; z-index: 40;
  height: var(--bar);
  display: flex; align-items: center; gap: 16px;
  padding: 0 18px;
  background: var(--panel);
  border-bottom: 1px solid var(--rule);
}

.brand { flex: 0 0 auto; display: flex; align-items: baseline; gap: 10px; }
.brand h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: 19px; font-weight: 400;
  letter-spacing: .015em; line-height: 1;
}
.brand p {
  margin: 0; font-size: 11px; color: var(--ink-3);
  letter-spacing: .04em; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* Era abbreviation, set down so it does not shout inside running text. */
.sc { font-size: .92em; letter-spacing: .06em; }

.search-wrap { position: relative; flex: 1 1 auto; max-width: 480px; margin-left: auto; }
.search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--ink-3); pointer-events: none; width: 16px; height: 16px;
}
#search {
  width: 100%; height: 34px;
  padding: 0 30px 0 32px;
  font-family: var(--sans); font-size: 13.5px; color: var(--ink);
  background: var(--recess);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  outline: none;
  transition: border-color .14s, background .14s;
}
#search::placeholder { color: var(--ink-3); }
#search:focus { border-color: var(--azurite); background: var(--panel); }
#search::-webkit-search-cancel-button { display: none; }
.clear-search {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; padding: 0;
  border: 0; border-radius: var(--r);
  background: none; color: var(--ink-3);
  font-size: 16px; line-height: 1; cursor: pointer;
}
.clear-search:hover { color: var(--ink); background: var(--rule); }

.icon-btn {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 1px solid var(--rule); border-radius: var(--r);
  background: transparent; color: var(--ink-2);
  cursor: pointer;
  transition: color .14s, border-color .14s, background .14s;
}
.icon-btn:hover { color: var(--ink); border-color: var(--rule-2); background: var(--recess); }
.filter-toggle { display: none; }

/* -------------------------------------------------------------- layout -- */

.layout {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  align-items: start;
}

/* ------------------------------------------------------------- filters -- */

.filters {
  position: sticky; top: var(--bar);
  height: calc(100vh - var(--bar));
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--panel);
  border-right: 1px solid var(--rule);
}
.filters-inner { padding: 16px 14px 56px; }

.filters-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; padding-bottom: 10px;
}
.filters-head h2 {
  margin: 0; font-size: 10.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
}
.link-btn {
  border: 0; background: none; padding: 0;
  font-family: var(--sans); font-size: 11.5px;
  color: var(--azurite); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.link-btn:hover { color: var(--azurite-lift); }

.active-chips { display: flex; flex-wrap: wrap; gap: 4px; padding-bottom: 14px; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 4px 2px 7px;
  font-size: 11px; line-height: 1.6;
  background: var(--azurite-wash); color: var(--azurite);
  border: 1px solid color-mix(in srgb, var(--azurite) 26%, transparent);
  border-radius: var(--r);
}
.chip button {
  border: 0; background: none; padding: 0 1px; cursor: pointer;
  color: inherit; opacity: .6; font-size: 13px; line-height: 1;
}
.chip button:hover { opacity: 1; }

.facet { border-top: 1px solid var(--rule); padding: 12px 0 2px; }
.facet h3 {
  margin: 0 0 7px;
  font-size: 10px; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3);
}
.facet-note {
  letter-spacing: .02em; text-transform: none;
  font-weight: 400; font-style: italic; opacity: .75;
}
.facet-body { display: flex; flex-direction: column; }

.check {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 6px; margin: 0 -6px;
  border-radius: var(--r);
  font-size: 12.5px; line-height: 1.45; color: var(--ink-2);
  cursor: pointer; user-select: none;
}
.check:hover { background: var(--recess); color: var(--ink); }
.check input {
  flex: 0 0 auto; width: 13px; height: 13px; margin: 0;
  accent-color: var(--azurite); cursor: pointer;
}
.check > span { flex: 1 1 auto; min-width: 0; }
.check .count {
  flex: 0 0 auto;
  font-size: 10.5px; font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}
.check:has(input:checked) { color: var(--ink); }
.check:has(input:checked) .count { color: var(--azurite); }

.facet-more {
  align-self: flex-start; margin-top: 3px;
  border: 0; background: none; padding: 3px 0;
  font-family: var(--sans); font-size: 11.5px;
  color: var(--azurite); cursor: pointer;
}
.facet-more:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ------------------------------------------------------------- results -- */

.results { padding: 18px 20px 80px; min-width: 0; }

.results-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; padding-bottom: 14px;
}
.result-count { margin: 0; font-size: 12px; color: var(--ink-3); letter-spacing: .02em; }
.result-count strong {
  color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums;
}

.head-tools { display: flex; align-items: center; gap: 14px; }

.mode-btn {
  font-family: var(--sans); font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-2);
  background: var(--panel); border: 1px solid var(--rule-2);
  border-radius: var(--r); padding: 5px 10px; cursor: pointer;
  white-space: nowrap;
}
.mode-btn:hover { color: var(--ink); background: var(--recess); }
.mode-btn[aria-pressed="true"] {
  color: var(--azurite); border-color: var(--azurite);
  background: var(--azurite-wash);
}

.folio-note {
  margin: 0 0 14px; padding: 9px 12px;
  background: var(--azurite-wash);
  border-left: 2px solid var(--azurite);
  font-size: 12.5px; line-height: 1.55; color: var(--ink-2);
  max-width: 78ch;
}
.folio-note strong { color: var(--ink); font-weight: 600; }

/* Folios are whole manuscript pages: show the page, never a crop of it. */
.card-plate.is-folio { aspect-ratio: 3 / 4; background: var(--plate-ground); }
.card-plate.is-folio img { object-fit: contain; }

.sort-wrap {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}
#sort {
  font-family: var(--sans); font-size: 12px; color: var(--ink);
  background: var(--panel); border: 1px solid var(--rule);
  border-radius: var(--r); padding: 4px 6px; cursor: pointer;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

/* Cards sit in a hairline grid, the way plates are ruled on a codex page,
   rather than floating as separate rounded cards. */
.card {
  display: flex; flex-direction: column;
  min-width: 0;
  background: var(--panel);
  border: 0; border-radius: 0;
  padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: left;
  cursor: pointer;
  transition: background .14s;
}
.card:hover { background: var(--plate-ground); }
.card:focus-visible { outline: 2px solid var(--azurite); outline-offset: -2px; }

.card-plate {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--plate-ground);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
/* contain, never cover: cropping a botanical plate destroys the specimen */
.card-plate img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  transition: transform .3s ease;
}
.card:hover .card-plate img { transform: scale(1.03); }
/* Where no plate matched, echo a manuscript's unpainted illustration reserve:
   a ruled empty frame carrying the name, rather than a stray glyph. */
.card-plate.is-empty {
  background: var(--recess);
  display: grid; place-items: center;
  padding: 14px;
}
.card-plate.is-empty::before {
  content: "";
  position: absolute; inset: 10px;
  border: 1px solid var(--rule);
}
.card-plate.is-empty::after {
  content: attr(data-name);
  position: relative;
  font-family: var(--serif);
  font-size: 13px; line-height: 1.35; letter-spacing: .06em;
  text-align: center; text-wrap: balance;
  color: var(--ink-3);
  max-width: 100%;
  overflow-wrap: anywhere;
}

.card-body {
  padding: 9px 10px 11px;
  display: flex; flex-direction: column; gap: 3px;
  flex: 1 1 auto;
}
.card-name {
  margin: 0;
  font-family: var(--serif); font-size: 15px; font-weight: 400;
  line-height: 1.2; letter-spacing: .01em;
  text-wrap: balance;
}
/* The Greek heading is the citable form, so it stays visible but subordinate
   to the English name a reader actually recognises. */
.card-greek {
  margin: 0;
  font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.uncertain-mark {
  margin-left: 4px;
  font-size: .62em; vertical-align: super;
  color: var(--ink-3); cursor: help;
}

.card-sci {
  margin: 0; font-size: 11.5px; font-style: italic;
  color: var(--ink-2); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card-common {
  margin: 0; font-size: 11px; color: var(--ink-3); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card-foot {
  display: flex; align-items: center; gap: 6px;
  margin-top: auto; padding-top: 8px;
}
.kingdom-dot {
  width: 6px; height: 6px; border-radius: 50%;
  flex: 0 0 auto; background: var(--ink-3);
}
.kingdom-dot[data-k="plant"]       { background: var(--verdigris); }
.kingdom-dot[data-k="mineral"]     { background: var(--azurite); }
.kingdom-dot[data-k="animal"]      { background: var(--ink-2); }
.kingdom-dot[data-k="preparation"] { background: var(--rule-2); }
.card-kingdom {
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
}
.toxic-mark {
  margin-left: auto;
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  color: var(--minium);
}

mark {
  background: color-mix(in srgb, var(--azurite) 22%, transparent);
  color: inherit; border-radius: 1px; padding: 0 1px;
}

.empty { padding: 70px 20px; text-align: center; color: var(--ink-3); }
.empty p { margin: 0 0 10px; font-family: var(--serif); font-size: 17px; }

.load-more {
  display: block; margin: 22px auto 0;
  padding: 9px 20px;
  font-family: var(--sans); font-size: 11px;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-2);
  background: var(--panel); border: 1px solid var(--rule-2);
  border-radius: var(--r); cursor: pointer;
}
.load-more:hover { color: var(--ink); background: var(--recess); }

/* -------------------------------------------------------------- detail --
   A herbal spread: plate column beside text column. */

.detail, .lightbox {
  border: 0; padding: 0; background: transparent;
  max-width: none; max-height: none;
}
.detail::backdrop, .lightbox::backdrop {
  background: rgba(10,12,15,.66);
}

.detail {
  width: min(1000px, calc(100vw - 28px));
  max-height: calc(100vh - 44px);
  margin: auto;
  background: var(--panel);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-2);
  box-shadow: var(--lift-2);
  overflow: hidden;
}
#detailBody { max-height: calc(100vh - 44px); overflow-y: auto; }

.close-detail {
  position: absolute; top: 10px; right: 12px; z-index: 5;
  width: 28px; height: 28px;
  border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--panel); color: var(--ink-2);
  font-size: 17px; line-height: 1; cursor: pointer;
}
.close-detail:hover { color: var(--ink); background: var(--recess); }

.spread {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  align-items: start;
}
.spread-plates {
  position: sticky; top: 0;
  padding: 22px 18px;
  background: var(--plate-ground);
  border-right: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 12px;
}
.spread-text { padding: 26px 30px 36px; min-width: 0; }

/* Fifteen entries carry a drawn plate rather than a photograph or a historical
   illustration, because their subject is a process, a lost identification, or
   a thing nobody photographs. The badge is deliberately not subtle: everything
   else in this set is a real image, and that is only worth something if the
   exceptions are obvious at a glance. */
.drawn-tag {
  position: absolute; top: 8px; left: 8px; z-index: 1;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--paper, #fff);
  background: rgba(46, 33, 26, .82);
  padding: 3px 7px; border-radius: 3px;
  pointer-events: none;
}

.plate-fig { margin: 0; cursor: zoom-in; position: relative; }
.plate-fig.is-drawn .drawn-tag { top: 10px; left: 10px; }
.plate-fig img {
  width: 100%; display: block;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--r);
}
.plate-fig figcaption {
  margin-top: 6px;
  font-size: 10px; line-height: 1.5; color: var(--ink-3);
  letter-spacing: .02em;
}
.plate-none {
  display: grid; place-items: center; gap: 8px;
  aspect-ratio: 3/4;
  border: 1px dashed var(--rule-2); border-radius: var(--r);
  color: var(--ink-3); font-size: 11.5px; text-align: center; padding: 16px;
}

.d-head { padding-bottom: 18px; border-bottom: 1px solid var(--rule); margin-bottom: 18px; }
.d-name {
  margin: 6px 0 5px;
  font-family: var(--serif); font-size: 32px; font-weight: 400;
  line-height: 1.08; letter-spacing: .01em; text-wrap: balance;
}
.d-greek {
  margin: 0 0 8px;
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3);
}
.d-sci {
  margin: 0; font-family: var(--serif); font-size: 15px;
  font-style: italic; color: var(--ink-2); line-height: 1.4;
}
.d-flags { display: flex; flex-wrap: wrap; gap: 5px; margin: 12px 0 0; }
.flag {
  font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--r);
  background: var(--minium-wash); color: var(--minium);
  border: 1px solid color-mix(in srgb, var(--minium) 30%, transparent);
}
.d-common { margin: 5px 0 0; font-size: 13px; color: var(--ink-3); }
.d-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  margin-top: 12px;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3);
}
.d-meta span { display: inline-flex; align-items: center; gap: 6px; }

.d-warn {
  display: flex; gap: 8px;
  padding: 9px 12px; margin: 0 0 18px;
  background: var(--minium-wash); color: var(--minium);
  border-left: 2px solid var(--minium);
  border-radius: 0 var(--r) var(--r) 0;
  font-size: 12px; line-height: 1.5;
}

.d-section { margin: 0 0 22px; }
.d-section > h4 {
  margin: 0 0 8px;
  font-size: 10px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3);
}

.d-body {
  font-family: var(--serif);
  font-size: 16.5px; line-height: 1.68;
  color: var(--ink); max-width: 66ch;
}
.d-body p { margin: 0 0 .95em; }
.d-body p:last-child { margin-bottom: 0; }

.d-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tag {
  font-size: 11px; line-height: 1.6;
  padding: 2px 7px;
  border-radius: var(--r);
  background: var(--recess); color: var(--ink-2);
  border: 1px solid var(--rule);
}
.tag.is-ailment  { background: var(--azurite-wash);   color: var(--azurite);
                   border-color: color-mix(in srgb, var(--azurite) 24%, transparent); }
.tag.is-property { background: var(--verdigris-wash); color: var(--verdigris);
                   border-color: color-mix(in srgb, var(--verdigris) 26%, transparent); }

.d-names { margin: 0; font-size: 13px; }
.d-names > div {
  display: grid; grid-template-columns: 96px minmax(0, 1fr);
  gap: 4px 12px; padding: 5px 0;
  border-top: 1px solid var(--rule);
}
.d-names dt {
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); padding-top: 2px;
}
.d-names dd {
  margin: 0; font-family: var(--serif); font-style: italic; color: var(--ink);
}

.xref-list { display: flex; flex-wrap: wrap; gap: 4px; }
.xref {
  border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--panel); padding: 3px 8px;
  font-family: var(--sans); font-size: 11.5px;
  color: var(--azurite); cursor: pointer;
}
.xref:hover { background: var(--azurite-wash); border-color: var(--azurite); }
.xref b { font-weight: 700; font-variant-numeric: tabular-nums; }

.d-foot {
  margin-top: 26px; padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-size: 11px; line-height: 1.65; color: var(--ink-3);
}
.d-foot a { color: var(--azurite); }

/* ------------------------------------------------------------ lightbox -- */

.lightbox {
  width: min(1080px, calc(100vw - 28px));
  margin: auto; padding: 14px;
  background: var(--panel);
  border: 1px solid var(--rule-2); border-radius: var(--r-2);
  box-shadow: var(--lift-2);
}
#lightboxImg {
  display: block; width: 100%;
  max-height: calc(100vh - 150px); object-fit: contain;
  background: var(--plate-ground); border-radius: var(--r);
}
#lightboxCaption {
  margin: 10px 2px 2px; font-size: 11.5px; line-height: 1.5; color: var(--ink-3);
}
#lightboxCaption a { color: var(--azurite); }

/* ----------------------------------------------------------- responsive -- */

.scrim {
  position: fixed; inset: var(--bar) 0 0 0; z-index: 35;
  background: rgba(10,12,15,.5);
}

@media (max-width: 1020px) {
  .spread { grid-template-columns: minmax(0, 1fr); }
  .spread-plates {
    position: static;
    flex-direction: row; overflow-x: auto;
    border-right: 0; border-bottom: 1px solid var(--rule);
    padding: 16px;
  }
  .plate-fig { flex: 0 0 190px; }
  .plate-none { flex: 0 0 190px; }
  .spread-text { padding: 22px 22px 32px; }
}

@media (max-width: 880px) {
  :root { --bar: 104px; }
  .topbar { flex-wrap: wrap; height: auto; padding: 9px 14px; row-gap: 9px; }
  .filter-toggle { display: grid; order: 0; }
  .brand { order: 1; flex: 1 1 auto; }
  #themeToggle { order: 2; }
  .search-wrap { order: 3; flex: 1 1 100%; max-width: none; margin-left: 0; }

  .layout { grid-template-columns: minmax(0, 1fr); }
  .filters {
    position: fixed; z-index: 36;
    top: var(--bar); left: 0; bottom: 0;
    width: min(300px, 85vw);
    transform: translateX(-101%);
    transition: transform .2s ease;
    box-shadow: var(--lift-2);
  }
  .filters.open { transform: none; }
  .results { padding: 14px 12px 70px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .d-name { font-size: 26px; }
}

@media (max-width: 460px) {
  /* minmax(0, 1fr), not 1fr: a bare 1fr floors at min-content, and an image's
     min-content is its natural width, which blows the grid past the viewport. */
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand p { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ------------------------------------------------------- quick answers --
   A reader with one question ("something for digestion") should not have to
   read 321 entries to find where the answer is. These are the substances
   Dioscorides himself most clearly presents as principal remedies, each with
   the sentence that earned the placement. */

.quick {
  margin: 0 0 18px;
  border: 1px solid var(--rule);
  background: var(--panel);
}

.quick-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--rule);
}
.quick-head h2 {
  margin: 0; font-family: var(--serif); font-size: 19px; font-weight: 400;
}
.quick-head .quick-of {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
}
.quick-note {
  margin: 0; padding: 0 16px 12px;
  font-family: var(--serif); font-size: 14.5px; line-height: 1.6;
  color: var(--ink-2); max-width: 72ch;
}

.quick-list { display: grid; gap: 1px; background: var(--rule); }
.quick-item {
  display: grid;
  grid-template-columns: 26px 52px minmax(0, 1fr);
  gap: 0 12px; align-items: start;
  padding: 12px 16px;
  background: var(--panel);
  border: 0; width: 100%; text-align: left;
  font: inherit; color: inherit; cursor: pointer;
}
.quick-item:hover { background: var(--plate-ground); }
.quick-item:focus-visible { outline: 2px solid var(--azurite); outline-offset: -2px; }

.quick-rank {
  font-family: var(--serif); font-size: 17px; line-height: 1.2;
  color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.quick-thumb {
  width: 52px; height: 62px;
  object-fit: contain; display: block;
  background: var(--plate-ground); border: 1px solid var(--rule);
}
.quick-thumb.is-blank { border-style: dashed; }

.quick-body { min-width: 0; }
.quick-name {
  margin: 0; font-family: var(--serif); font-size: 16.5px; font-weight: 400;
  line-height: 1.25;
}
.quick-greek {
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); margin-left: 7px;
}
.quick-why {
  margin: 3px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2);
}
.quick-quote {
  margin: 6px 0 0; padding-left: 10px;
  border-left: 2px solid var(--rule-2);
  font-family: var(--serif); font-size: 13px; line-height: 1.55;
  color: var(--ink-3); font-style: italic;
}
.quick-caution {
  display: inline-block; margin-left: 8px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--minium);
  vertical-align: middle;
}

.quick-disclaimer {
  padding: 11px 16px;
  border-top: 1px solid var(--rule);
  font-size: 11.5px; line-height: 1.6; color: var(--ink-3);
}

/* Index of every indication, shown when none is selected. */
.quick-index {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1px; background: var(--rule);
}
.quick-index button {
  background: var(--panel); border: 0; padding: 11px 14px;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.quick-index button:hover { background: var(--plate-ground); color: var(--azurite); }
.quick-index .n {
  font-size: 10.5px; color: var(--ink-3); font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  .quick-item { grid-template-columns: 22px minmax(0, 1fr); }
  .quick-thumb { display: none; }
}