/* PlayQuest הורים — screen-specific styles for the learning journal, pairing/auth, settings and secondary screens.
   Shared tokens and components live in app.css (docs/DESIGN-SYSTEM.md). Loaded after app.css.
   Everything here is scoped to a screen class; the few generic fallbacks use :where() (zero specificity) so the shared
   component styles in app.css always win. */

/* ------------------------------------------------------------------ fallbacks (zero specificity) */

:where(.btn.quiet) { background: transparent; color: var(--accent-ink); }
:where(.btn.quiet):hover { background: var(--accent-soft); }

/* Glyph tile: one calm treatment for list icons on my screens (no gradients). */
.g-ic {
  width: 36px; height: 36px; border-radius: 10px; flex: none; display: grid; place-items: center;
  background: var(--surface-3); color: var(--text-2);
}
.g-ic svg { width: 20px; height: 20px; }
.g-ic.accent { background: var(--accent-soft); color: var(--accent-ink); }
.g-ic.gold { background: var(--gold-soft); color: var(--gold-ink); }
.g-ic.ok { background: var(--success-soft); color: var(--success-ink); }
.g-ic.warn { background: var(--warning-soft); color: var(--warning-ink); }
.g-ic.danger { background: var(--coral-soft); color: var(--coral-ink); }
.g-ic.lg { width: 44px; height: 44px; border-radius: 12px; }
.g-ic.lg svg { width: 22px; height: 22px; }

/* Earned time: a chip in the earned tone (lighter slate). */
.gold-chip {
  display: inline-block; flex: none; white-space: nowrap;
  background: var(--gold-soft); color: var(--gold-ink); border-radius: 999px; padding: 2px 10px;
  font-family: var(--font-num); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.5;
}
.gold-chip.big { font-size: 16px; padding: 4px 12px; }

/* ================================================================== learning journal (views/history.js) */

.journal { display: flex; flex-direction: column; gap: 12px; }
.journal .j-controls { display: flex; flex-direction: column; gap: 10px; }

/* child picker: a quiet segmented row */
.journal .j-kids { display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--surface-3); }
.journal .j-kid {
  flex: 1; min-width: 0; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 10px; background: transparent; color: var(--text-2); font-size: 15px; font-weight: 600; padding: 0 8px;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.journal .j-kid bdi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.journal .j-kid .avatar { width: 24px; height: 24px; font-size: 12px; }
.journal .j-kid[aria-checked="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

/* one compact, scrollable chip row */
.journal .j-chips { padding-bottom: 2px; }
.journal .j-chips .chip { min-height: 36px; padding: 0 12px; font-size: 14px; }
.journal .j-sep { width: 1px; align-self: stretch; margin: 8px 2px; background: var(--border-strong); flex: none; }
.journal .j-filter-btn .count { background: var(--btn-primary); color: var(--on-accent); }
.journal .j-filter-btn[aria-pressed="true"] .count { background: var(--bg); color: var(--text); }

.journal .j-overview {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 0 4px; font-size: 14px; color: var(--text-2);
}
.journal .j-overview-gold { display: inline-flex; align-items: center; gap: 4px; color: var(--gold-ink); font-weight: 600; }
.journal .j-overview-gold svg { width: 15px; height: 15px; }
.journal .j-clear { border: 0; background: none; color: var(--accent-ink); font-weight: 600; font-size: 14px; min-height: 44px; padding: 0 4px; margin-inline-start: auto; }

.journal .j-list { display: flex; flex-direction: column; gap: 20px; }
.journal .j-day-group { display: flex; flex-direction: column; gap: 8px; }
.journal .j-day {
  position: sticky; top: calc(var(--safe-top) + 56px); z-index: 4;
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 8px 4px 6px; margin: 0 -4px; background: var(--bg);
  font-size: 15px; font-weight: 700; color: var(--text);
}
.journal .j-day-date { font-weight: 500; color: var(--text-3); }
.journal .j-day-sum { font-size: 13px; font-weight: 500; color: var(--text-3); font-family: var(--font); white-space: nowrap; }
.journal .j-day-sum .ltr { font-family: var(--font-num); color: var(--gold-ink); font-weight: 600; }

/* one list group per day: entries separated by hairlines */
.journal .j-group { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: clip; }
.journal .j-entry { position: relative; scroll-margin-top: calc(var(--safe-top) + 100px); }
.journal .j-entry + .j-entry::before { content: ""; position: absolute; top: 0; inset-inline: 16px; border-top: 1px solid var(--border); z-index: 1; }
.journal .j-entry[data-open="true"] { background: var(--surface); }

.journal .j-head {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 14px 16px; min-height: 72px;
  border: 0; background: transparent; color: inherit; text-align: start; font: inherit; cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.journal .j-head:active { background: var(--surface-2); }
.journal .j-head:focus-visible { outline-offset: -2px; border-radius: var(--radius-sm); }
.journal .j-head-static { display: flex; gap: 12px; padding: 14px 16px; }

.journal .j-glyph, .journal .subj.j-glyph {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none;
  background: var(--surface-3); color: var(--text-2);
}
.journal .subj.j-glyph svg { width: 21px; height: 21px; }
.journal .subj.j-glyph.reading { background: var(--accent-soft); color: var(--accent-ink); }

.journal .j-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.journal .j-title-row { display: flex; align-items: flex-start; gap: 8px; }
.journal .j-title {
  flex: 1; min-width: 0; font-size: 16px; font-weight: 650; line-height: 1.4; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.journal .j-math-title { font-family: var(--font-num); font-weight: 600; font-variant-numeric: tabular-nums; }
.journal .j-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; font-size: 13.5px; color: var(--text-3); }
.journal .j-dot { margin: 0 6px; color: var(--text-3); }
.journal .j-meta .num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.journal .j-who { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-weight: 600; }
.journal .j-who .avatar { width: 20px; height: 20px; font-size: 11px; }
.journal .j-tot { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.journal .j-tot svg { width: 13px; height: 13px; }
/* "במחשב" / "בטלפון": which device the record came from (and the device name when the child has two of the kind). */
.journal .j-source { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; color: var(--text-3); }
.journal .j-source svg { width: 14px; height: 14px; flex: none; }
.journal .j-source-name { color: var(--text-3); font-family: var(--font); }
.journal .j-sum-row { display: flex; align-items: flex-end; gap: 8px; margin-top: 2px; }
.journal .j-sum-row .gold-chip { margin-inline-start: auto; }
.journal .j-summary { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 6px; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.journal .j-summary svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--text-3); }
.journal .j-summary.calm svg { color: var(--success-ink); }
.journal .j-summary.support svg { color: var(--gold-ink); }
.journal .j-chev { flex: none; color: var(--text-3); padding-top: 2px; }
.journal .j-chev svg { width: 18px; height: 18px; transition: transform var(--dur) var(--ease); display: block; }
.journal .j-entry[data-open="true"] .j-chev svg { transform: rotate(180deg); }

/* loading skeleton */
.journal .j-skel-day { width: 90px; height: 16px; margin: 10px 4px 2px; }
.journal .j-skel-glyph { width: 40px; height: 40px; border-radius: 12px; flex: none; }
.journal .j-skel .j-main { gap: 8px; padding-top: 4px; }

/* expanded body */
.journal .j-body { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 12px; animation: jOpen var(--dur) var(--ease); }
@keyframes jOpen { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.journal .j-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.journal .j-fact { background: var(--surface-2); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.journal .j-fact-k { font-size: 12.5px; color: var(--text-3); line-height: 1.3; }
.journal .j-fact-v { font-family: var(--font-num); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); line-height: 1.35; }
.journal .j-fact.gold .j-fact-v { color: var(--gold-ink); }
.journal .j-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 14px; color: var(--text-2); }
.journal .j-status > svg { width: 17px; height: 17px; flex: none; }
.journal .j-status.ok > svg { color: var(--success-ink); }
.journal .j-status .num { font-family: var(--font-num); }
.journal .j-tag { display: inline-flex; align-items: center; border-radius: 999px; padding: 1px 8px; background: var(--surface-3); color: var(--text-2); font-size: 12.5px; font-weight: 600; margin-inline-start: 6px; }
.journal .j-note { font-size: 14px; color: var(--text-2); background: var(--surface-2); border-radius: var(--radius-sm); padding: 10px 12px; }
.journal .j-sub { font-size: 13px; font-weight: 700; color: var(--text-3); letter-spacing: .02em; margin-top: 4px; }

/* the passage on paper */
.journal .passage.j-paper {
  background: var(--paper); border: 1px solid var(--paper-line); box-shadow: none; border-radius: 16px;
  padding: 18px 18px 20px; color: var(--text); font-family: var(--font-read); font-size: 17px; line-height: 30px;
  max-width: 34em;
}
.journal .j-paper-label { font-family: var(--font); font-size: 12.5px; font-weight: 600; color: var(--text-3); margin-bottom: 6px; }
.journal .passage.j-paper h3 { font-family: var(--font-read); font-size: 20px; font-weight: 700; line-height: 1.8; margin: 0 0 8px; }
.journal .passage.j-paper p { position: relative; margin: 0 0 12px; padding-inline-start: 28px; line-height: 1.9; text-wrap: pretty; }
.journal .passage.j-paper p:last-child { margin-bottom: 0; }
.journal .passage.j-paper .pnum {
  position: absolute; inset-inline-start: 0; top: .35em; width: 20px; text-align: center; margin: 0; padding: 0;
  background: none; border-radius: 0; font-family: var(--font-num); font-size: 12px; font-weight: 500; color: var(--text-3); vertical-align: baseline; line-height: 1.6;
}

/* questions */
.journal .q-card.j-q {
  background: var(--surface-2); box-shadow: none; border-radius: 16px; padding: 14px; gap: 12px;
  border: 1px solid var(--border);
}
.journal .j-q .q-head { display: flex; gap: 10px; align-items: flex-start; }
.journal .j-q .q-num {
  width: 26px; height: 26px; border-radius: 8px; background: var(--surface-3); color: var(--text-2);
  font-family: var(--font-num); font-weight: 600; font-size: 13px; display: grid; place-items: center; flex: none; margin-top: 2px;
}
.journal .j-q .q-prompt { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; line-height: 1.6; }
.journal .j-q .q-prompt.read { font-family: var(--font-read); font-size: 17px; line-height: 1.8; }
.journal .j-support {
  flex: none; margin-top: 0 !important; display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 2px 8px;
  background: var(--gold-soft); color: var(--gold-ink); font-size: 12.5px; font-weight: 600; white-space: nowrap; margin-top: 2px;
}
.journal .j-support svg { width: 14px; height: 14px; }
.journal .j-q .q-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: -4px 0 0; margin-inline-start: 36px; font-size: 13.5px; }
.journal .j-result { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--text-2); }
.journal .j-result svg { width: 15px; height: 15px; }
.journal .j-result.ok { color: var(--success-ink); }
.journal .j-kind { color: var(--text-3); }
.journal .j-expr, .journal .expr.j-expr {
  font-family: var(--font-num); font-size: 30px; font-weight: 600; letter-spacing: .01em; font-variant-numeric: tabular-nums;
  text-align: center; direction: ltr; unicode-bidi: isolate; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 12px; overflow-wrap: anywhere;
}

.journal .j-q .opts { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.journal .j-q .opt {
  display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 12px; padding: 10px 12px; min-height: 48px; font-family: var(--font-read); font-size: 16px; line-height: 1.6;
}
.journal .j-q .opt .mark {
  width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--surface-3); color: var(--text-2); font-family: var(--font); font-size: 13px; font-weight: 700;
}
.journal .j-q .opt .mark svg { width: 15px; height: 15px; }
.journal .j-q .opt .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.journal .j-q .opt .tags { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.journal .j-q .opt.correct { border-color: color-mix(in srgb, var(--success) 55%, transparent); background: var(--success-soft); }
.journal .j-q .opt.correct .mark { background: var(--success); color: var(--on-success); }
.journal .j-q .opt.chosen { border-color: var(--border-strong); border-style: dashed; }
.journal .j-opt-tag { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font); font-size: 12px; font-weight: 600; white-space: nowrap; border-radius: 999px; padding: 1px 8px; }
.journal .j-opt-tag svg { width: 13px; height: 13px; }
.journal .j-opt-tag.ok { color: var(--success-ink); padding-inline-start: 0; }
.journal .j-opt-tag.picked { background: var(--surface-3); color: var(--text-2); }
.journal .j-answer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; font-size: 15px; }
.journal .j-answer svg { width: 17px; height: 17px; color: var(--success-ink); }
.journal .j-answer b { font-family: var(--font-num); font-size: 17px; font-weight: 600; }

