/* AntibioticMech site styles.
   Deliberately dependency-free: the site is 2,600+ static pages generated in
   CI, so every kilobyte of framework is paid for thousands of times, and a
   corpus browser is almost entirely tables and definition lists anyway.
   Ported from HabitatMech's stylesheet; component list extended for the
   chemistry-specific blocks (structure strings, collapsible resistance
   groups, evidence citations) this corpus needs that a habitat record does
   not. */

:root {
  /* Tooltip surface. Identical in both themes ON PURPOSE: the tooltip
     paints its own dark ground, so its text must not follow the page.
     Keying it to --bg gave 1.01:1 in dark mode. */
  --tooltip-bg: rgb(23 32 42 / .94);
  --tooltip-fg: #f4f6f8;

  color-scheme: light dark;
  /* Brand pastel pair: gold (A) + sand (B), ochre accent. --page is the tinted
     page ground; --bg stays the white content surface tables and cards sit on.
     The accent is measured against --page, not --bg: links on this landing sit
     on the tinted ground, and the ochre that reads well on a white card was
     3.93:1 on the sand (claw#249). Same hue and saturation, darkened until it
     clears AA with headroom rather than at the boundary. */
  --pastel-a: #FFEFB5;
  --pastel-b: #E4DED3;
  --page: #E4DED3;
  --bg: #ffffff;
  --fg: #1a1d21;
  /* Aliases the vendored theme-toggle.js themes its button from; without them
     it falls back to a hard-coded white button, invisible in dark mode. */
  --card: #ffffff;
  --ink: #1a1d21;
  --danger: #a61b1b;
  --muted: #54606d;
  /* The masthead nav sits on the pastel gradient, not on --page, and the dark
     blocks repaint that gradient with a fixed literal. Keyed to --muted and
     --accent the nav read 3.11:1 and 3.38:1 in dark mode (#156). The gradient
     is deliberate brand work, so the text moves, not the fill. Light keeps the
     values it had — 4.80:1 and 4.73:1 on the darker stop, both already AA. */
  --masthead-nav: #54606d;
  --masthead-nav-hover: #85551C;
  --line: rgba(0,0,0,.12);
  --accent: #85551C;
  --accent-soft: #FBF0D2;
  --code-bg: #f4f6f8;
  --warn: #8a5a00;
  --warn-soft: #fdf4e3;
}

/* Dark values are defined once and applied twice: by OS preference unless the
   reader has explicitly chosen light, and by the toggle's data-theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  /* Tooltip surface. Identical in both themes ON PURPOSE: the tooltip
     paints its own dark ground, so its text must not follow the page.
     Keying it to --bg gave 1.01:1 in dark mode. */
  --tooltip-bg: rgb(23 32 42 / .94);
  --tooltip-fg: #f4f6f8;

    --pastel-a: #2a2519;
    --pastel-b: #17150f;
    --page: #17150f;
    --bg: #211e16;
    --fg: #f0ece0;
    --card: #211e16;
    --ink: #f0ece0;
    --muted: #b0a992;
    --masthead-nav: #d8d2c0;
    --masthead-nav-hover: #f0ce88;
    --line: #332e22;
    --accent: #d9a94a;
    --accent-soft: #2b2417;
    --code-bg: #1e1b14;
    --danger: #f08a86;
    --warn: #e0b361;
    --warn-soft: #2a2113;
  }
}
:root[data-theme="dark"] {
  /* Tooltip surface. Identical in both themes ON PURPOSE: the tooltip
     paints its own dark ground, so its text must not follow the page.
     Keying it to --bg gave 1.01:1 in dark mode. */
  --tooltip-bg: rgb(23 32 42 / .94);
  --tooltip-fg: #f4f6f8;

  --pastel-a: #2a2519;
  --pastel-b: #17150f;
  --page: #17150f;
  --bg: #211e16;
  --fg: #f0ece0;
  --card: #211e16;
  --ink: #f0ece0;
  --muted: #b0a992;
  --masthead-nav: #d8d2c0;
  --masthead-nav-hover: #f0ce88;
  --line: #332e22;
  --accent: #d9a94a;
  --accent-soft: #2b2417;
  --code-bg: #1e1b14;
  --danger: #f08a86;
  --warn: #e0b361;
  --warn-soft: #2a2113;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 1.25rem 4rem;
  background: var(--page);
  color: var(--fg);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.wrap { max-width: 60rem; margin: 0 auto; }
.wrap.wide { max-width: 76rem; }

header.site {
  position: relative;
  border-bottom: 1px solid var(--line);
  margin-bottom: 2rem;
  padding: 1.25rem 0 1rem;
}
header.site a.brand {
  font-weight: 700; font-size: 1.1rem; color: var(--fg); text-decoration: none;
}
header.site nav { margin-top: .4rem; font-size: .9rem; }
header.site nav a { color: var(--masthead-nav); text-decoration: none; margin-right: 1rem; }
header.site nav a:hover, header.site nav a:focus { color: var(--masthead-nav-hover); text-decoration: underline; }

h1 { font-size: 1.7rem; line-height: 1.25; margin: 0 0 .35rem; }
h2 { font-size: 1.15rem; margin: 2.2rem 0 .6rem; padding-bottom: .3rem; border-bottom: 1px solid var(--line); }
h3 { font-size: 1rem; margin: 1.4rem 0 .4rem; }
p { margin: .6rem 0; }
a { color: var(--accent); }

.lede { color: var(--muted); font-size: 1.02rem; }

code, .curie {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .87em;
  background: var(--code-bg);
  padding: .1em .35em;
  border-radius: 3px;
}

/* SMILES/InChI strings: monospace, and wrapped rather than overflowing the
   page — a single token can run past 500 characters, longer than the widest
   viewport, so word-break is load-bearing here, not decorative. overflow-x
   stays as a fallback for the rare string with no break opportunity at all. */
.struct-block {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82rem;
  background: var(--code-bg);
  padding: .6rem .8rem;
  border-radius: 4px;
  margin: .3rem 0 1rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-all;
  overflow-x: auto;
  max-width: 100%;
}
td.struct-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-wrap: anywhere;
  word-break: break-all;
}

