/* blipsat.com — the one stylesheet.
   Design source: docs/website-handoff/README.md (tokens, components, header, footer) and
   docs/superpowers/specs/2026-09-23-website-rebuild-design.md. Radius 0 and no shadows
   anywhere: the app's rule is "everything square". */

/* ---------------------------------------------------------------- 1. fonts */
@font-face{font-family:"Archivo Black";src:url("../fonts/ArchivoBlack-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/IBMPlexMono-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/IBMPlexMono-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/IBMPlexMono-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}

/* --------------------------------------------------------------- 2. tokens */
:root{
  --bg:#000;
  --band:#171612;
  --paper:#EDEAE3;
  --text2:#C9C4B8;
  --muted:#A9A396;
  --line:#2E2C26;
  --line-strong:#3A382F;
  --accent:#6E9E7E;
  --accent-fill:#14603A;
  --accent-hover:#1B6E30;
  --alert:#F03829;
  --alert-hover:#C8261B;
}

/* ----------------------------------------------------------------- 3. base */
*,*::before,*::after{box-sizing:border-box}
html,body{background:var(--bg);color:var(--paper);font:13px/1.55 "IBM Plex Mono",ui-monospace,monospace}
body{margin:0}
img{max-width:100%;height:auto}
a{color:var(--accent)}
a:hover{color:var(--paper)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button{font-family:inherit}

/* --------------------------------------------------------------- 4. layout */
/* content-box: max-width is the CONTENT width, with the gutters outside it. The handoff's
   1240px/32px was narrowed to 1160px/72px (David, 2026-09-23: "more white space on each side"),
   stepping down to 40px on tablets and 16px on phones. */
.wrap{max-width:1160px;margin:0 auto;padding:0 72px;box-sizing:content-box}
.section{padding:60px 0;border-top:1px solid var(--line)}
/* Link row: the 56px-padded strip pattern the README calls out for a one-line pitch + link
   (the Home "Fire crews · forestry · land management" row, the "Also for" row). */
.section.tight{padding:40px 0}
/* The tight strip's headline + button row (Home "Fire crews · forestry · land management"). */
.tight-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center}
.band{background:var(--band)}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,480px),1fr));gap:56px;align-items:center}
.split.rev>:first-child{order:2}
/* The text column of a split: eyebrow, heading, lede and table stacked on a 22px rhythm. */
.stack{display:flex;flex-direction:column;gap:22px}

/* ----------------------------------------------------------------- 5. type */
h1,h2{font-family:"Archivo Black",sans-serif;font-weight:400;margin:0;text-wrap:balance}
h1{font-size:clamp(36px,5.2vw,76px);line-height:.95}
h2{font-size:clamp(27px,3.2vw,44px);line-height:1}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.eyebrow.chip{display:inline-block;align-self:flex-start;background:#000;padding:6px 10px}
.lede{font-size:13px;color:var(--text2);max-width:540px;margin:0;text-wrap:pretty}

/* ----------------------------------------------------------- 6. components */
/* Primary button: forest fill, Archivo Black. */
.btn{display:inline-block;background:var(--accent-fill);color:var(--paper);text-decoration:none;
  font-family:"Archivo Black",sans-serif;font-weight:400;letter-spacing:.08em;padding:18px 26px;
  border:0;border-radius:0;cursor:pointer;line-height:1.2}
.btn:hover{background:var(--accent-hover);color:var(--paper)}
/* Secondary button: outline, Plex Mono caps. */
.btn-2{display:inline-block;border:1px solid var(--line-strong);background:transparent;color:var(--paper);
  text-decoration:none;font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:11px;letter-spacing:.14em;
  padding:18px 22px;border-radius:0;cursor:pointer;line-height:1.2}
.btn-2:hover{border-color:var(--accent);color:var(--paper)}
/* Sage outline variant (the Home "FOR PARTNERS →" strip). */
.btn-2.sage{border-color:var(--accent);color:var(--accent);font-weight:700;padding:16px 20px;white-space:nowrap}
.btn-2.sage:hover{color:var(--paper)}
.btns{display:flex;gap:12px;flex-wrap:wrap}

/* Numbered steps: 2px sage rule, big sage numeral, bold title, muted body. */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:32px;margin-top:40px}
.steps>*{border-top:2px solid var(--accent);padding-top:16px}
.steps .n{font-family:"Archivo Black",sans-serif;font-size:32px;line-height:1.3;color:var(--accent)}
.steps .t{font-weight:700;margin:6px 0}
.steps .d{color:var(--muted)}

