/* ADDrugDB — plain CSS, no build step.
   Progressive enhancement: every page works without JavaScript. */

:root {
  --fg: #1c1e21;
  --fg-muted: #656d76;
  --bg: #ffffff;
  --bg-alt: #f6f8fa;
  --line: #d8dee4;
  --accent: #0969da;
  --ok: #1a7f37;
  --warn: #bc4c00;
  --err: #cf222e;
  --radius: 6px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--fg);
  background: var(--bg);
}

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

main { max-width: 68rem; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }

/* ---------- header / footer ---------- */

.site-header {
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
  padding: .85rem 1.25rem; border-bottom: 1px solid var(--line); background: var(--bg-alt);
}
.brand { font-weight: 700; font-size: 1.1rem; text-decoration: none; color: var(--fg); }
.site-header nav { display: flex; gap: 1rem; flex-wrap: wrap; }
.site-header nav a { text-decoration: none; font-size: .92rem; }
.site-header .account { margin-left: auto; display: flex; gap: .75rem; align-items: center; font-size: .88rem; }

/* Search from any page. A plain GET form; the type-ahead only enhances it, so
   this still works with JavaScript disabled. */
.header-search { flex: 0 1 18rem; min-width: 9rem; }
.header-search input {
  width: 100%;
  padding: .35rem .6rem;
  font-size: .9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
}
/* The dropdown is absolutely positioned inside .ac-wrap, which the script
   inserts around the input — so the header needs to allow it to overflow. */
.site-header { position: relative; z-index: 30; }

@media (max-width: 44rem) {
  /* Full width on its own row rather than squeezed between brand and nav. */
  .header-search { flex: 1 0 100%; order: 3; }
}

.site-footer {
  border-top: 1px solid var(--line); padding: 1.5rem 1.25rem;
  font-size: .82rem; color: var(--fg-muted); background: var(--bg-alt);
}
.site-footer .disclaimer { max-width: 60rem; margin: 0 auto .75rem; }
.site-footer .attribution { max-width: 60rem; margin: 0 auto; }

