/* Shomer web workspace, in the look of shomr.co (the Base44 site, github.com/Harelyac/Shomer): cream page, navy
   headings, gold for the one action that matters, coral for what needs attention, green for what works, Assistant
   throughout, white rounded cards with navy-tinted shadows. Plain CSS (the workspace has no build step and no script).
   Logical properties throughout, so the same sheet serves rtl (he, ar) and ltr (ru, en). Light only, like the site. */
:root{
  --cream:#F7F4EF; --white:#fff; --raised:#FAF8F4; --sand:#F1EDE5; --sand-line:#E4DED3;
  --navy:#1B2A6B; --navy-soft:#E9ECF6; --navy-ring:rgba(27,42,107,.12);
  --gold:#E0A438; --gold-soft:#FBF1DE; --gold-ink:#8A5A00;
  --coral:#F0552B; --coral-soft:#FDEAE3; --coral-ink:#B83A16;
  --green:#2A7349; --green-soft:#E4F2EA;
  --orange:#EA8A1A; --orange-soft:#FDF0E1; --orange-line:#F6CB95;
  --text:#374151; --muted:#5F6673; --faint:#9CA3AF; --line:#E5E7EB;
  /* contrast (IS 5568 = WCAG 2.0 AA, 2026-10-30): --muted and --green were 4.1 to 4.4:1 on the tinted fills, now
     4.9:1 or more; --focus is the gold of the focus ring, dark enough for 3:1 on white, cream and navy; --field the
     inputs' border, 3:1 on white */
  --focus:#A8730C; --field:#8A919E;
  --shadow-sm:0 2px 8px -2px rgba(27,42,107,.06),0 8px 24px -6px rgba(27,42,107,.08);
  --shadow:0 1px 3px -1px rgba(27,42,107,.08),0 4px 12px -4px rgba(27,42,107,.06),0 12px 32px -8px rgba(27,42,107,.08);
  --shadow-lg:0 20px 48px -12px rgba(27,42,107,.28);
  --font:"Assistant",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Consolas,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;background:var(--cream);color:var(--text);font-family:var(--font);font-size:17px;line-height:1.55;-webkit-tap-highlight-color:transparent}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:10px}
/* where the skip link (base.html) and a closed drawer (drawer.js) send focus: not a control, so no ring */
[tabindex="-1"]:focus{outline:none}
.skip{position:absolute;top:-200px;inset-inline-start:12px;z-index:100;background:var(--navy);color:var(--white);padding:12px 18px;border-radius:12px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}
.site-foot{text-align:center;padding:4px 16px 28px;font-size:15px}
.site-foot a{color:var(--navy);font-weight:700;text-underline-offset:3px}
.i{width:20px;height:20px;flex:none}
.ltr{direction:ltr;unicode-bidi:isolate;font-family:var(--mono);font-size:.88em}
[dir="ltr"] .linkbtn .i,[dir="ltr"] .hero-next .i{transform:scaleX(-1)}
img.logo{display:block;object-fit:contain}
h1{font-weight:700;font-size:30px;color:var(--navy);margin:0 0 4px;line-height:1.2;text-wrap:balance}
.lede{color:var(--muted);margin:0;font-size:17px;max-width:62ch}
h2.sec{font-size:18px;font-weight:700;color:var(--navy);margin:30px 2px 12px;display:flex;align-items:center;gap:10px}
h2.sec.flat{margin:0 0 10px}
.sec .count{font-size:14px;font-weight:700;color:var(--navy);background:var(--navy-soft);border-radius:999px;padding:1px 10px}
.pagehead{margin-bottom:22px}