/* Command table: command · description · cost. */
.cmd-table{border-top:2px solid var(--accent)}
.cmd-table>div{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr) auto;gap:16px;align-items:baseline;
  padding:14px 0;border-bottom:1px solid var(--line)}
.cmd-table .c{font-weight:700;color:var(--paper)}
.cmd-table .d{color:var(--muted);font-size:12px}
.cmd-table .cost{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--accent);white-space:nowrap}

/* Reply card: mirrors the app's message view. */
.reply-card{border:1px solid var(--line-strong);padding:22px 24px;display:flex;flex-direction:column;gap:14px}
.reply-card .sent{align-self:flex-end;text-align:right;border-right:3px solid var(--accent);padding-right:14px;
  display:flex;flex-direction:column}
.reply-card .sent .cmd{font-size:13px;font-weight:600}
.reply-card .sent .meta{font-size:11px;letter-spacing:.14em;color:var(--muted)}
.reply-card .label{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--muted)}
.reply-card .headline{font-family:"Archivo Black",sans-serif;font-size:17px;line-height:1.1}
.reply-card .verdict{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--accent);margin:6px 0 8px}
.reply-card .body{color:var(--text2);font-size:12px;margin:0}
.reply-card .headline+.body{margin-top:8px}
/* Every reply card is a designed example, never a live report. */
.tag-example{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--muted);
  border:1px solid var(--line-strong);padding:0 5px;line-height:1.5;vertical-align:1px}

/* Screenshot holder: just the screenshot, centred in its column — no paper backdrop (David,
   2026-09-23: "i really wanted just the screenshots and they have large backgrounds"). */
.plate{display:flex;gap:16px;align-items:flex-end;justify-content:center}
.plate img{display:block;height:auto;min-width:0}
/* Every screenshot is capped to ~510px tall so none dominates the viewport, whether the split
   is side by side or stacked (David, 2026-09-23: photos "ridiculously large"). iPad shots are
   ~1.45:1, iPhone shots ~2:1. */
.plate.ipad img{max-width:350px;width:100%}
.plate.iphone img{max-width:250px;width:100%}
.plate .ipad{max-width:350px}
.plate .iphone{max-width:250px}
/* Home hero: iPhone (600x1204) · iPad (1120x1603) · iPhone at widths proportional to their
   aspect ratios, so all three render the SAME height on one centre line. */
.plate.hero{align-items:center}
.plate.hero img.iphone{width:27%}
.plate.hero img.ipad{width:38%}
/* Hero radar video replaces the middle iPad shot: a phone-screen recording (400x864) sized to
   the same height as the two iPhone shots (27% / 0.498 aspect -> 25% at 0.463). */
.plate.hero video.hero-video{display:block;width:25%;height:auto;min-width:0}

