/* PharmEasy design tokens for Fever Watch, extracted from the PharmEasy Figma
   system (Order Medicine web + Med PDP SEO). Shared by the mobile and desktop
   prototypes so both flows speak the real product's design language. */
/* Self-hosted Inter (latin woff2 subset) - no render-blocking Google Fonts request.
   Paths are relative to dist/assets/css/ (where this file is copied at build); the SSG
   preloads the 600 + 700 weights. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/inter-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/inter-latin-800-normal.woff2') format('woff2'); }

:root {
  /* Brand greens */
  --pe-green: #10847E;        /* G600 "Porcelain Green" (primary) */
  --pe-green-dark: #0A534F;   /* G1000 */
  --pe-green-bright: #15ACA5; /* G400 */
  --pe-green-100: #CEEAE8;    /* tint */

  /* Accents / semantic */
  --pe-gold: #EFD06C;         /* Y400 "Plus" accent */
  --pe-blue: #3661B0;         /* B800 diagnostics / labs */
  --pe-blue-100: #B5CDF7;
  --pe-red: #F47779;          /* R600 error / HIGH */
  --pe-success: #62BF9F;      /* M600 / LOW */

  /* Neutrals */
  --pe-ink: #30363C;          /* N800 */
  --pe-ink-2: #4F585E;        /* N600 */
  --pe-muted: #6E787E;        /* N400 */
  --pe-muted-2: #8897A2;      /* N200 */
  --pe-line: #D7DFE5;         /* N100 */
  --pe-bg: #F5F8FC;           /* N10 */
  --pe-bg-2: #EDF2F9;         /* N20 */
  --pe-white: #FFFFFF;

  /* Risk ramp (the locked brand ramp; matches the JS RISK map and the SSG baked HTML) */
  --risk-low: #2FA66F;
  --risk-lowmod: #C7A93C;
  --risk-mod: #E8923A;
  --risk-high: #E4572E;

  /* Signal colors */
  --sig-weather: #15ACA5;     /* teal */
  --sig-search: #7C6CD6;      /* violet */
  --sig-lab: #3661B0;         /* diagnostics blue */

  /* Per-disease IDENTITY colors (dial segments + legend + breakdown dots; mobile first-fold redesign).
     Kept in sync with the DISEASE maps in assets/js/mobile.js and src/build_site.py. */
  --dis-dengue: #F1839D;
  --dis-malaria: #887ADE;
  --dis-chikungunya: #46CFE7;
  --dis-typhoid: #4681EF;

  /* Shape & elevation (Figma: Elevation 12 DP) */
  --radius: 16px;
  --radius-sm: 12px;
  --radius-lg: 20px;
  --pill: 999px;
  --shadow: 0 5px 5px rgba(0,0,0,.08), 0 3px 14px rgba(0,0,0,.04), 0 8px 10px rgba(0,0,0,.06);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--font); color: var(--pe-ink); background: var(--pe-bg); -webkit-font-smoothing: antialiased; }
button, input, select { font-family: inherit; }
a { color: var(--pe-green); text-decoration: none; }
img, svg { max-width: 100%; }

/* Baked full-content SSR (crawler / no-JS). Hidden for JS users via the page boot style;
   the flow CSS re-styles .fw-fallback h1/h2/p per device, so this only needs to cover the
   richer elements (hero, tables, reads grid, CTA) and give a clean no-JS read. */
