/* Transect — public pages (landing / sign-in / plans).
   Same tokens as the app so the marketing and the tool feel like one product. */
:root{
  --bg:#0E1113; --surface:#161A1D; --surface-2:#1C2226; --surface-3:#232B30;
  --line:#2A3136; --line-2:#38434A;
  --text:#E7ECEF; --text-2:#A3B0B7; --text-3:#79868D; --text-4:#4E5A61;
  --accent:#C8963E; --accent-hi:#DCA94D; --accent-on:#12100A;
  --accent-tint:#C8963E1F; --accent-ring:#C8963E1A;
  --good:#3FBF6E; --good-bg:#14361F; --good-fg:#4FD183;
  --warn:#E0A62E; --warn-bg:#241A0C; --warn-line:#6B4E1C;
  --danger:#C9564A; --danger-bg:#2A1310; --danger-line:#7A3128; --danger-fg:#E58077;
  --sans:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
  --serif:'IBM Plex Serif',Georgia,serif;
  --r-sm:5px; --r-md:7px; --r-lg:10px; --r-xl:12px;
  --e-pop:0 12px 34px #000b;
}
*{box-sizing:border-box}
html,body{margin:0;background:#08090A;color:var(--text);
  font:400 14px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hi)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:5px}
.wrap{max-width:1440px;margin:0 auto;background:var(--bg);
  border-left:1px solid var(--line);border-right:1px solid var(--line);min-height:100vh}
.mono{font-family:var(--mono)}
.micro{font:600 9.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--text-3)}

/* header */
header.nav{display:flex;align-items:center;gap:26px;padding:20px 48px;border-bottom:1px solid var(--line)}
.brand{font:700 14px/1 var(--sans);letter-spacing:.24em}
header.nav .sp{flex:1}
header.nav a.lnk{font:500 12.5px/1 var(--sans);color:var(--text-2)}
header.nav a.lnk:hover{color:var(--text)}
header.nav .divider{width:1px;height:20px;background:var(--line)}

/* buttons */
.btn{display:inline-block;font:600 12.5px/1 var(--sans);border:0;border-radius:var(--r-md);
  padding:11px 17px;cursor:pointer;text-align:center}
.btn--primary{background:var(--accent);color:var(--accent-on)}
.btn--primary:hover{background:var(--accent-hi);color:var(--accent-on)}
/* A DISABLED BUTTON HAS TO LOOK DISABLED. The terms checkbox gates "Create account", and
   a button that is inert while looking clickable reads as a broken site, not as a step the
   user has not done yet. `:hover` is suppressed too — a hover state on a dead control is
   the same lie in miniature. */
.btn[disabled],.btn:disabled{opacity:.42;cursor:not-allowed}
.btn[disabled]:hover,.btn:disabled:hover{background:var(--accent)}
.btn--secondary[disabled]:hover{background:var(--surface-2)}
.btn--secondary{background:var(--surface-2);color:var(--text);border:1px solid var(--line-2);font-weight:500}
.btn--secondary:hover{border-color:#5A686F;color:var(--text)}
.btn--ghost{background:transparent;color:var(--text-2);font-weight:500}
.btn--ghost:hover{background:var(--surface-2);color:var(--text)}
.btn--block{display:block;width:100%}
.btn--lg{padding:14px 22px}

/* hero */
/* ONE COLUMN WHILE THERE IS NOTHING TO PUT IN THE SECOND (T18.7). The hero was a
   two-column grid whose right half held a product screenshot that has never existed,
   so on desktop half the hero was blank. Put the `1fr 1fr` back with the image. */
.hero{display:block;padding:72px 48px 64px}
.hero>div{max-width:644px}
.hero .lede,.hero .sub{max-width:52ch}
.pill{display:inline-flex;align-items:center;gap:8px;font:500 9.5px/1 var(--mono);
  letter-spacing:.16em;color:var(--text-3);border:1px solid var(--line);
  border-radius:999px;padding:7px 12px;margin-bottom:28px}
.pill i{width:6px;height:6px;border-radius:50%;background:var(--good);display:block}
h1.display{margin:0 0 20px;font:600 52px/1.05 var(--sans);letter-spacing:-.025em;text-wrap:balance}
.lede{margin:0 0 16px;max-width:52ch;font:400 16px/1.65 var(--sans);color:var(--text-2);text-wrap:pretty}
.lede i{font-family:var(--serif);color:#CBD5DA}
.sub{margin:0 0 32px;max-width:52ch;font:400 14px/1.65 var(--sans);color:var(--text-3)}
.ctas{display:flex;gap:10px;flex-wrap:wrap}
.hero .btn--lg{padding:15px 22px;font-size:13px}
.trust{margin-top:28px;font:400 11px/1.5 var(--mono);letter-spacing:.08em;color:var(--text-3)}
.shot{border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--e-pop);background:var(--surface)}
.shot .bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:var(--surface);border-bottom:1px solid var(--line)}
.shot .bar i{width:8px;height:8px;border-radius:50%;background:var(--line-2);display:block}
.shot .bar span{margin-left:auto;font:500 9.5px/1 var(--mono);color:var(--text-4)}
.shot img{display:block;width:100%;height:auto}