/* timeline of attempts, hints and guided steps */
.journal .j-tl-wrap { display: flex; flex-direction: column; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.journal .j-tl-head { font-size: 13.5px; font-weight: 700; color: var(--text-2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.journal .j-solve { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-2); }
.journal .j-solve svg { width: 13px; height: 13px; opacity: .8; }
.journal .j-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.journal .j-timeline .tl { display: flex; gap: 10px; position: relative; padding-bottom: 12px; }
.journal .j-timeline .tl:last-child { padding-bottom: 0; }
.journal .j-timeline .tl::before { content: ""; position: absolute; top: 26px; bottom: 2px; inset-inline-start: 11px; width: 2px; background: var(--border); border-radius: 1px; }
.journal .j-timeline .tl:last-child::before { display: none; }
.journal .j-timeline .tl .ic { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none; position: relative; z-index: 1; background: var(--surface-3); color: var(--text-2); }
.journal .j-timeline .tl .ic svg { width: 14px; height: 14px; }
.journal .j-timeline .tl.ok .ic { background: var(--success-soft); color: var(--success-ink); }
.journal .j-timeline .tl.no .ic { background: var(--surface-3); color: var(--text-2); }
.journal .j-timeline .tl.tl-hint .ic { background: var(--gold-soft); color: var(--gold-ink); }
.journal .j-timeline .tl.shown .ic { background: transparent; color: var(--text-3); box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.journal .j-step-n { font-family: var(--font-num); font-size: 12px; font-weight: 600; }
.journal .j-timeline .tx { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.5; padding-top: 1px; }
.journal .j-timeline .tx b { font-weight: 650; }
.journal .j-timeline .when { font-size: 12.5px; color: var(--text-3); margin-top: 1px; }
.journal .j-timeline .when .ltr { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.journal .j-timeline .ans { font-weight: 600; }
.journal .j-timeline .ans .ltr, .journal .j-step-expr { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.journal .j-timeline .htext { display: block; margin-top: 4px; padding: 6px 10px; border-radius: 10px; background: var(--gold-soft); color: var(--text); font-family: var(--font-read); line-height: 1.8; }
.journal .j-q .explain { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; font-size: 14.5px; line-height: 1.7; color: var(--text-2); }
.journal .j-q .explain b { color: var(--text); }

.journal .j-foot { display: flex; justify-content: center; padding-top: 4px; }
.journal .j-delete { color: var(--coral-ink); min-height: 44px; }
.journal .j-delete:hover { background: var(--coral-soft); }

/* filter sheet */
.j-sheet .j-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.j-sheet .j-opt {
  min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text-2); font-size: 14.5px; font-weight: 600; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.j-sheet .grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.j-sheet input[type="date"] { min-width: 0; width: 100%; min-height: 48px; font-size: 16px; }
.j-sheet .j-opt[aria-checked="true"], .j-sheet .j-opt[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.j-sheet .j-opt:active { transform: scale(.97); }

@media (prefers-reduced-motion: reduce) {
  .journal .j-body { animation: none; }
  .journal .j-chev svg { transition: none; }
}

/* ================================================================== welcome / login / register (views/auth.js) */

.welcome.auth-screen { background: var(--bg); }
.welcome.auth-screen .welcome-hero {
  background: var(--bg); color: var(--text); border-radius: 0; overflow: visible;
  padding: calc(var(--safe-top) + 56px) 24px 8px; text-align: center;
}
.welcome.auth-screen .logo { width: 72px; height: 72px; border-radius: 18px; margin: 0 auto 20px; box-shadow: var(--shadow-sm); }
.welcome.auth-screen .logo img { width: 72px; height: 72px; border-radius: 18px; }
.welcome.auth-screen .welcome-hero h1 { font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
.welcome.auth-screen .welcome-hero p { font-size: 16px; line-height: 24px; color: var(--text-2); opacity: 1; margin: 8px auto 0; max-width: 22em; }
.welcome.auth-screen .welcome-body { gap: 16px; padding-top: 24px; }
.welcome.auth-screen .welcome-features { display: flex; flex-direction: column; gap: 0; padding: 4px 16px; }
.welcome.auth-screen .feature { display: flex; gap: 14px; align-items: center; padding: 12px 0; }
.welcome.auth-screen .feature + .feature { border-top: 1px solid var(--border); }
.welcome.auth-screen .feature b { display: block; font-size: 16px; font-weight: 650; }
.welcome.auth-screen .feature span:not(.g-ic) { font-size: 14px; line-height: 20px; color: var(--text-2); }
.welcome.auth-screen .welcome-actions { display: flex; flex-direction: column; gap: 8px; }

.auth-screen.auth-wrap { max-width: 440px; margin: 0 auto; padding-top: 8px; gap: 16px; }
.auth-screen .auth-head { padding: 8px 4px 0; }
.auth-screen .auth-title { font-size: 28px; line-height: 34px; font-weight: 700; margin: 0; }
.auth-screen .auth-lead { margin-top: 6px; color: var(--text-2); font-size: 16px; line-height: 24px; }
.auth-screen .auth-card { padding: 20px 16px; }
.auth-screen .field > label { font-size: 14px; font-weight: 600; color: var(--text); padding-inline-start: 2px; }
.auth-screen .input { min-height: 48px; font-size: 16px; border-radius: var(--radius-sm); border-width: 1px; }
.auth-screen .input[dir="ltr"] { text-align: left; }
.auth-screen .input[dir="ltr"]:not(.totp-input)::placeholder { text-align: left; }
.auth-screen .totp-input::placeholder { text-align: center; letter-spacing: .3em; opacity: .5; }
.auth-screen .totp-input { font-family: var(--font-num); font-size: 24px; font-weight: 600; letter-spacing: .3em; text-align: center !important; font-variant-numeric: tabular-nums; }
.auth-screen .totp-field { padding: 12px; margin: 0 -4px; border-radius: var(--radius-sm); background: var(--accent-soft); }
.auth-screen .totp-field .hint { color: var(--text-2); }
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 76px; padding-left: 16px; }
.pw-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%); min-height: 40px; min-width: 64px; padding: 0 10px;
  border: 0; border-radius: 10px; background: transparent; color: var(--accent-ink); font-size: 14px; font-weight: 600;
}
.pw-toggle:hover { background: var(--accent-soft); }
.auth-screen .auth-trust { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; color: var(--text-3); }
.auth-screen .auth-trust svg { width: 14px; height: 14px; }
.auth-screen .auth-switch { text-align: center; font-size: 15px; color: var(--text-2); }
.auth-screen .auth-switch a { font-weight: 600; display: inline-block; padding: 10px 4px; }

/* ================================================================== pairing & linking (views/pair.js, views/link.js) */

.pair-flow { gap: 16px; }
.pair-intro { padding: 4px 4px 0; }
.pair-title { font-size: 28px; line-height: 34px; font-weight: 700; }
.pair-lead { margin-top: 6px; color: var(--text-2); font-size: 16px; line-height: 24px; }
.pair-foot { padding: 0 4px; font-size: 13.5px; line-height: 20px; color: var(--text-3); text-align: center; }

.pair-how { display: flex; flex-direction: column; gap: 16px; padding: 16px; }
.pair-art { display: flex; justify-content: center; }
.pair-art svg { width: 100%; max-width: 300px; height: auto; display: block; }
.pair-art .pa-frame { fill: var(--surface); stroke: var(--border-strong); stroke-width: 2; }
.pair-art .pa-screen { fill: var(--surface-2); stroke: var(--border); stroke-width: 1; }
.pair-art .pa-stroke { stroke: var(--border-strong); stroke-width: 3; }
.pair-art .pa-link { stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 2 7; }
.pair-art .pa-badge { fill: var(--accent); }
.pair-art .pa-check { stroke: var(--on-accent); stroke-width: 2.4; }
.pair-art .pa-code { fill: var(--text); font-family: var(--font-num); font-weight: 600; font-size: 21px; letter-spacing: 1px; font-variant-numeric: tabular-nums; direction: ltr; }
.pair-art .pa-code-pc { font-size: 22px; }
.pair-art.idle .pa-badge, .pair-art svg.pa-idle .pa-badge { fill: var(--accent-soft); }
.pair-art svg.pa-idle .pa-check { stroke: var(--accent-ink); }

.pair-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pair-steps li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; }
.pair-steps li + li { border-top: 1px solid var(--border); }
.pair-steps .ps-n {
  width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-ink); font-family: var(--font-num); font-weight: 600; font-size: 14px;
}
.pair-steps .ps-body { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.pair-steps .ps-text { font-size: 15.5px; line-height: 24px; }
.pair-steps .ps-text b { font-weight: 650; }
.where-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--text-3); line-height: 18px; }
.where-tag svg { width: 14px; height: 14px; }
.where-tag.phone { color: var(--accent-ink); }

.pair-form-card { padding: 20px 16px; }
.pair-form .input { min-height: 48px; font-size: 16px; border-width: 1px; }
.pair-form .input.code {
  font-family: var(--font-num); font-size: 24px; font-weight: 600; letter-spacing: .12em; text-align: center; direction: ltr;
  min-height: 60px; font-variant-numeric: tabular-nums;
}
.pair-form .input.code::placeholder { color: var(--text-3); opacity: .6; letter-spacing: .12em; }
.pair-form .field > label { font-size: 14px; font-weight: 600; color: var(--text); }

.pair-alt {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; min-height: 64px; border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow); color: inherit; text-decoration: none;
}
.pair-alt .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pair-alt b { font-weight: 650; }
.pair-alt-sub { font-size: 13.5px; line-height: 20px; color: var(--text-2); }
.pair-alt:active { background: var(--surface-2); }

