:root {
  --bg: #f6f2ea; --surface: #ffffff; --surface-2: #efe8db; --text: #1f1b16; --muted: #6b6257; --line: #e2d8c7;
  --accent: #c2410c; --accent-ink: #ffffff; --good: #15803d; --warn: #b45309; --bad: #b91c1c; --focus: #2563eb;
  --radius: 18px; --shadow: 0 1px 2px rgb(0 0 0 / .06), 0 6px 20px rgb(0 0 0 / .06);
  font-family: "Noto Sans", "Noto Sans Kannada", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14110e; --surface: #1f1a15; --surface-2: #2a231c; --text: #f3ece2; --muted: #a89c8c; --line: #3a3128;
    --accent: #f97316; --accent-ink: #1a0f05; --good: #4ade80; --warn: #fbbf24; --bad: #f87171; --focus: #60a5fa;
    --shadow: none;
  }
}
:root[data-theme="dark"] {
  --bg: #14110e; --surface: #1f1a15; --surface-2: #2a231c; --text: #f3ece2; --muted: #a89c8c; --line: #3a3128;
  --accent: #f97316; --accent-ink: #1a0f05; --good: #4ade80; --warn: #fbbf24; --bad: #f87171; --focus: #60a5fa; --shadow: none;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body { min-height: 100dvh; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.kn { font-family: "Noto Sans Kannada", "Noto Sans Malayalam", "Noto Sans", sans-serif; }
.muted { color: var(--muted); }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--surface-2); font-weight: 600; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); display: inline-block; }
.dot.awake { background: var(--good); } .dot.sleeping { background: #818cf8; } .dot.school { background: var(--warn); }
.btn { border: 0; border-radius: 14px; padding: 14px 20px; background: var(--surface-2); font-weight: 650; min-height: 52px; }
.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn.good { background: var(--good); color: #04130a; } .btn.bad { background: var(--bad); color: #fff; }
.btn:disabled { opacity: .5; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; }
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.list li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.badge { min-width: 28px; height: 28px; padding: 0 8px; border-radius: 14px; background: var(--accent); color: var(--accent-ink); display: inline-grid; place-items: center; font-size: .85em; font-weight: 800; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--text); color: var(--bg); padding: 12px 18px; border-radius: 12px; z-index: 99; max-width: calc(100% - 32px); }
video { background: #000; border-radius: var(--radius); }

/* ------------------------------------------------------------ wall (kiosk) */
.wall { --u: min(1vw, 0.56vh); font-size: calc(var(--u) * 2.6); overflow: hidden; height: 100vh; }
@media (orientation: landscape) { .wall { --u: min(0.56vw, 1vh); } }
.wall :focus { outline: none; }
.wall [data-nav]:focus-visible, .wall [data-nav]:focus { outline: calc(var(--u) * .7) solid var(--focus); outline-offset: calc(var(--u) * .5); }
.wall #home { height: 100vh; display: grid; grid-template-rows: auto auto 1fr; gap: calc(var(--u) * 3); padding: calc(var(--u) * 4); }
.wall header .clock { font-size: calc(var(--u) * 15); font-weight: 750; letter-spacing: -.03em; line-height: 1; }
.wall header .date { font-size: calc(var(--u) * 3.6); color: var(--muted); margin-top: calc(var(--u) * 1); }
.wall .zones { display: flex; gap: calc(var(--u) * 2); flex-wrap: wrap; margin-top: calc(var(--u) * 2.5); }
.wall .zone { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: calc(var(--u) * 1.6) calc(var(--u) * 2.4); }
.wall .zone b { font-size: calc(var(--u) * 4.4); display: block; }
.wall .tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(var(--u) * 2.4); }
.wall .tile { position: relative; border: 1px solid var(--line); background: var(--surface); border-radius: calc(var(--radius) * 1.4); padding: calc(var(--u) * 3);
  text-align: left; min-height: calc(var(--u) * 20); display: flex; flex-direction: column; justify-content: space-between; }
.wall .tile .t { font-size: calc(var(--u) * 4.4); font-weight: 750; }
.wall .tile .s { color: var(--muted); font-size: calc(var(--u) * 2.6); }
.wall .tile .ico { font-size: calc(var(--u) * 7); line-height: 1; }
.wall .tile.call { background: var(--accent); color: var(--accent-ink); border: 0; grid-column: span 2; }
.wall .tile.call .s { color: inherit; opacity: .85; }
.wall .tile .badge { position: absolute; top: calc(var(--u) * 2); right: calc(var(--u) * 2); }
.wall .today { overflow: auto; }
.wall .today h2 { font-size: calc(var(--u) * 3.4); margin: 0 0 calc(var(--u) * 1.4); color: var(--muted); font-weight: 650; }
.wall .today li { font-size: calc(var(--u) * 3.2); }
.wall .btn { font-size: calc(var(--u) * 3); min-height: calc(var(--u) * 9); padding: 0 calc(var(--u) * 3); border-radius: calc(var(--u) * 2); }

/* Horizontal (landscape) wall: clock + reminders on the left, tiles on the right */
@media (orientation: landscape) {
  .wall #home { grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "head tiles" "today tiles"; column-gap: calc(var(--u) * 4); }
  .wall #home > header { grid-area: head; }
  .wall #home > .tiles { grid-area: tiles; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; align-content: stretch; }
  .wall #home > .today { grid-area: today; min-height: 0; }
  .wall .tile.call { grid-column: span 2; }
  .wall .tile { min-height: 0; }
  .wall header .clock { font-size: calc(var(--u) * 12); white-space: nowrap; }
  .wall #home > .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); grid-auto-rows: unset; }
  .wall .tile .ico { font-size: calc(var(--u) * 5.5); }
  .wall .tile { padding: calc(var(--u) * 2.2); }
  .wall .tile.call { flex-direction: row; align-items: center; justify-content: flex-start; gap: calc(var(--u) * 3); }
}

.layer { position: fixed; inset: 0; background: var(--bg); display: none; flex-direction: column; padding: calc(var(--u) * 4); gap: calc(var(--u) * 3); z-index: 10; overflow: auto; }
.layer.open { display: flex; }
.layer h1 { font-size: calc(var(--u) * 6); margin: 0; }
.layer .top { display: flex; align-items: center; gap: calc(var(--u) * 2); }
.layer .top h1 { flex: 1; }
.layer.dim { background: rgb(0 0 0 / .82); color: #fff; justify-content: center; align-items: center; text-align: center; }

.ring .who { font-size: calc(var(--u) * 9); font-weight: 800; }
.ring .pulse { width: calc(var(--u) * 30); height: calc(var(--u) * 30); border-radius: 50%; background: var(--accent); display: grid; place-items: center;
  font-size: calc(var(--u) * 14); animation: pulse 1.4s infinite; color: var(--accent-ink); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgb(249 115 22 / .7); } 70% { box-shadow: 0 0 0 calc(var(--u) * 8) rgb(249 115 22 / 0); } 100% { box-shadow: 0 0 0 0 rgb(249 115 22 / 0); } }

.callview { padding: 0; background: #000; }
.callview #remote { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.callview #local { position: absolute; right: calc(var(--u) * 3); top: calc(var(--u) * 3); width: 26%; aspect-ratio: 3/4; object-fit: cover; border: 3px solid #fff; }
.callview .bar { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 4); display: flex; justify-content: center; gap: calc(var(--u) * 2); }
.callview .status { position: absolute; left: calc(var(--u) * 3); top: calc(var(--u) * 3); color: #fff; background: rgb(0 0 0 / .5); padding: 8px 14px; border-radius: 12px; }

.big-letter { font-size: calc(var(--u) * 46); line-height: 1; text-align: center; font-weight: 700; }
.kan-word { text-align: center; font-size: calc(var(--u) * 6); }
.beats { display: flex; gap: calc(var(--u) * 1.4); justify-content: center; flex-wrap: wrap; }
.beat { width: calc(var(--u) * 10); height: calc(var(--u) * 10); border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); font-size: calc(var(--u) * 2.4); font-weight: 700; }
.beat.on { background: var(--accent); color: var(--accent-ink); transform: scale(1.12); }
.meter { text-align: center; }
.meter .sw { font-size: calc(var(--u) * 14); font-weight: 800; }
.meter .needle { height: calc(var(--u) * 2); background: var(--surface-2); border-radius: 99px; position: relative; margin: calc(var(--u) * 2) auto; width: 70%; }
.meter .needle i { position: absolute; top: -50%; width: calc(var(--u) * 1.2); height: 200%; background: var(--accent); border-radius: 4px; left: 50%; transition: left .08s; }
.meter .needle::after { content: ""; position: absolute; left: 50%; top: -80%; height: 260%; width: 2px; background: var(--text); }
.slideshow { padding: 0; background: #000; }
.slideshow img { width: 100%; height: 100%; object-fit: contain; }
.slideshow .cap { position: absolute; bottom: calc(var(--u) * 3); left: calc(var(--u) * 3); right: calc(var(--u) * 3); color: #fff; font-size: calc(var(--u) * 3.6); }
.slideshow .clock { position: absolute; top: calc(var(--u) * 3); right: calc(var(--u) * 4); color: #fff; font-size: calc(var(--u) * 8); font-weight: 800; text-shadow: 0 2px 12px #000; }
.banner { position: fixed; left: calc(var(--u) * 4); right: calc(var(--u) * 4); bottom: calc(var(--u) * 4); z-index: 50; background: var(--accent); color: var(--accent-ink);
  border-radius: var(--radius); padding: calc(var(--u) * 3); font-size: calc(var(--u) * 4.4); font-weight: 750; display: flex; gap: calc(var(--u) * 2); align-items: center; }

/* ------------------------------------------------------------ phone apps */
.phone { max-width: 640px; margin: 0 auto; padding: 16px 16px calc(32px + env(safe-area-inset-bottom)); display: grid; gap: 16px; }
.phone h1 { font-size: 1.6rem; margin: 8px 0 0; }
.phone h2 { font-size: 1.1rem; margin: 0 0 12px; }
.phone input[type=text], .phone input[type=datetime-local], .phone input[type=time], .phone input[type=date], .phone select { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); min-height: 48px; }
.phone .tabs { display: flex; gap: 8px; overflow-x: auto; position: sticky; top: 0; background: var(--bg); padding: 8px 0; z-index: 5; }
.phone .tabs button { border: 0; background: var(--surface-2); padding: 10px 16px; border-radius: 999px; font-weight: 650; white-space: nowrap; }
.phone .tabs button[aria-selected=true] { background: var(--text); color: var(--bg); }
.callbox { position: fixed; inset: 0; background: #000; z-index: 40; display: none; }
.callbox.open { display: block; }
.callbox #remote { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.callbox #local { position: absolute; right: 12px; top: calc(12px + env(safe-area-inset-top)); width: 28%; aspect-ratio: 3/4; object-fit: cover; border: 2px solid #fff; }
.callbox .bar { position: absolute; left: 0; right: 0; bottom: calc(24px + env(safe-area-inset-bottom)); display: flex; justify-content: center; gap: 14px; }
.callbox .status { position: absolute; left: 12px; top: calc(12px + env(safe-area-inset-top)); color: #fff; background: rgb(0 0 0 / .5); padding: 6px 12px; border-radius: 10px; }
.gp .huge { font-size: 1.5rem; min-height: 84px; border-radius: 22px; width: 100%; }
.gp .clocks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gp .clocks .card b { font-size: 1.8rem; display: block; }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
audio { width: 100%; }

/* ------------------------------------------------------------ wall camera */
.camview { padding: 0; background: #000; }
.camview #camPreview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; transform: scaleX(-1); }
.camview .bar { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 4); display: flex; justify-content: center; gap: calc(var(--u) * 2); }
.camview .countdown { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--u) * 40); font-weight: 900; color: #fff; text-shadow: 0 4px 30px #000; }
.camview .flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; transition: opacity .5s; }
.camview .flash.on { opacity: 1; transition: none; }
.camview .camstatus { position: absolute; top: calc(var(--u) * 3); left: calc(var(--u) * 3); color: #fff; background: rgb(0 0 0 / .55); padding: calc(var(--u) * 1) calc(var(--u) * 2); border-radius: 12px; font-size: calc(var(--u) * 3); }
.camview .camstatus:empty { display: none; }
.camview .camstatus.rec::before { content: ""; display: inline-block; width: calc(var(--u) * 2); height: calc(var(--u) * 2); border-radius: 50%; background: #ef4444; margin-right: calc(var(--u) * 1); vertical-align: middle; }
#gallery .viewer { flex: 1; min-height: 0; display: grid; place-items: center; background: #000; border-radius: var(--radius); overflow: hidden; }
#gallery .viewer img, #gallery .viewer video { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 0; }
#gallery .strip { display: flex; gap: calc(var(--u) * 1.4); overflow-x: auto; padding: calc(var(--u) * 1); }
#gallery .strip button { flex: 0 0 auto; width: calc(var(--u) * 18); aspect-ratio: 16/10; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: var(--surface-2); position: relative; color: #fff; }
#gallery .strip img, #gallery .strip video { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
#gallery .strip .vid::after { content: "▶"; position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--u) * 5); text-shadow: 0 2px 8px #000; }
.vids video { width: 100%; border-radius: 12px; }

/* ------------------------------------------------------------ hand-gesture pointer */
.air-pointer { position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border-radius: 50%; border: 5px solid #fff; background: rgb(249 115 22 / .55); box-shadow: 0 0 0 3px rgb(0 0 0 / .35), 0 4px 18px rgb(0 0 0 / .4);
  transition: transform .06s linear, width .12s, height .12s, margin .12s; }
.air-pointer.closing { width: 30px; height: 30px; margin: -15px 0 0 -15px; background: rgb(249 115 22 / .9); }
.air-pointer.click { animation: airclick .35s; }
.air-pointer.back { animation: airback .5s; }
@keyframes airclick { 0% { box-shadow: 0 0 0 0 rgb(255 255 255 / .9); } 100% { box-shadow: 0 0 0 40px rgb(255 255 255 / 0); } }
@keyframes airback { 0% { background: #60a5fa; } 100% { background: rgb(249 115 22 / .55); } }
.hand-badge { position: fixed; top: calc(var(--u, 8px) * 2); right: calc(var(--u, 8px) * 2); z-index: 60; background: rgb(0 0 0 / .7); color: #fff;
  padding: calc(var(--u, 8px) * 1) calc(var(--u, 8px) * 2); border-radius: 999px; font-size: calc(var(--u, 8px) * 2.6); font-weight: 650; pointer-events: none; }

/* ------------------------------------------------------------ chess */
.chess-wrap { flex: 1; min-height: 0; display: flex; gap: calc(var(--u) * 4); align-items: center; }
@media (orientation: portrait) { .chess-wrap { flex-direction: column; } }
.board { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(8, minmax(0, 1fr)); width: min(86vh, 92vw); aspect-ratio: 1; border-radius: 12px; overflow: hidden; flex: none;
  box-shadow: 0 10px 40px rgb(0 0 0 / .45); }
.board .sq { position: relative; width: 100%; height: 100%; min-width: 0; min-height: 0; border: 0; padding: 0; display: grid; place-items: center; font-size: min(8.2vh, 8.6vw); line-height: 1; }
.board .sq.light { background: #f0d9b5; } .board .sq.dark { background: #b58863; }
.board .sq.last { box-shadow: inset 0 0 0 999px rgb(255 214 10 / .35); }
.board .sq.sel { box-shadow: inset 0 0 0 999px rgb(34 197 94 / .55); }
.board .sq.hint { box-shadow: inset 0 0 0 999px rgb(59 130 246 / .55); }
.board .sq.dot::after { content: ""; position: absolute; width: 28%; height: 28%; border-radius: 50%; background: rgb(0 0 0 / .28); }
.board .sq.cap::after { content: ""; position: absolute; inset: 4%; border-radius: 50%; border: 6px solid rgb(0 0 0 / .28); }
.wall .board .sq:focus, .wall .board .sq:focus-visible { outline: 5px solid var(--focus); outline-offset: -5px; z-index: 2; }
.board .cf, .board .cr { position: absolute; font-style: normal; font-size: min(1.8vh, 2vw); font-weight: 700; color: rgb(0 0 0 / .55); }
.board .cf { right: 6%; bottom: 3%; } .board .cr { left: 6%; top: 3%; }
.pc { display: inline-block; }
.pc.w { color: #fff; -webkit-text-stroke: 1.5px #222; text-shadow: 0 2px 3px rgb(0 0 0 / .35); }
.pc.b { color: #1b1b1b; text-shadow: 0 1px 2px rgb(255 255 255 / .25); }
.chess-side { flex: 1; display: flex; flex-direction: column; gap: calc(var(--u) * 2.4); min-width: 0; }
.chess-side .side-chip { font-size: calc(var(--u) * 4); display: flex; align-items: center; gap: calc(var(--u) * 1.5); }
.chess-side .side-chip .pc { font-size: calc(var(--u) * 7); }
.chess-msg { font-size: calc(var(--u) * 4); font-weight: 700; padding: calc(var(--u) * 2) calc(var(--u) * 2.4); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.chess-msg.good { background: #14532d; color: #dcfce7; border-color: #166534; }
.chess-msg.bad { background: #7f1d1d; color: #fee2e2; border-color: #991b1b; }
.air-pointer.grab { background: rgb(34 197 94 / .85); width: 52px; height: 52px; margin: -26px 0 0 -26px; }

/* ------------------------------------------------------------ who to call */
.who-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(var(--u) * 44), 1fr)); gap: calc(var(--u) * 2.4); width: min(92%, calc(var(--u) * 160)); }
.who-list .tile { flex-direction: row; align-items: center; justify-content: flex-start; gap: calc(var(--u) * 2.4); min-height: calc(var(--u) * 16); text-align: left; }

/* ------------------------------------------------------------ calendar */
.cal-body { flex: 1; min-height: 0; overflow: auto; }
.cal-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: auto repeat(6, minmax(0, 1fr)); gap: 4px; height: 100%; min-height: 420px; }
.cal-dow { text-align: center; color: var(--muted); font-weight: 700; padding: 4px; min-height: 0; align-self: end; }
.cal-day { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 6px; overflow: hidden; display: flex; flex-direction: column; gap: 3px; min-height: 0; }
.cal-day.other { opacity: .45; }
.cal-day.today { border: 3px solid var(--accent); }
.cal-day .num { font-weight: 800; }
.ev { border-left: 4px solid var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); padding: 2px 6px; border-radius: 5px; font-size: .78em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-day .more { font-size: .72em; color: var(--muted); }
.cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; min-height: 100%; }
.cal-col { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.cal-col.today { border: 3px solid var(--accent); }
.cal-col .ev { white-space: normal; font-size: .85em; }
.cal-head { font-weight: 600; color: var(--muted); }
.cal-head b { color: var(--text); font-size: 1.3em; }
.cal-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c); display: inline-block; flex: none; }

/* ------------------------------------------------------------ messages */
.msg-wrap { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: calc(var(--u) * 3); }
.threads { display: flex; flex-direction: column; gap: 8px; overflow: auto; }
.thread { display: flex; align-items: center; gap: 12px; text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 14px; padding: 12px; position: relative; }
.thread.sel { border-color: var(--accent); background: var(--surface-2); }
.thread .ico { font-size: 2em; }
.convo { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.convo-head { font-size: 1.3em; }
.chat { list-style: none; margin: 0; padding: 8px; display: flex; flex-direction: column; gap: 10px; overflow: auto; flex: 1; min-height: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.chat li { max-width: 78%; padding: 10px 14px; border-radius: 16px; display: flex; flex-direction: column; gap: 4px; }
.chat li.theirs { align-self: flex-start; background: var(--surface-2); }
.chat li.mine { align-self: flex-end; background: var(--accent); color: var(--accent-ink); }
.chat li.mine .muted { color: inherit; opacity: .75; }
.chat li .muted { font-size: .75em; }
.quick { display: flex; flex-wrap: wrap; gap: 8px; }
.chat-quick { display: flex; gap: 8px; margin: 10px 0; }
.chat-quick .btn { flex: 1; padding: 10px 0; font-size: 1.3rem; }
.chat-form { display: flex; gap: 8px; margin-bottom: 10px; }
.chat-form input { flex: 1; }
.phone .chat { max-height: 55vh; min-height: 30vh; }
.tabs .badge { margin-left: 6px; height: 22px; min-width: 22px; font-size: .75em; }

/* phone calendar: week as a list of days, compact month */
.phone-cal .cal-week { grid-template-columns: 1fr; gap: 6px; }
.phone-cal .cal-col { flex-direction: row; flex-wrap: wrap; align-items: center; padding: 8px 10px; }
.phone-cal .cal-head { width: 64px; }
.phone-cal .cal-col .ev { flex: 1 1 60%; }
.phone-cal .cal-col .empty { flex: 1; }
.phone-cal .cal-month { min-height: 360px; gap: 2px; font-size: .8rem; }
.phone-cal .cal-day { padding: 3px; border-radius: 6px; }
.phone-cal .ev { font-size: .68rem; padding: 1px 3px; }

/* ------------------------------------------------------------ header gear */
.wall header { position: relative; }
.wall .gear { position: absolute; top: 0; right: 0; width: calc(var(--u) * 9); height: calc(var(--u) * 9); border-radius: 50%; border: 1px solid var(--line); background: var(--surface); font-size: calc(var(--u) * 4.4); }

/* ------------------------------------------------------------ recipes */
.chips { display: flex; gap: 10px; flex-wrap: wrap; }
.chipbtn { border: 1px solid var(--line); background: var(--surface); padding: 10px 18px; border-radius: 999px; font-weight: 650; }
.chipbtn.on { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.recipe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 42), 1fr)); gap: calc(var(--u) * 2.4); overflow: auto; padding: 4px; }
.rcard { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); padding: 0 0 12px; text-align: left; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.rcard b, .rcard .muted { padding: 0 14px; }
.rcard .rimg { aspect-ratio: 4/3; background: var(--surface-2); display: grid; place-items: center; font-size: 3em; position: relative; }
.rcard .rimg img { width: 100%; height: 100%; object-fit: cover; }
.rcard .rfav { position: absolute; top: 8px; right: 10px; font-style: normal; }
.recipe-detail { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: calc(var(--u) * 4); }
.recipe-detail .r-left, .recipe-detail .r-right { overflow: auto; display: flex; flex-direction: column; gap: 12px; }
.recipe-detail img { width: 100%; max-height: 40vh; object-fit: cover; border-radius: var(--radius); }
.recipe-detail h2 { margin: 6px 0 0; }
.steps { margin: 0; padding-left: 1.4em; display: grid; gap: 12px; font-size: 1.1em; line-height: 1.45; }
.cook .cook-step { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 24px; padding: 0 6%; }
.cook-n { color: var(--accent); font-weight: 800; font-size: calc(var(--u) * 4.4); }
.cook-text { font-size: calc(var(--u) * 6.4); line-height: 1.35; font-weight: 600; }

/* ------------------------------------------------------------ shopping */
.store-cols { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 46), 1fr)); gap: calc(var(--u) * 2.4); align-content: start; overflow: auto; }
.store-col { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.store-col h2 { margin: 0 0 4px; }
.shop-item { display: flex; align-items: center; gap: 12px; text-align: left; border: 1px solid var(--line); background: var(--bg); border-radius: 12px; padding: 12px; font-size: 1.05em; }
.shop-item .box { width: 30px; height: 30px; border-radius: 8px; border: 2px solid var(--muted); display: grid; place-items: center; font-weight: 900; flex: none; }
.shop-item.done { opacity: .5; text-decoration: line-through; }
.shop-item.done .box { background: var(--good); border-color: var(--good); color: #04130a; }
.phone textarea { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font: inherit; color: inherit; }
.phone .shop-item { width: 100%; }
.phone .rthumb { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; background: var(--surface-2); display: grid; place-items: center; font-size: 1.8rem; flex: none; }

/* ---------------- Kannada School */
.ks-now { display: grid; grid-template-columns: 3fr 1fr 1fr; gap: calc(var(--u) * 2); }
.ks-cur { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; border: 3px solid var(--accent); font: inherit; color: inherit; }
.ks-cur b { font-size: calc(var(--u) * 5.4); }
.ks-stat { display: grid; place-content: center; text-align: center; }
.ks-stat b { font-size: calc(var(--u) * 5); }
.ks-map { display: grid; gap: calc(var(--u) * 2.4); }
.ks-unit h3 { margin: 0 0 calc(var(--u) * 1); font-size: calc(var(--u) * 3.2); }
.ks-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 30), 1fr)); gap: calc(var(--u) * 1.6); }
.ks-les { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: calc(var(--u) * 1.6) calc(var(--u) * 2); border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); color: inherit; font: inherit; }
.ks-les b { font-size: calc(var(--u) * 3.4); }
.ks-les .ks-en { color: var(--muted); font-size: calc(var(--u) * 2.4); }
.ks-les.done { background: var(--surface-2); }
.ks-les.cur { border: 3px solid var(--accent); }
.ks-stars { min-height: 1.3em; }
.kl-body { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: calc(var(--u) * 2.4); height: calc(var(--u) * 64); flex: none; }
.kl-cards { overflow: auto; padding: 4px; }
.kl-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: calc(var(--u) * 1); }
.kl-pic { min-height: calc(var(--u) * 22); display: grid; place-items: center; }
.kl-stage .kl-emoji { font-size: calc(var(--u) * 20); line-height: 1; }
.kl-stage .kl-photo { height: calc(var(--u) * 24); max-width: 100%; border-radius: var(--radius); object-fit: cover; }
.kl-stage .kl-swatch { width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
.kl-big { font-size: calc(var(--u) * 22); line-height: 1.1; font-weight: 700; }
.kl-big.word { font-size: calc(var(--u) * 11); }
.kl-gloss { font-size: calc(var(--u) * 3.4); }
.kl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 20), 1fr)); gap: calc(var(--u) * 1.6); align-content: start; }
.kl-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: calc(var(--u) * 20); border-radius: var(--radius); border: 2px solid var(--line); background: var(--surface); color: inherit; font-size: calc(var(--u) * 7); font-weight: 700; }
.kl-card.w { font-size: calc(var(--u) * 3.6); }
.kl-card.on { border-color: var(--accent); background: var(--surface-2); }
.kl-card > i { position: absolute; top: 6px; right: 8px; font-style: normal; font-size: calc(var(--u) * 2.4); }
.kl-mini:empty { display: none; }
.kl-mini .kl-emoji { font-size: calc(var(--u) * 6); line-height: 1; }
.kl-mini .kl-photo { width: calc(var(--u) * 10); height: calc(var(--u) * 10); object-fit: cover; border-radius: 10px; }
.kl-swatch { display: inline-block; width: calc(var(--u) * 6); height: calc(var(--u) * 6); border-radius: 50%; border: 2px solid var(--line); }
.kl-dots { display: grid; grid-template-columns: repeat(5, auto); gap: 6px; justify-content: center; }
.kl-dots i { width: calc(var(--u) * 2.2); height: calc(var(--u) * 2.2); border-radius: 50%; background: var(--accent); }
.kl-stage .kl-dots i { width: calc(var(--u) * 4); height: calc(var(--u) * 4); }
.kl-stage .kl-dots.many i { width: calc(var(--u) * 3); height: calc(var(--u) * 3); }
.kl-info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 2); font-size: calc(var(--u) * 2.6); }
.kl-info h3 { margin: 0 0 6px; } .kl-info ul { margin: 0; padding-left: 1.2em; } .kl-info p { margin: 0 0 10px; }
.kl-rate { align-items: center; }
.ks-prog { height: 10px; border-radius: 5px; background: var(--surface-2); overflow: hidden; } .ks-prog i { display: block; height: 100%; background: var(--accent); }
.kw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.kw { display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: .9rem; text-align: center; position: relative; }
.kw .e { font-size: 2rem; line-height: 1.2; } .kw img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }

/* ---------------- wall profiles */
.wall .who-btns { display: flex; gap: calc(var(--u) * 1.4); align-items: center; margin-top: calc(var(--u) * 2.5); }
.wall .who-btns .gear { position: static; }
.wall .profile-chip { min-height: calc(var(--u) * 9); }
body[data-mode="kids"] .adult-only { display: none; }
.profiles { justify-content: center; align-items: center; text-align: center; gap: calc(var(--u) * 2); }
.profiles .pclock { font-size: calc(var(--u) * 16); font-weight: 750; line-height: 1; letter-spacing: -.03em; }
.profiles .pdate { font-size: calc(var(--u) * 4); }
.pchoices { display: flex; gap: calc(var(--u) * 5); margin-top: calc(var(--u) * 5); }
.pcard { width: calc(var(--u) * 52); height: calc(var(--u) * 52); border-radius: calc(var(--radius) * 2); border: 2px solid var(--line); background: var(--surface); color: inherit;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 1.4); font: inherit; }
.pcard.kids { background: var(--accent); color: var(--accent-ink); border: 0; }
.pcard.kids .muted { color: inherit; opacity: .85; }
.pcard .pico { font-size: calc(var(--u) * 20); line-height: 1; }
.pcard b { font-size: calc(var(--u) * 7); }
.pcard .muted { font-size: calc(var(--u) * 2.8); }
#pin h1 { font-size: calc(var(--u) * 6); margin: 0; }
.pin-dots { display: flex; gap: calc(var(--u) * 3); margin: calc(var(--u) * 3) 0 calc(var(--u) * 1); }
.pin-dots i { width: calc(var(--u) * 4); height: calc(var(--u) * 4); border-radius: 50%; border: calc(var(--u) * .5) solid #fff; }
.pin-dots i.on { background: #fff; }
.pin-msg { min-height: 1.4em; font-size: calc(var(--u) * 3); color: #fca5a5; }
.pin-pad { display: grid; grid-template-columns: repeat(3, calc(var(--u) * 22)); gap: calc(var(--u) * 2); margin-top: calc(var(--u) * 2); }
.wall .pin-pad .btn { min-height: calc(var(--u) * 13); font-size: calc(var(--u) * 5); }
/* Kids profile: only the chosen tiles, bigger */
@media (orientation: landscape) {
  body[data-mode="kids"] #home > .tiles { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: minmax(0, 1fr); }
  body[data-mode="kids"] #home { grid-template-areas: "head tiles" "head tiles"; }
}
body[data-mode="kids"] .tile { align-items: center; justify-content: center; text-align: center; gap: calc(var(--u) * 2); }
body[data-mode="kids"] .tile .ico { font-size: calc(var(--u) * 16) !important; }
body[data-mode="kids"] .tile .t { font-size: calc(var(--u) * 5.4); }
body[data-mode="kids"] .tile.call { flex-direction: column; }
#pin.layer.dim { background: var(--bg); color: var(--text); } #pin .pin-dots i { border-color: var(--text); } #pin .pin-dots i.on { background: var(--text); }

/* 12 tiles in Adult: the call tile takes one cell so everything fits 4 × 3 */
@media (orientation: landscape) {
  body:not([data-mode="kids"]) .wall .tile.call, body:not([data-mode="kids"]) .tile.call { grid-column: span 1; flex-direction: column; align-items: flex-start; justify-content: space-between; }
}
@media (orientation: landscape) { body:not([data-mode="kids"]) .wall .tile .t, body:not([data-mode="kids"]) .tile .t { font-size: calc(var(--u) * 3.9); } }

/* ---------------- forms on the wall */
.sheet-body { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 2.4) calc(var(--u) * 4); align-content: start; overflow: auto; flex: 1; }
.f-row { display: grid; gap: calc(var(--u) * 1); align-content: start; }
.f-row.wide { grid-column: 1 / -1; }
.f-label { font-weight: 700; font-size: calc(var(--u) * 3); }
.wall .f-in { font: inherit; font-size: calc(var(--u) * 3.2); padding: calc(var(--u) * 1.6); border-radius: calc(var(--u) * 1.6); border: 2px solid var(--line); background: var(--surface); color: var(--text); width: 100%; box-sizing: border-box; }
.wall textarea.f-in { resize: none; line-height: 1.4; }
.stepper { display: flex; gap: calc(var(--u) * 1); align-items: center; flex-wrap: wrap; }
.stepper { flex-wrap: nowrap; }
.stepper b { text-align: center; font-size: calc(var(--u) * 3.4); min-width: calc(var(--u) * 18); white-space: nowrap; }
.swatchbtn i { display: inline-block; width: calc(var(--u) * 4); height: calc(var(--u) * 4); border-radius: 50%; vertical-align: middle; }
.wall .chipbtn { font-size: calc(var(--u) * 2.8); padding: calc(var(--u) * 1.2) calc(var(--u) * 2.4); color: var(--text); }
.wall .chipbtn.on { color: var(--accent-ink); }
.photo-field { display: grid; gap: calc(var(--u) * 1.4); }
.photo-prev { display: flex; gap: calc(var(--u) * 2); align-items: center; min-height: calc(var(--u) * 10); }
.photo-prev img, .photo-prev video { height: calc(var(--u) * 26); border-radius: var(--radius); object-fit: cover; }
.sheet-actions { padding-top: calc(var(--u) * 1); }
#confirm h1 { max-width: 70vw; text-align: center; }
.layer.kbd { top: auto; height: 60vh; background: var(--surface-2); border-top: 2px solid var(--line); z-index: 30; gap: calc(var(--u) * 1.4); padding: calc(var(--u) * 2) calc(var(--u) * 4); }
.kb-preview { flex: none; font-size: calc(var(--u) * 3.6); background: var(--surface); border-radius: var(--radius); padding: calc(var(--u) * 1.2) calc(var(--u) * 2); white-space: pre-wrap; max-height: calc(var(--u) * 12); overflow: auto; }
.kb-row { display: flex; gap: calc(var(--u) * 1); margin-bottom: calc(var(--u) * 1); }
.wall .kb-key { flex: 1; font-size: calc(var(--u) * 3.8); min-height: calc(var(--u) * 7.6); padding: 0; background: var(--surface); }
.wall .kbd .btn { background: var(--surface); }
.wall .kbd .btn.primary { background: var(--accent); }
.wall .kb-wide { flex: 1.6; min-height: calc(var(--u) * 7.6); }
.wall .kb-space { flex: 4; min-height: calc(var(--u) * 7.6); }
.shop-row { display: flex; gap: calc(var(--u) * 1); align-items: stretch; }
.shop-row .shop-item { flex: 1; }
.wall .shop-edit { min-height: 0; padding: 0 calc(var(--u) * 1.8); }
.cd-item { display: flex; gap: calc(var(--u) * 2); align-items: center; }
.hands-btn { position: absolute; top: calc(var(--u) * 4); right: calc(var(--u) * 4); }
.photo-field label.btn { display: inline-flex; align-items: center; gap: 8px; }

/* ---------------- practice: letters, words, sentences */
.pr-rom { font-size: calc(var(--u) * 3.6); font-style: italic; color: var(--accent); }
.kl-big.sentence { font-size: calc(var(--u) * 6.5); }
.choose { display: grid; gap: calc(var(--u) * 1); width: 100%; margin-top: calc(var(--u) * 1); }
.choose-row { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 0.8); align-items: center; justify-content: center; }
.choose-row b { font-size: calc(var(--u) * 2.4); color: var(--muted); margin-right: calc(var(--u) * 0.6); }
.wall .choose .chipbtn { font-size: calc(var(--u) * 2.3); padding: calc(var(--u) * 0.6) calc(var(--u) * 1.4); display: inline-flex; align-items: center; gap: 6px; }
.choose .chipbtn img { width: calc(var(--u) * 4.5); height: calc(var(--u) * 4.5); object-fit: cover; border-radius: 6px; }
.kl-stage { overflow: auto; }
#letters .top .chips { flex: 1; justify-content: center; }
.kl-stage { justify-content: safe center; }
.pr-body { flex: 1; height: auto; min-height: 0; }
.kl-stage .kl-pic { min-height: calc(var(--u) * 16); }
.kl-stage .kl-emoji { font-size: calc(var(--u) * 15); }

/* ---------------- family tree */
.ft-viewport { position: relative; overflow: hidden; touch-action: none; background:
  radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--muted) 25%, transparent) 1px, transparent 0) 0 0 / 28px 28px, var(--surface-2); border-radius: var(--radius); cursor: grab; user-select: none; }
