:root {
	--bg: #f4f7f6; --card: #ffffff; --text: #13201e; --muted: #5b6b68; --line: #dfe7e5;
	--brand: #0f766e; --brand-ink: #ffffff; --ok: #15803d; --late: #b45309; --bad: #b91c1c; --paused: #64748b;
	--ok-bg: #e8f6ee; --late-bg: #fff4e0; --bad-bg: #fde8e8;
	color-scheme: light;
}
@media (prefers-color-scheme: dark) {
	:root {
		--bg: #0e1513; --card: #17211f; --text: #e8f0ee; --muted: #9db0ac; --line: #2a3835;
		--brand: #2bb3a3; --brand-ink: #04211d; --ok: #4ade80; --late: #fbbf24; --bad: #f87171; --paused: #94a3b8;
		--ok-bg: #12301f; --late-bg: #36290d; --bad-bg: #3a1717;
		color-scheme: dark;
	}
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0; background: var(--bg); color: var(--text);
	font: 18px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Hebrew", "Noto Sans Arabic", sans-serif;
}
main { max-width: 560px; margin: 0 auto; padding: max(16px, env(safe-area-inset-top)) 16px 48px; }
h1 { font-size: 2rem; margin: .4em 0 .1em; }
h2 { font-size: 1.25rem; margin: 0 0 .6em; }
h3 { font-size: 1.05rem; margin: 1.2em 0 .2em; }
p { margin: .5em 0; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }
.lead { font-size: 1.1rem; }
.grow { flex: 1; }
hr { border: 0; border-top: 1px solid var(--line); margin: 1.2em 0; }