.pair-revoked { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius); background: var(--coral-soft); color: var(--text); }
.pair-revoked b { color: var(--coral-ink); display: block; margin-bottom: 2px; }
.pair-revoked p { font-size: 14px; line-height: 21px; color: var(--text-2); }
.pair-revoked .g-ic.danger { background: var(--surface); }

/* states: waiting, done, rejected, expired */
.pair-state { display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding: 24px 20px; text-align: center; }
.pair-state-title { font-size: 22px; line-height: 28px; font-weight: 700; }
.pair-state-text { font-size: 15.5px; line-height: 24px; color: var(--text-2); }
.pair-state .btn { margin-top: 4px; }
.state-glyph { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; margin: 0 auto 2px; background: var(--accent-soft); color: var(--accent-ink); }
.state-glyph svg { width: 30px; height: 30px; }
.state-glyph.danger { background: var(--coral-soft); color: var(--coral-ink); }
.state-glyph.warn { background: var(--warning-soft); color: var(--warning-ink); }
.state-glyph.muted { background: var(--surface-3); color: var(--text-2); }
.pair-state .success-mark { width: 72px; height: 72px; margin: 0 auto 2px; background: var(--success-soft); color: var(--success-ink); box-shadow: none; }
.pair-state .success-mark svg { width: 36px; height: 36px; }

.sas-block { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sas-label { font-size: 13px; font-weight: 600; color: var(--text-3); }
.sas.sas-big {
  display: flex; justify-content: center; align-items: baseline; gap: 18px; width: 100%;
  font-family: var(--font-num); font-size: 48px; line-height: 1.1; font-weight: 600; letter-spacing: .06em; font-variant-numeric: tabular-nums;
  direction: ltr; unicode-bidi: isolate; background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 16px; padding: 18px 8px; margin: 0; white-space: pre;
}
.sas.sas-big .sas-g { display: inline-block; }
.match-note {
  display: flex; gap: 10px; align-items: flex-start; text-align: start; padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--text); font-size: 14.5px; line-height: 22px;
}
.match-note > svg { width: 20px; height: 20px; flex: none; color: var(--accent-ink); margin-top: 1px; }
.match-note b { font-weight: 650; }

.wait-line { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); }
.wait-bar { position: relative; width: 120px; height: 4px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.wait-bar > span { position: absolute; top: 0; bottom: 0; width: 40%; border-radius: 2px; background: var(--accent); animation: waitSlide 1.8s var(--ease) infinite; }
@keyframes waitSlide { from { inset-inline-start: -40%; } to { inset-inline-start: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .wait-bar > span { animation: waitFade 2.4s ease-in-out infinite !important; animation-duration: 2.4s !important; animation-iteration-count: infinite !important; inset-inline-start: 30%; }
  @keyframes waitFade { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
}

.pair-actions { display: flex; flex-direction: column; gap: 8px; }
.pair-pcs { text-align: start; }
.link-req .card-title { font-size: 17px; font-weight: 650; }
.g-ic.muted { background: var(--surface-3); color: var(--text-2); }

/* ================================================================== settings (views/settings.js and its sub-screens) */

.settings-page { gap: 20px; }
:is(.settings-page, .child-nav) .set-group { display: flex; flex-direction: column; gap: 8px; scroll-margin-top: calc(var(--safe-top) + 72px); }
:is(.settings-page, .child-nav) .set-group > .section-title { padding: 0 16px; font-size: 13px; font-weight: 600; color: var(--text-3); letter-spacing: .02em; }
:is(.settings-page, .child-nav) .set-note, .settings-page .set-lead { padding: 0 16px; font-size: 13px; line-height: 19px; color: var(--text-3); }
.settings-page .set-lead { font-size: 14px; color: var(--text-2); padding: 0 4px; }

/* one calm glyph treatment instead of coloured gradient tiles */
.settings-page .row-icon { background: var(--surface-3); color: var(--text-2); width: 36px; height: 36px; border-radius: 10px; }
.settings-page .row-icon.ri-coral { background: var(--coral-soft); color: var(--coral-ink); }
.settings-page .row-icon.ri-green { background: var(--success-soft); color: var(--success-ink); }
.settings-page .row-icon.ri-amber { background: var(--warning-soft); color: var(--warning-ink); }

:is(.settings-page, .child-nav) .list-row.set-row { min-height: 60px; text-decoration: none; color: inherit; }
:is(.settings-page, .child-nav) .list-row.set-row .grow { display: flex; flex-direction: column; gap: 1px; }
:is(.settings-page, .child-nav) .list-row .label { font-weight: 550; font-size: 16px; line-height: 22px; }
:is(.settings-page, .child-nav) .list-row .sub { font-size: 13.5px; line-height: 19px; color: var(--text-2); white-space: normal; }
:is(.settings-page, .child-nav) .list-row .value { font-size: 14.5px; color: var(--text-3); max-width: 36%; overflow: hidden; text-overflow: ellipsis; }
:is(.settings-page, .child-nav) .list-row + .list-row::before { inset-inline-start: 64px; }
:is(.settings-page, .child-nav) .list-row .avatar.sm { width: 36px; height: 36px; font-size: 15px; }
.settings-page a.list-row:active, .settings-page button.list-row:active { background: var(--surface-2); }
.settings-page .list-row .chev { transform: none; }

.settings-main .set-account { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.settings-main .set-avatar {
  width: 52px; height: 52px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-ink); font-size: 22px; font-weight: 700;
}
.settings-main .set-account .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.settings-main .set-account-name { font-size: 19px; font-weight: 700; line-height: 26px; }
.settings-main .set-account-mail { font-size: 14px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; }
.settings-main .set-account-mail .ltr { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.settings-main .set-account-2fa { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--text-3); margin-top: 2px; }
.settings-main .set-account-2fa svg { width: 15px; height: 15px; }
.settings-main .set-account-2fa.on { color: var(--success-ink); }
.settings-page .set-loading { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--surface); border-radius: var(--radius); }
.settings-page .set-signout { display: flex; flex-direction: column; gap: 4px; }
.settings-page .set-logout { color: var(--coral-ink); }
.settings-page .set-forget { color: var(--text-2); font-weight: 550; font-size: 15px; }
.settings-page .set-version { text-align: center; font-size: 12.5px; color: var(--text-3); padding-bottom: 8px; }

.settings-page .setting-row .label { font-weight: 550; }
.settings-page .setting-row .sub { color: var(--text-2); }
.settings-page .set-select { width: 120px; flex: none; }
.settings-page .set-select.wide { width: 136px; }
.settings-page .set-select .input { min-height: 44px; font-size: 16px; padding-block: 8px; border-width: 1px; }

.settings-page .set-disclosure {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 16px; border: 0;
  background: transparent; color: inherit; text-align: start; font: inherit; cursor: pointer;
}
.settings-page .set-disclosure .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.settings-page .set-disclosure .label { font-weight: 600; }
.settings-page .set-disclosure .sub { font-size: 13.5px; color: var(--text-2); line-height: 19px; }
.settings-page .set-disclosure .chev { width: 18px; height: 18px; color: var(--text-3); transition: transform var(--dur) var(--ease); }
.settings-page .set-disclosure[aria-expanded="true"] .chev { transform: rotate(180deg); }
.settings-page .set-disclosure:active { background: var(--surface-2); }
.settings-page .set-advanced { display: flex; flex-direction: column; gap: 8px; }
.settings-page .set-advanced[hidden] { display: none; }

.devices-page .device-row { align-items: flex-start; }
.devices-page .device-row .g-ic { margin-top: 2px; }
.devices-page .device-row .label { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.devices-page .this-device { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--accent-ink); background: var(--accent-soft); border-radius: 999px; padding: 1px 8px; }
.devices-page .this-device svg { width: 13px; height: 13px; }
.devices-page .revoke-btn { align-self: center; flex: none; min-height: 44px; }
/* rows with a stepper or a select: the text gets the full width, the control sits below at the end */
.settings-page .setting-row:has(> .stepper), .settings-page .setting-row:has(> .set-select) { flex-wrap: wrap; row-gap: 8px; }
.settings-page .setting-row:has(> .stepper) > .grow, .settings-page .setting-row:has(> .set-select) > .grow { flex: 1 1 100%; }
.settings-page .setting-row > .stepper, .settings-page .setting-row > .set-select { margin-inline-start: auto; }
.settings-page .input { min-height: 48px; font-size: 16px; }

/* ================================================================== "שליחת נתונים לשיפור" (views/share-data.js) */
.share-data { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; position: relative; }
.list > * + .share-data::before { content: ""; position: absolute; top: 0; inset-inline: 16px; border-top: 1px solid var(--border); }
.share-data .share-head { display: flex; align-items: center; gap: 12px; }
.share-data .share-head .grow { flex: 1; min-width: 0; }
.share-data .share-head .label { font-weight: 550; }
.share-data .share-head .sub { font-size: 13.5px; color: var(--text-2); line-height: 1.4; margin-top: 2px; }
.share-data .share-privacy { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 13px; line-height: 19px; color: var(--text-2); }
.share-data .share-privacy svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--text-3); }
.share-data .share-details summary {
  display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none;
  font-size: 14.5px; font-weight: 600; color: var(--accent-ink);
}
.share-data .share-details summary::-webkit-details-marker { display: none; }
.share-data .share-details summary .grow { flex: 1; }
.share-data .share-details summary .chev { width: 18px; height: 18px; color: var(--text-3); transition: transform var(--dur) var(--ease); }
.share-data .share-details[open] summary .chev { transform: rotate(180deg); }
.share-data .share-details summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 8px; }
.share-data .share-lists { display: flex; flex-direction: column; gap: 10px; padding-bottom: 4px; }
.share-data .share-list-title { font-size: 13px; font-weight: 600; color: var(--text-2); margin-top: 4px; }
.share-data .share-off-note { margin: 4px 0 0; font-size: 13px; line-height: 19px; color: var(--text-3); }
.share-data .share-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; font-size: 13px; color: var(--text-3); }
.share-data .share-download { margin-inline-start: auto; }
@media (prefers-reduced-motion: reduce) { .share-data .share-details summary .chev { transition: none; } }