.ft-viewport:active { cursor: grabbing; }
.ft-canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.ft-lines { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.ft-lines .ft-child { fill: none; stroke: var(--muted); stroke-width: 3; }
.ft-lines .ft-marriage { stroke: var(--accent); stroke-width: 4; }
.ft-nodes { position: absolute; left: 0; top: 0; }
.ft-node { position: absolute; width: 190px; height: 236px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 8px;
  border-radius: 18px; border: 2px solid var(--line); background: var(--surface); color: var(--text); font: inherit; text-align: center; overflow: hidden; }
.ft-node.g-m { border-top: 6px solid #60a5fa; } .ft-node.g-f { border-top: 6px solid #f472b6; }
.ft-node.root { border: 4px solid var(--accent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 25%, transparent); }
.ft-node.sel { outline: 4px solid var(--focus); outline-offset: 3px; }
.ft-node.late { opacity: .8; filter: grayscale(.4); }
.ft-photo { width: 104px; height: 104px; border-radius: 50%; overflow: hidden; flex: none; background: var(--surface-2); display: grid; place-items: center; border: 3px solid var(--line); }
.ft-photo img { width: 100%; height: 100%; object-fit: cover; }
.ft-ini { font-size: 40px; font-weight: 800; color: var(--muted); }
.ft-rel { font-size: 19px; line-height: 1.15; color: var(--accent); margin-top: 4px; }
.ft-rel-en { font-size: 13px; color: var(--muted); line-height: 1.1; }
.ft-name { font-size: 16px; font-weight: 700; line-height: 1.15; }
.ft-life { font-size: 13px; color: var(--muted); }
.ft-zoom { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 8px; z-index: 2; }
.ft-zoom .btn { min-width: 52px; font-size: 22px; background: var(--surface); border: 1px solid var(--line); color: var(--text); }
.tree-main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, calc(var(--u) * 62)); gap: calc(var(--u) * 2.4); }
.tree-view { min-height: 0; height: 100%; }
.tree-side { overflow: auto; display: flex; flex-direction: column; gap: calc(var(--u) * 1.2); align-items: center; text-align: center; }
.tree-side h2 { margin: 0; font-size: calc(var(--u) * 4); }
.ts-photo { width: calc(var(--u) * 30); height: calc(var(--u) * 30); border-radius: 50%; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; font-size: calc(var(--u) * 12); font-weight: 800; color: var(--muted); }
.ts-photo img { width: 100%; height: 100%; object-fit: cover; }
.ts-rel { font-size: calc(var(--u) * 3); color: var(--accent); }
.ts-notes { white-space: pre-wrap; text-align: left; margin: 0; }
.ts-actions { display: grid; gap: calc(var(--u) * 1); width: 100%; margin-top: auto; }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 26), 1fr)); gap: calc(var(--u) * 1.6); overflow: auto; }
.pick-person { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: calc(var(--u) * 1.6); border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); color: inherit; font: inherit; }
.pick-person img, .pick-person .ft-ini { width: calc(var(--u) * 14); height: calc(var(--u) * 14); border-radius: 50%; object-fit: cover; background: var(--surface-2); display: grid; place-items: center; }
/* face cropper */
.crop-wrap { display: grid; justify-items: center; gap: 12px; }
.crop-stage { position: relative; width: min(70vh, 90vw, 520px); aspect-ratio: 1; }
.crop-canvas { width: 100%; height: 100%; border-radius: 16px; touch-action: none; cursor: move; }
.crop-ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 999px rgb(0 0 0 / .55); pointer-events: none; border: 3px dashed #fff; }
.crop-stage { overflow: hidden; border-radius: 16px; }
.crop-pad, .crop-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.crop-hint { color: var(--muted); }
.crop-source { display: grid; gap: 12px; justify-items: center; }
#cropCam { max-height: 60vh; max-width: 100%; border-radius: var(--radius); transform: scaleX(-1); }
.ft-overlay { position: fixed; inset: 0; z-index: 60; background: var(--bg); display: flex; flex-direction: column; padding: 12px; gap: 10px; }
.ft-overlay .row { flex-wrap: wrap; }
.ft-overlay .tree-view { flex: 1; }
.phone-tree { height: 62vh; }

/* FamilyBoard account: pairing code on the start screen */
.pair-card { display: grid; gap: 6px; justify-items: center; text-align: center; padding: calc(var(--u) * 2) calc(var(--u) * 3); border-radius: 20px; background: var(--surface); border: 1px solid var(--line); max-width: min(92vw, calc(var(--u) * 110)); font-size: calc(var(--u) * 2.4); }
.pair-code { font: 800 calc(var(--u) * 7)/1 ui-monospace, Menlo, monospace; letter-spacing: .12em; color: var(--accent); }
.pfamily { font-size: calc(var(--u) * 2); }
.profiles:has(#pairCard:not([hidden])) .pclock { font-size: calc(var(--u) * 11); }
.profiles:has(#pairCard:not([hidden])) .pcard { padding-block: calc(var(--u) * 2); }

/* Profiles of the people who live here (start screen) */
.ppeople { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * 2.4); max-width: 96vw; }
.ppeople:empty { display: none; }
.pperson { display: grid; justify-items: center; gap: calc(var(--u) * .8); padding: calc(var(--u) * 2) calc(var(--u) * 2.4); min-width: calc(var(--u) * 24); border-radius: 24px; border: 2px solid var(--line); background: var(--surface); color: var(--text); font: inherit; }
.pperson b { font-size: calc(var(--u) * 3.4); }
.pperson .pphoto { width: calc(var(--u) * 17); height: calc(var(--u) * 17); border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--surface-2); font-size: calc(var(--u) * 6); font-weight: 800; color: var(--muted); }
.pperson .pphoto img { width: 100%; height: 100%; object-fit: cover; }
.pperson.kid { border-color: var(--accent); }
.pperson:focus-visible, .pperson.focus { outline: 4px solid #60a5fa; outline-offset: 3px; }
.profiles.has-people .pclock { font-size: calc(var(--u) * 10); }
.profiles.has-people .pchoices { gap: calc(var(--u) * 1.6); }
.profiles.has-people .pchoices { margin-top: calc(var(--u) * 1.5); }
.profiles.has-people .pcard { width: auto; height: auto; padding: calc(var(--u) * 1.2) calc(var(--u) * 3); flex-direction: row; gap: calc(var(--u) * 1.4); min-height: 0; }
.profiles.has-people .pcard .pico { font-size: calc(var(--u) * 4); }
.profiles.has-people .pcard b { font-size: calc(var(--u) * 2.6); }
.profiles.has-people .pcard .muted { display: none; }