/* ==========================================================================
   LagnaMatch - design system: night sky, jewel colours.
   A deep midnight-teal ground, ivory type, and six jewels used with intent:
   marigold and saffron for action, ruby for weight, peacock and sapphire for
   the sky, emerald for what passed. Glass panels with lit hairlines.
   Every text pairing is AA or better (body text 15:1). Built to be read by
   parents: large type, generous targets, no thin greys.
   ========================================================================== */

@font-face{font-family:Fraunces;src:url('/fonts/Fraunces.ttf') format('truetype');
  font-weight:100 900;font-display:swap}
@font-face{font-family:Inter;src:url('/fonts/Inter-Regular.ttf') format('truetype');
  font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url('/fonts/Inter-Medium.ttf') format('truetype');
  font-weight:500 700;font-display:swap}

:root{
  color-scheme:dark;
  --bg:#06161B;
  --bg-2:#081D23;
  --bg-deep:#040F13;
  --panel:#0B232B;
  --panel-2:#0F2D36;
  --field:#0A1F26;
  --line:rgba(190,228,222,.15);
  --line-soft:rgba(190,228,222,.085);
  --line-hi:rgba(190,228,222,.28);

  --ink:#F6F0E3;
  --ink-2:#C6D2CE;
  --ink-3:#93A8A4;

  --marigold:#FFC23D;
  --marigold-hi:#FFD36E;
  --saffron:#FF8C32;
  --ruby:#FF4D6D;
  --coral:#FF7A59;
  --peacock:#22D1C3;
  --sapphire:#4DA8FF;
  --emerald:#3EE6A8;
  --gold:#D9AE5F;

  --dawn:linear-gradient(100deg,#FFD25A 0%,#FF9A3C 50%,#FF5A72 100%);
  --sea:linear-gradient(120deg,#22D1C3 0%,#4DA8FF 100%);

  --pass:#3EE6A8;
  --pass-bg:rgba(62,230,168,.12);
  --good:#FFC23D;
  --good-bg:rgba(255,194,61,.13);
  --fail:#FF7286;
  --fail-bg:rgba(255,114,134,.12);

  /* legacy names still used by the page scripts' markup */
  --ivory:var(--bg);--paper:var(--panel);--sand:var(--bg-2);
  --turmeric:var(--marigold);--maroon:var(--ruby);--kumkum:var(--ruby);--brass:var(--gold);

  --r-sm:12px;
  --r:18px;
  --r-lg:26px;
  --shadow-1:0 1px 0 rgba(255,255,255,.04) inset,0 10px 30px -18px rgba(0,0,0,.7);
  --shadow-2:0 1px 0 rgba(255,255,255,.05) inset,0 24px 60px -28px rgba(0,0,0,.85);
  --shadow-3:0 1px 0 rgba(255,255,255,.06) inset,0 40px 90px -30px rgba(0,0,0,.95);
  --glow-dawn:0 12px 34px -12px rgba(255,120,60,.75),0 0 0 1px rgba(255,210,90,.2);

  --display:Fraunces,"Iowan Old Style",Georgia,serif;
  --text:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
}

*,*:before,*:after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px;background:var(--bg)}
body{
  margin:0;color:var(--ink);position:relative;
  background:
    radial-gradient(1200px 760px at 92% -6%,rgba(34,209,195,.11),transparent 62%),
    radial-gradient(1000px 720px at -12% 18%,rgba(255,77,109,.075),transparent 60%),
    radial-gradient(1100px 800px at 50% 110%,rgba(77,168,255,.07),transparent 60%),
    var(--bg);
  font:400 19px/1.65 var(--text);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
  font-feature-settings:"cv11","ss01";
}
/* fine film grain over everything: keeps the dark from looking flat */
body:after{content:"";position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
img,svg{display:block;max-width:100%}
a{color:var(--marigold);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--marigold-hi)}
::selection{background:rgba(255,194,61,.35);color:#fff}
:focus-visible{outline:3px solid var(--marigold);outline-offset:3px}

.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
.narrow{max-width:840px;margin:0 auto;padding:0 32px}
.hidden{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- type ---------- */
.display,h1,h2,h3{font-family:var(--display);font-optical-sizing:auto;color:var(--ink);
  font-weight:520;letter-spacing:-.02em}
h1{font-size:clamp(40px,5.2vw,70px);line-height:1.03;margin:0}
h2{font-size:clamp(32px,3.7vw,50px);line-height:1.08;margin:0}
h3{font-size:24px;line-height:1.25;margin:0;letter-spacing:-.01em}
.accent{color:var(--marigold)}
.eyebrow{display:inline-flex;align-items:center;gap:12px;margin:0 0 22px;padding:8px 16px 8px 12px;
  border-radius:999px;background:rgba(255,194,61,.08);border:1px solid rgba(255,194,61,.22);
  font:600 12.5px/1 var(--text);letter-spacing:.18em;text-transform:uppercase;color:var(--marigold)}
.eyebrow:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--marigold);
  box-shadow:0 0 0 3px rgba(255,194,61,.18),0 0 12px 2px rgba(255,194,61,.7)}
.lede{font-size:21px;line-height:1.6;color:var(--ink-2);margin:22px 0 0;max-width:36em}
.muted{color:var(--ink-2)}
.small{font-size:16px}
.num{font-variant-numeric:tabular-nums}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:58px;padding:0 30px;border-radius:999px;border:1px solid transparent;
  font:600 18px/1 var(--text);letter-spacing:-.005em;text-decoration:none;cursor:pointer;white-space:nowrap;
  color:#1B0D06;background:var(--dawn);background-size:140% 100%;background-position:0 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),var(--glow-dawn);
  transition:background-position .4s,transform .15s,box-shadow .2s}