/* ================================================================== games (views/games.js) */
.games-page .row-main { all: unset; box-sizing: border-box; display: flex; gap: 12px; align-items: center; flex: 1; min-width: 0; min-height: 44px; cursor: pointer; border-radius: 10px; }
.games-page .row-main:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.games-page .row-main .grow { min-width: 0; }
.games-page .setting-row .sub { overflow-wrap: anywhere; }
.games-page .games-add2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.games-page .games-add2 .btn { padding: 0 8px; }
.games-page .set-group > .btn.block { margin-top: 4px; }

/* ================================================================== "בן / בת" (child.js): the one-time prompt card above the tabs */
.gender-prompt { margin-bottom: 16px; border: 1px solid var(--color-accent-soft); background: var(--color-accent-subtle); box-shadow: none; }
.gender-prompt .card-title { color: var(--color-text); }
.gender-prompt .small.muted { color: var(--color-text-secondary); }
.gender-prompt .gender-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.gender-prompt .gender-actions .btn { min-height: 44px; background: var(--color-surface); }

/* ================================================================== "תאריך לידה" (birthday.js) */
.date-input { direction: ltr; text-align: right; min-height: 48px; font-size: 16px; }
.gender-prompt .birthday-prompt { padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--color-accent-soft); }
.gender-prompt .birthday-prompt .label { font-weight: 500; color: var(--color-text); }
.gender-prompt .birthday-prompt .date-input { background: var(--color-surface); }
.hours-line.birthday-line { color: var(--color-text); font-weight: 500; }
.hours-line.birthday-line svg { color: var(--color-primary); }
.grade-suggest { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: var(--color-accent-subtle); color: var(--color-text); font-size: 14px; line-height: 1.45; }
.grade-suggest svg { width: 18px; height: 18px; flex: none; color: var(--color-primary); }
.grade-suggest .btn { flex: none; }

/* ================================================================== updates (settings.js: "בדיקת עדכונים" / "עדכון עכשיו") */
.updates-block .label.failed { color: var(--color-error-text); display: flex; align-items: flex-start; gap: 6px; }
.updates-block .label.failed svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.updates-block .updates-actions { gap: 8px; }
.updates-block .updates-actions .btn { flex: 1 1 150px; }

/* ================================================================== navigation structure (docs/UX-IA.md) */

/* the child's overview: the section rows, grouped (the same rows as the settings) */
.child-nav { gap: 20px; }
.child-sections { display: flex; flex-direction: column; gap: 8px; }
.child-sections > .section-head + * { margin-top: 0; }
.child-requests { margin-bottom: 4px; }
/* a section page of a child: a lead line, then titled groups */
.child-section .section-body { gap: 20px; }
.child-section .set-group > .card, .child-section .set-group > section.card { margin: 0; }
.child-section .grade-effects { color: var(--color-primary-strong); font-weight: 550; }
.child-section .hours-row { flex-wrap: wrap; row-gap: 8px; }
.child-section .hours-row > .grow { flex: 1 1 100%; }
.child-section .hours-row > .row { margin-inline-start: auto; }
.set-group > .set-group, .set-group > .list + .list { margin-top: 0; }
/* the account row of the settings: an initial instead of a glyph */
.settings-main .set-account .set-avatar { width: 36px; height: 36px; font-size: 16px; }
.settings-page .theme-block .head .faint { color: var(--color-text-tertiary); }
/* the save bar: one pattern on every page that edits settings */
.save-host:empty { display: none; }
.save-bar .btn.neutral { flex: 0 0 auto; }
.leave-sheet .actions { display: flex; flex-direction: column; gap: 8px; }
/* "איפה נמצא מה" */
.help-search { position: relative; display: flex; align-items: center; }
.help-search > svg { position: absolute; inset-inline-start: 14px; width: 20px; height: 20px; color: var(--color-text-tertiary); pointer-events: none; }
.help-search .input { padding-inline-start: 44px; width: 100%; }
.help-page .help-row .sub { color: var(--color-text-tertiary); }
/* a one-line explanation under a group title */
.set-desc { padding: 0 16px; margin-top: -4px; font-size: 13px; line-height: 18px; color: var(--color-text-tertiary); }
/* the date fields of "הוספת חופשה": one per line, never wider than the sheet (iOS date inputs have a wide intrinsic size) */
.dates-sheet .field { min-width: 0; }
.dates-sheet .date-input { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; display: block; -webkit-appearance: none; appearance: none; text-align: start; }
.vacations .add-vacation { margin-top: 4px; }
.games-shared .games-page { gap: 20px; }

