/* Patient medication review.
   Type: Atkinson Hyperlegible (Braille Institute, OFL) — built for low-vision readers, self-hosted so
   no third party sees who opens this page.
   The one memorable element is the medication card styled after a pharmacy bottle label, so patients
   can hold the screen next to the bottle and compare.  Everything else stays quiet. */

@font-face { font-family: "Atkinson"; src: url("fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson"; src: url("fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
/* Atkinson's zero is slashed (0 → Ø).  On a medication label "40 mg" must never look like "4Ø mg",
   so digits come from the device's own sans-serif, everything else from Atkinson. */
@font-face { font-family: "Digits"; src: local("Segoe UI"), local("Helvetica Neue"), local("Roboto"), local("Arial"), local("Liberation Sans"); font-weight: 400; unicode-range: U+0030-0039; }
@font-face { font-family: "Digits"; src: local("Segoe UI Bold"), local("HelveticaNeue-Bold"), local("Roboto Bold"), local("Arial Bold"), local("Liberation Sans Bold"); font-weight: 700; unicode-range: U+0030-0039; }

:root {
  --pine: #1f4d3f;        /* clinic color: East Texas pine */
  --pine-soft: #e3ece7;
  --brand: #008d5e;       /* MyMD Select logo green */
  --mist: #eef2ef;        /* page */
  --paper: #ffffff;       /* label stock */
  --ink: #18221e;
  --ink-2: #4a5852;
  --line: #c6d1cb;
  --amber: #e7a23c;       /* prescription bottle */
  --amber-ink: #4d3205;
  --sage: #b9cbbf;        /* OTC band */
  --stop: #9c3426;
  --stop-soft: #f6e6e2;
  --focus: #1a5fd0;
  --r: 6px;
  --step-0: 1.125rem;     /* 18px body: readable for older eyes */
  --step-1: 1.35rem;
  --step-2: 1.7rem;
  --step-3: 2.15rem;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--mist); color: var(--ink);
  font: 400 var(--step-0)/1.55 "Digits", "Atkinson", system-ui, -apple-system, "Segoe UI", sans-serif;
}
body.has-bar { padding-bottom: 6rem; }
.wrap { max-width: 40rem; margin: 0 auto; padding: 0 16px; }

h1, h2 { line-height: 1.2; margin: 0 0 .5rem; font-weight: 700; }
h1 { font-size: var(--step-3); letter-spacing: -0.01em; }
h2 { font-size: var(--step-1); }
p { margin: 0 0 1rem; }
a { color: var(--pine); }

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

/* Header: matches the logo's own light-grey background, with a stripe in the logo's green */
.masthead { background: #f9f9f9; border-bottom: 4px solid var(--brand); }
.masthead-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.5rem; padding-top: .5rem; padding-bottom: .5rem; }
.logo { display: block; height: 52px; width: auto; max-width: 62%; object-fit: contain; object-position: left center; }
.phone {
  display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; text-decoration: none;
  color: var(--pine); font-weight: 700; font-size: 1.05rem; padding: .45rem .7rem; border-radius: var(--r);
  border: 2px solid var(--line); background: #fff; min-height: 2.75rem;
}
.phone:hover { border-color: var(--brand); }
.phone svg { flex: none; color: var(--brand); }
.phone .call { display: none; }
@media (max-width: 360px) {
  .phone .num { display: none; }
  .phone .call { display: inline; }
  .logo { height: 34px; }
}
.signout-row { text-align: center; margin: 0 0 1rem; }
.linkish { background: none; border: 0; padding: .5rem; font: inherit; font-size: 1rem; color: var(--ink-2); text-decoration: underline; cursor: pointer; }
.drybar { background: #fff4d6; color: var(--amber-ink); text-align: center; font-size: .95rem; padding: .5rem 16px; border-bottom: 1px solid #ecd9a6; }

/* Intro */
.intro { padding: 2rem 0 1rem; }
.lede { font-size: var(--step-1); line-height: 1.45; color: var(--ink); max-width: 34ch; }
.aside, .hint, .fine { color: var(--ink-2); }
.fine { font-size: 1rem; margin-top: 1rem; }
.opt { font-weight: 400; color: var(--ink-2); font-size: .95rem; }

/* Panels & fields */
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 1.5rem; margin: 0 0 1.5rem; }
.panel.narrow { max-width: 30rem; margin: 2rem auto; }
.field { margin: 0 0 1.1rem; border: 0; padding: 0; }
.field label, legend { display: block; font-weight: 700; margin-bottom: .35rem; }
label.sub { font-weight: 400; color: var(--ink-2); font-size: 1rem; }
input, select {
  width: 100%; font: inherit; color: var(--ink); background: #fff;
  border: 2px solid var(--line); border-radius: var(--r); padding: .7rem .8rem; min-height: 3.1rem;
}
input:focus, select:focus { border-color: var(--pine); outline: none; box-shadow: 0 0 0 3px rgba(31,77,63,.2); }
input::placeholder { color: #8a968f; }
.dob-row { display: grid; grid-template-columns: 1.6fr 1fr 1.2fr; gap: .75rem; }
.code { font-size: 2rem; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: 700 var(--step-0)/1 "Digits", "Atkinson", system-ui, sans-serif; text-decoration: none;
  background: var(--pine); color: #fff; border: 2px solid var(--pine); border-radius: var(--r);
  min-height: 3.25rem; padding: 0 1.4rem; cursor: pointer;
}
.btn:hover { background: #173d32; }
.btn.secondary { background: #fff; color: var(--pine); }
.panel > .btn, form.panel > .btn { width: 100%; }
.link { display: inline-block; margin-top: .5rem; font-weight: 700; }

.alert { background: var(--stop-soft); border-left: 4px solid var(--stop); padding: .8rem 1rem; border-radius: 0 var(--r) var(--r) 0; }
.alert ul { margin: .25rem 0 0; padding-left: 1.2rem; }
.alert p { margin: 0; }
.alert.info { background: #fff4d6; border-color: var(--amber); }
.help { margin-top: 1.5rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.help h2 { font-size: var(--step-0); }
.help .contact-ways, .contact-ways { list-style: none; padding: 0; margin: .75rem 0 1rem; display: grid; gap: .5rem; }
.contact {
  display: flex; align-items: center; min-height: 3rem; padding: .6rem 1rem; border: 2px solid var(--pine);
  border-radius: var(--r); color: var(--pine); font-weight: 700; text-decoration: none; background: #fff;
}
.contact:hover { background: var(--pine-soft); }
.help ul { padding-left: 1.2rem; color: var(--ink-2); }

/* ---- The pharmacy label ---------------------------------------------------- */
.labels { display: grid; gap: 1.25rem; margin-bottom: 1.5rem; }
.label { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.band {
  background: var(--amber); color: var(--amber-ink); font-weight: 700; font-size: .95rem;
  padding: .3rem 1.25rem; border-bottom: 1px dashed rgba(77,50,5,.35);
}
.is-otc .band { background: var(--sage); color: #22352b; border-bottom-color: rgba(34,53,43,.3); }
.label-body { padding: 1rem 1.25rem .75rem; }
.drug { font-size: var(--step-2); margin: 0; }
.strength { font-size: var(--step-1); margin: .1rem 0 .6rem; }
.sig {
  border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  padding: .55rem 0; margin: 0; font-weight: 700; font-size: var(--step-0);
}

.answer { border: 0; margin: 0; padding: .5rem 1.25rem 1.25rem; }
.answer legend { padding: .5rem 0 .5rem; font-size: 1rem; color: var(--ink-2); font-weight: 400; }
.choice {
  display: flex; align-items: center; gap: .75rem; padding: .7rem .9rem; margin: 0 0 .5rem;
  border: 2px solid var(--line); border-radius: var(--r); cursor: pointer; min-height: 3.1rem;
}
.choice input { width: 1.35rem; height: 1.35rem; min-height: 0; margin: 0; accent-color: var(--pine); flex: none; }
.choice:has(input:checked) { border-color: var(--pine); background: var(--pine-soft); font-weight: 700; }
.choice.stop:has(input:checked) { border-color: var(--stop); background: var(--stop-soft); }
.choice.stop input { accent-color: var(--stop); }

.more { margin-top: .75rem; padding: 1rem 1rem .1rem; background: #f6f8f7; border-radius: var(--r); }
@supports selector(:has(*)) {
  .more { display: none; }
  .label:has(input[value="different"]:checked) .if-different,
  .label:has(input[value="stopped"]:checked) .if-stopped { display: block; animation: open .18s ease-out; }
  /* answered labels step back so the unanswered ones stand out */
  .label:has(.answer input:checked) .band { opacity: .75; }
}
@keyframes open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.more-intro { margin: 0 0 .9rem; color: var(--ink-2); font-size: 1rem; }
.hint.small, .status.small { font-size: .95rem; margin: -.15rem 0 .4rem; color: var(--ink-2); }
.status.small:empty { display: none; }
select optgroup { font-weight: 700; color: var(--ink-2); }
select option { font-weight: 400; color: var(--ink); }
.other-text { margin-top: .5rem; }
.js .other-text { display: none; }
.js .other-text.show { display: block; }
.js-only { display: none; }
.js .js-only { display: block; }
.js select.js-only { display: block; }
select:disabled { background: #f1f4f2; color: var(--ink-2); }
.check { display: flex; align-items: center; gap: .65rem; margin: 0 0 1.1rem; cursor: pointer; }
.check input { width: 1.35rem; height: 1.35rem; min-height: 0; margin: 0; accent-color: var(--pine); flex: none; }

/* Medicine search */
.combo { position: relative; }
.suggest {
  list-style: none; margin: .25rem 0 0; padding: .3rem; position: absolute; left: 0; right: 0; z-index: 5;
  background: #fff; border: 2px solid var(--pine); border-radius: var(--r); max-height: 19rem; overflow-y: auto;
  box-shadow: 0 8px 24px rgba(24, 34, 30, .14);
}
.suggest-item { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem .75rem; border-radius: 4px; cursor: pointer; }
.suggest-item[aria-selected="true"], .suggest-item:hover { background: var(--pine-soft); }
.suggest-name { font-weight: 700; }
.suggest-form { color: var(--ink-2); white-space: nowrap; }
.suggest-none { color: var(--pine); font-weight: 700; border-top: 1px solid var(--line); margin-top: .2rem; }

/* One-tap common ways to take a new medicine */
.regimens { background: var(--pine-soft); border-radius: var(--r); padding: .9rem 1rem .4rem; margin: 0 0 1.1rem; }
.regimens-title { font-weight: 700; margin: 0 0 .6rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .6rem; }
.chip {
  font: inherit; font-size: 1rem; color: var(--pine); background: #fff; border: 2px solid var(--pine);
  border-radius: 999px; padding: .55rem 1rem; min-height: 2.75rem; cursor: pointer; text-align: left;
}
.chip[aria-pressed="true"] { background: var(--pine); color: #fff; }
.chip[aria-pressed="true"]::before { content: "✓ "; }

/* Add-a-med rows */
.addrow { border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 1rem; }
.addrow:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.js .addrow.spare { display: none; }

/* Sticky progress bar */
.bar { position: fixed; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,.97); border-top: 1px solid var(--line); padding: .65rem 0; padding-bottom: calc(.65rem + env(safe-area-inset-bottom)); }
.bar-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.progress { color: var(--ink-2); font-size: 1rem; }
.progress.complete { color: var(--pine); font-weight: 700; }

/* Review */
.summary { list-style: none; margin: 0 0 1.5rem; padding: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); }
.sum { display: grid; gap: .15rem; padding: .9rem 1.25rem; border-top: 1px solid var(--line); border-left: 5px solid transparent; }
.sum:first-child { border-top: 0; }
.sum-name { font-weight: 700; }
.sum-str { font-weight: 400; color: var(--ink-2); }
.sum-what { color: var(--ink-2); }
.sum-different, .sum-added { border-left-color: var(--amber); }
.sum-stopped { border-left-color: var(--stop); }
.sum-unsure { border-left-color: var(--focus); }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.done h1 { color: var(--pine); }
.warn { background: #fff4d6; padding: .8rem 1rem; border-radius: var(--r); }

.foot { color: var(--ink-2); font-size: 1rem; padding-top: 1rem; padding-bottom: 2rem; }
.foot p { margin: 0 0 .4rem; }

@media (max-width: 420px) {
  .logo { height: 40px; }
  .phone { font-size: .95rem; padding: .4rem .55rem; }
  h1 { font-size: var(--step-2); }
  .panel { padding: 1.1rem; }
  .dob-row { grid-template-columns: 1fr 1fr; }
  .dob-row > div:first-child { grid-column: 1 / -1; }
  .pair { grid-template-columns: 1fr; gap: 0; }
  .actions .btn { width: 100%; }
  .bar .btn { padding: 0 1rem; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }