/* ==========================================================================
   Tokens
   Navy primary, slate-blue secondary, gold accent, white ground -- per the
   project README. Declared as variables so the nav, user bar and grid cannot
   drift apart.
   ========================================================================== */
:root {
  --navy:        #0d1b2a;
  --navy-soft:   #16304a;
  --slate:       #47679a;
  --slate-light: #eaf0f8;
  --gold:        #d4af37;
  --gold-dark:   #a9861f;
  --ink:         #1e293b;
  --ink-muted:   #5b6b7f;
  --line:        #d9e1ec;
  --line-soft:   #edf1f7;
  --paper:       #ffffff;
  --wash:        #f7f9fc;
  --danger:      #a4262c;
  --good-text:   #1f6b34;
  --radius:      8px;
  --shadow:      0 1px 2px rgba(13, 27, 42, .06), 0 4px 14px rgba(13, 27, 42, .06);

  /* These four are the "text/border on the page surface" versions of navy,
     slate and danger. Most uses of --navy/--slate/--danger are backgrounds
     paired with white text (buttons, badges, the nav bar) and stay identical
     in dark mode; these are the ones that sit directly on --paper/--wash and
     so need to invert for reading in the dark. Equal to their source colour
     here, so light mode is pixel-for-pixel unchanged. */
  --heading:       var(--navy);
  --heading-hover: var(--navy-soft);
  --link:          var(--slate);
  --danger-text:   var(--danger);

  /* Surfaces and fills that differ between modes. Named for their job, so
     dark mode can move them independently of the brand navy:
       --page         the ground everything sits on (white here)
       --nav, --bar   the nav bar and the "Your details" bar under it
       --table-head   header rows of the comparison grid and Medigap tables
       --fill-strong  solid selected/primary fills that carry white text */
  --page:              var(--paper);
  --nav:               var(--navy);
  --nav-line:          transparent;
  --bar:               var(--slate-light);
  --bar-hover:         #dfe7f1;
  --table-head:        var(--slate-light);
  --table-head-alt:    #dde5f0;
  --table-head-text:   var(--navy);
  --table-head-muted:  var(--ink-muted);
  --fill-strong:       var(--navy);
  --fill-strong-hover: var(--navy-soft);
  --selected-border:   var(--navy);
  --field-border:      #c3cedc;
  --toggle-hover-bg:   var(--navy);
  --toggle-hover-text: #fff;
  color-scheme: light;
}

/* Dark mode. Same navy/gold/slate anchors -- only the paper the page is
   printed on, and the tokens that read as text on top of it, invert.
   "auto" follows the OS; "dark" is an explicit choice from the nav bar
   toggle or My Settings and wins either way. */