/* ===== "סיכום שימוש" (js/views/usage-report.js): period tabs and arrows, the gross time, one stacked bar, the parts ===== */
.ur-nav { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.ur-nav:empty { display: none; }
.ur-nav .icon-btn:disabled { opacity: .35; pointer-events: none; }
.ur-period { flex: 1; min-width: 0; text-align: center; font-weight: 600; font-size: 16px; }
.ur-child-head { display: flex; align-items: center; gap: 10px; padding: 2px 2px 0; }
.ur-child-name { margin: 0; font-size: 20px; font-weight: 700; color: var(--text); line-height: 1.2; }
.ur-gross { display: flex; flex-direction: column; gap: 2px; }
.ur-gross-v { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 28px; font-weight: 600; line-height: 1.2; color: var(--text); }
.ur-gross-k { font-size: 13px; color: var(--text-2); }
.ur-bar { display: flex; gap: 2px; height: 14px; border-radius: 7px; overflow: hidden; background: var(--surface-3); }
.ur-bar > span { display: block; flex-basis: 0; min-width: 3px; background: var(--c); }
.ur-legend { font-size: 13px; }
.ur-legend b { font-weight: 600; color: var(--text); }
.usage-report .legend i { background: var(--c); }
.ur-idle { color: var(--text-3); }
.ur-sec-head { display: flex; align-items: center; gap: 8px; }
.ur-sec-head .card-title { margin: 0; }
.ur-sec-v { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.ur-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex: none; }
.ur-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 12px; }
.ur-days.month { gap: 2px; }
.ur-days.month .ud-area { max-width: 10px; border-radius: 2px; }
.ur-days.month .ud-area > span { border-radius: 2px; margin-top: 1px; }
.ur-days.month .ud-day { font-size: 11px; min-height: 16px; }
.ur-hint { padding: 0 4px; }

/* ===== Computer offline with an old saved status (home card, child hero): nothing time-dependent shown as current ===== */
.pill.status.offline { background: var(--color-background-2); color: var(--color-text-secondary); }
.pill.status.offline svg { color: var(--color-text-muted); }
.ring.stale .fill { stroke: var(--color-text-muted); }
.ring.stale .earn { stroke: var(--color-accent-soft); }
.ring.stale .big { color: var(--color-text-tertiary); }
.ring .asof { font-size: 11px; color: var(--color-text-tertiary); margin-top: 2px; white-space: nowrap; }
.hours-line.stale-line svg { color: var(--color-text-muted); }
.hours-line.stale-line .asof { white-space: nowrap; }
/* "עכשיו בטלפון: Roblox · נספר · כבר 12 דק׳" (phone home card and child page): the minutes never split. */
.hours-line.now-line .num { white-space: nowrap; }

/* ================================================================== a new family: the QR link from the PC (auth.js, pair.js, start.js) */

.invite-welcome .welcome-body { gap: 16px; }
.invite-card { padding: 4px 16px; }
.invite-card .ps-title { font-size: 15.5px; font-weight: 650; line-height: 22px; }
.invite-card .ps-text { color: var(--text-2); font-size: 14.5px; line-height: 22px; }

.start-page { gap: 16px; }
.start-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 4px 4px 0; }
.start-hero .success-mark { width: 72px; height: 72px; margin: 4px auto 2px; }
.start-hero .success-mark svg { width: 36px; height: 36px; }
.start-head { padding: 4px 4px 0; }
.start-title { font-size: 24px; line-height: 30px; font-weight: 700; }
.start-lead { margin-top: 6px; color: var(--text-2); font-size: 15.5px; line-height: 24px; }
.start-how { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.start-how .card-title { font-size: 17px; line-height: 24px; font-weight: 650; }
.start-installed, .start-tip { display: flex; align-items: flex-start; gap: 12px; padding: 16px; }
.start-installed b, .start-tip b { font-weight: 650; }
.start-actions { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.start-kid-pick { padding: 0 4px; }
.start-item .start-ic { background: var(--surface-3); color: var(--text-2); }
.start-item.done .start-ic { background: var(--success-soft); color: var(--success-ink); }
.start-item.done .label { color: var(--text-2); }
.start-note { padding: 8px 4px 0; font-size: 13.5px; line-height: 20px; color: var(--text-3); }

/* ================================================================== the child's Android phone (views/phone.js) */

.computer-chip .cc-kind { width: 16px; height: 16px; color: var(--color-text-secondary); flex: none; }

/* home: the phone's warnings (special access off, not reporting, a new game, a changed clock) */
.phone-alerts .alert-row { color: var(--color-text); text-decoration: none; }
.alert-row .alert-ic.warn { background: var(--color-warning-soft); color: var(--color-warning-text); }
.alert-row .alert-ic.info { background: var(--color-accent-subtle); color: var(--color-primary-strong); }
.alert-row .alert-ic.danger { background: var(--color-error-soft); color: var(--color-error-text); }
/* A phone's alert with its ✕ ("הסרת ההתראה"): the button sits over the row's end but is a sibling of the link, so
   tapping it never opens the phone; the link keeps room for it. */
.phone-alert-item { position: relative; }
.phone-alert-item > .alert-row { padding-inline-end: 52px; }
.phone-alert-item > .alert-dismiss { position: absolute; inset-inline-end: 4px; top: 50%; margin-top: calc(var(--tap) / -2); color: var(--color-text-tertiary); }
.phone-alert-item > .alert-dismiss:hover { background: var(--color-background-2); color: var(--color-text-secondary); }
.phone-alert-item > .alert-dismiss:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 0; }
.phone-alert-item > .alert-dismiss:disabled,
.phone-alert-item > .alert-dismiss[aria-busy="true"] { opacity: .45; }
.phone-alert-item > .alert-dismiss svg { width: 18px; height: 18px; }

/* "מצב הטלפון" */
.phone-page { gap: 20px; }
.phone-card { display: flex; flex-direction: column; gap: 12px; }
.phone-head { display: flex; align-items: center; gap: 12px; }
.phone-head .grow { flex: 1; min-width: 0; }
.phone-name { font-size: 17px; line-height: 24px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone-model { font-size: 13.5px; line-height: 20px; color: var(--color-text-secondary); }
.phone-conn { flex: none; }
.phone-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.phone-fact { display: flex; flex-direction: column; gap: 2px; background: var(--color-background-2); border-radius: var(--radius-sm); padding: 10px 12px; min-width: 0; }
.phone-fact .k { font-size: 13px; color: var(--color-text-tertiary); }
.phone-fact .v { font-size: 14.5px; line-height: 20px; font-weight: 550; }
.phone-fact .warn-text { color: var(--color-warning-text); font-weight: 600; }
.phone-silent { line-height: 20px; }
.perm-row { align-items: flex-start; }
.perm-row > .g-ic { margin-top: 2px; }
.perm-row .perm-state { flex: none; margin-top: 2px; }
.perm-fix { margin-top: 8px; padding: 8px 10px; border-radius: var(--radius-xs); background: var(--color-background-2); font-size: 13.5px; line-height: 20px; color: var(--color-text); }
.perm-fix b { font-weight: 650; }
.phone-battery .hint-line { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 21px; color: var(--color-text-secondary); }
.phone-battery .hint-line svg { width: 20px; height: 20px; flex: none; color: var(--color-primary); margin-top: 1px; }
.phone-battery b { color: var(--color-text); font-weight: 600; }
.phone-events li[data-read="false"] { border-inline-start: 3px solid var(--color-primary); }

/* "אפליקציות שנספרות" */
.apps-search .input { font-size: 16px; }
.apps-count { padding: 0 4px; font-size: 14px; color: var(--color-text-secondary); }
.apps-count .num { font-weight: 600; color: var(--color-text); }
.app-row .app-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.app-row .app-tag { padding: 1px 8px; font-size: 12px; }
.app-row[data-protected="true"] .g-ic { background: var(--color-background-2); color: var(--color-text-tertiary); }
.app-row[data-protected="true"] .label { color: var(--color-text-secondary); }
.phone-events li { background: var(--color-surface); box-shadow: var(--shadow); }
.computer-chip.phone { max-width: min(58vw, calc(100vw - 180px)); }
.computer-chip .cc-kind.quiet { color: var(--color-text-muted); }

/* ------------------------------------------------------------------ "PlayQuest פעיל בטלפון" (views/phone-power.js) */
.power-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; min-height: 64px; border-radius: var(--radius-sm); background: var(--color-accent-subtle); border: 1px solid var(--color-border); }
.power-card.page { border-radius: var(--radius); background: var(--color-surface); box-shadow: var(--shadow); border: 0; padding: 16px; }
.power-card.off { background: var(--color-background-2); }
.power-card .grow { flex: 1; min-width: 0; }
.power-ic { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--color-primary-button); color: var(--color-primary-text); }
.power-ic svg { width: 22px; height: 22px; }
.power-card.off .power-ic { background: var(--color-surface); color: var(--color-text-secondary); box-shadow: inset 0 0 0 1px var(--color-border); }
.power-title { font-weight: 600; font-size: var(--fs-lg); line-height: 1.3; }
.power-sub { font-size: 13.5px; color: var(--color-text-secondary); line-height: 1.45; margin-top: 2px; }
.power-sub .power-state { color: var(--color-text); font-weight: 600; }
.power-off-note { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--color-background-2); color: var(--color-text); font-size: 14px; line-height: 1.45; }
.power-off-note > svg { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--color-text-secondary); }
.power-off-note .grow { flex: 1; min-width: 0; }
.power-off-sub { color: var(--color-text-secondary); font-size: 13.5px; margin-top: 2px; }
.off-sheet .off-text { font-weight: 500; color: var(--color-text); }
.off-sheet .off-until[hidden] { display: none; }
.custody-now { display: flex; align-items: center; gap: 10px; padding: 12px 16px; font-size: 14px; line-height: 1.45; }
.custody-now > svg { width: 20px; height: 20px; flex: none; color: var(--color-primary); }
.custody-row .label { font-weight: 500; line-height: 1.45; }
.custody-x { flex: none; min-width: 44px; min-height: 44px; }
.custody-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.custody-pair .field { min-width: 0; }
.sec-custody .date-input { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; display: block; -webkit-appearance: none; appearance: none; text-align: start; }
.sec-custody .set-group > .btn.block { margin-top: 8px; }