/* sections */
section{padding:56px 48px;border-top:1px solid #1F262A}
h2.sec{margin:0 0 16px;font:600 30px/1.15 var(--sans);letter-spacing:-.02em;text-wrap:balance}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:26px}
.step{border-top:2px solid var(--accent);padding-top:16px}
.step .n{font:600 11px/1 var(--mono);letter-spacing:.14em;color:var(--accent);
  display:block;margin-bottom:10px}
.step h3{margin:0 0 8px;font:600 15px/1.3 var(--sans)}
.step p{margin:0;font:400 12.5px/1.6 var(--sans);color:var(--text-2);text-wrap:pretty}
.two{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.honest{display:grid;gap:8px}
.hrow{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;
  padding:15px 18px;background:var(--surface);border:1px solid var(--line);border-radius:9px}
.hrow .g{font:400 13px/1 var(--mono)}
.hrow .nm{font:500 13px/1.3 var(--sans)}
.hrow .nt{font:400 11.5px/1.5 var(--sans);color:var(--text-3);margin-top:3px}
.hrow .tag{font:600 9.5px/1 var(--mono);letter-spacing:.1em;white-space:nowrap}
.serifline{margin:0;max-width:48ch;font:400 14px/1.7 var(--serif);color:var(--text-3);text-wrap:pretty}
footer{padding:26px 48px;border-top:1px solid #1F262A;display:flex;gap:18px;align-items:center;
  font:400 11.5px/1.5 var(--sans);color:var(--text-4);flex-wrap:wrap}
#beta{padding:48px}

/* auth card */
.authwrap{min-height:100vh;display:grid;place-items:center;padding:40px 20px;
  background:radial-gradient(1200px 600px at 50% 0%,#12171a,#08090A)}
.authcard{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-xl);box-shadow:var(--e-pop);padding:30px}
.seg{display:flex;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);padding:3px;gap:3px;margin-bottom:22px}
.seg>button{flex:1;padding:9px;border:0;border-radius:var(--r-sm);background:transparent;
  color:var(--text-2);font:500 12.5px/1 var(--sans);cursor:pointer}
.seg>button[aria-pressed="true"]{background:var(--accent);color:var(--accent-on);font-weight:600}
.authcard h2{margin:0 0 7px;font:600 21px/1.2 var(--sans)}
.authcard .sub2{margin:0 0 20px;font:400 12.5px/1.6 var(--sans);color:var(--text-3)}
label.fld{display:block;font:500 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-3);margin:16px 0 7px}
.password-head{display:flex;align-items:baseline;justify-content:space-between;margin-top:16px}
.password-head label.fld{margin:0 0 7px}
.password-head a{font:400 11px/1 var(--sans);color:var(--text-4)}
.password-hint{margin-top:9px;font:400 11px/1.55 var(--sans);color:var(--text-4)}
input[type=email],input[type=password],input[type=text],input:not([type]){
  width:100%;background:var(--bg);color:var(--text);border:1px solid var(--line-2);
  border-radius:var(--r-md);padding:11px 12px;font:400 13px/1.2 var(--sans);color-scheme:dark}
input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
input::placeholder{color:var(--text-4)}
.or{display:flex;align-items:center;gap:12px;margin:20px 0;color:var(--text-4);
  font:600 9.5px/1 var(--mono);letter-spacing:.16em}
.or::before,.or::after{content:'';flex:1;height:1px;background:var(--line)}
.fineprint{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
  font:400 11.5px/1.6 var(--sans);color:var(--text-4)}
.msg{margin-top:14px;border-radius:var(--r-md);padding:10px 12px;font:400 12px/1.5 var(--sans);display:none}
.msg.err{display:block;background:var(--danger-bg);border:1px solid var(--danger-line);color:var(--danger-fg)}
.msg.ok{display:block;background:var(--good-bg);border:1px solid #2C6B42;color:var(--good-fg)}

/* plans dashboard */
.plans-head{display:flex;align-items:flex-start;gap:20px;padding:40px 48px 24px}
.plans-head h1{margin:0 0 8px;font:600 30px/1.15 var(--sans);letter-spacing:-.02em}
.plans-head p{margin:0;max-width:60ch;font:400 13px/1.65 var(--sans);color:var(--text-3)}
.toolbar{display:flex;gap:10px;align-items:center;padding:0 48px 22px;flex-wrap:wrap}
.toolbar input{flex:1;min-width:220px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;padding:0 48px 56px}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.pcard:hover{border-color:var(--line-2)}
.pthumb{height:118px;background:#11181c;position:relative;display:grid;place-items:center;
  overflow:hidden;border-bottom:1px solid var(--line)}
.pthumb .chip{position:absolute;top:9px;right:9px;font:600 8.5px/1 var(--mono);letter-spacing:.12em;
  padding:4px 6px;border-radius:var(--r-sm)}
.chip.computed{background:var(--good-bg);color:var(--good-fg)}
.chip.stale{background:var(--warn-bg);color:var(--warn)}
.chip.notrun{background:var(--surface-3);color:var(--text-3)}
.chip.uncached{background:var(--surface-3);color:var(--warn)}
/* one styled dialog, replacing native confirm()/alert() (#75) */
.modalwrap{position:fixed;inset:0;z-index:120;display:grid;place-items:center;
  background:rgba(6,9,11,.62);backdrop-filter:blur(2px);padding:24px}
.modal{width:min(460px,100%);background:var(--surface-2);border:1px solid var(--line-2);
  border-radius:var(--r-lg);box-shadow:0 24px 64px rgba(0,0,0,.55);padding:20px 22px 16px}
.modal[data-kind="warn"]{border-color:var(--warn-line)}
.modal[data-kind="danger"]{border-color:var(--danger-line)}
.modal .mtitle{font:600 15px/1.35 var(--sans);color:var(--text);margin-bottom:8px}
.modal[data-kind="warn"] .mtitle{color:var(--warn)}
.modal[data-kind="danger"] .mtitle{color:var(--danger)}
.modal .mbody{font:400 12.5px/1.65 var(--sans);color:var(--text-2);text-wrap:pretty}
.modal .mbody b{color:var(--text)}
.modal .macts{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;flex-wrap:wrap}
.modal .macts button{padding:8px 14px;border-radius:var(--r-sm);cursor:pointer;
  font:600 11.5px/1 var(--sans);border:1px solid var(--line-2);background:var(--surface-3);color:var(--text-2)}
.modal .macts button:hover{border-color:var(--text-4);color:var(--text)}
.modal .macts button.primary{background:var(--accent);border-color:var(--accent);color:#10130f}
.modal .macts button.danger{border-color:var(--danger-line);color:var(--danger)}
/* the preview is the plan's own focus-area geometry, drawn as inline SVG */
.pthumb .tsvg{position:absolute;inset:0;width:100%;height:100%}
/* keep the species/zone strip readable over whatever geometry lands under it */
.pthumb:has(.tsvg)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46px;
  background:linear-gradient(to top,rgba(10,14,16,.86),rgba(10,14,16,0));pointer-events:none}
.pthumb .nothumb{color:var(--text-4);font:500 10px/1 var(--mono);letter-spacing:.14em}
.pbody .nmrow{display:flex;align-items:flex-start;gap:6px;margin-bottom:5px;min-height:19px}
.pbody .nmrow .nm{margin:0;flex:1;cursor:text}
.pbody .nmedit{width:100%;font:600 14px/1.3 var(--sans);padding:2px 6px;
  background:var(--surface-2);border:1px solid var(--accent);border-radius:var(--r-sm);color:var(--text)}
.iconbtn{background:none;border:0;color:var(--text-4);cursor:pointer;font-size:12px;line-height:1;
  padding:3px 4px;border-radius:var(--r-sm)}
.iconbtn:hover{color:var(--text);background:var(--surface-3)}
.pfoot{position:relative}
.pfoot .pbtn{padding:7px 10px;font-size:11px}
.sheet{position:absolute;right:10px;bottom:calc(100% + 6px);z-index:40;width:236px;
  background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-md);
  box-shadow:0 14px 34px rgba(0,0,0,.44);overflow:hidden}
.sheet button{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  padding:9px 12px;color:var(--text);font:500 12.5px/1.3 var(--sans);border-bottom:1px solid var(--line)}
.sheet button:last-child{border-bottom:0}
.sheet button:hover:not([disabled]){background:var(--surface-3)}
.sheet button[disabled]{opacity:.45;cursor:default}
.sheet small{display:block;margin-top:3px;font:400 10.5px/1.4 var(--sans);color:var(--text-4)}
.pthumb .meta{position:absolute;bottom:8px;left:10px;right:10px;display:flex;justify-content:space-between;
  font:500 9px/1 var(--mono);letter-spacing:.1em;color:var(--text-3)}
.pbody{padding:13px 14px}
.pbody .nm{font:600 14px/1.3 var(--sans);margin-bottom:5px}
.pbody .co{font:500 10.5px/1.5 var(--mono);color:var(--text-3)}
.pfoot{display:flex;align-items:center;gap:8px;padding:11px 14px;border-top:1px solid var(--line)}
.pfoot .saved{flex:1;font:500 9px/1 var(--mono);letter-spacing:.1em;color:var(--text-4)}
.newcard{border:1px dashed var(--line-2);border-radius:var(--r-lg);min-height:210px;
  display:grid;place-items:center;text-align:center;color:var(--text-3);cursor:pointer;background:transparent}
.newcard:hover{border-color:var(--accent);color:var(--text-2)}
.empty{padding:0 48px 56px;color:var(--text-3)}

@media (max-width:900px){
  .hero,.two{grid-template-columns:1fr;gap:32px}
  .hero>div{max-width:none}
  .steps{grid-template-columns:1fr 1fr}
  header.nav,section,.hero,.plans-head,.toolbar,.grid{padding-left:22px;padding-right:22px}
  #beta{padding-left:22px;padding-right:22px}
  h1.display{font-size:38px}
}

/* ════════════════════════════════════════════════════════════════════════════
   PHONE (E7). The 900px block above handles padding and drops the two-column grids,
   which is most of what the marketing pages need. The PLANS page needs more, and one
   thing on it was not cosmetic:

   `header.nav` is a flex row with no wrap, so at 375px the Sign out button was pushed
   to x=387 — past the right edge — and `overflow-x` on the page means it could not be
   scrolled to. **You could not sign out on a phone.** Not a layout blemish: an action
   with no other route to it, missing.
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width:560px){
  /* The nav wraps instead of pushing its last child off the screen. */
  header.nav{flex-wrap:wrap; gap:10px 14px; padding:14px 18px}
  header.nav .sp{flex:1 0 100%; height:0}   /* forces the account row onto its own line */
  header.nav .divider{display:none}
  header.nav .brand{font-size:12px}
  #who{max-width:58vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

  /* The heading and its primary action stack rather than competing for 375px. */
  .plans-head{flex-direction:column; gap:14px; padding:24px 18px 18px}
  .plans-head h1{font:600 24px/1.15 var(--sans)}
  .plans-head .btn{width:100%; text-align:center}

  .toolbar{padding:0 18px 16px}
  /* `flex:1 0 100%`, not `width:100%`. The base rule is `flex:1;min-width:220px`, and on a
     flex item the flex-basis wins — so `width:100%` left the filter box sharing a row with
     the sort control, squeezed to "Filter by name, place o…". A full basis makes it take
     its own line. */
  .toolbar input{flex:1 0 100%; min-width:0}
  /* A three-way segmented control at 375px wraps its labels to two lines each and
     doubles in height. Smaller type keeps them on one line. */
  .seg{width:100%}
  .seg button{flex:1; padding:9px 6px; font-size:11.5px; white-space:nowrap}

  .grid{grid-template-columns:1fr; gap:14px; padding:0 18px 40px}
  /* Coordinates, radius and a date range on one line is ~52 characters — it wrapped
     mid-number. Let it break wherever it needs to. */
  .pcard .pmeta,.pcard .meta{overflow-wrap:anywhere}

  h1.display{font-size:30px}
  .doc{padding:40px 18px 64px}
}

/* landing nav: show "Sign in" to strangers, "My plans" to holders of a session.
   Cosmetic only — the app/plans pages enforce auth themselves. */
.only-authed{display:none}
[data-authed] .only-authed{display:inline-flex}
[data-authed] .only-anon{display:none}