/* ═══════════════════════════════════════════════════════════════
   Ask West Palm Beach — design layer v2 (17 Sep 2026)
   Loaded LAST on every page. App-grade surfaces: one container,
   one radius, one elevation, status colour as meaning, real
   hierarchy. New home components are prefixed ux- so the older
   layered rules in app.css no longer apply to them.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --ux-max:var(--shell-max,1180px);
  --ux-gutter:clamp(16px,3.2vw,40px);
  --ux-r:16px;
  --ux-r-sm:12px;
  --ux-shadow:0 1px 2px rgba(15,16,18,.05), 0 6px 20px rgba(15,16,18,.05);
  --ux-shadow-hi:0 2px 4px rgba(15,16,18,.06), 0 14px 34px rgba(15,16,18,.10);
  --ux-sec:clamp(40px,5vw,72px);
  --ux-h1:clamp(38px,5.4vw,68px);
  --ux-h1-sub:clamp(30px,3.8vw,48px);
  --ux-h2:clamp(24px,2.5vw,32px);
  --ux-teal:#0F6B78;
  --ux-violet:#5B4B8A;
}
html[data-theme="dark"]{
  --ux-shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.28);
  --ux-shadow-hi:0 2px 4px rgba(0,0,0,.5), 0 14px 34px rgba(0,0,0,.4);
  --ux-teal:#5BC4D4;
  --ux-violet:#A896D4;
}

/* Status colour = meaning. One mapping used by chips, rails and dots. */
[data-st="red"]{ --c:var(--status-red); }
[data-st="blue"]{ --c:var(--blue); }
[data-st="amber"]{ --c:var(--status-amber); }
[data-st="navy"]{ --c:var(--navy); }
[data-st="slate"]{ --c:var(--ink-3); }
[data-st="teal"]{ --c:var(--ux-teal); }
[data-st="violet"]{ --c:var(--ux-violet); }

/* ── App bar ─────────────────────────────────────────────────── */
body.mw-app .mw-appbar,
body.mw-app .mw-masthead{
  backdrop-filter:saturate(1.4) blur(10px);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);
  background:color-mix(in srgb, var(--surface) 92%, transparent) !important;
}
body.mw-app .mw-top-tab{
  border-radius:999px !important;
  padding:0 16px !important;
  font-weight:600;
  color:var(--ink-2);
}
/* an older focus-mode rule dimmed the whole nav to 72%; navigation is never dimmed */
body.mw-app .svc-nav, body.mw-app .mw-top-tabs{ opacity:1 !important; }
body.mw-app .mw-top-tab:hover{ background:var(--canvas-2); color:var(--ink); }
body.mw-app .mw-top-tab[aria-current="page"]{
  background:var(--navy) !important;
  color:var(--surface) !important;
  box-shadow:none !important;
  border-color:transparent !important;
}
html[data-theme="dark"] body.mw-app .mw-top-tab[aria-current="page"]{ color:#0C0F13 !important; }

body.mw-app .mw-theme-btn,
body.mw-app .mw-lang-btn{
  display:inline-flex; align-items:center; gap:7px;
  min-height:40px; min-width:44px; padding:0 14px !important;
  border-radius:999px !important;
  border:1px solid var(--line) !important;
  background:var(--surface) !important;
  color:var(--ink-2) !important;
  font-size:13px; font-weight:600;
}
body.mw-app .mw-theme-btn:hover,
body.mw-app .mw-lang-btn:hover{ border-color:var(--ink-3) !important; color:var(--ink) !important; }
body.mw-app .mw-theme-btn::before,
body.mw-app .mw-lang-btn::before{
  content:""; width:16px; height:16px; flex:none; background:currentColor;
  -webkit-mask:var(--ic) center/contain no-repeat; mask:var(--ic) center/contain no-repeat;
}
body.mw-app .mw-theme-btn{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5Z'/%3E%3C/svg%3E"); }
html[data-theme="dark"] body.mw-app .mw-theme-btn{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E"); }
body.mw-app .mw-lang-btn{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.8 3 2.8 15 0 18M12 3c-2.8 3-2.8 15 0 18'/%3E%3C/svg%3E"); }
body.mw-app .readmode{
  border-radius:999px !important; padding:3px !important;
  background:var(--canvas-2) !important; border:1px solid var(--line) !important;
}
body.mw-app .readmode{ padding:0 !important; }
body.mw-app .readmode button{ border-radius:999px !important; min-height:44px !important; padding:0 16px !important; font-size:13px; }

/* Prototype notice: a quiet "Demo data" tag beside the brand, never a banner or a strip */
body.mw-app .mw-proto-pill{
  order:0;
  margin:0 0 0 4px !important;
  min-height:24px !important; height:24px !important; min-width:0 !important; width:auto !important;
  padding:0 9px !important;
  border-radius:999px !important;
  border:1px solid color-mix(in srgb, var(--status-amber) 40%, transparent) !important;
  background:color-mix(in srgb, var(--status-amber) 12%, var(--surface)) !important;
  color:color-mix(in srgb, var(--status-amber) 68%, #000) !important;
  font-family:var(--mono) !important;
  font-size:10px !important; font-weight:600 !important; letter-spacing:.08em !important;
  position:relative;
}
html[data-theme="dark"] body.mw-app .mw-proto-pill{ color:var(--status-amber) !important; }
/* 44px hit area without a 44px-tall pill */
body.mw-app .mw-proto-pill::after{ content:""; position:absolute; inset:-10px -4px; }
@media (max-width:899px){
  body.mw-app .mw-appbar-in,
  body.mw-app .mw-masthead-in,
  body.mw-app .mw-appbar-in:has(.mw-proto-pill),
  body.mw-app .mw-masthead-in:has(.mw-proto-pill){
    grid-template-columns:auto auto minmax(0,1fr) !important;
    grid-template-rows:56px !important;
    min-height:56px !important;
    column-gap:6px;
  }
  body.mw-app:has(.mw-proto-pill){ --app-top:56px !important; }
  body.mw-app .mw-brand-btn{ grid-column:1 !important; grid-row:1 !important; }
  body.mw-app .mw-proto-pill{ grid-column:2 !important; grid-row:1 !important; justify-self:start; }
  body.mw-app .mw-toolbar{ grid-column:3 !important; grid-row:1 !important; justify-self:end; }
  body.mw-app .mw-brand-tag{ display:none !important; }
  body.mw-app .mw-theme-btn [data-theme-label]{ display:none; }
  body.mw-app .mw-theme-btn{ padding:0 12px !important; }
}
@media (max-width:420px){
  body.mw-app .mw-proto-pill{ font-size:9px !important; padding:0 7px !important; letter-spacing:.05em !important; }
}

/* ── Home hero ───────────────────────────────────────────────── */
body.mw-app .mw-screen-home,
body.mw-app main#view-home > section.mw-screen-home{ padding:0 !important; }
body.mw-app .mw-screen-home .mw-bleed-hero{
  min-height:clamp(460px,58vh,640px);
  display:flex; align-items:center;
}
body.mw-app .mw-bleed-hero::after,
body.mw-app .mw-companion-hero::after{
  background:
    linear-gradient(180deg, rgba(5,12,22,.20) 0%, rgba(5,12,22,0) 30%, rgba(5,12,22,.55) 100%),
    linear-gradient(100deg, rgba(10,42,67,.92) 0%, rgba(10,42,67,.62) 46%, rgba(10,42,67,.18) 100%) !important;
}
body.mw-app .mw-bleed-hero-in,
body.mw-app .mw-companion-hero-in{
  width:100%;
  max-width:var(--ux-max) !important;
  padding:clamp(36px,6vw,80px) var(--ux-gutter) clamp(28px,4vw,56px) !important;
}
body.mw-app .mw-screen-home .mw-bleed-hero h1{
  font-size:var(--ux-h1) !important;
  line-height:1 !important;
  letter-spacing:-.035em;
  max-width:14ch;
  margin-top:10px;
}
body.mw-app .mw-bleed-hero .mw-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono) !important; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.78) !important;
}
body.mw-app .mw-screen-home .mw-bleed-hero .mw-eyebrow::before{
  content:""; width:8px; height:8px; border-radius:50%; background:#4ADE80;
  box-shadow:0 0 0 4px rgba(74,222,128,.22);
}
body.mw-app .mw-bleed-hero .mw-lede{
  margin-top:14px;
  font-size:clamp(16px,1.5vw,19px) !important; line-height:1.5;
  max-width:54ch !important; color:rgba(255,255,255,.88) !important;
}
body.mw-app .mw-bleed-hero #askbox,
body.mw-app .mw-bleed-hero .mw-ask-field{
  margin-top:26px !important;
  max-width:min(720px,100%) !important;
  min-height:64px;
  padding:6px 6px 6px 22px !important;
  border-radius:20px !important;
  border:1px solid rgba(255,255,255,.5) !important;
  box-shadow:0 18px 50px rgba(0,0,0,.35);
  display:flex; align-items:center; gap:10px;
}
body.mw-app .mw-bleed-hero #askbox input{
  flex:1; min-width:0; border:none; outline:none; background:none;
  font-size:clamp(16px,1.4vw,18px) !important; color:var(--ink);
  min-height:52px;
}
body.mw-app .mw-bleed-hero #askbox:focus-within{ border-color:var(--blue) !important; box-shadow:0 0 0 4px color-mix(in srgb, var(--blue) 30%, transparent), 0 18px 50px rgba(0,0,0,.35); }
body.mw-app .mw-bleed-hero .mw-ask-send{
  width:52px !important; height:52px !important; flex:none;
  border-radius:16px !important;
  background:var(--blue) !important; color:var(--on-blue) !important;
  display:grid; place-items:center;
  transition:transform .15s var(--ease), background .15s var(--ease);
}
body.mw-app .mw-bleed-hero .mw-ask-send:hover{ transform:scale(1.04); }
body.mw-app .mw-bleed-hero .mw-ask-send svg{ width:22px; height:22px; }
body.mw-app .mw-bleed-hero .mw-hero-actions{ margin-top:16px !important; display:flex; gap:10px; flex-wrap:wrap; }
body.mw-app .mw-bleed-hero .mw-chip-row{ margin-top:18px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
body.mw-app .mw-bleed-hero .mw-chip,
body.mw-app .mw-bleed-hero .ux-loc{
  min-height:40px; padding:0 16px;
  border-radius:999px !important;
  background:rgba(255,255,255,.12) !important;
  border:1px solid rgba(255,255,255,.30) !important;
  color:#fff !important;
  font-size:14px; font-weight:600;
  display:inline-flex; align-items:center; gap:8px; text-decoration:none; cursor:pointer;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background .15s var(--ease), transform .15s var(--ease);
}
body.mw-app .mw-bleed-hero .mw-chip:hover,
body.mw-app .mw-bleed-hero .ux-loc:hover{ background:rgba(255,255,255,.24) !important; transform:translateY(-1px); }
body.mw-app .mw-bleed-hero .ux-loc{ background:#fff !important; color:var(--navy,#0A2A43) !important; border-color:#fff !important; }
html[data-theme="dark"] body.mw-app .mw-bleed-hero .ux-loc{ color:#0A2A43 !important; }
body.mw-app .mw-bleed-hero .ux-loc svg{ width:16px; height:16px; }
body.mw-app .mw-bleed-hero .mw-chip-label{
  font-family:var(--mono) !important; font-size:11px; letter-spacing:.14em; text-transform:uppercase; margin-right:4px;
}
body.mw-app .mw-bleed-hero .mw-photo-credit{
  margin-top:22px; font-family:var(--mono) !important; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.72) !important;
}

/* ── Companion heroes (Map, Updates, Report): compact, content first ── */
body.mw-app .mw-companion-hero{
  min-height:0 !important;
  display:flex; align-items:flex-end;
}
body.mw-app .mw-companion-hero-in{
  padding:clamp(28px,4vw,52px) var(--ux-gutter) clamp(24px,3vw,40px) !important;
}
body.mw-app .mw-companion-hero h1{
  font-size:var(--ux-h1-sub) !important; line-height:1.04 !important; letter-spacing:-.03em;
  max-width:20ch;
}
body.mw-app .mw-companion-hero .sub,
body.mw-app .mw-companion-hero p{ margin-top:10px; font-size:clamp(15px,1.4vw,18px) !important; max-width:60ch !important; }
body.mw-app .mw-companion-hero .mw-eyebrow{
  font-family:var(--mono) !important; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.78) !important;
}

/* ── Home: shared section frame ──────────────────────────────── */
.ux-home{ display:block; }
.ux-sec,
body.mw-app #view-home .home-extra > section.ux-sec,
body.mw-app #view-home .home-extra > section.ux-strip{
  max-width:var(--ux-max) !important;
  margin:0 auto !important;
  padding:var(--ux-sec) var(--ux-gutter) 0 !important;
}
body.mw-app #view-home .home-extra > section.ux-sec-last{ padding-bottom:var(--ux-sec) !important; }
body.mw-app #view-home .home-extra > section.ux-two{ display:grid !important; }
.ux-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-bottom:22px;
}
.ux-head h2,
body.mw-app .ux-head h2{
  margin:0;
  font-size:var(--ux-h2) !important; font-weight:700; letter-spacing:-.028em; line-height:1.1;
  font-variation-settings:var(--wdth-display-fvs);
  color:var(--ink);
}
.ux-head p{ margin:6px 0 0; color:var(--ink-2); font-size:15.5px; max-width:60ch; }
.ux-more{
  display:inline-flex; align-items:center; gap:6px;
  min-height:44px; padding:0 4px;
  font-size:14.5px; font-weight:600; color:var(--blue); text-decoration:none;
}
.ux-more::after{
  content:""; width:16px; height:16px; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .15s var(--ease);
}
.ux-more:hover::after{ transform:translateX(3px); }

