@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@500;600;650;700;750;800&display=swap');

/* Readable defaults scale with the visitor's browser text-size preference. */
:root {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 112.5%;
  font-synthesis: none;
  color: #173d37;
  background: #f7f8f3;
  --ink: #173d37;
  --muted: #506657;
  --teal: #226954;
  --teal-dark: #174b3f;
  --line: #d2ddd0;
  --control-border: #7e9386;
  --paper: #fff;
  --soft: #edf3e9;
  --focus: #236a57;
  --radius: 18px;
  --small: .9rem;
  --gutter: clamp(1rem, 4vw, 3.25rem);
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-width: 0; line-height: 1.6; }
button, input, select, textarea { font: inherit; }
button, input, select, a, summary { -webkit-tap-highlight-color: transparent; outline-offset: 4px; }
button { color: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: .6; }
a { color: var(--teal-dark); text-underline-offset: .18em; }
svg { display: block; flex: none; }
button svg { width: 1.1rem; height: 1.1rem; }
button:focus-visible, a:focus-visible, summary:focus-visible, #rankingHeading:focus-visible { outline: 3px solid var(--focus); }
input:focus, select:focus { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--teal-dark); }
button:focus:not(:focus-visible) { outline: none; }
[hidden] { display: none !important; }
.page-width { width: min(calc(100% - var(--gutter) * 2), 1380px); margin-inline: auto; }
.skip-link {
  position: absolute; top: -6rem; left: 1rem; z-index: 100;
  min-height: 48px; padding: .7rem 1rem; border-radius: 10px;
  background: var(--ink); color: #fff;
}
.skip-link:focus { top: .7rem; }