/* Audience card (Home). */
.aud-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:24px}
.aud-card{text-decoration:none;color:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column}
.aud-card:hover{color:var(--paper);border-color:var(--line-strong)}
.aud-card .photo{position:relative;aspect-ratio:4/3;background:center/cover no-repeat}
.aud-card .photo .over{position:absolute;inset:auto 0 0 0;padding:18px 20px;background:linear-gradient(transparent,rgba(0,0,0,.85))}
.aud-card .body{padding:24px 22px 26px;display:flex;flex-direction:column;gap:14px;flex:1}
.aud-card .title{font-family:"Archivo Black",sans-serif;font-size:22px;line-height:1.05}
.aud-card .blurb{color:var(--muted);font-size:12px}
.aud-card .rows{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.aud-card .rows span{padding:9px 0;border-bottom:1px solid var(--line);font-size:11px;font-weight:600}
.aud-card .go{margin-top:auto;font-weight:700;font-size:11px;letter-spacing:.16em;color:var(--accent)}
.aud-card:hover .go{color:var(--paper)}

/* "Works with" strip. */
.works-with{border-top:1px solid var(--line)}
.works-with .wrap{padding-top:28px;padding-bottom:28px;display:flex;align-items:center;gap:36px;flex-wrap:wrap}
.works-with img{width:auto;display:block}
.works-with .ww-zoleo{height:22px}
.works-with .ww-garmin{height:18px}
.works-with .ww-spot{height:26px}
.works-with .ww-label{font-size:11px;font-weight:600;letter-spacing:.16em;color:var(--muted)}
.works-with .ww-iphone{font-family:"Archivo Black",sans-serif;font-size:13px;letter-spacing:.02em}

/* Photo hero (Pilots/Boaters/Hikers): full-bleed photo behind a black gradient, set per page
   via the --hero-img custom property. */
.photo-hero{background-image:linear-gradient(rgba(0,0,0,.72),rgba(0,0,0,.94)),var(--hero-img);
  background-position:center;background-size:cover;background-repeat:no-repeat}
.photo-hero .wrap{padding-top:120px;padding-bottom:56px;display:flex;flex-direction:column;gap:22px}
.photo-hero h1{max-width:980px}
.hero-sub{font-size:15px;color:var(--paper);max-width:620px;margin:0;text-wrap:pretty}

/* Three-stat box (Boaters, SEA section). */
.stat-box{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line-strong)}
.stat-box>div{padding:16px 18px;border-right:1px solid var(--line-strong)}
.stat-box>div:last-child{border-right:0}
.stat-box .v{font-family:"Archivo Black",sans-serif;font-weight:400;font-size:22px}
.stat-box .l{font-size:11px;letter-spacing:.14em;color:var(--muted)}

/* Smoke grey scale (Hikers): drawn, not a screenshot — no real smoke render exists yet. */
.smoke-scale{border:1px solid var(--line);padding:32px;display:flex;flex-direction:column;gap:16px}
.smoke-scale .bars{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.smoke-scale .bars>div{height:56px}
.smoke-scale .bars>div:nth-child(1){background:var(--line-strong)}
.smoke-scale .bars>div:nth-child(2){background:#6E6A60}
.smoke-scale .bars>div:nth-child(3){background:var(--muted)}
.smoke-scale .bars>div:nth-child(4){background:var(--paper)}
.smoke-scale .labels{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.14em;color:var(--muted)}

/* Character-budget meter (About, "THE LIMIT"): 40 cells, some lit sage, the rest unlit line. */
.meter-card{border:1px solid var(--line-strong);padding:26px 28px;display:flex;flex-direction:column;gap:18px}
.meter-head{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.16em;color:var(--muted);font-weight:700}
.meter-grid{display:grid;grid-template-columns:repeat(40,minmax(0,1fr));gap:2px}
.meter-grid>div{height:22px;background:var(--line)}
.meter-grid>div.lit{background:var(--accent)}
.meter-row{display:flex;flex-direction:column;gap:6px}
.meter-label{font-size:11px;letter-spacing:.16em;color:var(--muted);font-weight:700}
.meter-val{font-size:21px;font-weight:700;color:var(--paper)}
.meter-reply{font-size:12px;color:var(--accent);word-break:break-all;line-height:1.5}
.meter-sub{font-size:11px;color:var(--muted)}
.meter-rule{height:1px;background:var(--line)}

/* Radar message-detail comparison tiles (About "More messages, more detail"). */
.radar-tiles{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:520px}
.radar-tiles figure{margin:0;display:flex;flex-direction:column;gap:10px}
.radar-tiles img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center;display:block;border:1px solid var(--line)}
.radar-tiles figcaption{font-size:11px;letter-spacing:.14em;color:var(--accent);font-weight:700}

/* Numbered instruction rows (About "Send it through Messages, by satellite"). */
.num-steps{border-top:2px solid var(--accent)}
.num-steps>div{display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.num-steps .n{font-family:"Archivo Black",sans-serif;font-weight:400;color:var(--accent)}
.num-steps span:last-child{color:var(--text2)}

/* Live-status dot (Partners hero eyebrow). Square, per the site-wide "everything square" rule. */
.live-dot{display:inline-block;width:10px;height:10px;background:var(--accent)}

/* Fire screenshot with its caption tag underneath (Partners hero). */
/* Capped: at full column width the shot ran ~800px tall (David, 2026-09-23: "ridiculously large"). */
.fire-tag-wrap{position:relative;width:100%;max-width:350px;justify-self:center}
.fire-tag-wrap img{width:100%;display:block}
/* A caption UNDER the shot, never over it: overlapping, it hid the map legend (David, 2026-09-23). */
.fire-tag{display:inline-block;margin-top:12px;background:#000;border:1px solid var(--accent);
  padding:10px 14px;font-size:11px;letter-spacing:.14em;font-weight:700;color:var(--accent)}

/* Column feature grid with vertical dividers (Partners "What reaches the team", "Built around your mission"). */
.col-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));border-left:1px solid var(--line)}
.col-grid>div{border-right:1px solid var(--line);padding:4px 24px 8px}
.col-grid .t{font-family:"Archivo Black",sans-serif;font-weight:400;font-size:17px;margin:10px 0 8px}
.col-grid .d{color:var(--muted);font-size:12px}

/* Plain four-step row, no numeral (Partners "From the feed to the field"). */
.line-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:24px}
.line-steps>div{border-top:2px solid var(--accent);padding-top:16px}
.line-steps>div>span{display:block;margin-top:8px}

/* Partner contact form (/partners #contact). */
.agency-form{display:flex;flex-direction:column;gap:4px;max-width:420px}
.agency-form .sent-ok{color:var(--accent);font-weight:600}
.agency-form .btn{margin-top:14px;align-self:flex-start}

/* CTA band. */
.cta-band{border-top:1px solid var(--line)}
.cta-band .wrap{padding-top:56px;padding-bottom:56px;display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap}
.cta-band h2{font-size:clamp(24px,3vw,41px)}
.cta-band .btn{padding:20px 30px}
.cta-band .fineprint{flex-basis:100%;margin:0;font-size:14px;opacity:.8}

/* ------------------------------------------------ 7. header, nav, footer */
.site-header{position:sticky;top:0;z-index:5;background:var(--bg);border-bottom:1px solid var(--line)}
.hdr{max-width:1160px;margin:0 auto;padding:18px 72px;box-sizing:content-box;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:block;flex:none}
.brand img{height:30px;width:auto;display:block}
.nav{display:flex;align-items:center;gap:24px;flex-wrap:wrap;justify-content:flex-end}
.nav a,.menu nav a,.navbtn{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:11px;letter-spacing:.16em;
  color:var(--paper);text-decoration:none}
.nav a:hover,.menu nav a:hover,.navbtn:hover{color:var(--accent)}
.nav a.on,.menu nav a.on{color:var(--accent);border-bottom:2px solid var(--accent);padding-bottom:4px}
.nav a.login,.menu nav a.login{color:var(--muted)}
.nav a.login:hover,.menu nav a.login:hover{color:var(--paper)}
.nav a.btn.start,.menu nav a.btn.start{background:var(--accent-fill);color:var(--paper);padding:10px 16px;letter-spacing:.16em}
.nav a.btn.start:hover,.menu nav a.btn.start:hover{background:var(--accent-hover);color:var(--paper)}
.nav form,.menu nav form{display:inline;margin:0}
.navbtn{background:none;border:0;padding:0;cursor:pointer}
/* Phone menu: a no-JS <details> toggle, shown only below 560px. */
.menu{display:none;position:relative}
.menu summary{list-style:none;cursor:pointer;font-weight:600;font-size:11px;letter-spacing:.16em;color:var(--paper);
  border:1px solid var(--line-strong);padding:9px 14px}
