@font-face { font-family: "Baloo 2"; src: url("fonts/baloo-2-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Baloo 2"; src: url("fonts/baloo-2-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  color-scheme: light;
  --ink: #1c2541;
  --ink-soft: #55607f;
  --line: #e6e0d3;
  --paper: #ffffff;
  --bg: #fffaf0;
  --blue: #2f6bef;
  --blue-dark: #1f53c4;
  --blue-hover: #1f53c4;
  --ticket: #ffe7a3;
  --tomato: #e0452a;
  --green: #17885a;
  --topbar-bg: #1c2541;
  --topbar-fg: #c9d2ea;
  --th-bg: #fcf8ef;
  --pill-bg: #f2ede1;
  --pill-on-bg: #d8f2e6; --pill-on-fg: #0f6a44;
  --pill-warn-bg: #fde3dd; --pill-warn-fg: #a8321c;
  --pill-ticket-fg: #6b4e00;
  --input-bg: #ffffff; --input-border: #cfc8b8;
  --danger-border: #f0b4a7; --danger-hover: #fdeee9;
  --flash-ok-bg: #e3f6ec; --flash-ok-border: #a9dfc4; --flash-ok-fg: #0f5a3a;
  --flash-err-bg: #fde9e4; --flash-err-border: #f3b5a6; --flash-err-fg: #8e2a16;
  --shadow: rgba(28, 37, 65, .12);
  --focus: rgba(46, 111, 242, .35);
  --radius: 10px;
}

/* Dark theme: follows the device unless a theme is picked with the switch in the top bar. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  color-scheme: dark;
  --ink: #e6ebf7;
  --ink-soft: #9aa7c7;
  --line: #2c3a5e;
  --paper: #1a2440;
  --bg: #121a2e;
  --blue: #3f7bf5;
  --blue-dark: #8fb2ff;
  --blue-hover: #2a63d6;
  --ticket: #ffe7a3;
  --tomato: #ff7a5c;
  --green: #4cd394;
  --topbar-bg: #0b1122;
  --th-bg: #1f2a49;
  --pill-bg: #26324f;
  --pill-on-bg: #12382a; --pill-on-fg: #7fe0b0;
  --pill-warn-bg: #42201a; --pill-warn-fg: #ff9f88;
  --pill-ticket-fg: #5a4200;
  --input-bg: #141d35; --input-border: #3a4870;
  --danger-border: #6b3328; --danger-hover: #3a1c16;
  --flash-ok-bg: #11352a; --flash-ok-border: #1f5e45; --flash-ok-fg: #9ee8c3;
  --flash-err-bg: #3d1c16; --flash-err-border: #74352a; --flash-err-fg: #ffb6a6;
  --shadow: rgba(0, 0, 0, .45);
  --focus: rgba(143, 178, 255, .45);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e6ebf7;
  --ink-soft: #9aa7c7;
  --line: #2c3a5e;
  --paper: #1a2440;
  --bg: #121a2e;
  --blue: #3f7bf5;
  --blue-dark: #8fb2ff;
  --blue-hover: #2a63d6;
  --ticket: #ffe7a3;
  --tomato: #ff7a5c;
  --green: #4cd394;
  --topbar-bg: #0b1122;
  --th-bg: #1f2a49;
  --pill-bg: #26324f;
  --pill-on-bg: #12382a; --pill-on-fg: #7fe0b0;
  --pill-warn-bg: #42201a; --pill-warn-fg: #ff9f88;
  --pill-ticket-fg: #5a4200;
  --input-bg: #141d35; --input-border: #3a4870;
  --danger-border: #6b3328; --danger-hover: #3a1c16;
  --flash-ok-bg: #11352a; --flash-ok-border: #1f5e45; --flash-ok-fg: #9ee8c3;
  --flash-err-bg: #3d1c16; --flash-err-border: #74352a; --flash-err-fg: #ffb6a6;
  --shadow: rgba(0, 0, 0, .45);
  --focus: rgba(143, 178, 255, .45);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
}
h1, h2, h3 { font-family: "Baloo 2", system-ui, sans-serif; font-weight: 800; line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: 2rem; }
h2 { font-size: 1.35rem; margin-top: 1.6em; }
h3 { font-size: 1.1rem; }
a { color: var(--blue-dark); }
p { max-width: 70ch; }
.muted { color: var(--ink-soft); }
.small { font-size: .875rem; }

/* top bar */
.topbar {
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
  padding: .6rem 1.25rem; background: var(--topbar-bg); color: #fff;
}
.brand { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 1.3rem; color: var(--ticket); text-decoration: none; }
.topbar nav { display: flex; gap: .25rem; flex-wrap: wrap; flex: 1; }
.topbar nav a { color: var(--topbar-fg); text-decoration: none; padding: .35rem .7rem; border-radius: 6px; }
.topbar nav a:hover { color: #fff; background: rgba(255,255,255,.08); }
.topbar nav a[aria-current] { color: #1c2541; background: var(--ticket); }
.topbar .logout .link { color: var(--topbar-fg); }

.page { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
.narrow { max-width: 460px; margin: 8vh auto; padding: 0 1rem; }

.head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.head h1 { margin: 0; }

/* panels + tables */
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.25rem; margin-bottom: 1.25rem; }
.table-wrap { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; margin-bottom: 1.25rem; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .8rem; font-weight: 600; color: var(--ink-soft); background: var(--th-bg); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.actions { white-space: nowrap; text-align: right; }
td.actions form { display: inline; }
tr.off td { color: var(--ink-soft); }
.plus { color: var(--green); font-weight: 600; }
.minus { color: var(--tomato); font-weight: 600; }

.pill { display: inline-block; font-size: .78rem; padding: .05rem .5rem; border-radius: 999px; background: var(--pill-bg); color: var(--ink-soft); white-space: nowrap; }
.pill.on { background: var(--pill-on-bg); color: var(--pill-on-fg); }
.pill.warn { background: var(--pill-warn-bg); color: var(--pill-warn-fg); }
.pill.ticket { background: var(--ticket); color: var(--pill-ticket-fg); }

/* kid cards on overview */
.kid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.kid-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; text-decoration: none; color: inherit; display: block; }
.kid-card:hover { border-color: var(--blue); }
.kid-card .name { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 1.25rem; }
.kid-card .pts { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 2.2rem; line-height: 1; color: var(--blue-dark); }

.stats { display: flex; gap: 2rem; flex-wrap: wrap; }
.stats div { min-width: 110px; }
.stats b { display: block; font-family: "Baloo 2", sans-serif; font-size: 1.8rem; line-height: 1.1; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }
@media (max-width: 800px) { .two-col { grid-template-columns: 1fr; } }

/* forms */
label { display: block; font-weight: 600; margin-bottom: .25rem; }
.field { margin-bottom: 1rem; }
.hint { font-weight: 400; font-size: .85rem; color: var(--ink-soft); margin-top: .2rem; }
input[type=text], input[type=password], input[type=number], input[type=date], input[type=search], textarea, select {
  width: 100%; font: inherit; padding: .5rem .65rem; border: 1px solid var(--input-border); border-radius: 8px; background: var(--input-bg); color: var(--ink);
}
textarea { min-height: 5rem; resize: vertical; }
input:focus, textarea:focus, select:focus, button:focus-visible, a:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.check { display: flex; gap: .55rem; align-items: flex-start; font-weight: 400; }
.check input { margin-top: .3rem; width: 1.1rem; height: 1.1rem; flex: 0 0 auto; }
.inline { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; }
.inline .field { margin-bottom: 0; }
.radio-row { display: flex; gap: 1rem; }
.radio-row label { font-weight: 400; display: flex; gap: .35rem; align-items: center; }

.btn, button.btn {
  display: inline-block; font: inherit; font-weight: 600; border: 1px solid transparent; border-radius: 8px;
  padding: .5rem 1rem; cursor: pointer; text-decoration: none; background: var(--blue); color: #fff; line-height: 1.3;
}
.btn:hover { background: var(--blue-hover); }
.btn.secondary { background: var(--paper); color: var(--ink); border-color: var(--input-border); }
.btn.secondary:hover { border-color: var(--ink-soft); }
.btn.danger { background: var(--paper); color: var(--tomato); border-color: var(--danger-border); }
.btn.danger:hover { background: var(--danger-hover); }
.btn.small { padding: .25rem .6rem; font-size: .85rem; }
button.link { background: none; border: 0; padding: 0; font: inherit; color: var(--blue-dark); text-decoration: underline; cursor: pointer; }
.btn-row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }

.flash { padding: .65rem 1rem; border-radius: 8px; margin-bottom: 1rem; border: 1px solid; }
.flash-ok { background: var(--flash-ok-bg); border-color: var(--flash-ok-border); color: var(--flash-ok-fg); }
.flash-error { background: var(--flash-err-bg); border-color: var(--flash-err-border); color: var(--flash-err-fg); }

.empty { padding: 1.5rem; text-align: center; color: var(--ink-soft); }

@media (max-width: 700px) {
  .topbar { gap: .4rem 1rem; padding: .5rem 1rem; }
  .brand { flex: 1; }
  .topbar nav { order: 3; flex: 0 0 100%; flex-wrap: nowrap; overflow-x: auto; margin: 0 -.5rem; }
  .topbar nav a { white-space: nowrap; }
}
@media (max-width: 600px) {
  .page { padding: 1rem; }
  h1 { font-size: 1.6rem; }
  .hide-sm { display: none; }
}

/* chore search + schedule picker */
.search-row { display: flex; align-items: center; gap: .8rem; margin-bottom: .8rem; }
.search-row input { max-width: 340px; }
tr[hidden] { display: none; }
fieldset.field { border: 0; padding: 0; margin: 0 0 1rem; }
fieldset.field legend { font-weight: 600; margin-bottom: .35rem; padding: 0; }
.sub-field { margin-left: 1rem; padding-left: .9rem !important; border-left: 3px solid var(--line) !important; }
.day-picks { display: flex; gap: .4rem; flex-wrap: wrap; }
.day-pick { font-weight: 600; margin: 0; }
.day-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.day-pick span { display: inline-block; min-width: 3.2rem; text-align: center; padding: .4rem .6rem; border: 1px solid var(--input-border); border-radius: 8px; background: var(--input-bg); color: var(--ink); cursor: pointer; }
.day-pick input:checked + span { background: var(--blue); border-color: var(--blue); color: #fff; }
.day-pick input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 1px; }

/* Google / Apple sign-in */
.oauth-buttons { display: grid; gap: .55rem; margin: .4rem 0 0; }
.oauth-btn { display: block; text-align: center; padding: .6rem 1rem; }
.or-divider { display: flex; align-items: center; gap: .8rem; color: var(--ink-soft); font-size: .85rem; margin: 1rem 0; }
.or-divider::before, .or-divider::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.signin-methods { list-style: none; margin: 0 0 1rem; padding: 0; }
.signin-methods li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.logout-others { border-top: 1px solid var(--line); margin-top: 1.1rem; padding-top: .9rem; }
.signin-sub { font-family: "Baloo 2", system-ui, sans-serif; font-weight: 800; font-size: 1.05rem; margin: .2rem 0 .6rem; }

.kit-row { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line); display: flex; align-items: center; gap: .5rem; }
.new-address { display: flex; align-items: flex-start; gap: .7rem; margin-top: .6rem; }
.new-address .btn { flex: 0 0 auto; }
.new-address .hint { margin-top: .15rem; }
.info-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 2.3rem; height: 2.3rem; padding: 0;
  border-radius: 50%; border: 1px solid var(--input-border); background: var(--paper); color: var(--blue-dark); cursor: pointer;
}
.info-btn:hover { border-color: var(--blue); background: var(--bg); }
.info-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.modal.kit-modal { width: min(100% - 2rem, 580px); max-height: calc(100vh - 2rem); overflow-y: auto; }
.kit-steps { padding-left: 1.3rem; margin: .8rem 0; }
.kit-steps li { margin-bottom: .65rem; }
.kit-steps pre { margin: .4rem 0; padding: .55rem .7rem; background: var(--th-bg); border: 1px solid var(--line); border-radius: 8px; overflow-x: auto; font-size: .85rem; }
.kit-notes { font-size: .9rem; color: var(--ink-soft); padding-left: 1.1rem; margin: 0 0 .6rem; }
.kit-notes li { margin-bottom: .3rem; }
kbd { font-family: ui-monospace, Consolas, monospace; font-size: .8em; border: 1px solid var(--input-border); border-bottom-width: 2px; border-radius: 4px; padding: 0 .3em; background: var(--paper); }
.danger-zone { border-top: 1px solid var(--line); margin-top: 1.1rem; padding-top: .9rem; }
.modal {
  width: min(100% - 2rem, 440px); border: 1px solid var(--line); border-radius: 14px; padding: 1.3rem 1.4rem;
  background: var(--paper); color: var(--ink); box-shadow: 0 20px 50px var(--shadow);
}
.modal::backdrop { background: rgba(12, 18, 36, .55); }
.modal h3 { margin-top: 0; }
.modal-actions { justify-content: flex-end; margin-top: .4rem; }
.btn.danger-solid { background: var(--tomato); color: #fff; }
.btn.danger-solid:hover { filter: brightness(.92); }

/* chore folders */
.folders-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin-bottom: .6rem; }
.folders-head h3 { margin: 0; }
.folder-add { display: flex; gap: .5rem; }
.folder-add input { width: 230px; }
.folder-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; }
.folder-list li { display: flex; align-items: center; gap: .55rem; }
.folder-list form { display: contents; }
.folder-name { font-weight: 600; color: var(--ink); text-decoration: none; }
.folder-name:hover { text-decoration: underline; }
.folder-list li.is-off .folder-name { color: var(--ink-soft); }
.switch {
  position: relative; width: 2.5rem; height: 1.4rem; border-radius: 999px; border: 0; padding: 0; cursor: pointer;
  background: var(--input-border); transition: background .15s;
}
.switch-knob { position: absolute; top: .2rem; left: .2rem; width: 1rem; height: 1rem; border-radius: 50%; background: #fff; transition: transform .15s; }
.switch[aria-checked="true"] { background: var(--green); }
.switch[aria-checked="true"] .switch-knob { transform: translateX(1.1rem); }
@media (prefers-reduced-motion: reduce) { .switch, .switch-knob { transition: none; } }
.folder-row th { background: var(--bg); color: var(--ink); font-size: .95rem; padding-top: .8rem; white-space: normal; }
tbody.folder-group + tbody.folder-group .folder-row th { border-top: 1px solid var(--line); }
.folder-row-inner { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.folder-title { font-family: "Baloo 2", system-ui, sans-serif; font-weight: 800; font-size: 1.15rem; }
.folder-tools { margin-left: auto; display: flex; gap: .4rem; align-items: flex-start; }
.folder-more { position: relative; }
.folder-more summary { list-style: none; }
.folder-more summary::-webkit-details-marker { display: none; }
.folder-more-menu {
  position: absolute; right: 0; top: 2.2rem; z-index: 5; background: var(--paper); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 8px 24px var(--shadow); padding: .7rem; display: flex; flex-direction: column; gap: .6rem; width: 280px;
}
.folder-more-menu .inline input { flex: 1; }
tbody.folder-group.is-off tr:not(.folder-row) td { color: var(--ink-soft); }
tbody[hidden] { display: none; }

/* account bits in the top bar */
.account-link { color: var(--topbar-fg); text-decoration: none; font-size: .9rem; }
.account-link:hover { color: #fff; }
.switcher { position: relative; }
.switcher summary { list-style: none; cursor: pointer; }
.switcher summary::-webkit-details-marker { display: none; }
.switcher summary::after { content: " \25BE"; font-size: .9rem; }
.switcher-menu {
  position: absolute; top: 2.2rem; left: 0; z-index: 10; min-width: 220px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 8px 24px var(--shadow); padding: .35rem; display: flex; flex-direction: column;
}
.switcher-menu a { color: var(--ink); text-decoration: none; padding: .45rem .6rem; border-radius: 6px; }
.switcher-menu a:hover { background: var(--bg); }
.switcher-menu a[aria-current] { font-weight: 700; }
.copy-row { display: flex; gap: .5rem; align-items: center; }
.copy-row input { font-family: ui-monospace, Consolas, monospace; font-size: .85rem; }
.slug-preview { font-family: ui-monospace, Consolas, monospace; background: var(--bg); padding: .45rem .65rem; border-radius: 8px; overflow-wrap: anywhere; }

/* theme switch in the top bar */
.theme-toggle {
  background: none; border: 1px solid rgba(255,255,255,.18); color: var(--topbar-fg); font: inherit; font-size: .85rem;
  border-radius: 999px; padding: .2rem .7rem; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem;
}
.theme-toggle:hover { color: #fff; border-color: rgba(255,255,255,.4); }
.theme-toggle svg { width: 1rem; height: 1rem; }
/* the same switch on light headers (home page) */
.theme-toggle.on-light { color: var(--ink); border-color: var(--line); background: var(--paper); }
.theme-toggle.on-light:hover { color: var(--ink); border-color: var(--ink-soft); }
@media (max-width: 520px) { .theme-toggle.on-light #theme-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .theme-toggle.on-light { padding: .35rem; } }

/* plan, in the Your account box on the Account page */
.plan-now { border-top: 1px solid var(--line); padding-top: .8rem; margin-top: .8rem; }
.plan-now p { margin: 0 0 .3rem; }
.plan-locked { color: var(--flash-err-fg); font-weight: 600; }
.plan-sub { font-family: "Baloo 2", system-ui, sans-serif; font-weight: 800; font-size: 1.05rem; margin: 1.1rem 0 .6rem; }
.plan-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; }
.plan-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; }
.plan-card { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; margin-bottom: 0; }
.plan-card .btn { margin-top: auto; }
.plan-price { font-family: "Baloo 2", system-ui, sans-serif; font-weight: 800; font-size: 2.2rem; line-height: 1.1; margin: 0; }
.plan-price span { font-size: 1rem; font-weight: 700; color: var(--ink-soft); margin-left: .35rem; }

/* ---------------------------------------------------------------- home page (logged out) */
.lp { --lp-pad: max(1.25rem, calc((100% - 1080px) / 2)); }
.lp > * { padding-inline: var(--lp-pad); }
.lp h2 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); margin: 0 0 1.4rem; }
.lp-btn-big { padding: .75rem 1.4rem; font-size: 1.05rem; border-radius: 10px; }
.lp-fine { font-size: .9rem; color: var(--ink-soft); margin-top: .9rem; }

.lp-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.1rem; }
.lp-top-links { display: flex; align-items: center; gap: 1.1rem; }
.lp-top-links > a:not(.btn) { color: var(--ink); font-weight: 600; text-decoration: none; }
.lp-top-links > a:not(.btn):hover { text-decoration: underline; }