/* Header and introduction. */
.site-header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem 1.5rem; min-height: 106px; padding-block: .75rem;
  border-bottom: 1px solid var(--line);
}
.brand {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 48px;
  color: var(--ink); text-decoration: none;
  font-family: Manrope, 'DM Sans', sans-serif;
  font-size: 1.65rem; font-weight: 500; letter-spacing: -.05em; white-space: nowrap;
}
.brand strong { font-weight: 800; }
.brand-dot, .title-dot, .footer-brand span { color: #357957; }
.brand-mark {
  display: grid; place-items: center; width: 2.35rem; height: 2.35rem;
  border: 1px solid #a7bca8; border-radius: 13px;
  background: var(--soft); color: var(--teal-dark);
}
.brand-mark svg { width: 1.65rem; height: 1.65rem; }
.site-header nav { display: flex; align-items: center; gap: 1.5rem; min-width: 0; }
.header-note { display: flex; align-items: center; gap: .5rem; color: var(--muted); font-size: var(--small); }
.live-dot, .small-dot { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #38734a; }
.text-button {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 48px; padding: .45rem .35rem; border: 0; border-radius: 6px;
  background: transparent; color: var(--teal-dark); font-size: var(--small); font-weight: 650; line-height: 1.4;
}
.text-button:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
.about-button svg { width: 1rem; height: 1rem; }
.hero { padding: 2.25rem 0 1.5rem; }
.eyebrow, .results-eyebrow {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  color: var(--muted); font-size: var(--small); font-weight: 700; letter-spacing: .08em; line-height: 1.5;
}
.eyebrow-line { width: 1.2rem; height: 2px; background: #507e57; }
.eyebrow-separator { margin-inline: .1rem; }
h1, h2, h3, h4 { color: var(--ink); overflow-wrap: anywhere; }
h1 {
  margin: .65rem 0 .6rem; font-family: Manrope, 'DM Sans', sans-serif;
  font-size: clamp(2.2rem, 4.6vw, 3.25rem); font-weight: 750; letter-spacing: -.045em; line-height: 1.14;
}
.hero p { max-width: 48rem; margin: 0; color: var(--muted); font-size: 1.1rem; line-height: 1.6; }

/* Search fields retain large type and touch targets at every viewport. */
.search-section { position: relative; z-index: 3; }
.search-card { padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: 0 4px 22px #173d3705; }
.filter-fields {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, .9fr) auto;
  align-items: end; gap: .8rem;
}
.filter-fields > *, .field, .input-wrap { min-width: 0; }
.field label { display: block; margin-bottom: .4rem; color: var(--ink); font-size: 1rem; font-weight: 650; line-height: 1.5; }
.optional { margin-left: .25rem; color: var(--muted); font-size: var(--small); font-weight: 400; }
.input-wrap { position: relative; }
.input-wrap input, .input-wrap select, .version-controls select {
  width: 100%; min-width: 0; min-height: 56px; margin: 0; padding: .7rem .8rem;
  border: 1px solid var(--control-border); border-radius: 10px;
  background: var(--paper); color: var(--ink); font-size: 1rem; line-height: 1.4;
}
.input-wrap input::placeholder { color: #5e7264; opacity: 1; }
.drug-input-wrap input { padding-left: 2.7rem; padding-right: 2rem; }
.field-icon, .select-chevron, .input-hint { position: absolute; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.field-icon { z-index: 1; left: .85rem; width: 1.3rem; height: 1.3rem; }
.input-hint { right: .75rem; font: inherit; }
.input-wrap select { appearance: none; padding-right: 2.2rem; }
.select-chevron { right: .7rem; width: 1.1rem; height: 1.1rem; }
.primary-button {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 56px; padding: .75rem 1.1rem; border: 1px solid var(--ink); border-radius: 10px;
  background: var(--ink); color: #fff; font-size: 1rem; font-weight: 700; line-height: 1.35;
}
.primary-button:hover { background: var(--teal-dark); }
.primary-button:active { background: #103e32; }
.search-button { white-space: nowrap; }
.search-card-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7rem 1rem; margin-top: 1rem; }
.popular-drugs, .related-drugs { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; min-width: 0; }
.popular-label { margin-right: .25rem; color: var(--muted); font-size: var(--small); }
.popular-drugs button, .related-drugs button {
  min-height: 44px; max-width: 100%; padding: .4rem .7rem;
  border: 1px solid #6b8072; border-radius: 8px; background: var(--soft);
  color: var(--teal-dark); font-size: var(--small); line-height: 1.4; overflow-wrap: anywhere;
}
.popular-drugs button:hover, .popular-drugs button.active, .related-drugs button:hover { background: #deebd8; }
.search-help { display: flex; align-items: flex-start; gap: .4rem; color: var(--muted); font-size: var(--small); line-height: 1.5; }
.search-help svg { width: 1rem; height: 1rem; margin-top: .15rem; }
.status { margin-top: .55rem; padding-block: .35rem; color: var(--muted); font-size: 1rem; line-height: 1.6; overflow-wrap: anywhere; }
.status:empty { display: none; }
.status.is-error, .status.error, .status[data-type='error'] { color: #8c3023; }
.status.warning, .status[data-type='warning'] { color: #70501b; }
.status button { min-height: 48px; margin: .3rem; padding: .4rem .75rem; border: 1px solid var(--control-border); border-radius: 8px; background: #fff; }

/* Height-limited suggestions support keyboard selection and phone keyboards. */
.suggestions {
  position: absolute; top: calc(100% + .4rem); left: 0; right: 0; z-index: 40;
  max-height: 45vh; max-height: 45dvh; margin: 0; padding: .3rem;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scroll-padding-block: .3rem;
  border: 1px solid var(--control-border); border-radius: 12px;
  background: var(--paper); box-shadow: 0 12px 30px #173d3724; list-style: none;
}
.drug-option, .suggestion, .suggestion-option, .suggestions [role='option'], .suggestions button {
  display: flex; align-items: center; justify-content: space-between; gap: .7rem;
  min-height: 64px; width: 100%; padding: .75rem .7rem; border: 0; border-radius: 8px;
  background: transparent; color: var(--ink); text-align: left; cursor: pointer;
  font-size: 1rem; line-height: 1.45; scroll-margin-block: .3rem;
}
.drug-option > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.drug-option:hover, .suggestion:hover, .suggestion-option:hover, .suggestions [role='option']:hover,
.suggestions [aria-selected='true'], .suggestions .active, .suggestions button:hover {
  background: #e1edde; outline: 2px solid var(--teal-dark); outline-offset: -2px;
}
.suggestions strong, .suggestion-label { display: block; font-weight: 700; }
.suggestions small, .suggestion-subtitle { display: block; margin-top: .2rem; color: var(--muted); font-size: var(--small); line-height: 1.5; }
.suggestion-arrow, .suggestion-hint { color: var(--teal-dark); }
.suggestion-empty { margin: 0; padding: 1rem; color: var(--muted); font-size: 1rem; list-style: none; overflow-wrap: anywhere; }
.did-you-mean {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin-top: .8rem; padding: 1rem; border: 1px solid #99aa7d; border-radius: 12px;
  background: #f3f5df; color: var(--ink);
}
.did-you-mean > span { flex-basis: 100%; min-width: 0; overflow-wrap: anywhere; }
.did-you-mean button {
  min-height: 48px; max-width: 100%; padding: .55rem .85rem; border: 1px solid #6b8072; border-radius: 8px;
  background: #fff; color: var(--teal-dark); font-weight: 650; overflow-wrap: anywhere;
}
.did-you-mean button:hover { background: var(--soft); }

/* Results and scope stay together; all long names and numbers can wrap. */
.results-section { margin-top: 1.25rem; }
.results-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem; }
.results-heading > *, .results-heading-main { min-width: 0; }
.results-heading-main { flex: 1; }
.results-title-line { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin-top: .4rem; }
.results-title-line h2 {
  min-width: 0; margin: 0; font-family: Manrope, 'DM Sans', sans-serif;
  font-size: clamp(1.8rem, 3.2vw, 2.3rem); font-weight: 750; letter-spacing: -.035em; line-height: 1.25;
}
.year-pill { padding: .15rem .45rem; border: 1px solid #a1b69e; border-radius: 5px; background: var(--soft); color: var(--muted); font-size: var(--small); line-height: 1.4; }
.results-heading-main > p { margin: .55rem 0 0; color: var(--muted); font-size: 1rem; line-height: 1.6; overflow-wrap: anywhere; }
.results-heading-main > .data-scope, .data-scope { color: var(--muted); font-size: .944444rem; line-height: 1.6; }
.results-heading-main > .product-note, .product-note { color: var(--teal-dark); font-weight: 600; }
.results-actions { display: flex; flex-wrap: wrap; flex: none; align-items: center; gap: .5rem; padding-top: 1.6rem; }
.secondary-button {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 48px;
  padding: .6rem .8rem; border: 1px solid var(--control-border); border-radius: 9px;
  background: #fff; color: var(--teal-dark); font-size: var(--small); font-weight: 600; line-height: 1.4;
}
.secondary-button:hover:not(:disabled) { background: var(--soft); }
.secondary-button svg { width: 1rem; height: 1rem; }
.version-controls { display: flex; align-items: center; gap: .7rem; max-width: 100%; margin-top: 1rem; }
.version-controls label { flex: none; color: var(--ink); font-size: 1rem; font-weight: 650; }
.version-controls select { flex: 1; width: 0; max-width: 38rem; padding-right: 1rem; }
.included-versions { max-width: 44rem; margin-top: .65rem; color: var(--teal-dark); font-size: 1rem; }
.included-versions summary { width: fit-content; max-width: 100%; min-height: 48px; padding-block: .55rem; cursor: pointer; overflow-wrap: anywhere; }
.included-versions ul, .product-breakdown { margin: .5rem 0; padding: 0; list-style: none; }
.included-versions ul { max-height: 24rem; padding-right: .35rem; overflow-y: auto; overscroll-behavior: contain; }
.included-versions li, .product-breakdown li {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 8rem); align-items: start;
  gap: 1rem; padding: .65rem 0; border-bottom: 1px solid var(--line); line-height: 1.55;
}
.included-versions li > span, .product-breakdown li > span { min-width: 0; overflow-wrap: anywhere; }
.included-versions li > span:last-child, .product-breakdown strong { text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.included-versions small { display: block; margin-top: .2rem; color: var(--muted); font-size: var(--small); line-height: 1.5; }
.product-breakdown strong { color: var(--ink); font-weight: 700; }
.related-drugs { margin-top: .7rem; color: var(--muted); font-size: var(--small); }
.summary-stats {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(170px, .9fr);
  align-items: center; gap: 1.25rem; margin: 1.4rem 0; padding-block: 1.25rem;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.summary-stats > * { min-width: 0; }
.summary-stat { display: flex; flex-direction: column; align-self: stretch; justify-content: center; gap: .35rem; }
.summary-stat + .summary-stat { padding-left: 1.25rem; border-left: 1px solid var(--line); }
.stat-label { color: var(--muted); font-size: 1rem; line-height: 1.45; }
.stat-value { color: var(--ink); font-size: clamp(1.9rem, 3vw, 2.1rem); font-weight: 600; letter-spacing: -.035em; font-variant-numeric: tabular-nums; line-height: 1.2; overflow-wrap: anywhere; }
.stat-location { font-size: 1.45rem; letter-spacing: -.025em; line-height: 1.3; }
.stat-context { color: var(--muted); font-size: var(--small); line-height: 1.55; overflow-wrap: anywhere; }
.tiny-info { display: inline-grid; place-items: center; width: 1rem; height: 1rem; margin-left: .2rem; border: 1px solid var(--muted); border-radius: 50%; font-size: var(--small); font-style: normal; line-height: 1; }
.summary-source { display: flex; align-items: center; gap: .65rem; padding: .8rem; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); color: var(--muted); font-size: var(--small); line-height: 1.45; }
.summary-source svg { width: 1.8rem; height: 1.8rem; color: var(--teal-dark); }
.summary-source strong { color: var(--ink); font-weight: 650; }

/* Rankings come before the map whenever the result columns stack. */
.results-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; gap: 1.3rem; }
.results-grid > *, .map-column { min-width: 0; }
.map-column { display: flex; flex-direction: column; gap: 1rem; }
.panel { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.2rem; }
.panel-header > div { min-width: 0; }
.panel-header h3 { margin: 0; font-size: 1.15rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.4; }
.panel-header p { margin: .35rem 0 0; color: var(--muted); font-size: var(--small); line-height: 1.6; overflow-wrap: anywhere; }
.reset-button { flex: none; margin-top: -.35rem; }
.reset-button svg { width: 1rem; height: 1rem; }
.map-container { position: relative; width: 100%; min-width: 0; padding: .5rem 1rem; overflow: visible; }
.map-container > svg { width: 100%; height: auto; max-width: 100%; }
.map-container svg text { font-family: 'DM Sans', sans-serif; }
.state-shape { fill: #c5d9cf; stroke: #fff; stroke-width: 1.2; stroke-linejoin: round; cursor: pointer; transition: filter .15s, stroke .15s; }
.state-shape:hover { filter: brightness(.88); stroke: var(--teal-dark); stroke-width: 2; }
.state-shape.is-selected, .state-shape.selected, .state-shape.active, .state-shape[aria-pressed='true'] { stroke: #123b30; stroke-width: 2.7; }
.state-shape:focus-visible { outline: none; stroke: #102e25; stroke-width: 4; filter: drop-shadow(0 0 2px #fff); }
.state-label { fill: #365b49; font-size: 11px; font-weight: 700; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.state-label.selected, .state-label.active { fill: #fff; }
.state-leader { fill: none; stroke: #607e69; stroke-width: 1; pointer-events: none; }
.map-loading { display: flex; align-items: center; justify-content: center; gap: .6rem; min-height: 18rem; color: var(--muted); font-size: 1rem; }
.map-loading-dot { width: 1rem; height: 1rem; border: 2px solid #ceddc8; border-top-color: var(--teal-dark); border-radius: 50%; animation: spin 1s linear infinite; }
.map-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .65rem 1rem; padding: 1rem 1.2rem 1.2rem; }
.map-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; color: var(--muted); font-size: var(--small); line-height: 1.5; }
.legend-gradient { width: 4.5rem; height: .5rem; border-radius: 8px; background: linear-gradient(90deg, #dce8d5, #174b3f); }
.map-footer > p, .map-footer #mapNote { flex-basis: 100%; margin: 0; color: var(--muted); font-size: var(--small); line-height: 1.6; overflow-wrap: anywhere; }
.map-tooltip { position: absolute; z-index: 5; max-width: min(18rem, 100%); padding: .7rem .9rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 6px 20px #173d3720; pointer-events: none; font-size: 1rem; overflow-wrap: anywhere; }
.map-tooltip strong, .map-tooltip span, .map-tooltip small { display: block; }
.map-tooltip small { color: var(--muted); font-size: var(--small); }
.insight-card { display: flex; align-items: flex-start; gap: .7rem; padding: 1rem; border: 1px solid var(--line); border-radius: 13px; background: var(--soft); }
.insight-card > div { min-width: 0; }
.insight-icon { flex: none; color: var(--teal-dark); }
.insight-icon svg { width: 1.45rem; height: 1.45rem; }
.insight-card h4 { margin: 0; font-size: 1rem; font-weight: 650; line-height: 1.5; }
.insight-card p { margin: .3rem 0 0; color: var(--muted); font-size: var(--small); line-height: 1.65; }
.rank-panel { overflow: hidden; }
.ranking-header { align-items: flex-start; border-bottom: 1px solid var(--line); }
.sort-indicator { display: flex; align-items: center; gap: .35rem; flex: none; color: var(--muted); font-size: var(--small); line-height: 1.5; }
.sort-indicator svg { width: 1.1rem; height: 1.1rem; }
.list-column-headings { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 2.4rem .75rem 4.5rem; border-bottom: 1px solid var(--line); color: var(--muted); font-size: var(--small); font-weight: 650; }
.ranked-list, .prescriber-card { min-width: 0; }
.prescriber-card { border-bottom: 1px solid var(--line); }
.rank-row {
  display: grid; grid-template-columns: 2.1rem minmax(0, 1fr) 5.7rem 1rem; align-items: center; gap: .7rem;
  width: 100%; min-width: 0; min-height: 6rem; padding: 1rem 1.15rem; border: 0;
  background: #fff; color: var(--ink); text-align: left;
}
.rank-row:hover { background: #f1f6ed; }
.rank-row:focus-visible { outline: 3px solid var(--focus); outline-offset: -4px; }
.prescriber-card:first-child .rank-row { background: #f4f8f0; }
.prescriber-card:first-child .rank-row:hover { background: #eaf2e3; }
.rank-num { display: grid; place-items: center; min-width: 0; width: 2.1rem; min-height: 2.1rem; border: 1px solid #a4b69d; border-radius: 9px; background: #f2f5ef; color: var(--muted); font-size: var(--small); font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.prescriber-card:first-child .rank-num { border-color: #71965d; background: #e1edda; color: #284c2f; }
.rank-main { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.prescriber-name { display: block; color: var(--ink); font-size: 1.1rem; font-weight: 650; line-height: 1.4; overflow-wrap: anywhere; }
.prescriber-detail, .prescriber-location { display: block; color: var(--muted); font-size: var(--small); line-height: 1.5; overflow-wrap: anywhere; }
.detail-separator, .prescriber-detail .separator { margin-inline: .3rem; }
.rank-value { display: flex; flex-direction: column; gap: .15rem; min-width: 0; color: var(--ink); text-align: right; font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.025em; line-height: 1.25; overflow-wrap: anywhere; }
.rank-unit { color: var(--muted); font-size: var(--small); font-weight: 400; letter-spacing: 0; line-height: 1.35; white-space: normal; }
.row-chevron, .rank-arrow, .rank-chevron { display: block; width: 1rem; color: var(--muted); text-align: center; font-size: 1.1rem; line-height: 1; transition: transform .15s; }
.rank-row[aria-expanded='true'] { background: var(--soft); }
.rank-row[aria-expanded='true'] .row-chevron, .rank-row[aria-expanded='true'] .rank-chevron { transform: rotate(180deg); }
.prescriber-expanded { padding: 1rem 1.15rem 1.25rem; border-top: 1px solid var(--line); background: #f7faf4; color: var(--muted); font-size: 1rem; line-height: 1.65; overflow-wrap: anywhere; }
.prescriber-expanded dl, .prescriber-expanded .detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.2rem; margin: 0 0 1rem; }
.prescriber-expanded dl > div { min-width: 0; }
.prescriber-expanded dt, .prescriber-expanded .detail-label { margin: 0 0 .2rem; color: var(--muted); font-size: var(--small); font-weight: 650; line-height: 1.5; }
.prescriber-expanded dd, .prescriber-expanded .detail-value { margin: 0; color: var(--ink); font-size: 1rem; line-height: 1.5; overflow-wrap: anywhere; }
.prescriber-expanded p { margin: .7rem 0; font-size: var(--small); line-height: 1.65; }
.prescriber-expanded a { display: inline-flex; align-items: center; min-height: 48px; max-width: 100%; margin-top: .25rem; padding-block: .5rem; color: var(--teal-dark); font-size: 1rem; font-weight: 600; overflow-wrap: anywhere; }
.load-more-button { display: flex; align-items: center; justify-content: center; gap: .55rem; width: calc(100% - 2.3rem); min-height: 52px; margin: 1rem 1.15rem; padding: .6rem .75rem; border: 1px solid var(--control-border); border-radius: 9px; background: #fff; color: var(--teal-dark); font-size: 1rem; font-weight: 650; line-height: 1.4; }
.load-more-button:hover { background: var(--soft); }
.load-more-button svg { width: 1rem; height: 1rem; }
.ranking-footnote { display: flex; align-items: flex-start; gap: .5rem; padding: .8rem 1.15rem 1.15rem; color: var(--muted); font-size: var(--small); line-height: 1.65; white-space: pre-line; overflow-wrap: anywhere; }
.ranking-footnote .small-dot { margin-top: .55rem; }
.ranked-list:empty + .loading-state[hidden] ~ .ranking-footnote { display: none; }

/* Partial-loading status does not cover or replace confirmed results. */
.loading-state { padding: .5rem 1.15rem 1rem; }
.skeleton-row { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr) 4rem; align-items: center; gap: 1rem; min-height: 5.4rem; }
.skeleton { display: block; max-width: 100%; border-radius: 6px; background: linear-gradient(90deg, #edf2e8 0%, #dbe6d4 50%, #edf2e8 100%); background-size: 200% 100%; animation: shimmer 1.8s ease-in-out infinite; }
.skeleton-circle { width: 2.1rem; height: 2.1rem; border-radius: 9px; }
.skeleton-name { width: 85%; height: .9rem; }
.skeleton-count { justify-self: end; width: 3rem; height: 1.2rem; }
.loading-state > p { margin: .75rem 0; color: var(--muted); font-size: 1rem; line-height: 1.65; text-align: center; overflow-wrap: anywhere; }
.loading-state.has-results .skeleton-row { display: none; }
.loading-state.has-results { padding-top: .35rem; }
.loading-state.has-results > p { margin-top: .5rem; }
.empty-state { padding: 2rem 1.25rem; text-align: center; }
.empty-icon { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin: 0 auto 1rem; border-radius: 50%; background: var(--soft); color: var(--teal-dark); }
.empty-icon svg { width: 2rem; height: 2rem; }
.empty-state h4 { margin: 0 0 .6rem; font-size: 1.15rem; line-height: 1.4; }
.empty-state p { max-width: 28rem; margin: 0 auto; color: var(--muted); font-size: 1rem; line-height: 1.65; }

/* Footer and comfortable scrolling for the methodology dialog. */
.site-footer { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; margin-top: 2.5rem; padding: 1.75rem 0 2.25rem; border-top: 1px solid var(--line); }
.site-footer > div { min-width: 0; }
.footer-brand { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-family: Manrope, 'DM Sans', sans-serif; font-size: 1.25rem; font-weight: 750; letter-spacing: -.04em; text-decoration: none; }
.site-footer p { margin: .4rem 0 0; color: var(--muted); font-size: var(--small); line-height: 1.65; overflow-wrap: anywhere; }
.footer-source { max-width: 34rem; text-align: right; }
.footer-source a { display: inline-flex; align-items: center; justify-content: flex-end; gap: .4rem; min-height: 44px; max-width: 100%; color: var(--teal-dark); font-size: var(--small); line-height: 1.5; }
.footer-source svg { width: 1rem; height: 1rem; }
.about-dialog { width: min(44rem, calc(100% - 2rem)); max-width: none; max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); margin: auto; padding: 1.5rem 1.75rem; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); box-shadow: 0 20px 80px #102e2540; }
.about-dialog::backdrop { background: #102e258c; backdrop-filter: blur(3px); }
.dialog-header { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-bottom: .6rem; background: #fff; }
.dialog-header .eyebrow { min-width: 0; }
.close-button { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border: 1px solid var(--control-border); border-radius: 50%; background: #fff; color: var(--ink); }
.close-button svg { width: 1.3rem; height: 1.3rem; }
.close-button:hover { background: var(--soft); }
.about-dialog h2 { margin: .5rem 0 .7rem; font-family: Manrope, 'DM Sans', sans-serif; font-size: clamp(1.65rem, 4vw, 2.1rem); font-weight: 750; line-height: 1.25; letter-spacing: -.025em; }
.dialog-intro { margin: 0 0 1.25rem; color: var(--muted); font-size: 1rem; line-height: 1.65; }
.methodology-list { margin: 0; }
.methodology-list > div { padding-block: 1rem; border-top: 1px solid var(--line); }
.methodology-list dt { color: var(--ink); font-size: 1rem; font-weight: 700; line-height: 1.5; }
.methodology-list dd { margin: .35rem 0 0; color: var(--muted); font-size: 1rem; line-height: 1.7; overflow-wrap: anywhere; }
.dialog-source { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; margin-top: .7rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.dialog-source > span { color: var(--muted); font-size: var(--small); font-weight: 650; letter-spacing: .04em; }
.dialog-source a { display: inline-flex; align-items: center; min-height: 48px; max-width: 100%; padding-block: .4rem; color: var(--teal-dark); font-size: 1rem; line-height: 1.5; overflow-wrap: anywhere; }
.toast { position: fixed; bottom: 1rem; left: 50%; z-index: 100; transform: translateX(-50%); width: min(36rem, calc(100% - 2rem)); max-height: 50vh; padding: .8rem 1rem; overflow-y: auto; border-radius: 12px; background: var(--ink); color: #fff; font-size: 1rem; line-height: 1.6; overflow-wrap: anywhere; }
.map-error, .map-empty-note { padding: 1rem; color: var(--muted); font-size: 1rem; line-height: 1.6; }
.city-clear { position: absolute; right: .35rem; top: 50%; display: grid; place-items: center; width: 44px; height: 44px; transform: translateY(-50%); border: 0; border-radius: 6px; background: #fff; }
.city-clear svg { width: 1rem; height: 1rem; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Tablet: generous search controls, one results column, full action labels. */
@media (max-width: 1150px) {
  .filter-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .drug-field, .search-button { grid-column: 1 / -1; }
  .search-button { width: 100%; }
  .summary-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .summary-source { grid-column: 1 / -1; width: fit-content; max-width: 100%; }
  .ranking-header .sort-indicator span { display: none; }
}
@media (max-width: 1000px) {
  .results-grid { grid-template-columns: minmax(0, 1fr); }
  .rank-panel { order: 0; }
  .map-column { order: 1; }
  .map-container > svg { max-height: 32rem; }
  .results-heading { flex-direction: column; gap: .7rem; }
  .results-actions { padding-top: 0; }
  .ranking-header .sort-indicator span { display: inline; }
}
@media (max-width: 800px) {
  .header-note { display: none; }
  .site-header nav { margin-left: auto; }
}

/* Phones: 17px body/inputs, 15.3px supporting text, 48–56px controls. */
@media (max-width: 640px) {
  :root { font-size: 106.25%; }
  .site-header { min-height: 88px; gap: .5rem; padding-block: .6rem; }
  .brand { gap: .45rem; font-size: 1.35rem; letter-spacing: -.04em; }
  .brand-mark { width: 2rem; height: 2rem; border-radius: 11px; }
  .brand-mark svg { width: 1.45rem; height: 1.45rem; }
  .site-header nav { gap: 0; }
  .about-button { max-width: 8rem; padding-inline: .15rem; text-align: right; }
  .hero { padding: 1.6rem 0 1.15rem; }
  h1 { font-size: clamp(2rem, 8vw, 2.6rem); letter-spacing: -.04em; }
  .hero p { font-size: 1.05rem; }
  .search-card { padding: 1rem; border-radius: 14px; }
  .filter-fields { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
  .drug-field, .search-button { grid-column: auto; }
  .field label { margin-bottom: .35rem; }
  .input-wrap input, .input-wrap select, .version-controls select { min-height: 56px; font-size: 1rem; }
  .search-button { min-height: 56px; }
  .search-card-bottom { align-items: flex-start; gap: .8rem; margin-top: 1rem; }
  .popular-label { flex-basis: 100%; }
  .search-help { width: 100%; }
  .suggestions { padding: .25rem; }
  .drug-option, .suggestions [role='option'] { min-height: 70px; padding: .7rem .55rem; }
  .did-you-mean { padding: .85rem; }
  .did-you-mean button { flex: 1 1 auto; }
  .results-section { margin-top: 1rem; }
  .results-title-line h2 { font-size: 1.9rem; }
  .results-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: .65rem; }
  .secondary-button { width: 100%; min-width: 0; min-height: 48px; padding: .65rem .45rem; }
  .version-controls { align-items: stretch; flex-direction: column; gap: .35rem; }
  .version-controls select { flex: auto; width: 100%; max-width: 100%; }
  .included-versions ul { max-height: 22rem; }
  .included-versions li, .product-breakdown li { grid-template-columns: minmax(0, 1fr) minmax(0, 6rem); gap: .7rem; }
  .summary-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem .9rem; margin-block: 1.2rem; padding-block: 1.1rem; }
  .summary-stat:first-child { grid-column: 1 / -1; }
  .summary-stat + .summary-stat { padding-left: 0; border-left: 0; }
  .stat-value { font-size: 2rem; }
  .stat-location { font-size: 1.4rem; }
  .location-stat { grid-column: auto; }
  .summary-source { grid-column: 1 / -1; width: 100%; padding: .75rem; }
  .panel { border-radius: 14px; }
  .panel-header { gap: .65rem; padding: 1rem .85rem; }
  .panel-header h3 { font-size: 1.12rem; }
  .ranking-header .sort-indicator span { display: none; }
  .list-column-headings { padding: .7rem 2.5rem .7rem 3.6rem; }
  .rank-row { grid-template-columns: 1.8rem minmax(0, 1fr) 4.7rem 1rem; gap: .45rem; min-height: 6.2rem; padding: 1rem .8rem; }
  .rank-num { width: 1.8rem; min-height: 1.8rem; border-radius: 7px; }
  .prescriber-name { font-size: 1.1rem; }
  .rank-value { font-size: 1.45rem; }
  .prescriber-expanded { padding: 1rem .85rem; }
  .prescriber-expanded dl, .prescriber-expanded .detail-grid { gap: .9rem .8rem; }
  .load-more-button { width: calc(100% - 1.7rem); margin-inline: .85rem; }
  .ranking-footnote { padding-inline: .85rem; }
  .loading-state { padding-inline: .85rem; }
  .skeleton-row { grid-template-columns: 1.8rem minmax(0, 1fr) 3rem; gap: .8rem; }
  .skeleton-circle { width: 1.8rem; height: 1.8rem; }
  .map-container { padding: .4rem .45rem; }
  .map-footer { padding: .8rem .85rem 1rem; }
  .map-legend { gap: .4rem; }
  .insight-card { padding: .9rem; }
  .site-footer { flex-direction: column; gap: 1rem; margin-top: 1.7rem; padding-top: 1.2rem; }
  .footer-source { text-align: left; }
  .footer-source a { justify-content: flex-start; }
  .about-dialog { width: calc(100% - 1rem); max-height: calc(100vh - 1rem); max-height: calc(100dvh - 1rem); padding: 1rem; border-radius: 14px; }
  .about-dialog h2 { font-size: 1.7rem; }
}
@media (max-width: 390px) {
  .about-button { max-width: 7rem; }
  .rank-row { grid-template-columns: 1.8rem minmax(0, 1fr) 1rem; }
  .rank-num { grid-column: 1; grid-row: 1 / 3; align-self: start; }
  .rank-main { grid-column: 2; grid-row: 1; }
  .rank-value { grid-column: 2; grid-row: 2; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: .3rem .45rem; text-align: left; }
  .row-chevron { grid-column: 3; grid-row: 1 / 3; }
  .prescriber-expanded dl, .prescriber-expanded .detail-grid { grid-template-columns: minmax(0, 1fr); }
  .sort-indicator { display: none; }
  .included-versions li, .product-breakdown li { grid-template-columns: minmax(0, 1fr) minmax(0, 5.4rem); gap: .6rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}