.menu summary::-webkit-details-marker{display:none}
.menu[open] summary{border-color:var(--accent);color:var(--accent)}
.menu nav{position:absolute;right:0;top:calc(100% + 10px);min-width:220px;background:var(--bg);
  border:1px solid var(--line-strong);padding:10px 0;display:flex;flex-direction:column}
.menu nav a,.menu nav .navbtn{display:block;padding:12px 18px}
.menu nav a.on{border-bottom:0;border-left:3px solid var(--accent);padding:12px 18px 12px 15px}
.menu nav a.btn.start{margin:8px 18px 4px;text-align:center}
.menu nav form{display:block}
.menu nav .navbtn{width:100%;text-align:left}
@media(max-width:900px){
  .wrap{padding:0 40px}
  .hdr{padding:18px 40px}
}
@media(max-width:560px){
  .hdr{padding:14px 16px}
  .site-header .nav{display:none}
  .menu{display:block}
}

.site-footer{border-top:1px solid var(--line)}
.ftr{padding-top:28px;padding-bottom:28px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:11px;color:var(--muted);letter-spacing:.06em}
.ftr a{color:var(--muted)}
.ftr a:hover{color:var(--paper)}
.ftr-family{padding-bottom:16px;font-size:11px;color:var(--muted);letter-spacing:.06em;overflow-wrap:anywhere}
.ftr-family a{color:var(--muted)}
.ftr-family a:hover{color:var(--paper)}
.ftr-legal{padding-bottom:24px;font-size:11px;color:var(--muted)}

/* Django messages framework. */
.messages{padding-top:20px}
.msg{border:1px solid var(--line-strong);border-left:3px solid var(--accent);background:var(--band);padding:12px 16px;margin-bottom:10px}
.msg.error,.msg.warning{border-left-color:var(--alert)}

@media(max-width:560px){
  /* Sides only: the shorthand zeroed the vertical padding of every later single-class .wrap
     rule on phones (.ftr, .ftr-family, .ftr-legal, .messages), jamming the footer lines together. */
  .wrap{padding-left:16px;padding-right:16px}
  .section{padding:44px 0}
  .cmd-table>div{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px}
  .cmd-table .d{grid-column:1/-1;grid-row:2}
  .tight-grid{grid-template-columns:1fr;justify-items:start}
}

/* ================================================================ 8. app pages
   Same class names the 34 signed-in templates already use, redefined on the new tokens.
   Template markup does not change just for styling. */
.pagewrap{max-width:980px;margin:0 auto;padding:48px 32px}
.panel,.authcard{background:var(--band);border:1px solid var(--line-strong);padding:22px 24px;border-radius:0}
.panel{margin-bottom:20px}
.panel h2{font-size:17px;line-height:1.1;margin:0 0 12px}
/* .devrow is a ROW inside a panel (label left, value or action right), not a card of its own:
   every one of its 27 uses sits inside a .panel. */
.devrow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;
  border-bottom:1px solid var(--line);font-size:12px}
.devrow:last-child{border-bottom:none}
/* account/email.html: a radio + its address label + pills, all inline on one row. */
.devrow label{display:inline;margin:0 6px 0 4px;font-size:12px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--paper);overflow-wrap:anywhere}
.devrow>span:first-child{min-width:0}
.devrow>span:last-child{flex-shrink:0}
.devrow>span:only-child{flex-shrink:1}
.authwrap{min-height:70vh;display:grid;place-items:center;padding:48px 16px}
.authcard{width:min(100%,440px);padding:32px 30px}
/* `.page` is the class on the signed-in pages' <h1>, never a container. */
.authcard h1,.authcard h2,h1.page{font-family:"Archivo Black",sans-serif;font-weight:400;font-size:clamp(22px,2.7vw,32px);line-height:1}
h1.page{margin:0 0 22px;overflow-wrap:anywhere}
.authcard h1{margin:0 0 6px}
.authcard .sub{font-size:11px;margin:0 0 22px}
.authcard form p{margin:0 0 15px}
.authcard button{width:100%;margin-top:6px}
.btn.ghost{background:transparent;border:1px solid var(--line-strong);color:var(--paper)}
/* Destructive actions (remove, revoke, deactivate, delete): the app's alert red, so they
   never read like the safe green primary. */