/* "מצב אכיפה – למה לא נחסם?" on "מצב הטלפון" (overview.diag) */
.diag-reason { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-sm); font-size: 14.5px; line-height: 22px; background: var(--color-background-2); color: var(--text); }
.diag-reason > svg { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--text-2); }
.diag-reason[data-tone="ok"] { background: var(--color-success-soft); }
.diag-reason[data-tone="ok"] > svg { color: var(--color-success-text); }
.diag-reason[data-tone="warn"] { background: var(--color-warning-soft); }
.diag-reason[data-tone="warn"] > svg { color: var(--color-warning-text); }
.diag-row { align-items: flex-start; }
.diag-row .sub { overflow-wrap: anywhere; }
.diag-v { flex: none; max-width: 45%; text-align: end; font-weight: 600; font-size: 15px; line-height: 22px; }

/* ================================================================== "סריקת קוד חיבור" (qr-scan.js) and where to pair */

.btn .scan-ic, .scan-btn svg, .elsewhere-scan svg, .elsewhere-hint-scan svg { width: 20px; height: 20px; }
.scan-body { display: flex; flex-direction: column; gap: 12px; }
.scan-view {
  position: relative; width: 100%; max-width: 360px; margin: 0 auto; aspect-ratio: 1 / 1; border-radius: var(--radius);
  overflow: hidden; background: var(--color-background-2);
}
.scan-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scan-frame { position: absolute; inset: 16%; border-radius: 16px; border: 3px solid var(--color-surface); box-shadow: 0 0 0 999px var(--color-scrim); }
.scan-status { min-height: 40px; text-align: center; font-size: 14.5px; line-height: 20px; color: var(--text-2); }
.scan-problem { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 8px 4px; }
.scan-problem-title { font-size: 18px; line-height: 24px; font-weight: 650; }
.scan-problem p { font-size: 15px; line-height: 23px; color: var(--text-2); }
.scan-problem p b { color: var(--text); font-weight: 600; }
.scan-problem .scan-problem-alt { font-size: 13.5px; line-height: 20px; color: var(--text-3); }
.scan-body > .actions { margin-top: 4px; }
.scan-sheet .actions [hidden] { display: none; }

.pair-scan-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.pair-scan-text { display: flex; flex-direction: column; gap: 2px; font-size: 14.5px; line-height: 21px; color: var(--text-2); }
.pair-scan-text b { font-size: 16px; color: var(--text); font-weight: 650; }

/* devices paired in another browser or app of this account */
.elsewhere { display: flex; flex-direction: column; gap: 8px; }
.elsewhere > .section-title { padding: 0 16px; font-size: 13px; font-weight: 600; color: var(--text-3); letter-spacing: .02em; }
.elsewhere .set-note { padding: 0 16px; font-size: 13px; line-height: 19px; color: var(--text-3); }
.elsewhere-row { align-items: flex-start; }
.elsewhere-row .row-icon { width: 36px; height: 36px; border-radius: 10px; }
.elsewhere-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.elsewhere-actions .elsewhere-scan { margin-top: 0; }
/* "הסרת המכשיר": the last block of a device's own page */
.remove-device { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.remove-device > .section-title { padding: 0 16px; font-size: 13px; font-weight: 600; color: var(--text-3); letter-spacing: .02em; }
.remove-device .set-note { padding: 0 16px; font-size: 13px; line-height: 19px; color: var(--text-3); margin: 0; }
.my-device { align-items: center; }
.elsewhere-row .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.elsewhere-row .label { font-weight: 550; line-height: 22px; }
.elsewhere-scan { margin-top: 6px; margin-inline-start: -12px; color: var(--accent-ink); gap: 6px; }
.sheet .elsewhere { margin-top: 16px; }
.sheet .elsewhere > .section-title, .sheet .elsewhere .set-note { padding: 0 4px; }
.sheet .elsewhere .list { box-shadow: none; background: var(--surface-2); border-radius: 14px; }

.elsewhere-hint {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--radius);
  background: var(--color-accent-subtle); color: var(--text);
}
.elsewhere-hint .row-icon { background: var(--color-surface); color: var(--accent-ink); width: 36px; height: 36px; border-radius: 10px; }
.elsewhere-hint .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; line-height: 1.45; }
.elsewhere-hint b { font-weight: 600; }
.elsewhere-hint .small.muted { color: var(--text-2); }
.elsewhere-hint .btn { margin-top: 6px; gap: 6px; }

/* the pairing link opened in a browser tab: "עדיף לחבר מתוכה" */
.pair-where { text-align: start; }
.pair-where .state-glyph { margin: 0 auto 2px; }
.pair-where .pair-state-title, .pair-where > .pair-state-text { text-align: center; }
.pair-where-steps { margin-top: 2px; }
.pair-where-steps .ps-text { font-size: 15px; line-height: 23px; }
.pair-where-note { font-size: 13.5px; line-height: 20px; color: var(--text-3); text-align: center; }
.pair-where-note b { font-weight: 600; color: var(--text-2); }
.invite-where .welcome-body { gap: 16px; }