.lp-hero {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 3rem; align-items: center;
  padding-block: 3.5rem 5rem;
}
.lp-hero h1 { font-size: clamp(2.8rem, 6.4vw, 4.8rem); line-height: .98; letter-spacing: -.015em; margin-bottom: 1.3rem; }
.lp-accent { color: var(--brand-blue-text); }
.lp-hero-art { margin: 0; justify-self: stretch; }
.lp-hero-art img { display: block; width: 100%; height: auto; border-radius: 22px; }
.lp-lede { font-size: 1.2rem; color: var(--ink-soft); max-width: 34em; margin: 0 0 1.8rem; }

/* the kiosk screen, drawn the way kids see it */
.lp-screen {
  position: relative; justify-self: center; width: min(100%, 400px); aspect-ratio: 5 / 4;
  background: #2f6bef; border: 12px solid #1c2541; border-radius: 22px; color: #fff;
  font-family: "Baloo 2", system-ui, sans-serif; font-weight: 700; box-shadow: 0 18px 40px var(--shadow);
  display: flex; flex-direction: column;
}
/* the three promises */
.lp-promises { background: #1c2541; color: #c9d2ea; padding-block: 3.5rem 3.8rem; }
:root[data-theme="dark"] .lp-promises { background: #0b1122; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lp-promises { background: #0b1122; }
}
.lp-promises h2 { color: #fff; }
.lp-promise-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
.lp-promise-row h3 { color: var(--ticket); font-size: 1.55rem; margin-bottom: .45rem; }
.lp-promise-row p { margin: 0; }

/* kiosk mode */
.lp-kiosk {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 3.5rem; align-items: center;
  padding-block: 4.5rem 1rem;
}
.lp-kiosk h2 { max-width: 22ch; text-wrap: balance; }
.lp-kiosk-lede { font-size: 1.12rem; color: var(--ink-soft); margin: 0 0 1.3rem; }
.lp-kiosk-points { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.lp-kiosk-points li { padding-left: 1.1rem; border-left: 3px solid #ffe07a; color: var(--ink-soft); max-width: 52ch; }
.lp-kiosk-points b { color: var(--ink); }
.lp-kiosk-art { position: relative; justify-self: center; width: min(100%, 400px); padding-bottom: 1.5rem; }
.lp-screen-welcome { width: 100%; padding: .9rem 1.1rem 1.4rem; justify-content: flex-start; }
.lp-welcome-top { display: flex; justify-content: space-between; color: #d6e2ff; font-size: .85rem; }
.lp-welcome-title { margin: auto 0 1rem; text-align: center; font-size: 1.9rem; font-weight: 800; line-height: 1.05; max-width: none; }
.lp-names { display: flex; justify-content: center; gap: .7rem; margin-bottom: auto; }
.lp-names span {
  background: #ffe07a; color: #1c2541; border-radius: 12px; padding: .7rem 1rem; font-size: 1.15rem; font-weight: 800;
  box-shadow: 0 4px 0 #f2c440;
}
.lp-badge {
  position: absolute; left: -1.6rem; bottom: -.4rem; width: 9.5rem; padding: .55rem .7rem .6rem; border-radius: 10px;
  background: #fff; color: #1c2541; font-family: "Baloo 2", system-ui, sans-serif; transform: rotate(-8deg);
  box-shadow: 0 10px 22px var(--shadow); border-top: 6px solid #ffe07a;
}
.lp-badge b { display: block; font-size: 1.1rem; font-weight: 800; line-height: 1.1; margin-bottom: .3rem; }
.lp-badge-code { display: flex; gap: 3px; height: 1.6rem; }
.lp-badge-code i { flex: 0 0 2px; background: #1c2541; }
.lp-badge-code i:nth-child(3n) { flex-basis: 5px; }
.lp-badge-code i:nth-child(4n+1) { flex-basis: 1px; }

/* Raspberry Pi kiosk mode */
.lp-pi-wrap { padding-block: 3.5rem 1rem; }
.lp-pi {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 2.5rem; align-items: center;
  background: #2f6bef; color: #e3ebff; border-radius: 24px; padding: 2.6rem 2.8rem; box-shadow: 0 18px 40px var(--shadow);
}
.lp-eyebrow { margin: 0 0 .5rem; font-weight: 800; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: #ffe07a; }
.lp .lp-pi h2 { color: #fff; margin-bottom: .9rem; max-width: 20ch; text-wrap: balance; }
.lp-pi-lede { font-size: 1.1rem; margin: 0 0 1.5rem; max-width: 50ch; }
.lp-pi-steps { list-style: none; margin: 0 0 1.3rem; padding: 0; display: grid; gap: .8rem; counter-reset: pistep; }
.lp-pi-steps li { counter-increment: pistep; display: grid; grid-template-columns: 2.3rem 1fr; column-gap: .8rem; align-items: start; }
.lp-pi-steps li::before {
  content: counter(pistep); grid-row: span 2; display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%;
  background: #ffe07a; color: #1c2541; font: 800 1.25rem/1 "Baloo 2", sans-serif; box-shadow: 0 3px 0 #f2c440;
}
.lp-pi-steps b { color: #fff; font-size: 1.08rem; padding-top: .15rem; }
.lp-pi-steps span { color: #d6e2ff; }
.lp-pi-fine { margin: 0; font-size: .9rem; color: #c3d3ff; }
.lp-pi-art { position: relative; padding-bottom: 2.6rem; }
.lp-pi-board { display: block; width: 100%; height: auto; transform: rotate(-4deg); filter: drop-shadow(0 14px 20px rgba(12, 18, 36, .35)); }
.lp-pi-term {
  position: absolute; right: -.4rem; bottom: 0; transform: rotate(3deg); background: #1c2541; color: #e6ebf7;
  border-radius: 12px; padding: .75rem 1rem; font-family: ui-monospace, Consolas, monospace; font-size: .9rem;
  box-shadow: 0 12px 24px rgba(12, 18, 36, .4); border-top: 6px solid #ffe07a;
}
.lp-pi-term p { margin: 0; white-space: nowrap; }
.lp-pi-prompt { color: #ffe07a; }
.lp-pi-ok { color: #7cf29c; margin-top: .3rem !important; }

/* how it works: a real sequence, so it's numbered */
.lp-how { padding-block: 4.5rem 1rem; }
.lp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; counter-reset: step; }
.lp-steps li { counter-increment: step; display: grid; grid-template-columns: auto 1fr; column-gap: .65rem; align-items: center; align-content: start; }
.lp-steps li::before {
  content: counter(step); display: grid; place-items: center; width: 2.3rem; height: 2.3rem; flex: none;
  border-radius: 50%; background: var(--blue); color: #fff; font: 800 1.35rem/1 "Baloo 2", sans-serif;
}
.lp-steps h3 { font-size: 1.15rem; margin: 0; }
.lp-steps p { grid-column: 1 / -1; margin: .7rem 0 0; color: var(--ink-soft); }

.lp-features { padding-block: 4rem 1rem; }
.lp-feature-list { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 3rem; }
.lp-feature-list > div { border-top: 1px solid var(--line); padding: 1.1rem 0 1.4rem; }
.lp-feature-list dt { font-weight: 700; font-size: 1.08rem; margin-bottom: .2rem; }
.lp-feature-list dd { margin: 0; color: var(--ink-soft); max-width: 46ch; }

.lp-pricing { padding-block: 4rem 1rem; }
.lp-price-row { display: grid; grid-template-columns: repeat(2, minmax(0, 320px)); gap: 1.25rem; }
.lp-price { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 1.3rem 1.4rem; }
.lp-price h3 { font-size: 1.3rem; margin-bottom: .2rem; }
.lp-price p { margin: .3rem 0 0; color: var(--ink-soft); }
.lp-price .plan-price { color: var(--ink); margin: .1rem 0 .3rem; }

.lp-end { padding-block: 4.5rem 5rem; text-align: center; }
.lp-end h2 { margin-bottom: 1.2rem; }

.lp-foot { display: flex; justify-content: space-between; gap: 1rem; padding-block: 1.4rem 2rem; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: .9rem; }
.lp-foot a { color: var(--ink-soft); }

@media (max-width: 860px) {
  .lp-hero { grid-template-columns: 1fr; gap: 2.5rem; padding-block: 2rem 3.5rem; }
  .lp-hero-art { display: none; }  /* phones: the headline and buttons are enough */
  .lp-screen { width: min(100% - 1.5rem, 400px); aspect-ratio: auto; margin-bottom: 2rem; }
  .lp-promise-row, .lp-feature-list { grid-template-columns: 1fr; gap: 1.8rem; }
  .lp-kiosk { grid-template-columns: 1fr; gap: 2.5rem; padding-block: 3.5rem 1rem; }
  .lp-kiosk-art { order: 2; width: min(100% - 1.5rem, 400px); }
  .lp-badge { left: -.8rem; }
  .lp-feature-list { gap: 0; }
  .lp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-pi { grid-template-columns: 1fr; padding: 2rem 1.4rem; gap: 2rem; }
  .lp-pi-art { width: min(100%, 360px); justify-self: center; }
}
@media (max-width: 520px) {
  .lp-top-links .btn { display: none; }
  .lp-steps, .lp-price-row { grid-template-columns: 1fr; }
  .lp-hero .btn-row .btn { flex: 1 1 100%; text-align: center; }
}

/* ---------------------------------------------------------------- logo (see templates/_brand.html) */
:root { --brand-blue-text: #2f6bef; }
:root[data-theme="dark"] { --brand-blue-text: #6f9bff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --brand-blue-text: #6f9bff; } }
.logo { display: inline-flex; align-items: center; gap: .4em; text-decoration: none; font-family: "Baloo 2", system-ui, sans-serif;
        font-weight: 800; line-height: 1; letter-spacing: -.01em; white-space: nowrap; }
.logo img { width: auto; height: 1.45em; flex: none; }
.logo-word { padding-top: .08em; }
.logo-primary .logo-a { color: var(--ink); }
.logo-primary .logo-b { color: var(--brand-blue-text); }
.logo-reversed .logo-a, .logo-reversed .logo-b { color: #fff; }
.logo-sm { font-size: 1.25rem; }
.logo-md { font-size: 1.6rem; }
.logo-lg { font-size: 2.4rem; }
.brand { display: inline-flex; align-items: center; gap: .45rem; }
.brand-mark { flex: none; display: block; }
.auth-top { display: flex; justify-content: center; padding: 2.2rem 1rem 0; }
.auth-top + .narrow { margin-top: 1.6rem; }
.lp-foot .logo { font-size: 1.1rem; }

/* Account > Kiosk screens */
.screen-approve { margin-top: .75rem; }
.screen-approve .code-input { text-transform: uppercase; letter-spacing: .12em; font-weight: 700; width: 9rem; }
.screen-list { list-style: none; margin: 1rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.screen-list li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.screen-list form { margin: 0; }
.kit-links { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-top: .9rem; }
.kit-links .hint { margin: 0; }

/* ------------------------------------------------ setup helper (onboarding) */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wizard { max-width: 720px; margin: 0 auto; }
.wizard h1 { margin: .2rem 0 .4rem; }
.wizard h2 { font-size: 1.15rem; margin: 0; }
.wiz-lede { font-size: 1.05rem; color: var(--ink-soft); margin: 0 0 1.4rem; }
.wiz-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.wiz-count { margin: 0; font-size: .85rem; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }
.wiz-exit { font-size: .9rem; color: var(--ink-soft); }
.wiz-steps { list-style: none; display: flex; gap: .35rem; padding: 0; margin: .6rem 0 1.4rem; }
.wiz-steps li { flex: 1; min-width: 0; font-size: .8rem; color: var(--ink-soft); border-top: 4px solid var(--line); padding-top: .35rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wiz-steps li.done { border-color: var(--green); }
.wiz-steps li.done a { color: inherit; }
.wiz-steps li.current { border-color: var(--blue); color: var(--ink); font-weight: 700; }

.wiz-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.2rem; }
.wiz-choice {
  display: flex; flex-direction: column; gap: .35rem; text-align: left; font: inherit; color: var(--ink);
  background: var(--paper); border: 2px solid var(--line); border-radius: 14px; padding: 1.2rem 1.25rem;
  cursor: pointer; text-decoration: none; transition: border-color .12s, transform .12s;
}
.wiz-choice:hover { border-color: var(--blue); transform: translateY(-1px); }
.wiz-choice:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.wiz-choice.primary { border-color: var(--blue); box-shadow: 0 6px 18px var(--shadow); }
.wiz-choice-title { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 1.35rem; line-height: 1.1; }
.wiz-choice.primary .wiz-choice-title { color: var(--blue-dark); }
.wiz-choice-text { color: var(--ink-soft); font-size: .95rem; }

.age-grid { border: 0; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
.age-card {
  position: relative; display: flex; flex-direction: column; gap: .15rem; cursor: pointer;
  background: var(--paper); border: 2px solid var(--line); border-radius: 14px; padding: 1rem 1rem 1rem 3rem;
}
.age-card input { position: absolute; left: 1rem; top: 1.15rem; width: 1.25rem; height: 1.25rem; accent-color: var(--blue); }
.age-card:has(input:checked) { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 7%, var(--paper)); }
.age-card:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.age-card-label { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 1.2rem; line-height: 1.2; }
.age-card-hint { color: var(--ink-soft); font-size: .9rem; }
.wiz-privacy { font-size: .9rem; color: var(--ink-soft); background: var(--paper); border: 1px dashed var(--line); border-radius: var(--radius); padding: .7rem .9rem; }

.wiz-have { margin: -.6rem 0 1rem; }
.kid-rows { display: flex; flex-direction: column; gap: .6rem; margin-bottom: .8rem; }
.kid-row { display: grid; grid-template-columns: 1fr 10rem; gap: .2rem .8rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem .9rem .1rem; }
.kid-row .field { margin-bottom: .7rem; }
.kid-row.has-error { border-color: var(--tomato); }
.row-error { grid-column: 1 / -1; margin: -.3rem 0 .7rem; color: var(--tomato); font-size: .9rem; }
.pin-input { letter-spacing: .25em; font-variant-numeric: tabular-nums; }
.kid-rows.pins-off .pin-field { opacity: .45; }
.wiz-nopins { margin-top: 1rem; }
.wiz-nopins .hint { display: block; }

.pick-group { margin-bottom: 1.3rem; }
.pick-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .45rem; }
.pick-list { list-style: none; margin: 0; padding: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.pick-list li + li { border-top: 1px solid var(--line); }
.pick-list label { display: flex; align-items: center; gap: .8rem; padding: .6rem .9rem; cursor: pointer; }
.pick-list label:hover { background: var(--th-bg); }
.pick-list input { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; accent-color: var(--blue); }
.pick-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pick-name { font-weight: 600; }
.pick-meta { font-size: .85rem; color: var(--ink-soft); }
.pick-list li:has(input:not(:checked)) .pick-name { color: var(--ink-soft); }
.gem-pill { flex: 0 0 auto; font-weight: 700; font-size: .9rem; background: var(--pill-bg); border-radius: 999px; padding: .1rem .6rem; white-space: nowrap; }

.wiz-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.2rem; }
.wiz-actions.sticky { position: sticky; bottom: 0; background: var(--bg); padding: .8rem 0; border-top: 1px solid var(--line); }
.link-quiet { color: var(--ink-soft); }
.wiz-next { padding-left: 1.2rem; }
.wiz-next li { margin-bottom: .9rem; }
.wiz-next li > b:first-child { display: block; margin-bottom: .1rem; }   /* the step title on its own line */

@media (max-width: 640px) {
  .wiz-choices, .age-grid { grid-template-columns: 1fr; }
  .kid-row { grid-template-columns: 1fr 7rem; }
  .wiz-steps li { font-size: 0; }          /* just the bars on a phone */
  .wiz-steps li.current { font-size: .8rem; }
}

/* Settings sections */
.subnav { display: flex; gap: .3rem; border-bottom: 2px solid var(--line); margin: -.25rem 0 1.25rem; overflow-x: auto; }
.subnav a { padding: .5rem .95rem; color: var(--ink-soft); text-decoration: none; font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; }
.subnav a:hover { color: var(--ink); }
.subnav a[aria-current="page"] { color: var(--blue-dark); border-bottom-color: var(--blue); }
.input-suffix { display: flex; align-items: center; gap: .5rem; }
.input-suffix input { width: 7rem; }
.bonus-amount { transition: opacity .15s; }
.bonus-amount.is-off { opacity: .5; }

/* Chore form: card background picker (looks come from chore-themes.css) */
.theme-picker { border: 0; padding: 0; }
.theme-picker legend { font-weight: 600; margin-bottom: .2rem; }
.theme-group-label { margin: .7rem 0 .35rem; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.theme-group { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.6rem, 1fr)); gap: .5rem; }
.theme-option { position: relative; cursor: pointer; }
.theme-option input { position: absolute; opacity: 0; pointer-events: none; }
.theme-swatch {
  display: flex; align-items: flex-end; height: 3.6rem; padding: .35rem .55rem; border-radius: 9px;
  font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: .95rem; line-height: 1.1;
  border: 2px solid transparent; box-shadow: 0 2px 0 rgba(0,0,0,.18); transition: transform .1s;
}
.theme-swatch.theme-plain { background: #ffe07a; color: #1c2541; }
.theme-option:hover .theme-swatch { transform: translateY(-1px); }
.theme-option input:checked + .theme-swatch { border-color: var(--paper); box-shadow: 0 0 0 3px var(--blue), 0 2px 0 rgba(0,0,0,.18); }
.theme-option input:focus-visible + .theme-swatch { box-shadow: 0 0 0 3px var(--focus), 0 0 0 5px var(--blue); }
.style-pill { font-size: .75rem; padding: .05rem .45rem; border-radius: 999px; vertical-align: middle; font-weight: 700; }
.swatch-label { background: rgba(255,255,255,.88); color: #1c2541; border-radius: 6px; padding: .05rem .4rem; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.theme-plain .swatch-label { background: none; padding: 0; }

/* System admin (operators) */
.op-toolbar { display: flex; justify-content: space-between; align-items: center; gap: .8rem 1.2rem; flex-wrap: wrap; margin-bottom: 1rem; }
.op-filters { display: flex; gap: .4rem; flex-wrap: wrap; }
.op-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); text-decoration: none; font-size: .9rem; font-weight: 600; }
.op-chip span { font-size: .78rem; color: var(--ink-soft); background: var(--pill-bg); border-radius: 999px; padding: 0 .45rem; }
.op-chip[aria-current] { background: var(--blue); border-color: var(--blue); color: #fff; }
.op-chip[aria-current] span { background: rgba(255,255,255,.25); color: #fff; }
.op-tools { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.op-tools input[type=search], .op-toolbar > input[type=search] { width: 17rem; max-width: 100%; }
.op-sort { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; color: var(--ink-soft); }
.op-sort select { width: auto; }
.op-table td { vertical-align: top; }
.op-table .actions { white-space: nowrap; }
.op-table .actions form { display: inline-block; margin-right: .3rem; }
.op-name { font-weight: 700; color: var(--ink); }
.op-back { margin: 0 0 .4rem; }
.op-back a { color: var(--ink-soft); text-decoration: none; }
.op-family-title { font-size: 1.6rem; margin: 0; }
.op-facts, .op-stats { margin: 0; display: grid; gap: .45rem; }
.op-facts div { display: grid; grid-template-columns: 8rem 1fr; gap: .5rem; }
.op-facts dt { color: var(--ink-soft); }
.op-facts dd { margin: 0; overflow-wrap: anywhere; }
.op-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-bottom: .8rem; }
.op-stats div { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem .75rem; }
.op-stats dt { font-size: .8rem; color: var(--ink-soft); }
.op-stats dd { margin: 0; font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 1.5rem; line-height: 1.1; }
.op-list { list-style: none; margin: 0; padding: 0; }
.op-list li { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: .55rem 0; border-top: 1px solid var(--line); }
.op-list li:first-child { border-top: 0; padding-top: 0; }
.op-plan { margin-bottom: .8rem; }
.danger-panel { border-color: var(--danger-border); }
@media (max-width: 640px) { .op-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field-label { display: block; font-weight: 600; margin-bottom: .35rem; }
.theme-current { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.theme-current .theme-swatch { width: 11rem; height: 3.2rem; }
.modal.theme-modal { width: min(100% - 2rem, 640px); max-height: calc(100vh - 2rem); overflow-y: auto; }
.theme-sets { border: 0; padding: 0; margin: 0 0 .8rem; }
.theme-modal .theme-group-label:first-of-type { margin-top: .9rem; }
@media (max-width: 700px) {
  /* System admin tables become cards on a phone */
  .op-table thead { display: none; }
  .op-table tr { display: grid; grid-template-columns: 1fr auto; gap: .25rem .8rem; padding: .8rem .9rem; border-top: 1px solid var(--line); }
  .op-table tr:first-child { border-top: 0; }
  .op-table td { display: block; padding: 0; border: 0; }
  .op-table td:nth-child(1) { grid-column: 1; }
  .op-table td:nth-child(3) { grid-column: 2; grid-row: 1; text-align: right; }
  .op-table td:nth-child(2), .op-table td:nth-child(4), .op-table td:nth-child(5), .op-table td.actions { grid-column: 1 / -1; }
  .op-table td.actions { margin-top: .4rem; white-space: normal; }
  .op-table td.empty { grid-column: 1 / -1; }
  .op-accounts td:nth-child(3) { grid-column: 1 / -1; grid-row: auto; text-align: left; }
  .op-accounts td:nth-child(4) { grid-column: 2; grid-row: 1; text-align: right; }
}
.sub-check { margin: .6rem 0 0 1.65rem; }
.sub-check.is-off { opacity: .5; }
/* setup helper: badges step */
.badge-choices { border: 0; padding: 0; margin: 0 0 .8rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.badge-choice {
  position: relative; display: flex; flex-direction: column; gap: .35rem; cursor: pointer;
  background: var(--paper); border: 2px solid var(--line); border-radius: 14px; padding: 1rem 1rem 1.1rem;
}
.badge-choice input { position: absolute; top: 1rem; right: 1rem; width: 1.2rem; height: 1.2rem; accent-color: var(--blue); }
.badge-choice:has(input:checked) { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 7%, var(--paper)); }
.badge-choice:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.badge-choice-icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 12px; background: var(--ticket); color: #1c2541; }
.badge-choice-title { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 1.15rem; line-height: 1.15; padding-right: 1.4rem; }
.badge-choice-text { color: var(--ink-soft); font-size: .92rem; }
@media (max-width: 640px) { .badge-choices { grid-template-columns: 1fr; } }
.modal.tip-modal { width: min(100% - 2rem, 500px); }
.modal.tip-modal p { line-height: 1.5; }
.modal.tip-modal h3 { font-size: 1.35rem; margin-bottom: .6rem; }
/* Settings > Gems: Chore Assist */
.assist-options { transition: opacity .15s; }
.assist-options.is-off { opacity: .5; }
.assist-choice { border: 0; padding: 0; margin: 0 0 .9rem; min-width: 0; }
.assist-choice legend { font-weight: 600; margin-bottom: .45rem; padding: 0; }
.assist-row { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .75rem; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 10px; margin-bottom: .5rem; cursor: pointer; font-weight: 400; }
.assist-row.is-picked { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue) inset; }
.assist-row:not(.is-picked) .input-suffix { opacity: .6; }
.assist-label { flex: 1; min-width: 11rem; }
.assist-row .input-suffix input { width: 5.5rem; }
/* "Who sees it" on chore and reward forms */
.people-field { border: 0; padding: 0; margin-left: 0; margin-right: 0; min-width: 0; }
.people-field legend { font-weight: 600; padding: 0; margin-bottom: .35rem; }
.people-picks { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.people-picks[hidden] { display: none; }
.people-picks .hint { flex-basis: 100%; }
.people-chip { display: inline-flex; align-items: center; gap: .45rem; border: 1px solid var(--line); border-radius: 2rem; padding: .35rem .85rem .35rem .6rem; cursor: pointer; font-weight: 500; background: var(--paper); }
.people-chip:has(input:checked) { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue) inset; }
.people-chip input { margin: 0; }
.pill.only { white-space: normal; }

/* ------------------------------------------------ 404: "This page wandered off" */
.lost { max-width: 560px; margin: 0 auto; padding: 5vh 1.25rem 4rem; text-align: center; }
.lost-code { display: flex; align-items: center; justify-content: center; gap: .1em; font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 800; font-size: clamp(5.5rem, 22vw, 9rem); line-height: 1; color: var(--blue); }
.lost-gem { width: .9em; height: .9em; margin: 0 .04em; animation: lost-bob 2.6s ease-in-out infinite; filter: drop-shadow(0 .12em .08em var(--shadow)); }
@keyframes lost-bob {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50% { transform: translateY(-.1em) rotate(8deg); }
}
@media (prefers-reduced-motion: reduce) { .lost-gem { animation: none; transform: rotate(-8deg); } }
.lost h1 { font-family: "Baloo 2", system-ui, sans-serif; font-size: clamp(1.7rem, 6vw, 2.3rem); margin: 1.2rem 0 .4rem; }
.lost-text { color: var(--ink-soft); font-size: 1.05rem; line-height: 1.55; margin: 0 auto 1.6rem; max-width: 30rem; }
.lost-actions { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; }