/* Wi-Fight design system v1. One file, shared by every screen.
   Responsive website: desktop (sidebar + 12-col grid) and phone (stacked + floating tab bar). Light by default; add class "dark" on any container for immersive moments. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* brand */
  --cobalt:#2747F5; --cobalt-600:#1E38CC; --cobalt-100:#E6EAFF; --cobalt-50:#F1F3FF;
  /* AI marker: used ONLY on AI content */
  --ai-a:#2747F5; --ai-b:#8B5CF6; --ai-c:#2FD9A0;
  --ai-grad:linear-gradient(120deg,var(--ai-a),var(--ai-b) 55%,var(--ai-c));
  /* status: always paired with a word */
  --good:#0E9F6E; --good-bg:#E3F7EE; --warn:#C77700; --warn-bg:#FFF2D6; --bad:#E5484D; --bad-bg:#FFE9E8;
  /* light surfaces */
  --bg:#F3F4F7; --surface:#FFFFFF; --surface-2:#F7F8FA; --line:#E4E6EC;
  --ink:#0B0F1A; --ink-2:#4A5163; --ink-3:#8A90A0;
  /* cobalt as text or icon colour (lighter in dark mode so it stays readable), and text placed on a status fill */
  --cobalt-ink:var(--cobalt); --on-status:#fff;
  /* shape */
  --r-card:24px; --r-tile:16px; --r-pill:999px;
  --shadow:0 1px 2px rgba(11,15,26,.04),0 8px 24px rgba(11,15,26,.06);
  --display:'Bricolage Grotesque',system-ui,sans-serif; --body:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg)}
body{font-family:var(--body);color:var(--ink);-webkit-font-smoothing:antialiased}