.btn:hover{color:#1B0D06;background-position:100% 0;transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 18px 44px -12px rgba(255,110,70,.85),0 0 0 1px rgba(255,210,90,.3)}
.btn:active{transform:none}
.btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.btn .arrow{transition:transform .15s}
.btn:hover .arrow{transform:translateX(3px)}
.btn.ghost{background:rgba(255,255,255,.035);border-color:var(--line-hi);color:var(--ink);box-shadow:none;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.btn.ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,194,61,.55);color:#fff}
.btn.dark{background:var(--ink);color:#0A1A1F;box-shadow:0 12px 30px -14px rgba(0,0,0,.9)}
.btn.dark:hover{background:#fff;color:#000}
.btn.sm{min-height:46px;padding:0 20px;font-size:16px}
.btn.wide{width:100%}
.btn[disabled]{opacity:.5;cursor:default;transform:none}

/* ---------- site header ---------- */
.site-head{position:sticky;top:0;z-index:50;background:rgba(6,22,27,.62);
  -webkit-backdrop-filter:saturate(1.5) blur(18px);backdrop-filter:saturate(1.5) blur(18px);
  border-bottom:1px solid transparent;transition:border-color .2s,background .2s}
.site-head:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;opacity:0;transition:opacity .3s;
  background:linear-gradient(90deg,transparent,rgba(255,194,61,.55) 30%,rgba(34,209,195,.55) 70%,transparent)}
.site-head.scrolled{background:rgba(6,22,27,.82)}
.site-head.scrolled:after{opacity:1}
.site-head .bar{display:flex;align-items:center;gap:28px;height:84px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);flex:0 0 auto}
.logo svg{width:40px;height:40px;filter:drop-shadow(0 6px 16px rgba(255,120,60,.45))}
.logo b{font:560 25px/1 var(--display);letter-spacing:-.02em}
.logo b span{color:var(--marigold)}
.nav{display:flex;gap:30px;margin-left:auto}
.nav a{font:500 17px/1 var(--text);color:var(--ink-2);text-decoration:none;padding:8px 0;position:relative}
.nav a:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
  background:var(--dawn);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav a:hover{color:var(--ink)}
.nav a:hover:after{transform:scaleX(1)}
.head-cta{display:flex;gap:18px;align-items:center}
.head-cta .signin{font:500 17px/1 var(--text);color:var(--ink);text-decoration:none}
.head-cta .signin:hover{color:var(--marigold)}
.progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;transform-origin:left;
  transform:scaleX(var(--p,0));background:var(--dawn);box-shadow:0 0 12px rgba(255,140,50,.8);z-index:1}

/* ---------- surfaces ---------- */
/* glass with a lit hairline: the border is a gradient, the face is glass */
.card,.glass{position:relative;border-radius:var(--r-lg);border:1px solid transparent;
  background:
    linear-gradient(180deg,rgba(15,45,54,.92),rgba(10,32,39,.92)) padding-box,
    linear-gradient(150deg,rgba(255,194,61,.42),rgba(190,228,222,.10) 34%,rgba(190,228,222,.06) 66%,rgba(34,209,195,.38)) border-box;
  box-shadow:var(--shadow-2)}
.card{padding:42px}
.card+.card{margin-top:24px}
.card h2{font-size:34px}
.card .lede{font-size:19px;margin-top:10px}

/* ---------- forms (app) ---------- */
label{display:block;font:500 18px/1.4 var(--text);color:var(--ink);margin:0 0 9px}
.hint{display:block;font:400 16px/1.45 var(--text);color:var(--ink-2);margin:-2px 0 11px}
.field{margin:0 0 26px;position:relative}
input[type=text],input[type=date],input[type=time],input[type=email],input[type=tel]{
  width:100%;min-height:60px;padding:0 18px;border-radius:var(--r-sm);color-scheme:dark;
  font:400 20px/1 var(--text);color:var(--ink);background:var(--field);
  border:1px solid var(--line);box-shadow:inset 0 2px 6px rgba(0,0,0,.35);
  transition:border-color .15s,box-shadow .15s,background .15s}
input::placeholder{color:var(--ink-3)}
input:hover{border-color:var(--line-hi)}
input:focus{outline:none;background:#0C252D;border-color:var(--marigold);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.35),0 0 0 4px rgba(255,194,61,.18),0 0 24px -4px rgba(255,194,61,.45)}
input[type=date]::-webkit-calendar-picker-indicator,input[type=time]::-webkit-calendar-picker-indicator{
  filter:invert(.8) sepia(1) saturate(4) hue-rotate(350deg);cursor:pointer;opacity:.9}
.row{display:flex;gap:20px;flex-wrap:wrap}
.row>*{flex:1 1 240px}

.choices{display:flex;gap:14px;flex-wrap:wrap}
.choice{flex:1 1 150px;margin:0;position:relative}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice span{display:flex;align-items:center;justify-content:center;min-height:60px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--field);
  font:500 19px/1 var(--text);color:var(--ink);cursor:pointer;transition:all .18s}
.choice span:hover{border-color:var(--line-hi);background:#0C252D}
.choice input:checked+span{background:var(--dawn);border-color:transparent;color:#1B0D06;font-weight:600;
  box-shadow:var(--glow-dawn)}
.choice input:focus-visible+span{outline:3px solid var(--marigold);outline-offset:3px}

.check{display:flex;gap:14px;align-items:flex-start;cursor:pointer;
  font:400 18px/1.45 var(--text);color:var(--ink)}
.check input{width:24px;height:24px;margin:2px 0 0;flex:0 0 auto;accent-color:var(--marigold)}

.places{position:absolute;z-index:60;left:0;right:0;top:100%;margin-top:8px;
  background:#0D2A33;border:1px solid var(--line-hi);border-radius:var(--r-sm);
  box-shadow:var(--shadow-3);max-height:340px;overflow:auto}
.places button{display:block;width:100%;text-align:left;padding:15px 18px;border:0;
  border-bottom:1px solid var(--line-soft);background:none;cursor:pointer;
  font:400 18px/1.35 var(--text);color:var(--ink)}
.places button:last-child{border-bottom:0}
.places button:hover,.places button:focus{background:rgba(255,194,61,.12);outline:none}
.places b{display:block;font-weight:500}
.places small{color:var(--ink-2);font-size:15px}

.err,.caveat,.note{padding:18px 22px;border-radius:var(--r-sm);margin:0 0 20px;
  font-size:17px;line-height:1.55;border:1px solid;border-left-width:4px}
.err{background:var(--fail-bg);border-color:rgba(255,114,134,.35);border-left-color:var(--fail);color:#FFD9DE}
.caveat{background:var(--good-bg);border-color:rgba(255,194,61,.3);border-left-color:var(--marigold);color:#FFEBC2}
.note{background:rgba(34,209,195,.09);border-color:rgba(34,209,195,.28);border-left-color:var(--peacock);color:var(--ink)}

/* ---------- app: page head ---------- */
body.app{background:
    radial-gradient(900px 600px at 85% 0%,rgba(255,140,50,.13),transparent 60%),
    radial-gradient(900px 640px at 0% 30%,rgba(34,209,195,.10),transparent 60%),
    radial-gradient(900px 700px at 60% 100%,rgba(255,77,109,.08),transparent 60%),
    var(--bg)}
.app-head{padding:60px 0 36px;position:relative}
.app-head h1{font-size:clamp(38px,4.6vw,58px)}
.app-head .lede{margin-top:14px}
.profile-line{display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:space-between}
.step{display:inline-flex;align-items:center;gap:10px;margin:0 0 16px;
  font:600 12.5px/1 var(--text);letter-spacing:.18em;text-transform:uppercase;color:var(--peacock)}
.step:before{content:"";width:22px;height:2px;border-radius:2px;background:var(--sea)}

/* ---------- reading (result) ---------- */
.reading{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid transparent;
  background:
    linear-gradient(180deg,#0E2B34,#0A2028) padding-box,
    linear-gradient(160deg,var(--tone,var(--gold)),rgba(190,228,222,.10) 40%,rgba(190,228,222,.08) 70%,rgba(34,209,195,.4)) border-box;
  box-shadow:var(--shadow-3)}
.reading.strong{--tone:var(--pass);--tone-bg:rgba(62,230,168,.14)}
.reading.good{--tone:var(--good);--tone-bg:rgba(255,194,61,.14)}
.reading.weak{--tone:var(--fail);--tone-bg:rgba(255,114,134,.14)}
.reading-top{display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center;
  padding:40px;border-bottom:1px solid var(--line-soft);position:relative;
  background:radial-gradient(600px 260px at 12% 0%,var(--tone-bg,rgba(217,174,95,.12)),transparent 70%)}
.reading-top .who{font:600 13.5px/1.3 var(--text);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 10px}
.reading-top h3{font-size:38px;line-height:1.08;margin:0 0 10px;color:var(--tone,var(--ink))}
.reading-top p{margin:0;color:var(--ink-2);font-size:18px;max-width:34em}

.dial{position:relative;width:168px;height:168px;flex:0 0 auto}
.dial:before{content:"";position:absolute;inset:14%;border-radius:50%;
  background:radial-gradient(circle,var(--tone-bg,rgba(255,194,61,.14)),transparent 70%);filter:blur(6px)}
.dial svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible;position:relative}
.dial .track{fill:none;stroke:rgba(190,228,222,.1);stroke-width:9}
.dial .arc{fill:none;stroke:var(--tone,var(--gold));stroke-width:9;stroke-linecap:round;
  filter:drop-shadow(0 0 6px var(--tone,var(--gold)));
  transition:stroke-dashoffset 1.2s cubic-bezier(.2,.8,.2,1)}
.dial .val{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.dial .val b{font:520 58px/1 var(--display);letter-spacing:-.03em;color:var(--ink)}
.dial .val small{font:600 11.5px/1 var(--text);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin-top:7px}

.reading-charts{display:grid;grid-template-columns:1fr 1fr;gap:28px;padding:34px 40px;
  background:rgba(4,15,19,.35);border-bottom:1px solid var(--line-soft)}
.reading-charts figure{margin:0}
.reading-charts figcaption{margin:12px 0 0;text-align:center;font:500 16px/1.4 var(--text);color:var(--ink-2)}

.points{padding:12px 40px 28px}
.point{display:grid;grid-template-columns:42px 1fr;gap:18px;padding:24px 0;
  border-bottom:1px solid var(--line-soft)}
.point:last-child{border-bottom:0}
.mark{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:1px}
.mark svg{width:16px;height:16px}
.point.yes .mark{background:var(--pass-bg);color:var(--pass);box-shadow:0 0 0 1px rgba(62,230,168,.35),0 0 18px -4px rgba(62,230,168,.6)}
.point.no .mark{background:var(--fail-bg);color:var(--fail);box-shadow:0 0 0 1px rgba(255,114,134,.35),0 0 18px -4px rgba(255,114,134,.6)}
.point.bonus .mark{background:var(--good-bg);color:var(--marigold);box-shadow:0 0 0 1px rgba(255,194,61,.35),0 0 18px -4px rgba(255,194,61,.6)}
.point.neutral .mark{background:rgba(190,228,222,.08);color:var(--ink-3);box-shadow:0 0 0 1px var(--line)}
.point h4{margin:0;font:600 21px/1.3 var(--text);color:var(--ink);letter-spacing:-.01em}
.point h4 small{font-weight:500;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--marigold);margin-left:10px}
.point .says{margin:6px 0 0;font-size:18.5px;color:var(--ink)}
.point .detail{margin:10px 0 0;font-size:16.5px;color:var(--ink-2);line-height:1.6}
.reading-notes{padding:0 40px 34px}

/* ---------- saved list ---------- */
.saved{list-style:none;margin:0;padding:0}
.saved li+li{margin-top:12px}
.saved button{width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:20px;
  align-items:center;text-align:left;cursor:pointer;padding:18px 22px;
  background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:var(--r);
  font-family:var(--text);color:var(--ink);transition:border-color .2s,background .2s,transform .2s}
.saved button:hover{background:rgba(255,255,255,.06);border-color:rgba(255,194,61,.45);transform:translateX(3px)}
.saved button:focus-visible{outline:3px solid var(--marigold);outline-offset:2px}
.pill{min-width:66px;padding:11px 0;text-align:center;border-radius:14px;
  font:520 27px/1 var(--display);font-variant-numeric:tabular-nums}
.pill.strong{background:var(--pass-bg);color:var(--pass);box-shadow:0 0 0 1px rgba(62,230,168,.3)}
.pill.good{background:var(--good-bg);color:var(--marigold);box-shadow:0 0 0 1px rgba(255,194,61,.3)}
.pill.weak{background:var(--fail-bg);color:var(--fail);box-shadow:0 0 0 1px rgba(255,114,134,.3)}
.saved .who b{display:block;font:500 20px/1.3 var(--text)}
.saved .who small{font-size:15.5px;color:var(--ink-2)}
.saved .tag{font:500 14px/1 var(--text);color:var(--ink-3)}
.empty{color:var(--ink-2);margin:0}

/* ---------- rasi chart (shared) ---------- */
.rasi{width:100%;height:auto;font-family:var(--text)}
.rasi .frame{fill:#0A1E25;stroke:var(--gold);stroke-width:1.6}
.rasi .cell{fill:#0C242C;stroke:rgba(217,174,95,.7);stroke-width:1}
.rasi .cell.hl{fill:#2A2A1C}
.rasi .core{fill:#071A20;stroke:rgba(217,174,95,.7);stroke-width:1}
.rasi .sign{font-size:9.5px;fill:var(--ink-3);letter-spacing:.06em}
.rasi .pl{font-size:15px;font-weight:500;fill:var(--ink)}
.rasi .pl.asc{fill:var(--marigold);font-weight:600}
.rasi .pl.r{fill:var(--ink-2)}
.rasi .diag{stroke:var(--ruby);stroke-width:1.3}
.rasi .title{font-family:var(--display);font-size:17px;font-weight:540;fill:var(--ink)}
.rasi .sub{font-size:10px;fill:var(--ink-2);letter-spacing:.04em}

/* ---------- footer (shared) ---------- */
.site-foot{position:relative;background:
    radial-gradient(900px 300px at 50% 0%,rgba(255,140,50,.08),transparent 70%),var(--bg-deep);
  color:var(--ink-2);padding:80px 0 40px;margin-top:0}
.site-foot:before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,194,61,.5),rgba(255,77,109,.5),rgba(34,209,195,.5),transparent)}
.site-foot a{color:var(--ink-2);text-decoration:none}
.site-foot a:hover{color:var(--marigold)}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px;
  padding-bottom:44px;border-bottom:1px solid var(--line-soft)}
.foot-grid h5{margin:0 0 18px;font:600 12.5px/1 var(--text);letter-spacing:.18em;
  text-transform:uppercase;color:var(--marigold)}
.foot-grid nav a{display:block;font-size:16px;margin:0 0 12px}
.foot-brand .logo{color:var(--ink)}
.foot-brand p{margin:18px 0 0;font-size:16px;line-height:1.6;color:var(--ink-3);max-width:26em}
.foot-legal{padding-top:30px;font-size:14.5px;line-height:1.65;color:var(--ink-3)}
.foot-legal p{margin:0 0 12px;max-width:80em}
.foot-todo{margin:0 0 18px;padding:14px 18px;border-radius:var(--r-sm);
  border:1px dashed rgba(255,194,61,.5);color:#FFDFA0;background:rgba(255,194,61,.06)}

@media (max-width:980px){
  .nav{display:none}
  .head-cta{margin-left:auto}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  body{font-size:18px}
  .wrap,.narrow{padding:0 20px}
  .site-head .bar{height:70px;gap:12px}
  .head-cta .signin{display:none}
  .head-cta .btn.sm{min-height:44px;padding:0 16px;font-size:15px}
  .logo b{font-size:22px}
  .logo svg{width:34px;height:34px}
  .card{padding:28px 20px}
  .reading-top{grid-template-columns:1fr;justify-items:start;padding:28px 22px}
  .reading-charts{grid-template-columns:1fr;padding:24px 22px}
  .points{padding:6px 22px 20px}
  .reading-notes{padding:0 22px 24px}
  .dial{width:144px;height:144px}
  .dial .val b{font-size:50px}
  .foot-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* ---------- sign-in ---------- */
.phone-row{display:flex;gap:10px}
.phone-row select{flex:0 0 auto;min-height:60px;padding:0 14px;border-radius:var(--r-sm);color-scheme:dark;
  border:1px solid var(--line);background:var(--field);font:500 18px/1 var(--text);color:var(--ink)}
.phone-row select:focus{outline:none;border-color:var(--marigold);box-shadow:0 0 0 4px rgba(255,194,61,.18)}
.phone-row input{flex:1 1 auto;min-width:0}
.code-input{font-size:30px!important;letter-spacing:.5em;text-align:center;font-variant-numeric:tabular-nums}
.code-actions{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:16px 0 0}
.linkish{background:none;border:0;padding:6px 0;cursor:pointer;font:500 16.5px/1.3 var(--text);
  color:var(--marigold);text-decoration:underline;text-underline-offset:3px}
.linkish:hover{color:var(--marigold-hi)}
.linkish[disabled]{color:var(--ink-3);cursor:default;text-decoration:none}
.linkish.danger{color:var(--fail)}
.linkish:focus-visible{outline:3px solid var(--marigold);outline-offset:3px;border-radius:4px}
.or{display:flex;align-items:center;gap:16px;margin:26px 0;color:var(--ink-3);font-size:15px}
.or:before,.or:after{content:"";flex:1;height:1px;background:var(--line)}
.btn.google{gap:12px;background:var(--ink);color:#0A1A1F;border-color:transparent}
.btn.google:hover{background:#fff;color:#000}
.account{margin:28px 4px 0;padding-top:22px;border-top:1px solid var(--line)}
.acct-actions{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.account .btn{margin:0 10px 0 0}