/* 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); }

.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; }

.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; }
.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,
.vcall.is-drawing .vcall-self { 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-colours { display: flex; flex-wrap: wrap; gap: 8px; }
.draw-colour {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.6);
  cursor: pointer;
}
.draw-colour.is-on { border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35); transform: scale(1.1); }
.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; }

/* 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; } }