/* Kitty Board on a family device (family tablet mode): a kitchen tablet, a phone shared at home or a
   touchscreen TV seen from 2 metres. docs/reviews/tablet-tv-ui-review.md, "Fix before 1.4.6".

   Every rule here starts with html.is-family-device, which site/js/family-mode.js puts on the page only
   when this browser is a family device (html.fd-child is added while a child is signed in). A normal
   phone or computer never matches anything in this file; tests/familyDeviceStyles.test.js checks that.

   Sizes grow with the screen's width, not in steps: about 2px more than the normal app on a tablet, and
   roughly 1.4 times at 1080p and 2 times at 4K with no scaling. Touch targets are 48px or more. */

html.is-family-device {
  --fd-text: clamp(16px, 11px + 0.55vw, 32px);   /* body text: 16 at 820, 17.5 at 1180, 21.5 at 1920, 32 at 3840 */
  --fd-ctrl: clamp(15px, 10px + 0.5vw, 28px);    /* buttons, tabs, chips, menus */
  --fd-small: clamp(14px, 9.5px + 0.45vw, 26px); /* "small" text: no less than 14px */
  --fd-tiny: clamp(13px, 9px + 0.4vw, 24px);     /* badges and counts */
  --fd-title: clamp(16px, 10.5px + 0.6vw, 32px); /* card, list and board tile titles */
  --fd-h1: clamp(28px, 18px + 1.2vw, 60px);
  --fd-h2: clamp(20px, 13px + 0.8vw, 40px);
  --fd-tap: clamp(48px, 30px + 1.6vw, 96px);     /* every touch target: 48 on a tablet, 61 at 1080p */
  --fd-tick: 22px;                                /* the drawn tick circle; its touch area is --fd-tap */
  --fd-tick-k: 1;
}
@media (min-width: 1600px) { html.is-family-device { --fd-tick-k: 1.35; } }
@media (min-width: 2560px) { html.is-family-device { --fd-tick-k: 1.8; } }

/* ---------- text ---------- */
html.is-family-device body { font-size: var(--fd-text); }
html.is-family-device .small,
html.is-family-device small,
html.is-family-device .tt small,
html.is-family-device .menu-item small,
html.is-family-device .who small,
html.is-family-device .field > span,
html.is-family-device .mc-sub,
html.is-family-device .prize-for,
html.is-family-device .prize-tally,
html.is-family-device .kp-left,
html.is-family-device .pop-sub { font-size: var(--fd-small); }
html.is-family-device .badge,
html.is-family-device .chip,
html.is-family-device .list-count,
html.is-family-device .bt-meta,
html.is-family-device .nav .count { font-size: var(--fd-tiny); }
html.is-family-device .card-title,
html.is-family-device .list-title,
html.is-family-device .bt-title,
html.is-family-device .tt strong,
html.is-family-device .pop-head,
html.is-family-device .home-label,
html.is-family-device .prize-top strong,
html.is-family-device .kp-name { font-size: var(--fd-title); }
html.is-family-device .greet h1,
html.is-family-device .lock-card h1,
html.is-family-device .mc-title { font-size: var(--fd-h1); }
html.is-family-device .board-title,
html.is-family-device .sheet-head h2,
html.is-family-device .upsell h2,
html.is-family-device .mc-section h3,
html.is-family-device .fd-heading { font-size: var(--fd-h2); }
html.is-family-device input:not([type=checkbox]):not([type=radio]):not([type=file]),
html.is-family-device textarea,
html.is-family-device select { font-size: var(--fd-text); }
html.is-family-device input:not([type=checkbox]):not([type=radio]):not([type=file]),
html.is-family-device select { min-height: var(--fd-tap); }
/* Done tasks keep the darker grey (the normal app's 3.4:1 grey is hard to read across a kitchen). */
html.is-family-device .task.done .task-text { color: var(--soft); }