.fw-fallback { max-width: 880px; margin: 0 auto; padding: 22px 18px 44px; }
.fw-fallback h1 { font-size: 26px; line-height: 1.26; margin: 6px 0 10px; }
.fw-fallback h2 { font-size: 18px; margin: 28px 0 8px; }
.fw-fallback h3 { font-size: 14.5px; margin: 16px 0 5px; color: var(--pe-ink); }
.fw-fallback p, .fw-fallback li { font-size: 14px; color: var(--pe-ink-2); line-height: 1.6; }
.fw-fallback .lede { font-size: 15px; color: var(--pe-ink-2); }
.fw-fallback .microcopy { font-size: 12.5px; color: var(--pe-muted-2); }
.fw-fallback .fw-search { display: inline-block; border: 1px solid var(--pe-line); border-radius: 12px; padding: 12px 18px; color: var(--pe-muted); margin: 8px 0 2px; }
.fw-fallback section { border-top: 1px solid var(--pe-bg-2); padding-top: 4px; margin-top: 18px; }
.fw-fallback ul { padding-left: 20px; margin: 8px 0; }
.fw-fallback .fw-scores, .fw-fallback .fw-actions { list-style: none; padding-left: 0; }
.fw-table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 13px; }
.fw-table th, .fw-table td { border: 1px solid var(--pe-bg-2); padding: 7px 10px; text-align: left; }
.fw-table thead th { background: var(--pe-bg); font-weight: 700; }
.fw-reads { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.fw-reads ul { list-style: none; padding: 0; }
.fw-cta { display: inline-block; background: var(--pe-green); color: #fff; padding: 12px 22px; border-radius: 10px; font-weight: 700; }
.fw-disc { font-size: 12px; color: var(--pe-muted-2); margin-top: 26px; }
.fw-fallback details { border-top: 1px solid var(--pe-bg-2); padding: 8px 0; }
.fw-fallback summary { font-weight: 600; cursor: pointer; }

/* FAQ accordion (brand-recreated from the design handoff). Shared by the baked SSR FAQ and both JS
   flows. Native <details> so it works with no JS and for crawlers; first two open; chevron tile flips. */
.faq-list { display: flex; flex-direction: column; gap: 12px; margin: 14px 0 4px; }
.faq-list .faqitem { background: #fff; border: 1px solid var(--pe-line); border-radius: 14px; overflow: hidden; padding: 0; }
.faq-list .faqitem[open] { border-color: #CFE3E0; box-shadow: 0 4px 16px rgba(16,132,126,0.07); }
.faq-list .faqitem > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 15px 18px; }
.faq-list .faqitem > summary::-webkit-details-marker { display: none; }
.faq-list .faqitem > summary::after { content: none; }
.faq-list .faq-q { flex: 1; font-size: 15.5px; font-weight: 700; color: var(--pe-ink); line-height: 1.35; }
.faq-list .faq-chev { width: 28px; height: 28px; border-radius: 8px; background: #F1F5F4; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.faq-list .faq-chev::after { content: ""; width: 7px; height: 7px; border-right: 2.4px solid var(--pe-muted); border-bottom: 2.4px solid var(--pe-muted); transform: rotate(45deg); margin-top: -3px; transition: transform .15s ease; }
.faq-list .faqitem[open] .faq-chev { background: #E9F4F2; }
.faq-list .faqitem[open] .faq-chev::after { border-color: var(--pe-green); transform: rotate(-135deg); margin-top: 3px; }
.faq-list .faq-a { padding: 0 18px 16px; font-size: 13.5px; line-height: 1.62; color: var(--pe-ink-2); }

/* "This monsoon vs last year" season-trend module (brand-recreated from the design brief
   docs/season-trend-module-brief.md). Shared by the static SSR (build_site.py _trend_html) and the
   interactive widget (assets/js/trend.js), on both flows. Words-first, one chart at a time, last
   year = soft gray band, this year = one bold line, a light y-axis (0 / mid / top ticks) + spaced data
   labels. Lives inside a .card. */
/* Mobile keeps the eyebrow + title INSIDE the card (.fwtrend-head); desktop + the SSR put the title /
   subtitle OUTSIDE the card (.fwtrend-sectop), matching the other page sections. */
.fwtrend-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fwtrend-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--pe-green); }
.fwtrend-title { font-size: 18px; font-weight: 800; color: var(--pe-ink); margin: 2px 0 0; line-height: 1.25; }
.fwtrend-sectop { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.fwtrend-sectop .secsub { margin-bottom: 14px; }
.fwtrend-toggle { border: 1px solid var(--pe-line); background: #fff; color: var(--pe-ink-2); font-size: 12.5px; font-weight: 600; border-radius: var(--pill); padding: 6px 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; flex-shrink: 0; }
.fwtrend-toggle .chev { width: 7px; height: 7px; border-right: 2.2px solid var(--pe-muted); border-bottom: 2.2px solid var(--pe-muted); transform: rotate(45deg); transition: transform .15s ease; margin-top: -2px; }
.fwtrend-toggle[aria-expanded="true"] .chev { transform: rotate(-135deg); margin-top: 2px; }

.fwtrend-verdict { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 12px 0 6px; }
.fwtrend-vicon { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; flex-shrink: 0; }
.fwtrend-vicon svg { width: 14px; height: 14px; }
.fwtrend-vicon.below { background: var(--risk-low); }
.fwtrend-vicon.above { background: var(--risk-high); }
.fwtrend-vicon.inline { background: var(--pe-muted); }

/* Figma "+16% higher than last year" pill: tone-tinted rounded bar, icon circle + bold delta + phrase. */
.fwtrend-pill { display: inline-flex; align-items: center; gap: 9px; margin: 12px 0 8px; padding: 8px 14px 8px 9px; border-radius: var(--pill); font-size: 14px; color: var(--pe-ink); line-height: 1.3; }
.fwtrend-pill b { font-weight: 800; }
.fwtrend-pill.above { background: #FCEBE4; }
.fwtrend-pill.above b { color: var(--risk-high); }
.fwtrend-pill.below { background: #E4F4EC; }
.fwtrend-pill.below b { color: var(--risk-low); }
.fwtrend-pill.inline { background: var(--pe-bg-2); }
.fwtrend-pill .fwtrend-vicon.above, .fwtrend-pill.above .fwtrend-vicon { background: var(--risk-high); }
.fwtrend-pill.below .fwtrend-vicon { background: var(--risk-low); }
.fwtrend-pill.inline .fwtrend-vicon { background: var(--pe-muted); }
.fwtrend-vtext { font-size: 16px; font-weight: 700; color: var(--pe-ink); line-height: 1.3; }
.fwtrend-chip { font-size: 12.5px; font-weight: 800; padding: 3px 10px; border-radius: var(--pill); }
.fwtrend-chip.below { color: var(--risk-low); background: #E4F4EC; }
.fwtrend-chip.above { color: var(--risk-high); background: #FCEBE4; }
.fwtrend-chip.inline { color: var(--pe-muted); background: var(--pe-bg-2); }
.fwtrend-context { font-size: 13px; color: var(--pe-muted); margin: 0; }

.fwtrend:not(.open) .fwtrend-body { display: none; }
.fwtrend-body { margin-top: 14px; }
.fwtrend-tabs { display: inline-flex; gap: 4px; background: var(--pe-bg-2); padding: 4px; border-radius: var(--pill); margin: 0 0 10px; flex-wrap: wrap; }
.fwtrend-tab { border: 0; background: transparent; color: var(--pe-ink-2); font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: var(--pill); cursor: pointer; line-height: 1; }
.fwtrend-tab.on { background: #fff; color: var(--pe-green); box-shadow: var(--shadow-sm); }
.fwtrend-tab.soon { color: var(--pe-muted-2); cursor: default; }
.fwtrend-tab i { font-style: normal; font-size: 9.5px; opacity: .7; vertical-align: middle; }
/* Mobile: the four season-trend tabs (Overall / Weather / Searches / Labs) overflow ~375px wide at the
   default 14px side padding and wrap the Labs tab onto a second row; tighten the side padding on the
   mobile flow so all four stay on one line. Desktop (wide trend card) keeps the roomier 14px. */
@media (max-width: 819px), (pointer: coarse) { .fwtrend-tab { padding: 7px 10px; } }

.fwtrend-chartwrap { position: relative; margin: 2px 0 0; }
.fwtrend-svg { width: 100%; height: auto; display: block; touch-action: pan-y; }
.fwtrend-svg text { font-family: inherit; }
/* Month axis labels: HTML (not SVG text) so they're equidistant + a fixed size at any chart width. The
   left inset (7.65% = PADL 26/340) and right inset (3.5% = PADR 12/340) match the SVG plot padding, so
   Jun aligns to the plot's left edge (past the y-axis gutter) and Oct to the right. */
.fwtrend-months { display: flex; justify-content: space-between; padding: 2px 3.5% 0 7.65%; font-size: 11px; font-weight: 500; color: var(--pe-muted-2); }
.fwtrend-tip { position: absolute; transform: translate(-50%, -100%); background: #1f2937; color: #fff; font-size: 11.5px; line-height: 1.5; padding: 7px 10px; border-radius: 9px; box-shadow: 0 6px 18px rgba(0,0,0,.18); pointer-events: none; white-space: nowrap; z-index: 5; }
.fwtrend-tip[hidden] { display: none; }
.fwtrend-tip b { display: block; font-size: 10.5px; opacity: .8; font-weight: 700; margin-bottom: 4px; }
.fwtrend-tip span { display: flex; align-items: center; gap: 6px; }
.fwtrend-tip i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.fwtrend-tip::after { content: ""; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #1f2937; }

.fwtrend-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--pe-muted); margin: 6px 2px 0; }
.fwtrend-legend span { display: inline-flex; align-items: center; gap: 7px; }
.fwtrend-legend i { display: inline-block; width: 16px; height: 3px; border-radius: 2px; background: #aab6c6; }
.fwtrend-legend .here i.dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 2px #fff; }
.fwtrend-caption { font-size: 13.5px; font-weight: 600; color: var(--pe-ink-2); margin: 10px 2px 0; }
.fwtrend-axiscap { font-size: 11.5px; color: var(--pe-muted-2); margin: 7px 2px 0; }
/* Legal "daily updated dashboard / data inputs" note, at the END of the methodology body. */
.dashnote { font-size: 12.5px; color: var(--pe-muted); line-height: 1.55; margin: 16px 0 2px; }
.fwtrend-sources { font-size: 11px; color: var(--pe-muted-2); margin: 8px 2px 0; }

.fwtrend-soon { text-align: center; padding: 30px 16px; color: var(--pe-muted); }
.fwtrend-soon .i { font-size: 26px; display: block; margin-bottom: 8px; }
.fwtrend-soon b { display: block; color: var(--pe-ink); font-size: 15px; margin-bottom: 4px; }
.fwtrend-soon p { font-size: 12.5px; max-width: 320px; margin: 0 auto; line-height: 1.55; }

/* Desktop small-multiples: the three signal sparklines, click to make one the hero (mode='desktop'). */
.fwtrend-smalls { margin-top: 16px; border-top: 1px solid var(--pe-bg-2); padding-top: 12px; }
.fwtrend-smalls-h { font-size: 11px; font-weight: 700; color: var(--pe-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.fwtrend-smalls-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fwtrend-smini { border: 1px solid var(--pe-line); background: #fff; border-radius: 12px; padding: 8px 10px 5px; cursor: pointer; text-align: left; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; transition: border-color .12s ease, box-shadow .12s ease; }
.fwtrend-smini:hover { border-color: #CFE3E0; }
.fwtrend-smini.on { border-color: var(--pe-green); box-shadow: 0 2px 10px rgba(16,132,126,.1); }
.fwtrend-smini .t { font-size: 12px; font-weight: 700; color: var(--pe-ink-2); display: block; margin-bottom: 3px; }
.fwtrend-smini .fwtrend-svg.mini { height: auto; }
.fwtrend-smini-soon { min-height: 56px; display: flex; align-items: center; justify-content: center; color: var(--pe-muted-2); font-size: 11px; }

/* Loading skeleton for the season-trend card while the archive slice for a city is still fetching. It
   reuses the real card's structure (so the box model - and therefore the height - is identical), and only
   the data-dependent text becomes a shimmer bar. The chart area is an empty SVG with the same viewBox, so
   the skeleton -> real swap shifts nothing (CLS 0). Honours reduced-motion. */
.fwtrend-skelbar { display: inline-block; height: .9em; min-width: 40px; border-radius: 6px; vertical-align: middle; background: var(--pe-bg-2); animation: fwtrend-skelpulse 1.5s ease-in-out infinite; }
.fwtrend-skelsvg { display: block; width: 100%; height: auto; animation: fwtrend-skelpulse 1.5s ease-in-out infinite; }
.fwtrend-skelvicon { background: #cfd8e3 !important; animation: fwtrend-skelpulse 1.5s ease-in-out infinite; }
.fwtrend--skel .fwtrend-pill { background: var(--pe-bg-2); }
.fwtrend--skel .fwtrend-toggle { opacity: .55; cursor: default; }
@keyframes fwtrend-skelpulse { 0%, 100% { opacity: .55; } 50% { opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .fwtrend-skelbar, .fwtrend-skelsvg, .fwtrend-skelvicon { animation: none; } }

/* Risk beacon: a pulsing alert light next to the band label. Colour = band (--c),
   pulse speed = urgency (--bdur, faster when higher). Honours reduced-motion. */
.beacon { position: relative; display: inline-block; width: 13px; height: 13px; vertical-align: middle; margin-right: 9px; }
.beacon i { position: absolute; inset: 0; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px var(--c); animation: fw-bpulse var(--bdur, 1.4s) ease-in-out infinite; }
.beacon i::before, .beacon i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--c); animation: fw-bping var(--bdur, 1.4s) cubic-bezier(0, 0, .2, 1) infinite; }
.beacon i::after { animation-delay: calc(var(--bdur, 1.4s) / 2); }
@keyframes fw-bping { 0% { transform: scale(1); opacity: .6; } 80%, 100% { transform: scale(2.8); opacity: 0; } }
@keyframes fw-bpulse { 0%, 100% { transform: scale(.82); filter: brightness(.9); } 50% { transform: scale(1); filter: brightness(1.25); } }
@media (prefers-reduced-motion: reduce) { .beacon i, .beacon i::before, .beacon i::after { animation: none; } }

/* ============================================================================
   "How we calculate the score" methodology widget (Direction B: layers + live ledger).
   Ported from prototypes/method-section-final.html. EVERY class is namespaced .mthd-*
   so it can never collide with the global disease-breakdown accordion (.acc/.acchead)
   nor the bare global .card / .fill / .track. Behaviour lives in assets/js/method.js
   (popovers / accordion / score-builder + dial); the markup twins are build_site.py
   METHOD_HTML (crawlable text, NOT this widget) and the METHOD constants in
   assets/js/mobile.js + assets/js/desktop.js (this widget). The popover DOM (.mthd-pop*)
   is created by method.js and body-appended, so those rules stay UNPREFIXED. Titles use
   <p>/<div> (not <h3>/<h4>) to dodge the .methbody h3 host styling. No em/en dashes. */
.mthd { color: var(--pe-ink); line-height: 1.55; font-size: 14px; }
.mthd-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--pe-green); margin: 0 0 4px; }
.mthd-title { font-size: 21px; font-weight: 800; letter-spacing: -.3px; margin: 0 0 6px; color: var(--pe-ink); }
.mthd-lead { font-size: 14.5px; color: var(--pe-ink-2); margin: 0 0 16px; }
.mthd-intro { background: #fff; border: 1px solid var(--pe-line); border-radius: var(--radius); padding: 14px 16px; margin: 0 0 16px; box-shadow: var(--shadow-sm); font-size: 13.5px; color: var(--pe-ink-2); }
.mthd-intro b { color: var(--pe-ink); }

.mthd-step3 { display: flex; gap: 8px; margin-top: 11px; flex-wrap: wrap; }
.mthd-step3 .s { flex: 1 1 0; min-width: 96px; display: flex; align-items: center; gap: 8px; background: var(--pe-bg); border: 1px solid var(--pe-line); border-radius: 10px; padding: 8px 10px; font-size: 12px; font-weight: 700; color: var(--pe-ink-2); }
.mthd-step3 .s .ic { width: 24px; height: 24px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: #fff; border: 1px solid var(--pe-line); }
.mthd-step3 .s .ic svg { width: 14px; height: 14px; }
.mthd-step3 .arr { align-self: center; color: var(--pe-muted-2); font-weight: 800; flex: 0 0 auto; }

.mthd-mkleg { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--pe-muted); margin: 11px 0 0; }
.mthd-mkleg .it { display: inline-flex; align-items: center; gap: 7px; }

/* the two unmistakable markers: a "Source" chip (published science) + an "Our setting" tag (our choice) */
/* "our assumption" marker: a dotted-underline glossary term (no pill), tappable -> popover via method.js */
.mthd-ourset { font-weight: 700; color: var(--pe-ink-2); border-bottom: 1.5px dotted var(--pe-muted-2); cursor: pointer; padding-bottom: 1px; line-height: 1.3; }
.mthd-ourset:hover, .mthd-ourset:focus-visible { color: var(--pe-ink); border-bottom-color: var(--pe-muted); outline: none; }
.mthd-src { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; color: var(--pe-green); background: #E9F4F2; border: 1px solid #CEEAE8; border-radius: var(--pill); padding: 2px 10px; cursor: pointer; line-height: 1.3; vertical-align: middle; }
.mthd-src svg { width: 11px; height: 11px; }
.mthd-src:hover, .mthd-src:focus-visible { background: #DBEEEB; outline: none; }

.mthd-card { background: #fff; border: 1px solid var(--pe-line); border-radius: var(--radius); box-shadow: var(--shadow-sm); margin: 0 0 14px; overflow: hidden; }
.mthd-ch { font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--pe-muted); }

/* accordion signal stack (the Direction-B core) */
.mthd-acc { border-radius: var(--radius); }
.mthd-accitem { border: 1px solid var(--pe-line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); margin: 0 0 12px; overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease; }
.mthd-accitem.open { border-color: #CFE3E0; box-shadow: 0 4px 18px rgba(16,132,126,.08); }
.mthd-acchead { display: flex; align-items: center; gap: 13px; padding: 14px 15px; cursor: pointer; width: 100%; border: none; background: none; text-align: left; font-family: inherit; }
.mthd-acchead .badge { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--pe-bg-2); }
.mthd-acchead .badge svg { width: 20px; height: 20px; }
.mthd-accitem[data-sig="weather"] .badge { background: #E3F6F4; color: var(--sig-weather); }
.mthd-accitem[data-sig="search"] .badge { background: #EFEDFB; color: var(--sig-search); }
.mthd-accitem[data-sig="lab"] .badge { background: #E7EEFA; color: var(--sig-lab); }
.mthd-acchead .tt { flex: 1; min-width: 0; }
.mthd-acchead .nm { font-weight: 800; font-size: 15.5px; display: flex; align-items: center; gap: 8px; color: var(--pe-ink); }
.mthd-acchead .role { font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: var(--pill); color: #fff; }
.mthd-accitem[data-sig="weather"] .role { background: var(--sig-weather); }
.mthd-accitem[data-sig="search"] .role { background: var(--sig-search); }
.mthd-accitem[data-sig="lab"] .role { background: var(--sig-lab); }
.mthd-acchead .ds { font-size: 13px; color: var(--pe-muted); margin-top: 1px; font-weight: 400; }
.mthd-acchead .wt { font-size: 18px; font-weight: 800; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.mthd-accitem[data-sig="weather"] .wt { color: var(--sig-weather); }
.mthd-accitem[data-sig="search"] .wt { color: var(--sig-search); }
.mthd-accitem[data-sig="lab"] .wt { color: var(--sig-lab); }
.mthd-acchead .wl { font-size: 9.5px; color: var(--pe-muted-2); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; text-align: right; display: block; }
.mthd-acchead .chev { width: 9px; height: 9px; border-right: 2.4px solid var(--pe-muted); border-bottom: 2.4px solid var(--pe-muted); transform: rotate(45deg); transition: transform .18s ease; flex-shrink: 0; margin-left: 2px; }
.mthd-accitem.open .mthd-acchead .chev { transform: rotate(-135deg); }

.mthd-accbody { display: none; padding: 2px 15px 16px; border-top: 1px solid var(--pe-bg-2); }
.mthd-accitem.open .mthd-accbody { display: block; animation: mthd-fade .2s ease; }
@keyframes mthd-fade { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.mthd-accbody .bnote { font-size: 13px; color: var(--pe-ink-2); margin: 12px 0 13px; line-height: 1.6; }

/* weight-bar sub-rows (weather drill-down) */
.mthd-wbar { margin: 11px 0; }
.mthd-wbar .top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; flex-wrap: wrap; }
.mthd-wbar .nm { font-weight: 700; font-size: 14px; color: var(--pe-ink); }
.mthd-wbar .sub { font-size: 12.5px; color: var(--pe-muted); }
.mthd-wbar .pct { margin-left: auto; font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; }
.mthd-wbar .mthd-track { height: 9px; border-radius: 6px; background: var(--pe-bg-2); overflow: hidden; }
.mthd-wbar .mthd-fill { height: 100%; border-radius: 6px; }
.mthd-wbar.temp .pct { color: #D6803A; } .mthd-wbar.temp .mthd-fill { background: linear-gradient(90deg, #F0A85A, #E4572E); }
.mthd-wbar.rain .pct { color: var(--sig-weather); } .mthd-wbar.rain .mthd-fill { background: linear-gradient(90deg, #3FC4BD, #15ACA5); }
.mthd-wbar.hum .pct { color: var(--sig-lab); } .mthd-wbar.hum .mthd-fill { background: linear-gradient(90deg, #6E9AE4, #3661B0); }
.mthd-wbar .mk { margin: 6px 0 0; display: flex; gap: 7px; flex-wrap: wrap; }

.mthd-typnote { background: var(--pe-bg); border: 1px dashed var(--pe-line); border-radius: var(--radius-sm); padding: 11px 13px; margin-top: 13px; font-size: 12.5px; color: var(--pe-ink-2); line-height: 1.6; }
.mthd-typnote .h { font-weight: 800; color: var(--pe-ink); display: flex; align-items: center; gap: 7px; margin-bottom: 3px; }
.mthd-typnote .h svg { width: 15px; height: 15px; color: var(--dis-typhoid, #4681EF); }

/* lab thresholds drill-down */
.mthd-thr { display: flex; flex-direction: column; gap: 7px; margin: 12px 0 4px; }
.mthd-thr .t { display: flex; align-items: center; gap: 10px; }
.mthd-thr .dis { font-weight: 700; font-size: 13.5px; width: 96px; flex-shrink: 0; }
.mthd-thr .mthd-track { flex: 1; height: 8px; border-radius: 5px; background: var(--pe-bg-2); overflow: hidden; }
.mthd-thr .mthd-fill { height: 100%; border-radius: 5px; background: var(--sig-lab); opacity: .85; }
.mthd-thr .v { font-weight: 800; font-size: 13px; width: 74px; text-align: right; flex-shrink: 0; color: var(--sig-lab); font-variant-numeric: tabular-nums; }
.mthd-thr .v small { font-weight: 600; color: var(--pe-muted); display: block; font-size: 10px; }

/* lab thresholds as colour chips (replaces the blank-bar .mthd-thr) */
.mthd-labchips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.mthd-labchips .chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--pe-line); border-radius: var(--pill); padding: 5px 12px 5px 10px; font-size: 13px; font-weight: 700; background: #fff; color: var(--pe-ink); }
.mthd-labchips .chip b { font-weight: 800; font-variant-numeric: tabular-nums; }
.mthd-labchips .cdot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

/* right-hand (or inline) score builder / ledger */
.mthd-builder { background: linear-gradient(180deg, #fff, #FAFCFE); border: 1px solid var(--pe-line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 16px 16px 18px; }
.mthd-builder .bh { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.mthd-builder .bh .t { font-size: 13px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--pe-ink); }
.mthd-modetog { display: inline-flex; background: var(--pe-bg-2); border-radius: var(--pill); padding: 3px; gap: 2px; }
.mthd-modetog button { border: 0; background: none; font-family: inherit; font-size: 11px; font-weight: 700; color: var(--pe-ink-2); padding: 5px 10px; border-radius: var(--pill); cursor: pointer; line-height: 1; white-space: nowrap; }
.mthd-modetog button.on { background: #fff; color: var(--pe-green); box-shadow: var(--shadow-sm); }
.mthd-builder .city { font-size: 12px; color: var(--pe-muted); margin: 0 0 12px; }
.mthd-builder .city b { color: var(--pe-ink-2); font-weight: 700; }

.mthd-ledger { font-variant-numeric: tabular-nums; }
.mthd-ledger .lrow { display: flex; align-items: center; gap: 10px; padding: 9px 0; }
.mthd-ledger .lrow + .lrow { border-top: 1px dashed var(--pe-bg-2); }
.mthd-ledger .swatch { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.mthd-ledger .lab { font-size: 13px; color: var(--pe-ink-2); flex: 1; min-width: 0; }
.mthd-ledger .lab b { color: var(--pe-ink); font-weight: 700; }
.mthd-ledger .calc { font-size: 12.5px; color: var(--pe-muted); white-space: nowrap; }
.mthd-ledger .out { font-size: 14px; font-weight: 800; width: 34px; text-align: right; flex-shrink: 0; }
.mthd-ledger .lrule { height: 1px; background: var(--pe-line); margin: 7px 0; }
.mthd-ledger .lsum { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.mthd-ledger .lsum .lab { flex: 1; font-size: 13px; font-weight: 700; color: var(--pe-ink); }
.mthd-ledger .lsum .out { font-size: 17px; font-weight: 800; width: auto; color: var(--pe-ink); }
.mthd-ledger .lop { display: flex; align-items: center; gap: 8px; padding: 8px 0; font-size: 12.5px; color: var(--pe-ink-2); }
.mthd-ledger .lop .opm { width: 26px; height: 26px; border-radius: 8px; background: var(--pe-bg-2); display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--pe-green); flex-shrink: 0; }
.mthd-ledger .lop .txt { flex: 1; }
.mthd-ledger .lop .out { font-size: 14px; font-weight: 800; color: var(--pe-ink); font-variant-numeric: tabular-nums; }

.mthd-dial { display: flex; align-items: center; gap: 14px; margin-top: 13px; padding: 13px; border-radius: var(--radius-sm); background: var(--pe-bg); }
.mthd-dial .ring { position: relative; width: 78px; height: 78px; flex-shrink: 0; }
.mthd-dial .ring svg { transform: rotate(-90deg); }
.mthd-dial .ring .num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800; }
.mthd-dial .meta .bandpill { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800; padding: 5px 13px; border-radius: var(--pill); }
.mthd-dial .meta .sub { font-size: 12px; color: var(--pe-muted); margin-top: 6px; line-height: 1.45; }
.mthd-dial .meta .sub b { color: var(--pe-ink-2); }

.mthd-capnote { margin-top: 11px; font-size: 12px; color: var(--pe-ink-2); background: #FFF6EC; border: 1px solid #F6E0C2; border-radius: var(--radius-sm); padding: 10px 12px; line-height: 1.55; display: none; }
.mthd-capnote.show { display: block; }
.mthd-capnote b { color: #B5651D; }

/* worked examples */
.mthd-exwrap { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mthd-ex { background: #fff; border: 1px solid var(--pe-line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 15px 16px; }
.mthd-ex .tag { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 3px 10px; border-radius: var(--pill); margin-bottom: 9px; }
.mthd-ex.full .tag { background: #E9F4F2; color: var(--pe-green-dark); }
.mthd-ex.fc .tag { background: #FFF1E0; color: #B5651D; }
.mthd-exh4 { margin: 0 0 2px; font-size: 16px; font-weight: 800; color: var(--pe-ink); }
.mthd-ex .live { font-size: 11.5px; color: var(--pe-muted); margin: 0 0 11px; }
.mthd-ex .live em { font-style: normal; color: var(--pe-green); font-weight: 700; }
.mthd-ex .exrow { display: flex; align-items: center; gap: 9px; padding: 6px 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.mthd-ex .exrow .sw { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.mthd-ex .exrow .l { flex: 1; color: var(--pe-ink-2); }
.mthd-ex .exrow .c { color: var(--pe-muted); font-size: 12px; }
.mthd-ex .exrow .o { font-weight: 800; width: 30px; text-align: right; }
.mthd-ex .exhr { height: 1px; background: var(--pe-bg-2); margin: 7px 0; }
.mthd-ex .extot { display: flex; align-items: center; gap: 10px; margin-top: 9px; }
.mthd-ex .extot .big { font-size: 30px; font-weight: 800; line-height: 1; }
.mthd-ex .extot .bp { font-size: 12px; font-weight: 800; padding: 4px 12px; border-radius: var(--pill); }
.mthd-ex .extot .eq { font-size: 12px; color: var(--pe-muted); flex: 1; text-align: right; font-variant-numeric: tabular-nums; }

/* score bands */
.mthd-bandstrip { display: flex; border-radius: 10px; overflow: hidden; border: 1px solid var(--pe-line); margin: 4px 0 10px; }
.mthd-bandstrip .seg { flex: 1; padding: 9px 8px; text-align: center; color: #fff; }
.mthd-bandstrip .seg .bn { font-size: 12px; font-weight: 800; display: block; }
.mthd-bandstrip .seg .br { font-size: 11px; font-weight: 700; opacity: .92; }
.mthd-bandstrip .seg.lowmod { color: #5b4d0e; }

.mthd-foot { font-size: 12px; color: var(--pe-muted); margin: 6px 2px 0; line-height: 1.65; }
.mthd-foot .one { display: block; color: var(--pe-ink-2); font-weight: 600; margin-bottom: 5px; }

/* desktop two-column layout (accordion stack | sticky score builder); collapses on narrow desktops */
.mthd-deskgrid { display: grid; grid-template-columns: 1.18fr .82fr; gap: 16px; align-items: start; }
.mthd-deskgrid .mthd-col-r { position: sticky; top: 16px; }
@media (max-width: 1000px) {
  .mthd-deskgrid { grid-template-columns: 1fr; }
  .mthd-deskgrid .mthd-col-r { position: static; }
  .mthd-exwrap { grid-template-columns: 1fr; }
}
@media (max-width: 460px) {
  .mthd-bandstrip { flex-wrap: wrap; }
  .mthd-bandstrip .seg { flex: 1 1 50%; }
}

/* popover (built + body-appended by assets/js/method.js, one open at a time; UNPREFIXED) */
.mthd-pop { position: fixed; z-index: 90; max-width: 300px; background: #fff; border: 1px solid var(--pe-line); border-radius: var(--radius-sm); box-shadow: 0 12px 34px rgba(16,30,50,.22); padding: 13px 34px 13px 14px; font-size: 12.5px; color: var(--pe-ink-2); line-height: 1.6; display: none; font-family: var(--font); }
.mthd-pop.show { display: block; }
.mthd-pop-ttl { display: flex; align-items: center; gap: 7px; font-weight: 800; font-size: 12px; margin-bottom: 5px; }
.mthd-pop-ttl.set { color: var(--pe-muted); }
.mthd-pop-ttl.source { color: var(--pe-green); }
.mthd-pop-ttl .ic { width: 18px; height: 18px; border-radius: 5px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mthd-pop-ttl.set .ic { border: 1.5px dashed var(--pe-muted-2); }
.mthd-pop-ttl.source .ic { background: #E9F4F2; }
.mthd-pop-ttl.source .ic svg { width: 11px; height: 11px; color: var(--pe-green); }
.mthd-pop-body { color: var(--pe-ink-2); }
.mthd-pop-link { display: flex; width: fit-content; align-items: center; gap: 5px; margin-top: 9px; color: var(--pe-green); font-weight: 700; font-size: 12px; text-decoration: none; }
.mthd-pop-link svg { width: 12px; height: 12px; }
.mthd-pop-link[hidden] { display: none; }
.mthd-popx { position: absolute; top: 7px; right: 8px; width: 22px; height: 22px; border: none; background: none; cursor: pointer; color: var(--pe-muted-2); font-size: 17px; line-height: 1; }
.mthd-popx:hover { color: var(--pe-ink); }

/* "Why this score?" highest / lowest disease chip: a plain-language driver line as a 2nd row under the
   disease name in the breakdown header (.acchead), set only on the top + bottom disease (see whyChip /
   _why_chip). Shared across both flows; overrides the per-flow .acchead .name { flex: 1 } by specificity. */
.acchead .nmwrap { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; flex: 1; min-width: 0; }
.acchead .nmwrap .name { flex: none; }
.acchead .whysub { font-size: 10.5px; font-weight: 600; color: var(--pe-muted); line-height: 1.3; }

/* Trend badges (both rising "up" and easing "down") hidden for now (per request 2026-06-26).
   Targeting both classes keeps specificity (0,2,0) above the per-flow .sigbadge { display: inline-flex }. */
.sigbadge.up, .sigbadge.down { display: none; }