/* ESA Flight Router: styled after expertsummitanchors.com (Oswald headings, Montserrat body, ESA red #c32b2b,
   charcoal/slate header gradient #1d262a -> #394751, square buttons with the site's red gradient).
   Mobile-first: base 17px, single column until 768px, 44px+ tap targets, no horizontal scroll. */
@font-face { font-family:'Oswald'; font-style:normal; font-weight:400; font-display:swap; src:url(/static/fonts/oswald-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family:'Oswald'; font-style:normal; font-weight:500; font-display:swap; src:url(/static/fonts/oswald-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family:'Oswald'; font-style:normal; font-weight:600; font-display:swap; src:url(/static/fonts/oswald-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:400; font-display:swap; src:url(/static/fonts/montserrat-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:500; font-display:swap; src:url(/static/fonts/montserrat-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:600; font-display:swap; src:url(/static/fonts/montserrat-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:700; font-display:swap; src:url(/static/fonts/montserrat-latin-700-normal.woff2) format('woff2'); }

:root {
  /* ESA palette (expertsummitanchors.com theme --color_1..7 + site CSS) */
  --red:#c32b2b;        /* color_7: primary brand red */
  --red-bright:#ff0000; /* color_3: nav underline accent (non-text only: fails AA as text) */
  --red-deep:#4d0c0c;   /* button gradient start */
  --red-text:#a52323;   /* derived: link red, 7.3:1 on white */
  --charcoal:#1d262a;   /* color_6 */
  --slate:#394751;      /* header gradient end */
  --slate-2:#3c4759;    /* color_4: steel blue-slate */
  --steel:#b8b4b5;      /* color_5: warm grey */
  --mist:#dedfe1;       /* site border/icon grey */
  --bg:#f0f0f0;         /* site page background */
  --card:#ffffff; --ink:#1a1a1a; --muted:#3c4759; --line:#dedfe1;
  --red-tint:#f6e3e3; --slate-tint:#e4e7ec; --steel-tint:#efeeee;
  --ok:#1f6b36; --warn:#8a5a00; --bad:#a52323;
  --head:'Oswald', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --body:'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --btn-grad:linear-gradient(405deg, #4d0c0c 0%, #c32b2b 100%);
  --dark-grad:linear-gradient(0deg, #1d262a 0%, #394751 100%);
}
*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font:500 17px/1.55 var(--body); color:var(--ink); background:var(--bg); overflow-wrap:anywhere; }
img, svg, video { max-width:100%; }
h1, h2, h3 { font-family:var(--head); font-weight:400; text-transform:uppercase; letter-spacing:.02em; line-height:1.2; color:var(--charcoal); }
h1 { font-size:1.75rem; margin:.5rem 0 1.1rem; }
h1::after { content:''; display:block; width:72px; height:3px; background:var(--red); margin-top:.45rem; }
h2 { font-size:1.3rem; margin:0 0 .75rem; }
h2::after { content:''; display:block; width:48px; height:3px; background:var(--red); margin-top:.35rem; }
h3 { font-size:1.08rem; margin:1.1rem 0 .3rem; font-weight:500; }
a { color:var(--red-text); text-underline-offset:2px; }
a:hover { color:var(--red-deep); }
code { background:#f1f1f1; border:1px solid var(--line); padding:.05em .3em; font-size:.88em; }
.wrapcode { display:block; word-break:break-all; padding:.5rem .6rem; }
.muted { color:var(--muted); } .small { font-size:.9rem; }
:focus-visible { outline:3px solid var(--red); outline-offset:2px; }

/* Header: the site's dark gradient bar with uppercase Oswald nav and red underline on the active item */
.topbar { background:var(--dark-grad); color:#fff; padding:.4rem 1rem .25rem; box-shadow:0 2px 8px rgba(0,0,0,.25); }
.brand { color:#fff; text-decoration:none; display:inline-flex; align-items:center; gap:.65rem; min-height:56px; }
.brand:hover { color:#fff; }
.brand img.esa { height:52px; width:auto; }
.brand-text { display:flex; flex-direction:column; line-height:1.1; }
.brand-name { font-family:var(--head); text-transform:uppercase; font-size:1.25rem; letter-spacing:.04em; display:inline-flex; align-items:center; gap:.4rem; }
.brand-name img { width:26px; height:26px; }
.brand-sub { font-size:.8rem; color:#c9ced2; font-weight:500; }
.nav { display:flex; flex-wrap:wrap; gap:0 .1rem; margin-top:.15rem; }
.nav a, .nav .linklike { color:#fff; text-decoration:none; display:inline-flex; align-items:center; min-height:44px; padding:0 .7rem; font:400 1rem var(--head); text-transform:uppercase; letter-spacing:.03em; border-bottom:3px solid transparent; }
.nav a:hover, .nav .linklike:hover { border-bottom-color:rgba(195,43,43,.6); color:#fff; }
.nav a.on { border-bottom-color:var(--red); }
.nav .user-group { display:inline-flex; align-items:center; margin-left:auto; }
.nav .whoami { display:inline-flex; align-items:center; min-height:44px; padding:0 .5rem 0 .7rem; color:#d9d6d7; font:500 .95rem var(--body); text-transform:none; letter-spacing:0; border-left:1px solid rgba(255,255,255,.18); }
.nav .whoami::before { content:""; width:.55rem; height:.55rem; border-radius:50%; background:#3fb36b; margin-right:.45rem; }
.linklike { background:none; border:0; cursor:pointer; }
form.inline { display:inline; margin:0; }

.wrap { max-width:1140px; margin:0 auto; padding:1.1rem 1rem; }
.wrap.wide { max-width:1440px; }
.foot { background:var(--charcoal); color:#c9ced2; text-align:center; font-size:.85rem; padding:1.25rem 1rem; margin-top:1.5rem; border-top:3px solid var(--red); }

/* Cards: square corners like the site's content blocks */
.card { background:var(--card); border:1px solid var(--line); border-top:3px solid var(--red); padding:1.1rem; margin:0 0 1rem; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.grid { display:grid; grid-template-columns:1fr; gap:1rem; }
.grid > .card { margin:0; }
.stack { display:flex; flex-direction:column; gap:.95rem; }
.row { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; }
.row form { margin:0; }

label { display:flex; flex-direction:column; gap:.3rem; font-weight:600; font-size:1rem; }
label.check { flex-direction:row; align-items:center; gap:.7rem; font-weight:500; min-height:44px; cursor:pointer; }
.help { font-weight:400; color:var(--muted); font-size:.9rem; }
input, select, textarea { font:500 17px var(--body); min-height:48px; padding:.55rem .75rem; border:1px solid #9aa2a8; border-radius:0; background:#fff; color:var(--ink); width:100%; max-width:100%; }
textarea { min-height:96px; resize:vertical; }
input:focus, select:focus, textarea:focus { border-color:var(--red); outline:2px solid rgba(195,43,43,.35); outline-offset:0; }
input[type=checkbox] { width:24px; height:24px; min-height:24px; margin:0; flex:0 0 24px; accent-color:var(--red); }
input[type=file] { padding:.6rem; }

/* Buttons: square, Oswald, ESA red gradient; hover swaps to the charcoal gradient (as on the site) */
.btn { display:inline-flex; align-items:center; justify-content:center; text-align:center; min-height:48px; padding:.5rem 1.25rem; border-radius:0; border:1px solid var(--charcoal); background:#fff; color:var(--charcoal); font:400 1.05rem var(--head); letter-spacing:.02em; text-decoration:none; cursor:pointer; }
.btn:hover { background:var(--dark-grad); color:#fff; border-color:var(--charcoal); }
.btn.primary { background:var(--btn-grad); color:#fff; border-color:var(--red-deep); box-shadow:0 2px 6px rgba(77,12,12,.25); }
.btn.primary:hover { background:var(--dark-grad); border-color:var(--charcoal); }
.btn.small { min-height:44px; padding:.35rem .95rem; font-size:1rem; }
.btn:disabled { opacity:.6; cursor:progress; }
.stack .btn, .card > form > .btn.primary { width:100%; }

.flash { padding:.75rem 1rem; margin:0 0 1rem; border-left:4px solid; background:#fff; }
.flash.ok { border-color:var(--ok); background:#eef7f1; } .flash.info { border-color:var(--slate-2); background:#eef1f4; }
.flash.error { border-color:var(--red); background:#fbe6e4; }
.pill { display:inline-block; padding:.12rem .55rem; font-size:.82rem; font-weight:600; background:#e4e6e8; color:#2b3439; text-transform:uppercase; letter-spacing:.03em; }
.pill.ok { background:#e2f2e7; color:var(--ok); } .pill.warn { background:#fff4dc; color:var(--warn); } .pill.bad { background:#fbe6e4; color:var(--bad); }
.pill.car { background:#e2f2e7; color:var(--ok); } .pill.uber { background:var(--charcoal); color:#fff; } .pill.truck { background:#eef1f4; color:var(--slate-2); border:1px solid var(--slate-2); }
.jobstatus:empty { display:none; }
.jobstatus { margin:.75rem 0 0; font-weight:600; }

.stats { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.5rem; margin:0 0 .85rem; }
.stats div { background:#fff; border:1px solid var(--line); border-left:4px solid var(--red); padding:.45rem .7rem; }
.stats dt { font-size:.78rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; font-weight:600; }
.stats dd { margin:0; font:500 1.35rem var(--head); color:var(--charcoal); }
.card .stats div { background:#f6f6f6; }

.filters { display:flex; flex-direction:column; gap:.75rem; margin-bottom:1rem; }
.list { list-style:none; margin:0 0 1rem; padding:0; }
.item { background:#fff; border:1px solid var(--line); padding:.75rem 1rem; margin-bottom:.5rem; display:flex; flex-direction:column; gap:.45rem; }
.item-meta { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; }
.item-meta form { display:flex; gap:.4rem; align-items:center; margin:0; }
.item-meta select { width:auto; min-width:9.5rem; }
.pager { display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; justify-content:space-between; }

/* Login: ESA rooftop-anchor photo under the site's dark overlay */
body.login-page { background:#1d262a url(/static/brand/rooftop-anchors.jpg) center/cover no-repeat fixed; background-image:linear-gradient(rgba(29,38,42,.86), rgba(29,38,42,.92)), url(/static/brand/rooftop-anchors.jpg); }
body.login-page .foot { background:transparent; border-top:0; }
.card.login { max-width:440px; margin:1.5rem auto; text-align:left; border-top:4px solid var(--red); }
.login-brand { display:flex; flex-direction:column; align-items:center; text-align:center; gap:.35rem; margin-bottom:1rem; }
.login-brand img.esa { width:112px; height:auto; }
.login-brand h1 { margin:.25rem 0 0; }
.login-brand h1::after { margin:.45rem auto 0; }
.login-brand .appmark { display:inline-flex; align-items:center; gap:.4rem; color:var(--muted); font-weight:600; font-size:.95rem; }
.login-brand .appmark img { width:24px; height:24px; }

/* Route page */
.routegrid { display:flex; flex-direction:column; gap:1rem; }
#map { height:58vh; min-height:300px; width:100%; border:1px solid var(--line); border-top:3px solid var(--red); background:#dde2e5; }
.legend { display:flex; flex-wrap:wrap; gap:.9rem; margin:.5rem 0; font-size:.9rem; color:var(--muted); }
.lg { display:inline-block; width:14px; height:14px; border-radius:50%; margin-right:.35rem; vertical-align:-2px; border:2px solid #fff; box-shadow:0 0 0 1px #0004; }
.lg.home { background:#1d262a; box-shadow:0 0 0 2px #ff0000; } .lg.stop { background:#c32b2b; } .lg.fuel { background:#b8b4b5; } .lg.cust { background:#3c4759; } .lg.truck { background:#4d0c0c; }
.day { background:#fff; border:1px solid var(--line); border-left:4px solid var(--red); margin-bottom:.6rem; }
.day.ground { border-left-color:var(--red-deep); }
.day > summary { list-style:none; cursor:pointer; min-height:56px; padding:.6rem 1rem; display:flex; flex-wrap:wrap; gap:.2rem .75rem; align-items:center; }
.day > summary::-webkit-details-marker { display:none; }
.day > summary::before { content:'▸'; color:var(--red); } .day[open] > summary::before { content:'▾'; }
.dnum { font:500 1.1rem var(--head); text-transform:uppercase; letter-spacing:.03em; } .dsum { color:var(--muted); font-size:.92rem; }
.day-body { padding:0 1rem 1rem; }
.timebar { display:flex; height:10px; background:#eceeef; margin:.25rem 0 .5rem; }
.timebar span { display:block; height:100%; } .tb-f { background:#c32b2b; } .tb-d { background:#3c4759; } .tb-s { background:#b8b4b5; }
.legs, .visits { padding-left:1.25rem; margin:.25rem 0; } .legs li, .visits li { margin:.45rem 0; }
.visit-head { display:flex; flex-wrap:wrap; gap:.4rem .6rem; align-items:center; margin-top:1rem; }
.visit-head h3 { margin:0; }
.section-title { margin-top:1.5rem; }
.num-icon { background:#c32b2b; color:#fff; border:2px solid #fff; border-radius:50%; font:600 13px/24px var(--head); text-align:center; box-shadow:0 1px 3px #0006; }
.num-icon.home { background:#1d262a; box-shadow:0 0 0 2px #ff0000, 0 1px 4px #000a; } .num-icon.fuel { background:#b8b4b5; color:#1a1a1a; } .num-icon.truck { background:#4d0c0c; }
.leaflet-container { font-family:var(--body); }

@media (min-width: 600px) {
  .stats { grid-template-columns:repeat(3, minmax(0,1fr)); }
  .filters { flex-direction:row; align-items:flex-end; } .filters label { flex:1; }
  .item { flex-direction:row; justify-content:space-between; align-items:center; }
  .card.login { margin-top:3rem; padding:1.5rem 1.75rem; }
}
@media (min-width: 768px) {
  .topbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.35rem 1.5rem; }
  .nav { margin-top:0; }
  .grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .wrap { padding:1.4rem 1.5rem; }
  .stats { grid-template-columns:repeat(6, minmax(0,1fr)); }
  .stack .btn, .card > form > .btn.primary { width:auto; align-self:flex-start; }
  h1 { font-size:2rem; }
}
@media (min-width: 1100px) {
  .grid { grid-template-columns:repeat(3, minmax(0,1fr)); }
  .routegrid { flex-direction:row; align-items:flex-start; }
  .mapcol { flex:3; position:sticky; top:1rem; min-width:0; }
  .listcol { flex:2; min-width:0; max-height:calc(100vh - 2rem); overflow-y:auto; padding-right:.25rem; }
  #map { height:calc(100vh - 7rem); }
}
.visually-hidden { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* Plans */
fieldset.checks { border:1px solid var(--line); padding:.5rem .75rem; margin:0; display:flex; flex-wrap:wrap; gap:0 1rem; }
fieldset.checks legend { font-weight:600; padding:0 .25rem; }
div.checks { display:flex; flex-direction:column; max-height:360px; overflow:auto; border:1px solid var(--line); padding:.25rem .75rem; margin-top:.5rem; }
.row2 { display:grid; grid-template-columns:1fr; gap:.9rem; }
details > summary.btn { list-style:none; margin:.5rem 0; }
details > summary.btn::-webkit-details-marker { display:none; }
.card.best { border-top-color:var(--ok); background:#fbfdfb; }
.card.best h3 { margin:.1rem 0 .4rem; font-size:1.35rem; }
.eyebrow { margin:0; font:500 .85rem var(--head); text-transform:uppercase; letter-spacing:.06em; color:var(--ok); }
.card.plan.is-best { border-top-color:var(--ok); }
.card.plan h3 { margin-top:0; }
.trip { border-top:1px solid var(--line); padding:.75rem 0; }
.trip-head { margin-bottom:.4rem; }
table.cmp { width:100%; border-collapse:collapse; font-size:.95rem; table-layout:fixed; }
table.cmp th, table.cmp td { padding:.45rem .4rem; border-bottom:1px solid var(--line); text-align:right; }
table.cmp th[scope=row] { text-align:left; font-weight:600; color:var(--muted); width:38%; }
table.cmp thead th { font:500 .95rem var(--head); text-transform:uppercase; letter-spacing:.03em; color:var(--charcoal); }
table.cmp td.win { background:#eef7f1; font-weight:700; color:var(--ok); }
.rec { margin:.6rem 0; }
ul.costs { list-style:none; padding:0; margin:.25rem 0 .75rem; }
ul.costs li { display:flex; justify-content:space-between; gap:1rem; padding:.2rem 0; border-bottom:1px dotted var(--line); }
.pill.mode-plane { background:#fbe6e4; color:var(--red-text); } .pill.mode-commercial { background:#e8ecf3; color:#2c3a55; }
.pill.mode-drive { background:#eef1f4; color:var(--slate-2); } .pill.mode-truck { background:#e2f2e7; color:var(--ok); }
@media (min-width: 600px) { .row2 { grid-template-columns:1fr 1fr; } }

@media (max-width: 700px) { .nav .user-group { margin-left:0; flex-basis:100%; } .nav .whoami { border-left:0; } }

/* ---- Full ESA palette applied (v0.3) ---- */
.topbar { border-bottom:3px solid var(--red); }
.nav a.on { border-bottom-color:var(--red-bright); }
.nav a:hover, .nav .linklike:hover { border-bottom-color:var(--steel); }
.brand-sub { color:var(--steel); }
.foot { color:var(--steel); }
a { color:var(--red-text); }
/* buttons: primary = red gradient, secondary = slate outline, tertiary = grey */
.btn { border-color:var(--slate-2); color:var(--slate-2); }
.btn:hover { background:var(--dark-grad); color:#fff; border-color:var(--charcoal); }
.btn.ghost, details > summary.btn { background:var(--steel-tint); border-color:var(--steel); color:var(--charcoal); }
.btn.ghost:hover, details > summary.btn:hover { background:var(--slate-2); border-color:var(--slate-2); color:#fff; }
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline:3px solid var(--red-bright); outline-offset:2px; }
/* cards: red top rule by default; stats tiles alternate brand accents */
.stats > div:nth-child(4n+2) { border-left-color:var(--slate-2); }
.stats > div:nth-child(4n+3) { border-left-color:var(--red-deep); }
.stats > div:nth-child(4n+4) { border-left-color:var(--steel); }
/* badges */
.pill { background:var(--steel-tint); color:var(--charcoal); border:1px solid var(--mist); }
.pill.car, .pill.crew-yes { background:var(--slate-tint); color:var(--slate-2); border-color:var(--slate-2); }
.pill.uber { background:var(--charcoal); color:#fff; border-color:var(--charcoal); }
.pill.crew-no { background:var(--red-tint); color:var(--red-deep); border-color:#e7b9b9; }
.pill.crew-unk { background:#fff; color:var(--slate-2); border:1px dashed var(--steel); }
.pill.svc-insp { background:#fff; color:var(--slate-2); border-color:var(--slate-2); }
.pill.svc-load { background:var(--red-deep); color:#fff; border-color:var(--red-deep); }
.pill.truck { background:var(--red-tint); color:var(--red-deep); border-color:var(--red-deep); }
.pill.rec-tag { background:var(--red); color:#fff; border-color:var(--red); box-shadow:inset 3px 0 0 var(--red-bright); padding-left:.7rem; }
.pill.mode-plane { background:var(--btn-grad); color:#fff; border-color:var(--red-deep); }
.pill.mode-commercial { background:var(--slate-2); color:#fff; border-color:var(--slate-2); }
.pill.mode-drive { background:var(--steel); color:#1a1a1a; border-color:var(--steel); }
.pill.mode-truck { background:var(--charcoal); color:#fff; border-color:var(--charcoal); }
/* plan cards: each plan type gets its own brand accent; the winner gets the bright-red rule */
.card.plan.plan-tour { border-top-color:var(--red); }
.card.plan.plan-nightly { border-top-color:var(--slate-2); }
.card.plan.plan-regional { border-top-color:var(--red-deep); }
.card.plan.truck { border-top-color:var(--charcoal); }
.card.plan.is-best { border-top-color:var(--red-bright); box-shadow:0 0 0 1px var(--red), 0 2px 10px rgba(77,12,12,.15); }
.card.best { border-top-color:var(--red-bright); background:linear-gradient(180deg, var(--red-tint) 0, #fff 5rem); }
.eyebrow { color:var(--red-text); }
table.cmp thead th { background:var(--charcoal); color:#fff; padding:.5rem .4rem; }
table.cmp thead th:first-child { background:transparent; }
table.cmp td.win { background:var(--slate-tint); color:var(--charcoal); box-shadow:inset 0 -3px 0 var(--red); }
/* day sections: alternate brand accents by day; ground (truck) days in deep red */
.day { border-left-color:var(--red); }
.day:nth-of-type(4n+2) { border-left-color:var(--slate-2); }
.day:nth-of-type(4n+3) { border-left-color:var(--red-deep); }
.day:nth-of-type(4n+4) { border-left-color:var(--charcoal); }
.day.ground { border-left-color:var(--red-deep); background:linear-gradient(90deg, var(--red-tint) 0, #fff 3rem); }
.day[open] > summary { background:var(--steel-tint); border-bottom:1px solid var(--mist); }
.day > summary::before { color:var(--red); }
/* map: chart readability + labels */
.leaflet-container .leaflet-overlay-pane path { filter:drop-shadow(0 0 1.5px rgba(29,38,42,.75)); }
.num-icon { box-shadow:0 0 0 1px rgba(29,38,42,.7), 0 1px 4px #000a; }
.map-note { background:rgba(255,255,255,.94); border-left:4px solid var(--red-bright); padding:.3rem .6rem; font:500 .85rem/1.3 var(--body); color:var(--charcoal); box-shadow:0 1px 4px #0004; }
.map-note strong { display:block; font:500 .95rem var(--head); text-transform:uppercase; letter-spacing:.04em; color:var(--red-text); }
.map-note span { display:block; }
.leaflet-control-layers { border-radius:0 !important; border:0 !important; border-top:3px solid var(--red) !important; font:500 .95rem var(--body); }
.leaflet-control-layers label { display:block; margin:0; }
.leaflet-control-layers label > span, .leaflet-control-layers label > div { display:flex; align-items:center; gap:.45rem; min-height:44px; padding-right:.4rem; }
.leaflet-control-layers-toggle { width:44px !important; height:44px !important; }
.leaflet-touch .leaflet-bar a { width:44px; height:44px; line-height:44px; }
.leaflet-control-layers input { width:20px; height:20px; accent-color:var(--red); margin:0; }

/* ---- Settings: sections, sliders, toggles (v0.3) ---- */
.settings { margin-bottom:1.5rem; }
.autosave-note { margin:0 0 .75rem; padding:.55rem .8rem; background:var(--slate-tint); border-left:4px solid var(--slate-2); color:var(--charcoal); font-size:.95rem; }
.settings.js .js-hide { display:none; }
.set-section { background:#fff; border:1px solid var(--line); border-top:3px solid var(--red); margin-bottom:.8rem; }
.set-section.sec-airports, .set-section.sec-ground { border-top-color:var(--slate-2); }
.set-section.sec-days, .set-section.sec-bases { border-top-color:var(--red-deep); }
.set-section.sec-costs { border-top-color:var(--charcoal); }
.set-section > summary { list-style:none; cursor:pointer; min-height:56px; display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; padding:.5rem 1rem; font:400 1.3rem var(--head); text-transform:uppercase; letter-spacing:.03em; color:var(--charcoal); }
.set-section > summary::-webkit-details-marker { display:none; }
.set-section > summary::before { content:'▸'; color:var(--red); font-size:1rem; width:1rem; }
.set-section[open] > summary::before { content:'▾'; }
.set-section[open] > summary { border-bottom:1px solid var(--mist); background:var(--steel-tint); }
.set-section > summary .pill { font-family:var(--body); font-size:.75rem; }
.set-body { padding:.25rem 1rem .5rem; }
.set { padding:.85rem 0; border-bottom:1px solid var(--mist); }
.set:last-child { border-bottom:0; }
.set-label { font-weight:600; color:var(--charcoal); }
.set-head { display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.set-value { font:500 1.5rem/1 var(--head); color:var(--red-text); background:none; border:0; border-bottom:2px dashed var(--steel); padding:.35rem .15rem; min-height:44px; min-width:44px; cursor:pointer; white-space:nowrap; }
.set-value:hover, .set-value[aria-expanded=true] { border-bottom-color:var(--red); }
.set-slider { display:flex; align-items:center; gap:.5rem; margin-top:.35rem; }
.nudge { flex:0 0 48px; width:48px; height:48px; border:1px solid var(--slate-2); background:#fff; color:var(--slate-2); font:500 1.6rem/1 var(--head); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:0; }
.nudge:hover { background:var(--dark-grad); color:#fff; border-color:var(--charcoal); }
.nudge:active { background:var(--btn-grad); color:#fff; }
/* range: 44px hit area, 10px track, 30px thumb, ESA colors */
.set-slider input[type=range] { -webkit-appearance:none; appearance:none; flex:1 1 auto; min-width:0; height:44px; background:transparent; margin:0; cursor:pointer; }
.set-slider input[type=range]::-webkit-slider-runnable-track { height:10px; background:linear-gradient(90deg, var(--slate-2), var(--steel)); border:1px solid var(--charcoal); }
.set-slider input[type=range]::-moz-range-track { height:10px; background:var(--steel); border:1px solid var(--charcoal); }
.set-slider input[type=range]::-moz-range-progress { height:10px; background:var(--red); }
.set-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:30px; height:30px; margin-top:-11px; border-radius:50%; background:var(--btn-grad); border:3px solid #fff; box-shadow:0 0 0 1px var(--red-deep), 0 2px 5px rgba(0,0,0,.35); }
.set-slider input[type=range]::-moz-range-thumb { width:26px; height:26px; border-radius:50%; background:var(--red); border:3px solid #fff; box-shadow:0 0 0 1px var(--red-deep), 0 2px 5px rgba(0,0,0,.35); }
.set-slider input[type=range]:focus-visible { outline:3px solid var(--red-bright); outline-offset:2px; }
.set-exact { display:flex; align-items:flex-end; gap:.5rem; margin-top:.5rem; padding:.6rem; background:var(--steel-tint); border-left:3px solid var(--red); }
.set-exact[hidden] { display:none; }
.set-exact label { flex:1 1 auto; font-size:.9rem; font-weight:600; }
.set-exact input { width:100%; }
.set-foot { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.25rem .75rem; margin-top:.2rem; }
.saved { font:500 .9rem var(--head); text-transform:uppercase; letter-spacing:.05em; color:var(--slate-2); opacity:0; transition:opacity .2s; }
.saved.show { opacity:1; }
.saved.show::before { content:'✓ '; color:var(--red); }
.saved.bad { color:var(--red-text); }
.saved.bad::before { content:'! '; }
/* toggle switch */
.switch { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:48px; cursor:pointer; position:relative; }
.switch input { position:absolute; opacity:0; width:64px; height:44px; right:0; margin:0; cursor:pointer; }
.switch .track { flex:0 0 60px; width:60px; height:34px; background:var(--steel); border:1px solid var(--slate-2); position:relative; transition:background .15s; }
.switch .knob { position:absolute; top:3px; left:3px; width:26px; height:26px; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.4); transition:transform .15s; }
.switch input:checked + .track { background:var(--btn-grad); border-color:var(--red-deep); }
.switch input:checked + .track .knob { transform:translateX(26px); }
.switch input:focus-visible + .track { outline:3px solid var(--red-bright); outline-offset:2px; }
/* segmented control */
.seg { border:0; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:0; }
.seg legend { padding:0; margin-bottom:.4rem; }
.seg label { flex:1 1 0; position:relative; min-width:0; }
.seg input { position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer; }
.seg span { display:flex; align-items:center; justify-content:center; text-align:center; min-height:48px; padding:.3rem .6rem; border:1px solid var(--slate-2); background:#fff; color:var(--slate-2); font-weight:600; }
.seg label + label span { border-left:0; }
.seg input:checked + span { background:var(--dark-grad); color:#fff; border-color:var(--charcoal); box-shadow:inset 0 -3px 0 var(--red); }
.seg input:focus-visible + span { outline:3px solid var(--red-bright); outline-offset:2px; }
.set-text input, .set-text textarea { width:100%; margin-top:.35rem; }
.set-actions { margin-top:1rem; }
@media (min-width: 900px) {
  .set-section[open] .set-body { display:grid; grid-template-columns:1fr 1fr; column-gap:2.5rem; }
  .set-section.sec-bases[open] .set-body { grid-template-columns:1fr; }
}
.set-slider input[type=range] { border:0; padding:0; box-shadow:none; border-radius:0; width:auto; min-height:44px; }
.switch { flex-direction:row; text-align:left; font-weight:600; }
.switch .set-label { flex:1 1 auto; }
.switch .track { height:34px; align-self:center; }
.seg label { display:block; }
.map-error { position:absolute; z-index:1000; left:50%; top:50%; transform:translate(-50%,-50%); width:min(92%, 360px); background:#fff; border-top:4px solid var(--red); box-shadow:0 4px 16px rgba(0,0,0,.35); padding:.9rem 1rem; text-align:center; font-size:.95rem; color:var(--ink); }
.map-error[hidden] { display:none; }
.map-error strong { display:block; font:500 1.15rem var(--head); text-transform:uppercase; color:var(--red-text); margin-bottom:.25rem; }
.map-error span { display:block; margin-bottom:.6rem; }

/* =====================================================================
   SITE MATCH (v0.3.1): modelled on screenshots of expertsummitanchors.com
   (qa/esa-site-1280.png, qa/esa-site-390.png). Dark gradient header with a
   big shield logo + Oswald uppercase nav + red CTA; dark photo hero band with
   eyebrow, uppercase Oswald title and long red rule; flat white sections on
   #eeeeee; red-gradient rectangular buttons in Oswald title case with a thin
   light border and drop shadow; dark gradient footer.
   ===================================================================== */
:root { --bg:#eeeeee; }
body { background:var(--bg); }
a { color:var(--red); }
a:hover { color:var(--red-deep); }

/* Header */
.topbar { padding:0; border-bottom:0; background:var(--dark-grad); box-shadow:0 3px 12px rgba(0,0,0,.35); position:relative; z-index:1100; display:block; }
.topbar-in { max-width:1440px; margin:0 auto; padding:.55rem 1rem; display:flex; align-items:center; gap:.75rem 1.25rem; flex-wrap:wrap; }
.brand { min-height:60px; gap:.7rem; }
.brand img.esa { height:60px; width:auto; filter:drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.brand-name { font-size:1.2rem; font-weight:400; letter-spacing:.03em; }
.brand-sub { color:#d6d3d4; font-size:.78rem; }
.menu-btn { display:none; margin-left:auto; width:48px; height:48px; background:transparent; border:0; cursor:pointer; position:relative; }
.menu-btn .bars, .menu-btn .bars::before, .menu-btn .bars::after { position:absolute; left:11px; width:26px; height:2px; background:#fff; content:''; }
.menu-btn .bars { top:23px; } .menu-btn .bars::before { top:-8px; left:0; } .menu-btn .bars::after { top:8px; left:0; }
.topbar.open .menu-btn .bars { background:transparent; }
.topbar.open .menu-btn .bars::before { top:0; transform:rotate(45deg); }
.topbar.open .menu-btn .bars::after { top:0; transform:rotate(-45deg); }
.nav { margin:0 0 0 auto; align-items:center; gap:0 .35rem; }
.nav a:not(.btn), .nav .linklike { position:relative; border-bottom:0; font:400 1.05rem var(--head); letter-spacing:.02em; padding:0 .75rem; min-height:48px; }
.nav a:not(.btn)::after { content:''; position:absolute; left:.75rem; right:.75rem; bottom:8px; height:2px; background:transparent; }
.nav a:not(.btn):hover::after { background:var(--steel); }
.nav a.on:not(.btn)::after { background:var(--red); }
.nav .nav-cta { margin:0 .4rem 0 .6rem; min-height:46px; padding:.35rem 1.4rem; font:500 1rem var(--head); text-transform:uppercase; letter-spacing:.03em; color:#fff; }
.nav .nav-cta.on { box-shadow:0 0 0 2px #fff, 0 3px 8px rgba(0,0,0,.4); }
.nav .user-group { margin-left:0; }
.nav .whoami { border-left:1px solid rgba(255,255,255,.25); }
@media (max-width: 1023px) {
  .menu-btn { display:block; }
  .topbar .nav { display:none; width:100%; flex-direction:column; align-items:stretch; margin:0; padding:.25rem 0 .75rem; border-top:1px solid rgba(255,255,255,.15); }
  .topbar.open .nav { display:flex; }
  .nav a:not(.btn), .nav .linklike { min-height:48px; padding:0 .25rem; font-size:1.1rem; justify-content:flex-start; }
  .nav a:not(.btn)::after { left:.25rem; right:auto; width:2.5rem; bottom:6px; }
  .nav .nav-cta { margin:.5rem 0; justify-content:center; }
  .nav .user-group { flex-basis:auto; justify-content:space-between; border-top:1px solid rgba(255,255,255,.15); margin-top:.25rem; }
  .nav .whoami { border-left:0; padding-left:.25rem; }
}
@media (max-width: 700px) { .nav .user-group { flex-basis:auto; } }

/* Page hero band (site hero: photo under dark overlay, centred uppercase title, long red rule) */
.page-hero { background:#1d262a; background-image:linear-gradient(rgba(29,38,42,.78), rgba(29,38,42,.9)), url(/static/brand/rooftop-anchors.jpg); background-size:cover; background-position:center 40%; color:#fff; text-align:center; padding:1.8rem 1rem 1.6rem; }
.hero-in { max-width:1140px; margin:0 auto; }
.hero-in.wide { max-width:1440px; }
.page-hero .eyebrow { margin:0 0 .35rem; font:500 .82rem var(--body); text-transform:uppercase; letter-spacing:.06em; color:#e6e3e4; }
.page-hero h1 { color:#fff; margin:0; font-size:1.9rem; letter-spacing:.01em; text-shadow:0 2px 6px rgba(0,0,0,.35); }
.page-hero h1::after { width:min(560px, 92%); height:3px; margin:.6rem auto 0; background:var(--red); }
@media (min-width: 768px) { .page-hero { padding:2.6rem 1rem 2.3rem; } .page-hero h1 { font-size:2.5rem; } }

/* Sections/cards: flat white blocks with a soft shadow, Oswald uppercase headings with a long red rule */
.card, .set-section, .day, .item { border:0; border-top:0; box-shadow:0 1px 4px rgba(0,0,0,.12); }
.card { padding:1.3rem 1.2rem; }
.card h2::after, .section-title::after { width:min(100%, 240px); }
h2 { font-size:1.45rem; color:#000; }
h3 { color:#000; }
.card.plan.is-best, .card.best { box-shadow:0 0 0 2px var(--red), 0 2px 10px rgba(77,12,12,.18); }
.set-section > summary { background:#fff; }
.set-section[open] > summary { background:#fff; border-bottom:2px solid var(--red); }
.day { border-left:4px solid var(--red); }
.eyebrow { font:500 .8rem var(--body); text-transform:uppercase; letter-spacing:.06em; color:var(--charcoal); }

/* Buttons: rectangular, red gradient, thin light border, shadow, Oswald title case (site's "Tell Us About your Building") */
.btn { font:400 1.05rem var(--head); text-transform:none; letter-spacing:.01em; border:1px solid rgba(255,255,255,.75); outline-offset:3px; background:var(--dark-grad); color:#fff; box-shadow:0 3px 7px rgba(0,0,0,.28); }
.btn:hover { background:var(--btn-grad); color:#fff; border-color:rgba(255,255,255,.75); }
.btn.primary { background:var(--btn-grad); color:#fff; border-color:rgba(255,255,255,.75); box-shadow:0 3px 8px rgba(77,12,12,.35); }
.btn.primary:hover { background:var(--dark-grad); }
.btn.ghost, details > summary.btn { background:#fff; color:var(--charcoal); border:1px solid var(--charcoal); box-shadow:none; }
.btn.ghost:hover, details > summary.btn:hover { background:var(--dark-grad); color:#fff; }
.nudge { box-shadow:none; }

/* Stats: auto-fit so narrow columns never squeeze the tiles */
.stats { grid-template-columns:repeat(auto-fit, minmax(118px, 1fr)); }
.card .stats div { background:#f6f6f6; }

/* Footer: dark gradient like the site footer */
.foot { background:var(--dark-grad); border-top:0; color:#e6e3e4; text-align:left; padding:1.6rem 1rem; margin-top:2rem; }
.foot-in { max-width:1140px; margin:0 auto; display:flex; flex-wrap:wrap; gap:.75rem 1.25rem; align-items:center; }
.foot strong { font:400 1.15rem var(--head); text-transform:uppercase; letter-spacing:.03em; color:#fff; }
.foot-meta { flex-basis:100%; border-top:2px solid var(--red); padding-top:.75rem; font-size:.85rem; }
.foot a { color:#fff; }
body.login-page .foot { background:transparent; }