/* ── shell: a white top bar as on the site, the sections as tabs (at the bottom on a phone) ── */
.top{background:var(--white);position:sticky;top:0;z-index:10;box-shadow:0 1px 0 var(--line)}
.top-in{max-width:1120px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:16px}
.hello{flex:1;min-width:0;line-height:1.25}
.hello b{display:block;font-size:19px;font-weight:700;color:var(--navy)}
.hello span{font-size:14px;color:var(--muted)}
.sess{display:flex;align-items:center;gap:12px;margin:0}
.areas{border-top:1px solid var(--line);background:var(--navy-soft)}
/* 'watching over': bigger since Harel's notes (2026-10-21), it says whose screen this is */
.areas-in{max-width:1120px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:10px;overflow-x:auto;scrollbar-width:none}
.areas-in::-webkit-scrollbar{display:none}
.areas-t{font-size:16.5px;font-weight:700;color:var(--navy);white-space:nowrap}
.areas form{margin:0;flex:none}
.area{display:inline-flex;align-items:center;gap:8px;flex:none;border:1px solid var(--line);background:var(--white);border-radius:999px;min-height:50px;padding:0 18px 0 7px;font:inherit;font-weight:700;font-size:17px;color:var(--navy);cursor:pointer;text-decoration:none;white-space:nowrap}
.area:hover,.area:focus-visible{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px var(--navy-ring)}
.area .ini{width:36px;height:36px;border-radius:50%;background:var(--navy-soft);display:grid;place-items:center;font-weight:800;font-size:17px}
.area .ini .i{width:18px;height:18px}
.area.on{background:var(--navy);border-color:var(--navy);color:var(--white);cursor:default;box-shadow:none}
.area.on .ini{background:var(--white);color:var(--navy)}
.area.add{border-style:dashed;padding:0 18px;gap:6px}
.area.add .i{width:19px;height:19px}
.sess-t{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--muted)}
.sess-t .i{width:15px;height:15px}
.out{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--white);border-radius:12px;min-height:40px;padding:0 12px;font-weight:600;font-size:14.5px;color:var(--navy);cursor:pointer}
.out .i{width:17px;height:17px}
.out:hover{background:var(--raised)}
/* the logo: bigger since Harel's notes (2026-10-24), 56px, 50px on a phone */
.top-logo{display:block;flex:none}
.tabs{max-width:1120px;margin:0 auto;padding:0 12px;display:flex;gap:4px;overflow-x:auto}
.tabs a{display:flex;align-items:center;gap:8px;text-decoration:none;padding:10px 12px 12px;color:var(--muted);font-weight:600;font-size:16px;border-bottom:3px solid transparent;white-space:nowrap}
.tabs a:hover{color:var(--navy)}
.tabs a[aria-current="page"]{color:var(--navy);border-bottom-color:var(--gold)}
.badge{min-width:22px;height:22px;border-radius:11px;background:var(--coral-ink);color:var(--white);font-size:12px;font-weight:700;display:grid;place-items:center;padding:0 6px}
.main{padding:28px 20px 40px;min-width:0}
.inner{max-width:1120px;margin:0 auto}
.linkbtn{border:0;background:none;cursor:pointer;color:var(--navy);font-weight:700;font-size:15px;padding:0;margin-inline-start:auto;text-decoration:none;display:inline-flex;align-items:center;gap:4px}
.linkbtn .i{width:16px;height:16px}
@media (max-width:760px){
  .top-in{padding:10px 16px}
  .sess-t{display:none}
  /* the sign-out word: hidden, still the button's name for a screen reader */
  .out span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .top-logo img{width:50px;height:50px}
  .tabs{position:fixed;bottom:0;inset-inline:0;z-index:15;max-width:none;background:var(--white);box-shadow:0 -1px 0 var(--line);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));gap:0}
  .tabs a{flex-direction:column;gap:3px;padding:6px 2px;font-size:12px;border:0;color:var(--muted);position:relative;white-space:normal;text-align:center;line-height:1.15}
  .tabs a .i{width:24px;height:24px}
  .tabs a[aria-current="page"]{color:var(--navy);box-shadow:inset 0 3px 0 var(--gold)}  /* not by colour alone */
  .tabs .badge{position:absolute;top:2px;inset-inline-end:calc(50% - 22px);min-width:18px;height:18px;font-size:11px}
  .main{padding:20px 16px 8px}
  .shell + .site-foot{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  h1{font-size:26px}
}