.hero { text-align: center; padding: 24px 0 8px; }
.hero .logo { border-radius: 22px; }
.tag { color: var(--muted); font-size: 1.1rem; margin: 0; }
.top { display: flex; align-items: center; gap: 10px; padding: 4px 0 14px; }
.top img { border-radius: 9px; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 18px; margin: 0 0 14px; }
.card.attention { border: 2px solid var(--late); }
.stack { display: grid; gap: 10px; margin: 14px 0 6px; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.row input { flex: 1; min-width: 0; }

button, .button {
	font: inherit; font-weight: 600; min-height: 48px; padding: 10px 18px; border-radius: 12px; cursor: pointer;
	border: 1px solid var(--line); background: var(--bg); color: var(--text); text-decoration: none;
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
button:disabled { opacity: .55; cursor: progress; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.primary { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.big { min-height: 58px; font-size: 1.1rem; width: 100%; }
.danger { background: var(--bad-bg); color: var(--bad); border: 2px solid var(--bad); width: 100%; margin-top: 8px; }
.link { background: none; border: 0; color: var(--muted); text-decoration: underline; min-height: 44px; padding: 6px 8px; font-weight: 500; }
.danger-text { color: var(--bad); }

label.field { display: grid; gap: 6px; margin: 12px 0; font-weight: 600; }
input, select {
	font: inherit; min-height: 48px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line);
	background: var(--bg); color: var(--text); width: 100%;
}
.row input, .row select { width: auto; }
.lang { display: flex; align-items: center; gap: 10px; justify-content: center; margin: 8px 0; color: var(--muted); }
.lang select { width: auto; }

/* the big button */
.checkin { text-align: center; }
.big-ok {
	width: min(68vw, 250px); aspect-ratio: 1; border-radius: 50%; margin: 6px auto 4px; border: 0;
	background: radial-gradient(circle at 35% 30%, #34d399, var(--ok) 70%); color: #fff;
	display: flex; flex-direction: column; font-size: 1.6rem; box-shadow: 0 10px 30px rgb(21 128 61 / 35%);
}
.big-ok .tick { font-size: 3.4rem; line-height: 1; }
.big-ok:active { transform: scale(.97); }
.st-late .big-ok, .st-alert .big-ok, .st-sos .big-ok { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 18px rgb(21 128 61 / 0%), 0 10px 30px rgb(21 128 61 / 45%); transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .st-late .big-ok, .st-alert .big-ok, .st-sos .big-ok { animation: none; } }
.status { font-size: 1.05rem; }
.st-late .status, .st-alert .status, .st-sos .status { color: var(--bad); font-weight: 700; }
.st-paused .status { color: var(--paused); }
.pause { margin-top: 12px; text-align: start; }
summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.settings summary h2 { margin: 0; }

.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.list li:last-child { border-bottom: 0; }
.warn { color: var(--late); font-size: .9rem; }
.who { align-items: flex-start !important; }
.who .dot { width: 14px; height: 14px; border-radius: 50%; margin-top: 8px; flex: none; background: var(--ok); }
.who.st-late .dot { background: var(--late); }
.who.st-alert .dot, .who.st-sos .dot { background: var(--bad); }
.who.st-paused .dot, .who.st-off .dot { background: var(--paused); }
.who.st-alert, .who.st-sos { background: var(--bad-bg); border-radius: 12px; padding: 10px; }
.badge { font-size: .85rem; font-weight: 700; padding: 1px 8px; border-radius: 99px; background: var(--ok-bg); color: var(--ok); }
.st-late .badge { background: var(--late-bg); color: var(--late); }
.st-alert .badge, .st-sos .badge { background: var(--bad); color: #fff; }
.st-paused .badge, .st-off .badge { background: var(--line); color: var(--muted); }
.who .button { margin-top: 8px; }
.invite input { margin: 6px 0 10px; }

.flash { padding: 14px 16px; border-radius: 14px; margin: 0 0 14px; font-weight: 600; }
.flash.ok { background: var(--ok-bg); color: var(--ok); }
.flash.bad { background: var(--bad-bg); color: var(--bad); }

/* ---------- platform: home tiles, module pages ---------- */
.icon-btn { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; text-decoration: none; color: var(--text); font-size: 1.4rem; }
.back { font-size: 2rem; line-height: 1; }
[dir=rtl] .back { transform: scaleX(-1); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 0 0 14px; }
.tile { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px; min-height: 120px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; color: var(--text); text-decoration: none; }
.tile:active { transform: scale(.98); }
.tile .ti { font-size: 2rem; }
.dotbadge { position: absolute; top: 10px; inset-inline-end: 10px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 99px; background: var(--bad); color: #fff; font-weight: 700; font-size: .85rem; display: flex; align-items: center; justify-content: center; }
.features { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 10px; }
.features li { display: flex; gap: 12px; align-items: flex-start; }
.features li > span:first-child { font-size: 1.6rem; }
.list .ti { font-size: 1.6rem; flex: none; }
.row.tight { gap: 6px; flex-wrap: nowrap; }
.row.tight .button, .row.tight button { min-width: 48px; padding: 8px 10px; }
a.plain { color: inherit; text-decoration: none; }
.center { text-align: center; }
.check { display: flex; gap: 10px; align-items: center; margin: 12px 0; min-height: 44px; }
.check input { width: 22px; height: 22px; min-height: 0; flex: none; }
textarea { font: inherit; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--text); width: 100%; resize: vertical; }
.badge.bad { background: var(--bad-bg); color: var(--bad); }
.badge.late { background: var(--late-bg); color: var(--late); }

/* chats */
.chat { display: grid; gap: 8px; margin: 0 0 10px; }
.msg { max-width: 85%; padding: 10px 12px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); display: grid; gap: 4px; }
.msg.me { justify-self: end; background: var(--ok-bg); border-color: transparent; }
.msg.them { justify-self: start; }
.msg a { font-weight: 600; }

/* medical form */
.frow { display: flex; gap: 10px; align-items: flex-end; }
.frow .field { flex: 1; margin: 8px 0; }
.show { display: flex; align-items: center; gap: 4px; font-size: .85rem; color: var(--muted); min-height: 48px; white-space: nowrap; margin-bottom: 8px; }
.show input { width: 18px; height: 18px; min-height: 0; }
h3 .show { display: inline-flex; margin: 0 8px; min-height: 0; }
.contact { margin: 6px 0; flex-wrap: nowrap; }
.contact input { min-width: 0; }
.qr-box { width: min(60vw, 240px); margin: 0 auto 10px; background: #fff; padding: 8px; border-radius: 12px; }
.qr-box svg, .sticker svg, .wl-qr svg { display: block; width: 100%; height: auto; }

/* documents */
.meter { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; margin: 10px 0 4px; }
.meter span { display: block; height: 100%; background: var(--brand); }
.photo-pick { cursor: pointer; }
.docimg { margin: 10px 0; position: relative; }
.docimg img { width: 100%; border-radius: 12px; border: 1px solid var(--line); }

/* subscriptions */
.totals { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.totals > div { flex: 1; min-width: 140px; display: grid; padding: 12px; border-radius: 14px; background: var(--ok-bg); }
.totals b { font-size: 1.4rem; }

/* public pages (finder / medical card) */
.small-hero { padding: 16px 0 4px; }
.small-hero h1 { font-size: 1.6rem; }
.ice-head { background: var(--bad); color: #fff; border-radius: 18px; padding: 18px; margin-bottom: 14px; }
.ice-head h1 { margin: 0; }
.medcard h2 { margin-bottom: .2em; }
.blood { font-size: 1.3rem; }
.blood b { color: var(--bad); }
.mf { padding: 10px 0; border-bottom: 1px solid var(--line); }
.mf:last-child { border-bottom: 0; }
.mf.alert div { color: var(--bad); font-weight: 700; }
.call { width: 100%; margin: 6px 0; flex-wrap: wrap; }

/* printing: stickers and wallet card */
.sheet { display: flex; flex-wrap: wrap; gap: 4mm; justify-content: flex-start; }
.sticker { background: #fff; color: #000; border: 1px dashed #999; border-radius: 3mm; padding: 2mm; display: grid; justify-items: center; gap: 1mm; text-align: center; }
.sticker b { font-size: 9pt; line-height: 1.1; }
.sticker span { font-size: 6pt; color: #333; word-break: break-all; }
.s-l { width: 60mm; } .s-m { width: 40mm; } .s-s { width: 26mm; }
.s-s b { font-size: 6pt; } .s-s span { display: none; }
.wallet { width: 85.6mm; height: 54mm; background: #fff; color: #000; border: 1px solid #999; border-radius: 3mm; padding: 3mm; display: flex; gap: 3mm; margin: 0 auto; }
.wl-text { flex: 1; display: grid; align-content: start; gap: 1mm; font-size: 8pt; }
.wl-text .ice { color: #b91c1c; font-size: 9pt; }
.wl-qr { width: 30mm; flex: none; align-self: center; }
@media print {
	body { background: #fff; }
	main { max-width: none; padding: 0; }
	.top, .noprint, .flash { display: none !important; }
	.sticker { break-inside: avoid; }
}

/* ---------- phase 1: bottom navigation, my day, family ---------- */
main { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
nav.bottom { position: fixed; inset-inline: 0; bottom: 0; display: flex; justify-content: space-around; background: var(--card);
	border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); z-index: 10; }
nav.bottom a { flex: 1; max-width: 140px; display: grid; justify-items: center; gap: 2px; padding: 6px 4px; min-height: 52px; border-radius: 12px;
	color: var(--muted); text-decoration: none; font-size: .8rem; font-weight: 600; }
nav.bottom a span { font-size: 1.35rem; line-height: 1; }
nav.bottom a.on { color: var(--brand); background: var(--ok-bg); }
.section-title { font-size: 1rem; color: var(--muted); margin: 18px 4px 8px; }
.list.day li { padding: 0; }
.dayrow { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 4px; min-height: 52px; }
.day li.p0 .dayrow, .day li.p1 .dayrow { color: var(--bad); font-weight: 700; }
details.sub { margin: 8px 0; }
details.sub > summary { color: var(--brand); }
details.sub input, details.sub select { margin: 6px 0; }
details.card.sub { padding: 14px 18px; }
.home { padding: 8px 0; border-bottom: 1px solid var(--line); }
.home:last-of-type { border-bottom: 0; }
pre.codes { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 12px; font-size: 1rem; line-height: 1.8; user-select: all; }
.list select { width: auto; min-height: 40px; padding: 4px 8px; font-size: .9rem; }
@media print { nav.bottom { display: none !important; } }

/* ---------- phase 2: requests, safety ---------- */
.tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 8px; }
.tabs button { min-height: 40px; padding: 6px 12px; font-size: .9rem; white-space: nowrap; }
.tabs button.on { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.card.emergency { border: 2px solid var(--bad); background: var(--bad-bg); }
.card.emergency p { margin-top: 0; font-weight: 700; color: var(--bad); }
.card.emergency .button { width: 100%; }
.stack2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 14px; }
.checks { display: grid; gap: 2px; margin: 4px 0 10px; }
.share-banner { display: block; background: var(--late-bg); color: var(--late); text-decoration: none; }
.icon-btn.help { color: var(--bad); }
nav.bottom a { font-size: .72rem; }

/* ---------- phase 3: calendar, tasks, kids, simple UI ---------- */
.evt { align-items: flex-start !important; }
.evt .when { min-width: 52px; font-weight: 700; text-align: center; }
.evt.conflict { background: var(--late-bg); border-radius: 12px; padding: 8px; }
.rides { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.occ { margin-top: 8px; padding: 8px; border: 1px dashed var(--line); border-radius: 12px; }
.task { align-items: flex-start !important; }
.big-check { width: 26px !important; height: 26px !important; min-height: 0 !important; flex: none; margin-top: 2px; }
.checklist { list-style: none; padding: 0; margin: 4px 0; }
.checklist.big li { font-size: 1.15rem; }
.pre { white-space: pre-wrap; }
.num { width: 80px !important; }
.card.kid h2 { font-size: 1.4rem; }
.button.huge { display: flex; width: 100%; min-height: 84px; font-size: 1.4rem; margin: 0 0 14px; }
body.simple-ui { font-size: 21px; }
body.simple-ui .tiles { grid-template-columns: 1fr; }