:root[data-theme="dark"]{color-scheme:dark}
:root[data-theme="dark"],.dark{--bg:#070A12;--surface:#121724;--surface-2:#0D111B;--line:#232A3B;--ink:#F5F7FB;--ink-2:#AEB5C6;--ink-3:#8E96AB;
  --good:#3DDC97;--good-bg:rgba(61,220,151,.14);--warn:#FFC24B;--warn-bg:rgba(255,194,75,.14);--bad:#FF6B6B;--bad-bg:rgba(255,107,107,.14);
  --cobalt-100:rgba(39,71,245,.22);--cobalt-50:rgba(39,71,245,.12);--shadow:none;--cobalt-ink:#9DB0FF;--on-status:#070A12}
/* a light island: content that is a document or a photo stays light in dark mode (report pages, the bill photo) */
.light{color-scheme:light;--bg:#F3F4F7;--surface:#FFFFFF;--surface-2:#F7F8FA;--line:#E4E6EC;--ink:#0B0F1A;--ink-2:#4A5163;--ink-3:#8A90A0;
  --good:#0E9F6E;--good-bg:#E3F7EE;--warn:#C77700;--warn-bg:#FFF2D6;--bad:#E5484D;--bad-bg:#FFE9E8;
  --cobalt-100:#E6EAFF;--cobalt-50:#F1F3FF;--cobalt-ink:var(--cobalt);--on-status:#fff;--shadow:0 1px 2px rgba(11,15,26,.04),0 8px 24px rgba(11,15,26,.06)}

/* type */
.display{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.05}
.h1{font:700 30px/1.1 var(--display);letter-spacing:-.02em}
.h2{font:700 22px/1.15 var(--display);letter-spacing:-.01em}
.h3{font:600 17px/1.25 var(--body)}
.body{font:400 15px/1.45 var(--body);color:var(--ink-2)}
.small{font:500 13px/1.35 var(--body);color:var(--ink-3)}
.eyebrow{font:600 11px/1 var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.num{font-family:var(--display);font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.unit{font:600 .42em var(--body);color:var(--ink-3);letter-spacing:0;margin-left:3px}

/* layout helpers */
.row{display:flex;align-items:center}.between{justify-content:space-between}.col{display:flex;flex-direction:column}
.gap4{gap:4px}.gap8{gap:8px}.gap12{gap:12px}.gap16{gap:16px}.gap20{gap:20px}.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt20{margin-top:20px}.mt24{margin-top:24px}
.grow{flex:1}

/* surfaces */
.card{background:var(--surface);border-radius:var(--r-card);padding:18px;box-shadow:var(--shadow)}
.tile{background:var(--surface);border-radius:var(--r-tile);padding:14px;box-shadow:var(--shadow)}
.dark .card,.dark .tile{border:1px solid var(--line)}
.divider{height:1px;background:var(--line)}

/* AI: the only place the gradient appears */
.ai-card{position:relative;border-radius:var(--r-card);padding:18px;background:
  linear-gradient(var(--surface),var(--surface)) padding-box, var(--ai-grad) border-box;border:1.5px solid transparent;
  box-shadow:0 10px 30px rgba(92,80,246,.12)}
.ai-tag{display:inline-flex;align-items:center;gap:6px;font:700 12px/1 var(--body);letter-spacing:.02em;
  background:var(--ai-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ai-tag svg{width:14px;height:14px}
.ai-meta{font:500 12px var(--body);color:var(--ink-3)}
.ai-text{font:500 16px/1.42 var(--body);color:var(--ink)}
.ai-text b{font-weight:700}
.evidence{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:var(--r-pill);background:var(--surface-2);border:1px solid var(--line);font:600 12px var(--body);color:var(--ink-2)}
.ai-note{font:500 11px/1.3 var(--body);color:var(--ink-3)}

/* buttons, chips, badges */
.btn{height:56px;border-radius:var(--r-pill);display:flex;align-items:center;justify-content:center;gap:8px;font:600 16px var(--body);background:var(--ink);color:var(--bg);padding:0 22px;border:0}
.btn.primary{background:var(--cobalt);color:#fff}
.btn.ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.btn.sm{height:40px;font-size:14px;padding:0 16px}
.chip{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line);font:600 13px var(--body);color:var(--ink-2)}
.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.badge{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:var(--r-pill);font:700 12px var(--body)}
.badge.good{background:var(--good-bg);color:var(--good)}.badge.warn{background:var(--warn-bg);color:var(--warn)}.badge.bad{background:var(--bad-bg);color:var(--bad)}
.badge.lock{background:var(--cobalt-50);color:var(--cobalt-ink)}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor}

/* key-value rows */
.kv{display:flex;justify-content:space-between;align-items:center;padding:13px 0;font:500 15px var(--body)}
.kv + .kv{border-top:1px solid var(--line)}
.kv .k{color:var(--ink-2)}.kv .v{font-weight:600}

/* list rows with icon tile */
.lrow{display:flex;align-items:center;gap:12px;padding:12px 0}
.lrow + .lrow{border-top:1px solid var(--line)}
.itile{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--cobalt-50);color:var(--cobalt-ink);flex:none}
.itile svg{width:18px;height:18px}
.itile.good{background:var(--good-bg);color:var(--good)}.itile.bad{background:var(--bad-bg);color:var(--bad)}.itile.warn{background:var(--warn-bg);color:var(--warn)}.itile.mute{background:var(--surface-2);color:var(--ink-3)}

/* 14-day tracker dots */
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:10px 0;justify-items:center}
.day{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:700 12px var(--body);background:var(--surface-2);color:var(--ink-3);border:1px solid var(--line)}
.day.ok{background:var(--good);border-color:var(--good);color:var(--on-status)}
.day.low{background:var(--bad);border-color:var(--bad);color:var(--on-status)}
.day.today{background:var(--surface);border:2px solid var(--cobalt);color:var(--cobalt-ink)}

/* bar chart: ghost bar = promised speed, front bar = measured */
.bars{display:flex;align-items:flex-end;gap:10px;height:150px;position:relative}
.bar{flex:1;height:100%;position:relative;display:flex;align-items:flex-end;justify-content:center}
.bar .ghost{position:absolute;bottom:0;left:0;right:0;height:100%;border-radius:10px 10px 4px 4px;background:var(--surface-2);border:1px dashed var(--line)}
.bar .fill{position:relative;width:100%;border-radius:10px 10px 4px 4px;background:var(--cobalt)}
.bar.low .fill{background:var(--bad)}
.bar .val{position:absolute;top:-20px;left:0;right:0;text-align:center;font:700 11px var(--body);color:var(--ink-2)}
.threshold{position:absolute;left:0;right:0;z-index:2;border-top:1.5px dashed var(--ink-3)}
.threshold span{position:absolute;right:0;top:-9px;border-radius:6px;padding:2px 6px;border:1px solid var(--line);font:700 11px var(--body);color:var(--ink-3);background:var(--surface);padding-left:6px}
.xlabels{display:flex;gap:10px;margin-top:8px}.xlabels span{flex:1;text-align:center;font:600 11px var(--body);color:var(--ink-3)}

/* floating glass tab bar + detached action */
.tabbar{position:fixed;left:16px;right:16px;bottom:18px;height:66px;border-radius:33px;background:rgba(255,255,255,.82);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.9);box-shadow:0 10px 30px rgba(11,15,26,.14);display:flex;align-items:center;justify-content:space-around;padding:0 8px;z-index:6}
:root[data-theme="dark"] .tabbar,.dark .tabbar{background:rgba(18,23,36,.82);border-color:var(--line);box-shadow:0 10px 30px rgba(0,0,0,.5)}
.tab{width:62px;display:flex;flex-direction:column;align-items:center;gap:4px;font:600 10px var(--body);color:var(--ink-3)}
.tab svg{width:22px;height:22px}.tab.on{color:var(--cobalt-ink)}
.fab{width:62px;height:62px;border-radius:50%;background:var(--cobalt);color:#fff;display:grid;place-items:center;margin-top:-30px;box-shadow:0 10px 24px rgba(39,71,245,.45);border:4px solid var(--bg)}
.fab svg{width:26px;height:26px}

/* nav header inside screens */
.nav{display:flex;align-items:center;justify-content:space-between;height:44px}
.iconbtn{width:40px;height:40px;border-radius:50%;background:var(--surface);display:grid;place-items:center;box-shadow:var(--shadow);color:var(--ink)}
.dark .iconbtn{border:1px solid var(--line)}
.iconbtn svg{width:18px;height:18px}
.progress{display:flex;gap:5px}.progress i{flex:1;height:4px;border-radius:2px;background:var(--line)}.progress i.on{background:var(--cobalt)}

/* form bits */
.field{height:54px;border-radius:16px;background:var(--surface);border:1px solid var(--line);display:flex;align-items:center;padding:0 16px;font:500 16px var(--body);color:var(--ink-3);gap:10px}
.radio-card{border-radius:20px;background:var(--surface);border:1.5px solid var(--line);padding:16px;display:flex;justify-content:space-between;align-items:center}
.radio-card.on{border-color:var(--cobalt);background:var(--cobalt-50)}
.switch{width:46px;height:28px;border-radius:14px;background:var(--line);position:relative;flex:none}.switch::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.switch.on{background:var(--good)}.switch.on::after{left:21px}

/* chat */
.bubble{max-width:82%;padding:12px 14px;border-radius:20px;font:500 15px/1.4 var(--body)}
.bubble.me{align-self:flex-end;background:var(--cobalt);color:#fff;border-bottom-right-radius:6px}
.src{display:inline-block;font:600 10.5px ui-monospace,Menlo,monospace;background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:1px 5px;color:var(--ink-2);vertical-align:1px}
.composer{height:54px;border-radius:27px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);display:flex;align-items:center;padding:0 8px 0 18px;gap:10px;font:500 15px var(--body);color:var(--ink-3);z-index:6}
.send{width:40px;height:40px;border-radius:50%;background:var(--cobalt);color:#fff;display:grid;place-items:center;margin-left:auto}
.send svg{width:18px;height:18px}

/* immersive glow for dark moments */
.glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 40% at 50% 38%,rgba(39,71,245,.45),transparent 70%)}
.glow.bad{background:radial-gradient(60% 40% at 50% 34%,rgba(229,72,77,.38),transparent 70%)}

/* ============ responsive app shell ============ */
.app{display:grid;grid-template-columns:256px 1fr;min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;padding:24px 16px;display:flex;flex-direction:column;gap:6px;border-right:1px solid var(--line);background:var(--surface)}
.brand{display:flex;align-items:center;gap:11px;padding:4px 10px 20px;font:700 25px var(--display);letter-spacing:-.025em}
.brand .mark{width:38px;height:38px;border-radius:11px;background:var(--cobalt);color:#fff;display:grid;place-items:center;flex:none}
.brand .mark svg{width:25px;height:25px}
.navitem{display:flex;align-items:center;gap:12px;height:44px;padding:0 12px;border-radius:12px;font:600 15px var(--body);color:var(--ink-2);text-decoration:none}
.navitem svg{width:20px;height:20px;flex:none}
.navitem.on{background:var(--cobalt-50);color:var(--cobalt-ink)}
.navitem.ai span{background:var(--ai-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.navitem.ai svg{color:var(--ai-b)}
.navsep{font:600 11px var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);padding:16px 12px 6px}
.sidefoot{margin-top:auto;border-radius:16px;background:var(--surface-2);border:1px solid var(--line);padding:14px}
.main{padding:28px 36px 60px;max-width:1240px;width:100%;margin:0 auto}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px}
.span-3{grid-column:span 3}.span-4{grid-column:span 4}.span-5{grid-column:span 5}.span-6{grid-column:span 6}.span-7{grid-column:span 7}.span-8{grid-column:span 8}.span-12{grid-column:span 12}
.tabbar{display:none}
.only-mobile{display:none}
.hero-num{font-size:64px}

@media (max-width:1100px){
  .app{grid-template-columns:84px 1fr}
  .sidebar{padding:20px 12px;align-items:center}
  .sidebar .brand span,.navitem span,.navsep,.sidefoot{display:none}
  .brand{padding:4px 0 16px}.navitem{width:48px;justify-content:center;padding:0}
  .span-3{grid-column:span 6}.span-4,.span-5,.span-6,.span-7,.span-8{grid-column:span 12}
}
@media (max-width:720px){
  .app{display:block}
  .sidebar{display:none}
  .main{padding:16px 16px 120px}
  .g{gap:14px}
  .span-3{grid-column:span 6}
  .tabbar{display:flex}
  .only-mobile{display:revert}.only-desktop{display:none !important}
  .h1{font-size:26px}
  .card,.ai-card{padding:16px;border-radius:22px}
  .topbar{margin-bottom:16px}
}

.chip,.badge,.btn,.evidence,.eyebrow{white-space:nowrap}
.bar .fill{z-index:1}
a{color:inherit}

/* shared fixes from the page pass */
a.btn,a.chip,a.navitem{text-decoration:none}
.btn svg{width:18px;height:18px;flex:none}.btn.sm svg{width:16px;height:16px}
.badge svg,.chip svg,.evidence svg{width:13px;height:13px;flex:none}
.btn[disabled],.btn.disabled{opacity:.45;cursor:not-allowed}
.sample{display:inline-flex;align-items:center;height:28px;padding:0 11px;border-radius:999px;border:1px dashed var(--ink-3);font:600 12px var(--body);color:var(--ink-2);white-space:nowrap}

/* ============ app behaviour (added for the working prototype) ============ */
.sheet-wrap{position:fixed;inset:0;z-index:50;display:grid;place-items:end center}
.sheet-back{position:absolute;inset:0;background:rgba(11,15,26,.45)}
.sheet{position:relative;width:min(460px,100%);background:var(--surface);border-radius:24px 24px 0 0;padding:22px 20px 28px;box-shadow:0 -10px 40px rgba(11,15,26,.25);max-height:86vh;overflow:auto}
@media (min-width:721px){.sheet-wrap{place-items:center}.sheet{border-radius:24px}}
.toast{position:fixed;left:50%;bottom:110px;transform:translate(-50%,20px);background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:999px;font:600 14px var(--body);opacity:0;pointer-events:none;transition:all .25s;z-index:60;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
:root[data-theme="dark"] .sheet-back{background:rgba(0,0,0,.62)}
:root[data-theme="dark"] .sheet{box-shadow:0 0 0 1px var(--line),0 -10px 40px rgba(0,0,0,.5)}
button{font-family:inherit;cursor:pointer}
button.btn,a.btn{cursor:pointer}
.navitem,.tab,.chip[data-href],[data-href]{cursor:pointer}
.day.today-done{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--cobalt)}
[hidden]{display:none !important}
html:not([data-ready]) [data-wait]{visibility:hidden}
.empty{border:1.5px dashed var(--line);border-radius:var(--r-card);padding:28px;text-align:center;color:var(--ink-2)}
input,textarea{font-family:inherit}

/* Broadband Facts card: promised vs. measured, in the layout of the provider label */
.bf{background:var(--surface);color:var(--ink);border:2.5px solid var(--ink);border-radius:10px;padding:14px 16px;font-family:var(--body)}
.bf-title{font:800 26px/1 var(--display);letter-spacing:-.02em;padding-bottom:8px;border-bottom:6px solid var(--ink)}
.bf-sub{display:flex;flex-direction:column;gap:1px;font:500 13px var(--body);color:var(--ink-2);padding:8px 0;border-bottom:1.5px solid var(--ink)}
.bf-sub b{font:700 16px var(--body);color:var(--ink)}
.bf-price{display:flex;justify-content:space-between;align-items:baseline;padding:9px 0;border-bottom:4px solid var(--ink);font:600 15px var(--body)}
.bf-price b{font:800 22px var(--display)}
.bf-head,.bf-row{display:grid;grid-template-columns:1.25fr .9fr 1.15fr;gap:8px;align-items:center}
.bf-head{font:700 11px var(--body);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);padding:8px 0 4px}
.bf-row{padding:9px 0;border-top:1px solid var(--line);font:500 14px var(--body)}
.bf-p{font-weight:700}
.bf-m{font-weight:700;display:flex;flex-direction:column;gap:1px;color:var(--ink-3)}
.bf-m.ok{color:var(--good)}.bf-m.low{color:var(--bad)}
.bf-m em{font:700 11px var(--body);font-style:normal;letter-spacing:.03em}
.bf-foot{font:500 11.5px/1.4 var(--body);color:var(--ink-3);padding-top:9px;border-top:1.5px solid var(--ink);margin-top:2px}

/* Proof AI switched off by the user */
.ai-off .ai-card{position:relative;min-height:120px;cursor:pointer}
.ai-off .ai-card > *{visibility:hidden}
.ai-off .ai-card::after{content:"Proof AI is off. You chose not to let it analyze your results. Turn it on in Privacy & data.";position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;font:600 15px/1.45 var(--body);color:var(--ink-2)}

/* ---------- AI model names and logos (js/models.js) ---------- */
.mico{display:inline-grid;place-items:center;width:18px;height:18px;flex:none;color:var(--ink)}
.mico svg{width:100%;height:100%;display:block}
.mico.lg{width:38px;height:38px;padding:8px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line)}
.mchip{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 11px 0 8px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font:500 12.5px/1 var(--body);color:var(--ink-2);white-space:nowrap;vertical-align:middle}
.mchip b{font-weight:700;color:var(--ink)}
.mstack{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.mcard{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:20px;border:1px solid var(--line);background:var(--surface)}
.mcard .mtop{display:flex;align-items:center;gap:12px}
.mcard .mname{font:700 16px/1.2 var(--display);letter-spacing:-.01em;color:var(--ink)}
.mcard .mmaker{font:500 12.5px/1.3 var(--body);color:var(--ink-3);margin-top:2px}
.mcard .mrole{font:700 11px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--cobalt-ink)}
.mcard .mdesc{font:500 13px/1.45 var(--body);color:var(--ink-2)}
.mcard.host{background:var(--surface-2)}
.mcard.off .mrole{color:var(--ink-2)}

/* ---------- gentle page-to-page transitions ---------- */
/* Leaving: a curtain fades in over the page (shell.js and tour.js add it). During the guided demo the curtain is
   dark, the next page starts behind that same dark (.wf-enter, set by the script in each page's head before the
   first paint), and then fades in. There is no white frame in between. */
body{animation:wf-in .4s ease both}
.wf-curtain{position:fixed;inset:0;z-index:2147483000;background:var(--bg);opacity:0;transition:opacity .22s ease;pointer-events:none}
.wf-curtain.dark{background:#070A12}
.wf-curtain.on{opacity:1}
@keyframes wf-in{from{opacity:0}}
@media (prefers-reduced-motion:reduce){body{animation:none}.wf-curtain{transition:none}}

/* ---------- light and dark: the small round toggle on pages without a sidebar ---------- */
.themebtn{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;padding:0;background:transparent;border:1px solid var(--line);color:var(--ink-2);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.themebtn:hover{color:var(--ink);background:var(--surface-2)}
.themebtn:focus-visible{outline:2px solid var(--cobalt-ink);outline-offset:2px}
.themebtn svg{width:18px;height:18px;display:block}