.ux-chip{
  display:inline-flex; align-items:center; gap:7px;
  min-height:26px; padding:0 10px;
  border-radius:999px;
  background:color-mix(in srgb, var(--c, var(--ink-3)) 12%, var(--surface));
  color:color-mix(in srgb, var(--c, var(--ink-3)) 72%, var(--ink));
  font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; line-height:1;
  white-space:nowrap;
}
.ux-chip i{ width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }
.ux-chip[data-live] i{ box-shadow:0 0 0 3px color-mix(in srgb, currentColor 25%, transparent); }

/* ── Home: photo strip (edge to edge, text on the image) ─────── */
.ux-tiles{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px;
  background:var(--canvas);
  border-radius:calc(var(--ux-r) + 4px); overflow:hidden;
  box-shadow:var(--ux-shadow);
}
@media (min-width:900px){ .ux-tiles{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
/* three tiles (review 51): the first runs full width on phones, three across on desktop */
.ux-tiles-3 > .ux-tile:first-child{ grid-column:1 / -1; }
@media (min-width:900px){ .ux-tiles-3{ grid-template-columns:repeat(3,minmax(0,1fr)); } .ux-tiles-3 > .ux-tile:first-child{ grid-column:auto; } }
.ux-tile{
  position:relative; display:block; overflow:hidden;
  min-height:clamp(240px,28vw,380px);
  border:none; padding:0; margin:0; text-align:left; cursor:pointer;
  background:var(--chrome); color:#fff; text-decoration:none;
  font:inherit;
}
.ux-tile picture, .ux-tile img{ position:absolute; inset:0; width:100%; height:100%; }
.ux-tile img{
  object-fit:cover; filter:brightness(var(--photo-dim,1));
  transition:transform .6s var(--ease);
}
.ux-tile::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(5,12,22,0) 25%, rgba(5,12,22,.55) 60%, rgba(5,12,22,.92) 100%);
  transition:background .3s var(--ease);
}
.ux-tile:hover img, .ux-tile:focus-visible img{ transform:scale(1.05); }
.ux-tile-body{
  position:absolute; z-index:1; left:0; right:0; bottom:0;
  padding:clamp(16px,1.8vw,26px);
  display:grid; gap:6px;
}
.ux-tile-k{ font-family:var(--mono) !important; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.78); }
.ux-tile strong{ font-size:clamp(17px,1.5vw,22px); font-weight:700; letter-spacing:-.022em; line-height:1.15; color:#fff; }
.ux-tile-p{ font-size:13.5px; line-height:1.45; color:rgba(255,255,255,.82); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ux-tile-fast::before{
  content:""; position:absolute; z-index:2; top:0; left:0; right:0; height:5px;
  background:linear-gradient(90deg,#1672CC 0 33.33%,#F88119 33.33% 66.66%,#159C95 66.66%);
}
@media (max-width:520px){ .ux-tile-p{ display:none; } .ux-tile{ min-height:200px; } }

/* ── Home: activity cards ────────────────────────────────────── */
.ux-acts{ display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:760px){ .ux-acts{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.ux-act{
  position:relative;
  display:grid; gap:6px; align-content:start;
  width:100%; text-align:left; cursor:pointer;
  padding:18px 52px 18px 22px;
  border:1px solid var(--line); border-radius:var(--ux-r);
  background:var(--surface); color:var(--ink);
  font:inherit;
  box-shadow:var(--ux-shadow);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
  overflow:hidden;
}
.ux-act::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--c, var(--ink-3)); }
.ux-act::after{
  content:""; position:absolute; right:18px; top:50%; width:20px; height:20px; margin-top:-10px; background:var(--ink-3);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .18s var(--ease), background .18s var(--ease);
}
.ux-act:hover{ transform:translateY(-2px); box-shadow:var(--ux-shadow-hi); border-color:color-mix(in srgb, var(--c, var(--blue)) 45%, var(--line)); }
.ux-act:hover::after{ transform:translateX(3px); background:var(--c, var(--blue)); }
.ux-act-top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ux-act-when{ font-family:var(--mono) !important; font-size:11px; letter-spacing:.04em; color:var(--ink-3); }
.ux-act-title{ font-size:18px; font-weight:700; letter-spacing:-.02em; line-height:1.25; margin-top:4px; }
.ux-act-impact{ font-size:15px; color:var(--ink-2); line-height:1.45; }
.ux-act-meta{ display:flex; align-items:center; gap:6px; margin-top:6px; font-size:13px; color:var(--ink-3); }
.ux-act-meta svg{ width:14px; height:14px; flex:none; }
.ux-act-src{ font-size:12.5px; color:var(--ink-3); }
.ux-act-src b{ font-weight:600; color:var(--ink-2); }

/* ── Home: around-you panel ──────────────────────────────────── */
.ux-around{
  display:grid; grid-template-columns:1fr; gap:0;
  border:1px solid var(--line); border-radius:calc(var(--ux-r) + 4px); overflow:hidden;
  background:var(--surface); box-shadow:var(--ux-shadow);
}
@media (min-width:900px){ .ux-around{ grid-template-columns:minmax(320px,5fr) 7fr; } }
.ux-around-copy{ padding:clamp(22px,3vw,40px); display:grid; gap:14px; align-content:center; }
.ux-around-copy h2,
body.mw-app .ux-around-copy h2{ margin:0; font-size:var(--ux-h2) !important; letter-spacing:-.028em; line-height:1.1; font-variation-settings:var(--wdth-display-fvs); }
.ux-around-copy p{ margin:0; color:var(--ink-2); font-size:15.5px; line-height:1.5; max-width:46ch; }
.ux-stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:6px; }
.ux-stat{
  display:grid; gap:2px; padding:14px 14px 12px;
  border-radius:var(--ux-r-sm); text-decoration:none;
  background:color-mix(in srgb, var(--c, var(--blue)) 9%, var(--surface));
  border:1px solid color-mix(in srgb, var(--c, var(--blue)) 22%, var(--line));
  color:var(--ink);
  transition:transform .15s var(--ease), border-color .15s var(--ease);
}
.ux-stat:hover{ transform:translateY(-2px); border-color:var(--c, var(--blue)); }
.ux-stat b{ font-size:30px; font-weight:700; letter-spacing:-.03em; line-height:1; color:var(--c, var(--blue)); font-variant-numeric:tabular-nums; }
.ux-stat span{ font-size:11.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-2); }
.ux-around-map{ position:relative; display:block; min-height:260px; background:var(--map-surface); text-decoration:none; overflow:hidden; }
.ux-around-map picture, .ux-around-map img{ position:absolute; inset:0; width:100%; height:100%; }
.ux-around-map img{ object-fit:cover; transition:transform .6s var(--ease); }
html[data-theme="dark"] .ux-around-map img{ filter:invert(1) hue-rotate(180deg) brightness(.9) contrast(.9) saturate(.6); }
.ux-around-map:hover img{ transform:scale(1.03); }
.ux-around-go{
  position:absolute; left:18px; bottom:18px; z-index:1;
  display:inline-flex; align-items:center; gap:8px; min-height:46px; padding:0 18px;
  border-radius:999px; background:var(--navy); color:var(--surface);
  font-size:14.5px; font-weight:600; box-shadow:var(--ux-shadow-hi);
}
html[data-theme="dark"] .ux-around-go{ color:#0C0F13; }
.ux-around-go svg{ width:16px; height:16px; }

/* ── Home: report band ───────────────────────────────────────── */
.ux-report{
  display:grid; grid-template-columns:1fr; gap:20px; align-items:center;
  padding:clamp(22px,3vw,40px);
  border-radius:calc(var(--ux-r) + 4px);
  background:linear-gradient(120deg, #0A2A43 0%, #0B3D66 60%, #0067B1 130%);
  color:#fff; position:relative; overflow:hidden;
}
.ux-report::after{
  content:""; position:absolute; right:-60px; top:-60px; width:260px; height:260px; border-radius:50%;
  border:40px solid rgba(255,255,255,.06); pointer-events:none;
}
@media (min-width:760px){ .ux-report{ grid-template-columns:auto minmax(0,1fr) auto; gap:28px; } }
.ux-report-ic{ width:56px; height:56px; border-radius:16px; background:rgba(255,255,255,.12); display:grid; place-items:center; }
.ux-report-ic svg{ width:28px; height:28px; }
.ux-report-k{ font-family:var(--mono) !important; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.72); }
.ux-report h2,
body.mw-app .ux-report h2{ margin:4px 0 0; font-size:var(--ux-h2) !important; letter-spacing:-.028em; line-height:1.1; color:#fff !important; font-variation-settings:var(--wdth-display-fvs); }
.ux-report p{ margin:8px 0 0; color:rgba(255,255,255,.86); font-size:15.5px; line-height:1.5; max-width:62ch; }
.ux-report-actions{ display:grid; gap:8px; justify-items:start; position:relative; z-index:1; }
@media (min-width:760px){ .ux-report-actions{ justify-items:end; text-align:right; } }
.ux-report-btn{
  display:inline-flex; align-items:center; gap:8px; min-height:50px; padding:0 22px;
  border-radius:999px; background:#fff; color:#0A2A43; font-size:15px; font-weight:700; text-decoration:none;
  transition:transform .15s var(--ease), box-shadow .15s var(--ease);
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.ux-report-btn:hover{ transform:translateY(-2px); color:#0A2A43; }
.ux-report-emg{ font-size:13px; color:rgba(255,255,255,.8); }
.ux-report-emg a{ color:#fff; font-weight:700; }

/* ── Home: explore tiles + recent updates ────────────────────── */
.ux-two{ display:grid; grid-template-columns:1fr; gap:var(--ux-sec) clamp(24px,4vw,56px); }
@media (min-width:1000px){ .ux-two{ grid-template-columns:5fr 7fr; } }
.ux-cats{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.ux-cat{
  display:grid; grid-template-columns:auto 1fr; gap:4px 12px; align-items:center;
  padding:16px; border-radius:var(--ux-r);
  border:1px solid var(--line); background:var(--surface); color:var(--ink); text-decoration:none;
  box-shadow:var(--ux-shadow);
  transition:transform .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.ux-cat:hover{ transform:translateY(-2px); border-color:var(--c, var(--blue)); box-shadow:var(--ux-shadow-hi); color:var(--ink); }
.ux-cat-ic{
  grid-row:1 / span 2; width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--c, var(--blue)) 12%, var(--surface)); color:var(--c, var(--blue));
}
.ux-cat-ic svg{ width:22px; height:22px; }
.ux-cat-t{ font-size:15.5px; font-weight:700; letter-spacing:-.015em; line-height:1.2; }
.ux-cat-n{ font-size:12.5px; color:var(--ink-3); }
.ux-cat-n b{ color:var(--ink-2); font-variant-numeric:tabular-nums; }

.ux-upds{ display:grid; gap:12px; }
.ux-upd{
  display:grid; gap:6px; padding:18px 20px;
  border:1px solid var(--line); border-radius:var(--ux-r); background:var(--surface);
  box-shadow:var(--ux-shadow);
}
.ux-upd-top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ux-upd-date{ font-family:var(--mono) !important; font-size:11px; color:var(--ink-3); letter-spacing:.04em; }
.ux-upd h3{ margin:4px 0 0; font-size:17px; font-weight:700; letter-spacing:-.02em; line-height:1.25; color:var(--ink); }
.ux-upd p{ margin:0; font-size:14.5px; color:var(--ink-2); line-height:1.5; }
.ux-upd .mw-link-btn{ justify-self:start; margin-top:2px; }

/* ── Home: sources row ───────────────────────────────────────── */
.ux-sources{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px;
  padding:18px 20px; border-radius:var(--ux-r);
  background:var(--canvas-2); border:1px solid var(--line);
}
.ux-sources-l{ font-family:var(--mono) !important; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); margin-right:6px; }
.ux-sources span:not(.ux-sources-l){
  display:inline-flex; align-items:center; min-height:32px; padding:0 12px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line); font-size:13px; font-weight:600; color:var(--ink-2);
}
.ux-sources-note{ flex-basis:100%; margin:6px 0 0; font-size:13px; color:var(--ink-2); }

/* ── Footer: a real three-column footer at every width ───────── */
body.mw-app .mw-sitefoot{ margin-top:var(--ux-sec) !important; }
body.mw-app .mw-sitefoot-in{
  max-width:var(--ux-max) !important;
  padding:clamp(28px,4vw,48px) var(--ux-gutter) 24px !important;
  display:grid !important;
  grid-template-columns:minmax(220px,auto) minmax(280px,1fr) minmax(0,auto) !important;
  gap:24px clamp(24px,4vw,64px) !important;
  align-items:start !important;
}
body.mw-app .mw-sitefoot-lede{ max-width:56ch !important; min-width:0 !important; width:auto !important; margin:0 !important; font-size:14.5px; line-height:1.55; }
body.mw-app .mw-sitefoot-nav{
  display:flex !important; flex-wrap:wrap; gap:0 22px !important;
  justify-content:flex-end; align-items:center;
  max-width:420px !important;
}
@media (max-width:1100px){
  body.mw-app .mw-sitefoot-in{ grid-template-columns:1fr auto !important; }
  body.mw-app .mw-sitefoot-lede{ grid-column:1 / -1; order:3; }
}
@media (max-width:760px){
  body.mw-app .mw-sitefoot-in{ grid-template-columns:1fr !important; }
  body.mw-app .mw-sitefoot-nav{ justify-content:flex-start; max-width:none !important; }
}
body.mw-app .mw-sitefoot-note,
body.mw-app .mw-corpus-note{ max-width:var(--ux-max) !important; padding-left:var(--ux-gutter) !important; padding-right:var(--ux-gutter) !important; }
body.mw-app .mw-sitefoot-drawers{ max-width:var(--ux-max); margin:0 auto; padding:0 var(--ux-gutter) 24px; }

/* Access button: smaller, out of the content's way on desktop */
@media (min-width:900px){
  body.mw-app .access-fab{
    right:18px !important; bottom:18px !important; top:auto !important;
    border-radius:999px !important; min-height:44px; padding:0 16px !important;
    box-shadow:var(--ux-shadow-hi);
  }
}

/* ── Map page ────────────────────────────────────────────────── */
body.mw-app .mw-companion-hero .ux-herosearch{ margin-top:22px; display:flex; gap:12px; flex-wrap:wrap; align-items:center; max-width:760px; }
body.mw-app .mw-companion-hero .sbox{
  flex:1 1 320px; max-width:none; min-height:58px;
  border-radius:18px !important; border:1px solid rgba(255,255,255,.5) !important;
  background:var(--surface) !important; padding:5px 5px 5px 20px !important;
  box-shadow:0 14px 40px rgba(0,0,0,.3);
}
body.mw-app .mw-companion-hero .sbox input{ font-size:16.5px; min-height:46px; }
body.mw-app .mw-companion-hero .sbox button{ width:48px !important; height:48px !important; border-radius:14px !important; background:var(--blue) !important; color:var(--on-blue) !important; }
body.mw-app .mw-companion-hero #loc{
  min-height:48px; padding:0 18px; border-radius:999px !important;
  background:rgba(255,255,255,.14) !important; border:1px solid rgba(255,255,255,.36) !important; color:#fff !important;
  font-weight:600; display:inline-flex; align-items:center; gap:8px;
}
body.mw-app .mw-companion-hero #loc svg{ width:18px; height:18px; }
body.mw-app .mw-companion-hero #loc:hover{ background:rgba(255,255,255,.26) !important; }

body.mw-app.mw-map-page #main{ max-width:none !important; padding:0 !important; }
body.mw-map-page .chrome{ max-width:var(--ux-max); margin:0 auto; padding:22px var(--ux-gutter) 0; }
body.mw-map-page .bar{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:0 !important; border-bottom:none !important;
}
body.mw-map-page .ttab{
  min-height:44px !important; padding:0 18px !important; border-radius:999px !important;
  border:1px solid var(--line) !important; background:var(--surface) !important;
  font-size:13px !important; letter-spacing:.05em !important; color:var(--ink-2) !important;
  box-shadow:none !important;
  display:inline-flex; align-items:center; gap:8px;
}
body.mw-map-page .ttab b{
  min-width:22px; height:22px; padding:0 6px; border-radius:999px; display:inline-grid; place-items:center;
  background:var(--canvas-2); color:var(--ink-2); font-size:12px;
}
body.mw-map-page .ttab[aria-pressed="true"]{ background:var(--navy) !important; border-color:var(--navy) !important; color:var(--surface) !important; }
html[data-theme="dark"] body.mw-map-page .ttab[aria-pressed="true"]{ color:#0C0F13 !important; }
body.mw-map-page .ttab[aria-pressed="true"] b{ background:rgba(255,255,255,.18); color:inherit; }
body.mw-map-page .fbtn{ margin-left:0 !important; border-radius:999px !important; min-height:44px !important; padding:0 16px !important; border:1px solid var(--line) !important; background:var(--surface) !important; color:var(--ink-2) !important; }
body.mw-map-page #ltoggle{ margin-left:auto !important; }
body.mw-map-page #timedesc{ margin:12px 0 0 !important; font-size:14.5px !important; color:var(--ink-3) !important; }
body.mw-map-page .stage{ max-width:var(--ux-max); margin:18px auto 0 !important; padding:0 var(--ux-gutter) 8px; gap:20px !important; }
body.mw-map-page .panel{ max-width:none !important; }
@media (min-width:861px){ body.mw-map-page .list{ max-height:600px !important; } }
body.mw-map-page #map{ border-radius:calc(var(--ux-r) + 2px) !important; border:1px solid var(--line) !important; box-shadow:var(--ux-shadow); overflow:hidden; min-height:560px; }
body.mw-map-page .legend{ padding:12px 2px 0 !important; max-width:none; margin:0; gap:8px !important; }
body.mw-map-page .legend > span{
  display:inline-flex; align-items:center; gap:8px; min-height:30px; padding:0 12px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line); font-size:12.5px; color:var(--ink-2);
}
body.mw-map-page .ptitle h2{ font-size:22px !important; letter-spacing:-.025em; color:var(--ink) !important; }
body.mw-map-page .card{
  border-radius:var(--ux-r) !important; padding:16px 18px !important; box-shadow:var(--ux-shadow);
  position:relative; flex:none;
  transition:transform .15s var(--ease), box-shadow .15s var(--ease), border-color .15s var(--ease);
}
body.mw-map-page .card:hover{ transform:translateY(-1px); box-shadow:var(--ux-shadow-hi); }
body.mw-map-page .card .kick{
  display:inline-flex; align-items:center; min-height:24px; padding:0 9px; border-radius:999px;
  background:color-mix(in srgb, var(--c, var(--ink-3)) 12%, var(--surface)); font-size:10.5px !important;
  color:color-mix(in srgb, var(--c, var(--ink-3)) 72%, var(--ink)) !important;
}
body.mw-map-page .list{ gap:12px !important; padding:2px 4px 8px 2px; }
/* Phones: the map is a rounded card, the list simply follows it. No inner scroll box, no sticky head over cards. */
@media (max-width:860px){
  body.mw-app.mw-map-page:not(.embed) #map{ height:min(58dvh,520px) !important; min-height:340px !important; border-radius:var(--ux-r) !important; border:1px solid var(--line) !important; }
  body.mw-app.mw-map-page:not(.embed) .panel{ max-height:none !important; overflow:visible !important; background:none !important; border-top:none !important; padding:20px 0 0 !important; }
  body.mw-app.mw-map-page .sheet-head{ position:static !important; background:none !important; padding:0 0 4px !important; }
  body.mw-app.mw-map-page .list{ max-height:none !important; overflow:visible !important; padding:0 !important; }
  body.mw-app.mw-map-page:not(.embed) .legend{ padding:12px 0 0 !important; }
  body.mw-app.mw-map-page #ltoggle{ margin-left:0 !important; }
  body.mw-app.mw-map-page .stage{ padding-bottom:24px; }
}

/* ── Updates page ────────────────────────────────────────────── */
body.mw-app .mw-updates{ max-width:none !important; padding:0 !important; }
body.mw-app .mw-updates-filters{
  max-width:var(--ux-max); margin:0 auto !important; padding:22px var(--ux-gutter) 0 !important;
  display:flex; gap:8px; flex-wrap:wrap; background:none !important; border:none !important;
}
body.mw-app .mw-updates-filters .mw-btn{
  border-radius:999px !important; min-height:44px; padding:0 18px !important;
  border:1px solid var(--line) !important; background:var(--surface) !important; color:var(--ink-2) !important; font-weight:600;
}
body.mw-app .mw-updates-filters .mw-btn[aria-pressed="true"]{ background:var(--navy) !important; border-color:var(--navy) !important; color:var(--surface) !important; }
html[data-theme="dark"] body.mw-app .mw-updates-filters .mw-btn[aria-pressed="true"]{ color:#0C0F13 !important; }
body.mw-app .mw-updates-status{
  max-width:var(--ux-max); margin:14px auto 0 !important; padding:0 var(--ux-gutter) !important;
  font-family:var(--mono) !important; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
}
body.mw-app .mw-updates-list{
  list-style:none; max-width:var(--ux-max); margin:0 auto !important; padding:0 var(--ux-gutter) var(--ux-sec) !important;
  display:grid; grid-template-columns:1fr; gap:14px;
  background:none !important; border:none !important; box-shadow:none !important;
}
@media (min-width:900px){ body.mw-app .mw-updates-list{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
body.mw-app .mw-updates-month{
  grid-column:1 / -1;
  margin:26px 0 2px !important; padding:0 0 10px !important;
  background:none !important; border-bottom:1px solid var(--line) !important;
  font-family:var(--sans) !important; font-size:20px !important; font-weight:700; letter-spacing:-.02em !important; text-transform:none !important; color:var(--ink) !important;
}
body.mw-app .mw-updates-month:first-child{ margin-top:18px !important; }
body.mw-app .mw-updates-item{
  position:relative; overflow:hidden;
  display:grid; gap:8px; align-content:start;
  padding:20px 22px 18px 24px !important; margin:0 !important;
  border:1px solid var(--line) !important; border-radius:var(--ux-r) !important;
  background:var(--surface) !important; box-shadow:var(--ux-shadow);
  transition:transform .15s var(--ease), box-shadow .15s var(--ease);
}
body.mw-app .mw-updates-item:hover{ transform:translateY(-2px); box-shadow:var(--ux-shadow-hi); }
body.mw-app .mw-updates-item::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--c, var(--ink-3)); }
body.mw-app .mw-updates-item[data-kind="activity"]{ --c:var(--blue); }
body.mw-app .mw-updates-item[data-kind="advisory"]{ --c:var(--status-red); }
body.mw-app .mw-updates-item[data-kind="update"]{ --c:var(--ux-teal); }
body.mw-app .mw-updates-item[data-kind="explainer"]{ --c:var(--ux-violet); }
body.mw-app .mw-updates-item[data-kind="notice"]{ --c:var(--navy); }
body.mw-app .mw-updates-meta{ display:flex; align-items:center; gap:8px 10px; flex-wrap:wrap; font-family:var(--mono) !important; font-size:11px; letter-spacing:.04em; color:var(--ink-3); text-transform:uppercase; }
body.mw-app .mw-updates-kind{
  display:inline-flex; align-items:center; min-height:24px !important; padding:0 10px !important;
  border-radius:999px !important; border:none !important;
  background:color-mix(in srgb, var(--c, var(--ink-3)) 12%, var(--surface)) !important; color:color-mix(in srgb, var(--c, var(--ink-3)) 72%, var(--ink)) !important;
  font-family:var(--sans) !important; font-size:11px !important; font-weight:700; letter-spacing:.07em;
}
body.mw-app .mw-updates-title{ margin:2px 0 0 !important; font-size:18px !important; font-weight:700; letter-spacing:-.02em; line-height:1.25; color:var(--ink); }
body.mw-app .mw-updates-sum{ margin:0 !important; font-size:15px; color:var(--ink-2); line-height:1.5; max-width:none !important; }
body.mw-app .mw-updates-actions{ margin-top:4px; }
body.mw-app .mw-updates-actions .mw-btn{ border-radius:999px !important; padding:0 16px !important; border:1px solid var(--line) !important; color:var(--blue) !important; background:var(--surface) !important; font-weight:600; }
body.mw-app .mw-updates-actions .mw-btn:hover{ border-color:var(--blue) !important; }

/* ── Phone app bar on reading screens: one compact mode toggle, no collisions ── */
@media (max-width:899px){
  body.mw-app[data-view="answer"] .mw-proto-pill,
  body.mw-app[data-view="detail"] .mw-proto-pill,
  body.mw-app[data-view="refusal"] .mw-proto-pill,
  body.mw-app[data-view="fast"] .mw-proto-pill{ display:none !important; }
  body.mw-app .readmode{ width:auto !important; order:0 !important; padding:0 !important; background:none !important; border:none !important; }
  body.mw-app .readmode button[aria-pressed="true"]{ display:none !important; }
  body.mw-app .readmode button{
    flex:none !important; min-height:40px !important; border:1px solid var(--line) !important;
    background:var(--surface) !important; color:var(--ink-2) !important; font-weight:600;
  }
  body.mw-app .mw-toolbar{ gap:6px !important; }
  body.mw-app .mw-lang-btn{ padding:0 12px !important; }
}

/* ── Detail / answer / refusal: a reading screen, not a bare column ── */
body.mw-app .mw-thread-main{
  max-width:var(--ux-max) !important; margin:0 auto !important;
  padding:clamp(20px,3vw,40px) var(--ux-gutter) var(--ux-sec) !important;
}
body.mw-app .mw-thread-main .mw-link-btn.mw-detail-back,
body.mw-app .mw-thread-main > .mw-link-btn{
  display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:0 14px 0 10px;
  border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink-2); text-decoration:none; font-size:14px;
}
body.mw-app .mw-thread-main .mw-link-btn.mw-detail-back::before,
body.mw-app .mw-thread-main > .mw-link-btn::before{
  content:""; width:16px; height:16px; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E") center/contain no-repeat;
}
body.mw-app .mw-detail-kicker,
body.mw-app .mw-answer-kicker{ font-family:var(--mono) !important; font-size:11.5px !important; letter-spacing:.12em !important; text-transform:uppercase; color:var(--ink-3) !important; }
body.mw-app .mw-thread-main h1{
  font-size:clamp(30px,3.6vw,46px) !important; line-height:1.05 !important; letter-spacing:-.032em !important;
  font-variation-settings:var(--wdth-display-fvs); color:var(--ink) !important; margin-top:8px !important; text-wrap:balance;
}
body.mw-app .mw-detail-lede,
body.mw-app .mw-answer-lede{ font-size:clamp(17px,1.5vw,20px) !important; line-height:1.55 !important; color:var(--ink-2) !important; max-width:64ch; margin-top:16px !important; }
body.mw-app .mw-detail-status{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; margin-top:18px !important; font-size:15px; color:var(--ink-2); }
body.mw-app .mw-detail-status .mw-kick,
body.mw-app .mw-thread-main .mw-kick-lg{
  display:inline-flex; align-items:center; min-height:28px; padding:0 12px; border-radius:999px;
  background:color-mix(in srgb, currentColor 12%, var(--surface)); font-size:11.5px !important; letter-spacing:.07em;
}
body.mw-app .mw-detail-status .mw-kick[data-st]{ background:color-mix(in srgb, var(--c) 12%, var(--surface)); color:color-mix(in srgb, var(--c) 72%, var(--ink)) !important; }
body.mw-app .mw-titleblock{
  border-radius:var(--ux-r) !important; border:1px solid var(--line) !important; background:var(--surface) !important;
  box-shadow:var(--ux-shadow); overflow:hidden;
}
body.mw-app .mw-titleblock > div{ padding:14px 16px !important; }
body.mw-app .mw-titleblock dt{ font-size:10.5px !important; letter-spacing:.14em !important; color:var(--ink-3) !important; }
body.mw-app .mw-titleblock dd{ font-size:13.5px !important; color:var(--ink) !important; margin-top:4px !important; }
body.mw-app .mw-detail-aside .mw-stats{
  border:none !important; margin-top:16px !important; display:grid !important; grid-template-columns:1fr; gap:10px;
}
body.mw-app .mw-detail-aside .mw-stat{
  border:1px solid color-mix(in srgb, var(--blue) 22%, var(--line)) !important; border-radius:var(--ux-r-sm);
  padding:16px 18px !important; background:color-mix(in srgb, var(--blue) 7%, var(--surface));
}
body.mw-app .mw-detail-aside .mw-stat + .mw-stat{ border-left:1px solid color-mix(in srgb, var(--blue) 22%, var(--line)) !important; padding-left:18px !important; }
body.mw-app .mw-stat-v{ font-size:clamp(28px,2.6vw,36px) !important; color:var(--blue) !important; letter-spacing:-.03em; line-height:1.05; }
body.mw-app .mw-stat-l{ font-size:13.5px !important; color:var(--ink-2) !important; margin-top:4px; }
body.mw-app .mw-thread-main details.mw-ev-drawer,
body.mw-app .mw-thread-main details.mw-drawer,
body.mw-app .mw-thread-main details.mw-sources{
  border:1px solid var(--line) !important; border-radius:var(--ux-r) !important; background:var(--surface) !important;
  box-shadow:var(--ux-shadow); margin-top:14px !important; padding:0 !important; overflow:hidden;
}
body.mw-app .mw-thread-main details.mw-ev-drawer > summary,
body.mw-app .mw-thread-main details.mw-drawer > summary,
body.mw-app .mw-thread-main details.mw-sources > summary{
  padding:18px 20px !important; font-size:18px !important; font-weight:700; letter-spacing:-.02em !important; text-transform:none !important; color:var(--ink) !important;
  cursor:pointer; min-height:56px;
}
body.mw-app .mw-thread-main details.mw-ev-drawer > summary h2,
body.mw-app .mw-thread-main details.mw-ev-drawer > summary h3{ font-size:18px !important; letter-spacing:-.02em; margin:0; display:inline; color:var(--ink) !important; }
body.mw-app .mw-thread-main details[open] > summary{ border-bottom:1px solid var(--line); }
body.mw-app .mw-thread-main details.mw-ev-drawer > *:not(summary),
body.mw-app .mw-thread-main details.mw-drawer > *:not(summary),
body.mw-app .mw-thread-main details.mw-sources > *:not(summary){ padding-left:20px !important; padding-right:20px !important; }
body.mw-app .mw-thread-main details.mw-ev-drawer > *:last-child,
body.mw-app .mw-thread-main details.mw-drawer > *:last-child,
body.mw-app .mw-thread-main details.mw-sources > *:last-child{ padding-bottom:18px !important; }
body.mw-app .mw-cost{ border:1px solid var(--line); border-radius:var(--ux-r); background:var(--surface); box-shadow:var(--ux-shadow); padding:18px 18px 16px !important; margin-top:16px !important; }
body.mw-app .mw-cost h2{ font-size:19px !important; letter-spacing:-.02em; }
body.mw-app .mw-callout{ border-radius:var(--ux-r-sm) !important; }
body.mw-app .mw-pane-tabs{ gap:6px !important; border-bottom:none !important; flex-wrap:wrap; }
body.mw-app .mw-pane-tab{
  border-radius:999px !important; min-height:40px; padding:0 16px !important; border:1px solid var(--line) !important; background:var(--surface) !important;
  font-weight:600; color:var(--ink-2) !important; box-shadow:none !important;
}
body.mw-app .mw-pane-tab[aria-selected="true"]{ background:var(--navy) !important; border-color:var(--navy) !important; color:var(--surface) !important; }
html[data-theme="dark"] body.mw-app .mw-pane-tab[aria-selected="true"]{ color:#0C0F13 !important; }
body.mw-app .mw-card-pane{ border:1px solid var(--line); border-radius:var(--ux-r); background:var(--surface); box-shadow:var(--ux-shadow); padding:20px !important; margin-top:14px; }
body.mw-app .mw-refusal{ border-radius:calc(var(--ux-r) + 4px) !important; }
body.mw-app .mw-nearby-row{ border-radius:var(--ux-r-sm); }

/* Refusal: one clear card. The refusal is the answer, so it gets the same care as one. */
body.mw-app main[data-screen-label="Refusal"] .mw-refusal,
body.mw-app .ux-refusal{
  display:block !important; grid-template-columns:none !important;
  max-width:760px; margin:18px auto 0 !important;
  padding:clamp(24px,4vw,44px) !important;
  border:1px solid var(--line) !important; border-radius:calc(var(--ux-r) + 6px) !important;
  background:var(--surface) !important; box-shadow:var(--ux-shadow-hi);
  border-top:none !important; position:relative; overflow:hidden;
}
body.mw-app .ux-refusal::before{ content:""; position:absolute; left:0; right:0; top:0; height:5px; background:var(--status-amber); }
.ux-refusal-ic{
  width:56px; height:56px; border-radius:16px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--status-amber) 14%, var(--surface)); color:var(--status-amber);
}
.ux-refusal-ic svg{ width:28px; height:28px; }
body.mw-app .ux-refusal .mw-asked{ margin-top:22px !important; font-family:var(--mono) !important; font-size:11.5px !important; letter-spacing:.14em !important; text-transform:uppercase; color:var(--ink-3) !important; }
body.mw-app .ux-refusal .mw-asked-q{
  margin-top:8px !important; padding:12px 16px; border-radius:var(--ux-r-sm); background:var(--canvas-2);
  font-size:17px !important; color:var(--ink) !important; font-weight:600; letter-spacing:-.01em; max-width:none !important;
}
body.mw-app .ux-refusal .ux-refusal-h{ margin-top:26px !important; }
body.mw-app .ux-refusal .lede{ margin-top:14px !important; font-size:clamp(17px,1.5vw,20px) !important; line-height:1.5 !important; color:var(--ink) !important; font-weight:600; max-width:none !important; }
body.mw-app .ux-refusal .sub{ margin-top:10px !important; font-size:15.5px !important; line-height:1.55; color:var(--ink-2) !important; max-width:none !important; }
.ux-try{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:24px; padding-top:22px; border-top:1px solid var(--line); }
.ux-try-l{ flex-basis:100%; font-family:var(--mono) !important; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.ux-try-b{
  min-height:44px; padding:0 18px; border-radius:999px; border:1px solid var(--line); background:var(--surface);
  font-size:14.5px; font-weight:600; color:var(--blue); cursor:pointer;
  transition:transform .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease);
}
.ux-try-b:hover{ transform:translateY(-1px); border-color:var(--blue); background:color-mix(in srgb, var(--blue) 7%, var(--surface)); }
.ux-refusal-note{ margin:22px 0 0 !important; font-size:14px; line-height:1.55; color:var(--ink-3); max-width:none !important; }
body.mw-app .ux-refusal .mw-titleblock{
  margin-top:22px !important; position:static !important;
  display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; box-shadow:none !important; background:var(--canvas) !important;
}
@media (min-width:700px){ body.mw-app .ux-refusal .mw-titleblock{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; } }
body.mw-app .ux-refusal .mw-titleblock dd{ overflow-wrap:normal !important; word-break:normal !important; hyphens:none !important; }

/* Sticky ask bar on reading screens */
body.mw-app .mw-ask-sticky, body.mw-app #ask-sticky{ backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
body.mw-app #ask-sticky .mw-ask-field, body.mw-app .mw-ask-sticky .mw-ask-field{ border-radius:16px !important; max-width:var(--ux-max); }

/* ── Report: the form is a card, the emergency note is compact ── */
body.mw-app[data-view="report"] #main{ max-width:none !important; padding:0 0 var(--ux-sec) !important; }
body.mw-app[data-view="report"] .mw-report-col{
  max-width:760px !important; margin:-36px auto 0 !important; position:relative; z-index:2;
  padding:clamp(20px,3vw,32px) !important;
  background:var(--surface); border:1px solid var(--line); border-radius:calc(var(--ux-r) + 4px); box-shadow:var(--ux-shadow-hi);
  width:calc(100% - 2 * var(--ux-gutter)) !important;
}
body.mw-app[data-view="report"] .emg{
  margin:0 0 8px !important; border-radius:var(--ux-r-sm) !important; padding:12px 14px !important;
  display:flex !important; align-items:center !important; gap:14px; flex-wrap:nowrap !important; font-size:13.5px !important; line-height:1.45;
}
body.mw-app[data-view="report"] .emg a{
  flex:none; margin-left:auto !important; border-radius:999px; background:var(--alert); color:#fff !important; text-decoration:none !important;
  padding:0 16px !important; min-height:40px !important; font-size:13.5px;
}
html[data-theme="dark"] body.mw-app[data-view="report"] .emg a{ color:#0C0F13 !important; }
@media (max-width:560px){ body.mw-app[data-view="report"] .emg{ flex-wrap:wrap !important; } }
body.mw-app[data-view="report"] #view h1{ font-size:clamp(24px,2.6vw,32px) !important; letter-spacing:-.028em; margin-top:18px !important; }
body.mw-app[data-view="report"] textarea,
body.mw-app[data-view="report"] input[type=text],
body.mw-app[data-view="report"] input[type=email],
body.mw-app[data-view="report"] input[type=tel]{ border-radius:14px !important; border-width:1px !important; padding:14px 16px !important; background:var(--canvas) !important; }
body.mw-app[data-view="report"] textarea:focus,
body.mw-app[data-view="report"] input:focus{ background:var(--surface) !important; box-shadow:0 0 0 4px color-mix(in srgb, var(--blue) 18%, transparent); }
body.mw-app[data-view="report"] .short button,
body.mw-app[data-view="report"] .opts button{ border-radius:999px !important; min-height:44px !important; padding:0 16px !important; border:1px solid var(--line) !important; background:var(--surface) !important; font-weight:600; }
body.mw-app[data-view="report"] .short button:hover,
body.mw-app[data-view="report"] .opts button:hover{ border-color:var(--blue) !important; color:var(--blue) !important; background:color-mix(in srgb, var(--blue) 6%, var(--surface)) !important; }
body.mw-app[data-view="report"] .primary,
body.mw-app[data-view="report"] .ghost{ border-radius:999px !important; min-height:50px !important; padding:0 24px !important; font-size:15px !important; font-weight:700 !important; }
body.mw-app[data-view="report"] .mw-report-progress li{ border-radius:999px !important; }

/* Motion: honour the user's choice */
@media (prefers-reduced-motion:reduce){
  .ux-tile img, .ux-act, .ux-cat, .ux-stat, .ux-around-map img, .ux-report-btn, .mw-updates-item{ transition:none !important; }
}
html[data-motion="reduce"] .ux-tile img,
html[data-motion="reduce"] .ux-act,
html[data-motion="reduce"] .ux-cat{ transition:none !important; transform:none !important; }
html[data-contrast="high"] .ux-act,
html[data-contrast="high"] .ux-cat,
html[data-contrast="high"] .ux-upd,
html[data-contrast="high"] .mw-updates-item{ box-shadow:none !important; border-color:var(--ink) !important; }

/* Staff gate never exceeds the viewport */
body.mw-app .mw-staff-gate{ width:100%; max-width:100vw; overflow-x:hidden; }
body.mw-app .mw-staff-gate-card{ width:100% !important; max-width:100vw !important; min-width:0 !important; }
body.mw-app .mw-staff-gate-card > *{ max-width:min(100%, 56ch) !important; min-width:0; }
body.mw-app .mw-staff-gate-card h1{ max-width:min(100%, 16ch) !important; overflow-wrap:anywhere; }
body.mw-app .mw-staff-gate-roles{ width:100%; max-width:min(100%, 440px) !important; border-radius:var(--ux-r); }
body.mw-app .mw-staff-gate-roles button{ width:100%; white-space:normal; border-radius:var(--ux-r-sm) !important; }

/* Staff app bar on phones: the footer already links to Report */
@media (max-width:899px){ body.mw-app[data-staff-gate] .mw-toolbar a.mw-btn{ display:none !important; } }

/* ── Staff dashboard: same frame, stat tiles, table in a card ── */
body.mw-app[data-staff-gate] .mw-appbar-in{ max-width:var(--shell-max) !important; margin:0 auto !important; padding:0 var(--ux-gutter) !important; }
body.mw-app[data-staff-gate] .stat{ gap:12px !important; margin-top:22px !important; }
body.mw-app[data-staff-gate] .stat > div{
  min-width:160px; padding:16px 20px; border-radius:var(--ux-r); border:1px solid var(--line);
  background:var(--surface); box-shadow:var(--ux-shadow);
}
body.mw-app[data-staff-gate] .stat b{ color:var(--blue) !important; font-size:32px !important; line-height:1.05; }
body.mw-app[data-staff-gate] .stat span{ font-size:13px !important; color:var(--ink-2) !important; }
body.mw-app[data-staff-gate] select{ border-radius:999px !important; min-height:44px; padding:0 16px !important; border-width:1px !important; }
body.mw-app[data-staff-gate] .ghost{ border-radius:999px !important; }
body.mw-app[data-staff-gate] .mw-staff-tablewrap,
body.mw-app[data-staff-gate] section > div[style*="overflow"]{
  border:1px solid var(--line); border-radius:var(--ux-r); background:var(--surface); box-shadow:var(--ux-shadow); padding:4px 18px 8px; margin-top:16px;
}
body.mw-app[data-staff-gate] .st{ border-radius:999px !important; padding:4px 10px !important; }
body.mw-app[data-staff-gate] .note{ border-radius:var(--ux-r-sm) !important; }

/* Content that arrives after load (the report wizard, the updates list) must not shove the footer through the viewport */
body.mw-app main:not([hidden]){ min-height:calc(100dvh - var(--app-top)); }

/* ═══════════════════════════════════════════════════════════════
   Round 3 (17 Sep): footer, MoveWPB mark, FAST header lockup,
   month tabs, sticky map, report layout, demo-data popover.
   ═══════════════════════════════════════════════════════════════ */

/* MoveWPB mark: one inline SVG, coloured by three variables */
:root{ --mk-bg:#0A2A43; --mk-fg:#FFFFFF; --mk-accent:#5BB0F0; }
html[data-theme="dark"]{ --mk-bg:#E8EEF3; --mk-fg:#0A2A43; --mk-accent:#0067B1; }
.mw-move-mark{ display:block; width:44px; height:44px; flex:none; }
.mw-move-mark .mk-bg{ fill:var(--mk-bg); }
.mw-move-mark .mk-line{ stroke:var(--mk-fg); }
.mw-move-mark .mk-node{ fill:var(--mk-bg); stroke:var(--mk-accent); }

/* ── Footer ──────────────────────────────────────────────────── */
body.mw-app .mw-sitefoot{
  --mk-bg:#F2F4F6; --mk-fg:#05070B; --mk-accent:#0067B1;
  margin-top:clamp(32px,4vw,56px) !important;
  background:
    radial-gradient(1200px 320px at 12% 0%, rgba(0,103,177,.22), transparent 60%),
    var(--footer) !important;
  border-top:none !important;
  position:relative;
}
body.mw-app .mw-sitefoot::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,#0067B1,#5BB0F0 50%,#0F6B78);
}
.ft{ max-width:var(--ux-max); margin:0 auto; padding:clamp(36px,5vw,64px) var(--ux-gutter) 0; color:var(--footer-ink); }
.ft-top{ display:grid; grid-template-columns:1fr; gap:20px; align-items:center; padding-bottom:clamp(24px,3vw,40px); border-bottom:1px solid var(--footer-line); }
@media (min-width:900px){ .ft-top{ grid-template-columns:auto minmax(0,1fr) auto; gap:40px; } }
.ft-brand{ display:inline-flex; align-items:center; gap:14px; color:inherit; text-decoration:none; }
.ft-brand b{ display:block; font-size:20px; font-weight:800; letter-spacing:-.03em; font-variation-settings:"wdth" 110; }
.ft-brand small{ display:block; margin-top:2px; font-family:var(--mono) !important; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--footer-muted); }
/* brand refresh (22 Sep): the MoveWPB lockup is a white badge on the dark footer, in both themes */
.ft-brand{ flex-direction:column; align-items:flex-start; gap:10px; }
/* footer brand (review 68): the MoveWPB wordmark as live text with the lockup's wave and its two lines */
.ft-word{ display:inline-flex; flex-direction:column; align-items:flex-start; gap:2px; font-family:var(--sans); font-size:30px; font-weight:800; letter-spacing:-.035em; line-height:1; color:#fff; }
.ft-wave{ display:block; width:52px; height:10px; margin-left:2px; color:#5FC7C1; }
.ft-tags{ display:flex; flex-direction:column; gap:4px; margin-top:4px; }
.ft-tags span{ font-size:11.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.86); line-height:1.5; }
.ft-tags span + span{ font-weight:500; color:rgba(255,255,255,.66); }
.ft-lede{ margin:0; max-width:62ch; font-size:15px; line-height:1.55; color:var(--footer-muted); }
.ft-top-btn{
  display:inline-flex; align-items:center; gap:8px; min-height:46px; padding:0 18px 0 14px;
  border-radius:999px; border:1px solid rgba(255,255,255,.26); background:rgba(255,255,255,.06);
  color:var(--footer-ink); font-size:14px; font-weight:600; cursor:pointer; justify-self:start;
  transition:background .15s var(--ease), transform .15s var(--ease);
}
@media (min-width:900px){ .ft-top-btn{ justify-self:end; } }
.ft-top-btn:hover{ background:rgba(255,255,255,.14); transform:translateY(-2px); }
.ft-top-btn svg{ width:18px; height:18px; }
.ft-cols{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 24px; padding:clamp(24px,3vw,40px) 0; }
@media (min-width:900px){ .ft-cols{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:40px; } }
.ft-h{ margin:0 0 10px; font-family:var(--mono) !important; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(242,244,246,.78); }
.ft-list{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.ft-list a, .ft-list button{
  display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0;
  background:none; border:none; cursor:pointer; text-align:left;
  color:var(--footer-ink) !important; font:inherit; font-size:15px; font-weight:500; text-decoration:none;
  opacity:.92;
}
.ft-list a:hover, .ft-list button:hover{ opacity:1; text-decoration:underline; text-underline-offset:4px; }
.ft-list small{ display:block; font-size:12px; color:var(--footer-muted); font-weight:400; }
.ft-tel{ display:grid !important; gap:0 !important; min-height:0 !important; padding:6px 0 !important; }
.ft-tel b{ font-family:var(--mono) !important; font-weight:500; font-size:15px; letter-spacing:.02em; }
.ft-pillrow{ display:flex; flex-wrap:wrap; gap:8px; }
.ft-pill{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px;
  border-radius:999px; border:1px solid rgba(255,255,255,.26) !important; background:none;
  color:var(--footer-ink) !important; font-size:14px; font-weight:600; cursor:pointer;
}
.ft-pill:hover{ background:rgba(255,255,255,.1); }
.ft-pill.mw-install{ background:#fff; color:#05070B !important; border-color:#fff !important; }
.ft-base{
  display:flex; flex-wrap:wrap; gap:6px 24px; justify-content:space-between;
  padding:18px 0 28px; border-top:1px solid var(--footer-line);
  font-size:12.5px; color:var(--footer-muted);
}
body.mw-app .mw-sitefoot .mw-sitefoot-drawers{ border-top:1px solid var(--footer-line); padding-top:8px; }
@media (max-width:899px){ body.mw-app .mw-sitefoot .ft-base{ padding-bottom:calc(28px + var(--dock-h, 64px)); } }

/* ── Demo-data popover ───────────────────────────────────────── */
.mw-proto-pop{
  position:fixed; z-index:400; top:calc(var(--app-top) + 8px); left:var(--ux-gutter);
  width:min(360px, calc(100vw - 2 * var(--ux-gutter)));
  padding:18px 18px 16px; border-radius:var(--ux-r);
  background:var(--surface); color:var(--ink); border:1px solid var(--line); box-shadow:var(--ux-shadow-hi);
}
.mw-proto-pop b{ display:block; font-size:16px; letter-spacing:-.015em; }
.mw-proto-pop p{ margin:8px 0 0; font-size:14.5px; line-height:1.5; color:var(--ink-2); max-width:none; }
.mw-proto-pop-row{ display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
.mw-proto-pop button{
  min-height:44px; padding:0 16px; border-radius:999px; border:1px solid var(--line); background:var(--surface);
  font-size:14px; font-weight:600; color:var(--ink-2); cursor:pointer;
}
.mw-proto-pop button[data-proto-close]{ background:var(--navy); border-color:var(--navy); color:var(--surface); }
html[data-theme="dark"] .mw-proto-pop button[data-proto-close]{ color:#0C0F13; }

/* ── Language menu (shell.js): one list for the header code and the footer pill ── */
.mw-lang-menu{
  position:fixed; z-index:410; top:0; left:0; width:min(17.5rem, calc(100vw - 24px));
  padding:6px; border-radius:var(--ux-r); background:var(--surface); color:var(--ink);
  border:1px solid var(--line); box-shadow:var(--ux-shadow-hi); font-family:inherit;
}
.mw-lang-menu[hidden]{ display:none; }
.ft-pill.ft-lang{ max-width:100%; text-align:left; }
.ft-pill.ft-lang svg{ flex:none; }
/* the narrowest phones at the largest text size: a tighter pill, and a long name may break rather than push the page sideways */
@media (max-width:380px){ .ft-pill.ft-lang{ padding:0 10px; gap:6px; } .ft-pill.ft-lang span{ min-width:0; overflow-wrap:anywhere; } }
.mw-lang-menu ul{ list-style:none; margin:0; padding:0; }
.mw-lang-menu button{
  display:flex; align-items:center; gap:12px; width:100%; min-height:48px; padding:8px 12px;
  border:0; border-radius:10px; background:transparent; color:var(--ink); font-family:inherit;
  font-size:1rem; font-weight:600; text-align:left; cursor:pointer;
}
.mw-lang-menu button:hover{ background:var(--canvas-2); }
.mw-lang-menu button:focus-visible{ outline:2px solid var(--focus, var(--navy)); outline-offset:-2px; }
.mw-lang-code{
  flex:none; min-width:2.25rem; padding:2px 0; border-radius:6px; border:1px solid var(--line);
  font-family:var(--mono); font-size:.75rem; font-weight:600; letter-spacing:.06em; text-align:center; color:var(--ink-2);
}
.mw-lang-nm{ display:grid; gap:1px; min-width:0; }
.mw-lang-nm small{ font-size:.8125rem; font-weight:400; color:var(--ink-2); }
.mw-lang-menu button[aria-current="true"]{ background:var(--canvas-2); }
.mw-lang-menu button[aria-current="true"] .mw-lang-code{ background:var(--navy); border-color:var(--navy); color:var(--surface); }
html[data-theme="dark"] .mw-lang-menu button[aria-current="true"] .mw-lang-code{ color:#0C0F13; }
.mw-lang-menu button[aria-current="true"]::after{
  content:""; margin-left:auto; flex:none; width:8px; height:14px; border:solid currentColor; border-width:0 2px 2px 0; transform:rotate(45deg) translate(-2px,-2px);
}
@media (forced-colors:active){ .mw-lang-menu button[aria-current="true"]{ outline:2px solid CanvasText; } }

/* ── FAST takes the brand slot on its own page ───────────────── */
body.mw-app .mw-brand-fast{ display:inline-flex; align-items:baseline; gap:0; text-decoration:none; color:var(--ink); white-space:nowrap; }
.fx-hword{
  display:inline-flex; align-items:baseline; gap:.28em; line-height:1.1;
  font-family:var(--sans); font-weight:800; font-size:clamp(1rem,2vw,1.15rem);
  letter-spacing:-.02em; font-variation-settings:"wdth" 112; color:var(--ink);
}
.fx-hword b{ font-weight:800; letter-spacing:.04em; margin:0; font-size:inherit; color:var(--ink); }
/* Review 70, second pass: FAST alone in the header at every width. The anchor
   keeps aria-label="Palm Beach FAST", so the accessible name never shortens —
   only the painted label does. The .fx-hword-long span this once toggled is
   gone from the markup, so its rule went with it. */

/* App bar must survive longer Spanish labels */
html[lang="es"] body.mw-app .mw-top-tab{ padding:0 12px !important; font-size:14px; }
@media (max-width:1360px){ body.mw-app .mw-brand-tag{ display:none !important; } }
@media (max-width:1240px){
  body.mw-app .mw-theme-btn [data-theme-label]{ display:none; }
  body.mw-app .mw-theme-btn{ padding:0 12px !important; }
  body.mw-app .mw-top-tab{ padding:0 12px !important; }
}
body.mw-app .mw-appbar-in, body.mw-app .mw-masthead-in{ flex-wrap:nowrap !important; }
body.mw-app .mw-top-tabs{ flex-wrap:nowrap !important; min-width:0; }
body.mw-app .mw-top-tab{ white-space:nowrap; flex:none; }

/* ── Home details ────────────────────────────────────────────── */
.ux-tile-fast::before{ display:none !important; }
.ux-tile-body::after{
  content:""; position:absolute; right:clamp(14px,1.6vw,22px); top:clamp(-52px,-3.4vw,-40px);
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center/18px no-repeat;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; transform:translateY(6px); transition:opacity .2s var(--ease), transform .2s var(--ease);
}
.ux-tile:hover .ux-tile-body::after, .ux-tile:focus-visible .ux-tile-body::after{ opacity:1; transform:none; }
body.mw-app #view-home .home-extra > section.ux-sec-last{ padding-bottom:0 !important; }

/* ── Map: the map stays, the list scrolls with the page ─────── */
html[data-theme="dark"] body.mw-map-page .chrome,
html[data-theme="dark"] body.mw-map-page .mapcol,
html[data-theme="dark"] body.mw-map-page .panel,
body.mw-map-page .chrome, body.mw-map-page .mapcol, body.mw-map-page .panel{
  background:none !important; border:none !important; box-shadow:none !important; border-radius:0 !important;
}
body.mw-map-page .chrome{ padding-bottom:0 !important; }
@media (min-width:861px){
  body.mw-map-page .stage{ align-items:flex-start !important; padding-bottom:var(--ux-sec) !important; }
  body.mw-map-page .mapcol{
    position:sticky; top:calc(var(--app-top) + 16px);
    height:calc(100dvh - var(--app-top) - 32px); min-height:460px;
    display:flex; flex-direction:column; padding:0 !important;
  }
  body.mw-map-page #map{ flex:1 1 auto; min-height:0 !important; height:auto !important; }
  body.mw-map-page .panel{ padding:0 !important; }
  body.mw-map-page .list{ max-height:none !important; overflow:visible !important; padding:0 !important; }
  body.mw-map-page .sheet-head{ position:static !important; background:none !important; padding:0 0 6px !important; }
}

/* ── Updates: month tabs ─────────────────────────────────────── */
.mw-updates-months{
  max-width:var(--ux-max); margin:14px auto 0; padding:0 var(--ux-gutter);
  display:flex; gap:6px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
  border-bottom:1px solid var(--line);
}
.mw-updates-months::-webkit-scrollbar{ display:none; }
.mw-updates-months button{
  flex:none; min-height:48px; padding:0 16px; border:none; background:none; cursor:pointer;
  font-size:15px; font-weight:600; color:var(--ink-2);
  border-bottom:3px solid transparent; margin-bottom:-1px;
  display:inline-flex; align-items:center; gap:8px;
}
.mw-updates-months button b{
  min-width:22px; height:22px; padding:0 6px; border-radius:999px; display:inline-grid; place-items:center;
  background:var(--canvas-2); color:var(--ink-2); font-size:12px; font-variant-numeric:tabular-nums;
}
.mw-updates-months button:hover{ color:var(--ink); }
.mw-updates-months button[aria-pressed="true"]{ color:var(--ink); border-bottom-color:var(--blue); }
.mw-updates-months button[aria-pressed="true"] b{ background:var(--blue); color:var(--on-blue); }

/* ── Report: form card beside a how-it-works column ──────────── */
.rp-grid{
  max-width:var(--ux-max); margin:0 auto; padding:clamp(24px,3vw,40px) var(--ux-gutter) 0;
  display:grid; grid-template-columns:1fr; gap:20px; align-items:start;
}
@media (min-width:1000px){ .rp-grid{ grid-template-columns:minmax(0,1fr) 360px; gap:28px; } }
body.mw-app[data-view="report"] .rp-grid .mw-report-col{
  max-width:none !important; width:100% !important; margin:0 !important;
}
.rp-aside{ display:grid; gap:16px; }
.rp-card{ border:1px solid var(--line); border-radius:calc(var(--ux-r) + 4px); background:var(--surface); box-shadow:var(--ux-shadow); padding:22px; }
.rp-card h2{ margin:0; font-size:18px !important; letter-spacing:-.02em; }
.rp-steps{ list-style:none; counter-reset:rp; margin:16px 0 0; padding:0; display:grid; gap:16px; }
.rp-steps li{ counter-increment:rp; display:grid; grid-template-columns:auto 1fr; gap:2px 14px; }
.rp-steps li::before{
  content:counter(rp); grid-row:1 / span 2; width:36px; height:36px; border-radius:12px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--blue) 12%, var(--surface)); color:color-mix(in srgb, var(--blue) 75%, var(--ink));
  font-weight:800; font-size:15px;
}
.rp-steps b{ font-size:15.5px; letter-spacing:-.01em; }
.rp-steps span{ font-size:14px; color:var(--ink-2); line-height:1.45; }
.rp-card-dark{ background:linear-gradient(135deg,#0A2A43,#0B3D66); color:#fff; border-color:transparent; }
.rp-card-dark h2{ color:#fff !important; }
.rp-card-dark p{ margin:8px 0 0; font-size:14px; color:rgba(255,255,255,.82); max-width:none; }
.rp-tel{ display:grid; gap:0; margin-top:12px; }
.rp-tel a{
  display:grid; gap:2px; padding:12px 0; border-top:1px solid rgba(255,255,255,.16);
  color:#fff !important; text-decoration:none;
}
.rp-tel a small{ font-size:12.5px; color:rgba(255,255,255,.78); }
.rp-tel a b{ font-family:var(--mono) !important; font-size:18px; font-weight:500; letter-spacing:.02em; }
.rp-tel a:hover b{ text-decoration:underline; text-underline-offset:4px; }

/* Footer columns are immune to page-level `nav{display:flex}` rules */
body.mw-app .ft nav{ display:block !important; gap:0 !important; margin:0 !important; padding:0 !important; border:none !important; box-shadow:none !important; position:static !important; }
body.mw-app .ft-list a, body.mw-app .ft-list button{ box-shadow:none !important; border-radius:0 !important; min-width:0 !important; }
/* Pale skies read as a blank band: tone the top of every tile the same way */
.ux-tile::after{
  background:linear-gradient(180deg, rgba(10,42,67,.46) 0%, rgba(10,42,67,.10) 32%, rgba(5,12,22,.55) 62%, rgba(5,12,22,.94) 100%) !important;
}
.ux-tile img{ object-position:50% 78%; }

/* The report wizard renders after load; hold its space so the how-it-works column below it does not jump on phones */
body.mw-app[data-view="report"] #view{ min-height:560px; }
@media (min-width:1000px){ body.mw-app[data-view="report"] #view{ min-height:420px; } }

/* Access panel: a fixed dark surface in every theme. It used var(--ink) as its background, which flips to
   near-white in dark mode under white text. The id keeps these above the themed h2/button rules. */
body.mw-app #access-panel{ background:#0B1B2B !important; color:#fff !important; border:1px solid rgba(255,255,255,.16) !important; border-radius:20px; padding:20px 20px 18px; width:min(348px, calc(100vw - 28px)); box-shadow:0 24px 60px rgba(0,0,0,.55); }
body.mw-app #access-panel h2{ color:#fff !important; font-size:17px !important; letter-spacing:-.015em; margin:0; padding-right:44px; }
body.mw-app #access-panel p{ color:rgba(255,255,255,.76) !important; font-size:13.5px; line-height:1.5; margin-top:6px; }
body.mw-app #access-panel .access{ margin-top:16px; gap:12px; }
body.mw-app #access-panel .access .row > span{ color:#fff !important; font-size:14.5px; font-weight:600; }
body.mw-app #access-panel .access .grp{ gap:6px; }
body.mw-app #access-panel .access button{ min-height:44px; padding:0 14px; border-radius:999px; border:1px solid rgba(255,255,255,.30) !important; background:rgba(255,255,255,.07) !important; color:#fff !important; font-family:var(--sans) !important; font-size:13.5px !important; font-weight:600; letter-spacing:0 !important; text-transform:none !important; display:inline-flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap; cursor:pointer; }
body.mw-app #access-panel .access button span{ color:inherit !important; }
body.mw-app #access-panel .access button:hover{ background:rgba(255,255,255,.16) !important; }
body.mw-app #access-panel .access button[aria-pressed="true"]{ background:#fff !important; color:#0B1B2B !important; border-color:#fff !important; }
body.mw-app #access-panel .close{ top:12px; right:12px; width:40px; height:40px; border-radius:50%; font-size:22px; color:#fff !important; background:rgba(255,255,255,.08) !important; }
body.mw-app #access-panel .close:hover{ background:rgba(255,255,255,.18) !important; }
body.mw-app #access-panel :focus-visible{ outline:3px solid #fff !important; outline-offset:2px; }
html[data-contrast="high"] body.mw-app #access-panel, html.hc body.mw-app #access-panel{ background:#000 !important; border-color:#fff !important; }
/* Contrast and Reduce motion render as switches; the accessible name and aria-pressed are unchanged. */
body.mw-app #access-panel .access button[data-a11y="contrast"],
body.mw-app #access-panel .access button[data-a11y="motion"]{ position:relative; flex:none; width:56px; min-width:56px; height:32px; min-height:32px; padding:0; font-size:0 !important; color:transparent !important; background:rgba(255,255,255,.18) !important; border-color:rgba(255,255,255,.45) !important; overflow:hidden; }
body.mw-app #access-panel .access button[data-a11y="contrast"] > *,
body.mw-app #access-panel .access button[data-a11y="motion"] > *{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
body.mw-app #access-panel .access button .sw{ display:none !important; }
body.mw-app #access-panel .access button[data-a11y="contrast"]::after,
body.mw-app #access-panel .access button[data-a11y="motion"]::after{ content:""; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#fff; transition:transform .18s ease; }
body.mw-app #access-panel .access button[data-a11y="contrast"][aria-pressed="true"],
body.mw-app #access-panel .access button[data-a11y="motion"][aria-pressed="true"]{ background:#2F9BFF !important; border-color:#2F9BFF !important; }
body.mw-app #access-panel .access button[data-a11y="contrast"][aria-pressed="true"]::after,
body.mw-app #access-panel .access button[data-a11y="motion"][aria-pressed="true"]::after{ transform:translateX(24px); }
body.mw-app #access-panel .access .row{ min-height:44px; }
@media (prefers-reduced-motion:reduce){ body.mw-app #access-panel .access button::after{ transition:none !important; } }

/* Reviewer entry: footer pill, popover line, code dialog */
.ft-pill-review{ border-style:dashed !important; }
.mw-proto-review{ margin-top:14px !important; padding-top:12px; border-top:1px solid var(--line); font-size:13.5px !important; }
.mw-proto-pop button.mw-proto-link{ display:inline; min-height:0; padding:0; border:none; background:none; color:var(--blue-ink,var(--navy)); font-weight:700; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
html[data-theme="dark"] .mw-proto-pop button.mw-proto-link{ color:#8EC5FF; }
.mw-review-dlg{ width:min(440px, calc(100vw - 32px)); padding:0; border:1px solid var(--line); border-radius:20px; background:var(--surface); color:var(--ink); box-shadow:0 30px 80px rgba(0,0,0,.45); }
.mw-review-dlg::backdrop{ background:rgba(5,10,18,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.mw-review-dlg form{ padding:24px; display:grid; gap:10px; }
body.mw-app .mw-review-dlg h2{ margin:0; font-size:22px !important; letter-spacing:-.02em; color:var(--ink) !important; }
.mw-review-dlg p{ margin:0; font-size:14.5px; line-height:1.5; color:var(--ink-2); max-width:none; }
.mw-review-dlg label{ margin-top:6px; font-size:13px; font-weight:700; color:var(--ink-2); }
body.mw-app .mw-review-dlg input{ width:100%; min-height:48px; padding:0 14px; border-radius:12px; border:1px solid var(--line-2,var(--line)) !important; font-size:16px; font-family:var(--mono, ui-monospace, monospace); }
.mw-review-dlg-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.mw-review-dlg-row button{ min-height:46px; padding:0 20px; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--ink); font-weight:700; font-size:15px; cursor:pointer; }
.mw-review-dlg-row .mw-review-go{ background:#6D28D9; border-color:#6D28D9; color:#fff; }
.mw-review-dlg-row .mw-review-go:hover{ background:#5B21B6; }

/* ═══ Top safe area (installed app, no browser bar) ═══
   The pages use viewport-fit=cover and iOS draws them under the clock and battery. The bottom inset was
   handled everywhere; the top never was. --safe-top is the inset (0 in a browser tab and on Android, where
   the status bar is separate). --app-top stays "viewport top to the bottom of the app bar", so every sticky
   and fixed offset that already uses it moves down with the bar. iOS always draws the status text in white
   in this mode, so the strip behind it is a fixed dark colour in both themes, matching the Android bar. */
:root{ --safe-top:env(safe-area-inset-top, 0px); --statusbar:#0A2A43; }
html[data-theme="dark"]{ --statusbar:#05070B; }
body.mw-app, body.mw-app:has(.mw-proto-pill){ --app-top:calc(56px + var(--safe-top)) !important; }
body.mw-app .mw-appbar, body.mw-app .mw-masthead, body.mw-app .mw-page-header{ padding-top:var(--safe-top) !important; }
body.mw-app .mw-appbar::before, body.mw-app .mw-masthead::before, body.mw-app .mw-page-header::before{
  content:""; position:absolute; top:0; left:0; right:0; height:var(--safe-top); background:var(--statusbar); pointer-events:none;
}
body.mw-app .mw-appbar-in, body.mw-app .mw-masthead-in{ min-height:56px !important; }
body.mw-app .mw-skip:focus, body.mw-app .mw-skip:focus-visible{ top:calc(12px + var(--safe-top)); }
body.mw-app > .mw-offline-banner:first-child{ padding-top:calc(10px + var(--safe-top)); }
.mw-staff-gate{ padding-top:var(--safe-top); }
/* Landscape on a notched phone: keep the bar's content clear of the notch; the bar itself stays full bleed. */
body.mw-app .mw-appbar-in, body.mw-app .mw-masthead-in, .fx-subnav-in{
  padding-left:max(var(--ux-gutter, 12px), env(safe-area-inset-left, 0px)); padding-right:max(var(--ux-gutter, 12px), env(safe-area-inset-right, 0px));
}

/* ═══ Map switched off (reviews 39 and 40). shell.js sets html[data-map]; "on" restores everything. ═══ */
html:not([data-map="on"]) [data-tab="map"],
html:not([data-map="on"]) a.mw-chip[href^="map.html"],
html:not([data-map="on"]) .ux-loc[data-go="locate"],
html:not([data-map="on"]) [data-screen-label="Around you"],
html:not([data-map="on"]) body.mw-app #view-home .home-extra > section.ux-sec[data-screen-label="Around you"],
html:not([data-map="on"]) .ft a[href^="map.html"],
html:not([data-map="on"]) .mw-map-note,
html:not([data-map="on"]) a[data-i18n="viewOnMap"]{ display:none !important; }
html:not([data-map="on"]) .ft li:has(> a[href^="map.html"]){ display:none; }
html:not([data-map="on"]) .mw-tabbar{ grid-template-columns:none !important; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); }

/* Assistant: the wait state, and answers quoted from an approved source page */
.ux-checking-l{ display:flex; align-items:center; gap:12px; }
.ux-spin{ width:18px; height:18px; border-radius:50%; border:2.5px solid var(--line); border-top-color:var(--navy, #0A2A43); animation:uxspin .8s linear infinite; flex:none; }
html[data-theme="dark"] .ux-spin{ border-top-color:#8EC5FF; }
@keyframes uxspin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .ux-spin{ animation:none; } }
body.mw-app .ux-source::before{ background:var(--status-blue, #1672CC); }
.ux-source-l{ margin:22px 0 8px !important; font-family:var(--mono); font-size:11.5px !important; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); }
.ux-source-q{ margin:0 0 12px; padding:14px 16px; border-left:4px solid var(--status-blue, #1672CC); border-radius:0 12px 12px 0; background:var(--canvas-2, rgba(15,16,18,.04)); font-size:15.5px; line-height:1.55; color:var(--ink); overflow-wrap:anywhere; }
.ux-source-q b{ display:block; margin-bottom:6px; font-size:14px; }

/* ═══ Text size (Access panel) ═══
   The buttons set html[data-type-scale], and app.css turned that into a root font size. But some 350 font sizes
   across the stylesheets are fixed pixels, which ignore the root size, so nothing changed on screen. The content
   area is scaled instead, proportionally, the way browser zoom does it. The app bar and the phone dock keep their
   size so navigation never wraps; sticky bars inside the content get their offset corrected for the scale. */
html{ font-size:100% !important; }
body.mw-app main, body.mw-app > footer, body.mw-app > .mw-sitefoot{ zoom:var(--a11y-scale, 1); }
body.mw-app main{ --app-top:calc((56px + var(--safe-top, 0px)) / var(--a11y-scale, 1)); }
/* Enlarged text narrows the content's working width (390 px at the top level behaves like 279 px).
   These grids let their children shrink instead of pushing the page sideways. Columns stay: it is the
   tracks that must be allowed to shrink, not the count. Flattening the grid cost the desktop its two columns. */
.ux-acts{ grid-template-columns:minmax(0,1fr); }
@media (min-width:760px){ .ux-acts{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:1200px){ .ux-acts{ gap:16px; } }
.ux-act, .ux-cat, .ux-tile, .ux-upd{ min-width:0; }
.ux-act-title, .ux-act-impact, .ux-act-meta, .ux-act-src, .ux-cat-t, .ux-cat-n{ min-width:0; overflow-wrap:anywhere; }
.ux-act .ux-chip{ max-width:100%; white-space:normal; }
/* a page's standing footer line (FAST: not adopted policy) */
.ft-note{ margin:0; padding:18px 0 0; border-top:1px solid rgba(255,255,255,.12); font-size:13.5px; line-height:1.5; color:var(--footer-ink, rgba(255,255,255,.78)); max-width:80ch; }

/* ═══ Install prompt: a slim bar above the dock (phones) or in the corner (wide), shown late; see pwa-boot.js ═══ */
body.mw-app .mw-install-card{ position:fixed; z-index:60; left:12px; right:12px; bottom:calc(var(--dock-h, 64px) + 10px); margin:0; max-width:460px;
  display:flex; align-items:center; gap:10px; padding:10px 8px 10px 16px; border:1px solid rgba(255,255,255,.14); border-radius:16px; background:#0B1B2B; color:#fff; box-shadow:0 14px 40px rgba(6,16,28,.35); animation:mw-install-in .35s ease both; }
@keyframes mw-install-in{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
body.mw-app .mw-install-txt{ flex:1 1 auto; min-width:0; }
body.mw-app .mw-install-card .mw-install-t{ margin:0; font-size:14.5px; font-weight:700; line-height:1.25; letter-spacing:-.01em; color:#fff; }
body.mw-app .mw-install-card .mw-install-b{ margin:2px 0 0; font-size:12.5px; line-height:1.35; color:#C9D6E4; }
body.mw-app .mw-install-go{ flex:none; min-height:40px; padding:0 14px; border:0; border-radius:999px; background:#fff; color:#0B1B2B; font:700 13.5px/1 var(--sans); cursor:pointer; }
body.mw-app .mw-install-x{ flex:none; width:44px; height:44px; display:grid; place-items:center; border:0; border-radius:50%; background:transparent; color:#C9D6E4; cursor:pointer; }
body.mw-app .mw-install-x:hover{ background:rgba(255,255,255,.1); color:#fff; }
body.mw-app .mw-install-go:focus-visible, body.mw-app .mw-install-x:focus-visible{ outline:2px solid #7FB2FF; outline-offset:2px; }
@media (min-width:900px){ body.mw-app .mw-install-card{ left:auto; right:24px; bottom:24px; } }
@media (prefers-reduced-motion:reduce){ body.mw-app .mw-install-card{ animation:none; } }
@media print{ .mw-install-card{ display:none !important; } }
/* The new-version bar (pwa-boot.js) wears the install card; on desktop it takes the free bottom-left
   corner, because the Access button and the Ask bar own the bottom right. */
@media (min-width:900px){ body.mw-app .mw-update-card{ left:24px; right:auto; } }

/* ═══ Phones: raise the floor on the smallest labels ═══
   The mono kickers are 10.5 to 11px, which reads on a desktop and does not on a phone held at arm's length.
   The type stays the same; only the size moves, and only below 760px. The prototype tag keeps its own size: it has a 44px hit area and must not crowd the bar. */
@media (max-width:759px){
  body.mw-app .ux-tile-k{ font-size:11.5px !important; letter-spacing:.1em !important; }
  body.mw-app .mw-photo-credit{ letter-spacing:.08em !important; }
  body.mw-app .ux-act-when{ font-size:12px !important; }
  body.mw-app .mw-photo-credit{ font-size:11.5px !important; letter-spacing:.08em !important; }
  body.mw-app .fx-ribbon-credit{ font-size:11.5px !important; }
  body.mw-app .mw-updates-kind, body.mw-app .mw-updates-status{ font-size:12px !important; }
  body.mw-app .ft-h{ font-size:12px !important; }
}

/* PREVIEW: the top tab names the program in full where there is room */
.mw-tab-kicker{ display:none; }
@media (min-width:1100px){ .mw-tab-kicker{ display:inline; margin-right:.3em; } }

/* ═══ Deep pass, 21 Sep: defects found by walking every page at four widths, two themes and two languages ═══ */

/* The Access tab is the only <button> in the dock, so with no background of its own it drew the browser's
   default button face: a pale chip in light, a mid-grey chip on the dark dock, and a contrast failure in both. */
body.mw-app .mw-tab-access{ background:transparent; border:0; appearance:none; -webkit-appearance:none; font-family:inherit; cursor:pointer; }

/* The smallest type on the site was 8.5 to 10.5px. Nothing reads below 11px on a phone held at arm's length.
   The wordmark keeps its own size because it is a logo, not text to read. */
body.mw-app .mw-proto-pill{ font-size:11px !important; }
@media (max-width:420px){ body.mw-app .mw-proto-pill{ padding:0 8px !important; letter-spacing:.05em !important; } }
body.mw-app .mw-eyebrow{ font-size:11px; }
body.mw-app .mw-sitefoot small, body.mw-app .mw-photo-credit, body.mw-app .ux-tile-k{ font-size:11px; }

/* At 320 the app bar could not shrink: its first column held its full width and pushed the language button
   off the screen. The columns may shrink, and the staff page's own tag steps aside on the narrowest phones. */
@media (max-width:899px){
  body.mw-app .mw-appbar-in > *, body.mw-app .mw-masthead-in > *{ min-width:0; }
}
@media (max-width:420px){ body.mw-app[data-staff-gate] .hwrap, body.mw-app[data-staff] .hwrap .tag{ display:none !important; } }

/* The staff page's bar carries a brand, a tag, a signed-in name and a toolbar. Three of those fit a phone; four do not,
   so below 520px it becomes two rows and the language and theme buttons stay on screen. */
@media (max-width:520px){
  body.mw-app[data-staff-gate] .hwrap, body.mw-app[data-staff] .hwrap{ grid-template-columns:minmax(0,1fr) auto !important; grid-template-rows:auto auto !important; row-gap:4px; column-gap:8px; padding:8px 12px !important; min-height:0 !important; }
  body.mw-app[data-staff-gate] .hwrap, body.mw-app[data-staff] .hwrap .mw-brand-btn{ grid-column:1 !important; grid-row:1 !important; }
  body.mw-app[data-staff-gate] .hwrap, body.mw-app[data-staff] .hwrap .mw-toolbar{ grid-column:2 !important; grid-row:1 !important; }
  body.mw-app[data-staff-gate] .hwrap, body.mw-app[data-staff] .hwrap .mw-proto-pill{ grid-column:1 / -1 !important; grid-row:2 !important; justify-self:start; }
  body.mw-app[data-staff-gate] .hwrap, body.mw-app[data-staff] .hwrap .mw-staff-who{ display:none !important; }
}

/* The offline page centres its card by making the body a row-wise flex box. The shared footer is injected into that
   same body, so it became a second column squeezed beside the card. The body is a column; the card centres inside it. */
body.mw-app.mw-offline-page{ display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; padding:0 !important; }
body.mw-app.mw-offline-page > #main{ flex:1 1 auto; display:block; width:100%; max-width:calc(44ch + 2 * var(--ux-gutter, 20px)); margin:0 auto; padding:clamp(28px,7vw,56px) var(--ux-gutter,20px); }
body.mw-app.mw-offline-page > .mw-sitefoot{ margin-top:0 !important; }

/* ═══════════════════════════════════════════════════════════════
   Studio Review 23 Sep (91, 93, 94, 97, 98, 99): the same hover and transition system on the other
   pages, text that uses the width it has, and the footer line moved to the base row.
   Hover needs a real pointer so nothing sticks on touch; motion respects the Access panel.
   ═══════════════════════════════════════════════════════════════ */
:root{ --ux-ease:cubic-bezier(.2,.7,.3,1); }
/* long-form paragraphs get more measure on a wide screen (review 91) */
@media (min-width:1600px){ :root{ --prose:86ch; } }

@media (hover:hover){
  body.mw-app .ux-tile,
  body.mw-app .ux-act,
  body.mw-app .mw-updates-item,
  body.mw-app .mw-card,
  body.mw-app .mw-drawer,
  body.mw-app .rp-card{
    transition:transform .22s var(--ux-ease), box-shadow .22s var(--ux-ease), border-color .22s var(--ux-ease);
  }
  body.mw-app .ux-act:hover,
  body.mw-app .mw-updates-item:hover,
  body.mw-app .mw-card:hover,
  body.mw-app .rp-card:hover{
    transform:translateY(-3px);
    box-shadow:0 14px 34px rgba(10,42,67,.14);
    border-color:color-mix(in srgb, var(--blue) 45%, transparent);
  }
  html[data-theme="dark"] body.mw-app .ux-act:hover,
  html[data-theme="dark"] body.mw-app .mw-updates-item:hover,
  html[data-theme="dark"] body.mw-app .mw-card:hover,
  html[data-theme="dark"] body.mw-app .rp-card:hover{ box-shadow:0 14px 34px rgba(0,0,0,.5); }
  /* the photo tiles on the home strip: the picture moves, the tile does not, so the row stays flush */
  body.mw-app .ux-tile img{ transition:transform .5s var(--ux-ease); }
  body.mw-app .ux-tile:hover img{ transform:scale(1.045); }
  body.mw-app .ux-tile::after{ content:""; position:absolute; inset:0; background:rgba(10,42,67,0); transition:background .25s var(--ux-ease); pointer-events:none; }
  body.mw-app .ux-tile:hover::after{ background:rgba(10,42,67,.16); }
  body.mw-app .ft-list a,
  body.mw-app .ft-list button{ transition:color .18s var(--ux-ease), transform .18s var(--ux-ease); display:inline-block; }
  body.mw-app .ft-list a:hover,
  body.mw-app .ft-list button:hover{ transform:translateX(2px); }
  body.mw-app .ft-pill{ transition:transform .18s var(--ux-ease), background-color .18s; }
  body.mw-app .ft-pill:hover{ transform:translateY(-2px); }
}
@media (prefers-reduced-motion:reduce){
  body.mw-app .ux-act:hover, body.mw-app .mw-updates-item:hover, body.mw-app .mw-card:hover,
  body.mw-app .rp-card:hover, body.mw-app .ux-tile:hover img, body.mw-app .ft-pill:hover,
  body.mw-app .ft-list a:hover, body.mw-app .ft-list button:hover{ transform:none; }
}
html[data-motion="reduce"] body.mw-app *:hover{ transform:none !important; }

/* Footer text uses the footer's width, and the two standing lines are justified (reviews 94, 95) */
body.mw-app .mw-sitefoot .ft-lede{ max-width:none; }
@media (min-width:760px){
  body.mw-app .mw-sitefoot .ft-lede,
  body.mw-app .mw-sitefoot .ft-note{ text-align:justify; text-justify:inter-word; hyphens:auto; }
}
/* "A City of West Palm Beach initiative" belongs with the base line, not under the wordmark (review 93) */
.ft-base .ft-initiative{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--footer-muted); }

/* The compact Ask bar (review 100). It sits above the dock on every page but Ask, and raises --dock-h
   so every sticky offset and bottom padding already in the sheet accounts for it. */
body.mw-app.has-askbar{ --askbar-h:56px; }
@media (max-width:899px){ body.mw-app.has-askbar{ --dock-h:calc(var(--app-tab) + var(--askbar-h) + env(safe-area-inset-bottom,0px)); } }
.mw-askbar{
  position:fixed; z-index:55; left:0; right:0; bottom:calc(var(--app-tab) + env(safe-area-inset-bottom,0px));
  display:flex; align-items:center; gap:10px; height:var(--askbar-h,56px); padding:0 clamp(12px,2vw,20px);
  background:var(--surface); border-top:1px solid var(--line);
  box-shadow:0 -8px 24px rgba(10,42,67,.08);
}
html[data-theme="dark"] .mw-askbar{ box-shadow:0 -8px 24px rgba(0,0,0,.45); }
.mw-askbar-l{ display:inline-flex; align-items:center; gap:8px; flex:none; font-size:13px; font-weight:600; color:var(--ink-2); cursor:pointer; }
.mw-askbar-l svg{ width:18px; height:18px; }
@media (max-width:599px){ .mw-askbar-l span{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); } }
.mw-askbar input{
  flex:1 1 auto; min-width:0; height:38px; padding:0 14px; font:inherit; font-size:15px;
  color:var(--ink); background:var(--canvas); border:1px solid var(--line); border-radius:999px;
}
.mw-askbar input:focus-visible{ outline:2px solid var(--blue); outline-offset:1px; }
.mw-askbar-go{
  flex:none; width:38px; height:38px; display:grid; place-items:center; border:0; border-radius:999px;
  background:var(--blue); color:#fff; cursor:pointer; font-family:inherit;
  transition:transform .18s var(--ux-ease), background-color .18s;
}
.mw-askbar-go svg{ width:19px; height:19px; }
@media (hover:hover){ .mw-askbar-go:hover{ transform:translateX(2px); } }
/* on a wide screen the dock is gone, so the bar keeps to the content column and sits at the bottom right */
@media (min-width:900px){
  /* the Access button owns the bottom-right corner; Ask sits above it as the same kind of button and
     opens the bar in its place (right-aligned, growing leftward) */
  .mw-askbar{ left:auto; right:18px; bottom:70px; width:min(460px, calc(100vw - 36px)); border:1px solid var(--line); border-radius:999px; padding:0 6px 0 16px;
    box-shadow:var(--ux-shadow-hi, 0 12px 32px rgba(10,42,67,.18)); transform-origin:100% 100%; }
  .mw-askbar:not(.is-open){ display:none; }
  /* open, the field gets the room; the label stays for screen readers, the magnifier stays in view */
  .mw-askbar-l span{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .mw-askbar input{ height:42px; font-size:15.5px; }
  .mw-askbar.is-open{ animation:mw-askbar-in .18s var(--ux-ease, ease-out); }
  body.mw-app.has-askbar .mw-sitefoot .ft-base{ padding-bottom:110px; }
  body.mw-app.has-askbar{ --dock-h:0px; }
}
@keyframes mw-askbar-in{ from{ opacity:0; transform:scale(.96) translateY(6px); } to{ opacity:1; transform:none; } }
html[data-motion="reduce"] .mw-askbar.is-open{ animation:none; }
@media (prefers-reduced-motion:reduce){ .mw-askbar.is-open{ animation:none; } }
/* the Ask button: the Access button's twin (ink pill, mono caps), stacked above it */
.mw-askbar-fab{ display:none; }
@media (min-width:900px){
  body.mw-app .mw-askbar-fab{
    display:inline-flex; align-items:center; gap:8px; position:fixed; right:18px; bottom:70px; z-index:56;
    min-height:44px; padding:0 16px; border-radius:999px;
    background:var(--ink); color:var(--surface); border:1px solid var(--ink); cursor:pointer;
    font-family:var(--mono) !important; font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
    box-shadow:var(--ux-shadow-hi, 0 6px 20px rgba(15,16,18,.26));
  }
  body.mw-app .mw-askbar-fab svg{ width:17px; height:17px; }
  body.mw-app .mw-askbar-fab:hover{ filter:brightness(1.08); }
  body.mw-app .mw-askbar-fab[aria-expanded="true"]{ display:none; }
}
.mw-askbar-x{ display:none; }
@media (min-width:900px){
  .mw-askbar-x{ flex:none; display:grid; place-items:center; width:38px; height:38px; margin-left:-4px; border:0; border-radius:999px;
    background:transparent; color:var(--ink-2); cursor:pointer; font-family:inherit; }
  .mw-askbar-x:hover{ background:var(--canvas); color:var(--ink); }
  .mw-askbar-x svg{ width:18px; height:18px; }
}

/* ═══ Next-level pass (Lane 1): field outlines, focus, the smallest type, new Ask views ═══ */

/* Visually hidden, still read aloud ("opens in a new tab" and similar) */
.mw-sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }

/* Form fields: a 3:1 outline in both themes (--field-line, app.css) */
body.mw-app .mw-ask-field,
body.mw-app #askbox,
body.mw-app .mw-ask-sticky .ask-field,
html[data-theme="dark"] body.mw-app .mw-ask-field,
html[data-theme="dark"] body.mw-app #askbox,
html[data-theme="dark"] body.mw-app .mw-ask-sticky .ask-field{ border-color:var(--field-line) !important; }
body.mw-app .mw-askbar input,
body.mw-app .mw-review-dlg input,
body.mw-app textarea,
body.mw-app select,
body.mw-app input[type="text"],
body.mw-app input[type="email"],
body.mw-app input[type="tel"],
body.mw-app input[type="search"]:not(#ask-home-input):not(#ask-sticky-input){ border-color:var(--field-line) !important; }
body.mw-app .mw-ask-field:focus-within,
body.mw-app #askbox:focus-within,
body.mw-app textarea:focus,
body.mw-app input:focus{ border-color:var(--blue) !important; }

/* The hero question box sits on a dark photo: its focus ring is white and wide enough to see there */
body.mw-app .mw-bleed-hero #askbox:focus-within,
body.mw-app .mw-bleed-hero .mw-ask-field:focus-within{
  outline:3px solid #FFFFFF !important; outline-offset:3px;
  border-color:var(--blue) !important;
}
body.mw-app .mw-bleed-hero .mw-ask-send:focus-visible{ outline:3px solid var(--ink) !important; outline-offset:2px; }
.mw-ask-notice{
  margin:10px 0 0 !important; max-width:min(720px,100%) !important;
  font-size:13px !important; line-height:1.45; color:rgba(255,255,255,.86) !important;
}

/* Headings and views that take focus after a view change: the move is announced, the ring is not needed */
body.mw-app .mw-thread-main[tabindex="-1"]:focus,
body.mw-app .mw-thread-main h1[tabindex="-1"]:focus,
body.mw-app .mw-report-col h2[tabindex="-1"]:focus,
body.mw-app .mw-updates-item[tabindex="-1"]:focus:not(:focus-visible){ outline:none; }

/* The emergency reply (the assistant flagged 911): red leads, the non-emergency lines follow */
.ux-emg{ margin-top:18px; padding:18px 20px; border-radius:var(--ux-r, 14px); border:2px solid var(--status-red); background:var(--alert-bg); }
body.mw-app .ux-emg .ux-refusal-h{ margin-top:0 !important; color:var(--status-red) !important; }
.ux-emg .lede{ color:var(--ink) !important; }
body.mw-app .ux-emg-call{ display:inline-flex; align-items:center; min-height:48px; padding:0 22px; border-radius:999px; background:var(--status-red) !important; border-color:var(--status-red) !important; color:#FFFFFF !important; font-weight:700; font-size:17px; text-decoration:none; }
html[data-theme="dark"] body.mw-app .ux-emg-call{ background:#B42318 !important; border-color:#B42318 !important; }
.ux-emg-lines{ list-style:none; margin:8px 0 18px; padding:0; display:grid; gap:8px; }
.ux-emg-lines a{ display:inline-flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline; min-height:44px; color:var(--blue); }
.ux-emg-lines small{ font-size:13px; color:var(--ink-2); }

/* A published notice answered in place */
.ux-notice-body p{ margin:14px 0 0; font-size:16px; line-height:1.6; color:var(--ink-2); max-width:64ch; }
.ux-notice-body strong{ color:var(--ink); }
body.mw-app .ux-notice .mw-btn{ margin-top:18px; }

/* Updates: the item a link points at */
body.mw-app .mw-updates-item.is-target{ box-shadow:0 0 0 3px var(--blue), var(--ux-shadow); }
body.mw-app .mw-updates-group{ display:contents; }
.mw-updates-cat{ display:inline-flex; align-items:center; gap:8px; }

/* Report: location lookup */
.mw-report-locmsg{ margin:10px 0 0; font-size:14px; font-weight:600; color:var(--alert); }
.textbtn[aria-busy="true"]{ opacity:.7; cursor:progress; }

/* The smallest type: 12px for labels and meta, 13px for status chips (was 9 to 11.5px) */
body.mw-app{ --text-xs:12px; }
body.mw-app .mw-proto-pill{ font-size:12px !important; }
body.mw-app .mw-eyebrow,
body.mw-app .mw-sitefoot small,
body.mw-app .mw-photo-credit,
body.mw-app .ux-tile-k,
body.mw-app .ux-act-when,
body.mw-app .ux-upd-date,
body.mw-app .ux-sources-l,
body.mw-app .ux-try-l,
body.mw-app .ft-h,
body.mw-app .ft-brand small,
body.mw-app .ft-base .ft-initiative,
body.mw-app .mw-updates-status,
body.mw-app .mw-answer-kicker,
body.mw-app .ux-refusal .mw-asked,
body.mw-app .ux-source-l{ font-size:12px !important; }
body.mw-app .mw-titleblock dt{ font-size:12px !important; }
body.mw-app .mw-updates-meta{ font-size:12px !important; }
body.mw-app .ux-chip,
body.mw-app .ux-stat span,
body.mw-app .mw-updates-kind,
body.mw-app .mw-kick,
body.mw-app .mw-detail-status .mw-kick,
body.mw-app .mw-thread-main .mw-kick-lg{ font-size:13px !important; }
@media (max-width:420px){ body.mw-app .mw-proto-pill{ letter-spacing:0 !important; padding:0 6px !important; } }
/* a heading that received focus from a view change is not a control: no ring around the title */
body.mw-app .mw-thread-main h1[tabindex="-1"]:focus,
body.mw-app .mw-report-col h2[tabindex="-1"]:focus{ outline:none !important; box-shadow:none !important; }

/* The city on the horizon (25 Sep 2026, operator's drawing "To use"): the West Palm Beach skyline runs
   the full width of every page and stands on the footer's blue divider, which reads as the water. One ink
   through a mask, so it follows both themes and high contrast; decorative, so the page never announces it.
   The footer's top margin grows by the drawing's height (its width over the 4.329 aspect, never capped, so it always touches both edges). The footer is
   zoomed by the text-size setting, so the viewport width is divided by that scale. */
body.mw-app footer.mw-sitefoot{ --sky-h:calc(100vw / var(--a11y-scale, 1) / 4.329);
  margin-top:calc(clamp(24px,3vw,40px) + var(--sky-h)) !important; }
body.mw-app .mw-sitefoot::after{
  content:""; position:absolute; left:0; right:0; bottom:100%; height:var(--sky-h);
  pointer-events:none; background-color:var(--footer); opacity:.92;
  /* the drawing, always full width, as tall as its aspect needs, so it touches both edges on any screen;
     the second layer keeps the ground line solid along the divider */
  -webkit-mask:url(illustrations/skyline.svg) center bottom / contain no-repeat,
    linear-gradient(#000 0 0) center bottom / 100% calc(var(--sky-h) * .016) no-repeat;
  mask:url(illustrations/skyline.svg) center bottom / contain no-repeat,
    linear-gradient(#000 0 0) center bottom / 100% calc(var(--sky-h) * .016) no-repeat;
}
html[data-theme="dark"] body.mw-app .mw-sitefoot::after{ background-color:var(--ink-2); opacity:.5; }
@media (forced-colors:active){ body.mw-app .mw-sitefoot::after{ forced-color-adjust:none; background-color:CanvasText; } }
@media print{ body.mw-app .mw-sitefoot::after{ display:none; } body.mw-app footer.mw-sitefoot{ margin-top:24px !important; } }