table { border-collapse: collapse; width: 100%; margin: .8rem 0; font-size: .93rem; }
th, td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 600; color: var(--muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

.pill {
  display: inline-block; font-size: .74rem; font-weight: 600; letter-spacing: .02em;
  padding: .12rem .5rem; border-radius: 999px; background: var(--accent-soft);
  color: var(--accent); border: 1px solid transparent; white-space: nowrap;
}
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.plain { background: var(--code-bg); color: var(--muted); }

.meta { color: var(--muted); font-size: .9rem; margin: .3rem 0 1rem; }
.meta .sep { margin: 0 .45rem; opacity: .5; }

/* A plain proportional bar. No chart library for one distribution. */
.bar { background: var(--code-bg); border-radius: 3px; height: .55rem; overflow: hidden; min-width: 3rem; }
.bar > span { display: block; height: 100%; background: var(--accent); }

ul.plain { list-style: none; padding: 0; margin: .5rem 0; }
ul.plain li { padding: .3rem 0; border-bottom: 1px solid var(--line); }
ul.plain.evidence li { font-size: .9rem; }

/* Definition-list layout for compact key/value mechanism fields (mode of
   action, cidality, clinical status) — three short facts don't earn a table. */
dl.fields { margin: .5rem 0 1rem; }
dl.fields dt { color: var(--muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; margin-top: .6rem; }
dl.fields dd { margin: .1rem 0 0; }

/* Curation history and curation decisions. Unnumbered because the count is
   not the point and a record with one event should not read as "1." of an
   implied series. */
ol.events { list-style: none; padding: 0; margin: .5rem 0; }
ol.events li { padding: .6rem 0; border-bottom: 1px solid var(--line); }
ol.events li > p { margin: .4rem 0 0; }
ol.events .meta { margin: 0 0 0 .4rem; display: inline; }

/* Resistance mechanisms can run to the hundreds for one heavily studied
   compound (erythromycin A carries 90+); a flat table that long is not
   readable, so each mechanism_type is a collapsible group instead. */
details.details-group {
  border: 1px solid var(--line);
  border-radius: 6px;
  margin: .6rem 0;
  padding: 0 .8rem;
}
details.details-group summary {
  cursor: pointer;
  padding: .6rem 0;
  font-weight: 600;
  list-style: revert;
}
details.details-group summary .pill { margin-left: .4rem; font-weight: 600; }
details.details-group table { margin-bottom: .8rem; }

.note {
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  padding: .7rem .9rem;
  margin: 1.1rem 0;
  font-size: .93rem;
  border-radius: 0 4px 4px 0;
}
.note.warn { border-left-color: var(--warn); background: var(--warn-soft); }
.note p:first-child { margin-top: 0; }
.note p:last-child { margin-bottom: 0; }

footer.site {
  margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--line);
  color: var(--muted); font-size: .85rem;
}
footer.site .fam { margin: .25em 0; }
footer.site .fam a { margin: 0 .3em; white-space: nowrap; }
footer.site .fam .self { margin: 0 .3em; white-space: nowrap; font-weight: 600; color: var(--fg); }
footer.site strong { color: var(--fg); }

.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); margin: 1.2rem 0; }
.card { border: 1px solid var(--line); border-radius: 6px; padding: .8rem .9rem; }
.card .n { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.card .k { color: var(--muted); font-size: .84rem; }

.searchbox {
  width: 100%; padding: .55rem .7rem; font-size: 1rem; margin: .6rem 0 1rem;
  border: 1px solid var(--line); border-radius: 5px; background: var(--bg); color: var(--fg);
}

caption {
  caption-side: top; text-align: left; color: var(--muted);
  font-size: .82rem; text-transform: uppercase; letter-spacing: .03em;
  padding-bottom: .3rem;
}

/* Available to screen readers, absent from the visual layout. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.pager { margin: 1rem 0; display: flex; gap: .4rem; flex-wrap: wrap; }
.pager a, .pager span { padding: .15rem .5rem; border-radius: 4px; }
.pager a { background: var(--code-bg); }

/* The wrap gets the brand gradient behind the masthead so every generated page
   carries the pastel pair, not only the landing. In dark the pair is kept as a
   darkened fill plus a thin full-strength edge, rather than being neutralised. */
.wrap > header.site {
  background: linear-gradient(135deg, var(--pastel-a), var(--pastel-b));
  border-radius: 0 0 12px 12px;
  padding-left: 1rem; padding-right: 1rem;
  margin-left: -1rem; margin-right: -1rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wrap > header.site {
    background: linear-gradient(135deg, #5D5641, #55514A);
  }
  :root:not([data-theme="light"]) .wrap > header.site::before {
    content: ""; position: absolute; inset: auto 0 0 0; height: 2px;
    background: linear-gradient(90deg, #FFEFB5, #E4DED3);
  }
}
:root[data-theme="dark"] .wrap > header.site {
  background: linear-gradient(135deg, #5D5641, #55514A);
}
:root[data-theme="dark"] .wrap > header.site::before {
  content: ""; position: absolute; inset: auto 0 0 0; height: 2px;
  background: linear-gradient(90deg, #FFEFB5, #E4DED3);
}

table, .card { background: var(--bg); }
.card { box-shadow: 0 1px 3px rgba(0,0,0,.05); border-radius: 12px; }
th { background: var(--pastel-a); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* ---- Chemical structure map (added on main while this branch was open) ----
   Reworked onto the brand tokens. The originals named --paper-2 and --ink
   with hardcoded light fallbacks; neither token exists in this stylesheet,
   so every rule would have silently used a near-white that is invisible
   against the dark theme this branch adds. */
/* Chemical structure map */
.feature-link {
  align-items: center;
  background: var(--pastel-a);
  border: 1px solid var(--line);
  border-radius: .7rem;
  display: flex;
  gap: 2rem;
  justify-content: space-between;
  margin: 2rem 0;
  padding: 1.1rem 1.3rem;
}
.feature-link h2 { margin-top: 0; }
.feature-link p { margin-bottom: 0; max-width: 48rem; }
.button-link {
  background: var(--accent);
  border-radius: .35rem;
  color: var(--bg);
  display: inline-block;
  flex: none;
  font-weight: 700;
  padding: .65rem .85rem;
  text-decoration: none;
}
.button-link:hover { color: var(--bg); }
.map-page-wrap { max-width: 92rem; }
.map-controls {
  align-items: end;
  display: grid;
  gap: .8rem;
  grid-template-columns: minmax(14rem, 2fr) minmax(12rem, 1fr) minmax(12rem, 1fr) auto;
  margin: 1.4rem 0 .8rem;
}
.map-controls label {
  display: grid;
  font-size: .84rem;
  font-weight: 700;
  gap: .25rem;
}
.map-controls input,
.map-controls select,
.map-controls button {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: .35rem;
  color: var(--fg);
  font: inherit;
  min-height: 2.65rem;
  padding: .45rem .55rem;
}
.map-controls button {
  background: var(--accent);
  color: var(--bg);
  cursor: pointer;
  font-weight: 700;
}
.map-status {
  font-size: .9rem;
  margin: .6rem 0;
}
.map-status.error { color: var(--danger); font-weight: 700; }
.map-legend {
  display: flex;
  flex-wrap: wrap;
  font-size: .75rem;
  gap: .35rem .8rem;
  margin: .45rem 0 .8rem;
  min-height: 1.4rem;
}
.map-legend span { align-items: center; display: inline-flex; gap: .3rem; }
.map-legend i {
  border: 1px solid rgb(0 0 0 / .25);
  border-radius: 50%;
  display: inline-block;
  height: .65rem;
  width: .65rem;
}
.chemical-map-layout {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 3fr) minmax(18rem, 1fr);
}
.map-stage {
  min-width: 0;
  position: relative;
}
#map-canvas {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: .45rem;
  display: block;
  height: 620px;
  width: 100%;
}
.map-tooltip {
  /* The tooltip paints its OWN dark background, so its text cannot be keyed to
     the page's. `color: var(--bg)` gave white-on-dark in light mode and
     #211e16-on-#17202a in dark mode — a contrast ratio of 1.01:1, which renders
     as a visible box with no readable text. Both colours are fixed here because
     both belong to this component, not to the theme. */
  background: var(--tooltip-bg);
  border-radius: .3rem;
  color: var(--tooltip-fg);
  font-size: .75rem;
  max-width: 18rem;
  padding: .35rem .5rem;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}
.map-details {
  align-content: start;
  display: grid;
  gap: 1rem;
  max-height: 620px;
  overflow: auto;
}
.map-details > div {
  border: 1px solid #d8d0c2;
  border-radius: .45rem;
  padding: .75rem;
}
.map-details h2 { font-size: 1.05rem; margin: 0 0 .45rem; }
.map-details h3 { font-size: .9rem; margin: 1rem 0 .35rem; }
.map-details code {
  display: block;
  font-size: .72rem;
  max-height: 6rem;
  overflow-wrap: anywhere;
  overflow-y: auto;
  padding: .45rem;
}
.map-badges { display: flex; flex-wrap: wrap; gap: .3rem; }
.map-results,
.map-neighbors { margin: 0; padding-left: 1.4rem; }
.map-results li,
.map-neighbors li { margin: .25rem 0; }
.map-results button,
.map-neighbor-select {
  background: none;
  border: 0;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-align: left;
  text-decoration: underline;
}
.map-results span,
.map-neighbors span {
  color: var(--muted);
  display: block;
  font-size: .72rem;
}
.map-method { margin-top: 1.2rem; }
.map-method summary { cursor: pointer; font-weight: 700; }
@media (max-width: 850px) {
  .map-controls { grid-template-columns: 1fr 1fr; }
  .chemical-map-layout { grid-template-columns: 1fr; }
  .map-details { max-height: none; }
  #map-canvas { height: 520px; }
}
@media (max-width: 560px) {
  .feature-link { align-items: stretch; flex-direction: column; gap: .8rem; }
  .map-controls { grid-template-columns: 1fr; }
  #map-canvas { height: 440px; }
}
@media (prefers-reduced-motion: reduce) {
  #map-canvas { scroll-behavior: auto; }
}


/* main's base rules are NOT re-appended here: every selector in that block
   was already defined above, and re-declaring them last let main's blue
   dark palette (--accent: #7fb3e0) win over this branch's gold pastel one. */
/* A subclass row sits under its parent: mycobacteria are bacteria. The indent
   is decoration — the row text names the parent, because an indent conveys
   nothing to a screen reader and is wrong the moment the sort order changes. */
tr.subclass td:first-child { padding-left: 1.6rem; }
.tree { color: var(--muted); }
/* Corpus-map palette. One custom property per class index, read by the canvas
   so the legend swatch and the point can never disagree. Chosen to stay
   distinguishable under the common forms of colour blindness. */
:root {
  --cls0: #3f7fbf; --cls1: #d1651a; --cls2: #2f8f5b; --cls3: #a24bb5;
  --cls4: #b3852a; --cls5: #b3364a; --cls6: #4c6a86; --cls7: #6d6d6d;
}
#map-controls { display: flex; flex-wrap: wrap; gap: .4rem; margin: .8rem 0; }
#map-controls .legend { cursor: pointer; border: 1px solid transparent; }
#map-controls .legend::before {
  content: ""; display: inline-block; width: .6rem; height: .6rem;
  border-radius: 50%; background: var(--dot); margin-right: .35rem;
}
#map-controls .legend.off { opacity: .4; text-decoration: line-through; }
#corpus-map { max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 6px; }
figure { margin: 0; }