.banner { padding: .7rem 1.25rem; font-size: .9rem; }
.banner-warn { background: #fff8e6; border-bottom: 1px solid #e3c08d; color: #7a4d00; }

.messages { list-style: none; margin: 0; padding: .5rem 1.25rem; }
.msg { padding: .55rem .8rem; border-radius: var(--radius); margin-bottom: .4rem; font-size: .9rem; }
.msg.success { background: #dafbe1; color: var(--ok); }
.msg.error   { background: #ffebe9; color: var(--err); }
.msg.warning { background: #fff8e6; color: var(--warn); }
.msg.info    { background: #ddf4ff; color: var(--accent); }

/* ---------- typography helpers ---------- */

h1 { font-size: 1.7rem; margin: 0 0 .75rem; }
h2 { font-size: 1.15rem; margin: 0 0 .5rem; }
h3 { font-size: .95rem; margin: 1rem 0 .35rem; }
.lede { color: var(--fg-muted); font-size: 1.02rem; max-width: 46rem; }
.muted { color: var(--fg-muted); }
.small { font-size: .84rem; }
.mono { font-family: var(--mono); font-size: .9em; }
.req { color: var(--err); }

/* ---------- forms ---------- */

input[type=text], input[type=search], input[type=email], input[type=password],
input[type=number], select {
  font: inherit; padding: .5rem .65rem; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--bg); color: var(--fg);
}
input:focus, select:focus, button:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

button, .button {
  font: inherit; padding: .5rem 1rem; border: 1px solid var(--accent);
  border-radius: var(--radius); background: var(--accent); color: #fff; cursor: pointer;
}
button:hover { filter: brightness(1.08); }
button.link { background: none; border: none; color: var(--accent); padding: 0; text-decoration: underline; }

label { display: block; margin-bottom: .75rem; font-size: .9rem; font-weight: 500; }
label input, label select { display: block; width: 100%; margin-top: .25rem; font-weight: 400; }
label.checkbox { display: flex; align-items: center; gap: .45rem; font-weight: 400; }
label.checkbox input { width: auto; margin: 0; display: inline; }

fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: .85rem 1rem; margin: 0 0 1rem; }
legend { font-size: .85rem; font-weight: 600; padding: 0 .35rem; }

.field-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.field-row input[type=search] { flex: 1 1 22rem; }
.field-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.filters { margin-top: .75rem; }
.filters summary { cursor: pointer; font-size: .9rem; color: var(--fg-muted); }

.form-errors { background: #ffebe9; color: var(--err); padding: .6rem .8rem; border-radius: var(--radius); margin-bottom: 1rem; }
ul.errorlist { list-style: none; padding: 0; margin: .2rem 0 0; color: var(--err); font-size: .85rem; }

.auth-panel { max-width: 26rem; margin: 2rem auto; }
.auth-links { font-size: .88rem; margin-top: 1rem; }
.inline { display: inline; }

/* ---------- home ---------- */

.hero { padding: 1.5rem 0 2rem; border-bottom: 1px solid var(--line); margin-bottom: 1.5rem; }
.hero-search { display: flex; gap: .5rem; margin: 1.25rem 0 .75rem; max-width: 38rem; }
.hero-search input { flex: 1; }
.hero-alt { font-size: .92rem; color: var(--fg-muted); }
.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.cards .card { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; }
.cards .card h2 { font-size: 1rem; }
.cards .card p { font-size: .9rem; color: var(--fg-muted); margin-bottom: 0; }

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

.result-count { color: var(--fg-muted); font-size: .9rem; margin: 1rem 0 .5rem; }
.results { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .75rem; }

/* Horizontal cards: drawing left, details right. A search result carries name,
   NDC, dosage form, labeler, ingredients and appearance — a narrow grid tile
   would truncate most of it, so the card runs the full width instead. */
.result-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: .9rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
}
.result-card:hover { border-color: #b6c0cb; }

/* Fixed width so the text columns line up down the page whether or not a
   particular product has anything to draw. */
.result-figure { flex: none; width: 44px; }
.result-body { min-width: 0; }

.result h2,
.result-card h2 { font-size: 1.05rem; margin-bottom: .2rem; }

@media (max-width: 34rem) {
  .result-card { flex-direction: column; gap: .5rem; }
  .result-figure { width: 44px; }
}
.result-meta { font-size: .85rem; color: var(--fg-muted); margin: .15rem 0; }
.ndc { font-family: var(--mono); }
.ingredients { font-size: .88rem; margin: .2rem 0; }
.appearance { font-size: .88rem; color: var(--fg-muted); margin: .2rem 0; }
.imprint { font-family: var(--mono); font-size: .9rem; margin: .2rem 0; }
.flag { font-size: .85rem; color: var(--warn); margin: .25rem 0; }

.empty { background: var(--bg-alt); border-radius: var(--radius); padding: 1.25rem; margin-top: 1rem; }
.empty ul { margin: .5rem 0 0; padding-left: 1.2rem; font-size: .9rem; color: var(--fg-muted); }
.empty li { margin-bottom: .3rem; }

.pagination { display: flex; gap: 1rem; align-items: center; margin: 1.5rem 0; font-size: .9rem; }

/* ---------- pill identifier ---------- */

.pill-form { max-width: 44rem; }
.imprint-field small { display: block; color: var(--fg-muted); font-weight: 400; margin-top: .3rem; }
.swatches { display: grid; gap: .4rem; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.swatch { display: flex; align-items: center; gap: .4rem; font-weight: 400; font-size: .88rem; margin: 0; }
.swatch input { width: auto; margin: 0; display: inline; }
.chip { display: inline-block; width: 18px; height: 18px; border: 1px solid var(--line); border-radius: 3px; }

.pill-results { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin-top: 1rem; }
.pill-card { border: 1px solid var(--line); border-radius: var(--radius); padding: .85rem; }
.pill-card img { width: 100%; height: 130px; object-fit: contain; background: var(--bg-alt); border-radius: 4px; }
.pill-card h2 { font-size: .98rem; margin: .5rem 0 .2rem; }
.caveat { font-size: .76rem; color: var(--warn); margin: .3rem 0 0; }

/* ---------- search type-ahead ---------- */

/* The wrapper is created by autocomplete.js around the input, so these rules
   only ever apply on pages where the script actually ran. Without JavaScript
   none of this markup exists and the search box is untouched. */
.ac-wrap { position: relative; flex: 1 1 auto; display: flex; }
.ac-wrap > input { width: 100%; }

.ac-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
  max-height: 20rem;
  overflow-y: auto;
}

.ac-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  padding: .45rem .7rem;
  cursor: pointer;
}
/* Hover and keyboard selection share one appearance, so arrowing through the
   list looks the same as pointing at it. */
.ac-item:hover,
.ac-item.is-active { background: var(--bg-alt); }

.ac-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-kind {
  flex: none;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--fg-muted);
}

/* ---------- drawn pills ---------- */

/* Generated by drugs.pillart from the product's recorded characteristics, and
   shown when no photograph could be attributed to the product. The checkered
   background of .pill-card img is deliberately NOT reused here: the drawing
   should not be dressed up to look like a photograph on a lightbox. */
.pill-figure { display: inline-flex; align-items: center; justify-content: center; }
.pill-figure .pill-svg { display: block; width: 100%; height: 100%; }
/* No float: the card lays itself out with flexbox, and the float was only
   ever propping up the plain list this replaced. */
.pill-figure--sm { width: 44px; height: 44px; }
.pill-figure--md { width: 72px; height: 72px; }
.pill-figure--lg { width: 116px; height: 116px; }

/* In the identifier's card grid the drawing stands in for the missing photo,
   so it takes the same vertical space to keep the cards on a common baseline. */
.pill-card .pill-figure--lg { width: 100%; height: 130px; }

/* Detail page: drawing beside the colour/shape/imprint list it was built from.
   Wraps on narrow screens rather than squeezing the definition list. */
.appearance-with-figure { display: flex; gap: 1.25rem; align-items: flex-start; flex-wrap: wrap; }
.appearance-with-figure .kv { flex: 1 1 16rem; margin: 0; }
.disclaimer-inline { background: #fff8e6; border-left: 3px solid #e3c08d; padding: .75rem 1rem; font-size: .88rem; margin-top: 1.5rem; }

/* ---------- detail ---------- */

.detail header { margin-bottom: 1.25rem; }
.panel { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.15rem; margin-bottom: 1rem; }
.panel h2 { font-size: 1rem; border-bottom: 1px solid var(--line); padding-bottom: .4rem; }

dl.kv { display: grid; grid-template-columns: minmax(9rem, auto) 1fr; gap: .35rem 1rem; margin: 0; font-size: .92rem; }
dl.kv dt { color: var(--fg-muted); }
dl.kv dd { margin: 0; }

table.data { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.data th { text-align: left; padding: .4rem .5rem; border-bottom: 2px solid var(--line); }
table.data td { padding: .4rem .5rem; border-bottom: 1px solid var(--line); }

ul.plain { list-style: none; padding: 0; margin: 0; font-size: .92rem; }
ul.plain li { padding: .25rem 0; }

.package-tree { list-style: none; padding-left: 1.1rem; margin: .3rem 0; font-size: .9rem; border-left: 2px solid var(--line); }
.package-tree > li { padding: .25rem 0; }

.image-grid { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.image-grid figure { margin: 0; }
.image-grid img { width: 100%; height: 140px; object-fit: contain; background: var(--bg-alt); border-radius: 4px; }
.image-grid figcaption { font-size: .76rem; color: var(--fg-muted); margin-top: .3rem; }

.badge { display: inline-block; padding: .05rem .4rem; border-radius: 9px; font-size: .72rem; background: #eee; color: #57606a; }
.badge-warn { background: #fff1e5; color: var(--warn); }

/* ---------- interactions ----------
   Visually set apart from the panels above it, because it is the one section
   whose contents a language model produced rather than a source asserted. The
   left rule and the badge are there so that difference is legible at a glance
   and not only in the paragraph of small print. */

.badge-ai {
  display: inline-block; margin-left: .5rem; padding: .05rem .45rem;
  border-radius: 9px; font-size: .68rem; font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase; background: #eef3fb; color: #3b5b86;
  border: 1px solid #cfdcef; vertical-align: middle;
}

ul.interactions { list-style: none; padding: 0; margin: .75rem 0 0; }
.interaction {
  padding: .6rem .85rem; margin-bottom: .5rem; font-size: .92rem;
  background: var(--bg-alt); border-radius: 4px; border-left: 3px solid var(--line);
}
.interaction-head { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.interaction-name { font-weight: 600; }
.interaction-effect { margin: .3rem 0 0; color: var(--fg); }

.sev-tag {
  font-size: .72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .02em; color: var(--fg-muted);
}
.interaction.sev-contraindicated { border-left-color: var(--err); }
.interaction.sev-contraindicated .sev-tag { color: var(--err); }
.interaction.sev-major { border-left-color: var(--warn); }
.interaction.sev-major .sev-tag { color: var(--warn); }
.interaction.sev-moderate { border-left-color: #9a6700; }
.interaction.sev-moderate .sev-tag { color: #9a6700; }

.interaction-source { margin-top: .35rem; }
.interaction-source summary { cursor: pointer; font-size: .8rem; color: var(--fg-muted); }
.interaction-source blockquote {
  margin: .4rem 0 0; padding-left: .75rem; border-left: 2px solid var(--line);
  font-size: .86rem; font-style: italic; color: var(--fg-muted);
}

@media (max-width: 640px) {
  .site-header { gap: .75rem; }
  .site-header .account { margin-left: 0; width: 100%; }
  dl.kv { grid-template-columns: 1fr; }
  dl.kv dt { margin-top: .4rem; }
}