/* Super Kids HQ — tokens and components, from the Claude Design mockups (2026-09-26). */

:root {
  --bg: oklch(0.965 0.012 80);
  --surf: oklch(0.993 0.005 85);
  --ink: oklch(0.22 0.02 55);
  --ink2: oklch(0.42 0.02 55);
  --edge: oklch(0.22 0.02 55);
  --line2: oklch(0.87 0.012 75);
  --sh: oklch(0.22 0.02 55);
  --dot: oklch(0.86 0.02 70);
  --accInk: oklch(0.5 0.14 45);
  --accSoft: oklch(0.92 0.05 60);
  /* Kid colours: each kid has a hue (--h, set per kid by setKids in ui.js); these set the shades. */
  --kInkL: 0.5;
  --kSoftL: 0.92;
  --kSoftC: 0.05;
  --onAcc: oklch(0.2 0.02 55);
  --alertBg: oklch(0.46 0.17 25);
  --alertInk: oklch(0.98 0.01 80);
  --stripe1: oklch(0.92 0.01 75);
  --stripe2: oklch(0.88 0.012 75);
  --ok: oklch(0.48 0.12 145);
  --rays: oklch(0.2 0.02 55 / .13);
  /* Home tile groups. */
  --sosSoft: oklch(0.92 0.055 25);   --sosDot: oklch(0.82 0.08 25);
  --recSoft: oklch(0.92 0.045 300);  --recDot: oklch(0.82 0.07 300);
  --planSoft: oklch(0.93 0.04 240);  --planDot: oklch(0.83 0.06 240);
  --kitSoft: oklch(0.94 0.06 95);    --kitDot: oklch(0.85 0.08 95);
  --doneSoft: oklch(0.92 0.07 128);
  --capBg: oklch(0.9 0.13 95);
  --capInk: oklch(0.22 0.02 55);
}
/* Dark only when chosen in Settings ("Dark", or "Match phone" on a phone set to dark). */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bg: oklch(0.29 0.04 265);
    --surf: oklch(0.345 0.045 265);
    --ink: oklch(0.97 0.01 85);
    --ink2: oklch(0.83 0.025 260);
    --edge: oklch(0.17 0.035 265);
    --line2: oklch(0.42 0.04 265);
    --sh: oklch(0.17 0.035 265);
    --dot: oklch(0.38 0.045 265);
    --accInk: oklch(0.84 0.13 65);
    --accSoft: oklch(0.42 0.07 55);
    --kInkL: 0.84;
    --kSoftL: 0.42;
    --kSoftC: 0.07;
    --alertBg: oklch(0.52 0.17 25);
    --stripe1: oklch(0.33 0.04 265);
    --stripe2: oklch(0.37 0.045 265);
    --ok: oklch(0.82 0.14 145);
    --rays: oklch(0.97 0.01 85 / .1);
    --sosSoft: oklch(0.47 0.1 25);    --sosDot: oklch(0.54 0.11 25);
    --recSoft: oklch(0.45 0.09 300);  --recDot: oklch(0.52 0.1 300);
    --planSoft: oklch(0.45 0.08 240); --planDot: oklch(0.52 0.09 240);
    --kitSoft: oklch(0.5 0.08 95);    --kitDot: oklch(0.57 0.09 95);
    --doneSoft: oklch(0.47 0.09 128);
  }
}
:root[data-theme="dark"] {
  --bg: oklch(0.29 0.04 265);
  --surf: oklch(0.345 0.045 265);
  --ink: oklch(0.97 0.01 85);
  --ink2: oklch(0.83 0.025 260);
  --edge: oklch(0.17 0.035 265);
  --line2: oklch(0.42 0.04 265);
  --sh: oklch(0.17 0.035 265);
  --dot: oklch(0.38 0.045 265);
  --accInk: oklch(0.84 0.13 65);
  --accSoft: oklch(0.42 0.07 55);
  --kInkL: 0.84;
  --kSoftL: 0.42;
  --kSoftC: 0.07;
  --alertBg: oklch(0.52 0.17 25);
  --stripe1: oklch(0.33 0.04 265);
  --stripe2: oklch(0.37 0.045 265);
  --ok: oklch(0.82 0.14 145);
  --rays: oklch(0.97 0.01 85 / .1);
  --sosSoft: oklch(0.47 0.1 25);    --sosDot: oklch(0.54 0.11 25);
  --recSoft: oklch(0.45 0.09 300);  --recDot: oklch(0.52 0.1 300);
  --planSoft: oklch(0.45 0.08 240); --planDot: oklch(0.52 0.09 240);
  --kitSoft: oklch(0.5 0.08 95);    --kitDot: oklch(0.57 0.09 95);
  --doneSoft: oklch(0.47 0.09 128);
}