/* ── buttons ── */
.btn{min-height:48px;padding:0 20px;border-radius:14px;border:0;background:var(--navy-soft);color:var(--navy);cursor:pointer;font-weight:700;font-size:16px;display:inline-flex;align-items:center;gap:8px;justify-content:center;text-decoration:none;transition:filter .15s,opacity .15s}
.btn:hover{filter:brightness(.96)}
.btn .i{width:18px;height:18px}
.btn.primary{background:var(--navy);color:var(--white)}
.btn.gold{background:var(--gold);color:var(--navy);box-shadow:0 4px 12px -4px rgba(224,164,56,.6)}
.btn.soft,.btn.sm{background:var(--navy-soft);color:var(--navy)}
.btn.sm{min-height:40px;padding:0 14px;font-size:15px}
.btn.ghost{background:var(--white);color:var(--navy);border:1px solid var(--line)}
.btn.danger{background:var(--coral-soft);color:var(--coral-ink)}
.btn.wa{background:#25D366;color:#0b1533;white-space:nowrap}
.btn.lg{min-height:56px;font-size:18px;padding:0 28px;border-radius:16px}
a.btn{text-decoration:none}
/* Google's sign-in button: white, a thin grey border, the four-colour G (Google's branding guidelines) */
.btn.google{background:#fff;color:#1f1f1f;border:1px solid #747775;width:100%}
.btn.google img{width:20px;height:20px}
.or{display:flex;align-items:center;gap:12px;width:100%;color:var(--muted);font-size:14.5px}
.or::before,.or::after{content:"";flex:1;border-top:1px solid var(--line)}
.google-panel{margin-top:18px}
.google-panel h2{margin:0;font-size:19px;color:var(--navy)}
.google-panel form{margin:0}
.textlink{color:var(--navy);font-weight:700;text-underline-offset:3px}

/* ── home (/w/home, and /w/welcome before activation) ── */
.banner{display:flex;gap:10px;align-items:center;border-radius:16px;padding:12px 16px;margin-bottom:16px;font-weight:600}
.banner.ok{background:var(--green-soft);color:var(--green)}
.hero{background:var(--white);border-radius:24px;box-shadow:var(--shadow);padding:22px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:start}
/* 'next step': the hero's far end (the left in Hebrew); under the text on a phone */
.hero-next{align-self:center;white-space:nowrap}
@media (max-width:760px){.hero{grid-template-columns:auto minmax(0,1fr)}.hero-next{grid-column:1/-1;width:100%;white-space:normal}}
.hero-ic{width:60px;height:60px;border-radius:18px;display:grid;place-items:center;background:var(--navy-soft);color:var(--navy)}
.hero-ic .i{width:30px;height:30px}
.hero-ic img{width:34px;height:34px}
.hero-ic.logo{background:var(--white);border:1px solid var(--line)}
.hero.ok .hero-ic{background:var(--green-soft);color:var(--green)}
.hero.attention .hero-ic{background:var(--coral-soft);color:var(--coral)}
.hero h1{font-size:26px}
.hero p{margin:0;color:var(--muted)}
.segs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px;margin-top:16px;max-width:420px}
.segs i{height:8px;border-radius:999px;background:var(--orange-line)}
.segs i.on{background:var(--green)}
.add-grid{display:grid;grid-template-columns:repeat(2,minmax(0,460px));gap:18px;margin-bottom:18px}
.add-opt .card-h{padding:0}
.addmore{margin:14px 0 0;display:flex}
.app-soon{margin-top:14px}
.addmore .linkbtn{margin-inline-start:0}
@media (max-width:760px){.add-grid{grid-template-columns:minmax(0,1fr)}.areas-in{padding:10px 16px}}
.checklist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.step{background:var(--white);border-radius:18px;box-shadow:var(--shadow-sm);padding:14px 16px}
.st-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.st-ic{position:relative;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--navy-soft);color:var(--navy);flex:none}
.st-ic .i{width:24px;height:24px}
.st-ic.coral{background:var(--coral-soft);color:var(--coral)}
.st-ic.green{background:var(--green-soft);color:var(--green)}
.st-ic.gold{background:var(--gold-soft);color:var(--gold-ink)}
.st-ic.logo{background:var(--white);border:1px solid var(--line)}
.st-ic img{width:26px;height:26px;display:block}
/* done, needs attention, waits for activation: a small badge on the step's own icon, which stays */
.tick{position:absolute;bottom:-5px;inset-inline-end:-5px;width:22px;height:22px;border-radius:50%;background:var(--green);color:var(--white);display:grid;place-items:center;box-shadow:0 0 0 2px var(--white)}
.tick .i{width:13px;height:13px;stroke-width:3}
.tick.warn{background:var(--coral)}
.tick.lock{background:var(--faint)}
.tick.todo{background:var(--orange)}
.tick.lock .i,.tick.warn .i{stroke-width:2.5}
.st-t{flex:1;min-width:200px;line-height:1.35}
.st-t b{display:block;font-size:17.5px;font-weight:700;color:var(--navy)}
.st-t span{font-size:15px;color:var(--muted)}
/* the row's own button at the row's far end. Only the row's: on every .btn in the step it also pushed the welcome
   page's WhatsApp button to the far end, the left in Hebrew (Harel, 2026-10-24) */
.st-row > .btn{margin-inline-start:auto}
/* done is green, what is still to do (or waits for an answer) orange, needs attention coral (Harel, 2026-10-19) */
.step.done{border-inline-start:5px solid var(--green)}
.step.done .st-t span{color:var(--green)}
.step.todo,.step.wait{border-inline-start:5px solid var(--orange)}
.step.attention{border-inline-start:5px solid var(--coral)}
.step.attention .st-t span{color:var(--coral-ink)}
.step.locked{background:var(--raised);box-shadow:none;border:1px solid var(--sand-line)}
.step.locked .st-ic > .i,.step.locked .st-ic > img{filter:grayscale(1);opacity:.45}
.step.locked .st-ic{background:var(--sand);border-color:var(--sand-line)}
.step.locked .st-t b{color:var(--muted)}
/* 'what's this?' under each step: what it is, for someone new to it (Harel, 2026-10-21) */
.about{margin-top:6px}
.about summary{display:inline-flex;align-items:center;gap:5px;cursor:pointer;list-style:none;color:var(--navy);font-weight:700;font-size:14.5px;min-height:32px}
.about summary::-webkit-details-marker{display:none}
.about summary .i{width:17px;height:17px}
.about[open] summary{color:var(--muted)}
.about p{margin:4px 0 2px;padding:10px 14px;border-radius:12px;background:var(--navy-soft);color:var(--text);font-size:15.5px;line-height:1.55;max-width:640px}
/* the home's tour (static/tour.js): a spotlight on one part at a time, a bubble beside it. Both sit on the page and
   scroll with their part; the script fixes them to the screen for a part in the header or the bottom menu. */
.tour-veil{position:fixed;inset:0;z-index:60}
.tour-spot{position:absolute;z-index:61;border-radius:16px;box-shadow:0 0 0 9999px rgba(15,23,42,.55),0 0 0 3px var(--gold) inset;pointer-events:none;transition:top .25s,left .25s,width .25s,height .25s}
.tour-tip{position:absolute;z-index:62;width:min(360px,calc(100vw - 24px));background:var(--white);border-radius:18px;box-shadow:var(--shadow-lg);padding:16px 18px}
.tour-tip h2{margin:0 0 6px;font-size:19px;color:var(--navy)}
.tour-tip p{margin:0 0 14px;font-size:16px;line-height:1.55}
.tour-f{display:flex;align-items:center;gap:8px}
.tour-n{margin-inline-end:auto;font-size:14px;font-weight:600;color:var(--muted)}
.tour-f .btn{min-height:42px;padding:0 16px;font-size:15.5px}
/* on a part of the page (not the header's): the header and the phone's bottom menu sit above the spotlight and its
   bubble, dimmed as the page is, so a scrolled part slides under them and never lights them (Harel, 2026-10-26) */
.tour-under .top{z-index:63}
.tour-under .top::after{content:"";position:absolute;inset:0;z-index:30;background:rgba(15,23,42,.55)}
@media (max-width:760px){.tour-under .tabs::after{content:"";position:absolute;inset:0;z-index:30;background:rgba(15,23,42,.55)}}
/* 'what's this?' fades as it closes by itself (tour.js) */
.about.closing p{opacity:0;transition:opacity .3s}
.step.now{outline:2px solid var(--gold);outline-offset:-2px}
.activate{margin-top:14px;padding:18px;background:var(--cream);border-radius:16px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center}
.act-t{display:grid;gap:8px;justify-items:start}
.act-t b{font-size:19px;color:var(--navy)}
.act-t p{margin:0;color:var(--muted)}
.codeline{font-size:14.5px}
.codeline .ltr{background:var(--white);border:1px solid var(--line);padding:2px 8px;border-radius:8px;user-select:all;white-space:nowrap}
.polling{display:flex;gap:6px;align-items:center;font-size:14px}
.polling .i{width:16px;height:16px}
.warnbox.other{max-width:none;margin-bottom:14px} .warnbox.other p{margin:8px 0}
.warnbox.other .kv{margin-top:8px;font-size:14.5px} .warnbox.other .kv dd,.warnbox.other p{color:inherit} .warnbox.other b{font-size:16px;color:inherit}
/* the QR is for someone on a computer or a tablet: they scan it with the phone that has WhatsApp (or the app). Not
   shown on phones: narrow, or a touch screen this short (a phone on its side). */
.qr{margin:0;display:grid;justify-items:center;gap:6px;background:var(--white);color:var(--navy);border-radius:16px;padding:12px 12px 10px;box-shadow:var(--shadow-sm)}
.qr .qr-code{width:140px;height:140px;display:block}
.qr figcaption{font-size:13px;font-weight:700;max-width:140px;text-align:center;line-height:1.3}
@media (max-width:700px){.activate{grid-template-columns:minmax(0,1fr)}.qr{display:none}.act-t .btn.wa{justify-self:stretch}}
@media (hover:none) and (pointer:coarse) and (max-height:500px){.qr{display:none}}
.cols2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.cols2 .wide{grid-column:1/-1}
@media (max-width:700px){.cols2{grid-template-columns:minmax(0,1fr)}}
.card.pad{padding:18px}
.card.pad .card-h{padding:0 0 12px}
.privacy,.family{margin-top:14px}
.insts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.inst{display:flex;align-items:center;gap:10px;background:var(--raised);border:1px solid var(--sand-line);border-radius:14px;padding:6px 14px 6px 6px;font-weight:600;color:var(--navy)}
.inst .tile{width:36px;height:36px;border-radius:10px}
.people{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.people li{display:flex;gap:12px;align-items:center;background:var(--raised);border:1px solid var(--sand-line);border-radius:14px;padding:10px 12px}
.people b{color:var(--navy)}
.people .sub{color:var(--muted);font-size:14px}
.rel{margin-inline-start:8px;font-size:12.5px;font-weight:700;background:var(--navy-soft);color:var(--navy);border-radius:999px;padding:1px 9px}
.empty{margin:0;color:var(--muted)}
.fam-h{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.faces{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:18px}
.faces li{display:grid;justify-items:center;gap:2px;width:96px;text-align:center;line-height:1.25}
.faces .avatar{width:52px;height:52px;font-size:20px;margin-bottom:4px}
.faces .nm{font-weight:700;color:var(--navy);font-size:15px;overflow-wrap:anywhere}
.faces .rl{font-size:13px;color:var(--muted)}
.avatar{width:42px;height:42px;border-radius:50%;background:var(--navy);color:var(--white);display:grid;place-items:center;font-weight:700;font-size:17px;flex:none}
.avatar.parent{background:var(--gold);color:var(--navy)}

/* ── connections: summary, cards, details drawer ── */
.summary{display:grid;grid-template-columns:auto 1fr;gap:18px;background:var(--white);border-radius:24px;padding:20px 22px;box-shadow:var(--shadow);align-items:center}
.ring{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;background:var(--green-soft);color:var(--green)}
.ring.warn{background:var(--coral-soft);color:var(--coral)}
.ring .i{width:28px;height:28px}
.summary b{display:block;font-weight:700;font-size:20px;color:var(--navy)}
.summary .sub{font-size:15px;color:var(--muted)}
.counts{display:flex;gap:28px;flex-wrap:wrap;grid-column:1/-1;border-top:1px solid var(--line);padding-top:14px}
.counts div{display:flex;gap:8px;align-items:center;font-size:15px;color:var(--muted)}
.counts b{font-size:19px;color:var(--navy);font-variant-numeric:tabular-nums}
.dot{width:10px;height:10px;border-radius:50%;background:var(--green);flex:none}
.dot.warn{background:var(--gold)} .dot.idle{background:var(--sand-line)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.card{background:var(--white);border-radius:20px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.card-h{display:flex;gap:12px;align-items:flex-start;padding:16px 16px 10px}
.tile{width:46px;height:46px;border-radius:14px;background:var(--navy-soft);color:var(--navy);display:grid;place-items:center;flex:none;overflow:hidden}
.tile .i{width:22px;height:22px}
.tile.muted{background:var(--sand);color:var(--faint)}
.tile.logo{background:var(--white);border:1px solid var(--line)}
.tile.logo img{width:100%;height:100%;object-fit:contain;display:block}
.tile.mono{background:var(--sand);color:var(--navy);font-weight:800;font-size:20px}
.card-t{flex:1;min-width:0}
.card-t b{font-weight:700;font-size:18px;color:var(--navy);display:block;line-height:1.25}
.card-t .sub{font-size:15px;color:var(--muted);overflow-wrap:anywhere}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap;flex:none}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pill.ok{background:var(--green-soft);color:var(--green)} .pill.warn{background:var(--gold-soft);color:var(--gold-ink)}
.pill.idle{background:var(--sand);color:var(--muted)}
.pill.soon{background:var(--navy-soft);color:var(--navy)} .pill.soon::before{display:none}
.pillrow{margin-top:6px}
.health{display:flex;align-items:flex-start;gap:7px;padding:0 16px 14px;font-size:15px;color:var(--muted);flex:1}
.health .i{width:16px;height:16px;margin-top:4px}
.health.warn{color:var(--gold-ink)}
.health.flat{padding:0}
.foot{display:flex;gap:10px;align-items:center;padding:12px 16px;border-top:1px solid var(--line);flex-wrap:wrap}
.hint{display:flex;gap:6px;align-items:center;font-size:14px;color:var(--muted)}
.hint .i{width:16px;height:16px}
.empty-card{display:grid;justify-items:center;gap:6px;text-align:center;padding:22px;border:1.5px dashed var(--sand-line);border-radius:20px;color:var(--muted);background:rgba(255,255,255,.5)}
.empty-card .i{width:26px;height:26px;color:var(--navy)}
.empty-card small{font-size:14px}
.empty-card .btn{margin-top:6px}
.drawer-wrap{display:none}
.drawer-wrap:target{display:block}
.drawer-scrim{position:fixed;inset:0;background:rgba(27,42,107,.32);z-index:20}
.drawer{position:fixed;top:0;bottom:0;inset-inline-end:0;width:min(460px,100%);background:var(--white);z-index:21;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;animation:slide .22s ease-out}
.dr-h{display:flex;gap:12px;align-items:flex-start;padding:20px 22px 16px;border-bottom:1px solid var(--line)}
.dr-h .card-t b{font-size:22px}
.x{background:var(--sand);width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;color:var(--navy)}
.x .i{width:18px;height:18px}
.dr-b{flex:1;overflow-y:auto;padding:18px 22px calc(18px + env(safe-area-inset-bottom,0px));display:grid;gap:20px;align-content:start}
.dr-b h3{margin:0 0 8px;font-size:15px;font-weight:700;color:var(--navy)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;font-size:15px;margin:0}
.kv dt{color:var(--muted)} .kv dd{margin:0;color:var(--navy);font-weight:600}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.stats div{background:var(--raised);border-radius:14px;padding:10px 12px;display:grid;line-height:1.2}
.stats b{font-size:24px;font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums}
.stats span{color:var(--muted);font-size:13px}
.sees{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:16px}
.sees li{display:flex;gap:9px;align-items:flex-start}
.sees .i{width:18px;height:18px;margin-top:4px}
.sees .y .i{color:var(--green)} .sees .n .i{color:var(--coral)}
.note{font-size:15px;color:var(--muted);display:flex;gap:7px;align-items:flex-start;margin:0}
.note .i{width:16px;height:16px;margin-top:4px}
@keyframes slide{from{translate:-24px 0}to{translate:0 0}}
[dir="ltr"] .drawer{animation-name:slide-ltr}
@keyframes slide-ltr{from{translate:24px 0}to{translate:0 0}}

/* ── single-box pages: sign-in, 'forgot password', messages, the code word's page ── */
.message{min-height:calc(100vh - 60px);display:grid;place-items:center;padding:24px 16px}
.box{background:var(--white);border-radius:24px;box-shadow:var(--shadow);padding:32px 28px;max-width:460px;width:100%;display:grid;justify-items:center;text-align:center;gap:16px}
.box-logo img{width:72px;height:72px}
.box h1{font-size:26px}
.box p{margin:0;color:var(--muted)}
.box p.small{font-size:14.5px}
.box form{margin:0;width:100%}
.box form.fields{text-align:start}
.warnbox{background:var(--gold-soft);color:var(--gold-ink);border-radius:14px;padding:12px 14px;font-size:15.5px;text-align:start;display:flex;gap:10px}
.warnbox .i{width:18px;height:18px;margin-top:4px}
.okbox{background:var(--green-soft);color:var(--green);border-radius:14px;padding:12px 14px;font-size:15.5px;display:flex;gap:10px;max-width:460px;margin-bottom:16px}
.okbox .i{width:18px;height:18px;margin-top:4px}
.main .warnbox{max-width:460px;margin-bottom:16px}
.main .warnbox + .textlink{display:inline-block}

/* ── forms, panels and lists (the people page, the password page, 'connect bank') ── */
form.fields{display:grid;gap:14px;width:100%;text-align:start}
form.fields.panel{max-width:460px;background:var(--white);border-radius:20px;box-shadow:var(--shadow);padding:24px}
.fields label{display:grid;gap:6px;font-weight:700;font-size:16px;color:var(--navy)}
.fields input,.share-add select{font:inherit;font-size:17px;font-weight:400;min-height:52px;padding:0 16px;border-radius:12px;border:1px solid var(--field);background:var(--white);color:var(--navy);width:100%}
.fields input:focus,.share-add select:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 4px var(--navy-ring)}
.fields .hint{margin:0;color:var(--muted);font-size:14.5px;font-weight:400}
.fields .q{font-weight:700;font-size:19px;line-height:1.35;color:var(--navy)}
.fields .btn{width:100%;margin-top:4px}
.panel{background:var(--white);border-radius:20px;box-shadow:var(--shadow);padding:24px;display:grid;gap:14px;max-width:460px;justify-items:start}
.panel p{margin:0}
.panel.invite{margin-bottom:16px}
.panel .hint{color:var(--muted);font-size:14.5px}
.panel h3{margin:0;font-size:16px;font-weight:700;color:var(--navy)}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;max-width:960px;align-items:start}
.cols .panel,.cols form.fields.panel{max-width:none}
.roster{list-style:none;margin:0;padding:0;display:grid;gap:10px;max-width:960px}
.person{display:flex;gap:12px;align-items:center;flex-wrap:wrap;background:var(--white);border-radius:18px;box-shadow:var(--shadow-sm);padding:12px 16px}
.person .card-t b{font-size:17px}
.person .sub.warn{color:var(--gold-ink)}
.person .linkbtn{margin-inline-start:0;font-size:15px}
.you{font-size:12.5px;font-weight:700;background:var(--navy-soft);color:var(--navy);border-radius:999px;padding:1px 9px;margin-inline-start:8px;vertical-align:2px}
form.actions{display:flex;gap:10px;flex-wrap:wrap;margin:0}

/* ── sharing with the household's bank (/w/sharing) ── */
.share-sees{background:var(--white);border-radius:20px;box-shadow:var(--shadow);padding:18px 20px;margin-bottom:18px;max-width:760px}
.share-sees .sec{margin:0 0 10px}
.share-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-bottom:18px}
.share-row .card-h{display:flex;gap:12px;align-items:center;padding:16px}
.share-row .card-t{flex:1;display:grid;line-height:1.3}
.share-row form.foot{margin:0}