/* ---------- touch targets ---------- */
html.is-family-device .btn,
html.is-family-device .chip-btn,
html.is-family-device .quick-btn,
html.is-family-device .pill-tab,
html.is-family-device .menu-item,
html.is-family-device .hchip,
html.is-family-device .nav a,
html.is-family-device .add-card-btn,
html.is-family-device .mc-quick .badge.due,
html.is-family-device .mc-quick .chip { min-height: var(--fd-tap); font-size: var(--fd-ctrl); }
html.is-family-device .btn.small { padding-left: 16px; padding-right: 16px; }
html.is-family-device .mc-quick .quick-btn { height: auto; }
html.is-family-device .icon-btn,
html.is-family-device .task-del { width: var(--fd-tap); height: var(--fd-tap); }
html.is-family-device .icon-btn svg { width: calc(var(--fd-tap) * 0.42); height: calc(var(--fd-tap) * 0.42); }
html.is-family-device .link { min-height: var(--fd-tap); }
html.is-family-device button.link { display: inline-flex; align-items: center; }
html.is-family-device .fd-top { min-height: var(--fd-tap); font-size: var(--fd-ctrl); padding-left: 16px; padding-right: 16px; }
html.is-family-device .fd-top svg { width: calc(var(--fd-tap) * 0.38); height: calc(var(--fd-tap) * 0.38); }
/* Ticks: the circle stays its size on a tablet; the invisible box around it is a full touch target. */
html.is-family-device .tck { transform: scale(var(--fd-tick-k)); }
html.is-family-device .card-tck input,
html.is-family-device .task-tck input,
html.is-family-device .today .tck input { inset: calc((var(--fd-tick) - var(--fd-tap) / var(--fd-tick-k)) / 2); width: auto; height: auto; }
html.is-family-device .task { min-height: var(--fd-tap); }

/* ---------- one touch layout in both orientations (docs/DECISIONS.md, 20 October 2026) ----------
   A family device never gets the desktop layout (desktop.js isFamilyDevice), so turning a tablet, or a
   TV, keeps the same top bar: the cat on its own (the words stay for screen readers), Switch and Lock
   (or All done) on the right, and the bigger tabs on a row of their own under them, so nothing
   overlaps. Phones keep the tab bar at the bottom. Only the content uses a wider screen (below). */
html.is-family-device .topbar .brand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html.is-family-device .topbar { gap: 8px; }
@media (min-width: 701px) {
  html.is-family-device .topbar { flex-wrap: wrap; row-gap: 6px; }
  html.is-family-device .topbar .nav { order: 3; flex: 1 0 100%; justify-content: center; }
  html.is-family-device .topbar .top-right { margin-left: auto; }
}

/* ---------- room to grow: the 620px columns go full width; a TV spreads out, up to a sensible width ---------- */
html.is-family-device .today,
html.is-family-device .jar-home,
html.is-family-device .approvals,
html.is-family-device .gs-card { max-width: none; }
html.is-family-device .home { max-width: clamp(1120px, 68vw, 2700px); }
html.is-family-device .list { flex-basis: clamp(292px, 200px + 8vw, 560px); }
/* Sideways (or a TV): the same markup, with pairs side by side (desktop.js pairedHtml). On the grown-up
   home Today sits beside the boards; on a child's home the jar beside I've got an idea!, My boards beside
   My prizes, and the jobs as big cards, two or more to a row. Upright, each pair is two blocks, one
   under the other, exactly as before. */
html.is-family-device .fd-pair-item { min-width: 0; }
@media (min-width: 1000px) {
  html.is-family-device .home.kid-home { max-width: clamp(1120px, 68vw, 2700px); }
  html.is-family-device .fd-pair { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 0 clamp(24px, 2.2vw, 64px); align-items: start; }
  html.is-family-device .fd-pair-jar-idea,
  html.is-family-device .fd-pair-boards-prizes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  html.is-family-device .fd-pair .home-label { min-height: var(--fd-tap); }
  html.is-family-device .fd-pair-jar-idea { align-items: end; }
  html.is-family-device .fd-pair-jar-idea .jar-home { margin-bottom: 0; }
  html.is-family-device .kid-home .kid-jobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, clamp(300px, 22vw, 720px)), 1fr)); gap: clamp(12px, 1vw, 28px); padding: 0; background: none; box-shadow: none; }
  html.is-family-device .kid-home .kid-jobs .trow { min-height: max(92px, calc(var(--fd-tap) * 1.6)); padding: 16px 18px; gap: 14px; border: 0; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-sm); }
  html.is-family-device .kid-home .kid-jobs .tt strong { white-space: normal; }
}
html.is-family-device .jar-page { max-width: clamp(900px, 56vw, 2100px); }
html.is-family-device .modal-card { max-width: clamp(760px, 46vw, 1600px); }
html.is-family-device .modal-card.with-ai { max-width: clamp(1180px, 70vw, 2600px); }
html.is-family-device .popover:not(.sheet) { min-width: min(calc(100vw - 24px), clamp(280px, 18vw, 640px)); }

/* ---------- the on-screen keyboard ---------- */
/* 100vh ignores the keyboard on iPadOS; --fd-vh is the visible height (family-mode.js watches
   visualViewport), so a sheet can always scroll its last field into view above the keyboard. */
html.is-family-device .fd-sheet,
html.is-family-device .upsell { max-height: calc(var(--fd-vh, 100dvh) - 32px); overflow-y: auto; }
html.is-family-device .popover { max-height: min(clamp(560px, 50vh, 1400px), calc(var(--fd-vh, 100dvh) - 24px)); }
html.is-family-device .overlay { padding-bottom: max(40px, calc(100dvh - var(--fd-vh, 100dvh) + 16px)); }

/* ---------- the picker ---------- */
html.is-family-device .lock-card { max-width: clamp(390px, 22vw + 200px, 1000px); padding: clamp(30px, 2vw, 64px) clamp(26px, 2vw, 64px); }
html.is-family-device .lock-card.fd-picker { max-width: clamp(640px, 50vw, 1700px); }
html.is-family-device .fd-people { --fd-cat: clamp(72px, 30px + 4vw, 200px); grid-template-columns: repeat(auto-fit, minmax(calc(var(--fd-cat) + 56px), 1fr)); gap: clamp(14px, 1.2vw, 40px); }
html.is-family-device .fd-people .fd-person { min-height: calc(var(--fd-cat) + 70px); font-size: var(--fd-h2); }
html.is-family-device .fd-cat .person-cat { width: var(--fd-cat) !important; height: var(--fd-cat) !important; }
html.is-family-device .fd-cat .person-cat b { font-size: calc(var(--fd-cat) * 0.36) !important; margin-top: calc(var(--fd-cat) * 0.12) !important; }
html.is-family-device .fd-lock { width: calc(var(--fd-cat) * 0.38); height: calc(var(--fd-cat) * 0.38); }
html.is-family-device .fd-lock svg { width: 50%; height: 50%; }
html.is-family-device .fd-device-name { font-size: var(--fd-small); }
/* Add someone and Sign in with email: pills, not 13px links. */
html.is-family-device .fd-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; font-size: 0; }
html.is-family-device .fd-links .link { font-size: var(--fd-ctrl); padding: 0 20px; border-radius: 999px; background: var(--fill); text-decoration: none; color: var(--ink); font-weight: 800; }

/* ---------- the PIN pad: grows with the screen; a child's 4-number pad has bigger keys still ---------- */
html.is-family-device .fd-pad { --fd-key: clamp(72px, 40px + 3vw, 150px); }
html.is-family-device .fd-pad.fd-pad-child { --fd-key: clamp(84px, 46px + 3.6vw, 170px); max-width: clamp(420px, 26vw + 200px, 1100px); }
html.is-family-device .fd-pad .pin-pad { max-width: calc(var(--fd-key) * 3.4 + 24px); gap: clamp(10px, 0.8vw, 24px); }
html.is-family-device .fd-pad .pin-key { height: var(--fd-key); font-size: calc(var(--fd-key) * 0.42); border-radius: calc(var(--fd-key) * 0.28); }
html.is-family-device .fd-pad .pin-key.ghost { font-size: var(--fd-ctrl); color: var(--ink); }
html.is-family-device .fd-pad [data-pin-back] { background: var(--fill); }
html.is-family-device .fd-pad .pin-dots { gap: calc(var(--fd-key) * 0.22); }
html.is-family-device .fd-pad .pin-dots i { width: calc(var(--fd-key) * 0.26); height: calc(var(--fd-key) * 0.26); border-width: 3px; }
html.is-family-device .fd-pad .pin-cat .person-cat { width: calc(var(--fd-key) * 1.1) !important; height: calc(var(--fd-key) * 1.1) !important; }
html.is-family-device .fd-pad .pin-cat .person-cat b { font-size: calc(var(--fd-key) * 0.4) !important; margin-top: calc(var(--fd-key) * 0.13) !important; }

/* ---------- a child signed in on the device: the child home's look, everywhere ---------- */
/* Top bar: big round tabs, and All done in the jar's mint. */
html.is-family-device.fd-child .nav a { border-radius: 999px; padding-left: 18px; padding-right: 18px; }
html.is-family-device.fd-child .nav a.on { background: var(--pink-soft); color: color-mix(in srgb, var(--pink-deep) 75%, var(--ink)); box-shadow: none; } /* 5:1 or more on the pink */
html.is-family-device.fd-child .fd-top.fd-done { background: var(--mint-soft); color: color-mix(in srgb, var(--mint) 45%, var(--ink)); }
html.is-family-device.fd-child .fd-top.fd-done .kb-glyph { color: var(--mint); }
/* Board: rounder, roomier cards with the child home's 30px ticks. */
html.is-family-device.fd-child .card { border-radius: 22px; padding: 14px 16px; }
html.is-family-device.fd-child .card-title { font-size: calc(var(--fd-title) + 3px); }
html.is-family-device.fd-child .list { border-radius: 26px; }
html.is-family-device.fd-child .list-title { font-size: calc(var(--fd-title) + 3px); }
html.is-family-device.fd-child .tck { --fd-tick: 30px; width: 30px; height: 30px; }
html.is-family-device.fd-child .tck span { border-width: 2.5px; }
html.is-family-device.fd-child .tck span::after,
html.is-family-device.fd-child .tck input:checked + span::after { left: 9.5px; top: 4.5px; width: 7px; height: 13px; border-width: 0 3px 3px 0; }
html.is-family-device.fd-child .card-tck { margin-top: -3px; }
/* Card: a big title and 56px task rows. */
html.is-family-device.fd-child .mc-title { font-size: calc(var(--fd-h1) + 2px); }
html.is-family-device.fd-child .task { min-height: max(56px, var(--fd-tap)); align-items: center; }
html.is-family-device.fd-child .task-text { font-size: calc(var(--fd-text) + 2px); }
/* Kitty Jar tab: the home's big jar and prize tiles, two to a row. */
html.is-family-device.fd-child .jar-card { padding: clamp(22px, 1.6vw, 48px) clamp(24px, 1.8vw, 52px); border-radius: 30px; }
html.is-family-device.fd-child .jar-who { font-size: var(--fd-title); }
html.is-family-device.fd-child .jar-num { font-size: calc(var(--fd-h1) * 1.6); }
html.is-family-device.fd-child .prize-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1vw, 28px); }
html.is-family-device.fd-child .prize { border-radius: 26px; padding: clamp(18px, 1.4vw, 40px); min-height: clamp(150px, 10vw, 360px); border: 3px solid var(--line); box-shadow: var(--shadow-sm); }
html.is-family-device.fd-child .prize::before { height: 10px; }
html.is-family-device.fd-child .prize-top strong { font-size: var(--fd-h2); }
html.is-family-device.fd-child .pill-tab { padding-left: 24px; padding-right: 24px; }
html.is-family-device.fd-child .kp-name { font-size: calc(var(--fd-title) + 2px); }
@media (max-width: 520px) {
  html.is-family-device.fd-child .prize-grid { grid-template-columns: 1fr; }
}