/* Dark palette: the nav bar's navy becomes the page itself, for contrast.
   The nav drops one step deeper with a hairline below it; cards step up from
   the page, and table headers one step more. Nothing large is lighter than
   #1a3350. Body text ~15:1 on the page, muted text ~9:1, white on
   --fill-strong ~7:1. Keep the two blocks below identical. */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --page: #0d1b2a; --paper: #132840; --wash: #112438;
    --ink: #e6edf5; --ink-muted: #a9bdd3;
    --line: #243d5c; --line-soft: #1c3350;
    --slate-light: #1a3350;
    --heading: #b4cdef; --heading-hover: #d6e6fa;
    --link: #8fb3e0; --danger-text: #e5878c; --good-text: #8fd6a0;
    --nav: #08121d; --nav-line: #1f3552;
    --bar: #112237; --bar-hover: #18304c;
    --table-head: #1a3350; --table-head-alt: #203b5c;
    --table-head-text: #f1f5fa; --table-head-muted: #a9bdd3;
    --fill-strong: #35598a; --fill-strong-hover: #40689e;
    --selected-border: #8fb3e0; --field-border: #35507a;
    --toggle-hover-bg: var(--gold); --toggle-hover-text: var(--navy);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --page: #0d1b2a; --paper: #132840; --wash: #112438;
    --ink: #e6edf5; --ink-muted: #a9bdd3;
    --line: #243d5c; --line-soft: #1c3350;
    --slate-light: #1a3350;
    --heading: #b4cdef; --heading-hover: #d6e6fa;
    --link: #8fb3e0; --danger-text: #e5878c; --good-text: #8fd6a0;
    --nav: #08121d; --nav-line: #1f3552;
    --bar: #112237; --bar-hover: #18304c;
    --table-head: #1a3350; --table-head-alt: #203b5c;
    --table-head-text: #f1f5fa; --table-head-muted: #a9bdd3;
    --fill-strong: #35598a; --fill-strong-hover: #40689e;
    --selected-border: #8fb3e0; --field-border: #35507a;
    --toggle-hover-bg: var(--gold); --toggle-hover-text: var(--navy);
    color-scheme: dark;
}
/* The plan-year chip and "years differ" notice use a warm cream tint that
   doesn't invert cleanly through the tokens above -- given its own dark
   pairing instead of going dim-on-dim. */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .userbar-chip--year,
  :root[data-theme="auto"] .userbar-notice { background: #3a3320; color: var(--gold); }
  :root[data-theme="auto"] .userbar-notice { border-bottom-color: #5c4708; }
}
:root[data-theme="dark"] .userbar-chip--year,
:root[data-theme="dark"] .userbar-notice { background: #3a3320; color: var(--gold); }
:root[data-theme="dark"] .userbar-notice { border-bottom-color: #5c4708; }

* { box-sizing: border-box; }

/* Form controls take the page's text colour. Left to the browser they stay
   near-black, which disappears on the dark ground (the compare list's sort
   and page-size menus were unreadable). color-scheme above does the same for
   the native parts: dropdown lists, checkboxes, scrollbars. */
:where(input, select, textarea) { color: var(--ink); }

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1.125rem;      /* Accessible baseline: 18px at Standard text size */
  line-height: 1.6;         /* Prevents lines from blurring together */
  color: var(--ink);        /* Dark charcoal, not pure black */
  background-color: var(--page);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: 'Merriweather', Georgia, serif;
  color: var(--heading);
  font-weight: 700;
}
h1 { font-size: 2.25rem; margin-bottom: 1.5rem; }
h2 { font-size: 1.75rem; margin-bottom: 1.25rem; }

a { color: var(--link); }

.skip-link {
  position: absolute; left: -9999px;
  background: var(--navy); color: #fff; padding: .75rem 1rem; z-index: 100;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* Visible focus everywhere. A good part of this audience navigates by keyboard
   at least some of the time, and the browser default is too faint on navy. */
:where(a, button, input, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ==========================================================================
   Navigation
   ========================================================================== */
/* Three layouts, chosen by width -- and the width at which each stops fitting
   depends on the text size, so the breakpoints move with it:

   - Wide: brand | links | icons, one row.
   - Medium: brand and icons on the first row, the links on a second row of
     their own, wrapping if they must (1280px; 1460px at Larger text,
     1700px at Largest).
   - Phone and small tablet: the links fold into a "Menu" (800px at Smaller
     text, 880px at Standard, 1000px at Larger, 1280px at Largest).

   The icons -- text size and light/dark -- are never folded away: someone
   who needs bigger text must not have to find it inside a menu first. */
.navbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: .1rem 1rem;
  padding: .65rem clamp(1rem, 4vw, 2.5rem);
  background: var(--nav); color: #fff;
  border-bottom: 1px solid var(--nav-line);
  position: sticky; top: 0; z-index: 30;
}
.nav-tools {
  display: flex; align-items: center; gap: clamp(.8rem, 1.6vw, 1.3rem);
  margin-left: clamp(.5rem, 2vw, 1.6rem);
}
.nav-menu { display: none; }
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.brand-mark { border-radius: 6px; display: block; }
.brand-name {
  font-family: 'Merriweather', Georgia, serif;
  font-size: 1.15rem; font-weight: 700; color: #fff; letter-spacing: .01em;
}

/* margin-left:auto IS the "blank middle part" -- it pushes the links right
   without needing an empty spacer element. */
.nav-links {
  margin-left: auto; display: flex; align-items: center;
  gap: clamp(.5rem, 2vw, 1.6rem);
}
.nav-links a, .nav-soon {
  color: #dce6f2; text-decoration: none; font-weight: 500; font-size: 1rem;
  padding: .45rem .2rem; border-bottom: 2px solid transparent; white-space: nowrap;
}
.nav-links a:hover { color: #fff; border-bottom-color: var(--gold); }
.nav-links a[aria-current="page"] { color: #fff; border-bottom-color: var(--gold); }
.nav-soon { color: #8ba0b8; cursor: default; }

/* Medium: the links take a row of their own under the brand and icons. */
@media (max-width: 1279.98px) {
  .nav-tools { margin-left: auto; }
  .nav-links {
    order: 3; flex-basis: 100%; margin-left: 0;
    flex-wrap: wrap; gap: 0 clamp(1rem, 2.6vw, 1.8rem);
  }
}
@media (max-width: 1459.98px) {
  :root[data-text-size="larger"] .nav-tools { margin-left: auto; }
  :root[data-text-size="larger"] .nav-links {
    order: 3; flex-basis: 100%; margin-left: 0;
    flex-wrap: wrap; gap: 0 clamp(1rem, 2.6vw, 1.8rem);
  }
}
@media (max-width: 1699.98px) {
  :root[data-text-size="largest"] .nav-tools { margin-left: auto; }
  :root[data-text-size="largest"] .nav-links {
    order: 3; flex-basis: 100%; margin-left: 0;
    flex-wrap: wrap; gap: 0 clamp(1rem, 2.6vw, 1.8rem);
  }
}

/* Phone: the links fold into a Menu that opens below the bar. */
.nav-menu-toggle {
  display: inline-flex; align-items: center; gap: .45rem; cursor: pointer;
  list-style: none; color: #dce6f2; font-weight: 600; font-size: .95rem;
  padding: .4rem .7rem; border: 1px solid rgba(255, 255, 255, .28); border-radius: 6px;
  min-height: 2.5rem;
}
.nav-menu-toggle::-webkit-details-marker { display: none; }
.nav-menu-toggle:hover, .nav-menu[open] .nav-menu-toggle { color: var(--gold); border-color: var(--gold); }
.nav-menu-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* The navbar is sticky, so it is the positioning box: the list spans it. */
.nav-menu-links {
  position: absolute; left: 0; right: 0; top: 100%;
  display: flex; flex-direction: column;
  padding: .3rem clamp(1rem, 4vw, 2.5rem) .8rem;
  background: var(--nav); border-bottom: 1px solid var(--nav-line);
  box-shadow: 0 10px 20px rgba(0, 0, 0, .28);
}
.nav-menu-links a {
  color: #dce6f2; text-decoration: none; font-weight: 500; font-size: 1.05rem;
  padding: .75rem .2rem; border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.nav-menu-links a:last-child { border-bottom: 0; }
.nav-menu-links a:hover { color: #fff; }
.nav-menu-links a[aria-current="page"] {
  color: #fff; font-weight: 700; border-left: 3px solid var(--gold); padding-left: .7rem;
}
@media (max-width: 799.98px) {
  .nav-links { display: none; }
  .nav-menu { display: block; margin-left: auto; }
  .nav-tools { margin-left: .35rem; }
}
/* Before the links would need a third row: that bar is sticky, and every row
   of it is a row of the page the visitor cannot see. */
@media (max-width: 879.98px) {
  :root[data-text-size="standard"] .nav-links { display: none; }
  :root[data-text-size="standard"] .nav-menu { display: block; margin-left: auto; }
  :root[data-text-size="standard"] .nav-tools { margin-left: .35rem; }
}
@media (max-width: 999.98px) {
  :root[data-text-size="larger"] .nav-links { display: none; }
  :root[data-text-size="larger"] .nav-menu { display: block; margin-left: auto; }
  :root[data-text-size="larger"] .nav-tools { margin-left: .35rem; }
}
@media (max-width: 1279.98px) {
  :root[data-text-size="largest"] .nav-links { display: none; }
  :root[data-text-size="largest"] .nav-menu { display: block; margin-left: auto; }
  :root[data-text-size="largest"] .nav-tools { margin-left: .35rem; }
}
/* The narrowest phones: the Menu button keeps only its icon, and the brand
   name may take two lines, so the icons never push the bar sideways. */
@media (max-width: 439.98px) {
  .nav-menu-word { position: absolute; width: 1px; height: 1px; overflow: hidden;
                   clip: rect(0 0 0 0); white-space: nowrap; }
  .nav-menu-toggle { padding: .4rem .5rem; }
  /* One row, always: the links are in the Menu, so nothing needs a second
     row -- and letting the icons wrap put the text-size menu off the left
     edge. The brand is what gives way, onto two lines. */
  .navbar { flex-wrap: nowrap; column-gap: .55rem; }
  .brand { gap: .5rem; min-width: 0; flex: 0 1 auto; }
  .brand-mark { width: 30px; height: 30px; }
  .navbar .brand-name { font-size: .95rem; line-height: 1.2; }
  .nav-tools { gap: .7rem; }
}
/* Small text has a floor: nothing smaller than .875rem, 14px at Standard.
   Notes, flags, badges and the grid's "out of network" lines had been down
   to 11-13px, which is hard going for the older readers this site is for.
   The grid itself is 1.0625rem, 17px: it is what people read most. */
/* Text size. Scaling the root moves everything sized in rem -- nearly the
   whole stylesheet -- and the body, now 1.125rem, with it: 16, 18, 21 and 24px
   body text. Standard is the size the site was designed at, so it sets
   nothing. */
:root[data-text-size="smaller"] { font-size: 88.89%; }
:root[data-text-size="larger"]  { font-size: 116.67%; }
:root[data-text-size="largest"] { font-size: 133.33%; }

.textsize { position: relative; display: inline-flex; }
.textsize-toggle {
  display: inline-flex; align-items: center; color: #dce6f2; cursor: pointer;
  list-style: none; padding: 0;
}
.textsize-toggle::-webkit-details-marker { display: none; }
.textsize-toggle:hover, .textsize[open] .textsize-toggle { color: var(--gold); }
.textsize-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }
.textsize-menu {
  position: absolute; right: 0; top: calc(100% + .6rem); z-index: 40;
  min-width: 11rem; margin: 0; padding: .45rem;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.textsize-heading {
  display: block; padding: .15rem .5rem .35rem; font-size: .875rem; font-weight: 600;
  color: var(--ink-muted); text-transform: uppercase; letter-spacing: .04em;
}
.textsize-option {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  padding: .4rem .5rem; border: 0; border-radius: 6px; background: none;
  color: var(--ink); font: inherit; font-size: .95rem; text-align: left; cursor: pointer;
}
.textsize-option:hover, .textsize-option:focus-visible { background: var(--wash); }
.textsize-option.is-selected { font-weight: 600; }
/* Each sample "A" at its own step, so the menu shows the difference. */
.textsize-sample { width: 1.4rem; text-align: center; font-weight: 700; line-height: 1; }
.textsize-option--smaller  .textsize-sample { font-size: .8rem; }
.textsize-option--standard .textsize-sample { font-size: 1rem; }
.textsize-option--larger   .textsize-sample { font-size: 1.3rem; }
.textsize-option--largest  .textsize-sample { font-size: 1.6rem; }
.textsize-label { flex: 1; }
.textsize-current { color: var(--link); font-weight: 700; }

.theme-toggle-form { display: inline-flex; margin: 0; }
.theme-toggle {
  display: inline-flex; align-items: center; color: #dce6f2;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.theme-toggle:hover { color: var(--gold); }

/* ==========================================================================
   User bar
   ========================================================================== */
.userbar { background: var(--bar); border-bottom: 1px solid var(--line); }
.userbar-shell { max-width: 1600px; margin: 0 auto; }
.userbar-summary {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .6rem clamp(1rem, 4vw, 2.5rem); cursor: pointer; font-size: .95rem;
}
.userbar-summary { list-style: none; transition: background-color .15s; }
.userbar-summary::-webkit-details-marker { display: none; }
/* The whole bar is the button. On hover (or keyboard focus) it lifts one
   shade, a gold edge appears, and the pill fills -- so it reads as clickable
   anywhere along it, not only at the pill. */
.userbar-summary:hover, .userbar-summary:focus-visible {
  background: var(--bar-hover); box-shadow: inset 4px 0 0 var(--gold);
}
.userbar-label { font-weight: 600; color: var(--heading); }
/* The "this opens" cue: a button-looking pill pushed to the right edge. */
.userbar-toggle {
  margin-left: auto; display: inline-flex; align-items: center; gap: .35rem;
  font-size: .88rem; font-weight: 600; color: var(--heading);
  background: var(--paper); border: 1px solid var(--link);
  border-radius: 999px; padding: .25rem .5rem .25rem .8rem;
}
.userbar-summary:hover .userbar-toggle,
.userbar-summary:focus-visible .userbar-toggle {
  background: var(--toggle-hover-bg); border-color: var(--toggle-hover-bg); color: var(--toggle-hover-text);
}
.userbar-chevron { transition: transform .2s; }
.userbar-toggle-open { display: none; }
.userbar-shell[open] .userbar-toggle-open { display: inline; }
.userbar-shell[open] .userbar-toggle-closed { display: none; }
.userbar-shell[open] .userbar-chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .userbar-chevron, .userbar-summary { transition: none; } }
.userbar-chip {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 999px; padding: .18rem .7rem; font-size: .875rem; color: var(--ink);
}
.userbar-chip--empty { color: var(--danger); border-color: #e4bcbe; background: #fdf4f4; }
.userbar-chip--filter { background: var(--fill-strong); color: #fff; border-color: var(--fill-strong); }
.userbar-chip--year { border-color: var(--gold); background: #fbf5e2; color: var(--navy); font-weight: 600; }
.userbar-notice {
  max-width: 1600px; margin: 0 auto; padding: .5rem clamp(1rem, 4vw, 2.5rem);
  background: #fbf5e2; border-bottom: 1px solid #ecdca8; color: var(--navy); font-size: .92rem;
}

/* Plan year: every year on file, unavailable ones visible but disabled. */
.plan-year-form fieldset { border: 0; margin: 0 0 .6rem; padding: 0; display: grid; gap: .45rem; }
.plan-year-form legend { padding: 0; }
.plan-year-option {
  display: flex; gap: .6rem; align-items: flex-start; cursor: pointer;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .5rem .7rem;
}
.plan-year-option:has(input:checked) { border-color: var(--selected-border); box-shadow: inset 3px 0 0 var(--gold); }
.plan-year-option input { margin-top: .3rem; width: 1.05rem; height: 1.05rem; flex: none; }
.plan-year-option strong { display: block; color: var(--heading); line-height: 1.3; }
.plan-year-option small { display: block; color: var(--ink-muted); font-size: .875rem; line-height: 1.35; }
.plan-year-option.is-unavailable { cursor: not-allowed; background: var(--wash); }
.plan-year-option.is-unavailable strong { color: var(--ink-muted); }
.settings-lead { margin: 0 0 .8rem; max-width: 70ch; }

.userbar-body {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  padding: .5rem clamp(1rem, 4vw, 2.5rem) 1.25rem;
}
.userbar-group-label,
.zip-form > label {
  display: block; font-weight: 600; font-size: .875rem;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-muted); margin-bottom: .4rem;
}
.zip-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.zip-row input[type="text"] {
  font: inherit; font-size: 1.05rem; width: 7.5rem;
  padding: .55rem .7rem; border: 1px solid var(--line); border-radius: var(--radius);
}
.field-note { font-size: .875rem; color: var(--ink-muted); margin: .45rem 0 0; }
.field-note.is-error, .field-error { color: var(--danger-text); font-size: .88rem; margin: .45rem 0 0; }

.county-choices { display: flex; flex-wrap: wrap; gap: .4rem; }
.county-choices form { margin: 0; }
.county-pill {
  font: inherit; font-size: .92rem; cursor: pointer;
  background: var(--paper); border: 1px solid var(--link);
  color: var(--link); border-radius: 999px; padding: .35rem .85rem;
}
.county-pill:hover { background: var(--fill-strong-hover); color: #fff; }
.county-pill.is-active { background: var(--fill-strong); border-color: var(--fill-strong); color: #fff; }
.county-single { margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--heading); }

.check {
  display: flex; gap: .55rem; align-items: flex-start;
  margin-bottom: .6rem; font-size: .95rem;
}
.check input { margin-top: .3rem; width: 1.15rem; height: 1.15rem; flex: none; }
.check small { display: block; color: var(--ink-muted); font-size: .875rem; line-height: 1.35; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer;
  border-radius: var(--radius); padding: .55rem 1.1rem;
  border: 1px solid transparent; text-decoration: none; display: inline-block;
}
.btn-primary { background: var(--fill-strong); color: #fff; }
.btn-primary:hover { background: var(--fill-strong-hover); }
.btn-secondary { background: var(--gold); color: var(--navy); }
.btn-secondary:hover { background: var(--gold-dark); color: #fff; }
.btn-ghost { background: var(--paper); color: var(--link); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--link); }
.btn.is-disabled { opacity: .45; pointer-events: none; }

/* ==========================================================================
   Page scaffolding
   ========================================================================== */
.page { max-width: 1100px; margin: 0 auto; padding: 1.75rem clamp(1rem, 4vw, 2.5rem) 3rem; }
.page--wide { max-width: 1600px; }
.page-head {
  display: flex; gap: 1rem; align-items: flex-end;
  justify-content: space-between; flex-wrap: wrap;
}
.page-head h1 { margin: 0 0 .35rem; font-size: 1.9rem; }
.page-sub { margin: 0; color: var(--ink-muted); font-size: .98rem; }
.sort-form { display: flex; align-items: center; gap: .5rem; font-size: .9rem; flex-wrap: wrap; }
.sort-form select { max-width: 100%; }
.sort-form select, .inline-form select, .inline-form input {
  font: inherit; font-size: .93rem; padding: .45rem .6rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper);
}
.empty-state {
  background: var(--wash); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 2rem;
}
.empty-state h1, .empty-state h2 { margin-top: 0; }
.panel {
  background: var(--wash); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.25rem 1.5rem; margin: 1.25rem 0;
}
.panel h2 { font-size: 1.25rem; margin: 0 0 .75rem; }
.kv { display: grid; gap: .5rem; margin: 0; }
.kv div { display: flex; gap: .6rem; }
.kv dt { font-weight: 600; min-width: 9rem; color: var(--ink-muted); }
.kv dd { margin: 0; }
.plain-list { margin: 0; padding-left: 1.2rem; }

/* My Settings */
.settings-flash {
  background: #eef6ee; border: 1px solid #b9d8b9; color: #1f5a2a;
  border-radius: var(--radius); padding: .6rem .9rem; margin: 1rem 0 0;
}
.settings-current { margin: 0 0 .9rem; font-size: 1.02rem; }
.settings-current .field-note { display: block; margin-top: .15rem; }
.settings-secondary { margin-top: .9rem; }
.settings-page .inline-form { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.settings-page .inline-form label { font-weight: 600; }
.settings-plans { list-style: none; margin: 0 0 1rem; padding: 0; }
.settings-plans li {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .55rem 0; border-bottom: 1px solid var(--line);
}
.settings-plans form, .settings-row form { margin: 0; }
.theme-choices { border: 0; padding: 0; margin: 0; display: flex; gap: 1.1rem; flex-wrap: wrap; }
.theme-choices .check { margin: 0; }
.settings-plan-name small { display: block; color: var(--ink-muted); font-size: .875rem; }
.settings-row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.site-footer {
  border-top: 1px solid var(--line); background: var(--wash);
  padding: 1.25rem clamp(1rem, 4vw, 2.5rem);
  font-size: .875rem; color: var(--ink-muted);
}
.site-footer p { max-width: 70ch; margin: 0 auto; }

/* ==========================================================================
   Selection tray
   ========================================================================== */
.select-tray {
  /* Just under the sticky nav bar, whose height navbar.js publishes. */
  position: sticky; top: var(--nav-h, 64px); z-index: 20;
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: .6rem .9rem; margin: 1.25rem 0;
}
.tray-form { margin: 0; }
.tray-count { font-weight: 600; color: var(--heading); margin-left: auto; }

/* ==========================================================================
   Plan list
   ========================================================================== */
.plan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.plan-card {
  display: grid; gap: .5rem 1rem;
  grid-template-columns: auto 1fr;
  grid-template-areas: "pick main" ". metrics";
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem 1.15rem;
}
.plan-card.is-selected { border-color: var(--selected-border); box-shadow: inset 3px 0 0 var(--gold); }
.plan-pick { grid-area: pick; margin: 0; }
.pick-box {
  width: 2.2rem; height: 2.2rem; font-size: 1.1rem; cursor: pointer;
  border: 1px solid var(--link); background: var(--paper); color: var(--link);
  border-radius: 6px; font-weight: 700;
}
.pick-box[aria-pressed="true"] { background: var(--fill-strong); border-color: var(--fill-strong); color: #fff; }
.plan-main { grid-area: main; }
.plan-carrier {
  margin: 0; font-size: .875rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ink-muted);
}
.plan-name { margin: .1rem 0 .4rem; font-size: 1.2rem; font-family: 'Inter', sans-serif; }
.plan-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; }
.tag {
  font-size: .875rem; font-weight: 600; padding: .16rem .55rem;
  border-radius: 4px; background: var(--slate-light); color: var(--heading);
}
.tag--network { background: var(--fill-strong); color: #fff; }
.tag--snp { background: #efe3ba; color: #5c4708; }
.tag--stars { background: var(--gold); color: var(--navy); }
.tag--muted { background: var(--line-soft); color: var(--ink-muted); font-weight: 500; }

/* The subgrid of headline numbers. auto-fit keeps it one tidy row on a wide
   screen and reflows to two or three columns on a phone with no media query. */
.plan-metrics {
  grid-area: metrics; margin: .25rem 0 0;
  display: grid; gap: .1rem .75rem;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  border-top: 1px solid var(--line-soft); padding-top: .6rem;
}
.metric { padding: .15rem 0; }
.metric--wide { grid-column: span 2; }
.metric dt {
  font-size: .875rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-muted);
}
.metric dd { margin: 0; font-size: .98rem; font-variant-numeric: tabular-nums; }
.metric dd.metric-strong { font-weight: 700; font-size: 1.1rem; color: var(--heading); }

.pagination {
  display: flex; gap: 1rem; align-items: center;
  justify-content: center; margin: 2rem 0 0; font-size: .95rem;
}

/* ==========================================================================
   Comparison grid
   ========================================================================== */
.grid-actions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.inline-form { display: flex; gap: .4rem; margin: 0; }

.row-picker {
  margin: 1.25rem 0; background: var(--wash);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.row-picker > summary { padding: .7rem 1rem; cursor: pointer; font-weight: 600; color: var(--heading); }
.row-picker-body {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  padding: 0 1rem 1rem;
}
.row-picker-group h3 {
  font-size: .875rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-muted); margin: 0; font-family: 'Inter', sans-serif;
}
.row-picker-actions {
  padding: 0 1rem .9rem; display: flex; align-items: center;
  gap: .6rem; flex-wrap: wrap;
}
.row-picker-group-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .5rem; margin: 0 0 .4rem;
}
.row-picker-empty { margin: 0; padding: 0 1rem 1rem; color: var(--ink-muted); }
/* A button that reads as a link: for small secondary actions beside a heading. */
.link-btn {
  font: inherit; font-size: .875rem; background: none; border: 0; padding: 0;
  color: var(--heading); text-decoration: underline; cursor: pointer;
}
.link-btn:hover { color: var(--heading-hover); }
.link-btn:disabled { color: var(--ink-muted); cursor: default; text-decoration: none; }
.row-picker-group ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .3rem;
}
.chip {
  font: inherit; font-size: .875rem; cursor: pointer;
  background: var(--paper); border: 1px solid var(--line); color: var(--link);
  border-radius: 999px; padding: .25rem .7rem;
}
.chip:hover { border-color: var(--link); background: var(--slate-light); }

/* ==========================================================================
   Tooltips
   The tip sits in the markup after its label, so it is readable without
   JavaScript and available to screen readers through aria-describedby;
   tips.js floats it so the grid's scroll container cannot clip it.
   ========================================================================== */
.has-tip {
  text-decoration: underline dotted var(--link); text-underline-offset: 3px;
  cursor: help;
}
.tip {
  display: none; font-size: .88rem; line-height: 1.45; font-weight: 400;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-left: 4px solid var(--gold);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: .7rem .85rem; text-align: left; white-space: normal;
}
.tip.is-open { display: block; position: fixed; z-index: 60; }
.tip strong { display: block; color: var(--heading); margin-bottom: .2rem; }
.tip-text { display: block; }
.tip-link { display: inline-block; margin-top: .45rem; font-weight: 600; font-size: .875rem; }
/* The no-JavaScript fallback lives in a <noscript> block in base.html. */

.grid-scroll {
  overflow-x: auto; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--paper);
}
.cmp-grid { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 1.0625rem; }
.cmp-grid th, .cmp-grid td {
  padding: .6rem .8rem; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line-soft);
}
/* Light slate with a gold rule rather than a solid navy block: still clearly a
   header, without being the darkest thing on the page. */
.cmp-grid thead th {
  background: var(--table-head); color: var(--table-head-text);
  border-bottom: 3px solid var(--gold);
  position: sticky; top: 0; z-index: 2; vertical-align: bottom;
}
.cmp-grid tbody tr { position: relative; }
.cmp-grid tbody tr:nth-child(even) { background: var(--wash); }
.cmp-grid td { font-variant-numeric: tabular-nums; }

/* The benefit-name column stays put while the plans scroll sideways --
   otherwise a row's label is off-screen exactly when you need it. */
.cmp-rowhead {
  position: sticky; left: 0; z-index: 1;
  background: var(--paper); border-right: 1px solid var(--line);
  min-width: 240px; max-width: 300px;
}
.cmp-grid tbody tr:nth-child(even) .cmp-rowhead { background: var(--wash); }
.cmp-grid thead .cmp-rowhead { background: var(--table-head); z-index: 3; }

/* Chosen in My Settings ("grid-scroll--pinned"; off unless ticked): on a
   computer, the grid is a box one screen tall that scrolls inside itself.
   Two things follow that the page could not do:

   - The plan names stay pinned at the top however far down the benefits
     go. The header was sticky already, but .grid-scroll scrolls sideways,
     and a sideways scroller becomes the box a sticky header sticks to -- so
     it stuck to a box that never scrolled down, and the plan names left the
     screen a few rows in.
   - The sideways scrollbar is always in view, at the bottom of the screen,
     rather than 5,000px down the page under the last benefit.

   Mouse and trackpad only: on a phone or tablet the page scrolls as before,
   because a scroll box inside a scrolling page is hard to escape by touch.
   Scrolling past either end of the grid carries on down the page. */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .grid-scroll--pinned {
    overflow: auto;
    max-height: calc(100vh - var(--nav-h, 64px) - 1.25rem);
  }
}

.cmp-carrier {
  display: block; font-size: .875rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--table-head-muted);
}
.cmp-plan { display: block; font-weight: 600; max-width: 15rem; }
.cmp-type { display: block; font-size: .875rem; color: var(--table-head-muted); font-weight: 400; }
/* Remove is a small x in the corner of the plan's header rather than a
   button on a line of its own: the header is pinned on screen, and every
   line of it is a line of benefits hidden. Its accessible name still says
   which plan it removes. The header cell is sticky, so it positions it. */
.cmp-remove {
  font: inherit; font-size: .875rem; margin-top: .4rem; cursor: pointer;
  background: var(--paper); border: 1px solid var(--line); color: var(--link);
  border-radius: 4px; padding: .1rem .45rem;
}
.cmp-remove:hover { border-color: var(--danger-text); color: var(--danger-text); }
.cmp-grid thead th:not(.cmp-rowhead) { padding-right: 2.1rem; }
.cmp-grid thead th form { margin: 0; }
.cmp-grid thead .cmp-remove {
  position: absolute; top: .4rem; right: .35rem; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; padding: 0;
  font-size: 1.1rem; line-height: 1; color: var(--ink-muted); border-radius: 50%;
}
.cmp-grid thead .cmp-remove:focus-visible {
  border-color: var(--danger-text); color: var(--danger-text);
  outline: 2px solid var(--danger-text); outline-offset: 1px;
}

.cmp-rowlabel { display: block; font-weight: 600; padding-right: 1.5rem; }
.cmp-rowgroup { display: block; font-size: .875rem; color: var(--ink-muted); font-weight: 400; }
.drag-handle {
  color: var(--line); cursor: grab; letter-spacing: -3px;
  margin-right: .35rem; float: left;
}
.drag-handle:hover { color: var(--link); }
.cmp-rowremove {
  position: absolute; right: .5rem; top: .5rem;
  font: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer;
  background: none; border: none; color: var(--line); padding: 0 .25rem;
}
.cmp-rowremove:hover { color: var(--danger-text); }
.cmp-grid tbody tr.is-dragging { opacity: .4; }
.grid-note { font-size: .98rem; color: var(--ink-muted); margin-top: 1rem; max-width: 80ch; }

@media (max-width: 640px) {
  .brand-name { font-size: 1rem; }
  /* The nav bar's own layouts (see "Navigation") handle phones. */
  .plan-card { grid-template-columns: 1fr; grid-template-areas: "pick" "main" "metrics"; }
  .metric--wide { grid-column: span 1; }
  h1 { font-size: 1.6rem; }
}

/* ==========================================================================
   Saved layouts
   ========================================================================== */
.layouts-toggle {
  margin: 1rem 0 0; background: var(--wash);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.layouts-toggle > summary {
  padding: .7rem 1rem; cursor: pointer; font-weight: 600; color: var(--heading);
}
.layouts { padding: 0 1rem 1rem; }
.panel .layouts { padding: 0; }
.layouts-title { font-size: 1.1rem; margin: .5rem 0 .6rem; font-family: 'Inter', sans-serif; }
.layouts-active { margin: 0 0 .7rem; font-size: .95rem; }
.badge {
  display: inline-block; font-size: .875rem; font-weight: 600;
  padding: .12rem .5rem; border-radius: 999px; margin-left: .35rem;
  background: var(--slate-light); color: var(--heading);
}
/* "edited since saving" needs to read as a state, not an error -- the user has
   unsaved work, which is fine, they just need to know Save will overwrite. */
.badge--warn { background: #f7e9c4; color: #5c4708; }

.layout-list { list-style: none; margin: .8rem 0; padding: 0; display: grid; gap: .4rem; }
.layout-item {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .5rem .75rem;
}
.layout-item.is-active { border-color: var(--selected-border); box-shadow: inset 3px 0 0 var(--gold); }
.layout-meta { display: flex; flex-direction: column; }
.layout-name { font-weight: 600; }
.layout-sub { font-size: .875rem; color: var(--ink-muted); }
.layout-buttons { display: flex; gap: .35rem; margin-left: auto; }
.layout-buttons form { margin: 0; }
.btn-sm { font-size: .875rem; padding: .32rem .7rem; }
.btn-danger { color: var(--danger-text); }
.btn-danger:hover { border-color: var(--danger); background: #fdf4f4; }
.btn:disabled { opacity: .45; cursor: default; }
.layouts-note { margin-top: .8rem; max-width: 62ch; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Medigap
   ========================================================================== */
.table-scroll { overflow-x: auto; max-width: 100%; }
.medigap-facts {
  list-style: none; padding: 0; margin: 1.25rem 0 0;
  display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.medigap-facts li {
  background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--gold);
  border-radius: var(--radius); padding: .65rem .85rem; font-size: .92rem; color: var(--ink-muted);
}
.medigap-facts strong { color: var(--heading); display: block; }
.medigap-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: 1rem; }
.medigap-filters .field-note { flex-basis: 100%; margin: 0; }
.medigap-filters label { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .92rem; }
.medigap-filters .check { margin: 0; font-weight: 400; }
.medigap-filters select, .medigap-plan-picker select {
  font: inherit; font-size: .93rem; padding: .35rem .5rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper);
}
.medigap-page table { border-collapse: collapse; width: 100%; background: var(--paper); font-size: .93rem; }
.medigap-page th, .medigap-page td {
  text-align: left; vertical-align: top; padding: .6rem .75rem; border-bottom: 1px solid var(--line);
}
.medigap-page thead th {
  background: var(--table-head); color: var(--table-head-text); font-weight: 600; white-space: nowrap;
  border-bottom: 3px solid var(--gold);
}
.medigap-page thead th.is-original { background: var(--table-head-alt); }
.medigap-page tbody th { font-weight: 600; color: var(--heading); min-width: 14rem; }
.medigap-page th small, .medigap-page td small {
  display: block; font-weight: 400; color: var(--ink-muted); font-size: .875rem; line-height: 1.35; margin-top: .2rem;
}
.medigap-premiums { max-width: 900px; }
.medigap-price { font-weight: 700; white-space: nowrap; }
.medigap-closed { color: var(--danger-text) !important; }
.medigap-carriers summary { cursor: pointer; color: var(--link); font-weight: 600; }
.medigap-carriers ul { list-style: none; margin: .5rem 0 0; padding: 0; }
.medigap-carriers li {
  display: grid; grid-template-columns: 1fr auto; gap: 0 1rem;
  padding: .35rem 0; border-top: 1px dashed var(--line);
}
.medigap-carrier-price { font-weight: 600; white-space: nowrap; }
.medigap-carrier-meta { grid-column: 1 / -1; }
.medigap-source { margin-top: .9rem; }
.medigap-summary-row th, .medigap-summary-row td { background: var(--wash); font-weight: 600; }
.medigap-plan-picker { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; margin: .75rem 0 1rem; }
.medigap-plan-picker fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.medigap-plan-picker legend { font-weight: 600; font-size: .9rem; margin-bottom: .4rem; }
.plan-chip { position: relative; }
.plan-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.plan-chip span {
  display: inline-block; min-width: 2.6rem; text-align: center;
  border: 1px solid var(--link); color: var(--link); background: var(--paper);
  border-radius: 999px; padding: .3rem .7rem; font-size: .88rem; font-weight: 600;
}
.plan-chip input:checked + span { background: var(--fill-strong); border-color: var(--fill-strong); color: #fff; }
.plan-chip input:focus-visible + span { outline: 3px solid var(--gold); }
.medigap-next { margin: 1rem 0 0; }

/* ==========================================================================
   Report an issue
   ========================================================================== */
.report-page { max-width: 1040px; }
.report-head { margin-bottom: 1.5rem; }
.report-head h1 { margin: 0 0 .4rem; font-size: 1.9rem; }
.report-head .page-sub { max-width: 68ch; }

/* Report on the left, optional extras on the right; one column when narrow. */
.report-form {
  display: grid; gap: 1.25rem;
  grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr);
  grid-template-areas: "alert alert" "main side" "actions actions";
  align-items: start;
}
.report-alert { grid-area: alert; }
.report-main { grid-area: main; }
.report-side { grid-area: side; display: grid; gap: 1.25rem; }
.report-actions { grid-area: actions; }
@media (max-width: 760px) {
  .report-form { grid-template-columns: minmax(0, 1fr); grid-template-areas: "alert" "main" "side" "actions"; }
}

.report-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1.25rem 1.35rem; margin: 0; min-width: 0;
  display: grid; gap: 1.1rem; align-content: start;
}
.report-card legend {
  float: left; width: 100%; padding: 0; margin: 0 0 .1rem;
  font-weight: 700; color: var(--heading); font-size: 1.02rem;
}
.report-card legend + * { clear: left; }
.report-card h2 { margin: 0; font-size: 1.02rem; color: var(--heading); }
.report-note { background: var(--wash); box-shadow: none; gap: .4rem; }

/* minmax(0, 1fr): a textarea's default 40-column width otherwise sets the
   column's minimum and pushes the card past a phone screen. */
.report-card { grid-template-columns: minmax(0, 1fr); }
.report-field { display: grid; gap: .4rem; grid-template-columns: minmax(0, 1fr); }
.report-field > label { font-weight: 600; color: var(--heading); font-size: .95rem; }
.report-field input[type="text"],
.report-field input[type="email"],
.report-field textarea {
  font: inherit; font-size: 1rem; width: 100%; color: var(--ink); background: var(--paper);
  padding: .6rem .75rem; border: 1px solid var(--field-border); border-radius: var(--radius);
}
.report-field textarea { min-height: 11rem; resize: vertical; line-height: 1.5; }
.report-field input:focus, .report-field textarea:focus { border-color: var(--link); }

.report-required, .report-optional {
  font-size: .875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  border-radius: 999px; padding: .1rem .45rem; margin-left: .35rem; vertical-align: .1em;
}
.report-required { background: var(--fill-strong); color: #fff; }
.report-optional { background: var(--slate-light); color: var(--ink-muted); }
.report-hint { margin: 0; font-size: .875rem; color: var(--ink-muted); line-height: 1.45; }

.report-upload {
  border: 2px dashed var(--field-border); border-radius: var(--radius); background: var(--wash);
  padding: .9rem 1rem; display: grid; gap: .45rem;
}
.report-upload input[type="file"] { font: inherit; font-size: .92rem; max-width: 100%; }
.report-upload input[type="file"]::file-selector-button {
  font: inherit; font-weight: 600; cursor: pointer; margin-right: .75rem;
  background: var(--paper); color: var(--link); border: 1px solid var(--link);
  border-radius: var(--radius); padding: .4rem .8rem;
}

.report-alert {
  background: #fdf4f4; border: 1px solid #e4bcbe; color: var(--danger);
  border-radius: var(--radius); padding: .75rem 1rem;
}
.report-alert ul { margin: .4rem 0 0; }
.report-actions { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin: 0; }
.report-thanks { max-width: 720px; }

/* ==========================================================================
   Home
   ========================================================================== */
.btn-lg { font-size: 1.02rem; padding: .8rem 1.5rem; }  /* a generous tap target */

.home-hero {
  display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  padding: clamp(.5rem, 3vw, 2rem) 0 2.5rem;
}
.home-eyebrow {
  margin: 0 0 .5rem; font-size: .875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; color: var(--gold-dark);
}
.home-hero h1 { margin: 0 0 1rem; font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.2; }
.home-lede { margin: 0 0 1.75rem; font-size: 1.1rem; color: var(--ink-muted); max-width: 42ch; }
.home-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.home-photo { margin: 0; }
.home-photo img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: calc(var(--radius) * 1.5); box-shadow: var(--shadow);
}
.home-photo figcaption { margin-top: .5rem; font-size: .875rem; color: var(--ink-muted); text-align: right; }
.home-photo figcaption a { color: inherit; }

.home-paths {
  display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  border-top: 1px solid var(--line); padding-top: 2rem;
}
.home-card {
  display: flex; flex-direction: column; gap: .5rem; text-decoration: none; color: var(--ink);
  background: var(--wash); border: 1px solid var(--line); border-top: 4px solid var(--gold);
  border-radius: var(--radius); padding: 1.25rem 1.35rem;
  transition: box-shadow .15s, border-color .15s;
}
.home-card:hover { box-shadow: var(--shadow); border-color: var(--link); border-top-color: var(--gold); }
.home-card h2 { margin: 0; font-size: 1.2rem; }
.home-card p { margin: 0; font-size: .95rem; color: var(--ink-muted); flex: 1; }
.home-card-link { font-weight: 600; color: var(--link); font-size: .95rem; }

@media (max-width: 760px) {
  .home-hero { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .home-card { transition: none; } }
.report-thanks .report-alert, .report-thanks .report-actions { margin-top: 1rem; }

/* ==========================================================================
   Grid sections and footnotes
   ========================================================================== */
.cmp-section-head th {
  background: var(--table-head); border-bottom: 2px solid var(--gold);
  border-top: 1px solid var(--line); padding: .55rem .8rem;
  position: sticky; left: 0; z-index: 3;
}
.cmp-section-title {
  display: block; font-weight: 700; color: var(--table-head-text); font-size: .98rem;
}
.cmp-section-blurb {
  display: block; font-weight: 400; font-size: .875rem; color: var(--table-head-muted);
}
.cmp-section + .cmp-section .cmp-section-head th { border-top: 2px solid var(--line); }
.grid-footnotes {
  margin: 1rem 0 0; padding-left: 1.1rem; font-size: .88rem; color: var(--ink-muted);
  max-width: 80ch;
}
.grid-footnotes strong { color: var(--heading); }

/* ==========================================================================
   Blog
   An article column narrower than the page: prose is read, not scanned, and
   about 70 characters a line is where that stays comfortable.
   ========================================================================== */
.post-full { max-width: 760px; }
.post-meta { margin: 0 0 1.25rem; color: var(--ink-muted); font-size: .9rem; }
.post-hero, .post-closing img {
  display: block; width: 100%; height: auto; border-radius: var(--radius);
  box-shadow: var(--shadow); margin: 0 0 1.75rem;
}
.post-closing { margin: 2rem 0 0; }
.post-closing img { margin-bottom: .6rem; }
.post-closing figcaption { color: var(--ink-muted); font-size: .88rem; line-height: 1.5; }

/* Rendered Markdown. Every element below comes from blog_app/markdown.py. */
.post-prose { line-height: 1.7; }
.post-prose > :first-child { margin-top: 0; }
.post-prose p { margin: 0 0 1.1rem; }
.post-prose h2 { margin: 2rem 0 .75rem; font-size: 1.45rem; }
.post-prose h3 { margin: 1.6rem 0 .6rem; font-size: 1.18rem; }
.post-prose h4 { margin: 1.4rem 0 .5rem; font-size: 1.02rem; }
.post-prose ul, .post-prose ol { margin: 0 0 1.1rem; padding-left: 1.35rem; }
.post-prose li { margin: 0 0 .4rem; }
.post-prose a { color: var(--link); }
.post-prose code {
  font-size: .92em; background: var(--wash); border: 1px solid var(--line-soft);
  border-radius: 4px; padding: .08em .32em;
}
.post-quote {
  margin: 0 0 1.1rem; padding: .35rem 0 .35rem 1.1rem;
  border-left: 3px solid var(--gold); color: var(--ink-muted); font-style: italic;
}
.post-code {
  margin: 0 0 1.1rem; padding: .9rem 1rem; overflow-x: auto;
  background: var(--wash); border: 1px solid var(--line); border-radius: var(--radius);
  font-size: .9rem; line-height: 1.55;
}
.post-code code { background: none; border: 0; padding: 0; }
.post-rule { margin: 2rem 0; border: 0; border-top: 1px solid var(--line); }

/* A table wider than the column scrolls inside itself, not the page. */
.post-table-wrap { overflow-x: auto; margin: 0 0 1.1rem; }
.post-table { border-collapse: collapse; width: 100%; font-size: .95rem; }
.post-table th, .post-table td {
  border: 1px solid var(--line); padding: .5rem .7rem; text-align: left; vertical-align: top;
}
.post-table th { background: var(--table-head); color: var(--table-head-text); }

/* The PDF at the foot. A card, so it reads as an offer rather than a link
   lost in the last paragraph. */
.post-attachment {
  display: flex; gap: .9rem; align-items: center; margin: 2rem 0 0;
  background: var(--wash); border: 1px solid var(--line);
  border-left: 4px solid var(--gold); border-radius: var(--radius);
  padding: .9rem 1.1rem;
}
.post-attachment-icon {
  font-size: .875rem; font-weight: 700; letter-spacing: .06em;
  background: var(--fill-strong); color: #fff;
  border-radius: 4px; padding: .3rem .45rem; flex: none;
}
.post-attachment a { font-weight: 600; color: var(--link); }
.post-attachment p { margin: .15rem 0 0; font-size: .875rem; color: var(--ink-muted); }

/* Index */
.post-list { display: grid; gap: 1.25rem; margin-top: 1.5rem; }
.post-card {
  display: grid; gap: 1.1rem; grid-template-columns: 220px minmax(0, 1fr);
  align-items: start; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.1rem 1.25rem;
}
/* No opening image: the text takes the whole card. */
.post-card:has(> .post-body:first-child) { grid-template-columns: minmax(0, 1fr); }
.post-thumb {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2;
  object-fit: cover; border-radius: var(--radius);
}
.post-card h2 { margin: 0 0 .25rem; font-size: 1.25rem; }
.post-card h2 a { text-decoration: none; }
.post-card .post-meta { margin: 0 0 .5rem; }
.post-card p { margin: 0; color: var(--ink-muted); }
.post-more { margin: .5rem 0 0; padding-left: 1.2rem; }

@media (max-width: 640px) {
  .post-card { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Part D
   The drug panel, the filter row, and the extra marks the Part D grid carries
   that the medical one does not -- a cell there is a price, a cell here is a
   tier plus whatever the plan attached to it.
   ========================================================================== */
.drug-panel {
  background: var(--wash); border: 1px solid var(--line);
  border-left: 4px solid var(--gold); border-radius: var(--radius);
  padding: 1rem 1.15rem; margin: 1.25rem 0;
}
.drug-panel-head h2 { margin: 0 0 .25rem; font-size: 1.15rem; }
.drug-panel .hint { margin: 0 0 .75rem; font-size: .88rem; color: var(--ink-muted); max-width: 70ch; }

.drug-chips { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 .85rem; padding: 0; }
.drug-chips form { display: flex; align-items: center; gap: .4rem; margin: 0;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 999px; padding: .28rem .35rem .28rem .7rem; }
.drug-chip-name { font-weight: 600; font-size: .9rem; }
.drug-chip-kind { font-size: .875rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-muted); }
.drug-chip-remove {
  border: 0; background: var(--line-soft); color: var(--ink); cursor: pointer;
  width: 1.4rem; height: 1.4rem; border-radius: 50%; font-size: 1rem; line-height: 1;
}
.drug-chip-remove:hover { background: var(--danger-text); color: #fff; }
.drug-chips-clear { display: flex; align-items: center; }

.drug-search { margin: 0; position: relative; }
.drug-search > label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }
.drug-search-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.drug-search input[type="search"] {
  font: inherit; font-size: 1rem; flex: 1 1 22rem; min-width: 0;
  padding: .55rem .75rem; border-radius: var(--radius);
  border: 1px solid var(--field-border); background: var(--paper); color: var(--ink);
}
.drug-search .hint { margin: .4rem 0 0; }

/* Suggestions float over the page, so a long list does not push the plans
   down and back up again as it is typed. */
.drug-suggestions {
  position: absolute; z-index: 30; left: 0; right: 0; top: 100%;
  max-height: 22rem; overflow-y: auto; margin-top: .3rem;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.drug-suggestion, .drug-result {
  display: flex; gap: .6rem; align-items: baseline; width: 100%; text-align: left;
  font: inherit; cursor: pointer; padding: .5rem .75rem;
  background: none; border: 0; border-bottom: 1px solid var(--line-soft); color: var(--ink);
}
.drug-suggestion:hover, .drug-result:hover { background: var(--bar-hover); }
.drug-suggestion-empty { margin: 0; padding: .6rem .75rem; color: var(--ink-muted); font-size: .9rem; }
.drug-results { list-style: none; margin: .6rem 0 0; padding: 0;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: var(--paper); }
.drug-results form { margin: 0; }
.drug-result-name { flex: 1; font-size: .92rem; }
.drug-result-kind { font-size: .875rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-muted); }
.drug-result-add { font-weight: 600; color: var(--link); font-size: .875rem; }

.partd-filters {
  display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: end;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .85rem 1rem; margin: 1rem 0;
}
.filter-field { display: grid; gap: .25rem; }
.filter-field label { font-size: .875rem; font-weight: 600; color: var(--heading); }
.filter-field select {
  font: inherit; font-size: .92rem; padding: .4rem .5rem;
  border: 1px solid var(--field-border); border-radius: var(--radius);
  background: var(--paper); color: var(--ink);
}
.filter-checks { border: 0; margin: 0; padding: 0; display: grid; gap: .2rem; }
.filter-checks legend { font-size: .875rem; font-weight: 600; color: var(--heading); padding: 0; }
.filter-checks label { display: flex; align-items: center; gap: .35rem; font-size: .9rem; }
.filter-actions { display: flex; align-items: center; gap: .75rem; margin-left: auto; }

/* The per-drug summary inside a plan card on the list. */
.drug-mini { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .2rem; }
.drug-mini-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; font-size: .9rem; }
.drug-mini-name { font-weight: 600; }
.drug-mini-tier { color: var(--ink-muted); }
.drug-mini-item.is-missing .drug-mini-tier { color: var(--danger-text); font-weight: 600; }
.flag {
  font-size: .875rem; font-weight: 700; letter-spacing: .04em;
  border-radius: 3px; padding: .05rem .3rem; background: var(--slate-light); color: var(--heading);
}
.flag--pa, .flag--st { background: #f6e6c8; color: #6b4e08; }
.tag--good { background: #d9ecd9; color: #1f5c2e; }
.tag--warn { background: #f6e6c8; color: #6b4e08; }
.muted { color: var(--ink-muted); }

/* Part D grid cells carry a tier, then flags, then a note, stacked. */
.partd-grid td { vertical-align: top; }
.partd-grid .cell-text { display: block; font-weight: 600; }
.partd-grid .cell-flag {
  display: inline-block; margin: .25rem .25rem 0 0; font-size: .875rem; font-weight: 600;
  background: #f6e6c8; color: #6b4e08; border-radius: 3px; padding: .08rem .35rem;
}
.partd-grid .cell-note, .partd-grid .cell-yours {
  display: block; margin-top: .25rem; font-size: .875rem; color: var(--ink-muted);
  font-variant-numeric: normal;
}
.partd-grid .cell-yours { color: var(--heading); font-weight: 600; }
.partd-grid td.is-covered { box-shadow: inset 3px 0 0 var(--gold); }
.partd-grid td.is-not-covered .cell-text { color: var(--danger-text); }
.partd-grid td.is-supplemental { box-shadow: inset 3px 0 0 var(--slate); }
/* The out-of-network figure, under the in-network one it qualifies. Small
   and muted: it answers "how much worse is it?", not "what does this cost?" */
/* A chronically-ill benefit filed at $0: offered, not priced. */
.cell-covered { color: var(--good-text); font-weight: 600; white-space: nowrap; }
.cell-check { font-weight: 700; }

.cell-oon {
  display: block; margin-top: .15rem; font-size: .875rem; color: var(--ink-muted);
  font-variant-numeric: normal;
}

.cmp-rowsub {
  display: block; font-size: .875rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-muted); font-weight: 500;
}

@media (max-width: 720px) {
  .partd-filters { flex-direction: column; align-items: stretch; }
  .filter-actions { margin-left: 0; }
}

/* Dark mode: the two hand-mixed amber marks above are mixed for white paper.
   Everything else here is token-driven and needs no restatement. */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .flag--pa,
  :root[data-theme="auto"] .flag--st,
  :root[data-theme="auto"] .tag--warn,
  :root[data-theme="auto"] .partd-grid .cell-flag { background: #4a3a12; color: #f0d9a4; }
  :root[data-theme="auto"] .tag--good { background: #1d3d28; color: #bfe3c6; }
}
:root[data-theme="dark"] .flag--pa,
:root[data-theme="dark"] .flag--st,
:root[data-theme="dark"] .tag--warn,
:root[data-theme="dark"] .partd-grid .cell-flag { background: #4a3a12; color: #f0d9a4; }
:root[data-theme="dark"] .tag--good { background: #1d3d28; color: #bfe3c6; }

/* A generated row -- a shared allowance -- has no drag handle and no remove
   button, because it is not in the layout: it appears because a benefit below
   draws on it. The indent matches the rows that do have a handle, so the
   labels still line up. */
.cmp-row-fixed .cmp-rowlabel { margin-left: 1.1rem; }

/* ==========================================================================
   Multi-select filters on the plan list
   A <details> styled to read as a dropdown. It is a disclosure widget rather
   than a <select multiple> because the list runs to 33 organizations in Los
   Angeles, needs a search box, and has to work without JavaScript.
   ========================================================================== */
.multi-filter { position: relative; font-size: .9rem; }
.multi-filter > summary {
  list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: .4rem;
  padding: .45rem .6rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); white-space: nowrap;
}
.multi-filter > summary::-webkit-details-marker { display: none; }
.multi-filter > summary::after {
  content: "\25be"; color: var(--ink-muted); margin-left: .1rem;
}
.multi-filter[open] > summary { border-color: var(--link); }
.multi-filter-label { color: var(--ink-muted); }
.multi-filter-value { font-weight: 600; color: var(--heading); max-width: 16ch;
  overflow: hidden; text-overflow: ellipsis; }

.multi-filter-body {
  position: absolute; z-index: 30; top: calc(100% + .3rem); left: 0; min-width: 20rem;
  max-width: min(26rem, calc(100vw - 2rem));
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: .7rem .8rem;
  display: grid; gap: .55rem;
}
.multi-filter-search {
  font: inherit; font-size: .9rem; width: 100%; padding: .4rem .55rem;
  border: 1px solid var(--field-border); border-radius: var(--radius);
  background: var(--paper); color: var(--ink);
}
.multi-filter-actions { display: flex; gap: .8rem; margin: .4rem 0 0; }
.multi-filter-list {
  list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem;
  max-height: 16rem; overflow-y: auto;
}
.multi-filter-list label {
  display: flex; align-items: baseline; gap: .45rem; padding: .25rem .2rem;
  border-radius: 4px; cursor: pointer;
}
.multi-filter-list label:hover { background: var(--bar-hover); }
.multi-filter-name { flex: 1; }
.multi-filter-count { color: var(--ink-muted); font-size: .875rem; font-variant-numeric: tabular-nums; }
.multi-filter-empty, .multi-filter-none { color: var(--ink-muted); margin: 0; }
.multi-filter-body .hint { margin: 0; font-size: .875rem; color: var(--ink-muted); }
.multi-filter-body .btn { justify-self: start; }

@media (max-width: 640px) {
  /* No room to float beside anything: fill the page width instead. */
  .multi-filter { position: static; }
  .multi-filter-body { position: static; min-width: 0; max-width: none; }
}
/* A label and its select are one thing: wrapping the row must not leave
   "Star rating" at the end of one line and its menu at the start of the next. */
.sort-field { display: inline-flex; align-items: center; gap: .5rem; }

/* ==========================================================================
   Save and share
   The same frame as "Add a benefit row" -- it sits directly above it -- with a
   gold edge so it does not read as one more list of rows to add. The share
   control used to be a small disclosure off to the right of the heading, where
   nobody found it.
   ========================================================================== */
.save-share { border-left: 4px solid var(--gold); }
.save-share > summary::after {
  content: " \2014  save this layout, or send this comparison to someone";
  font-weight: 400; color: var(--ink-muted); font-size: .88rem;
}
.save-share-body { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
.save-share-col { display: grid; gap: .5rem; align-content: start; }
.save-share .layouts { padding: 0; }
.save-share-title, .save-share .layouts-title {
  font-size: .875rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-muted); margin: 0; font-family: 'Inter', sans-serif;
}
.save-share-col .hint { margin: 0; font-size: .875rem; color: var(--ink-muted); line-height: 1.45; }
.save-share-col > label { font-size: .875rem; font-weight: 600; color: var(--heading); }
.save-share-col input[type="text"] {
  font: inherit; font-size: .93rem; padding: .45rem .6rem; width: 100%;
  border: 1px solid var(--field-border); border-radius: var(--radius);
  background: var(--paper); color: var(--ink);
}
.save-share-col .btn { justify-self: start; }
.share-optin { display: flex; gap: .5rem; align-items: flex-start; font-size: .9rem; }
.share-optin input { margin-top: .2rem; }
.share-optin .field-note { display: block; font-size: .875rem; color: var(--ink-muted); }
.share-result { display: grid; gap: .35rem; }
.share-error { margin: 0; color: var(--danger-text); font-size: .88rem; }

@media (max-width: 640px) {
  /* The explanatory tail would wrap the summary onto three lines. */
  .save-share > summary::after { content: ""; }
}

/* My Settings: the grid-pin checkbox, under plans per page. */
.settings-pin-form { margin-top: 1.1rem; display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; }

/* The name RxNorm and CMS file, under the name on the box (issue #89). */
.drug-result-filed {
  display: block; font-size: .8125rem; color: var(--ink-muted); line-height: 1.35;
}

/* A second line under a card figure: the Part B giveback, the
   out-of-network limit. Smaller than the figure, not smaller than 14px. */
.metric-sub { font-size: .875rem; color: var(--ink-muted); margin-top: .1rem; }

/* Who a special-needs plan is for, and which conditions it takes. */
.plan-eligibility { margin: .35rem 0 0; font-size: .875rem; color: var(--ink-muted); }
.tag--condition { background: var(--slate-light); color: var(--heading); }

/* A note under a grid section heading: Extra Help on a D-SNP comparison. */
.cmp-section-note {
  display: block; margin-top: .2rem; font-size: .875rem; font-weight: 600;
  color: var(--heading);
}