* { box-sizing: border-box; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] { color-scheme: dark; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: Archivo, system-ui, sans-serif; font-size: 16px; line-height: 1.35;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
a { color: inherit; text-decoration: none; }
/* Cards and buttons: no text selection or iPhone link preview on a long press. */
a[href^="#"], a[href^="tel:"], button { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--accInk); outline-offset: 2px; }
.mono { font: 500 12px 'JetBrains Mono', ui-monospace, monospace; color: var(--ink2); }
@media (prefers-reduced-motion: reduce) { *, ::backdrop { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

#app {
  max-width: 480px; margin: 0 auto; min-height: 100dvh;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
.page { padding: 8px 20px 56px; display: flex; flex-direction: column; gap: 20px; }
.boot { min-height: 80dvh; display: grid; place-items: center; }

/* ---------- bilingual text ---------- */
.bi { display: flex; flex-direction: column; min-width: 0; }
.bi .hi { font-family: Mukta, sans-serif; font-weight: 500; }
.cap .en {
  align-self: flex-start; font: 800 13px Archivo, sans-serif; letter-spacing: .1em; text-transform: uppercase;
  background: var(--capBg); color: var(--capInk); border: 2px solid var(--edge); border-radius: 4px;
  padding: 3px 8px 2px; box-shadow: 2px 2px 0 var(--sh); transform: rotate(-1.5deg);
}
.cap .hi { font-size: 13px; line-height: 1.3; color: var(--ink2); }
.cap { padding: 0 4px; }
.caprow { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.label .en { font: 650 17px/1.2 Archivo, sans-serif; }
.label .hi { font-size: 14px; line-height: 1.3; color: var(--ink2); }
.small .en { font: 700 13px/1.2 Archivo, sans-serif; text-transform: uppercase; letter-spacing: .06em; }
.small .hi { font-size: 13px; line-height: 1.2; color: var(--ink2); }
.muted { color: var(--ink2); }

/* ---------- comic furniture ---------- */
.panel {
  position: relative; overflow: hidden; border-radius: 22px; background: var(--surf);
  border: 2.5px solid var(--edge); box-shadow: 5px 5px 0 var(--sh); padding: 16px 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.panel > * { position: relative; }
.panel > .dots, .dots {
  position: absolute; top: 0; right: 0; width: 130px; height: 130px; pointer-events: none;
  background-image: radial-gradient(var(--dot) 1.4px, transparent 1.7px); background-size: 7px 7px;
  -webkit-mask-image: radial-gradient(circle at 100% 0, #000 10%, transparent 70%);
  mask-image: radial-gradient(circle at 100% 0, #000 10%, transparent 70%);
}
.tilt {
  align-self: flex-start; transform: rotate(-2.5deg); background: var(--ink); color: var(--bg);
  padding: 5px 10px 4px; border-radius: 6px; display: inline-flex; gap: 8px; align-items: baseline;
}
.tilt .en { font: 800 12px Archivo, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.tilt .hi { font: 500 13px Mukta, sans-serif; opacity: .88; }
.tilt.stack { flex-direction: column; gap: 0; }
.tilt.flat { transform: none; }

/* Kid colours and emblems. Anything marked .kc (plus the kid's id as a class) takes that kid's
   colour: --kid (solid), --kidInk (text), --kidSoft (backgrounds). Shapes: sh-circle, sh-diamond, sh-square. */
.kc {
  --kid: oklch(0.74 0.15 var(--h, 55));
  --kidInk: oklch(var(--kInkL) 0.13 var(--h, 55));
  --kidSoft: oklch(var(--kSoftL) var(--kSoftC) var(--h, 55));
}
.emb { width: var(--s); height: var(--s); display: grid; place-items: center; flex: none; }
.emb i {
  font-style: normal; width: 100%; height: 100%; display: grid; place-items: center;
  border: 2px solid var(--edge); color: var(--onAcc);
  font: 900 calc(var(--s) * .46) Archivo, sans-serif;
}
.emb.kc i { background: var(--kid); }
.emb.sh-circle i { border-radius: 50%; }
.emb.sh-square i { width: 88%; height: 88%; border-radius: 28%; }
.emb.sh-diamond i { width: 80%; height: 80%; border-radius: 22%; transform: rotate(45deg); }
.emb.sh-diamond b { transform: rotate(-45deg); }
.emb.shadow i { box-shadow: 4px 4px 0 var(--sh); border-width: 2.5px; }
.emb.big i { border-width: 3px; box-shadow: 5px 5px 0 var(--sh); }

/* ---------- screen headers ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding-top: 4px; }
/* Home's name: "Super" and "Kids" in the kids' colours, "HQ" as a label. */
.brand { font: 900 min(20px, 5.4vw)/1 Archivo, sans-serif; font-stretch: 118%; letter-spacing: .02em; white-space: nowrap; }
.brand { display: inline-block; transform: skewX(-8deg); }
.brand .kc {
  color: var(--kid); -webkit-text-stroke: 1.6px var(--edge); paint-order: stroke fill;
  text-shadow: 2px 2px 0 var(--sh);
}
.brand .hq {
  display: inline-block; background: var(--ink); color: var(--bg); border-radius: 6px;
  padding: 3px 6px 2px; font-size: .7em; vertical-align: .15em;
}
.avatar {
  width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--edge); background: var(--surf);
  display: grid; place-items: center; font: 800 16px Archivo, sans-serif;
}
.head { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 0 0; }
.back {
  width: 52px; height: 52px; border-radius: 18px; border: 2px solid var(--edge); background: var(--surf);
  box-shadow: 3px 3px 0 var(--sh); display: grid; place-items: center; font: 800 22px Archivo, sans-serif; flex: none;
}
.back:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--sh); }
.head .title .en { font: 900 25px/1.05 Archivo, sans-serif; font-stretch: 112%; text-transform: uppercase; }
.head .title .hi { font-size: 15px; line-height: 1.3; color: var(--ink2); }
.head .right { margin-left: auto; }

/* ---------- home ---------- */
/* Hero: one slim row (2026-09-27). The greeting shrinks on narrow phones and never runs under I Z. */
.hero {
  position: relative; border-radius: 22px; border: 2.5px solid var(--edge); box-shadow: 4px 4px 0 var(--sh);
  overflow: hidden; background: var(--surf);
}
.hero .rays {
  position: absolute; inset: 0; transform-origin: 86% 50%;
  background: repeating-conic-gradient(from 0deg at 86% 50%, var(--dot) 0 3.5deg, transparent 3.5deg 11deg);
  -webkit-mask-image: radial-gradient(circle at 86% 50%, #000 15%, transparent 60%);
  mask-image: radial-gradient(circle at 86% 50%, #000 15%, transparent 60%);
}
.hero .ht {
  position: absolute; inset: 0; background-image: radial-gradient(var(--dot) 1.4px, transparent 1.7px); background-size: 8px 8px;
  -webkit-mask-image: linear-gradient(200deg, transparent 35%, #000 100%); mask-image: linear-gradient(200deg, transparent 35%, #000 100%);
}
.hero .in { position: relative; padding: 11px 12px 11px 14px; display: flex; align-items: center; gap: 10px; }
.hero .words { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.hero .greet .en {
  font: 900 min(19px, 4.6vw)/1 Archivo, sans-serif; font-stretch: 108%; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hero .greet .hi { font-size: 13px; line-height: 1.2; color: var(--ink2); margin-top: 2px; }
.hero .duo { display: flex; align-items: center; flex: none; }
.hero .duo.pair .emb:nth-child(1) { transform: rotate(-6deg); }
.hero .duo .emb + .emb { margin-left: -4px; }
.hero .duo.crew .emb + .emb { margin-left: -10px; }
.hero .duo .more { margin-left: 4px; font: 800 13px Archivo, sans-serif; color: var(--ink2); }
.hero .emb.shadow i { box-shadow: 2px 2px 0 var(--sh); border-width: 2px; }

/* Intro, about 2.4s, each time Home opens. Reduced motion turns it off (global rule).
   One kid (solo): drops in and hops. Two (pair): the first drops in, the second spins in, a
   high five that flashes the rays, then a hop each. Three or more (crew): they drop in one
   after another, then hop in a wave. */
.hero .words { animation: hq-words .5s ease-out both; }
.hero .duo.solo .emb { animation: hq-drop .7s cubic-bezier(.3, 1.5, .5, 1) backwards, hq-hop .5s 1s ease-in-out; }
.hero .duo.pair .emb:nth-child(1) { animation: hq-drop .7s cubic-bezier(.3, 1.5, .5, 1) backwards, hq-five-iv 1.3s 1s ease-in-out; }
.hero .duo.pair .emb:nth-child(2) { animation: hq-spin .8s .2s cubic-bezier(.3, 1.4, .5, 1) backwards, hq-five-zi 1.3s 1s ease-in-out; }
.hero .duo.crew .emb {
  animation: hq-drop .6s cubic-bezier(.3, 1.5, .5, 1) backwards, hq-hop .45s ease-in-out;
  animation-delay: calc(var(--i) * 120ms), calc(1s + var(--i) * 120ms);
}
@keyframes hq-hop { 0%, 100% { transform: none; } 50% { transform: translateY(-9px); } }
.hero .rays { animation: hq-rays 1.2s .9s ease-out backwards; }
@keyframes hq-words { from { opacity: 0; transform: translateX(-12px); } }
@keyframes hq-drop { from { opacity: 0; transform: translateY(-60px) rotate(-40deg) scale(.5); } }
@keyframes hq-spin { from { opacity: 0; transform: translateX(50px) rotate(-270deg) scale(.4); } }
@keyframes hq-five-iv {
  0%, 40%, 80%, 100% { transform: rotate(-6deg); }
  20% { transform: translateX(6px) rotate(8deg) scale(1.15); }
  60% { transform: translateY(-9px) rotate(-10deg); }
}
@keyframes hq-five-zi {
  0%, 40%, 100% { transform: none; }
  20% { transform: translateX(-6px) rotate(-8deg) scale(1.15); }
  75% { transform: translateY(-9px) rotate(8deg); }
  90% { transform: none; }
}
@keyframes hq-rays {
  from { opacity: 0; transform: scale(.4); }
  30% { opacity: 1; transform: scale(1.1) rotate(8deg); }
  to { transform: none; }
}

.strip { display: flex; gap: 12px; overflow-x: auto; margin: 0 -20px; padding: 2px 20px 10px; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding: 0 20px; }
.strip::-webkit-scrollbar { display: none; }
.due {
  flex: 0 0 248px; scroll-snap-align: start; min-height: 104px; padding: 14px 16px; border-radius: 20px;
  border: 2px solid var(--edge); box-shadow: 4px 4px 0 var(--sh); display: flex; gap: 12px; align-items: flex-start;
  background: var(--surf);
}
.due.kc { background: var(--kidSoft); }
.due .bi .en { font: 750 16px/1.2 Archivo, sans-serif; text-wrap: pretty; }
.due .bi .hi { font-size: 14px; line-height: 1.3; }
.due .sub { font: 500 13px/1.3 Archivo, sans-serif; color: var(--ink2); margin-top: 2px; }
.due.wide { flex-basis: 100%; min-height: 0; }
/* Coming-up cards fly in from the left; home.js sets each card's delay (see flyer()). */
.due.fly { animation: hq-fly .45s cubic-bezier(.25, 1.3, .5, 1) backwards; }
@keyframes hq-fly { from { opacity: 0; transform: translateX(-70px) rotate(-4deg); } }
/* Section tiles lift off the page onto their shadow (the press, in reverse); see lifter(). */
.tile.lift { animation: hq-lift .32s cubic-bezier(.3, 1.6, .5, 1) backwards; }
@keyframes hq-lift { from { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--sh); opacity: .3; } }
.dday {
  flex: none; width: 38px; padding: 3px 0 4px; border-radius: 9px; border: 2px solid var(--edge); background: var(--planSoft);
  display: flex; flex-direction: column; align-items: center; font: 800 9px Archivo, sans-serif; letter-spacing: .08em; text-transform: uppercase;
}
.dday b { font: 900 17px/1 Archivo, sans-serif; letter-spacing: 0; }

.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tile {
  position: relative; overflow: hidden; min-height: 92px; padding: 12px 14px; border-radius: 20px;
  border: 2px solid var(--edge); background: var(--surf); color: var(--ink); box-shadow: 4px 4px 0 var(--sh);
  display: flex; flex-direction: column; justify-content: flex-start; gap: 6px;
  transition: transform .08s, box-shadow .08s;
}
.tile:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--sh); }
.tile .dots { width: 90px; height: 80px; }
.tgroup { display: flex; flex-direction: column; gap: 10px; }
.tgroup.sos .tile { background: var(--sosSoft); }
.tgroup.rec .tile { background: var(--recSoft); }
.tgroup.plan .tile { background: var(--planSoft); }
.tgroup.kit .tile { background: var(--kitSoft); }
.tgroup.later .tile { background: transparent; border-style: dashed; box-shadow: none; }
.tgroup.sos .dots { background-image: radial-gradient(var(--sosDot) 1.4px, transparent 1.7px); }
.tgroup.rec .dots { background-image: radial-gradient(var(--recDot) 1.4px, transparent 1.7px); }
.tgroup.plan .dots { background-image: radial-gradient(var(--planDot) 1.4px, transparent 1.7px); }
.tgroup.kit .dots { background-image: radial-gradient(var(--kitDot) 1.4px, transparent 1.7px); }
.tile.wide { grid-column: 1 / -1; }
.tile.wide .dots { width: 160px; height: 90px; }
.tile.soon .sub i { font-style: italic; }
.tile .n { position: relative; font: 500 12px 'JetBrains Mono', monospace; opacity: .75; }
.tile .bot { position: relative; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.tile .bot .bi { gap: 1px; }
.tile .bi .en { font: 800 17px/1.15 Archivo, sans-serif; text-wrap: balance; }
.tile .bi .hi { font-size: 14px; line-height: 1.25; opacity: .82; }
.tile .sub {
  margin-top: auto; font: 500 13px/1.3 Archivo, sans-serif; opacity: .78;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- choosers ---------- */
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.seg.three { grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
/* "Who is this for": all + one per kid, wrapping onto a second row past three. */
/* Kid colour swatches: the chosen one gets a ring. */
.chip[data-color][aria-pressed="true"] { outline: 3px solid var(--ink); outline-offset: 3px; }
/* English only (someone's language is "en"): hide the second-language lines. */
/* Hides second-language text, never a box to type in (e.g. a kid's name in Hindi). */
.lang-en [lang="hi"]:not(input, textarea), .lang-en [lang="bn"]:not(input, textarea) { display: none !important; }
.seg.who { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 10px; }
.opt {
  min-height: 60px; padding: 8px 14px; border-radius: 18px; border: 2px solid var(--line2); background: var(--surf);
  display: flex; flex-direction: column; justify-content: center; gap: 0;
}
.opt .en { font: 750 16px/1.15 Archivo, sans-serif; }
.opt .hi { font: 500 14px/1.2 Mukta, sans-serif; }
.opt[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--edge); }
.opt.center { align-items: center; text-align: center; }
.opt.kc[aria-pressed="true"] { background: var(--kid); color: var(--onAcc); box-shadow: 4px 4px 0 var(--sh); }
.opt.kid-all[aria-pressed="true"] { box-shadow: 4px 4px 0 var(--sh); }
.opt.kid { border-color: var(--edge); }

.twintabs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 5px; border-radius: 24px; border: 2px solid var(--edge); background: var(--surf); }
.twintab {
  min-height: 60px; border-radius: 18px; border: 2px solid transparent; display: flex; align-items: center;
  justify-content: center; gap: 10px;
}
.twintab .en { font: 800 17px/1.1 Archivo, sans-serif; }
.twintab .hi { font-size: 13px; line-height: 1.2; }
.twintab[aria-selected="true"] { border-color: var(--edge); }
.twintab.kc[aria-selected="true"] { background: var(--kid); color: var(--onAcc); }
.pip { width: 16px; height: 16px; border: 2px solid var(--edge); flex: none; }
.pip.kc { background: var(--kid); }
.pip.sh-circle { border-radius: 50%; }
.pip.sh-square { border-radius: 5px; }
.pip.sh-diamond { border-radius: 3px; transform: rotate(45deg) scale(.85); }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  min-height: 44px; padding: 4px 14px; border-radius: 14px; border: 2px solid var(--edge); background: var(--surf);
  display: flex; flex-direction: column; justify-content: center;
}
.chip .en { font: 750 14px/1.1 Archivo, sans-serif; }
.chip .hi { font: 500 12px/1.15 Mukta, sans-serif; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

/* ---------- buttons ---------- */
.btn {
  min-height: 60px; border-radius: 20px; border: 2px solid var(--edge); background: var(--ink); color: var(--bg);
  box-shadow: 4px 4px 0 var(--sh); display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 6px 16px; transition: transform .08s, box-shadow .08s;
}
.btn .en { font: 800 18px/1.2 Archivo, sans-serif; }
.btn .hi { font: 500 14px/1.3 Mukta, sans-serif; opacity: .9; }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--sh); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.ghost { background: var(--surf); color: var(--ink); }
.btn.danger { background: var(--alertBg); color: var(--alertInk); }
.btn.slim { min-height: 48px; border-radius: 16px; box-shadow: 3px 3px 0 var(--sh); }
.btn.slim .en { font-size: 15px; }
.btn.slim .hi { font-size: 12px; }
.btnrow { display: flex; gap: 10px; }
.btnrow > * { flex: 1; }
.link { font: 700 14px Archivo, sans-serif; text-decoration: underline; text-underline-offset: 3px; color: var(--ink2); padding: 8px 4px; }

/* ---------- lists ---------- */
.list { border-radius: 20px; border: 2px solid var(--edge); background: var(--surf); overflow: hidden; }
.list > .li { min-height: 62px; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; }
.list > .li + .li { border-top: 1.5px solid var(--line2); }
.li .main { display: flex; flex-direction: column; min-width: 0; }
.li .main .t { font: 700 16px/1.25 Archivo, sans-serif; }
.li .main .s { font: 500 13px/1.3 Archivo, sans-serif; color: var(--ink2); }
.pill {
  padding: 5px 10px; border-radius: 12px; border: 2px solid var(--edge); background: var(--surf);
  display: flex; flex-direction: column; align-items: center; flex: none; min-width: 58px;
}
.pill .en { font: 800 13px/1.1 Archivo, sans-serif; }
.pill .hi { font: 500 12px/1.2 Mukta, sans-serif; }
.pill.kc { background: var(--kid); color: var(--onAcc); }

.card {
  min-height: 64px; padding: 12px 16px; border-radius: 18px; border: 1.5px solid var(--line2); background: var(--surf);
  display: flex; flex-direction: column; gap: 2px; width: 100%;
}
.card .t { font: 700 17px/1.2 Archivo, sans-serif; }
.card .s { font: 500 14px/1.3 Archivo, sans-serif; color: var(--ink2); }
.card .h { font: 500 14px/1.3 Mukta, sans-serif; color: var(--ink2); }
.empty {
  padding: 14px 16px; border-radius: 18px; border: 2px dashed var(--line2); color: var(--ink2);
  display: flex; flex-direction: column; gap: 2px;
}
.empty .en { font: 600 15px/1.3 Archivo, sans-serif; }
.empty .hi { font: 500 14px/1.3 Mukta, sans-serif; }

.timeline { display: flex; flex-direction: column; }
.tl { display: grid; grid-template-columns: 22px 1fr; gap: 12px; text-align: left; width: 100%; }
.tl .rail { display: flex; flex-direction: column; align-items: center; }
.tl .rail i { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid var(--edge); margin-top: 4px; flex: none; }
.tl .rail u { width: 2.5px; flex: 1; background: var(--line2); }
.tl:last-child .rail u { visibility: hidden; }
.tl .body { display: flex; flex-direction: column; gap: 2px; padding-bottom: 18px; }
.tl .d { font: 500 12px 'JetBrains Mono', monospace; color: var(--ink2); text-transform: uppercase; }
.tl .t { font: 750 17px/1.2 Archivo, sans-serif; }
.tl .n { font: 500 14px/1.35 Archivo, sans-serif; color: var(--ink2); }

/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > .bi { padding: 0 4px; }
.input {
  min-height: 56px; width: 100%; padding: 12px 16px; border-radius: 16px; border: 2px solid var(--edge);
  background: var(--surf); font: 600 17px Archivo, sans-serif; color: var(--ink);
}
textarea.input { min-height: 96px; resize: vertical; line-height: 1.4; font-weight: 500; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.input:focus { outline: 3px solid var(--accInk); outline-offset: 1px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; } /* a label that wraps can't push its box out of line */
.row2 > * { min-width: 0; } /* a date box can't push past the screen edge */
.row2 input[type="date"] { min-width: 0; padding-left: 12px; padding-right: 12px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.check { display: flex; align-items: center; gap: 12px; min-height: 52px; }
.check input { width: 26px; height: 26px; accent-color: var(--ink); flex: none; }
.err { color: var(--alertBg); font: 600 14px/1.3 Archivo, sans-serif; }
:root[data-theme="dark"] .err { color: oklch(0.75 0.14 25); }

dialog.sheet {
  width: min(460px, 100vw); max-width: 100vw; max-height: 92dvh; margin: auto auto 0; padding: 0;
  border: 2.5px solid var(--edge); border-bottom: 0; border-radius: 28px 28px 0 0; background: var(--bg); color: var(--ink);
}
@media (min-width: 520px) { dialog.sheet { margin: auto; border-bottom: 2.5px solid var(--edge); border-radius: 28px; box-shadow: 6px 6px 0 var(--sh); } }
dialog.sheet::backdrop { background: oklch(0.15 0.01 60 / .55); }
.sheet .in { padding: 22px 20px calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 16px; }
.sheet h2 { margin: 0; }
.sheet .htitle .en { font: 900 22px/1.1 Archivo, sans-serif; font-stretch: 110%; text-transform: uppercase; }
.sheet .htitle .hi { font-size: 15px; color: var(--ink2); }

/* ---------- packing ---------- */
.bags { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bag {
  min-height: 96px; padding: 12px 14px; border-radius: 20px; border: 2px solid var(--line2); background: var(--surf);
  display: flex; flex-direction: column; justify-content: space-between; gap: 8px;
}
.bag[aria-pressed="true"] { border-color: var(--edge); box-shadow: 4px 4px 0 var(--sh); }
.bag .code { font: 800 11px Archivo, sans-serif; letter-spacing: .1em; }
.bag .bi .en { font: 750 16px/1.15 Archivo, sans-serif; }
.bag .bi .hi { font-size: 13px; line-height: 1.25; color: var(--ink2); }
.meter { height: 10px; border-radius: 5px; background: var(--line2); overflow: hidden; border: 1.5px solid var(--edge); }
.meter > i { display: block; height: 100%; background: var(--ink); transition: width .3s; }
.bag .count { font: 650 13px Archivo, sans-serif; }
.bag.done .count { color: var(--ok); }
.ghead { display: flex; justify-content: space-between; align-items: flex-end; padding: 0 4px; }
.ghead.done .en, .ghead.done .gcount { color: var(--ok); }
.ghead.done .gcount::before { content: "✓ "; }
.gcount { font: 500 13px 'JetBrains Mono', monospace; color: var(--ink2); }
/* compact checklist rows: one bordered list per group, thin dividers */
.itemlist { border-radius: 16px; border: 1.5px solid var(--line2); background: var(--surf); overflow: hidden; }
.item {
  min-height: 48px; padding: 8px 12px; display: grid; grid-template-columns: 26px auto 1fr; gap: 10px;
  align-items: center; width: 100%; text-align: left; background: none;
}
.item + .item { border-top: 1px solid var(--line2); }
.item .box {
  width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--edge); display: grid; place-items: center;
  font: 900 15px Archivo, sans-serif; color: var(--bg);
}
.item .qty { font: 800 16px/1 Archivo, sans-serif; min-width: 1.6ch; text-align: right; font-variant-numeric: tabular-nums; }
.item .txt { display: flex; flex-direction: column; min-width: 0; }
.item .txt .en { font: 600 15px/1.25 Archivo, sans-serif; }
.item .txt .hi { font: 500 13px/1.25 Mukta, sans-serif; color: var(--ink2); }
.item .hint { font: 500 12px/1.3 Archivo, sans-serif; color: var(--ink2); margin-top: 2px; }
.item .hint [lang=hi] { font-family: Mukta, sans-serif; }
.pouch .item { grid-template-columns: 26px 1fr; }
.item[aria-checked="true"] { background: color-mix(in oklch, var(--surf) 60%, var(--bg)); }
.item[aria-checked="true"] .box { background: var(--ink); }
.item[aria-checked="true"] .txt .en, .item[aria-checked="true"] .qty { color: var(--ink2); text-decoration: line-through; }
.stepper { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 2px 4px; }
.stepper .bi .en { font: 700 15px/1.2 Archivo, sans-serif; }
.stepper .bi .hi { font-size: 13px; color: var(--ink2); }
.stepper .st { display: flex; align-items: center; gap: 8px; flex: none; }
.stepper .st .chip { width: 44px; align-items: center; font: 800 20px Archivo, sans-serif; }
.stepper .st b { font: 900 20px Archivo, sans-serif; min-width: 2ch; text-align: center; }
.ref.pouch summary { gap: 10px; }
.group { display: flex; flex-direction: column; gap: 6px; }
.sync { font: 500 11px 'JetBrains Mono', monospace; color: var(--ink2); text-transform: uppercase; letter-spacing: .06em; }
details.ref { border-radius: 20px; border: 2px solid var(--line2); background: var(--surf); }
details.ref summary { list-style: none; padding: 14px 16px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
details.ref summary::-webkit-details-marker { display: none; }
details.ref summary::after { content: "+"; font: 800 22px Archivo, sans-serif; }
details.ref[open] summary::after { content: "–"; }
details.ref .body { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.meds { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.meds td { padding: 8px 8px 8px 0; border-top: 1.5px solid var(--line2); vertical-align: top; }
.meds td:first-child { font-weight: 700; }
.meds .d { color: var(--ink2); }
.never { color: var(--alertBg); font-weight: 600; }
:root[data-theme="dark"] .never { color: oklch(0.75 0.14 25); }

/* ---------- emergency ---------- */
/* Scrolls sideways when there are more kids than fit. */
.emtabs { display: flex; gap: 10px; align-items: center; overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 2px 20px; }
.emtabs::-webkit-scrollbar { display: none; }
.emtab { flex: none; }
.emtab {
  min-height: 48px; padding: 0 16px; border-radius: 24px; border: 2px solid var(--line2); background: var(--surf);
  display: flex; align-items: center; gap: 8px;
}
.emtab .en { font: 750 16px Archivo, sans-serif; }
.emtab .hi { font: 500 14px Mukta, sans-serif; color: var(--ink2); }
.emtab[aria-selected="true"] { border-color: var(--edge); }
.emtab.kc[aria-selected="true"] { background: var(--kidSoft); }
.emscroll { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -20px; padding: 4px 20px 10px; scroll-padding: 0 20px; scrollbar-width: none; }
.emscroll::-webkit-scrollbar { display: none; }
.emcard {
  flex: 0 0 calc(100% - 8px); scroll-snap-align: start; border-radius: 28px; border: 2.5px solid var(--edge);
  background: var(--surf); box-shadow: 5px 5px 0 var(--sh); overflow: hidden; display: flex; flex-direction: column;
}
.emcard .top {
  position: relative; overflow: hidden; color: var(--onAcc); padding: 14px 18px; display: flex; align-items: center; gap: 14px;
  border-bottom: 2.5px solid var(--edge);
}
.emcard.kc .top { background: var(--kid); }
.emcard .top::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-conic-gradient(from 0deg at 100% 50%, var(--rays) 0 3deg, transparent 3deg 10deg);
  -webkit-mask-image: linear-gradient(90deg, transparent 55%, #000 100%); mask-image: linear-gradient(90deg, transparent 55%, #000 100%);
}
.emcard .top .emb i { background: var(--surf); color: var(--ink); box-shadow: 3px 3px 0 var(--sh); border-width: 2.5px; }
.emcard .top .bi { position: relative; }
.emcard .top .bi .en { font: 900 34px/1 Archivo, sans-serif; font-stretch: 115%; text-transform: uppercase; }
.emcard .top .bi .hi { font: 600 17px/1.3 Mukta, sans-serif; }
.emcard .body { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.call {
  min-height: 64px; border-radius: 20px; background: var(--ink); color: var(--bg); display: flex; align-items: center;
  gap: 14px; padding: 8px 14px;
}
.call .dial {
  width: 46px; height: 46px; border-radius: 50%; color: var(--onAcc); display: grid; place-items: center;
  font: 900 13px Archivo, sans-serif; letter-spacing: .06em; flex: none;
}
.emcard.kc .call .dial { background: var(--kid); }
.call .bi .en { font: 800 19px/1.15 Archivo, sans-serif; }
.call .bi .hi { font-size: 14px; line-height: 1.25; opacity: .85; }
.call .who { font: 500 13px/1.3 Archivo, sans-serif; opacity: .8; }
.call.off { background: var(--surf); color: var(--ink); border: 2px dashed var(--line2); }
.stat { border-radius: 18px; border: 2px solid var(--edge); padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; }
.stat .big { font: 900 42px/1 Archivo, sans-serif; margin-top: 4px; }
.stat .mid { font: 900 34px/1 Archivo, sans-serif; margin-top: 8px; }
.stat .mid small { font-size: 18px; }
.stat .unset { font: 700 18px/1.2 Archivo, sans-serif; color: var(--ink2); margin-top: 10px; }
.stat .when { font: 500 12px/1.3 Archivo, sans-serif; color: var(--ink2); margin-top: 4px; }
.alert { border-radius: 18px; background: var(--alertBg); color: var(--alertInk); border: 2px solid var(--edge); padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; }
.alert .small .en, .alert .small .hi { color: inherit; }
.alert .what { font: 900 30px/1.05 Archivo, sans-serif; text-transform: uppercase; margin-top: 4px; }
.alert .whathi { font: 600 17px/1.3 Mukta, sans-serif; }
.alert .note { font: 500 14px/1.3 Archivo, sans-serif; }
.contacts { border-radius: 18px; border: 2px solid var(--line2); overflow: hidden; }
.crow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px 9px 14px; }
.crow + .crow { border-top: 1.5px solid var(--line2); }
.crow .who { display: flex; flex-direction: column; min-width: 0; }
.crow .who .small { flex-direction: row; gap: 6px; align-items: baseline; }
.crow .who .small .en { font-size: 11px; }
.crow .who .small .hi { font-size: 12px; }
.crow .nm { font: 700 16px/1.25 Archivo, sans-serif; }
.crow .nt { font: 500 13px/1.3 Archivo, sans-serif; color: var(--ink2); }
.crow .ph { font: 600 14px/1.3 Archivo, sans-serif; color: var(--ink); font-variant-numeric: tabular-nums; }
.cpill {
  flex: none; min-width: 64px; min-height: 44px; padding: 4px 12px; border-radius: 14px; background: var(--ink); color: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.cpill .en { font: 800 14px/1.1 Archivo, sans-serif; }
.cpill .hi { font-size: 12px; line-height: 1.1; }
.cpill.off { background: transparent; color: var(--ink2); border: 1.5px dashed var(--line2); }
.cpill.off .en { font: 600 12px/1.1 Archivo, sans-serif; }
.medlink {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 14px;
  border-radius: 18px; border: 2px solid var(--edge); background: var(--sosSoft); color: var(--ink);
}
.medlink .bi .en { font: 700 15px/1.25 Archivo, sans-serif; }
.medlink .bi .hi { font-size: 14px; color: var(--ink2); }
.medlink > span:last-child { font: 800 22px Archivo, sans-serif; }
.box2 { border-radius: 18px; border: 2px solid var(--line2); padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.stamp { font: 500 11px 'JetBrains Mono', monospace; color: var(--ink2); text-align: center; padding-top: 2px; }

/* ---------- health ---------- */
.chart { border-radius: 20px; border: 2px solid var(--edge); background: var(--surf); padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 8px; }
.chart .now { display: flex; align-items: baseline; gap: 8px; }
.chart .now b { font: 900 32px/1 Archivo, sans-serif; }
.chart .now span { font: 600 14px Archivo, sans-serif; color: var(--ink2); }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .axis { display: flex; justify-content: space-between; font: 500 11px 'JetBrains Mono', monospace; color: var(--ink2); }
.fab {
  position: sticky; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 5; align-self: flex-end;
  min-height: 56px; padding: 6px 20px; border-radius: 28px; border: 2px solid var(--edge); background: var(--ink); color: var(--bg);
  box-shadow: 4px 4px 0 var(--sh); display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.fab .en { font: 800 16px/1.1 Archivo, sans-serif; }
.fab .hi { font: 500 13px/1.1 Mukta, sans-serif; opacity: .9; }

/* ---------- health ---------- */
.chipline { display: flex; flex-wrap: wrap; gap: 6px; }
.vshot { font: 700 13px/1 Archivo, sans-serif; padding: 6px 9px; border-radius: 10px; border: 1.5px solid var(--edge); background: var(--recSoft); color: var(--ink); }
.who-tag {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 3px 9px 3px 4px; border-radius: 999px;
  border: 1.5px solid var(--edge); font: 700 12px/1.2 Archivo, sans-serif; background: var(--surf);
}
.who-tag.kc { background: var(--kidSoft); }
.who-tag.all { background: var(--recSoft); }
.vrow { align-items: center; }
.vrow .main { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.vrow .main .s { font: 500 13px/1.3 Archivo, sans-serif; color: var(--ink2); }
.vrow.given { display: grid !important; grid-template-columns: 92px 1fr; align-items: start; text-align: left; }
.vdate { font: 500 12px/1.4 'JetBrains Mono', monospace; color: var(--ink2); text-transform: uppercase; padding-top: 4px; }
.datebtn {
  flex: none; min-height: 48px; min-width: 88px; padding: 4px 12px; border-radius: 14px; background: var(--ink); color: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.datebtn .en { font: 800 14px/1.1 Archivo, sans-serif; }
.datebtn .hi { font-size: 12px; line-height: 1.1; }
.datebtn.set { background: var(--recSoft); color: var(--ink); border: 2px solid var(--edge); }
.pages { display: flex; gap: 10px; flex-wrap: wrap; }
.thumb.small { width: 56px; height: 72px; border-radius: 10px; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.legend span { display: flex; align-items: center; gap: 6px; font: 600 14px Archivo, sans-serif; color: var(--ink2); }
.legend b { font: 900 24px/1 Archivo, sans-serif; color: var(--ink); }
/* A column per kid; past two or three kids the table scrolls sideways. */
.mtable { overflow-x: auto; }
.mtable .mrow { min-width: calc(100px + var(--n, 2) * 92px); }
.mtable .mrow { display: grid; grid-template-columns: 1.1fr repeat(var(--n, 2), 1fr); gap: 8px; align-items: center; text-align: left; font: 600 14px/1.3 Archivo, sans-serif; }
.mtable .mrow.head { min-height: 44px; font: 800 12px Archivo, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); }
.mtable .mrow.head span { display: flex; align-items: center; gap: 6px; }
.mtable .mrow .mono { font-size: 12px; }

/* ---------- medicine cheatsheet ---------- */
.medcard {
  width: 100%; text-align: left; padding: 14px 16px; border-radius: 20px; border: 2px solid var(--edge);
  background: var(--surf); display: flex; flex-direction: column; gap: 8px; color: var(--ink);
}
.medcard:disabled { cursor: default; opacity: 1; }
.medcard > .bi .en { font: 800 18px/1.15 Archivo, sans-serif; }
.medcard > .bi .hi { font-size: 15px; color: var(--ink2); }
.medcard .meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font: 500 14px/1.3 Archivo, sans-serif; color: var(--ink2); }
.medcard .meta .use { text-align: right; }
.medcard .use [lang=hi] { font-family: Mukta, sans-serif; }
.medcard .dose { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1.5px solid var(--line2); }
.dosepair { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.dosekid { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 14px; border: 2px solid var(--edge); }
.dosekid.kc { background: var(--kidSoft); }
.dosekid b { font: 900 22px/1 Archivo, sans-serif; }
.medcard .flags { display: flex; gap: 6px; flex-wrap: wrap; }
.medcard .flags:empty { display: none; }
.flag { font: 700 12px/1 Archivo, sans-serif; padding: 5px 8px; border-radius: 8px; border: 1.5px solid var(--line2); color: var(--ink2); }

/* ---------- photo viewer ---------- */
dialog.lightbox {
  width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh; margin: 0; padding: 0; border: 0;
  background: #0d0b09; color: #f5f1ea; display: flex; flex-direction: column;
}
dialog.lightbox:not([open]) { display: none; }
dialog.lightbox::backdrop { background: #0d0b09; }
.lb-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(16px + env(safe-area-inset-top)) 16px 12px 18px;
}
.lb-top .bi .en { font: 800 17px/1.2 Archivo, sans-serif; }
.lb-top .bi .hi { font: 500 13px 'JetBrains Mono', monospace; opacity: .75; }
.lb-x { width: 48px; height: 48px; padding: 0; border: 0; display: grid; place-items: center; border-radius: 50%; background: #f5f1ea; color: #0d0b09; font: 800 20px/1 Archivo, sans-serif; flex: none; }
.lb-track { flex: 1; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.lb-track::-webkit-scrollbar { display: none; }
.lb-page {
  flex: 0 0 100%; scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 0 8px calc(16px + env(safe-area-inset-bottom));
}
.lb-page img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lb-page iframe { width: 100%; flex: 1; border: 0; border-radius: 12px; background: #fff; }
.lb-page .btn { flex: none; }

/* ---------- photos ---------- */
.thumb {
  position: relative; width: 84px; height: 108px; border-radius: 12px; border: 2px solid var(--edge); background: var(--surf);
  overflow: hidden; display: grid; place-items: center; font: 800 13px Archivo, sans-serif;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb .x {
  position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--bg);
  display: grid; place-items: center; font: 800 14px Archivo, sans-serif;
}
.pillbtn {
  min-height: 48px; padding: 0 16px; border-radius: 24px; background: var(--surf); border: 2px solid var(--edge);
  display: flex; flex-direction: column; justify-content: center; cursor: pointer;
}
.pillbtn .en { font: 750 15px/1.1 Archivo, sans-serif; }
.pillbtn .hi { font: 500 12px/1.1 Mukta, sans-serif; color: var(--ink2); }
.pillbtn input { display: none; }

/* ---------- misc ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 50;
  background: var(--ink); color: var(--bg); padding: 12px 18px; border-radius: 16px; border: 2px solid var(--edge);
  box-shadow: 4px 4px 0 var(--sh); font: 700 15px Archivo, sans-serif; max-width: calc(100vw - 32px);
  opacity: 0; transform: translate(-50%, 16px); visibility: hidden; pointer-events: none;
  transition: opacity .2s, transform .2s, visibility 0s .2s;
}
.toast.show { opacity: 1; transform: translateX(-50%); visibility: visible; transition-delay: 0s; }
.banner { padding: 12px 16px; border-radius: 16px; border: 2px solid var(--edge); background: var(--accSoft); display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.banner .bi .en { font: 700 15px/1.2 Archivo, sans-serif; }
.banner .bi .hi { font-size: 13px; }
.signin { min-height: 90dvh; display: flex; flex-direction: column; justify-content: center; gap: 28px; padding: 28px; }
.signin .word { font: 900 62px/.88 Archivo, sans-serif; font-stretch: 118%; text-transform: uppercase; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 15px; }
.kv dt { color: var(--ink2); }
.kv dd { margin: 0; font-weight: 650; }

/* ---------- calendar ---------- */
.calrow { display: grid !important; grid-template-columns: 76px 1fr auto; gap: 10px; align-items: center; text-align: left; }
.calrow .when { font: 600 12px/1.3 'JetBrains Mono', monospace; color: var(--ink2); }
.calrow .main .t { font: 700 16px/1.25 Archivo, sans-serif; }
.calrow .main .s { font: 500 13px/1.3 Archivo, sans-serif; color: var(--ink2); }
.steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.4; }
.steps b { font-weight: 700; }

/* ---------- travel documents ---------- */
.trow { display: grid !important; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; }
.trow .main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.trow .main .bi .en { font: 700 16px/1.2 Archivo, sans-serif; }
.trow .main .bi .hi { font-size: 13px; color: var(--ink2); }
.trow .main .s { font: 500 12px/1.3 Archivo, sans-serif; color: var(--ink2); }
.empty-thumb { border-style: dashed !important; border-color: var(--line2) !important; color: var(--ink2); font-size: 22px !important; background: transparent !important; }
.tact { min-height: 44px; padding: 0 14px; }
.tact .en { font-size: 14px; }
.trow .link.on { color: var(--ok); text-decoration: none; font-weight: 800; }

/* ---------- activities ---------- */
.actcard { border-radius: 20px; border: 2px solid var(--edge); background: var(--planSoft); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.acthead { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; text-align: left; width: 100%; color: var(--ink); }
.acthead:disabled { cursor: default; opacity: 1; }
.acthead .t { font: 800 18px/1.2 Archivo, sans-serif; }
.nextpill { flex: none; padding: 6px 10px; border-radius: 12px; background: var(--ink); color: var(--bg); display: flex; flex-direction: column; align-items: center; }
.nextpill .en { font: 800 13px/1.1 Archivo, sans-serif; }
.nextpill .hi { font-size: 11px; line-height: 1.1; opacity: .85; }
.actcard .line { font: 500 14px/1.35 Archivo, sans-serif; color: var(--ink); }
.actcard .line.hi { font-family: Mukta, sans-serif; color: var(--ink2); margin-top: -2px; }
.actcard .line.phone { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; align-self: flex-start; padding: 4px 0; }
.daychips { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.daychips .chip { padding: 4px 2px; align-items: center; text-align: center; }
.dayhead .en { font: 700 13px Archivo, sans-serif; color: var(--ink2); }
.dayhead .hi { font-size: 12px; color: var(--ink2); }

/* packing: selected bag is Plans blue, a fully packed bag goes green-gold */
.bag[aria-pressed="true"] { background: var(--planSoft); }
.bag.done { background: var(--doneSoft); border-color: var(--edge); }
.bag.done .meter > i { background: var(--ok); }
.countdown { align-self: flex-start; font: 800 14px/1.2 Archivo, sans-serif; padding: 6px 10px; border-radius: 10px; background: var(--ink); color: var(--bg); }
/* condensed trip card */
.tripcard { gap: 8px; padding: 14px 16px; }
.tc-top { display: flex; justify-content: space-between; align-items: center; }
.tc-name { display: flex; align-items: center; gap: 10px; }
.tc-name .mode { font-size: 22px; width: 40px; height: 40px; border-radius: 12px; border: 2px solid var(--edge); background: var(--planSoft); display: grid; place-items: center; flex: none; }
.tc-name .bi .en { font: 800 22px/1.1 Archivo, sans-serif; }
.tc-name .bi .hi { font-size: 13px; color: var(--ink2); }
.tc-when { font: 600 14px/1.3 Archivo, sans-serif; }
.tc-when b { font-weight: 800; }
.tc-note { font: 500 13px/1.35 Archivo, sans-serif; color: var(--ink2); }
.tc-note [lang=hi] { font-family: Mukta, sans-serif; }
.tripnote { font: 500 14px/1.4 Archivo, sans-serif; padding: 8px 12px; border-radius: 12px; background: var(--bg); border: 1.5px solid var(--line2); }
.tripnote summary { cursor: pointer; font-weight: 600; }
.tripnote div { white-space: pre-wrap; margin-top: 4px; color: var(--ink2); }
.yesno { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 4px; }
.yesno > .bi .en { font: 700 15px/1.25 Archivo, sans-serif; }
.yesno > .bi .hi { font-size: 13px; color: var(--ink2); }
.yesno .yn { display: flex; gap: 6px; flex: none; }
.yesno .yn .chip { min-width: 58px; align-items: center; }

/* ---------- packing: one continuous list of tap-tiles ---------- */
.psec { display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 8px; }
.psec-head {
  position: sticky; top: 0; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  margin: 0 -8px; border-radius: 14px; background: var(--bg); border: 2px solid var(--edge); box-shadow: 3px 3px 0 var(--sh);
}
.psec-head .code { font: 800 11px Archivo, sans-serif; letter-spacing: .1em; padding: 3px 6px; border-radius: 6px; background: var(--planSoft); border: 1.5px solid var(--edge); }
.psec-head .bi { flex: 1; min-width: 0; }
.psec-head .bi .en { font: 800 16px/1.15 Archivo, sans-serif; }
.psec-head .bi .hi { font-size: 12px; color: var(--ink2); }
.psec.done .psec-head { background: var(--doneSoft); }
.psec.done .psec-head .gcount { color: var(--ok); font-weight: 700; }
.powner { margin: 0; padding: 0 4px; font: 500 13px/1.3 Archivo, sans-serif; color: var(--ink2); }
.powner [lang=hi] { font-family: Mukta, sans-serif; }
.ghead[data-open] { cursor: pointer; }
.pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pt { position: relative; }
.ptile {
  width: 100%; height: 100%; min-height: 64px; padding: 8px 10px; border-radius: 14px; border: 2px solid var(--edge);
  background: var(--surf); display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px;
  align-content: start; text-align: left; transition: transform .06s;
}
.ptile:active { transform: scale(.97); }
.ptile .q { grid-row: 1 / span 3; font: 900 20px/1.1 Archivo, sans-serif; min-width: 1.4ch; font-variant-numeric: tabular-nums; }
.ptile .en { font: 700 14px/1.2 Archivo, sans-serif; padding-right: 16px; }
.ptile .hi { font: 500 12px/1.25 Mukta, sans-serif; color: var(--ink2); }
.ptile .sub { font: 500 11px/1.25 Archivo, sans-serif; color: var(--ink2); }
.ptile[aria-checked="true"] { background: var(--doneSoft); border-color: var(--line2); }
.ptile[aria-checked="true"] .q { color: var(--ok); }
.ptile[aria-checked="true"] .en { color: var(--ink2); text-decoration: line-through; }
.folded {
  width: 100%; min-height: 44px; padding: 8px 12px; border-radius: 12px; border: 1.5px dashed var(--line2);
  display: flex; align-items: center; gap: 8px; font: 700 14px Archivo, sans-serif; color: var(--ok); text-align: left;
}
.folded [lang=hi] { font: 500 13px Mukta, sans-serif; color: var(--ink2); }
.folded .gcount { margin-left: auto; }

/* Sizes: one table, twins as columns, conversions stacked down each cell. */
/* A column per kid; past two kids the table scrolls sideways with the row names pinned. */
.sz-table { display: flex; flex-direction: column; border: 2px solid var(--edge); border-radius: 18px; overflow: hidden; overflow-x: auto; background: var(--surf); box-shadow: 4px 4px 0 var(--sh); }
.sz-table .sz-row { min-width: calc(92px + var(--n, 2) * 104px); }
.sz-table .sz-row > span:first-child { position: sticky; left: 0; z-index: 1; background: var(--surf); }
.sz-row { display: grid; grid-template-columns: minmax(84px, .9fr) repeat(var(--n, 2), 1fr); align-items: stretch; width: 100%; padding: 0; margin: 0; border: 0; border-top: 2px solid var(--line2); background: none; color: inherit; font: inherit; text-align: left; cursor: default; }
button.sz-row { cursor: pointer; }
button.sz-row:active { background: var(--stripe1); }
.sz-row.sz-top { border-top: 0; }
.sz-row > span { padding: 10px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sz-name { justify-content: center; }
.sz-name .en { font: 750 15px/1.15 Archivo, sans-serif; }
.sz-name .hi { font: 500 13px/1.2 Mukta, sans-serif; color: var(--ink2); }
.sz-h { flex-direction: row !important; align-items: center; gap: 8px !important; }
.sz-h .en { font: 800 14px/1.1 Archivo, sans-serif; text-transform: uppercase; letter-spacing: .04em; }
.sz-h .hi { font: 500 12px/1.1 Mukta, sans-serif; }
.sz-h.kc, .sz-cell.kc { background: var(--kidSoft); }
.sz-cell { border-left: 2px solid var(--line2); }
.sz-big { font: 800 18px/1.2 Archivo, sans-serif; }
.sz-line { font: 600 14px/1.3 "JetBrains Mono", monospace; color: var(--ink2); }
.sz-none { font: 600 18px Archivo, sans-serif; color: var(--ink2); }
.sz-kid { display: flex; align-items: center; gap: 8px; }
.sz-step { display: grid; grid-template-columns: 56px 1fr 56px; gap: 10px; align-items: center; }
.sz-step .btn .en, .sz-step .btn { font: 800 22px Archivo, sans-serif; }
.sz-eu { text-align: center; font: 800 22px Archivo, sans-serif; }
.sz-ov { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sz-ov .input { min-width: 0; }
.sz-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.sz-chip { min-height: 40px; padding: 4px 6px; border: 2px solid var(--line2); border-radius: 12px; background: var(--surf); color: var(--ink); font: 700 14px Archivo, sans-serif; cursor: pointer; }
.sz-chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--edge); }
.sz-chips.wrap { display: flex; flex-wrap: wrap; }
.sz-chips.wrap .sz-chip { padding: 4px 12px; }

/* Shopping wishlist */
.wl-list { display: flex; flex-direction: column; gap: 10px; }
.wl-item { display: flex; align-items: stretch; gap: 10px; border: 2px solid var(--line2); border-radius: 18px; background: var(--kitSoft); padding: 10px 12px; }
.wl-item.done { background: var(--surf); opacity: .75; }
.wl-tick { flex: none; width: 36px; height: 36px; align-self: center; border: 2px solid var(--edge); border-radius: 10px; background: var(--surf); color: var(--ink); font: 800 18px Archivo, sans-serif; cursor: pointer; }
.wl-tick[aria-checked="true"] { background: var(--ok); color: var(--bg); border-color: var(--ok); }
.wl-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; text-align: left; background: none; border: 0; padding: 0; color: inherit; font: inherit; }

.wl-name { font: 750 17px/1.25 Archivo, sans-serif; }
.wl-item.done .wl-name { text-decoration: line-through; }
.wl-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.wl-by { font: 600 13px Archivo, sans-serif; color: var(--ink2); }
.wl-note { font: 500 14px/1.35 Archivo, sans-serif; color: var(--ink2); overflow-wrap: anywhere; }
.wl-note a { color: var(--ink); font-weight: 700; }
.wl-main { display: flex; flex-direction: column; gap: 5px; text-align: left; background: none; border: 0; padding: 0; color: inherit; font: inherit; }
button.wl-main { cursor: pointer; }
.wl-link { align-self: flex-start; font: 700 14px Archivo, sans-serif; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.wl-img { flex: none; width: 64px; height: 64px; align-self: center; padding: 0; border: 2px solid var(--line2); border-radius: 12px; overflow: hidden; background: var(--surf); cursor: pointer; }
.wl-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wl-photo { display: flex; align-items: center; gap: 10px; }
.wl-photo img { width: 56px; height: 56px; flex: none; object-fit: cover; border-radius: 12px; border: 2px solid var(--line2); }
.wl-author { font: 600 14px/1.25 Archivo, sans-serif; color: var(--ink2); margin-top: -3px; }
.wl-fav { flex: none; align-self: center; width: 40px; height: 40px; border: 0; background: none; color: var(--ink2); font: 400 28px/1 Archivo, sans-serif; cursor: pointer; }
.wl-fav[aria-pressed="true"] { color: oklch(0.72 0.16 80); }
.wl-item.fav { background: var(--surf); border-color: oklch(0.8 0.12 80); }

/* Settings */
.s-me { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 2px solid var(--edge); border-radius: 20px; background: var(--surf); }
.s-me .main, .list > .li .main { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; }
.s-me .t { font: 750 16px/1.2 Archivo, sans-serif; }
.s-me .s { font: 500 13px/1.2 Archivo, sans-serif; color: var(--ink2); overflow-wrap: anywhere; }
.s-me .btn { flex: none; min-height: 44px; padding: 0 16px; }
button.li { border: 0; border-top: 2px solid var(--line2); background: none; color: inherit; font: inherit; cursor: pointer; }
.list > button.li:first-child { border-top: 0; }
.s-code { font: 800 44px/1 "JetBrains Mono", monospace; letter-spacing: .08em; text-align: center; padding: 18px 8px; border: 3px solid var(--edge); border-radius: 18px; background: var(--kitSoft); }
/* PDF card on phones (the phone's own viewer opens it) */
.lb-pdf { width: min(320px, 100%); display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.lb-pdficon { width: 96px; height: 120px; display: grid; place-items: center; border-radius: 12px; background: #f5f1ea; color: #b3261e; font: 900 22px Archivo, sans-serif; letter-spacing: .06em; }
.lb-pdfname { font: 700 17px/1.3 Archivo, sans-serif; }
.lb-pdf .btn { width: 100%; }

/* ---------- press feedback ---------- */
a.due, .back, .avatar, a.card, .medlink, .bag, .opt, .chip, .sz-chip, a.cpill, .wl-tick, .wl-fav, button.li { transition: transform .08s, box-shadow .08s, background-color .08s; }
.opt:active, .chip:active, .sz-chip:active, a.cpill:active, .wl-tick:active, .bag:active { transform: scale(.96); }
.wl-fav:active { transform: scale(.85); }
a.due:active, .bag[aria-pressed="true"]:active, .opt.kid[aria-pressed="true"]:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--sh); }
.avatar:active, a.card:active, .medlink:active { transform: scale(.96); }
button.li:active { background: var(--stripe1); }

/* ---------- sheets slide up, and down on close ---------- */
dialog.sheet[open] { animation: sheet-up .2s cubic-bezier(.2, .8, .3, 1); }
dialog.sheet[open]::backdrop { animation: fade-in .2s ease-out; }
dialog.sheet.closing { animation: sheet-down .16s ease-in forwards; }
dialog.sheet.closing::backdrop { animation: fade-out .16s ease-in forwards; }
@media (min-width: 520px) {
  dialog.sheet[open] { animation-name: sheet-pop; }
  dialog.sheet.closing { animation-name: sheet-unpop; }
}
@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes sheet-down { to { transform: translateY(100%); } }
@keyframes sheet-pop { from { opacity: 0; transform: scale(.96); } }
@keyframes sheet-unpop { to { opacity: 0; transform: scale(.96); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }

/* ---------- ticks ease into their new colour ---------- */
/* Lists redraw on each tick, so the just-tapped item gets .ease (see eased() in ui.js). */
.ptile.ease[aria-checked="true"] { animation: ptile-on .15s ease-out; }
.ptile.ease[aria-checked="false"] { animation: ptile-off .15s ease-out; }
.wl-tick.ease[aria-checked="true"] { animation: wltick-on .15s ease-out; }
.wl-tick.ease[aria-checked="false"] { animation: wltick-off .15s ease-out; }
.wl-fav.ease[aria-pressed="true"] { animation: wlfav-on .15s ease-out; }
.wl-fav.ease[aria-pressed="false"] { animation: wlfav-off .15s ease-out; }
@keyframes ptile-on { from { background: var(--surf); border-color: var(--edge); } }
@keyframes ptile-off { from { background: var(--doneSoft); border-color: var(--line2); } }
@keyframes wltick-on { from { background: var(--surf); border-color: var(--edge); } }
@keyframes wltick-off { from { background: var(--ok); border-color: var(--ok); } }
@keyframes wlfav-on { from { color: var(--ink2); } }
@keyframes wlfav-off { from { color: oklch(0.72 0.16 80); } }

/* ---------- optional extras folded away (kid sheet: badge, colour, Hindi name) ---------- */
details.more { border-top: 2px dashed var(--line2); }
details.more > summary {
  list-style: none; cursor: pointer; padding: 14px 4px 2px; font: 700 15px Archivo, sans-serif; color: var(--ink2);
  text-decoration: underline; text-underline-offset: 3px;
}
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before { content: "+ "; }
details.more[open] > summary::before { content: "− "; }
/* Kid colour swatches: six in one row on any phone. */
.swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.swatches .chip { width: 100%; aspect-ratio: 1; min-height: 0; padding: 0; }

/* ---------- Home: "Start here" checklist ---------- */
.start { background: var(--surf); }
.start .jobs { display: flex; flex-direction: column; gap: 8px; }
.job {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px;
  border: 2px solid var(--edge); background: var(--bg); text-align: left; width: 100%;
}
.job i {
  font-style: normal; width: 26px; height: 26px; flex: none; border-radius: 50%; border: 2px solid var(--edge);
  display: grid; place-items: center; font: 900 14px Archivo, sans-serif; background: var(--surf);
}
.job span { display: flex; flex-direction: column; min-width: 0; }
.job b { font: 750 16px/1.2 Archivo, sans-serif; }
.job small { font: 500 13px/1.3 Archivo, sans-serif; color: var(--ink2); }
.job.ok { border-style: dashed; border-color: var(--line2); }
.job.ok i { background: var(--doneSoft); }
.job.ok b { text-decoration: line-through; color: var(--ink2); }
.howto { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; font: 500 16px/1.4 Archivo, sans-serif; }

/* ---------- Admin: the counts at the top ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.stat {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border-radius: 16px;
  border: 2px solid var(--edge); background: var(--surf); box-shadow: 3px 3px 0 var(--sh); text-align: center;
}
.stat b { font: 900 24px/1 Archivo, sans-serif; }
.stat span { font: 600 12px/1.2 Archivo, sans-serif; color: var(--ink2); }