/* ==========================================================================
   MedSys — site chrome (2026-08 redesign, concept A)
   Loaded on every page from inc/head.php, after core.css and before
   theme-fixes.css, so it can restyle the masthead without touching core.

   Three things live here and nothing else:
     1. The topic hue system — one colour per topic, light and dark pairs.
        Applied wherever a thing belongs to a topic: home cards, palette
        result bars. Never used for meaning; the evidence-grade colours in
        tokens.css keep that job.
     2. The masthead search launcher and the command palette.
     3. The redesigned homepage bands.

   Everything else colours through tokens.css, so dark mode costs nothing.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Topic hues. The class goes on the card / bar / chip; --tcol cascades.
   Dark values are lifted well clear of the greys — same principle as the
   ink ramp: nothing washed out on a dark ground.
   -------------------------------------------------------------------------- */
.th-heart        { --tcol:#c04a2b; --tcol-bg:#f6e3db }
.th-eating       { --tcol:#3e7a1f; --tcol-bg:#e6efdc }
.th-safety       { --tcol:#9a6a10; --tcol-bg:#f6eeda }
.th-fibromyalgia { --tcol:#5d51b8; --tcol-bg:#e9e7f8 }
.th-health-checks{ --tcol:#2b62a8; --tcol-bg:#e3edf8 }
.th-longevity    { --tcol:#0f7a5c; --tcol-bg:#ddf1ea }
.th-emergency    { --tcol:#b3271e; --tcol-bg:#f8e5e3 }
.th-vaping       { --tcol:#5a636d; --tcol-bg:#ebedef }
/* Brain and eyes, added round 115. Both topics shipped without a hue, so their
 * cards on the index rendered with no colour bar while the other eight had one
 * — the tell that a topic had been registered everywhere except here.
 *
 * Plum sits about 77 degrees from its nearest neighbour, which is comfortable.
 * Cyan is tighter: 20 degrees from vaping and 29 from longevity. It works
 * because vaping is desaturated grey and longevity is clearly green, so the
 * three read differently even though the hue angles are close.
 *
 * Worth knowing before an eleventh topic: at ten, the wheel is crowded. The
 * remaining gaps are narrow and the next one should not simply be squeezed in
 * between two existing hues — better to accept that beyond about ten, colour
 * stops being the thing doing the work and the label carries it. */
.th-brain        { --tcol:#9c3d76; --tcol-bg:#f5e3ee }
.th-eyes         { --tcol:#0e6d86; --tcol-bg:#dcedf2 }
[data-theme="dark"] .th-heart        { --tcol:#ffab8f; --tcol-bg:#38180f }
[data-theme="dark"] .th-eating       { --tcol:#a5d878; --tcol-bg:#1c2a10 }
[data-theme="dark"] .th-safety       { --tcol:#f0c46a; --tcol-bg:#2d2308 }
[data-theme="dark"] .th-fibromyalgia { --tcol:#b9b0f2; --tcol-bg:#221f3d }
[data-theme="dark"] .th-health-checks{ --tcol:#9ec3f2; --tcol-bg:#14273d }
[data-theme="dark"] .th-longevity    { --tcol:#6fd9b4; --tcol-bg:#0e2b21 }
[data-theme="dark"] .th-emergency    { --tcol:#ff9d94; --tcol-bg:#3a1310 }
[data-theme="dark"] .th-vaping       { --tcol:#c2ccd6; --tcol-bg:#242a30 }
[data-theme="dark"] .th-brain        { --tcol:#f0a3cf; --tcol-bg:#331428 }
[data-theme="dark"] .th-eyes         { --tcol:#7ed2e8; --tcol-bg:#0c2830 }

/* --------------------------------------------------------------------------
   2a. Masthead. Markup keeps .mast / .mast-in / .mark / .mnav so core.css and
   mobile.css keep doing their jobs; this adds the launcher and the pills.
   -------------------------------------------------------------------------- */
.cmd-launch{flex:1;max-width:560px;display:flex;align-items:center;gap:10px;
  background:var(--surface-2);border:1px solid var(--line-2);
  border-radius:999px;padding:9px 16px;font:14px var(--f-ui);
  color:var(--ink-4);cursor:text;text-align:left;min-height:38px}
.cmd-launch:hover{border-color:var(--ultra)}
.cmd-launch svg{flex:none;color:var(--ink-4)}
.cmd-launch .kbd{margin-left:auto;font-family:var(--f-data);font-size:14px;
  border:1px solid var(--line-2);border-bottom-width:2px;border-radius:4px;
  padding:1px 7px;color:var(--ink-3);background:var(--surface)}
.mnav .m-emg{display:inline-flex;align-items:center;gap:7px;
  background:var(--hi-bg);border:1px solid var(--line);color:var(--hi);
  border-radius:999px;padding:6px 13px;font:600 13px var(--f-ui);
  text-decoration:none}
.mnav .m-emg:hover{border-color:var(--hi);color:var(--hi)}
.mnav .theme{border-radius:999px}
@media (max-width:760px){
  .cmd-launch{order:3;flex-basis:100%;max-width:none;margin:0 0 12px;
    min-height:44px;font-size:16px}
  .cmd-launch .kbd{display:none}
}

/* --------------------------------------------------------------------------
   2b. Command palette. One dialog, three states: quick access when empty,
   grouped results while typing, nothing-matched. Emergencies pin first.
   -------------------------------------------------------------------------- */
.pal-veil{position:fixed;inset:0;background:rgba(10,12,15,.55);z-index:80;
  display:none}
.pal-veil.open{display:flex;align-items:flex-start;justify-content:center;
  padding:7vh 16px 16px}
.pal{width:100%;max-width:680px;background:var(--surface);
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-lg);
  display:flex;flex-direction:column;max-height:82vh}
.pal-in{display:flex;align-items:center;gap:10px;padding:14px 16px;
  border-bottom:1px solid var(--line)}
.pal-in svg{flex:none;color:var(--ink-4)}
.pal-q{flex:1;border:0;background:none;font:16px var(--f-ui);
  color:var(--ink);outline:none;min-width:0}
.pal-q::placeholder{color:var(--ink-4)}
.pal-close{border:0;background:none;color:var(--ink-4);cursor:pointer;
  font:14px var(--f-data);padding:4px}
/* The topic filters.
 *
 * This shipped as a single nowrap strip with overflow-x:auto AND
 * scrollbar-width:none, which is the worst of both: on a desktop pointer
 * there is no scrollbar to drag and a vertical wheel does nothing, so the
 * chips past the right edge were unreachable rather than merely off-screen.
 * A filter nobody can reach is a filter nobody uses.
 *
 * There is room for all of them above 560px, so they wrap and the problem
 * disappears. Below that they scroll, following the pattern that already
 * works elsewhere on this site (legacy-heart.css:75) — a THIN scrollbar
 * rather than none, plus momentum scrolling on iOS. */
.pal-filters{display:flex;flex-wrap:wrap;gap:7px;padding:10px 14px;
  border-bottom:1px solid var(--line);min-width:0}
@media (max-width:560px){
  .pal-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;
    -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  .pal-f{scroll-snap-align:start}
}
.pal-f{flex:none;border:1px solid var(--line-2);background:var(--surface-2);
  border-radius:999px;padding:5px 13px;font:14px var(--f-ui);
  color:var(--ink-3);cursor:pointer;min-height:30px}
.pal-f[aria-pressed="true"]{background:var(--ultra);border-color:var(--ultra);
  color:var(--on-fill)}
.pal-f.f-emg[aria-pressed="true"]{background:var(--hi);border-color:var(--hi)}
.pal-out{overflow-y:auto;overscroll-behavior:contain;padding:6px 0 10px}
.pal-g{font-family:var(--f-data);font-size:14px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-4);padding:12px 18px 5px;margin:0}
.pal-g.pal-g-emg{color:var(--hi)}
.pal-hit{display:flex;gap:12px;align-items:center;padding:10px 18px;
  text-decoration:none;color:var(--ink);min-height:44px;box-sizing:border-box}
.pal-hit:hover,.pal-hit.sel{background:var(--ultra-pale);text-decoration:none}
.pal-hit .bar{flex:none;width:3px;height:16px;border-radius:2px;
  background:var(--tcol,var(--ultra))}
.pal-hit-t{font:500 14.5px var(--f-ui)}
.pal-hit-t em{font-style:normal;color:var(--ink-4);font-weight:400}
.pal-hit-m{display:block;font:14px var(--f-ui);color:var(--ink-4);
  margin-top:1px}
.pal-none,.pal-more{font:14px var(--f-data);color:var(--ink-4);
  padding:14px 18px;margin:0}
.pal-foot{border-top:1px solid var(--line);padding:9px 16px;display:flex;
  gap:16px;font:14px var(--f-ui);color:var(--ink-4);flex-wrap:wrap}
.pal-foot .kbd{font-family:var(--f-data);font-size:14px;
  border:1px solid var(--line-2);border-bottom-width:2px;border-radius:4px;
  padding:0 5px;background:var(--surface)}
@media (max-width:560px){
  .pal-veil.open{padding:3vh 8px 8px}
  .pal{max-height:90vh}
  .pal-foot span:not(:last-child){display:none}
}

/* --------------------------------------------------------------------------
   3. Homepage bands.
   -------------------------------------------------------------------------- */
.home-hero{padding:44px 0 8px}
.home-hero h1{font-size:clamp(27px,4vw,38px);margin:0 0 12px;font-weight:600}

.emg-band{margin:30px 0 6px;background:var(--hi-bg);
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px 18px 14px}
.emg-band-h{display:flex;align-items:baseline;gap:12px;margin:0 0 12px;
  flex-wrap:wrap}
.emg-band-h h2{font:600 15px var(--f-ui);margin:0;color:var(--hi);
  letter-spacing:.02em}
.emg-band-h .d{font-family:var(--f-data);font-size:14px;color:var(--hi)}
.emg-band-h a{margin-left:auto;font:600 13px var(--f-ui);color:var(--hi)}
.emg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:9px}
.emg-tile{display:block;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:11px 13px;text-decoration:none;
  font:600 14.5px var(--f-ui);color:var(--hi);min-height:44px;
  box-sizing:border-box}
.emg-tile small{display:block;font-weight:400;font-size:14px;
  color:var(--ink-3);margin-top:2px}
.emg-tile:hover{border-color:var(--hi);text-decoration:none}

.home-sec{display:flex;align-items:baseline;gap:14px;margin:38px 0 16px;
  flex-wrap:wrap}
.home-sec h2{font-size:21px;margin:0}
.home-sec .meta{font-family:var(--f-data);font-size:14px;color:var(--ink-4)}
.home-sec a.more{margin-left:auto;font:14px var(--f-ui)}

.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:14px}
.tcard{background:var(--surface);border:1px solid var(--line);
  border-top:3px solid var(--tcol);border-radius:0 0 var(--r-lg) var(--r-lg);
  padding:16px 18px 14px;display:flex;flex-direction:column;gap:8px}
.tcard h3{margin:0;font-size:17.5px}
.tcard h3 a{color:var(--ink);text-decoration:none}
.tcard h3 a:hover{color:var(--tcol)}
.tcard > p{margin:0;font-size:14.5px;color:var(--ink-3);line-height:1.55;
  flex:1;font-family:var(--f-read)}
.tcard .meta{font-family:var(--f-data);font-size:14px;color:var(--ink-4)}
.tcard .levels{padding:0;margin:0}

.home-tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:9px}
.home-tool{display:block;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:11px 14px;text-decoration:none;
  min-height:44px;box-sizing:border-box}
.home-tool:hover{border-color:var(--ultra);text-decoration:none}
.home-tool .k{display:block;font-family:var(--f-data);font-size:14px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-4)}
.home-tool .t{font:500 14px var(--f-ui);color:var(--ink-2)}

.home-clin{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:18px 20px}
.home-clin p{font-size:14px;color:var(--ink-3);margin:14px 0 0;
  line-height:1.65;font-family:var(--f-ui)}

.home-grades{display:flex;flex-wrap:wrap;gap:9px;list-style:none;
  margin:0;padding:0}
.home-grades li{display:inline-flex;align-items:center;gap:9px;
  font:14px var(--f-ui);color:var(--ink-2);border:1px solid var(--line);
  background:var(--surface);border-radius:999px;padding:7px 14px}

@media print{.cmd-launch,.pal-veil{display:none}}