/* ============================================================
   ENGINEERED PREPAREDNESS — Field Guide shared chrome
   Header, page head, sections, CTA band, footer, badges.
   Requires tokens.css loaded first.
   ============================================================ */

.field { background: var(--paper); }

.ph { background: repeating-linear-gradient(135deg, var(--paper-3) 0 10px, var(--paper-2) 10px 20px);
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--ink-faint); font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; }

/* blueprint grid accent — navy bands */
.gridbg { position: relative; }
.gridbg::after { content:""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 90%); }
.gridbg > * { position: relative; z-index: 1; }

/* ===== header ===== */
header.nav { position: sticky; top: 0; z-index: 50; background: var(--navy-900); }
.navwrap { max-width: var(--maxw); margin: 0 auto; padding: 0 40px; height: 68px; display: flex; align-items: center; gap: 34px; }
.brand { display: flex; align-items: center; gap: 12px; color: #fff; }
.brand .logo { height: 42px; width: auto; display: block; }
.brand .wm { font-weight: 800; font-size: 17px; letter-spacing: -.02em; white-space: nowrap; line-height: 1.15; }
.brand .wm small { display: block; font-family: var(--mono); font-weight: 700; font-size: 9px; letter-spacing: .42em; color: var(--gold-300); margin-top: 1px; }
nav.links { display: flex; gap: 26px; margin-left: 8px; }
nav.links a { color: rgba(255,255,255,.72); font-size: 14.5px; font-weight: 500; transition: color .15s; }
nav.links a:hover { color: #fff; }
nav.links a.on { color: var(--gold-300); }
/* right-side action group: holds the live gauge + navright. Carries the
   margin-left:auto so the gauge stays grouped with the actions on desktop
   yet lives OUTSIDE .navright (which collapses into the hamburger on mobile —
   the gauge must survive that, per the always-visible requirement). */
.navactions { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.navright { display: flex; align-items: center; gap: 18px; white-space: nowrap; }
.navright .si { color: rgba(255,255,255,.72); font-size: 14.5px; font-weight: 500; }


/* account icon (logged-in) — icon only in the bar, "Account" text shows in the mobile menu */
.navacct { display: flex; align-items: center; color: rgba(255,255,255,.72); position: relative; }
.navacct:hover { color: #fff; }
.navacct svg { width: 23px; height: 23px; }
.navacct span { display: none; }
/* "there's more of your area to download" — a plain dot, no motion. It only
   appears for people who already downloaded something, so it's a status, not a
   prompt, and it clears itself once they top up.
   The flag lives on the HEADER, not the icon, because the account link isn't in
   the bar on mobile — it's cloned into the hamburger menu, class and all
   stripped. One class covers all three places it can surface. */
header.nav.has-upd .navacct::after,
header.nav.has-upd .navtoggle::after {
  content: ''; position: absolute; width: 7px; height: 7px; border-radius: 99px;
  background: var(--gold-300); box-shadow: 0 0 0 2px var(--navy-900); pointer-events: none;
}
header.nav.has-upd .navacct::after { top: -1px; right: -3px; }
header.nav.has-upd .navtoggle { position: relative; }
header.nav.has-upd .navtoggle::after { top: 7px; right: 7px; }
/* logged-in nav gauge: Preparedness Index ring (--v fill %, --c color set in account.js) */
.navidx { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.navidx-ring {
  width: 38px; height: 38px; border-radius: 99px; flex: none;
  display: grid; place-items: center; position: relative;
  background: conic-gradient(color-mix(in srgb, var(--c, #C99700) 52%, #fff) 0%, var(--c, #C99700) var(--v, 62%), rgba(255,255,255,.14) var(--v, 62%));
}
.navidx-ring::before { content: ""; position: absolute; width: 30px; height: 30px; border-radius: 99px; background: var(--navy-900); }
.navidx-ring b { position: relative; font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: #fff; letter-spacing: -.02em; }
.navidx-lab { font-family: var(--mono); font-size: 9.5px; line-height: 1.15; letter-spacing: .1em; text-transform: uppercase; color: rgba(234,230,221,.6); }
.navidx-lab i { display: block; font-style: normal; color: var(--gold-300); }
.navidx:hover .navidx-ring::before { background: var(--navy-800); }
.navright .si:hover { color: #fff; }
.btn-sm { padding: 10px 16px; font-size: 14px; border-radius: 8px; }

/* ===== page head (navy) ===== */
.pagehead { background: var(--navy-900); color: #fff; position: relative; overflow: hidden; }
.pagehead::before { content:""; position: absolute; inset: 0; background:
    radial-gradient(1100px 600px at 78% -8%, rgba(201,151,0,.13), transparent 60%); }
/* Hero padding, set once. Twenty-eight pages each carried their own: eleven
   different values, top padding anywhere from 30px to 64px, so the gap above the
   eyebrow visibly changed as you moved around the site. Fluid like the heading,
   so it breathes on desktop and tightens on a phone without another breakpoint.
   Side padding drops to 22px at <=640px further down this file. */
.phwrap { position: relative; max-width: var(--maxw); margin: 0 auto;
  padding: clamp(40px, 5vw, 64px) 40px clamp(34px, 4.6vw, 60px); }
.crumb { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; color: rgba(234,230,221,.55); }
.crumb a { color: rgba(234,230,221,.55); }
.crumb a:hover { color: var(--gold-300); }
.crumb b { color: var(--gold-300); font-weight: 600; }
.pagehead .eyebrow { color: var(--gold-300); }
/* ONE hero scale for the whole site. Before this, 28 pages each set their own:
   six different desktop sizes (42/44/46/48/50), six responsive steps
   (27/32/34/36/38/40) at six different breakpoints, and four line-heights.
   clamp() replaces all of it with a smooth curve — no breakpoint jumps, and
   nothing for a page to drift away from. Override sizing here, not per page. */
.pagehead h1 { font-size: clamp(32px, 4.6vw, 46px); line-height: 1.05; letter-spacing: -.028em; margin: 14px 0 0; }
/* Document heroes — an article or resource title is a full sentence, not a
   section label, and wraps to three lines at display size. One deliberate
   second tier, not twelve accidental ones. */
.pagehead.doc h1 { font-size: clamp(26px, 3.4vw, 36px); line-height: 1.12; letter-spacing: -.02em; }
.pagehead.doc .sub, .pagehead.doc .dek { font-size: 16.5px; }
.pagehead h1 em { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--gold-300); }
.pagehead .sub { font-size: 18px; color: rgba(234,230,221,.78); margin-top: 18px; line-height: 1.55; }
/* Links inside the navy hero. The page-level link colour is tuned for paper and
   goes muddy here, so anything in the eyebrow, lede or dek gets gold instead. */
.pagehead a:not(.btn) { color: var(--gold-300); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.pagehead a:not(.btn):hover { color: #fff; }
.phrow { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.phrow .ti { width: 52px; height: 52px; border-radius: 13px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); display: grid; place-items: center; color: var(--gold-300); flex: none; }
.phrow .ti svg { width: 26px; height: 26px; display: block; }

/* ===== sections ===== */
section { padding: 70px 0; }
.sec-head .eyebrow { color: var(--gold-600); }
.sec-head h2 { font-size: 32px; letter-spacing: -.02em; margin-top: 12px; line-height: 1.12; color: var(--navy-900); }
.sec-head h2 em { font-family: var(--serif); font-style: italic; font-weight: 500; }
.sec-head p { font-size: 16.5px; color: var(--ink-soft); margin-top: 14px; line-height: 1.55; }

/* ===== badges ===== */
.badge { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 7px; border-radius: 5px; font-weight: 500; }
.badge.free { background: rgba(46,125,82,.14); color: #1F6B43; }
.badge.paid { background: rgba(31,58,95,.1); color: var(--navy); }
.badge.soon { background: var(--paper-3); color: var(--ink-faint); }
.pagehead .badge.free, .dark .badge.free { background: rgba(46,125,82,.28); color: #8FD4AC; }
.pagehead .badge.paid, .dark .badge.paid { background: rgba(201,151,0,.2); color: var(--gold-300); }
.pagehead .badge.soon, .dark .badge.soon { background: rgba(255,255,255,.1); color: rgba(234,230,221,.65); }
/* On mobile, drop the breadcrumb's Free/Paid badge onto its own line instead of letting it wrap awkwardly beside the crumb text. */
@media (max-width: 600px){ .crumb .badge { display: block; width: fit-content; margin-top: 8px; } }

/* ===== CTA band ===== */
.cta { background: var(--navy-900); color: #fff; text-align: center; }
/* keep the CTA at the standard content width even on pages that widen their workspace (e.g. the map sims at 1580) */
.cta .wrap { max-width: var(--maxw); }
.cta h2 { font-size: 34px; letter-spacing: -.02em; margin: 0 auto; }
.cta h2 em { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--gold-300); }
.cta p { color: rgba(234,230,221,.7); margin-top: 14px; font-size: 16px; }
.cta .row { margin-top: 28px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cta .fine { font-family: var(--mono); font-size: 11px; color: rgba(234,230,221,.5); margin-top: 18px; letter-spacing: .04em; }

/* ===== footer ===== */
footer { background: var(--navy-ink); color: rgba(234,230,221,.65); padding: 56px 0 30px; }
/* Brand sits LAST: the link columns lead, the identity block closes the row. */
.footgrid { display: grid; grid-template-columns: repeat(4, 1fr) 1.6fr; gap: 32px; }
.footgrid > * { min-width: 0; }
.footgrid a { overflow-wrap: break-word; }
/* Column headings were DIMMER than the links beneath them (45% vs 70%), so they
   read as footnotes rather than as structure. Gold, heavier, and with a short
   rule under each one, they now label their column at a glance. */
.footgrid h5 { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: var(--gold-300); margin: 0 0 14px; padding-bottom: 9px; position: relative; }
.footgrid h5::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  border-radius: 2px; background: var(--gold-600); opacity: .38; }
.footgrid a { display: block; font-size: 14px; color: rgba(234,230,221,.7); margin-bottom: 9px; }
.footgrid a:hover { color: #fff; }
.footbrand .wm { color: #fff; font-weight: 800; font-size: 17px; letter-spacing: -.02em; }
.footbrand p { font-size: 13.5px; margin-top: 12px; max-width: 30ch; line-height: 1.6; }
/* Below 820px the grid collapses to two columns and the brand becomes just
   another cell, so the desktop-only alignment is scoped to the wide layout. */
@media (min-width: 821px) {
  .footbrand { text-align: right; }
  .footbrand > div { justify-content: flex-end; }
  /* the block sits at the right edge, but the prose inside it still reads
     left-to-right - right-justified body copy gives every line a new start. */
  .footbrand p { margin-left: auto; text-align: left; }
}
.footbot { border-top: 1px solid rgba(255,255,255,.08); margin-top: 40px; padding-top: 22px; display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: space-between; font-size: 12.5px; color: rgba(234,230,221,.45); font-family: var(--mono); letter-spacing: .03em; overflow-wrap: break-word; }

@media (max-width: 1080px){
  nav.links { display: none; }
}
/* footer is a 5-col grid; collapse it so its min-content can't overflow the
   viewport on phones (was forcing the page wider than the window below ~550px) */
@media (max-width: 820px){
  /* The per-page .footgrid copies that used to override this are gone, so no
     !important is needed to win any more. */
  .footgrid { grid-template-columns: 1fr 1fr; gap: 26px 28px; }
}
@media (max-width: 640px){
  .wrap, .phwrap { padding-left: 22px; padding-right: 22px; }
  .footbot { flex-direction: column !important; gap: 8px; align-items: flex-start; }
}
@media (max-width: 440px){
  .footgrid { grid-template-columns: 1fr; }
}

/* dual-thumb time-range slider (PW_RangeSlider) */
.rslider { --rs-accent: var(--gold-600); }
.rsrow { position: relative; height: 22px; }
.rstrack { position: absolute; top: 9px; left: 0; right: 0; height: 4px; background: var(--line); border-radius: 2px; }
.rsfill { position: absolute; top: 0; height: 100%; background: var(--rs-accent); border-radius: 2px; }
.rsrow input[type=range] { position: absolute; top: 0; left: 0; width: 100%; height: 22px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.rsrow input[type=range]:focus { outline: none; }
.rsrow input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--rs-accent); box-shadow: var(--shadow-sm); cursor: pointer; }
.rsrow input[type=range]::-moz-range-thumb { pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--rs-accent); box-shadow: var(--shadow-sm); cursor: pointer; }
.rsrow input[type=range]::-webkit-slider-runnable-track { background: none; border: none; }
.rsrow input[type=range]::-moz-range-track { background: none; }
.rslabels { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--ink-soft); margin-top: 5px; font-variant-numeric: tabular-nums; }

/* ============================================================
   Shared header action buttons (.hdr-btn) + Share popover
   (.pw-share-pop). Used by article + resource page heads so
   Print/Export and Share look and behave identically.
   ============================================================ */
.hdr-btn { font-family: var(--sans); font-size: 12px; font-weight: 600; color: #fff;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); border-radius: 8px;
  padding: 7px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap; text-decoration: none; }
.hdr-btn:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.4); }
.hdr-btn svg { width: 14px; height: 14px; }
.hdr-btn.added { color: #7FCBA0; border-color: rgba(127,203,160,.5); background: rgba(46,125,82,.18); }

.pw-share-pop { position: fixed; width: 232px; background: #fff; color: var(--ink);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 44px rgba(8,18,33,.28);
  padding: 8px; z-index: 1000; }
.pw-share-pop[hidden] { display: none; }
.pw-share-pop .sh-h { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); padding: 4px 8px 8px; }
.pw-share-pop a, .pw-share-pop button { display: flex; align-items: center; gap: 10px; width: 100%;
  text-align: left; font-family: var(--sans); font-size: 13px; color: var(--ink); background: none;
  border: none; border-radius: 8px; padding: 8px; cursor: pointer; text-decoration: none; }
.pw-share-pop a:hover, .pw-share-pop button:hover { background: var(--paper); }
.pw-share-pop svg { width: 15px; height: 15px; flex: none; color: var(--ink-soft); }
.pw-share-pop .sh-copy.ok, .pw-share-pop .sh-copy.ok svg { color: #2E7D52; }

/* ---- reminder chip on plan actions (shared by Threat & Category Planning) ---- */
.rmchip { display: inline-flex; align-items: center; gap: 1px; flex: none; }
.rmbell { border: none; background: none; cursor: pointer; color: var(--ink-faint); padding: 3px 6px; border-radius: 7px; font-family: var(--mono); font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; line-height: 1; white-space: nowrap; }
.rmbell svg { width: 14px; height: 14px; flex: none; }
.rmbell:hover { color: var(--gold-600); background: var(--paper-2); }
.rmbell.set { color: var(--gold-600); }
.rmchip.over .rmbell.set { color: #B3352A; }
.rmx { border: none; background: none; cursor: pointer; color: var(--ink-faint); font-size: 11px; padding: 2px 3px; line-height: 1; }
.rmx:hover { color: #B3352A; }
.rmpicker { position: fixed; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }