/* ================= tokens ================= */
:root{
  /* ---- LIGHT: Fam247 — soft ivory canvas, emerald brand, deep-charcoal rail & ink ---- */
  --bg-a:#F7F9F8;
  --bg-b:#EEF4F1;
  --bg-c:#E6EEEA;
  --glow:rgba(18,168,118,.12);
  --glow2:rgba(120,205,175,.20);
  --grid:rgba(36,40,39,.045);
  --grid-major:rgba(36,40,39,.08);

  --fg:#242827;
  --fg-soft:#56605C;
  --fg-faint:#8A938F;
  --hairline:#E4E7E5;
  --glass:rgba(255,255,255,.75);
  --glass-border:#E4E7E5;

  --surface:#FFFFFF;
  --ink:#242827;
  --ink-soft:#56605C;
  --ink-faint:#8A938F;
  --line:#E4E7E5;
  --field:#F2F5F4;
  --field-focus:#FFFFFF;

  --accent:#12A876;
  --accent-hover:#0E8A60;
  --accent-ink:#FFFFFF;
  --accent-wash:#DCF0E9;
  --accent-lit:#2EC08D;
  --panel-tint:#EEF5F1;
  --grad:linear-gradient(135deg,#2EC08D 0%,#12A876 55%,#0E8A60 130%);
  --grad-hover:linear-gradient(135deg,#12A876 0%,#0E8A60 60%,#0B6E4C 130%);

  /* left navigation rail — DEEP CHARCOAL (contained dark structure) */
  --rail-bg:#232827;
  --rail-fg:#E7EEEB;
  --rail-fg-soft:#9AA3A0;
  --rail-line:rgba(255,255,255,.09);
  --rail-hover:rgba(255,255,255,.07);
  --rail-active:rgba(18,168,118,.22);
  --rail-active-fg:#2EC08D;

  --good:#12A876;
  --warn:#B9852B;
  --bad:#DC2F4E;

  --map-surface:#FFFFFF;
  --map-line:#E4E7E5;
  --map-plate:#EAF1EE;
  --map-road:#FFFFFF;
  --map-road-major:#FFFFFF;
  --map-park:rgba(18,168,118,.14);
  --map-fence-fill:rgba(18,168,118,.13);
  --map-fence-line:#12A876;
  --map-pin-ring:#FFFFFF;
  --map-ink:#242827;
  --map-soft:#56605C;
  --pin-a:#12A876;
  --pin-b:#3D6D8C;
  --pin-c:#B9852B;
  --pin-txt:#FFFFFF;
  --dot-good:#12A876;
  --dot-move:#3D6D8C;
  --dot-warn:#B9852B;

  --card-shadow:0 1px 2px rgba(36,40,39,.05), 0 16px 38px -20px rgba(20,60,48,.18);
  --preview-shadow:0 18px 44px -20px rgba(18,168,118,.28);
  --btn-glow:0 10px 22px -8px rgba(18,168,118,.42);

  --display:'Plus Jakarta Sans',system-ui,'Segoe UI',sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg-a:#181E15;
    --bg-b:#12160D;
    --bg-c:#1B211A;
    --glow:rgba(20,190,132,.32);
    --glow2:rgba(150,165,120,.10);
    --grid:rgba(180,206,146,.06);
    --grid-major:rgba(180,206,146,.11);

    --fg:#E9E4D4;
    --fg-soft:#A0A98E;
    --fg-faint:#7C866A;
    --hairline:rgba(160,182,130,.15);
    --glass:rgba(255,255,255,.045);
    --glass-border:rgba(160,182,130,.16);

    --surface:#1E241B;
    --ink:#E9E4D4;
    --ink-soft:#A0A98E;
    --ink-faint:#7C866A;
    --line:#2A3123;
    --field:#181D14;
    --field-focus:#252C1F;

    --accent:#8BAE66;
    --accent-hover:#A6C486;
    --accent-ink:#12160D;
    --accent-wash:#28321C;
    --accent-lit:#A6C486;
    --panel-tint:#4F6A34;
  --grad:linear-gradient(135deg,#A6C486 0%,#6E8F49 55%,#4F6A34 130%);
  --grad-hover:linear-gradient(135deg,#A6C486 0%,#6E8F49 60%,#4F6A34 130%);

    --rail-bg:#050D0A;
    --rail-fg:#E9E4D4;
    --rail-fg-soft:#A0A98E;
    --rail-line:rgba(160,182,130,.12);
    --rail-hover:rgba(255,255,255,.05);
    --rail-active:rgba(139,174,102,.22);
    --rail-active-fg:#A6C486;
    --good:#8BAE66;
    --warn:#F0B44E;
    --bad:#FF5A72;

    --map-surface:rgba(255,255,255,.04);
    --map-line:rgba(160,182,130,.16);
    --map-plate:#12160D;
    --map-road:rgba(160,182,130,.16);
    --map-road-major:rgba(150,240,200,.28);
    --map-park:rgba(139,174,102,.14);
    --map-fence-fill:rgba(139,174,102,.20);
    --map-fence-line:#8BAE66;
    --map-pin-ring:rgba(18,22,14,.92);
    --map-ink:#E9E4D4;
    --map-soft:#7C866A;
    --pin-a:#8BAE66;
    --pin-b:#C0A369;
    --pin-c:#F0B44E;
    --pin-txt:#12160D;
    --dot-good:#8BAE66;
    --dot-move:#8BAE66;
    --dot-warn:#F0B44E;

    --card-shadow:0 2px 8px rgba(0,0,0,.5), 0 24px 60px -24px rgba(0,0,0,.85), 0 0 0 1px rgba(160,182,130,.05);
    --preview-shadow:0 24px 60px -26px rgba(0,0,0,.80);
    --btn-glow:0 8px 22px -6px rgba(20,190,132,.50);
  }
}
:root[data-theme="dark"]{
  --bg-a:#181E15;
  --bg-b:#12160D;
  --bg-c:#1B211A;
  --glow:rgba(20,190,132,.32);
  --glow2:rgba(150,165,120,.10);
  --grid:rgba(180,206,146,.06);
  --grid-major:rgba(180,206,146,.11);

  --fg:#E9E4D4;
  --fg-soft:#A0A98E;
  --fg-faint:#7C866A;
  --hairline:rgba(160,182,130,.15);
  --glass:rgba(255,255,255,.045);
  --glass-border:rgba(160,182,130,.16);

  --surface:#1E241B;
  --ink:#E9E4D4;
  --ink-soft:#A0A98E;
  --ink-faint:#7C866A;
  --line:#2A3123;
  --field:#181D14;
  --field-focus:#252C1F;

  --accent:#8BAE66;
  --accent-hover:#A6C486;
  --accent-ink:#12160D;
  --accent-wash:#28321C;
  --accent-lit:#A6C486;
  --panel-tint:#4F6A34;
  --grad:linear-gradient(135deg,#A6C486 0%,#6E8F49 55%,#4F6A34 130%);
  --grad-hover:linear-gradient(135deg,#A6C486 0%,#6E8F49 60%,#4F6A34 130%);

  --rail-bg:#050D0A;
  --rail-fg:#E9E4D4;
  --rail-fg-soft:#A0A98E;
  --rail-line:rgba(160,182,130,.12);
  --rail-hover:rgba(255,255,255,.05);
  --rail-active:rgba(139,174,102,.22);
  --rail-active-fg:#A6C486;
  --good:#8BAE66;
  --warn:#F0B44E;
  --bad:#FF5A72;

  --map-surface:rgba(255,255,255,.04);
  --map-line:rgba(160,182,130,.16);
  --map-plate:#12160D;
  --map-road:rgba(160,182,130,.16);
  --map-road-major:rgba(150,240,200,.28);
  --map-park:rgba(139,174,102,.14);
  --map-fence-fill:rgba(139,174,102,.20);
  --map-fence-line:#8BAE66;
  --map-pin-ring:rgba(18,22,14,.92);
  --map-ink:#E9E4D4;
  --map-soft:#7C866A;
  --pin-a:#8BAE66;
  --pin-b:#C0A369;
  --pin-c:#F0B44E;
  --pin-txt:#12160D;
  --dot-good:#8BAE66;
  --dot-move:#8BAE66;
  --dot-warn:#F0B44E;

  --card-shadow:0 2px 8px rgba(0,0,0,.5), 0 24px 60px -24px rgba(0,0,0,.85), 0 0 0 1px rgba(160,182,130,.05);
  --preview-shadow:0 24px 60px -26px rgba(0,0,0,.80);
  --btn-glow:0 8px 22px -6px rgba(20,190,132,.50);
}

/* ================= base ================= */
*{box-sizing:border-box}
[hidden]{display:none !important}
body{
  margin:0;
  background:var(--bg-b);
  color:var(--fg);
  font-family:var(--body);
  font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--display);font-weight:700;margin:0;text-wrap:balance;letter-spacing:-.022em}
p{margin:0}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent-lit);outline-offset:2px;border-radius:5px}
.eyebrow{
  font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  display:inline-block;
  color:var(--accent-lit);-webkit-text-fill-color:var(--accent-lit);background:none;
}

/* ================= the ground ================= */
.page{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;
  background:
    radial-gradient(820px 520px at 84% -6%, var(--glow), transparent 60%),
    radial-gradient(720px 560px at 6% 108%, var(--glow2), transparent 62%),
    radial-gradient(1100px 680px at 14% -12%, var(--bg-c), transparent 64%),
    linear-gradient(165deg, var(--bg-a) 0%, var(--bg-b) 100%);
  overflow:hidden;
}
/* map-tile grid, because this is a map product */
.page::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px);
  background-size:26px 26px, 26px 26px, 130px 130px, 130px 130px;
  -webkit-mask-image:radial-gradient(ellipse 95% 75% at 40% 25%, #000 30%, transparent 92%);
          mask-image:radial-gradient(ellipse 95% 75% at 40% 25%, #000 30%, transparent 92%);
}
.page > *{position:relative;z-index:1}
.inner{width:100%;max-width:1140px;margin:0 auto;padding:0 32px}

/* ================= top bar ================= */
.topbar{border-bottom:1px solid var(--hairline)}
.topbar .inner{display:flex;align-items:center;justify-content:space-between;gap:16px;height:70px}
.brand{display:flex;align-items:center;gap:10px}
.brand svg{display:block}
.brand .wordmark{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.015em;color:var(--fg)}
.topbar-right{font-size:13.5px;color:var(--fg-soft)}
.topbar-right a{color:var(--accent-lit);font-weight:600;text-underline-offset:3px}

/* ================= layout ================= */
.main{flex:1}
.main .inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) 412px;
  grid-template-areas:"copy form" "visual form";
  align-content:start;
  column-gap:60px;row-gap:30px;
  padding-top:58px;padding-bottom:64px;
}
.intro-copy{grid-area:copy;display:flex;flex-direction:column;gap:15px;max-width:46ch}
.intro-copy h1{font-size:clamp(33px,3.6vw,47px);line-height:1.03;color:var(--fg)}
.lede{color:var(--fg-soft);font-size:16px;max-width:42ch}
.intro-visual{grid-area:visual;display:flex;flex-direction:column;gap:22px;max-width:470px}
.formcol{grid-area:form}
/* login: keep the whole page within the viewport (form is short, left visual is tall) */
.login-page .main .inner{align-content:center;min-height:calc(100svh - 70px);padding-top:24px;padding-bottom:24px}
@media (max-height:900px){
  .login-page .feed{display:none}
  .login-page .preview .pv-head{display:none}
}
@media (max-height:760px){
  .login-page .proofs{display:none}
  .login-page .intro-copy h1{font-size:clamp(28px,3.4vw,40px)}
}

/* ================= preview card ================= */
.preview{
  margin:0;border-radius:16px;overflow:hidden;
  background:var(--map-surface);
  border:1px solid var(--map-line);
  box-shadow:var(--preview-shadow);
  backdrop-filter:blur(3px);
}
.pv-head{
  display:flex;align-items:center;gap:9px;
  padding:11px 15px;border-bottom:1px solid var(--map-line);
}
.pv-head .live{width:7px;height:7px;border-radius:50%;background:var(--good);flex:none;position:relative}
.pv-head .live::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1px solid var(--good);opacity:.5;animation:ping 2.4s ease-out infinite;
}
@keyframes ping{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.5);opacity:0}}
.pv-head .title{font-size:13px;font-weight:600;color:var(--fg)}
.pv-head .meta{
  margin-left:auto;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--fg-faint);
}
.preview-map{display:block;width:100%;height:auto}
.map-plate{fill:var(--map-plate)}
.map-park{fill:var(--map-park)}
.map-road{stroke:var(--map-road);stroke-linecap:round;fill:none}
.map-road-major{stroke:var(--map-road-major)}
.fence-fill{fill:var(--map-fence-fill)}
.fence-line{stroke:var(--map-fence-line);fill:none;stroke-dasharray:4 4;opacity:.8}
.pin-ring{fill:var(--map-pin-ring)}
.pin-a{fill:var(--pin-a)}
.pin-b{fill:var(--pin-b)}
.pin-c{fill:var(--pin-c)}
.pin-txt{font-family:var(--body);font-size:10px;font-weight:600;fill:var(--pin-txt);text-anchor:middle}
.map-label{font-family:var(--mono);font-size:8.5px;fill:var(--map-soft);letter-spacing:.07em}

.feed{list-style:none;margin:0;padding:5px 0;border-top:1px solid var(--map-line)}
.feed li{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;
  padding:8px 15px;font-size:13px;color:var(--fg);
}
.feed .dot{width:6px;height:6px;border-radius:50%;flex:none}
.dot-good{background:var(--dot-good)}
.dot-move{background:var(--dot-move)}
.dot-warn{background:var(--dot-warn)}
.feed .who b{font-weight:600}
.feed time{font-family:var(--mono);font-size:11px;color:var(--fg-faint);font-variant-numeric:tabular-nums}

/* ================= proof chips ================= */
.proofs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.proofs li{
  display:flex;flex-direction:column;gap:2px;
  padding:13px 14px;border-radius:12px;
  background:var(--glass);border:1px solid var(--glass-border);
}
.proofs .stat{font-family:var(--display);font-weight:700;font-size:20px;color:var(--accent-lit);line-height:1.2}
.proofs .cap{font-size:12px;color:var(--fg-soft);line-height:1.4}

/* ================= form card ================= */
.card{
  background:var(--surface);
  border-radius:18px;padding:28px;
  box-shadow:var(--card-shadow);
  position:relative;
  display:flex;flex-direction:column;gap:20px;
  color:var(--ink);
}
.fhead{display:flex;flex-direction:column;gap:6px}
.fhead h2{font-size:24px;color:var(--ink)}
.fhead p{color:var(--ink-soft);font-size:14px}

.seg{
  display:grid;grid-template-columns:1fr 1fr;gap:3px;
  background:var(--field);border:1px solid var(--line);border-radius:11px;padding:3px;
}
.seg-btn{
  border:0;background:transparent;border-radius:8px;padding:9px 8px;
  font-size:13.5px;font-weight:500;color:var(--ink-soft);cursor:pointer;
  transition:background .16s ease,color .16s ease;
}
.seg-btn.is-on{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:0 1px 3px rgba(13,24,38,.16)}

.mode-note{font-size:12.5px;color:var(--ink-soft);line-height:1.45;margin-top:-8px}

form{display:flex;flex-direction:column;gap:15px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;font-weight:600;color:var(--ink)}
.field label .opt{font-weight:400;color:var(--ink-faint);margin-left:5px}
.field .hint{font-size:12px;color:var(--ink-faint);line-height:1.4}

input[type="text"],input[type="email"],input[type="tel"],input[type="password"],input[type="date"]{
  width:100%;padding:11px 13px;
  background:var(--field);color:var(--ink);
  border:1px solid var(--line);border-radius:10px;
  font:inherit;font-size:14.5px;
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease;
}
input::placeholder{color:var(--ink-faint)}
input:focus{
  outline:none;background:var(--field-focus);
  border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash);
}
.field.is-bad input{border-color:var(--bad)}
.field.is-bad input:focus{box-shadow:0 0 0 3px rgba(195,59,44,.16)}
#code{font-family:var(--mono);letter-spacing:.22em;text-transform:uppercase}

.pw-wrap{position:relative}
.pw-wrap input{padding-right:62px}
.pw-toggle{
  position:absolute;right:5px;top:50%;transform:translateY(-50%);
  border:0;background:transparent;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);padding:7px 8px;border-radius:7px;
}
.pw-toggle:hover{color:var(--ink);background:var(--field)}

.meter{display:flex;align-items:center;gap:8px;margin-top:2px}
.meter-bars{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;flex:1}
.meter-bars i{height:3px;border-radius:2px;background:var(--line);transition:background .2s ease}
.meter-label{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);min-width:52px;text-align:right;
}

.err{font-size:12.5px;color:var(--bad);display:none}
.field.is-bad .err{display:block}

.check{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;margin-top:2px}
.check input{margin:2px 0 0;width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
.check label{font-size:13px;color:var(--ink-soft);line-height:1.45;cursor:pointer}
.check a{color:var(--ink);text-underline-offset:2px}
.check.is-bad label{color:var(--bad)}

.submit{
  margin-top:4px;border:0;border-radius:10px;padding:13px 16px;
  background:var(--grad);color:#fff;
  font-size:15px;font-weight:600;cursor:pointer;
  box-shadow:var(--btn-glow);
  transition:background .15s ease,transform .08s ease,box-shadow .15s ease;
}
.submit:hover{background:var(--accent-hover);box-shadow:var(--btn-glow);filter:brightness(1.03)}
.submit:active{transform:translateY(1px)}

.or{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin:2px 0}
.or::before,.or::after{content:"";height:1px;background:var(--line)}
.or span{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}

.oauth{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.oauth button{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--surface);color:var(--ink);font-size:14px;font-weight:500;cursor:pointer;
  transition:background .15s ease,border-color .15s ease;
}
.oauth button:hover{background:var(--field);border-color:var(--ink-faint)}
.oauth svg{flex:none}
.apple-mark{fill:var(--ink)}

.promise{
  display:flex;gap:9px;align-items:flex-start;
  padding:11px 13px;border:1px solid var(--line);border-radius:10px;
  background:var(--field);font-size:12.5px;color:var(--ink-soft);line-height:1.45;
}
.promise svg{flex:none;margin-top:1px;stroke:var(--good)}

/* success state */
.done{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.done .badge{width:42px;height:42px;border-radius:12px;background:var(--accent-wash);display:grid;place-items:center}
.done .badge svg{stroke:var(--accent)}
.done h2{font-size:23px;color:var(--ink)}
.done p{color:var(--ink-soft);font-size:14.5px}
.done .addr{font-weight:600;color:var(--ink)}
.note{
  font-family:var(--mono);font-size:11.5px;line-height:1.5;color:var(--ink-soft);
  border-left:2px solid var(--accent);padding:2px 0 2px 12px;
}
.linky{
  border:0;background:transparent;padding:0;cursor:pointer;
  color:var(--accent);font-size:14px;font-weight:600;text-decoration:none;text-underline-offset:3px;
}
.linky:hover{text-decoration:underline}

/* icon-avatar picker (account page) */
.iconpanel{margin:12px 0 2px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--field)}
.iconlab{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-faint);margin:0 0 8px}
.iconlab:not(:first-child){margin-top:14px}
.iconcolors{display:flex;flex-wrap:wrap;gap:9px}
.swatch{width:28px;height:28px;border-radius:50%;border:2px solid var(--surface);background:var(--s);cursor:pointer;
  box-shadow:0 0 0 1px var(--line);transition:transform .12s,box-shadow .12s;padding:0}
.swatch:hover{transform:scale(1.08)}
.swatch.on{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--s)}
.icongrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:8px}
.iconpick{height:48px;border:1px solid var(--line);border-radius:11px;background:var(--surface);cursor:pointer;
  color:var(--fg-soft);display:grid;place-items:center;transition:transform .12s,border-color .12s,background .12s,color .12s}
.iconpick svg{width:23px;height:23px}
.iconpick:hover{transform:translateY(-2px);border-color:var(--accent);background:var(--accent-wash);color:var(--accent)}

/* ================= responsive ================= */
@media (max-width:980px){
  .inner{padding:0 20px}
  .main .inner{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"copy" "form" "visual";
    column-gap:0;row-gap:26px;padding-top:34px;padding-bottom:46px;
  }
  .intro-copy,.intro-visual{max-width:none}
  .intro-copy h1{font-size:30px}
  .card{padding:22px}
  .topbar .inner{height:60px}
}
@media (max-width:460px){
  .oauth{grid-template-columns:1fr}
  .proofs{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation:none !important}
}

/* ================= layout: centered (login, reset, verify) ================= */
.layout-center .inner{
  display:flex;flex-direction:column;align-items:center;gap:22px;
  padding-top:min(9vh,86px);padding-bottom:64px;
}
.center-stack{width:100%;max-width:404px;display:flex;flex-direction:column;gap:20px}
.center-lead{text-align:center;display:flex;flex-direction:column;gap:7px;margin-bottom:2px}
.center-lead h1{font-size:clamp(26px,3vw,32px);line-height:1.12;color:var(--fg)}
.center-lead p{color:var(--fg-soft);font-size:14.5px}

/* compact proof row under a centered card */
.proofs-row{
  list-style:none;margin:0;padding:0;width:100%;max-width:520px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
}
.proofs-row li{
  display:flex;flex-direction:column;gap:1px;align-items:center;text-align:center;
  padding:11px 10px;border-radius:11px;
  background:var(--glass);border:1px solid var(--glass-border);
}
.proofs-row .stat{font-family:var(--display);font-weight:700;font-size:16px;color:var(--accent-lit);line-height:1.2}
.proofs-row .cap{font-size:11.5px;color:var(--fg-soft);line-height:1.35}

/* label row with a trailing link (Forgot password?) */
.label-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.label-row a{font-size:12.5px;font-weight:500;color:var(--accent);text-underline-offset:2px}

/* caps lock warning */
.caps{
  display:flex;align-items:center;gap:6px;
  font-size:12px;color:var(--warn);line-height:1.4;
}
.caps svg{flex:none;stroke:var(--warn)}

/* inline form-level error banner */
.banner{
  display:flex;gap:9px;align-items:flex-start;
  padding:11px 13px;border-radius:10px;
  border:1px solid color-mix(in srgb, var(--bad) 38%, transparent);
  background:color-mix(in srgb, var(--bad) 9%, transparent);
  color:var(--bad);font-size:13px;line-height:1.45;
}
.banner svg{flex:none;margin-top:1px;stroke:var(--bad)}

/* button busy state */
.submit[disabled]{opacity:.72;cursor:default}
.submit .spin{
  display:inline-block;width:13px;height:13px;margin-right:7px;vertical-align:-2px;
  border:2px solid color-mix(in srgb, var(--accent-ink) 40%, transparent);
  border-top-color:var(--accent-ink);border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.alt-foot{text-align:center;font-size:14px;color:var(--fg-soft)}
.alt-foot a{color:var(--accent-lit);font-weight:600;text-underline-offset:3px}

@media (max-width:560px){
  .proofs-row{grid-template-columns:1fr;max-width:404px}
}

/* ================= signed-in identity card ================= */
.idcard{display:flex;align-items:center;gap:13px}
.idcard .avatar{
  width:44px;height:44px;border-radius:50%;flex:none;
  display:grid;place-items:center;
  background:var(--accent);color:var(--accent-ink);
  font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.01em;
}
.idmeta{display:flex;flex-direction:column;min-width:0}
.idmeta b{font-size:15.5px;font-weight:600;color:var(--ink)}
.idmeta span{font-size:13.5px;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis}

.circle-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.circle-list li{
  display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;
  padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:var(--field);
}
.circle-list .cname{font-size:14px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.circle-list .crole{
  font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-wash);
  padding:3px 7px;border-radius:5px;
}
.circle-list .cmembers{font-size:12px;color:var(--ink-faint);font-variant-numeric:tabular-nums}

/* ================= join another circle (signed-in footer) ================= */
.joinrow{display:inline-flex;align-items:center;gap:7px;vertical-align:middle}
.joinrow input{
  width:118px;padding:8px 10px;
  font-family:var(--mono);font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  background:var(--field);color:var(--ink);
  border:1px solid var(--line);border-radius:8px;
}
.joinrow input:focus{
  outline:none;background:var(--field-focus);
  border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash);
}
.joinbtn{
  padding:8px 13px;border:1px solid var(--accent);border-radius:8px;
  background:var(--accent);color:var(--accent-ink);
  font-size:13.5px;font-weight:600;cursor:pointer;
}
.joinbtn:hover{background:var(--accent-hover)}
.joinbtn[disabled]{opacity:.7;cursor:default}
.joinmsg{display:block;margin-top:8px;font-size:12.5px}

/* ================= phone: country code + national number ================= */
.phone-row{display:grid;grid-template-columns:104px minmax(0,1fr);gap:8px;align-items:start}
.phone-row input{font-variant-numeric:tabular-nums;letter-spacing:.02em}
.field.is-bad .phone-row input{border-color:var(--bad)}

/* custom country picker: a normal element, so it stays inside the card
   and can flip upward instead of escaping off the bottom of the screen */
.cc{position:relative}
.cc-btn{
  display:flex;align-items:center;gap:6px;width:100%;
  padding:11px 9px 11px 11px;
  background:var(--field);color:var(--ink);
  border:1px solid var(--line);border-radius:10px;
  font-size:14px;cursor:pointer;
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease;
}
.cc-btn:hover{border-color:var(--ink-faint)}
.cc-btn[aria-expanded="true"]{
  background:var(--field-focus);border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-wash);
}
.cc-iso{font-family:var(--mono);font-size:12.5px;font-weight:500;color:var(--ink-soft)}
.cc-dial{font-family:var(--mono);font-size:13px;color:var(--ink)}
.cc-chev{margin-left:auto;color:var(--ink-faint);flex:none}

.cc-pop{
  position:absolute;z-index:60;top:calc(100% + 6px);left:0;
  width:272px;max-width:min(272px, calc(100vw - 44px));
  background:var(--surface);
  border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--card-shadow);
  padding:7px;
  display:flex;flex-direction:column;gap:6px;
}
.cc.up .cc-pop{top:auto;bottom:calc(100% + 6px)}
.cc-search{
  width:100%;padding:9px 11px;
  background:var(--field);color:var(--ink);
  border:1px solid var(--line);border-radius:8px;
  font:inherit;font-size:13.5px;
}
.cc-search:focus{
  outline:none;background:var(--field-focus);
  border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash);
}
.cc-list{
  list-style:none;margin:0;padding:0;
  max-height:216px;overflow-y:auto;overscroll-behavior:contain;
}
.cc-list li{
  display:grid;grid-template-columns:32px 1fr auto;align-items:center;gap:9px;
  padding:8px 9px;border-radius:7px;cursor:pointer;font-size:13.5px;
}
.cc-list li:hover,.cc-list li:focus{background:var(--field);outline:none}
.cc-list li[aria-selected="true"]{background:var(--accent-wash)}
.cc-list .ci{font-family:var(--mono);font-size:11px;color:var(--ink-faint)}
.cc-list .cn{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-list .cd{font-family:var(--mono);font-size:12.5px;color:var(--ink-soft)}
.cc-empty{padding:12px 10px;font-size:13px;color:var(--ink-faint);text-align:center}

/* while the server is checking whether a mail domain exists */
.field.is-checking input{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%238C9BAF' stroke-width='3' stroke-dasharray='14 42' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;padding-right:34px;
}

/* ================= unavailable third-party sign-in ================= */
.oauth button.is-off{opacity:.6;position:relative}
.oauth button.is-off:hover{background:var(--surface);border-color:var(--line)}
.oauth .soon{
  font-family:var(--mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-faint);border:1px solid var(--line);border-radius:4px;
  padding:1px 4px;margin-left:2px;
}

/* ================= long-form document pages ================= */
.layout-doc .inner{
  display:block;
  padding-top:52px;padding-bottom:72px;
  max-width:820px;
}
.doc{
  background:var(--surface);
  border-radius:16px;padding:44px 48px;
  box-shadow:var(--card-shadow);
  color:var(--ink);
}
.doc h1{font-size:clamp(28px,3vw,36px);margin:10px 0 6px;color:var(--ink)}
.doc h2{
  font-size:17px;margin:34px 0 9px;color:var(--ink);
  padding-top:16px;border-top:1px solid var(--line);
}
.doc h2:first-of-type{border-top:0;padding-top:0}
.doc p{margin:0 0 12px;color:var(--ink-soft);max-width:66ch;line-height:1.65}
.doc b{color:var(--ink)}
.doc ul{margin:0 0 14px;padding-left:20px;color:var(--ink-soft);line-height:1.65;max-width:66ch}
.doc li{margin-bottom:6px}
.doc-meta{
  font-family:var(--mono);font-size:11.5px;color:var(--ink-faint);
  letter-spacing:.05em;margin-bottom:22px;
}
.doc-flag{
  border-left:3px solid var(--warn);
  background:color-mix(in srgb, var(--warn) 8%, transparent);
  padding:13px 16px;border-radius:0 9px 9px 0;
  font-size:13.5px;color:var(--ink-soft);line-height:1.55;margin:0 0 26px;max-width:66ch;
}
.doc-table{border-collapse:collapse;width:100%;margin:0 0 16px;font-size:13.5px}
.doc-table th,.doc-table td{
  text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);
  color:var(--ink-soft);vertical-align:top;
}
.doc-table th{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-faint);border-bottom-color:var(--ink-faint);
}
.doc-table td:first-child{color:var(--ink);font-weight:500}
.tag-todo{
  display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--warn);
  border:1px solid color-mix(in srgb, var(--warn) 45%, transparent);
  border-radius:4px;padding:1px 5px;margin-left:5px;white-space:nowrap;
}
.doc-back{margin-top:30px;padding-top:18px;border-top:1px solid var(--line)}
.doc-back a{color:var(--accent);font-weight:600;text-underline-offset:3px}

@media (max-width:640px){
  .doc{padding:26px 22px;border-radius:13px}
  .doc-table{font-size:12.5px}
  .doc-table th,.doc-table td{padding:7px 8px}
}


/* ---- valid-field tick, so the form confirms as well as complains ---- */
.field.is-ok input{border-color:color-mix(in srgb, var(--good) 55%, var(--line))}
.field.is-ok .pw-wrap input,
.field.is-ok input{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%2312855F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 11px center;
  padding-right:34px;
}
.field.is-ok .cc-btn{background-image:none}
.field.is-ok .pw-wrap input{padding-right:62px;background-image:none}

/* ---- already-signed-in notice on the signup page ---- */
.heads-up{
  display:flex;gap:10px;align-items:flex-start;
  padding:12px 14px;border-radius:10px;
  border:1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  background:color-mix(in srgb, var(--warn) 9%, transparent);
  font-size:13px;color:var(--ink-soft);line-height:1.5;
}
.heads-up svg{flex:none;margin-top:2px;stroke:var(--warn)}
.heads-up b{color:var(--ink)}
.heads-up .hu-actions{display:flex;gap:14px;margin-top:7px;flex-wrap:wrap}
.heads-up .hu-actions button{
  border:0;background:transparent;padding:0;cursor:pointer;
  color:var(--accent);font-size:13px;font-weight:600;
  text-decoration:none;text-underline-offset:3px;
}
.heads-up .hu-actions button:hover{text-decoration:underline}


/* ---- invite preview on the join tab ---- */
.preview-card{margin-top:4px;padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:var(--field);font-size:13px;color:var(--ink-soft)}
.preview-card .pv-ttl{color:var(--ink);margin-bottom:8px}
.preview-card .pv-tmp{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 45%,transparent);border-radius:4px;padding:0 5px}
.preview-card .pv-members{display:flex;align-items:center;gap:0 8px;flex-wrap:wrap}
.preview-card .pv-av{width:28px;height:28px;border-radius:50%;display:inline-grid;place-items:center;background:var(--c,var(--accent));color:#fff;font-family:var(--display);font-weight:700;font-size:10px;margin-left:-6px;box-shadow:0 0 0 2px var(--field);overflow:hidden}
.preview-card .pv-av:first-child{margin-left:0}
.preview-card .pv-av img{width:100%;height:100%;object-fit:cover}
.preview-card .pv-cnt{font-size:12px;color:var(--ink-faint);margin-left:4px}
.preview-card .pv-bad{color:var(--bad)}
.pv-role{margin-top:10px;padding:10px 12px;border-radius:11px;background:color-mix(in srgb,var(--accent) 9%,var(--field));border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);font-size:12.5px;line-height:1.4;color:var(--ink-soft)}
.pv-role b{color:var(--ink)}

/* "You are" role picker — selectable cards */
.rolecards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:2px}
.rolecard{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;padding:16px 8px 12px;border:1.5px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .16s,background .16s,transform .12s,box-shadow .16s}
.rolecard:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));box-shadow:0 12px 26px -18px color-mix(in srgb,var(--accent) 75%,transparent)}
.rolecard:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rolecard .rc-emoji{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;font-size:27px;line-height:1;background:linear-gradient(160deg,var(--accent-wash),color-mix(in srgb,var(--panel-tint) 38%,var(--surface)));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 14%,transparent);transition:transform .18s,background .18s}
.rolecard .rc-title{font-weight:700;font-size:14.5px;line-height:1}
.rolecard .rc-sub{font-size:11px;color:var(--ink-faint);line-height:1;letter-spacing:.01em}
.rolecard.is-on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--surface))}
.rolecard.is-on .rc-emoji{transform:scale(1.08);background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 24%,var(--surface)),var(--accent-wash))}
.rolecard.is-on .rc-title{color:var(--accent-lit,var(--accent))}
.rolecard .rc-check{position:absolute;top:8px;right:8px;width:18px;height:18px;border-radius:50%;background:var(--accent);opacity:0;transform:scale(.4);transition:opacity .16s,transform .16s}
.rolecard .rc-check::after{content:"";position:absolute;left:6px;top:3px;width:4px;height:8px;border:solid var(--accent-ink);border-width:0 2px 2px 0;transform:rotate(42deg)}
.rolecard.is-on .rc-check{opacity:1;transform:scale(1)}
@media (max-width:380px){.rolecard{padding:13px 5px 10px}.rolecard .rc-emoji{width:47px;height:47px;font-size:23px}.rolecard .rc-title{font-size:13.5px}}
.heads-up.is-bad{border-color:var(--bad)}
.heads-up .err{display:none}
.heads-up.is-bad .err{display:block}

/* ---- 4. icons drawn as strokes need a stroke colour; the brand mark (fills only) is untouched ---- */
svg[stroke-width]:not([stroke]){stroke:currentColor}


/* date inputs: same box as every other field, native picker tinted to the theme */
input[type="date"]{color-scheme:light;font-variant-numeric:tabular-nums;min-height:44px;-webkit-appearance:none;appearance:none}
input[type="date"]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.6;padding:2px}
input[type="date"]::-webkit-calendar-picker-indicator:hover{opacity:1}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) input[type="date"]{color-scheme:dark} }
:root[data-theme="dark"] input[type="date"]{color-scheme:dark}

/* ================= brand front door (signup / login): Soft Sky ================= */
/* Airy near-white with a whisper of blue; dark text (inherits the default page
   styling), a refined lighter headline, and an auth card that floats on a soft
   shadow — quietly polished rather than loud. */
.page.brand{
  /* Premium front door: follows the theme (rich near-black by default, crisp
     light when chosen) with layered accent glows for real depth. */
  align-items:stretch;gap:0;   /* undo .brand (logo) rule leaking onto the page via the shared class name */
  background:
    radial-gradient(1100px 780px at 88% -14%, var(--glow), transparent 60%),
    radial-gradient(820px 660px at -6% 110%, var(--glow2), transparent 62%),
    radial-gradient(1000px 720px at 42% 130%, var(--bg-c), transparent 60%),
    linear-gradient(160deg, var(--bg-a) 0%, var(--bg-b) 100%);
}
.page.brand::before{opacity:.5}                  /* let the map grid read a little more */
/* a soft accent glow blooms behind the phone mockup */
.page.brand .intro-visual{position:relative}
.page.brand .intro-visual::before{
  content:"";position:absolute;z-index:0;inset:-8% -6% -12% -10%;
  background:radial-gradient(60% 55% at 42% 40%, var(--glow), transparent 70%);
  filter:blur(12px);pointer-events:none;
}
.page.brand .intro-visual > *{position:relative;z-index:1}
/* the eyebrow is a tidy accent chip */
.page.brand .eyebrow{
  display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  padding:6px 12px;border-radius:999px;letter-spacing:.14em;font-weight:600;
  color:var(--accent-lit);-webkit-text-fill-color:var(--accent-lit);
  background:var(--accent-wash);border:1px solid var(--glass-border);
}
/* strong, confident headline */
.page.brand .intro-copy h1,
.page.brand .center-lead h1{font-weight:700;letter-spacing:-.02em;line-height:1.06}
/* the auth card floats on a soft, layered shadow (theme-aware) */
.page.brand .card{
  border-radius:22px;
  border:1px solid var(--glass-border);
  box-shadow:var(--card-shadow);
}
.page.brand .preview{box-shadow:var(--preview-shadow)}
.page.brand .submit,.page.brand .btn.primary{box-shadow:var(--btn-glow)}

/* custom calendar popover (day picker) */
.daypick{position:fixed;box-sizing:border-box;padding:12px;width:min(300px,calc(100vw - 20px));
  border-radius:16px;background:var(--surface);border:1px solid var(--line);
  box-shadow:0 26px 64px -22px rgba(17,24,39,.55);z-index:2000}
.daypick *{box-sizing:border-box}
.daypick .dp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.daypick .dp-head b{font-family:var(--display);font-weight:700;font-size:14.5px;color:var(--ink)}
.daypick .dp-nav{flex:none;width:30px;height:30px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink-soft);cursor:pointer;display:grid;place-items:center;transition:border-color .14s,color .14s}
.daypick .dp-nav:hover{border-color:var(--accent);color:var(--accent)}
.daypick .dp-nav svg{width:15px;height:15px;stroke:currentColor}
.daypick .dp-next svg{transform:scaleX(-1)}
.daypick .dp-wd{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:3px}
.daypick .dp-wd span{text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--ink-faint);padding:2px 0}
.daypick .dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.daypick .dp-cell{min-width:0;height:34px;padding:0;border:0;background:transparent;color:var(--ink);font:inherit;font-size:13px;font-weight:600;line-height:1;border-radius:9px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .12s,color .12s}
.daypick .dp-cell.empty{visibility:hidden;pointer-events:none}
.daypick .dp-cell:hover:not(:disabled):not(.sel){background:var(--field)}
.daypick .dp-cell.today{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 55%,transparent);color:var(--accent)}
.daypick .dp-cell.sel{background:var(--accent);color:#fff}
.daypick .dp-cell:disabled{color:var(--ink-faint);opacity:.4;cursor:default}
.daypick .dp-foot{display:flex;justify-content:space-between;margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.daypick .dp-foot .linky{font-weight:600}
.daypick .dp-nav:disabled{opacity:.35;cursor:default}
.daypick .dp-title{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;cursor:pointer;font-family:var(--display);font-weight:700;font-size:14.5px;color:var(--ink);padding:5px 9px;border-radius:9px}
.daypick .dp-title:hover{background:var(--field)}
.daypick .dp-title svg{color:var(--ink-faint)}
.daypick .dp-mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:4px 0 2px}
.daypick .dp-mcell{min-width:0;height:44px;padding:0;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:13px;font-weight:600;border-radius:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .12s,background .12s,color .12s}
.daypick .dp-mcell:hover:not(:disabled):not(.sel){border-color:var(--accent);color:var(--accent)}
.daypick .dp-mcell.sel{background:var(--accent);border-color:transparent;color:#fff}
.daypick .dp-mcell:disabled{color:var(--ink-faint);opacity:.4;cursor:default}
.daypick .dp-head-c{justify-content:center}
.daypick .dp-ygrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;max-height:224px;overflow-y:auto;padding:4px 2px 2px}
.daypick .dp-ycell{min-width:0;height:40px;padding:0;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:13px;font-weight:600;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .12s,background .12s,color .12s}
.daypick .dp-ycell:hover:not(.sel){border-color:var(--accent);color:var(--accent)}
.daypick .dp-ycell.sel{background:var(--accent);border-color:transparent;color:#fff}