/* ── 'connect bank' (/w/bank): every bank and card company, one tap records it ── */
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.pick{display:flex;align-items:center;gap:12px;min-height:72px;padding:12px 14px;border-radius:18px;border:1px solid var(--line);background:var(--white);box-shadow:var(--shadow);color:var(--navy);font:inherit;font-size:17px;text-align:start;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.pick b{flex:1}
.pick:hover,.pick:focus-visible{outline:none;border-color:var(--navy);box-shadow:0 0 0 4px var(--navy-ring)}
.pick.on{cursor:default;background:var(--raised)}

/* ── the family code word's one-time page (/w/cw). The word hides itself after 60s (= rules/codeword.yaml
   vault.reveal_hide_s, which also sends the page away by meta refresh; a test keeps the two equal). ── */
.cw-word{font-size:34px;font-weight:800;line-height:1.25;background:var(--navy-soft);color:var(--navy);border-radius:18px;padding:18px 22px;overflow-wrap:anywhere;animation:cw-hide 0s linear 60s forwards}
@keyframes cw-hide{to{visibility:hidden}}
.cw-ok{background:var(--green-soft);color:var(--green);border-radius:14px;padding:12px 14px;font-weight:700}
.cw-alt{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.cw-or{color:var(--muted);font-size:14.5px;margin:0}

@media (prefers-reduced-motion:reduce){*:not(.cw-word){animation:none!important;transition:none!important}}

/* The privacy policy (/w/privacy): a long public page, no menu. */
.policy{max-width:760px;margin:0 auto;padding:28px 16px 48px;display:grid;gap:14px}
.policy-h{display:grid;justify-items:center;text-align:center;gap:6px;margin-bottom:6px}
.policy-date{margin:0;color:var(--muted);font-size:15px}
.policy-langs{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;font-size:15px}
.policy-langs a{color:var(--navy)}
.policy h2{font-size:21px;color:var(--navy);margin:0 0 8px}
.policy p{margin:0 0 10px}
.policy p:last-child{margin-bottom:0}
.policy ul{margin:0;padding-inline-start:22px;display:grid;gap:8px}
.policy-foot{text-align:center;color:var(--muted);font-size:15px}
/* /w/app: the one-time code for the phone app, as a QR and as text */
.panel .sec{margin:0}
.panel + .panel{margin-top:16px}
.panel.pair{max-width:640px;grid-template-columns:auto 1fr;align-items:center;gap:22px}
.pair .qr{background:#fff;border-radius:14px;line-height:0}
.pair .qr svg{display:block;width:216px;height:auto}
.pair-t{display:grid;gap:10px}
.pair-or{color:var(--muted);font-size:15px}
.pair-code{font-size:30px;font-weight:800;letter-spacing:3px;color:var(--navy);font-family:var(--mono)}
.app-steps{margin:0;padding-inline-start:22px;display:grid;gap:8px}
/* /w/pair: the code to type is the fallback, folded under 'the button didn't work?' */
.pair-more summary{cursor:pointer;color:var(--navy);font-weight:700;font-size:15px;min-height:32px;text-underline-offset:3px;text-decoration:underline}
.pair-more[open] summary{color:var(--muted);margin-bottom:6px}
.pair-more .pair-code{margin-top:4px}
@media (max-width:560px){.panel.pair{grid-template-columns:1fr;justify-items:center;text-align:center}}

/* ── the signup (/w/signup): the sign-in page's box, a step bar, and the welcome page's who-choices in one column ── */
.signup .box{position:relative;max-width:520px}
.signup .box form.back{position:absolute;top:18px;inset-inline-start:22px;width:auto}
.signup .linkbtn{margin:0;font-size:15.5px}
.progress{width:100%;display:grid;gap:6px;font-size:14px;color:var(--muted);text-align:start}
.progress .bar{height:6px;border-radius:999px;background:var(--line);overflow:hidden}
.progress .bar i{display:block;height:100%;background:var(--gold);border-radius:inherit}
.progress .bar.s1 i{width:34%} .progress .bar.s2 i{width:67%} .progress .bar.s3 i{width:100%}
.row-links{display:flex;gap:22px;justify-content:center;flex-wrap:wrap}
.box .row-links form{width:auto}
.fields label .hint{display:flex;gap:6px;align-items:center;color:var(--green);font-weight:600}
.fields label .hint .i{width:16px;height:16px}
/* /w/gmail: checked mail and security notices */
.mail-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.mail-item{border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:grid;gap:8px}
.mail-h{display:flex;gap:6px 10px;align-items:center;flex-wrap:wrap;cursor:pointer;list-style:none}
.mail-h::-webkit-details-marker{display:none}
.mail-h .sub{flex-basis:100%}
.mail-item[open] .mail-h{padding-bottom:4px;border-bottom:1px solid var(--line)}
.mail-subject{font-size:16px;color:var(--navy);overflow-wrap:anywhere}
.mail-why{display:grid;gap:6px}
/* /w/gmail's two columns (option B, 2026-11-07): the found mail wide, the connection beside it; one column on a phone,
   the list first. Scoped here: .panel is 460px wide everywhere else. */
.gm-cols{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px;align-items:start;max-width:1120px}
.gm-main,.gm-side{display:grid;gap:16px;min-width:0}
.gm-cols .panel{max-width:none;justify-items:stretch}
.gm-cols .panel + .panel{margin-top:0}
.gm-state{display:flex}
.mail-rows{list-style:none;margin:0;padding:0;display:grid}
.mail-rows > li + li{border-top:1px solid var(--line)}
.mail-rows .mail-item{border:0;border-radius:0;padding:0}
.mail-rows .mail-h{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:2px 12px;padding:12px 2px}
.mail-rows .mail-subject{min-width:0}
.mail-when{color:var(--muted);font-size:14px;white-space:nowrap;font-variant-numeric:tabular-nums}
.mail-chev{display:flex;color:var(--faint)}
.mail-chev .i{width:18px;height:18px;transform:rotate(-90deg);transition:transform .15s}
.mail-rows .mail-item[open] .mail-chev .i{transform:rotate(90deg)}
.mail-from{grid-column:2 / -1;color:var(--muted);font-size:14px;min-width:0;overflow-wrap:anywhere}
.mail-rows .mail-item[open] .mail-h{border-bottom:0;padding-bottom:6px}
.mail-more{display:grid;gap:8px;padding:0 2px 14px}
@media (max-width:760px){.gm-cols{grid-template-columns:1fr}}
@media (max-width:480px){.mail-rows .mail-h{grid-template-columns:auto minmax(0,1fr) auto}.mail-when{grid-column:2;grid-row:3}}
@media (prefers-reduced-motion:reduce){.mail-chev .i{transition:none}}

/* Signing up and signing in (_auth.html), in the website's look: its colours, type, card and buttons. */
.auth{--a-navy:#1B2A6B;--a-gold:#E0A438;--a-gold-hover:#C98F28;--a-muted:#5A5F6B;--a-line:#C9CDD6;--a-err:#C81E1E;min-height:calc(100vh - 60px);display:flex;flex-direction:column;font-family:Heebo,"Hanken Grotesk",system-ui,sans-serif}
.auth input,.auth button{font-family:inherit}
.auth-top{display:flex;align-items:center;justify-content:space-between;padding:16px 20px}
.auth-top .logo{width:40px;height:40px}
.auth .back .linkbtn{margin:0;font-size:15px;font-weight:400;color:var(--a-muted);min-height:44px}
.auth-main{flex:1;display:flex;align-items:center;justify-content:center;padding:0 20px 40px;outline:none}
.auth-card{width:100%;max-width:520px;background:#fff;border-radius:24px;padding:20px;box-shadow:0 8px 24px rgba(14,22,64,.07);display:grid;gap:14px;text-align:start}
@media (min-width:768px){.auth-card{padding:40px}}
.auth h1{margin:0;font-size:26px;font-weight:700;line-height:1.25;color:var(--a-navy)}
.auth h2{margin:6px 0 0;padding-top:18px;border-top:1px solid #E5E7EB;font-size:20px;font-weight:700;line-height:1.3;color:var(--a-navy)}
.auth-card>p{margin:0 0 6px;font-size:17px;line-height:1.6;color:var(--a-muted)}
.auth .progress{font-size:13px;color:var(--a-muted);margin-bottom:6px}
.auth .progress .bar i{background:var(--a-gold)}
.auth .progress .bar.s1 i{width:50%}
.auth .progress .bar.s2 i{width:100%}
.auth .fields{gap:14px}
.auth .fields label{font-size:14px;font-weight:400;color:var(--a-muted);gap:8px}
.auth .fields input{min-height:56px;font-size:18px;border-radius:14px;border:1px solid var(--a-line);background:#fff;color:#111827}
[dir="rtl"] .auth .fields input[dir="ltr"]{text-align:right}
.auth .fields input:focus{border-color:var(--a-navy);box-shadow:0 0 0 3px var(--a-gold)}
.auth .fields input[aria-invalid="true"]{border-color:#F87171}
.auth .fields input.locked{background:#F3F4F6}
.auth .fields input.code{font-size:24px;letter-spacing:.5em;text-align:center}
.auth .fields .hint,.auth .hint{margin:0;font-size:14px;font-weight:400;line-height:1.5;color:var(--a-muted)}
.auth .hint.center{text-align:center}
.auth-names{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.auth-names input{min-width:0;width:100%}
.auth-err{margin:0;font-size:14px;line-height:1.5;color:var(--a-err)}
.auth .btn.primary{width:100%;margin-top:4px;min-height:56px;border-radius:999px;background:var(--a-gold);color:var(--a-navy);font-size:17px;font-weight:500}
.auth .btn.primary:hover{filter:none;background:var(--a-gold-hover)}
.auth .btn.google{width:100%;min-height:56px;border-radius:14px;border:1px solid var(--a-line);color:var(--a-navy);font-size:18px;font-weight:500}
.auth .btn.wa{width:100%;border-radius:999px}
.auth .or{color:var(--a-muted)}
.auth-link{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;margin:0;font-size:16px;font-weight:600;color:var(--a-navy);text-decoration:underline;text-underline-offset:3px;text-align:center}
.auth .row-links{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.auth .row-links .linkbtn{margin:0;min-height:44px;font-size:14px;font-weight:600;color:var(--a-navy)}
.auth .row-links .linkbtn.quiet{font-weight:400;color:var(--a-muted);text-decoration:underline}
.auth .number{white-space:nowrap}
.auth .enter-default{position:absolute;width:1px;height:1px;padding:0;border:0;opacity:0;pointer-events:none}