/* MyKid — the grown-up's app.
 *
 * Rebuilt 2026-11-02 as five tabs along the bottom, one thing per screen,
 * forms in a sheet. The brief is still the opposite of the kid side: fast to
 * use one-handed on a phone. This is the side that answers a call request from
 * a lock screen and plans a month of custody days on a train.
 */

:root {
  /* b-near.me's surfaces, scales and shadows, in the season's colour. The two
     MyKid apps are told apart by colour on purpose (his indigo, this one
     anything but), so what carries over from the site is the craft and not
     the hue.

     The rule about the accent is b-near's: the base accent is a *mark* —
     borders, dots, large figures, a bar — and white text sits on the deeper
     step. Every --accent-deep below carries white at 4.5:1 or better
     (#178048 4.98, #0b7378 5.6, #a94b10 5.7, #2f5d93 6.6). */
  --accent: #1f9d55;
  --accent-deep: #178048;
  --accent-soft: #e9f6ef;
  --accent-line: #c6e7d5;
  --bg: #fbfbfa;
  --shadow-accent: 0 6px 18px rgba(31, 157, 85, 0.24);

  --card: #ffffff;
  --panel-2: #f3f4f7;
  --line: #e8e9ee;
  --ink: #16182b;
  --ink-soft: #62677d;

  /* Whose day it is. Never seasonal: his calendar paints the Pai's days green
     and the Mãe's pink, and the two apps must not disagree about a day. */
  --pai: #1f9d55;
  --pai-wash: #d7efe1;
  --pai-ink: #11663a;
  --mae: #d6337f;
  --mae-wash: #fbe1ec;
  --mae-ink: #b0245f;

  --blue: #4f7fe8;
  --warn: #b26a00;
  --bad: #d6337f;

  --radius: 22px;
  --shadow-card: 0 14px 34px rgba(22, 24, 43, 0.07);
  --ease-lift: cubic-bezier(0.2, 0.8, 0.2, 1);

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  /* Not the whole home-indicator inset under the labels: 34px on an iPhone
     left them floating well above the bottom edge. The indicator is a thin
     line ~8px up, so 16px less still clears it — the kid app does the same. */
  --tabbar-pad: max(8px, calc(var(--safe-bottom) - 16px));
  --tabbar-h: calc(64px + var(--tabbar-pad));
}

/* The seasons. pai.html sets data-season before first paint; core.js keeps it
   current and lets Família fix one. */
:root[data-season="verao"] {
  --accent: #0f9aa0;
  --accent-deep: #0b7378;
  --accent-soft: #e4f5f5;
  --accent-line: #bfe5e6;
  --bg: #fdfaf3;
  --shadow-accent: 0 6px 18px rgba(15, 154, 160, 0.24);
}

:root[data-season="outono"] {
  --accent: #d4671f;
  --accent-deep: #a94b10;
  --accent-soft: #fcefe4;
  --accent-line: #f3d2b8;
  --bg: #fcf8f3;
  --shadow-accent: 0 6px 18px rgba(212, 103, 31, 0.24);
}

:root[data-season="inverno"] {
  --accent: #4a7bb7;
  --accent-deep: #2f5d93;
  --accent-soft: #eaf1f9;
  --accent-line: #c9d9ec;
  --bg: #f8fafc;
  --shadow-accent: 0 6px 18px rgba(74, 123, 183, 0.24);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

html {
  background:
    radial-gradient(90% 36% at 84% -6%, var(--accent-soft) 0%, transparent 62%),
    var(--bg);
  background-attachment: fixed;
  background-color: var(--bg);
}

body {
  font-family: 'Archivo', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: transparent;
  font-size: 15px;
  /* Always a pixel taller than the screen. iOS gives a page that does not
     scroll a shorter viewport than one that does, so the fixed tab bar sat at
     two different heights depending on the tab. Same fix as the kid app. */
  min-height: calc(100vh + 1px);
  min-height: calc(100dvh + 1px);
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}

body.has-sheet { overflow: hidden; }

/* The status bar is translucent in the installed app, so whatever scrolls up
   ran under the clock and the battery. A band of the page's own ground sits
   behind them; it is zero tall anywhere without a notch. */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--safe-top);
  background: var(--bg);
  z-index: 45;
  pointer-events: none;
}

[hidden] { display: none !important; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: calc(var(--safe-top) + 22px) 16px calc(var(--tabbar-h) + 32px);
}

.page { display: flex; flex-direction: column; gap: 22px; }

.center { display: flex; justify-content: center; text-align: center; }

/* ── Page head ──────────────────────────────────────────────────────────── */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.page-head-text { min-width: 0; }
.page-head h1 { margin: 0; font-size: 30px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; }
.page-kicker { margin: 0 0 4px; font-size: 14px; color: var(--ink-soft); }
.page-head.is-profile { justify-content: flex-start; gap: 16px; }
.page-head.is-profile .page-head-text { flex: 1; }
.head-actions { display: flex; gap: 6px; }

/* ── Tab bar ────────────────────────────────────────────────────────────── */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  height: var(--tabbar-h);
  padding: 6px 6px var(--tabbar-pad);
  display: grid;
  grid-template-columns: repeat(var(--tabs, 5), minmax(0, 1fr));
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}

.tab {
  position: relative;
  border: 0;
  background: none;
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 52px;
  cursor: pointer;
}

.tab.is-on { color: var(--accent-deep); font-weight: 650; }

.tab-badge {
  position: absolute;
  top: 2px;
  left: calc(50% + 5px);
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  border: 2px solid #fff;
  background: var(--bad);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}

/* ── Groups and cards ───────────────────────────────────────────────────── */
.group { display: flex; flex-direction: column; gap: 10px; }

.group-title { display: flex; align-items: center; gap: 8px; min-height: 26px; }

.group-title h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* The selected day's title in Agenda is a heading people read, not a label. */
.group-title h2.is-big {
  font-size: 19px;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
}

.count {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 11px;
  background: var(--bad);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.card {
  background: var(--card);
  border: 1px solid rgba(22, 24, 43, 0.04);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.card.is-inline { flex-direction: row; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; }
.card.is-list { padding: 4px 16px; gap: 0; }
.card.is-calm { align-items: center; text-align: center; padding: 24px 18px 14px; }
.card.is-month { padding: 10px 8px; }
.card.is-bars { padding: 16px 14px 10px; }
.card.is-urgent { border: 2px solid var(--accent); box-shadow: 0 18px 40px rgba(22, 24, 43, 0.1); }
.card.is-warn { background: #fdf6e8; border-color: #f0dcb8; }
.card.is-custody { gap: 12px; }

/* A whole card that is one button. */
.card.is-link {
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.card-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  background: var(--panel-2);
  color: var(--ink-soft);
}

.card-icon.is-accent { background: var(--accent-soft); color: var(--accent-deep); border-radius: 50%; }
.card-icon.is-blue { background: #eef2fd; color: #3b62c4; }
.card-icon.is-warn { background: #fff1d9; color: var(--warn); }
.card-icon.is-bad { background: var(--mae-wash); color: var(--mae-ink); }

.card-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.card-text strong { font-size: 16px; font-weight: 600; }
.card-text span { font-size: 13px; color: var(--ink-soft); }
/* The routine's name in Rotinas e férias is a button: it opens "Quando acaba?". */
.routine-end-open { flex: 1; min-width: 0; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }

.card-note { margin: 0; font-size: 13px; color: var(--ink-soft); }

.wait-head { display: flex; align-items: center; gap: 12px; }
.wait-title { font-size: 18px !important; }

.calm-title { font-size: 19px; font-weight: 600; margin-top: -2px; }

.card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  color: var(--accent-deep);
  font-weight: 500;
}

.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; }
.dot.is-bad { background: var(--bad); }

.empty-note { color: var(--ink-soft); text-align: center; padding: 20px 10px; font-size: 14px; margin: 0; }

/* ── Lists ──────────────────────────────────────────────────────────────── */
.list-item,
.nav-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 10px 0;
  border-bottom: 1px solid #f0f1f4;
}

.list-item:last-child,
.nav-row:last-child { border-bottom: 0; }

.list-item.is-off { opacity: 0.5; }

.list-item.is-link,
.nav-row {
  width: 100%;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.nav-row > svg,
.list-item > svg { color: var(--ink-soft); flex: none; }

.nav-row-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.nav-row-label { font-size: 16px; }
.nav-row-note { font-size: 13px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-row-value { font-size: 14px; color: var(--ink-soft); flex: none; }
.nav-row.is-danger .nav-row-label { color: var(--mae-ink); }

/* ── His day (Hoje and Agenda draw it the same way) ─────────────────────── */
.day-list { display: flex; flex-direction: column; }

.day-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 8px 0;
  border-bottom: 1px solid #f0f1f4;
}

.day-item:last-child { border-bottom: 0; }
.day-time { width: 50px; flex: none; font-size: 14px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.day-sym { width: 28px; flex: none; display: flex; justify-content: center; }
.day-title { flex: 1; min-width: 0; font-size: 16px; }
.day-title small { display: block; font-size: 12px; color: var(--ink-soft); }
.day-done { color: var(--accent); display: flex; flex: none; }

/* His pedidos faded, like on his own calendar. */
.day-item.is-wish .day-sym,
.day-item.is-wish .day-title { opacity: 0.55; }

.who-pill {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
}

.who-pill.is-pai { background: var(--pai-wash); color: var(--pai-ink); }
.who-pill.is-mae { background: var(--mae-wash); color: var(--mae-ink); }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  border: 1.5px solid var(--line);
  background: var(--card);
  color: var(--ink);
  border-radius: 999px;
  padding: 0 18px;
  min-height: 46px;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  transition: transform 0.18s var(--ease-lift), border-color 0.15s ease, box-shadow 0.18s var(--ease-lift);
}

.btn:hover { border-color: var(--accent-line); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: default; }

.btn-primary {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: #fff;
  font-weight: 600;
  box-shadow: var(--shadow-accent);
}

.btn-primary:hover { border-color: var(--accent-deep); }

.btn-soft { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-deep); font-weight: 600; }
.btn-quiet { background: transparent; border-color: transparent; color: var(--ink-soft); }
.btn-danger { border-color: #f0cede; color: var(--mae-ink); }
.btn-danger:hover { border-color: var(--bad); }

/* "Com quem fica" paints in the custody colours, whatever the season. */
.btn-pai { background: var(--pai-ink); border-color: var(--pai-ink); color: #fff; font-weight: 600; }
.btn-mae { background: var(--mae-ink); border-color: var(--mae-ink); color: #fff; font-weight: 600; }

.btn-lg { min-height: 54px; font-size: 17px; font-weight: 600; }
.btn-sm { min-height: 38px; padding: 0 12px; font-size: 14px; }
.btn-block { width: 100%; }
.btn-icon { width: 44px; min-height: 44px; padding: 0; flex: none; }
.btn-icon.btn-sm { width: 38px; min-height: 38px; }
.btn-round { width: 48px; height: 48px; min-height: 48px; padding: 0; flex: none; }

/* A button that is not the one to press right now. Faded rather than gone:
   it has to stay visible or the screen looks as though the feature vanished. */
.btn.is-faded { opacity: 0.4; cursor: default; box-shadow: none; }

/* "Ler um horário": camera, photo library, PDF (2026-11-10). */
.tablet-welcome { margin: 0 0 6px; font-size: 16px; line-height: 1.5; color: var(--ink); }
.timetable-sources { display: grid; gap: 8px; margin: 4px 0 12px; }
.ai-chat { display: grid; gap: 8px; margin-top: 8px; }
.ai-chat textarea { width: 100%; min-width: 0; box-sizing: border-box; }
.ai-chat-lines { display: grid; gap: 6px; }
.ai-chat-line { margin: 0; padding: 8px 12px; border-radius: 16px; max-width: 85%; font-size: 15px; line-height: 1.35; }
.ai-chat-line.is-me { justify-self: end; background: var(--accent-deep); color: #fff; border-bottom-right-radius: 4px; }
.ai-chat-line.is-ai { justify-self: start; background: #eeeeec; color: var(--ink); border-bottom-left-radius: 4px; }
.sex-pick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.timetable-source-inner { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.timetable-picked { margin: 0 0 12px; font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.btn-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.btn-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.btn-trio .btn { padding: 0 8px; white-space: nowrap; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }

.link-btn {
  align-self: flex-start;
  background: none;
  border: 0;
  padding: 0;
  min-height: 44px;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--accent-deep);
  cursor: pointer;
}

.fab {
  position: fixed;
  right: max(16px, calc(50% - 304px));
  bottom: calc(var(--tabbar-h) + 16px);
  z-index: 40;
  height: 56px;
  padding: 0 22px 0 18px;
  border: 0;
  border-radius: 28px;
  background: var(--accent-deep);
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 10px 24px rgba(22, 24, 43, 0.22);
  cursor: pointer;
}

/* The Agenda page ends with the FAB floating over it; leave room to scroll
   the last row out from under it. */
.page.is-agenda { padding-bottom: 72px; }

/* ── Segmented switch ───────────────────────────────────────────────────── */
.seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: #eceef2;
}

.seg-btn {
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  padding: 0 8px;
}

.seg-btn.is-on { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 2px 8px rgba(22, 24, 43, 0.08); }

/* ── Avatars ────────────────────────────────────────────────────────────── */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  background: var(--panel-2);
  color: var(--ink-soft);
  font-weight: 600;
}

.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.is-accent { background: var(--accent-soft); color: var(--accent-deep); box-shadow: inset 0 0 0 3px var(--accent-line); }
.avatar.is-mae { background: var(--mae-wash); color: var(--mae-ink); }

/* ── Agenda ─────────────────────────────────────────────────────────────── */
.legend { display: flex; gap: 16px; font-size: 13px; color: var(--ink-soft); margin-top: -12px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.swatch { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.swatch.is-pai { background: var(--pai-wash); box-shadow: inset 0 0 0 1px rgba(31, 157, 85, 0.35); }
.swatch.is-mae { background: var(--mae-wash); box-shadow: inset 0 0 0 1px rgba(214, 51, 127, 0.35); }

/* minmax(0, 1fr), never 1fr: 1fr floors each column at its content's
   min-content width, and a day with symbols would widen its column. */
.month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }

.month-label {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  padding-bottom: 4px;
}

.mday {
  min-width: 0;
  min-height: 52px;
  padding: 5px 2px 4px;
  border: 2px solid transparent;
  border-radius: 12px;
  background: var(--panel-2);
  color: var(--ink);
  font: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
}

.mday.is-empty { visibility: hidden; }
.mday.is-pai { background: var(--pai-wash); }
.mday.is-mae { background: var(--mae-wash); }
.mday.is-picked { border-color: var(--ink); }
/* Public holidays: routines do not run, so an empty weekday needs a reason. */
.mday.is-holiday { box-shadow: inset 0 0 0 2px #b5179e; }

.mday-num { font-size: 15px; font-weight: 500; line-height: 22px; min-width: 22px; border-radius: 11px; }
.mday.is-today .mday-num { background: var(--accent-deep); color: #fff; font-weight: 700; padding: 0 5px; }

.mday-syms { display: flex; gap: 2px; justify-content: center; min-height: 12px; min-width: 0; }
.mday-syms svg { width: 12px; height: 12px; flex: none; }
/* A pedido on the day: there, but a question rather than a plan. */
.mday-syms svg.is-wish { opacity: 0.5; }

.custody-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.custody-head strong { font-size: 16px; }

/* ── Sheet ──────────────────────────────────────────────────────────────── */
.sheet-layer { position: fixed; inset: 0; z-index: 80; }

.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(22, 24, 43, 0.38);
  animation: sheet-fade 0.2s ease;
}

.sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 640px;
  margin: 0 auto;
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg);
  border-radius: 28px 28px 0 0;
  padding: 10px 18px calc(var(--safe-bottom) + 28px);
  animation: sheet-up 0.26s var(--ease-lift);
}

@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sheet-fade { from { opacity: 0; } to { opacity: 1; } }

.sheet-grip { display: block; width: 40px; height: 5px; border-radius: 3px; background: #d4d6de; margin: 0 auto 8px; }

.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.sheet-head h2 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }

.sheet-close {
  background: none;
  border: 0;
  min-height: 44px;
  padding: 0 4px;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--accent-deep);
  cursor: pointer;
}

.sheet-body { display: flex; flex-direction: column; gap: 12px; }
.sheet-note { margin: 0; font-size: 14px; color: var(--ink-soft); }

.sheet-section {
  margin: 12px 0 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* The Adicionar menu. */
.choice {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 76px;
  padding: 14px 16px;
  border: 0;
  border-radius: 20px;
  background: var(--card);
  box-shadow: 0 10px 28px rgba(22, 24, 43, 0.06);
  font: inherit;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.choice > svg { color: var(--ink-soft); flex: none; }

.choice-mark {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font-size: 20px;
  font-weight: 700;
}

.choice-mark.is-accent { background: var(--accent-soft); color: var(--accent-deep); }
.choice-mark.is-blue { background: #eef2fd; color: #3b62c4; }
/* Ler um horário glows (Sérgio, 2026-11-10: "a blinking light around the AI
   option"). A soft pulse in the IA mark's own blue, not a hard on/off blink;
   a steady ring for anyone who has asked for less motion. */
.choice.is-ai { animation: ai-glow 1.8s ease-in-out infinite; }
@keyframes ai-glow {
  0%, 100% { box-shadow: 0 0 0 2px rgba(59, 98, 196, 0.2), 0 10px 28px rgba(22, 24, 43, 0.06); }
  50% { box-shadow: 0 0 0 4px #3b62c4, 0 0 26px 8px rgba(59, 98, 196, 0.55); }
}
@media (prefers-reduced-motion: reduce) {
  .choice.is-ai { animation: none; box-shadow: 0 0 0 3px rgba(59, 98, 196, 0.7); }
}
.choice-mark.is-game { background: #eef2fd; }
.choice-mark.is-warn { background: #fff1d9; color: var(--warn); }
.choice-mark.is-mae { background: var(--mae-wash); color: var(--mae-ink); }

.choice-text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.choice-text strong { font-size: 17px; font-weight: 600; }
.choice-text span { font-size: 14px; color: var(--ink-soft); }

/* ── Forms ──────────────────────────────────────────────────────────────── */
.field > label,
.field > [role="group"] { display: flex; flex-direction: column; gap: 8px; }
.field-label { font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.field-note { margin: 6px 0 0; font-size: 13px; color: var(--ink-soft); }

input[type="text"], input[type="url"], input[type="password"], input[type="email"],
input[type="date"], input[type="time"], input[type="number"], select, textarea {
  width: 100%;
  /* A grid or flex item defaults to min-width:auto, which for a date or time
     input is the intrinsic width of the platform's picker widget — wider than
     a phone on iOS. Without this the field refuses to shrink and pushes the
     whole page sideways. */
  min-width: 0;
  max-width: 100%;
  min-height: 50px;
  padding: 0 14px;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  font: inherit;
  /* 16px is the size below which iOS zooms the page into a field on focus. */
  font-size: 16px;
}

/* iOS sizes date and time inputs from their own widget rather than from the
   box, and ignores width until the native appearance is off. */
input[type="date"], input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  line-height: 46px;
}

input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent-deep); }

/* Two across when there is room, stacked when there is not. A fixed 1fr 1fr
   put two date pickers side by side on a phone and overflowed the screen. */
.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.field-row > * { min-width: 0; }

.check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; cursor: pointer; }
.check input { width: 22px; height: 22px; accent-color: var(--accent-deep); }

.sym-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 8px; }

.sym-opt {
  min-height: 68px;
  padding: 8px 3px 6px;
  border: 2px solid transparent;
  border-radius: 14px;
  background: var(--card);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
}

.sym-opt.is-on { border-color: var(--accent-deep); color: var(--ink); }

.weekday-picker { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }

.weekday {
  min-height: 46px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--ink-soft);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  min-width: 0;
}

.weekday.is-on { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }

/* ── Seasons (Família) ──────────────────────────────────────────────────── */
.card.is-seasons { gap: 12px; padding: 16px; }

.season-auto {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  padding: 8px 14px;
  border: 2px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  font: inherit;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.season-auto.is-on { border-color: var(--accent-deep); background: var(--accent-soft); }

.radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #c9ccd6; flex: none; }
.season-auto.is-on .radio { border-color: var(--accent-deep); background: var(--accent-deep); box-shadow: inset 0 0 0 3px var(--accent-soft); }

.season-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }

.season-opt {
  min-height: 76px;
  min-width: 0;
  padding: 8px 2px;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: var(--ground);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font: inherit;
  font-size: 12px;
  color: var(--ink);
  cursor: pointer;
}

.season-opt.is-on { border-color: var(--ink); }
.season-swatch { width: 26px; height: 26px; border-radius: 50%; background: var(--swatch); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9); }

/* ── Ele ────────────────────────────────────────────────────────────────── */
.meter { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; border-bottom: 1px solid #f0f1f4; }
.meter-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.meter-head strong { font-size: 17px; font-weight: 500; }
.meter-head span { font-size: 15px; color: var(--ink-soft); }
.meter-track { display: block; height: 8px; border-radius: 4px; background: #eceef2; overflow: hidden; }
.meter-fill { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.meter-fill.is-full { background: var(--warn); }

.bars { display: flex; align-items: flex-end; gap: 8px; height: 120px; }
.bar { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.bar-fill { width: 100%; max-width: 24px; border-radius: 6px; background: var(--accent-line); }
.bar-fill.is-today { background: var(--accent); }
.bar-label { font-size: 12px; color: var(--ink-soft); font-weight: 600; }
.bar-value { font-size: 11px; color: var(--ink-soft); min-height: 14px; }

.code-big {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: 10px;
  text-align: center;
  padding: 18px 0 8px;
  color: var(--accent-deep);
  font-variant-numeric: tabular-nums;
}

.vid-thumb { width: 84px; aspect-ratio: 16 / 9; border-radius: 8px; object-fit: cover; background: #000; flex: none; }

/* One daily limit per row: what it is, how many minutes, and the switch that
   takes the limit off altogether. On a phone the minutes and the switch drop
   under the name rather than squeezing it to three letters. */
.limit {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 0;
  border-bottom: 1px solid #f0f1f4;
}

.limit:last-child { border-bottom: 0; }

.limit-sym {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--panel-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.limit-name { flex: 1; min-width: 110px; font-weight: 600; }
.limit-used { display: block; font-size: 12px; font-weight: 500; color: var(--ink-soft); }
.limit-mins { display: flex; align-items: center; gap: 6px; flex: none; }
.limit-mins input { width: 80px; }
.limit-mins span { font-size: 13px; color: var(--ink-soft); }

/* Disabled means "there is no limit right now", not "you may not touch this",
   so it fades rather than going grey and dead. */
.limit-mins input:disabled { opacity: 0.4; }

.limit-off {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  flex: none;
  cursor: pointer;
}

.limit-off input { width: 20px; height: 20px; accent-color: var(--accent-deep); }

/* ── Photos ─────────────────────────────────────────────────────────────── */
.photo-slot { display: flex; gap: 14px; align-items: center; padding: 12px 0; }
.photo-slot-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }

/* The photo as it will look to him: round, cropped, and small. */
.photo-preview {
  width: 76px;
  height: 76px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  background: var(--panel-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--ink-soft);
  text-align: center;
}

.photo-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Conversa ───────────────────────────────────────────────────────────── */
.chat { display: flex; flex-direction: column; gap: 12px; }
.chat-list { display: flex; flex-direction: column; gap: 8px; }

.chat-line {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 20px;
  font-size: 16px;
  line-height: 1.35;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Mine is the filled bubble and the child's is the quiet one, which is the
   way round every messaging app the reader already knows does it. The deeper
   accent, not the mark: white text sits on this. */
.chat-line.is-mine { align-self: flex-end; background: var(--accent-deep); color: #fff; border-bottom-right-radius: 6px; }
.chat-line.is-kid { align-self: flex-start; background: var(--card); box-shadow: 0 6px 18px rgba(22, 24, 43, 0.06); border-bottom-left-radius: 6px; }
/* Another grown-up in the family: on the left like the child's lines, but in
   the grown-ups' blue so it is never mistaken for something the child wrote. */
.chat-line.is-family { align-self: flex-start; background: #e8eefc; border-bottom-left-radius: 6px; }
.chat-who { display: block; font-size: 11px; font-weight: 700; opacity: 0.75; }
.chat-when { font-size: 11px; opacity: 0.65; }

.chat-compose { display: flex; gap: 8px; align-items: center; }
.chat-compose input { flex: 1; min-width: 0; border-radius: 25px; padding: 0 18px; }

/* In Conversa the box stays above the tab bar while the lines scroll. */
.chat > .chat-compose {
  position: sticky;
  bottom: calc(var(--tabbar-h) + 8px);
  padding: 8px 0;
  background: var(--bg);
}

/* ── Toast ──────────────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(var(--tabbar-h) + 16px);
  z-index: 95;
  max-width: 520px;
  margin: 0 auto;
  padding: 13px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 12px 30px rgba(22, 24, 43, 0.28);
}

.toast.is-bad { background: var(--mae-ink); }

/* ── Jogos ────────────────────────────────────────────────────────────────
   Same board component as the kid app, so the colours must match it exactly:
   he is red, the grown-up is yellow, always. That is also why this stays dark
   whatever the season — it is not a panel on a page, it is the same object he
   is looking at, and its cells are light on navy. */
.board {
  display: grid;
  gap: 5px;
  background: #1b1f4a;
  border-radius: 14px;
  padding: 7px;
  max-width: 420px;
  width: 100%;
  align-self: center;
}

.board .cell {
  aspect-ratio: 1;
  border: 0;
  padding: 0;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  display: grid;
  place-items: center;
  min-height: 34px;
}

.board-quatro .cell { border-radius: 50%; }

.board .disc { width: 78%; height: 78%; border-radius: 50%; display: block; }
/* Jogo do Galo is played with an X and an O, not two coloured balls. The
   colour still carries — he is red, his father yellow — but the shape is what
   makes it the game rather than a matching exercise. */
.board .mark { width: 82%; height: 82%; display: block; }
.board .is-crianca .mark { color: #e2571e; }
.board .is-pai .mark     { color: #f2c200; }

.board .is-crianca .disc { background: #e2571e; }
.board .is-pai .disc     { background: #f2c200; }
.board .can-play { background: rgba(255, 255, 255, 0.28); cursor: pointer; }
.board .can-play:hover { background: rgba(255, 255, 255, 0.4); }
.board .is-win .disc { outline: 3px solid #fff; outline-offset: 2px; }

/* ── Batalha Naval ────────────────────────────────────────────────────────
   Two seas: the one being fired at on top, your own smaller underneath. Ships
   keep the board colours — his red, the grown-up's yellow — and draw as one
   hull, rounded at bow and stern. Same block in both apps. */
.sea-pair { display: grid; gap: 8px; width: 100%; }
.sea-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-weight: 800;
  font-size: 15px;
  color: var(--ink);
}
.sea-pips { display: flex; gap: 4px; }
.sea-pip { width: 16px; height: 8px; border-radius: 4px; background: #e2571e; }
.sea-pips.is-pai .sea-pip { background: #f2c200; }
.sea-pip.is-sunk { opacity: 0.25; }

.board.sea { background: #134a7c; gap: 4px; }
.board.sea.is-small { width: 64%; justify-self: center; align-self: center; gap: 3px; padding: 5px; }
.board.sea .cell { background: rgba(159, 211, 255, 0.16); border-radius: 7px; min-height: 0; }
.board.sea.is-small .cell { border-radius: 4px; }
.board.sea .can-play { background: rgba(159, 211, 255, 0.32); }
.board.sea .is-ship { background: #e2571e; }
.board.sea.is-pai .is-ship { background: #f2c200; }
.board.sea .ship-across.ship-bow  { border-radius: 50% 3px 3px 50%; }
.board.sea .ship-across.ship-stern { border-radius: 3px 50% 50% 3px; }
.board.sea .ship-down.ship-bow    { border-radius: 50% 50% 3px 3px; }
.board.sea .ship-down.ship-stern  { border-radius: 3px 3px 50% 50%; }
.board.sea .ship-mid { border-radius: 3px; }
.board.sea .ship-solo { border-radius: 50%; }
.board.sea .is-sunk { filter: saturate(0.5) brightness(0.75); }
.board.sea .is-hit:not(.is-ship) { background: rgba(255, 90, 54, 0.35); }
.board.sea .is-last { box-shadow: inset 0 0 0 3px #fff; }
.board.sea .mark { width: 72%; height: 72%; }

.card-note.is-strong { color: var(--ink); font-weight: 700; }


/* ── Video call ────────────────────────────────────────────────────────────
   Plainer than the kid's screen — this side can read — but the same idea:
   the call takes the whole window, because nothing else matters while it is
   happening. */
.vcall {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: #0b0d1c;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ── The call, shrunk ──────────────────────────────────────────────────────
   A call does not have to own the screen. Minimised it sits in the corner, the
   tab bar comes back, and he can carry on — answering a request, or taking his
   turn in the game they are in the middle of. Tapping it restores it.

   No hang-up on the balloon: it floats over whatever he is doing, and ending a
   call by brushing past it is not a mistake worth leaving available. */
.vcall.is-mini {
  inset: auto 12px calc(var(--tabbar-h) + 12px) auto;
  width: 104px;
  height: 138px;
  border-radius: 16px;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(255, 255, 255, 0.85);
  /* Over the page, under the sheet: a form he has opened should not have a
     video sitting on top of it. */
  z-index: 60;
}

.vcall.is-mini .vcall-self,
.vcall.is-mini .vcall-bar,
.vcall.is-mini .vcall-status,
.vcall.is-mini .vcall-shrink { display: none; }

.vcall.is-mini .vcall-remote { border-radius: 16px; }

/* The page scrolls under the balloon, so the last card needs room to clear it. */
body.vcall-mini .wrap { padding-bottom: calc(var(--tabbar-h) + 170px); }

.vcall-shrink {
  position: absolute;
  left: 12px;
  top: calc(12px + var(--safe-top));
  z-index: 2;
  border: 0;
  border-radius: 999px;
  min-height: 40px;
  padding: 0 16px;
  background: rgba(255, 255, 255, 0.92);
  color: #16182b;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.vcall-shrink:active { transform: translateY(1px); }

.vcall-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  color: #fff;
  padding: 24px;
}

.vcall-ring h2 { margin: 8px 0 0; font-size: 22px; }
.vcall-hint { margin: 0; opacity: 0.75; font-size: 14px; }
.vcall-ring .sym { animation: vcall-pulse 1.6s ease-in-out infinite; }

@keyframes vcall-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07); }
}

.vcall-actions { display: flex; gap: 12px; margin-top: 10px; flex-wrap: wrap; justify-content: center; }

.vcall-remote {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #05060f;
}

.vcall-self {
  position: absolute;
  right: 14px;
  top: calc(var(--safe-top) + 14px);
  width: 132px;
  height: 100px;
  object-fit: cover;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.8);
  background: #05060f;
  transform: scaleX(-1);
}

.vcall-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--safe-bottom) + 20px);
  display: flex;
  gap: 12px;
  justify-content: center;
  padding: 0 12px;
}

.vcall-status {
  position: absolute;
  left: 50%;
  top: calc(var(--safe-top) + 16px);
  transform: translateX(-50%);
  z-index: 2;
  max-width: min(92vw, 460px);
  text-align: center;
  background: rgba(8, 10, 22, 0.72);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 999px;
}

/* Nothing to say is said by saying nothing. */
.vcall-status.is-quiet { display: none; }

/* ── Damas ────────────────────────────────────────────────────────────────
   A wooden board: pieces on the dark squares, his red, the grown-up's yellow.
   A piece he can move is ringed; one that must capture pulses; the squares it
   can go to show a dot. Same block in both apps. */
.board.board-damas { background: #5a3b24; gap: 0; padding: 6px; }
.board-damas .cell { border-radius: 0; min-height: 0; background: #e9dcc4; position: relative; }
.board-damas .cell.is-dark { background: #7a5233; }
.board-damas .disc {
  width: 76%; height: 76%; border-radius: 50%; display: grid; place-items: center;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.28), 0 2px 3px rgba(0, 0, 0, 0.35);
}
.board-damas .disc.is-crianca { background: #e2571e; }
.board-damas .disc.is-pai { background: #f2c200; }
/* A dama wears a crown. */
.board-damas .disc.is-dama::after {
  content: ""; width: 56%; height: 40%;
  background: #fff7d6;
  clip-path: polygon(0 100%, 0 20%, 25% 60%, 50% 0, 75% 60%, 100% 20%, 100% 100%);
}
.board-damas .can-pick { cursor: pointer; }
.board-damas .can-pick .disc { outline: 3px solid rgba(255, 255, 255, 0.85); outline-offset: 1px; }
.board-damas .must .disc { animation: damas-must 1s ease-in-out infinite; }
.board-damas .is-picked .disc { outline: 4px solid #3ddc84; transform: scale(1.08); }
.board-damas .can-play { cursor: pointer; }
.board-damas .can-play::after {
  content: ""; width: 34%; height: 34%; border-radius: 50%;
  background: rgba(61, 220, 132, 0.85); box-shadow: 0 0 0 4px rgba(61, 220, 132, 0.3);
}
@keyframes damas-must { 50% { transform: scale(0.88); } }
@media (prefers-reduced-motion: reduce) { .board-damas .must .disc { animation: none; } }

/* ── Memória a dois ───────────────────────────────────────────────────────
   Face-down cards are indigo with a white ring; turned, they are white with
   the symbol. A won pair takes the winner's colour; the last miss is ringed. */
.pares-wrap { display: grid; gap: 10px; width: 100%; }
.board.board-pares { background: transparent; padding: 0; gap: 8px; }
.board-pares .card {
  border-radius: 14px; min-height: 0; background: #5b5fd0;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.18);
  display: grid; place-items: center; transition: transform 0.15s ease;
}
.board-pares .card-back { width: 42%; height: 42%; border-radius: 50%; border: 4px solid rgba(255, 255, 255, 0.55); }
.board-pares .card.is-up { background: #fff; }
.board-pares .card.is-open { box-shadow: 0 0 0 4px #3ddc84; }
.board-pares .card.is-missed { box-shadow: 0 0 0 4px #ff8a65; }
.board-pares .card.is-won { opacity: 0.85; }
.board-pares .card.is-won.is-crianca { box-shadow: 0 0 0 4px #e2571e; }
.board-pares .card.is-won.is-pai { box-shadow: 0 0 0 4px #f2c200; }
.board-pares .can-play { cursor: pointer; }
.board-pares .can-play:active { transform: scale(0.94); }
.pares-count { display: flex; justify-content: space-between; gap: 8px; font-weight: 800; }
.pares-count .is-crianca { color: #e2571e; }
.pares-count .is-pai { color: #c79f00; }

/* Manhã e noite: his checklist, one row per thing. */
.list-edit { display: grid; gap: 6px; }
.list-edit-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--panel-2); }
.list-edit-label { flex: 1; min-width: 0; font-weight: 600; }

/* ── Drawing together ─────────────────────────────────────────────────────
   One sheet of paper on both screens during a call. While it is open the
   other face shrinks to the top-right corner (where the self-view usually
   is), the tools sit to its left and the paper — always 4:3, so a line lands
   in the same place on both screens — fills the rest above the buttons.
   Same block in both apps; --draw-bottom is each app's own bar height. */
.vcall { --draw-bottom: 84px; }
.vcall-draw {
  position: absolute;
  left: 12px;
  top: calc(66px + var(--safe-top));
  z-index: 2;
  border: 0;
  border-radius: 999px;
  min-height: 44px;
  padding: 0 16px 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.92);
  color: #16182b;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.vcall.is-mini .vcall-draw,
.vcall.is-mini .draw,
.vcall.is-drawing .vcall-draw,
.vcall.is-drawing .vcall-shrink { display: none; }
.vcall.is-drawing .vcall-remote {
  inset: calc(12px + var(--safe-top)) 12px auto auto;
  width: 104px;
  height: 138px;
  border-radius: 18px;
  z-index: 4;
  border: 3px solid rgba(255, 255, 255, 0.85);
}
.draw {
  position: absolute;
  left: 12px;
  right: 12px;
  top: calc(12px + var(--safe-top));
  bottom: calc(var(--draw-bottom) + var(--safe-bottom));
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.draw[hidden] { display: none; }
.draw-tools {
  min-height: 138px;
  padding-right: 120px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 10px;
}
.draw-btn {
  border: 0;
  border-radius: 999px;
  min-height: 44px;
  padding: 0 16px;
  background: rgba(255, 255, 255, 0.92);
  color: #16182b;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.draw-btn.is-close { background: #3ddc84; }
.draw-sheet {
  flex: 1;
  min-height: 0;
  container-type: size;
  display: grid;
  place-items: center;
}
.draw-paper {
  width: min(100cqw, calc(100cqh * 4 / 3));
  aspect-ratio: 4 / 3;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  touch-action: none;
  cursor: crosshair;
}

/* Penáltis — a goal seen from the spot. Same block in kid/app.css and
   grownups/app.css: the board is drawn by one component for both apps. The
   pitch carries its own colours, so it reads the same on either paper. */
.pen-wrap { display: flex; flex-direction: column; gap: 12px; }
.pen-pitch {
  position: relative;
  aspect-ratio: 16 / 11;
  border-radius: 20px;
  overflow: hidden;
  background: repeating-linear-gradient(90deg, #3c9a4b 0 12.5%, #45a855 12.5% 25%);
}
.pen-goal {
  position: absolute;
  left: 8%; width: 84%; top: 8%; height: 62%;
  border: 6px solid #fff;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  box-sizing: border-box;
}
.pen-net {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.28) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.28) 0 1px, transparent 1px 12px),
    rgba(20, 60, 30, 0.25);
}
.pen-keeper {
  position: absolute;
  bottom: 0; left: 50%;
  width: 17%; height: 74%;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  transition: left 0.42s ease-out, transform 0.42s ease-out;
  --kit: #e2571e;
}
.pen-keeper.is-pai { --kit: #f2c200; }
.pen-keeper .pen-head {
  position: absolute; top: 0; left: 50%;
  width: 46%; aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #f1c9a5;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.12);
}
.pen-keeper .pen-arms {
  position: absolute; top: 33%; left: -38%;
  width: 176%; height: 11%;
  border-radius: 999px;
  background: var(--kit);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15);
}
.pen-keeper .pen-body {
  position: absolute; top: 30%; bottom: 0; left: 14%; right: 14%;
  border-radius: 10px 10px 6px 6px;
  background: var(--kit);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.15);
}
.pen-keeper.dive-0 { transform: translateX(-50%) rotate(-64deg); }
.pen-keeper.dive-1 { transform: translate(-50%, -16%); }
.pen-keeper.dive-2 { transform: translateX(-50%) rotate(64deg); }
.pen-ball {
  position: absolute;
  width: 9%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #16182b 0 22%, transparent 23%), #fff;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
  transition: left 0.5s ease-out, top 0.5s ease-out, transform 0.5s ease-out;
  z-index: 2;
}
.pen-pitch.is-still .pen-ball,
.pen-pitch.is-still .pen-keeper { transition: none; }
.pen-zones {
  position: absolute;
  left: 8%; width: 84%; top: 8%; height: 62%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 6px;
  box-sizing: border-box;
  z-index: 3;
}
.pen-zones.is-sides { grid-template-rows: minmax(0, 1fr); }
.pen-zone {
  position: relative;
  min-height: 0;
  border: 2px dashed rgba(255, 255, 255, 0.55);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
  padding: 0;
}
.pen-zone:active { background: rgba(255, 255, 255, 0.3); }
.pen-target {
  position: absolute; top: 50%; left: 50%;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  border: 4px solid #fff;
  box-shadow: 0 0 0 4px rgba(226, 87, 30, 0.6);
  animation: pen-pulse 1.4s ease-in-out infinite;
}
.pen-arrow {
  position: absolute; top: 50%; left: 0; right: 0;
  transform: translateY(-50%);
  text-align: center;
  font-size: 38px; font-weight: 900; line-height: 1;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
}
.pen-aim {
  position: absolute;
  width: 11%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 4px dashed #fff;
  z-index: 2;
}
.pen-flash {
  position: absolute; left: 50%; top: 80%;
  transform: translate(-50%, -50%);
  padding: 4px 18px;
  border-radius: 999px;
  font-size: 30px; font-weight: 900; letter-spacing: 0.04em;
  color: #fff;
  z-index: 4;
}
.pen-flash.is-goal { background: #1f9d55; }
.pen-flash.is-save { background: #2b5fb8; }
.pen-flash.is-fresh { animation: pen-pop 0.35s 0.5s ease-out both; }
.pen-tally { display: flex; flex-direction: column; gap: 6px; }
.pen-line { display: flex; align-items: center; gap: 8px; }
.pen-who { width: 64px; font-weight: 700; }
.pen-dots { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.pen-dot {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 3px solid rgba(128, 134, 160, 0.55);
  box-sizing: border-box;
}
.pen-dot.is-goal { background: #1f9d55; border-color: #1f9d55; }
.pen-dot.is-miss { background: rgba(128, 134, 160, 0.4); border-color: transparent; }
.pen-line.is-crianca .pen-goals { color: #e2571e; }
.pen-line.is-pai .pen-goals { color: #f2c200; }
.pen-goals { font-size: 22px; min-width: 20px; text-align: right; }
@keyframes pen-pulse { 50% { transform: scale(1.15); } }
@keyframes pen-pop { from { transform: translate(-50%, -50%) scale(0.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .pen-ball, .pen-keeper { transition: none; }
  .pen-target, .pen-flash.is-fresh { animation: none; }
}

/* The paused screen: a lapsed subscription covers the whole app. */
.paused {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: calc(16px + var(--safe-top)) 16px calc(16px + var(--safe-bottom));
  background: var(--bg);
  overflow-y: auto;
}
.paused-card {
  width: 100%; max-width: 420px;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 24px 20px;
}
.paused-card h1 { font-size: 24px; font-weight: 400; letter-spacing: -0.01em; color: var(--ink); }
.paused-card p { color: var(--ink-soft); line-height: 1.5; }
.paused-note { font-size: 14px; }
.paused-out { margin-top: 4px; }

/* Choosing monthly or yearly (2026-11-10): two lines inside the button, the
   saving under the yearly price. A plain inner span, never flex on the
   <button> itself (Safari). */
.plan-btn { height: auto; min-height: 52px; padding-top: 10px; padding-bottom: 10px; }
.plan-btn-inner { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.plan-btn-note { font-size: 13px; font-weight: 500; opacity: 0.8; }
.sheet .plan-btn + .plan-btn { margin-top: 10px; }

/* The install card on Hoje carries two buttons side by side. */
.card-actions { display: flex; gap: 8px; flex: none; }
@media (max-width: 420px) { .card.is-inline:has(.card-actions) { flex-wrap: wrap; } .card-actions { width: 100%; } .card-actions .btn { flex: 1; } }

/* "Ligar o tablet dele" (tablet.js): three numbered steps in one sheet. */
.tablet-step { display: grid; gap: 10px; padding: 16px 0; border-top: 1px solid var(--line); }
.tablet-step:first-of-type { border-top: 0; }
.tablet-step-h { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 16px; font-weight: 600; }
.tablet-n { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--accent-deep); color: #fff; font-size: 14px; font-weight: 700; }
.tablet-url { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.tablet-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tablet-actions .btn { flex: 1; }
.tablet-qr { width: 168px; height: 168px; margin: 4px auto 0; display: block; border-radius: 12px; border: 1px solid var(--line); background: #fff; padding: 6px; }

/* "Guardar" on the call's drawing paper (2026-11-09). */
.draw-btn.is-save { background: #ffc93c; color: #1c1d33; }
/* Família → Desenhos. */
.drawings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.drawing-tile { padding: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; cursor: pointer; }
.drawing-tile img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.drawing-big { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line); background: #fff; }

/* ── Calls, 2026-11-09: both cameras while drawing, and the colour disk ──
   Drawing used to hide your own camera, leaving only the other face in the
   corner; now both sit side by side up there, yours mirrored and smaller,
   and the tools make room for them. */
.vcall.is-drawing .vcall-self {
  display: block;
  inset: calc(12px + var(--safe-top)) 124px auto auto;
  width: 80px;
  height: 106px;
  border-radius: 16px;
  z-index: 4;
}
.vcall.is-drawing .draw-tools { padding-right: 212px; }
.draw-sheet { position: relative; }
/* ── The paper as a paint program (2026-11-11) ──────────────────────────────
   Sérgio: "similar to the Paint app". A toolbox down the left of the paper,
   the palette always on show along the bottom (two rows of ten and a big
   square of the colour in use), undo and redo with the other buttons on top.
   Same block in both apps. On a phone the toolbox lies across the top of the
   paper, because a column of tools would leave the paper too narrow. */
.draw-body { flex: 1; min-height: 0; display: flex; gap: 10px; }
.draw-body .draw-sheet { flex: 1; min-width: 0; }
.draw-toolbox {
  flex: none;
  align-self: center;
  display: grid;
  grid-template-columns: repeat(2, 52px);
  gap: 6px;
  padding: 8px;
  border-radius: 16px;
  background: rgba(238, 240, 246, 0.96);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.draw-tool, .draw-size {
  width: 52px; height: 52px; padding: 0;
  display: grid; place-items: center;
  border: 2px solid transparent; border-radius: 10px;
  background: #fff; color: #1c1d33; cursor: pointer;
}
.draw-tool.is-on, .draw-size.is-on {
  border-color: #3b62c4; background: #dfe7fb;
  box-shadow: inset 0 2px 4px rgba(28, 29, 51, 0.18);
}
.draw-sizes { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.draw-sizes.is-off { opacity: 0.35; pointer-events: none; }
.draw-size { width: auto; height: 40px; }
.draw-size span { width: var(--s); height: var(--s); border-radius: 50%; background: #1c1d33; }
.draw-palette {
  flex: none;
  display: flex; align-items: center; gap: 10px;
  padding: 8px;
  border-radius: 16px;
  background: rgba(238, 240, 246, 0.96);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.draw-current {
  flex: none; width: 64px; height: 64px; border-radius: 10px;
  background: var(--c); border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.draw-swatches { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; }
.draw-swatch {
  height: 36px; min-width: 0; padding: 0; border-radius: 8px;
  background: var(--c); border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.22); cursor: pointer;
}
.draw-swatch.is-on { box-shadow: 0 0 0 3px #1c1d33; transform: scale(1.06); }
.draw-btn.is-icon { width: 48px; padding: 0; display: inline-grid; place-items: center; }
.draw-btn:disabled { opacity: 0.45; cursor: default; }
.draw-paper[data-tool="fill"] { cursor: copy; }
.draw-paper[data-tool="rubber"] { cursor: cell; }
@media (max-width: 640px) {
  .draw-body { flex-direction: column; gap: 8px; }
  .draw-toolbox { align-self: stretch; grid-template-columns: repeat(7, minmax(0, 1fr)) 1.4fr; padding: 6px; gap: 4px; }
  .draw-tool { width: auto; height: 42px; }
  .draw-tool svg { width: 22px; height: 22px; }
  .draw-sizes { grid-column: auto; grid-template-columns: 1fr; gap: 2px; }
  .draw-size { height: 13px; border-radius: 5px; }
  .draw-size span { width: calc(var(--s) * 0.5); height: calc(var(--s) * 0.5); }
  .draw-current { width: 44px; height: 44px; }
  .draw-swatch { height: 26px; border-radius: 6px; }
  .draw-swatches { gap: 3px; }
  /* Beside the two camera previews there are ~154px: undo and redo on one
     row, Apagar on the next, Guardar and Fechar on the third — 132px, inside
     the previews' 138. */
  .draw-tools { gap: 6px; }
  .draw-btn { min-height: 40px; padding: 0 10px; font-size: 14px; }
  .draw-btn.is-icon { width: 40px; }
}