.btn.danger{background:var(--alert);color:var(--paper)}
.btn.danger:hover{background:var(--alert-hover);color:var(--paper)}
.btn.ghost:hover{border-color:var(--accent);background:transparent}
.btn.sm{padding:8px 12px;font-size:11px}
.pill{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--line-strong);padding:3px 8px;color:var(--accent);border-radius:0}
.pill.none{color:var(--alert)}
.muted,.sub{color:var(--muted)} .mono{font-family:"IBM Plex Mono",monospace}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.errorlist,.formerror{color:var(--alert);list-style:none;padding:0;margin:6px 0}
ul.errorlist{font-size:11px;font-weight:600}
ul.errorlist li{margin:0}
.formerror{border:1px solid var(--alert);padding:11px 13px;font-size:11px;margin-bottom:18px}
.helptext{color:var(--muted);font-size:11px}
.authcard .helptext,.authcard form ul{font-size:11px;color:var(--muted);margin:4px 0 0;padding-left:16px}
.authcard form ul.errorlist{padding-left:0;font-size:11px;color:var(--alert)}
/* signup.html writes {{ label_tag }}<br>{{ field }}: the label is already a block, so the <br>
   only adds a blank line between label and input. A help <span> sits flush under its input. */
.authcard form label+br{display:none}
.authcard span.helptext{display:block;padding-left:0;margin-top:6px}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=tel],input[type=number],input[type=url],select,textarea{
  width:100%;background:var(--band);border:1px solid var(--line-strong);color:var(--paper);
  font:12px "IBM Plex Mono",monospace;padding:12px 14px;border-radius:0}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
label{display:block;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:14px 0 6px}
input[type=checkbox],input[type=radio]{accent-color:var(--accent);color-scheme:dark}
/* A checkbox's label sits beside it, not above it. */
label:has(input[type=checkbox]),label:has(input[type=radio]){display:flex;align-items:center;gap:8px;text-transform:none;letter-spacing:0;font-size:11px}
/* A checkbox rendered BESIDE its label (form.as_p's "Remember me", signup's SMS consent): one row,
   checkbox first, errors wrapping underneath. */
form p:has(>input[type=checkbox]){display:flex;flex-wrap:wrap;align-items:center;gap:8px}
form p:has(>input[type=checkbox])>input[type=checkbox]{order:-1;margin:0}
form p:has(>input[type=checkbox])>label{flex:1 1 0;min-width:0;font-weight:400;margin:0;text-transform:none;letter-spacing:0;font-size:11px;color:var(--text2)}
form p:has(>input[type=checkbox])>ul{flex-basis:100%}

/* .switch: the "Already have an account? Log in" / "Back to dashboard" line under a form. */
.switch{text-align:center;margin-top:18px;font-size:11px;color:var(--muted)}
.consent{font-size:11px;color:var(--text2);background:var(--bg);border:1px solid var(--line-strong);padding:12px 14px;margin-top:18px;line-height:1.55}
.addr{background:var(--bg);border:1px solid var(--line-strong);padding:10px 13px;margin:6px 0;font-size:12px}