/* "הגדרת הטלפון של הילד/ה" (views/phone-setup.js) */
.phone-setup { gap: 16px; }
.ps-head { display: flex; flex-direction: column; gap: 6px; padding: 4px 4px 0; }
.ps-head .setup-steps { margin-bottom: 10px; }
.ps-head .setup-steps li { font-size: 12px; }
.ps-title { font-size: 24px; line-height: 30px; font-weight: 700; }
.ps-lead { font-size: 15px; line-height: 23px; color: var(--text-2); }
.ps-card { padding: 20px 16px; }
.ps-form .input { min-height: 48px; font-size: 16px; }
.ps-form .field > label { font-size: 14px; font-weight: 600; }
.ps-form .pin-input { font-family: var(--font-num); font-size: 24px; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }
.ps-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.ps-actions .btn svg { width: 18px; height: 18px; }
.ps-list { box-shadow: none; background: var(--surface-2); border-radius: 14px; }
.ps-row { flex-wrap: wrap; row-gap: 8px; }
.ps-row .grow { flex: 1 1 160px; min-width: 0; }
.ps-apps { box-shadow: none; background: var(--surface-2); border-radius: 14px; }
.ps-apps .app-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ps-loading { padding: 8px 0; }
.ps-done { text-align: center; }
.ps-facts { display: flex; flex-direction: column; border-radius: 14px; background: var(--surface-2); text-align: start; }
.ps-fact { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; font-size: 15px; }
.ps-fact + .ps-fact { border-top: 1px solid var(--border); }
.ps-fact .k { color: var(--text-2); }
.ps-fact .v { font-weight: 600; }

/* "של מי הטלפון הזה?" and "הטלפון שויך ל…" (views/phone-setup.js, js/kids.js) */
.ps-choice { display: flex; flex-direction: column; gap: 14px; }
.ps-kids { box-shadow: none; background: var(--surface-2); border-radius: 14px; overflow: hidden; }
.ps-kid { min-height: 64px; }
.ps-kid .sub { font-size: 13.5px; line-height: 20px; color: var(--text-2); }
.ps-kid .chev { width: 18px; height: 18px; color: var(--text-3); flex: none; }
.ps-kid.loading { opacity: .6; pointer-events: none; }
.ps-existing svg { width: 18px; height: 18px; }
.ps-linked .ps-fact { align-items: center; justify-content: flex-start; }
.ps-linked .ps-fact .v { margin-inline-start: auto; text-align: end; }
.ps-change, .ps-change-gap { min-width: 56px; min-height: 36px; padding: 0 8px; margin: -6px 0; flex: none; }
.ps-linked-note, .ps-own-time { text-align: start; }

/* "תומאס · במחשב ובטלפון" on the child's card (views/home.js) */
.cc-also { min-height: 40px; margin: -10px 0; background: none; border: 0; padding: 0; width: 100%; text-align: start; cursor: pointer; align-items: center; font: inherit; font-size: 13.5px; color: var(--text-2); }
.cc-also > svg { margin-top: 0; }
.cc-also .grow { flex: 1; min-width: 0; }
.cc-also-go { display: inline-flex; align-items: center; gap: 2px; color: var(--accent-ink); font-weight: 600; flex: none; }
.cc-also-go svg { width: 14px; height: 14px; color: inherit; margin-top: 0; }
.cc-also:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.banner.setup-unfinished { align-items: center; }

/* "המכשירים שלי" grouped by child (js/app.js openComputerSwitcher) */
.switch-groups { display: flex; flex-direction: column; gap: 16px; }
.switch-group-title { margin: 0 4px 6px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--text-2); }

/* "משפחה – הורים שמנהלים יחד" (views/family.js) */
.family-page .fam-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--surface-3); color: var(--text-2); font-size: 18px; font-weight: 700;
}
.family-page .fam-avatar.me { background: var(--accent-soft); color: var(--accent-ink); }
.family-page .fam-member .label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.family-page .fam-member .grow { min-width: 0; }
.family-page .fam-member .sub { overflow-wrap: anywhere; }
.family-page .fam-me-pill { padding: 1px 8px; font-size: 12px; }
.family-page .fam-empty { color: var(--text-2); font-size: 14px; line-height: 20px; }
.family-page .fam-approver .card-title, .family-page .fam-joiner .card-title { font-size: 17px; font-weight: 650; }
.family-page .fam-code-input { text-align: center; font-family: var(--mono); font-size: 20px; letter-spacing: .12em; min-height: 52px; }
.family-page .fam-code-input::placeholder { color: var(--text-3); opacity: .6; }
.family-page .fam-code-card { align-items: center; }
/* The QR stays dark on a light ground in both themes (every camera reads it), like Brush.QrInk / Brush.QrPaper on the PC. */
.family-page .fam-qr {
  width: min(232px, 70vw); aspect-ratio: 1; border-radius: var(--radius-sm); padding: 6px; margin: 0 auto;
  background: var(--color-surface); color: var(--color-text); box-shadow: inset 0 0 0 1px var(--border);
}
.family-page .fam-qr svg { display: block; width: 100%; height: 100%; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .family-page .fam-qr { background: var(--color-text); color: var(--color-background); box-shadow: none; }
}
:root[data-theme="dark"] .family-page .fam-qr { background: var(--color-text); color: var(--color-background); box-shadow: none; }
.family-page .fam-code {
  font-family: var(--font-num); font-size: 26px; line-height: 32px; font-weight: 600; letter-spacing: .06em;
  font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; user-select: all; -webkit-user-select: all;
}
.family-page .fam-joiner-card { display: flex; align-items: center; gap: 12px; text-align: start; padding: 12px; border-radius: var(--radius-sm); background: var(--surface-2); }
.family-page .fam-joiner-card .grow { min-width: 0; }
.family-page .fam-devices { text-align: start; box-shadow: none; background: var(--surface-2); border-radius: 14px; }
.family-page .fam-will-manage { text-align: start; }
.family-page .pair-state > .small.muted { text-align: center; }
.banner.family-hint .icon-btn { width: 36px; height: 36px; margin: -6px -6px -6px 0; color: inherit; flex: none; }
.banner.family-hint .icon-btn svg { width: 18px; height: 18px; }

/* ------------------------------------------------------------------ bottom nav: five tabs fit at 375px */
/* בית · יומן למידה · שימוש · בקשות · הגדרות — with a fifth tab, tighten the side padding and per-tab padding so every
   label stays readable and un-clipped on a narrow phone (grid-auto-columns:1fr already keeps the five from overflowing). */
.tabbar { padding-inline: calc(4px + var(--safe-right)) calc(4px + var(--safe-left)); }
.tabbar .tab { padding-inline: 1px; }
.tabbar .tab span { text-align: center; line-height: 1.2; }

/* "נעילת המחשב" on home (views/home.js): one compact row; while locked, the warning banner "המחשב נעול" with "שחרור" */
.lock-row {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding-block: 8px; padding-inline: 14px 10px;
  border-radius: 16px; background: var(--color-surface); box-shadow: var(--shadow);
}
.lock-row .grow { flex: 1; min-width: 0; }
.lock-row .label { display: block; font-size: 15px; font-weight: 600; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lock-row .sub { display: block; font-size: 13px; line-height: 18px; color: var(--color-text-secondary); }
.time-actions .computer-lock { margin-bottom: 12px; }
.lock-note { display: flex; align-items: flex-start; gap: 8px; }
.lock-note svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--color-text-tertiary); }
.computer-lock .btn { flex: none; min-height: var(--tap); gap: 6px; }
.computer-lock .btn svg { width: 18px; height: 18px; }
.hours-line.lock-line svg { color: var(--color-text-tertiary); }
/* A parent's lock is a decision, not a warning: neutral banner, and a dimmed ring with a lock instead of the time left. */
.banner.neutral { background: var(--surface-3); color: var(--text-2); }
.banner.neutral b { color: var(--color-text); }
.ring.locked .fill { stroke: var(--color-text-muted); }
.ring.locked .earn { stroke: var(--color-accent-soft); }
/* `.ring svg` turns the arc; the lock icon in the center stays upright. */
.ring .center .ring-lock { width: 30px; height: 30px; color: var(--color-text-tertiary); margin-bottom: 4px; transform: none; }