/* Preferences rows (messaging/preferences.html) and the ops forms that borrow .pref-input. */
.pref-row{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.pref-select,.pref-input{padding:10px 11px;border:1px solid var(--line-strong);border-radius:0;font-size:12px;font-family:inherit;background:var(--band);color:var(--paper)}
.pref-select{flex:1;min-width:0}
.pref-select.league{max-width:200px}
/* Ops one-line forms (select + date + button): the fields keep a usable width and wrap at 390. */
form.row-between>.pref-select,form.row-between>.pref-input{flex:1 1 150px}
.pref-input{flex:1;min-width:0;text-transform:uppercase}
.pref-select:focus,.pref-input:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.pref-x{border:1px solid var(--line-strong);background:transparent;color:var(--alert);width:34px;height:34px;border-radius:0;font-size:14px;line-height:1;cursor:pointer;flex:none;font-family:inherit}
.pref-x:hover{border-color:var(--alert)}
@media(max-width:560px){.pref-row{flex-wrap:wrap}.pref-select.league{max-width:none}}
#add-sport,#add-stock{margin-top:4px}
button.btn[disabled]{opacity:.5;cursor:not-allowed}

/* Terms / Privacy / Support long-form text. */
/* Those pages wrap their text in a bare <section> (no class); give it the old vertical room.
   Scoped to class-less sections so it never touches .section or .cta-band. */
section:not([class]){padding:58px 0}
.terms{font-size:11px;color:var(--text2)}
.terms h3{font-size:13px;margin:24px 0 4px;color:var(--paper)}
.terms p{margin:.3em 0}
.updated{color:var(--muted);font-size:11px;margin-bottom:18px}
.disclaim{border:1px solid var(--line-strong);border-left:3px solid var(--alert);background:var(--band);padding:16px 18px;color:var(--paper);margin-bottom:18px}

@media(max-width:760px){
  .pagewrap{padding:32px 16px}
  .devrow{flex-wrap:wrap;gap:4px 0}
  .row-between{gap:8px}
}

/* Password reveal: the eye injected by the script at the end of base.html. Every password
   input on the site gets one, so a mistyped character is catchable before submitting. */
.pwwrap{position:relative;display:block}
.pwwrap input[type=password],.pwwrap input[type=text]{box-sizing:border-box;padding-right:46px}
/* .pwwrap .pwreveal, not .pwreveal: `.authcard button{width:100%}` above is specificity
   (0,1,1) and beats a bare class, which stretched the eye across the whole field.
   Keep this selector at least as specific. */
.pwwrap .pwreveal{position:absolute;right:4px;top:0;height:100%;width:42px;margin-top:0;
  display:flex;align-items:center;justify-content:center;background:none;border:0;
  padding:0;cursor:pointer;color:var(--muted);border-radius:0}
.pwwrap .pwreveal:hover{color:var(--paper)}
.pwwrap .pwreveal:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* Apple logo beside "iPhone satellite" (works-with strip, About). */
.apple-logo{display:inline-block;vertical-align:-2px;margin-right:6px}
.works-with .ww-iphone{display:inline-flex;align-items:center}
.works-with .ww-iphone .apple-logo{vertical-align:0}

/* About: live search takes three quarters, "What you need" is a quarter-width box on the right. */
.side-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:40px;align-items:start}
.need-box{border:1px solid var(--line-strong);padding:20px;display:flex;flex-direction:column;gap:10px}
.need-box .t{font-family:"Archivo Black",sans-serif;font-size:17px;line-height:1.1}
.need-box p{color:var(--muted);font-size:12px;margin:0}
.need-box ul{list-style:none;margin:4px 0 0;padding:0;border-top:1px solid var(--line)}
.need-box li{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:11px;font-weight:600;min-height:20px}
.need-box li img{width:auto;display:block;height:16px}
.need-box li img.nb-garmin{height:12px}
.need-box li img.nb-spot{height:20px}
.need-box li .apple-logo{margin-right:0}
@media(max-width:900px){.side-grid{grid-template-columns:1fr}}

/* Google sign-in button, to Google's branding spec (templates/account/_google_button.html). */
.gsi-btn{display:flex;align-items:center;justify-content:center;gap:10px;height:40px;margin-top:12px;padding:0 12px;
  background:#fff;border:1px solid #747775;border-radius:4px;color:#1F1F1F;text-decoration:none;
  font:500 14px/20px Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:.25px}
.gsi-btn:hover{background:#F2F2F2;color:#1F1F1F}
.gsi-btn svg{flex:none;display:block}

/* App Store badge (templates/site/_app_store_badge.html). Apple's artwork, unaltered; 50px tall
   so it sits level with the 51px .btn beside it (Apple's minimum is 40px). */
.app-badge{display:inline-block;align-self:flex-start;line-height:0}
.btns .app-badge{align-self:center}
.app-badge img{display:block;height:50px;width:auto}