/* ==========================================================================
   SantaCall: the logged-in parent app (layouts/app.php and its pages).
   Same look as the website and the guest booking pages: navy header with the
   snowflake decorations, grey page, white cards, green and red buttons, the
   site's font. Independent of guest.css (copied, not imported), so the guest
   pages can never break because of an app change.
   ========================================================================== */

:root {
  --navy: #001e3b;        /* header band (top) and footer, as santabooker.com */
  --navy-end: #042aae;    /* the header band's gradient runs down to this blue */
  --heading: #0b2c4a;     /* the site's heading navy */
  --paper: #f4f4f4;       /* the site's page grey */
  --paper-2: #e9edf1;
  --white: #ffffff;
  --line: #e3e7ec;
  --line-strong: #9aa7b6;
  --line-field: #cfd6df;
  --ink: #212529;
  --muted: #545454;
  --muted-2: #5a6672;     /* santabooker lead/secondary grey */
  --faint: #8a94a3;
  --green: #1fa361;
  --green-dark: #0f4d2e;   /* text on green-soft only */
  --green-hover: #1a8d54;
  --green-soft: #eaf5ee;
  --green-on-navy: #4ade80;
  --red: #d63a3b;
  --red-dark: #a51c30;
  --red-hover: #c13233;
  --red-soft: #fdecec;
  --gold: #e6b84a;
  --amber: #8a5a00;
  --amber-soft: #fff4d6;
  --error: #b02a2e;
  --on-dark: #c7cfdb;
  --focus: var(--gold);

  --sans: "indivisible", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* santabooker.com tokens (the branding source of truth) */
  --radius-card: 16px;
  --radius-btn: 14px;
  --radius-field: 10px;
  --shadow-card: 0 10px 30px rgba(11, 44, 74, 0.08);
  --shadow-cta: 0 13.6px 28px rgba(31, 163, 97, 0.45);
  --card-pad: 32px;
  --space-1: 8px;   /* eyebrow -> heading */
  --space-2: 16px;  /* block rhythm inside a card */
  --space-3: 24px;  /* heading -> content, card gaps */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* The website's Bootstrap container (santabooker): the header band's side
     padding (p-4 / p-md-5) and the .container max-widths at 576/768/992/1200/1400,
     with 12px of inner padding. Header, hero, cards and footer all use it, so the
     logo, links and card edges line up with santavoicemail.co.uk. */
  --gutter: 24px;
  --container: 100vw;
}
@media (min-width: 576px) { :root { --container: 540px; } }
@media (min-width: 768px) { :root { --gutter: 48px; --container: 720px; } }
@media (min-width: 992px) { :root { --container: 960px; } }
@media (min-width: 1200px) { :root { --container: 1140px; } }
@media (min-width: 1400px) { :root { --container: 1320px; } }

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

/* Component display rules must never un-hide something the page or script has hidden. */
[hidden] { display: none !important; }

/* No-JavaScript fallbacks: layouts/app.php's head script turns <html class="no-js">
   into "js", so plain-link stand-ins (.nojs-only) show only when scripts can't run,
   and script-driven controls (.js-only) only when they can. */
.js .nojs-only { display: none; }
.no-js .js-only { display: none; }

/* The html background is navy so overscroll above the header and below the
   footer shows navy, never a grey strip. */
html { -webkit-text-size-adjust: 100%; background: var(--navy); }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.locked, html.locked, html.tp-lock, html.tp-lock body { overflow: hidden; }
html:has(.mnav[open]), html:has(.mnav[open]) body { overflow: hidden; }
body a { color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.2; font-weight: 600; color: var(--heading); }
p { margin: 0; }
button { font: inherit; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }

/* ---------- Header band (navy, with the site's decorations) ---------- */

/* No overflow clipping on .top itself, so the avatar menu can hang below the
   band over the first card; only the decorations wrapper clips. */
.top { position: relative; background: linear-gradient(to bottom, var(--navy) 0%, var(--navy-end) 100%); color: #fff; padding: 48px 0 110px; }
/* The website's page-header scene (app/_band_scene.php), as on santabooker.com: dots at the top corners,
   snow falling through the band, a snowy wave along its bottom edge that the cards overhang, and small
   trees standing in the snow. It paints in source order behind the bar and the hero. */
.top__decos { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.top__deco { position: absolute; height: auto; pointer-events: none; user-select: none; }
.top__deco--left-dots { top: 10px; left: 6%; width: 160px; opacity: 0.75; }
.top__deco--right-dots { top: 14px; right: 6%; width: 110px; opacity: 0.75; transform: scaleX(-1); }
.top__deco--left-trees { left: -40px; bottom: 18px; width: 190px; }
.top__deco--right-trees { right: -30px; bottom: 18px; width: 170px; }
@media (max-width: 1399px) {
  .top__deco--left-dots { left: 4%; width: 130px; }
  .top__deco--right-dots { right: 4%; width: 96px; }
  .top__deco--left-trees { width: 160px; }
  .top__deco--right-trees { width: 140px; }
}
@media (max-width: 1199px) { .top__deco { display: none; } }
.top__wave { position: absolute; left: 0; bottom: -1px; width: 100%; height: 100px; display: block; fill: var(--paper); }

/* Each flake is a column as tall as the band, so translateY(100%) carries its glyph from the top to the bottom. */
.top__snow { position: absolute; inset: 0; }
.top__snow span { position: absolute; top: 0; height: 100%; color: rgba(255, 255, 255, 0.7); line-height: 1; animation: top-snowfall linear infinite; will-change: transform; }
.top__snow span::before { content: "\2744\FE0E"; display: block; animation: top-spin linear infinite; animation-duration: inherit; }
@keyframes top-snowfall {
  0% { transform: translate3d(0, -40px, 0); opacity: 0; }
  10% { opacity: 1; }
  85% { opacity: 0.9; }
  100% { transform: translate3d(40px, 100%, 0); opacity: 0; }
}
@keyframes top-spin { to { transform: rotate(360deg); } }
.top__snow span:nth-child(1) { left: 4%; font-size: 14px; animation-duration: 14s; animation-delay: 0s; }
.top__snow span:nth-child(2) { left: 12%; font-size: 22px; animation-duration: 18s; animation-delay: -3s; }
.top__snow span:nth-child(3) { left: 20%; font-size: 10px; animation-duration: 11s; animation-delay: -7s; }
.top__snow span:nth-child(4) { left: 28%; font-size: 18px; animation-duration: 16s; animation-delay: -1s; }
.top__snow span:nth-child(5) { left: 36%; font-size: 12px; animation-duration: 13s; animation-delay: -9s; }
.top__snow span:nth-child(6) { left: 44%; font-size: 24px; animation-duration: 20s; animation-delay: -5s; }
.top__snow span:nth-child(7) { left: 52%; font-size: 11px; animation-duration: 12s; animation-delay: -2s; }
.top__snow span:nth-child(8) { left: 60%; font-size: 16px; animation-duration: 17s; animation-delay: -10s; }
.top__snow span:nth-child(9) { left: 68%; font-size: 20px; animation-duration: 19s; animation-delay: -4s; }
.top__snow span:nth-child(10) { left: 76%; font-size: 13px; animation-duration: 14s; animation-delay: -8s; }
.top__snow span:nth-child(11) { left: 84%; font-size: 18px; animation-duration: 16s; animation-delay: -6s; }
.top__snow span:nth-child(12) { left: 92%; font-size: 11px; animation-duration: 13s; animation-delay: -1s; }
.top__snow span:nth-child(13) { left: 16%; font-size: 26px; animation-duration: 22s; animation-delay: -12s; }
.top__snow span:nth-child(14) { left: 56%; font-size: 9px; animation-duration: 10s; animation-delay: -4s; }
.top__snow span:nth-child(15) { left: 80%; font-size: 22px; animation-duration: 18s; animation-delay: -11s; }
@media (prefers-reduced-motion: reduce) { .top__snow { display: none; } }

/* ---------- Footer (pinned to the bottom of short pages by .stack's flex: 1) ---------- */

/* The website footer: its navy, 16px light links, 12px legal lines, same container. */
.footer {
  position: relative;
  z-index: 1;
  margin-top: auto;
  background: #001e3b;
  padding: 40px 0 calc(40px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  color: #fff;
}
.footer__inner { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; padding-inline: 12px; }
.footer__links { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 36px; font-size: 16px; font-weight: 300; }
.footer__links a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.footer__links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer__legal { margin: 8px auto 0; max-width: 640px; font-size: 12px; font-weight: 300; line-height: 26px; color: #fff; }

/* ---------- Header bar: logo, nav, buy credits, avatar menu ---------- */

/* The website's header row: logo left (300px, like santabooker), links and
   3px-radius buttons right, vertically centred in a 60px row. */
.bar {
  position: relative;
  z-index: 10;                    /* above .intro and .stack, so the avatar menu draws over both */
  width: min(var(--container), 100% - 2 * var(--gutter));
  margin: 0 auto;
  padding-inline: 12px;
  min-height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.bar__logo { display: block; flex: 0 1 220px; min-width: 0; align-self: flex-start; }
.bar__logo img { display: block; width: 100%; max-width: 220px; height: auto; }
/* Only rendered when a controller sets $headerNote (none of the app pages do today). */
.bar__note { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--on-dark); }
.bar .right { display: flex; align-items: center; gap: 8px; position: relative; }
.bar__nav { display: flex; align-items: center; gap: 16px; margin-right: 8px; font-size: 16px; font-weight: 400; line-height: 24px; }
.bar__nav a { color: #fff; text-decoration: none; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.bar__nav a:hover { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.5); }
.bar__nav a.on { text-decoration: underline; text-decoration-color: var(--green); }
.bar .avatar-menu { margin-left: 8px; }

/* The website's header buttons (santabooker .btn): 20px, 7px 25px, 14px corners. */
.hbtn {
  display: inline-block; padding: 7px 25px; border-radius: var(--radius-btn); border: 1px solid transparent;
  font-size: 20px; font-weight: 500; line-height: 30px; color: #fff; text-decoration: none; white-space: nowrap;
  transition: background-color 0.15s ease;
}
.hbtn.green { background: var(--green); }
.hbtn.green:hover { background: var(--green-hover); }
.hbtn.red { background: var(--red); }
.hbtn.red:hover { background: var(--red-hover); }
.hbtn.green-outline { border: 2px solid var(--green); padding: 6px 24px; color: var(--green); }
.hbtn.green-outline:hover { background: var(--green); color: #fff; }

/* Narrow-screen menu (the website's full-screen menu): a native <details>. */
.mnav { display: none; }
.mnav__toggle { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -9px; color: #fff; border-radius: 8px; }
.mnav__toggle::-webkit-details-marker, .mnav__toggle::marker { display: none; content: ""; }
.mnav__bars, .mnav__bars::before, .mnav__bars::after { display: block; width: 22px; height: 2.5px; border-radius: 2px; background: currentColor; }
.mnav__bars { position: relative; }
.mnav__bars::before, .mnav__bars::after { content: ""; position: absolute; left: 0; }
.mnav__bars::before { top: -7px; }
.mnav__bars::after { top: 7px; }
.mnav[open] > .mnav__toggle { position: fixed; z-index: 1001; top: 44px; right: 28px; margin: 0; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--navy); }
.mnav[open] .mnav__bars { background: transparent; }
.mnav[open] .mnav__bars::before { top: 0; transform: rotate(45deg); width: 18px; left: 2px; }
.mnav[open] .mnav__bars::after { top: 0; transform: rotate(-45deg); width: 18px; left: 2px; }
.mnav__panel {
  position: fixed; inset: 0; z-index: 1000; overflow-y: auto;
  background: #001e3b; color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px;
  padding: 96px 24px 48px; text-align: center;
}
.mnav[open] .mnav__panel { animation: sv-fade 0.22s ease; }
@keyframes sv-fade { from { opacity: 0; } }
.mnav__logo img { display: block; width: 220px; max-width: 100%; height: auto; }
.mnav__links, .mnav__account { display: flex; flex-direction: column; align-items: center; }
.mnav__links a { display: block; padding: 10px 16px; font-size: 22px; color: #fff; text-decoration: none; }
.mnav__links a.on { text-decoration: underline; text-decoration-color: var(--green); text-underline-offset: 6px; text-decoration-thickness: 2px; }
.mnav__btns { display: flex; justify-content: center; gap: 5px; }
.mnav__account { padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.15); }
.mnav__account a { display: block; padding: 10px 16px; font-size: 16px; color: var(--on-dark); text-decoration: none; }
.mnav__account a:hover, .mnav__links a:hover { color: #fff; text-decoration: underline; }

/* The logged-in row (four links, Buy Credits, avatar) needs the 960 container;
   below it, and below 768 on the public pages (as on the website), the menu takes over. */
@media (max-width: 991px) {
  .bar:not(.bar--public) .right { display: none; }
  .bar:not(.bar--public) .mnav { display: block; }
}
@media (max-width: 767px) {
  .bar--public .right { display: none; }
  .bar--public .mnav { display: block; }
  .bar { min-height: 0; gap: 0; }
  .bar__logo { margin-top: 0; }
}
/* On phones the logo keeps the website's 300px and the toggle's 44px target
   tucks into the gap beside it, as the website's 26px icon does. */
@media (max-width: 991px) { .mnav { flex: none; position: relative; z-index: 1; margin: 0 -17px 0 -9px; } .bar:not(.bar--public) { gap: 0; } }

.avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--green); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 17px; border: 0; cursor: pointer;
}
/* The avatar menu is a native <details> (layouts/app.php): the summary is the avatar. */
.avatar-menu { position: relative; }
.avatar-menu > summary { list-style: none; user-select: none; }
.avatar-menu > summary::-webkit-details-marker, .avatar-menu > summary::marker { display: none; content: ""; }
.menu {
  position: absolute; right: 0; top: 50px;
  background: #fff; color: var(--ink);
  border-radius: 14px; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
  min-width: 220px; padding: 6px; z-index: 5;
}
.menu .who { padding: 10px 12px 8px; margin-bottom: 4px; font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu a { display: block; padding: 10px 12px; border-radius: 10px; text-decoration: none; font-size: 16px; color: var(--ink); }
.menu a:hover { background: var(--paper); }
.menu a.danger { color: var(--red); }

/* ---------- Intro (eyebrow, title, meta line on the navy band) ---------- */

/* The website's hero: 48px under the header row, a 20px tracked green eyebrow
   16px above a 56px heading (Bootstrap's display-4 scaling below 1200px). */
.intro { position: relative; z-index: 2; width: min(var(--container), 100% - 2 * var(--gutter)); margin: 48px auto 0; padding-inline: 12px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.intro__eyebrow { margin: 0; font-size: 18px; font-weight: 600; line-height: 24px; letter-spacing: 5px; text-transform: uppercase; color: #4ade80; }
.intro__title { margin: 0; font-weight: 700; font-size: calc(1.475rem + 2.7vw); line-height: 1.2; color: #fff; text-wrap: balance; }
@media (min-width: 1200px) { .intro__title { font-size: 56px; } }
.intro__meta { text-wrap: balance; margin: -4px 0 0; font-size: 18px; font-weight: 300; line-height: 26px; color: var(--on-dark); }
.intro__meta b { color: #fff; font-weight: 600; }
/* Every page's hero is the same three lines (app/_intro.php), each kept to one
   line, so the band and the first card sit at exactly the same height on every page. */
.intro > * { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-wrap: nowrap; }

/* ---------- Page column: the cards overhang the navy band ---------- */

.stack {
  position: relative;
  z-index: 3;
  flex: 1 0 auto;
  width: min(var(--container), 100% - 2 * var(--gutter));   /* the header's container */
  margin: -60px auto 0;
  padding: 0 12px 64px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.stack--auth { max-width: 576px; }  /* a 552 card, centred in the container */

.card {
  --focus: var(--green);
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--card-pad);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.card__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 8px; }
.card__head > :where(div:not(.filters)) { display: flex; flex-direction: column; gap: var(--space-1); }
.card h2 { font-size: 24px; font-weight: 600; line-height: 1.3; color: var(--heading); }
.card > .eyebrow + h2 { margin-top: calc(var(--space-1) - var(--space-2)); }
.card > .btn { align-self: flex-start; }
.card--row { flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 24px; }
/* Forms inside cards get the same rhythm as .form-stack; .pane has its own rules. */
.card > form:not(.pane), .form-stack, .deliver form, .row-edit form { display: flex; flex-direction: column; gap: 16px; }
.card > form:not(.pane) > .btn, .form-stack > .btn { align-self: flex-start; margin-top: 8px; }
.card > form:not(.pane) > [data-buy-button], .card--auth .form-stack > .btn { align-self: stretch; }

/* santabooker eyebrow: green, normal case, widely tracked. */
.eyebrow { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.3; letter-spacing: 3px; color: var(--green); }
.muted { margin: 0; color: var(--muted); font-size: 16px; }
.note { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.quote { margin: 0; font-size: 16px; line-height: 1.55; }
.stat { display: inline-block; font-size: 14px; font-weight: 600; color: var(--green-dark); background: var(--green-soft); border-radius: 999px; padding: 6px 14px; white-space: nowrap; }

/* ---------- Home page: the setup nudge, the calls sub-heading, See All Calls ---------- */

.nudge { margin: 0; padding: 12px 16px; border-radius: 12px; background: var(--green-soft); font-size: 15px; font-weight: 500; color: var(--green-dark); }
.subhead { margin: 8px 0 0; font-size: 18px; font-weight: 600; color: var(--heading); }
/* "See All Calls": a native <details>/<summary> so it works without JavaScript too. */
.more-calls { margin-top: 0; }
.more-calls > summary { display: inline-flex; align-items: center; min-height: 44px; color: var(--green); font-weight: 600; font-size: 15px; cursor: pointer; list-style: none; }
.more-calls > summary::-webkit-details-marker, .more-calls > summary::marker { display: none; content: ""; }
.more-calls > summary:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Alerts (server flash and app.js notify() share the one element) ---------- */

.guest-alert { position: relative; width: 100%; margin: 0; padding: 14px 18px; border-radius: var(--radius-field); font-size: 14px; line-height: 1.5; }
.guest-alert-error { background: var(--red-soft); color: #8e1f23; border: 1px solid #f3c9ca; }
.guest-alert-success { background: var(--green-soft); color: #1f5a36; border: 1px solid #cfe3d5; }
.guest-alert-warning { background: var(--amber-soft); color: var(--amber); border: 1px solid #f0dca0; }
/* In the page column the banner is card-shaped with a coloured left edge. */
.stack > .guest-alert { padding: 16px 22px; font-size: 15px; border-radius: var(--radius-card); }
.card .guest-alert { margin: 0; }
.panel > .guest-alert { flex: none; margin: 12px 32px 0; }
.guest-alert:has(.guest-alert__close) { padding-right: 48px; }
.guest-alert__close { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border: 0; background: transparent; color: inherit; font-size: 22px; line-height: 1; border-radius: 50%; cursor: pointer; }
.guest-alert__close:hover { background: rgba(0, 0, 0, 0.06); }

/* ---------- Buttons and links ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 7px 25px;
  border-radius: var(--radius-btn); border: 1px solid transparent;
  font-weight: 500; font-size: 18px; line-height: 28px;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn.green { background: var(--green); color: #fff; }
.btn.green:hover { background: var(--green-hover); }
.btn.red { background: var(--red); color: #fff; }
.btn.red:hover { background: var(--red-hover); }
.btn.outline { min-height: 40px; padding: 5px 18px; font-size: 16px; line-height: 24px; background: #fff; color: var(--green); border: 1px solid var(--green); }
.btn.outline:hover { background: var(--green-soft); color: var(--green-dark); }
.btn.quiet { min-height: 40px; padding: 5px 18px; font-size: 16px; line-height: 24px; background: transparent; color: var(--muted); border: 1px solid var(--line-field); }
.btn.quiet:hover { border-color: var(--line-strong); color: var(--heading); }
.btn.outline.btn--danger { color: var(--red); border-color: #f3c9ca; }
.btn.outline.btn--danger:hover { background: var(--red-soft); border-color: var(--red); color: var(--red-dark); }
.btn.is-done { background: var(--green-dark); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.6; cursor: default; transform: none; }

.link { color: var(--green); font-weight: 500; text-decoration: none; font-size: 16px; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }
.link.red { color: var(--red); }
.link.quiet { color: var(--muted); font-weight: 500; }
.link:disabled { color: var(--faint); font-weight: 500; cursor: default; text-decoration: none; }
/* Stand-alone link buttons are real tap targets; links inside sentences stay inline. */
button.link, .auth-links > .link, .panel__foot > .link, .acts > .link, .row-menu__list > .link, .empty > .link, .rows > .link, .deliver > .link { display: inline-flex; align-items: center; min-height: 44px; }
.note .link, .field-error .link, .toggle-row .link, .kv .link, .muted .link { display: inline; min-height: 0; }
.field > .link { align-self: flex-start; font-size: 14px; }
.acts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.acts--start { justify-content: flex-start; }
.acts--centre { justify-content: center; }

.btn:focus-visible, .avatar:focus-visible, .switch:focus-visible, .link:focus-visible,
.row:focus-visible, .chip:focus-visible, .tab:focus-visible, .menu a:focus-visible,
.bar nav a:focus-visible, .bar > a:focus-visible, .footer__links a:focus-visible, .hbtn:focus-visible, .mnav a:focus-visible, .mnav__toggle:focus-visible,
.auth-switch a:focus-visible, .panel__close:focus-visible, .row-menu > summary:focus-visible,
.more-calls > summary:focus-visible, .confirm > summary:focus-visible, .guest-alert__close:focus-visible,
.pack:has(input:focus-visible), .chip:has(input:focus-visible), .row.clickable:has(.row__link:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Form controls ---------- */

.input {
  width: 100%; height: 48px; padding: 0 14px;
  font: inherit; font-size: 16px; color: var(--ink);
  background: var(--white); border: 1px solid var(--line-field); border-radius: var(--radius-field);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none; appearance: none;
}
.input::placeholder { color: var(--faint); }
.input:hover { border-color: var(--line-strong); }
.input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(31, 163, 97, 0.25); }
.input[aria-invalid="true"] { border-color: var(--error); }
.input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(176, 42, 46, 0.2); }
.input[readonly] { background: var(--paper); color: var(--muted); }
textarea.input { height: auto; padding: 12px 14px; line-height: 1.55; resize: vertical; }
select.input {
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23545454' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
}
/* A required select showing its blank "Choose a Time" option reads as a placeholder. */
select.input:invalid { color: var(--faint); }
select.input option { color: var(--ink); }
.input[type="date"] { min-width: 0; text-align: left; }
.input[type="date"]::-webkit-date-and-time-value { text-align: left; min-height: 1.5em; }
.input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.55; cursor: pointer; }
/* The six-digit code: left padding equal to the tracking so the glyphs sit optically centred. */
.input--code { height: 64px; padding: 0 0 0 0.4em; font-size: 32px; font-weight: 700; letter-spacing: 0.4em; text-align: center; font-variant-numeric: tabular-nums; color: var(--heading); }
.input--code::placeholder { color: var(--line-field); }

.field { display: flex; flex-direction: column; gap: 8px; }
.label { font-size: 15px; font-weight: 600; color: var(--heading); }
.label small { font-size: 13px; font-weight: 400; color: var(--muted); margin-left: 6px; }
.field-error { margin: 0; font-size: 14px; line-height: 1.45; color: var(--error); }
.field-error .link { display: block; margin-top: 4px; font-size: 14px; }
.field-error:not([hidden]) + .note { display: none; }
.field-ok { margin: 0; font-size: 14px; line-height: 1.45; color: var(--green-dark); }
.field-row { display: flex; gap: 12px; }
.field-row > .field { flex: 1; min-width: 0; }
.field-row > .field--name { flex: 2; }
.field-row > .field--age { flex: 0 0 84px; }
.field-row > .field--gender { flex: 1; min-width: 150px; }

.switch {
  position: relative; flex: none; width: 46px; height: 26px; margin: 0;
  border-radius: 999px; background: var(--line-field); cursor: pointer;
  transition: background-color 0.2s ease;
  -webkit-appearance: none; appearance: none; border: 0;
}
.switch::before { content: ''; position: absolute; inset: -9px -4px; }   /* 54 x 44 hit area; the track stays 26px */
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.2s var(--ease); }
.switch:checked { background: var(--green); }
.switch:checked::after { transform: translateX(20px); }

/* A card holding one switch: still a <label> around a real checkbox, so it posts without JavaScript. */
.toggle-row {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 16px; border: 1px solid var(--line-field); border-radius: 12px; background: var(--white);
  cursor: pointer; transition: border-color 0.15s ease;
}
.toggle-row:hover { border-color: var(--line-strong); }
.toggle-row > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.toggle-row b { display: block; font-size: 16px; font-weight: 600; color: var(--heading); }
.toggle-row span { display: block; font-size: 14px; line-height: 1.45; color: var(--muted); }
.toggle-row .link { font-size: 14px; }

/* Chips: Ready By and Days in the panel (real radio/checkbox inputs, invisible
   but present and keyboard-focusable) and the Messages page's filter buttons. */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 14px;
  border: 1px solid var(--line-field); border-radius: 12px; background: #fff;
  font-size: 14px; font-weight: 500; color: var(--ink); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.chip:hover { border-color: var(--line-strong); }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
/* Selected: solid green with white text so it reads at a glance; unselected stays white. */
.chip { border-color: #d1d5db; }
.chip.on, .chip:has(input:checked) { background: #1fa361; border-color: #1fa361; color: #fff; }
.chip.on:hover, .chip:has(input:checked):hover { background: #1b8f55; border-color: #1b8f55; }
/* Ready By and Days: equal-width segmented groups that fill the panel like the select below. */
.pane .chips { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.pane .chips--days { grid-auto-flow: row; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.pane .chip { min-height: 40px; padding: 0 4px; }
/* Messages page filter row: a joined Active | Done | All control on the left,
   the child select on the right; it takes the head's spare width. */
.filters { display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; min-width: 0; }
.seg { display: inline-flex; border: 1px solid #d1d5db; border-radius: 12px; background: #fff; overflow: hidden; }
.seg__btn {
  min-height: 36px; padding: 0 16px; border: 0; background: transparent;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: background-color 0.15s ease, color 0.15s ease;
}
.seg__btn + .seg__btn { border-left: 1px solid #d1d5db; }
.seg__btn:hover { background: var(--paper); }
.seg__btn.on { background: #1fa361; color: #fff; }
.seg__btn.on:hover { background: #1b8f55; }
.seg__btn:focus-visible { outline: 2px solid var(--green); outline-offset: -3px; }
.input--sm { width: auto; height: 38px; font-size: 14px; }
select.input--sm { padding-right: 36px; background-position: right 12px center; }
.filters__child { max-width: 220px; }
@media (min-width: 720px) { .filters { margin-right: 8px; } }
@media (max-width: 599px) {
  .filters { flex-basis: 100%; flex-direction: column; align-items: stretch; }
  .seg { display: flex; }
  .seg__btn { flex: 1 1 0; }
  .filters__child { width: 100%; max-width: none; }
  .filters ~ .btn { width: 100%; }
}

/* "Let Santa Rewrite It With Magic" under a message textarea (js-only):
   a gold-shimmer button, sparkles over the textarea while Santa writes, the
   new words typed in, then a soft glow. Calm for reduced motion. */
.magic-btn {
  position: relative; overflow: hidden; color: #fff; border: 0;
  background: linear-gradient(135deg, #1fa361 0%, #178a51 55%, #c9a227 130%);
  box-shadow: 0 6px 16px rgba(31, 163, 97, .28);
}
.magic-btn::before { content: "\2726"; margin-right: 8px; color: #ffe08a; }
.magic-btn::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 20%, rgba(255, 236, 170, .55) 50%, transparent 80%);
}
.magic-btn:hover::after, .magic-btn.is-busy::after { animation: magic-sweep 1.4s ease-in-out infinite; }
.magic-btn:hover { color: #fff; filter: brightness(1.05); }
.magic-btn:disabled { opacity: 1; cursor: progress; }
.magic-btn.is-busy::before { display: inline-block; animation: magic-spin 1.6s linear infinite; }

.magic-wrap { position: relative; }
.magic-wrap textarea { transition: border-color .3s ease, box-shadow .3s ease, color .3s ease; }
.magic-dust { position: absolute; inset: 0; pointer-events: none; border-radius: 10px; overflow: hidden; opacity: 0; transition: opacity .35s ease; }
.magic-dust span {
  position: absolute; width: 16px; height: 16px; transform: scale(var(--s, 1));
  background: radial-gradient(circle, #fff6cf 0 20%, #f2c94c 35%, transparent 70%);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
.magic-wrap.is-magic .magic-dust {
  opacity: 1;
  background: linear-gradient(110deg, rgba(255, 248, 225, 0) 30%, rgba(255, 236, 170, .45) 50%, rgba(255, 248, 225, 0) 70%) 0 0 / 250% 100%;
  animation: magic-shimmer 1.8s linear infinite;
}
.magic-wrap.is-magic .magic-dust span { animation: magic-twinkle 1.6s ease-in-out infinite; }
.magic-wrap.is-magic textarea { color: rgba(33, 37, 41, .35); border-color: #e2b93b; box-shadow: 0 0 0 4px rgba(242, 201, 76, .22); }
.magic-wrap.is-done textarea { animation: magic-glow 1.6s ease-out 1; }

@keyframes magic-sweep { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
@keyframes magic-spin { to { transform: rotate(360deg); } }
@keyframes magic-shimmer { from { background-position: 150% 0; } to { background-position: -150% 0; } }
@keyframes magic-twinkle {
  0%, 100% { opacity: 0; transform: scale(calc(var(--s, 1) * .3)) rotate(0deg); }
  50% { opacity: 1; transform: scale(var(--s, 1)) rotate(45deg); }
}
@keyframes magic-glow {
  0% { border-color: #e2b93b; box-shadow: 0 0 0 6px rgba(242, 201, 76, .35); }
  100% { box-shadow: 0 0 0 0 rgba(242, 201, 76, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .magic-btn::after, .magic-btn.is-busy::before, .magic-wrap.is-magic .magic-dust,
  .magic-wrap.is-magic .magic-dust span, .magic-wrap.is-done textarea { animation: none; }
  .magic-wrap.is-magic .magic-dust span { opacity: .8; }
}
.ai-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.ai-row .btn { min-height: 40px; padding: 6px 18px; font-size: 15px; line-height: 22px; }
.ai-row .ai-status { font-size: 14px; color: var(--muted); }
.ai-row .ai-status .link { display: inline; min-height: 0; font-size: 14px; }
.ai-row .guest-alert { padding: 8px 12px; font-size: 14px; }

/* Comma-separated fields as removable pills (app.js wireTagInputs): the real
   input is hidden and holds the comma-joined value. */
.tags {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  min-height: 48px; padding: 6px 8px;
  background: var(--white); border: 1px solid var(--line-field); border-radius: var(--radius-field);
  cursor: text; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tags:hover { border-color: var(--line-strong); }
.tags:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(31, 163, 97, 0.25); }
.tag-pill {
  display: inline-flex; align-items: center; gap: 2px; max-width: 100%;
  padding: 3px 4px 3px 10px; border: 1px solid #b9dcc6; border-radius: 999px;
  background: var(--green-soft); color: var(--green-dark); font-size: 14px; font-weight: 600; line-height: 1.3;
}
.tag-pill span { overflow-wrap: anywhere; }
.tag-pill button {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--green-dark); font-size: 16px; line-height: 1; cursor: pointer;
}
.tag-pill button:hover { background: rgba(31, 163, 97, 0.18); }
.tag-pill button:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.tags__entry { flex: 1 1 120px; min-width: 120px; height: 32px; padding: 0 4px; border: 0; outline: none; background: transparent; font: inherit; font-size: 16px; color: var(--ink); }
.tags__entry::placeholder { color: var(--faint); }

/* ---------- Rows (children list, calls list, message list) ---------- */

.rows { display: flex; flex-direction: column; }
.row {
  display: grid; grid-template-columns: 48px 1fr auto; gap: 16px; align-items: center;
  padding: 16px 0; border-top: 1px solid var(--line);
  text-decoration: none; text-align: left; background: none;
  border-left: 0; border-right: 0; border-bottom: 0; width: 100%; color: inherit; font: inherit;
}
.rows > .row:first-child { border-top: 0; padding-top: 4px; }
.rows > .row:last-child { padding-bottom: 4px; }
.row.norm { grid-template-columns: 1fr auto; }
.row.clickable { cursor: pointer; position: relative; }
.row.clickable:hover .name { color: var(--green-dark); }
/* A home page row: the child's name is the link, and its ::after stretches over
   the whole row so any of it opens the child; the switch's form sits above it. */
.row__link { color: inherit; text-decoration: none; }
.row__link::after { content: ""; position: absolute; inset: 0; }
.row__link:focus-visible { outline: none; }
.row-toggle { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; margin: 0; }
.row.add { grid-template-columns: 48px 1fr; color: var(--green); font-weight: 600; }
.row.add .plus { width: 48px; height: 48px; border-radius: 50%; border: 1px dashed var(--line-field); display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--green); }
.avatar-c { width: 48px; height: 48px; border-radius: 50%; background: var(--red-soft); color: var(--red); font-weight: 600; font-size: 20px; display: flex; align-items: center; justify-content: center; flex: none; }
.name { font-size: 18px; font-weight: 600; color: var(--heading); }
.name span { font-weight: 400; color: var(--muted); font-size: 15px; margin-left: 8px; }
.status { font-size: 15px; margin-top: 2px; color: var(--muted); }
.status.ready { color: var(--green-dark); }
.status.wait { color: var(--amber); }
.status.off { color: var(--muted); }
.chev { color: var(--faint); font-size: 22px; line-height: 1; }
.empty { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 8px 0 4px; }

/* ---------- Tags and small state labels ---------- */

.tag { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: 0.5px; padding: 2px 10px; border-radius: 999px; background: var(--paper); color: var(--muted); margin-left: 8px; vertical-align: middle; }
.tag.ready { background: var(--green-soft); color: var(--green-dark); }
.tag.wait { background: var(--amber-soft); color: var(--amber); }

/* ---------- Voicemail line card, key/value rows, help ---------- */

/* Santa's line: a calm navy figure in a soft green row, the whole row a tel: link. */
.line {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap;
  padding: 16px 20px; border-radius: 12px; background: var(--green-soft);
  text-decoration: none; color: inherit;
}
.line__label { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--muted-2); }
.num { font-size: 28px; line-height: 1.2; font-weight: 600; color: var(--heading); font-variant-numeric: tabular-nums; letter-spacing: 0.5px; white-space: nowrap; }
.line__call { display: inline-flex; align-items: center; min-height: 40px; padding: 5px 18px; border-radius: var(--radius-btn); background: var(--green); color: #fff; font-size: 16px; font-weight: 500; }
a.line:hover .line__call { background: var(--green-hover); }
a.line:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.how { margin: 0; padding-left: 24px; color: var(--muted); font-size: 16px; line-height: 24px; display: flex; flex-direction: column; gap: 8px; }
.how li::marker { color: var(--green); font-weight: 600; }
.how__num { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--heading); text-decoration: none; white-space: nowrap; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; overflow-wrap: anywhere; }
.kv span { color: var(--muted); }
.kv--history { align-items: baseline; }
.kv--history span { color: var(--ink); }
.kv--history b { font-weight: 600; }
.kv--history small { margin-left: 8px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.kv--history strong { font-weight: 600; color: var(--green-dark); white-space: nowrap; }
.kv:first-child, .form-stack + .kv { border-top: 0; }
.form-stack + .kv { margin-top: 8px; }
#support { scroll-margin-top: 16px; }
.video { display: block; width: 100%; border-radius: 12px; background: #000; }

/* ---------- Credit packs ---------- */

/* Real radio inputs inside the label (the form posts without JavaScript);
   :has(input:checked) reads the choice off the input, .on is app.js's mirror
   for browsers without :has(). */
.packs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.pack {
  position: relative;
  border: 1px solid var(--line-field); border-radius: 16px;
  padding: 20px 44px 18px 20px;
  display: flex; flex-direction: column; gap: 2px; cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.pack:hover { border-color: var(--line-strong); }
.pack.on, .pack:has(input:checked) { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); background: var(--green-soft); }
.pack.on::after, .pack:has(input:checked)::after {
  content: ''; position: absolute; top: 14px; right: 14px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.pack b { font-size: 28px; line-height: 1.1; font-weight: 600; color: var(--heading); }
.pack .n { font-weight: 600; color: var(--heading); }
.pack .s { font-size: 14px; color: var(--muted); }

/* ---------- Referral code and share ---------- */

.code { display: flex; gap: 10px; }
.code input { flex: 1; min-width: 0; height: 52px; border: 2px dashed var(--line-strong); border-radius: 12px; padding: 0 12px; font: inherit; font-size: 22px; font-weight: 600; letter-spacing: 0.14em; text-align: center; color: var(--heading); background: var(--white); }
.code .btn { min-height: 52px; padding-inline: 22px; }
.share { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.share .btn { width: 100%; min-height: 40px; padding-inline: 8px; }

/* ---------- Payment outcome (success / cancelled) ---------- */

.done { align-items: center; text-align: center; gap: 8px; padding-top: 36px; }
.done__tick { width: 64px; height: 64px; border-radius: 50%; background: var(--green-soft); color: var(--green); display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.done__tick--amber { background: var(--amber-soft); color: var(--amber); }
.done__big { margin: 0; font-size: 28px; font-weight: 600; color: var(--heading); }
.done .acts { margin-top: 12px; }

/* ---------- Auth pages (login/register): one 440px card under the centred logo ---------- */

.card--auth { padding: 40px; gap: var(--space-3); }
.auth-switch { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--paper-2); }
.auth-switch a { flex: 1; display: flex; align-items: center; justify-content: center; height: 44px; border-radius: 11px; font-size: 16px; font-weight: 500; color: var(--muted); text-decoration: none; transition: color 0.15s ease, background-color 0.15s ease; }
.auth-switch a:hover { color: var(--heading); }
.auth-switch a.on { background: #fff; color: var(--heading); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.auth-step { display: flex; flex-direction: column; gap: 16px; }
.auth-head { display: flex; flex-direction: column; gap: 8px; text-align: center; }
.auth-title { margin: 0; font-size: 26px; font-weight: 600; color: var(--heading); }
.auth-lead { margin: 0; font-size: 18px; font-weight: 300; line-height: 26px; color: var(--muted); }
.auth-lead strong { color: var(--heading); font-weight: 600; }
.card--auth .form-stack { gap: 18px; }
.card--auth .input { font-size: 17px; }
.card--auth .form-stack > .btn { padding: 10px 28px; font-size: 18px; font-weight: 600; box-shadow: var(--shadow-cta); }
.auth-links { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 4px; font-size: 15px; }
.auth-links .note { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 15px; }
.auth-links .note .link { display: inline-flex; align-items: center; min-height: 44px; }
.check { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.45; color: var(--ink); cursor: pointer; }
.check input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--green); }

/* ---------- Fly-out child panel ---------- */

/* The layout's shell (layouts/app.php) provides one empty .panel__body; the
   fragment fetched from children/{id}/panel (children/panel.php) fills it
   with .panel__head, .tabs, one .pane per tab and .panel__foot, so it needs
   to lay those out as a column with the foot pinned at the bottom and only
   the active .pane scrolling. The same fragment, embedded directly in the
   full page (children/show.php, no JavaScript needed), sits inside a
   .card.panel-page instead: .pane's flex/overflow rules are harmless there
   because a .card has no fixed height for them to act on. */
.overlay, .tp-scrim--sheet {
  position: fixed; inset: 0; z-index: 20;
  background: rgba(17, 24, 39, 0.55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity 0.22s ease;
}
.overlay.open { opacity: 1; }
.panel {
  --focus: var(--green);
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(760px, 100%);
  background: #fff; z-index: 21;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.25);
  transform: translateX(100%);
  transition: transform 0.22s var(--ease);
  display: flex; flex-direction: column;
  overscroll-behavior: contain;
}
.panel.open { transform: none; }
.panel__head { display: flex; align-items: center; gap: 14px; padding: 20px 32px; border-bottom: 1px solid var(--line); }
.panel__head .name { font-size: 24px; }
.panel__close {
  margin-left: auto; flex: none; width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--line-field); background: #fff; color: var(--muted);
  text-decoration: none; cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.panel__close:hover { background: var(--paper); border-color: var(--line-strong); color: var(--heading); }
/* The rule under the tabs is an inset shadow so the active tab's underline paints over it. */
.tabs { display: flex; gap: 4px; padding: 8px 32px 0; box-shadow: inset 0 -1px 0 var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { border: 0; background: none; padding: 12px 12px; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; transition: color 0.15s ease; }
.tab:hover { color: var(--heading); }
.tab.on { color: var(--green-dark); border-bottom-color: var(--green); }
.panel__body { flex: 1; min-height: 0; display: flex; flex-direction: column; container-type: inline-size; }
.panel__loading { padding: 40px 32px; text-align: center; }
.pane { flex: 1; padding: 24px 32px 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 16px; }
.pane::after { content: ''; display: block; flex: none; height: 12px; }   /* 16 gap + 12 = 28px under the last block, in every browser */
.pane .eyebrow + .status { margin-top: 4px; }
.pane__title { margin: 0; font-size: 20px; font-weight: 600; color: var(--heading); }
.pane__actions { margin-top: 8px; }
.pane .acts { gap: 10px; }
.pane .acts .btn.outline { min-height: 44px; padding: 7px 20px; font-size: 16px; }
.pane .rows .row { padding: 12px 0; gap: 12px; }
.pane .row .name { font-size: 16px; }
.pane .row .btn.outline { min-height: 40px; padding: 4px 14px; font-size: 14px; min-width: 80px; }
/* The foot: Remove (a <details class="confirm">) on the left, Save on the
   right while an editing tab shows (app.js syncs it with form="pane-…"). */
.panel__foot {
  padding: 16px 32px calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px;
}
.panel__foot .btn { min-width: 160px; }
.panel__foot:has(.confirm[open]) [data-panel-save] { display: none; }
/* The open confirm covers the end of the pane: a soft edge shows the form continues underneath. */
.panel__foot:has(.confirm[open]) { box-shadow: 0 -10px 18px -10px rgba(16, 24, 40, 0.22); }
.card.panel-page { padding: 0; gap: 0; width: 100%; max-width: 760px; margin-inline: auto; container-type: inline-size; }
/* Two columns where the panel is wide enough (760 on desktop): paired fields in About and Daily Messages. */
.field-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@container (min-width: 600px) { .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; } }
.no-js .panel-page .tabs { display: none; }
.no-js .panel-page .pane + .pane { border-top: 1px solid var(--line); }

/* Remove-child confirmation: a native <details> in the panel foot, so the
   question exists with or without JavaScript. */
.confirm { flex: 1 1 auto; min-width: 0; }
.confirm[open] { flex-basis: 100%; }
.confirm > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; }
.confirm > summary::-webkit-details-marker, .confirm > summary::marker { display: none; content: ""; }
.js .confirm[open] > summary { display: none; }
.confirm__box { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; background: var(--red-soft); border: 1px solid #f3c9ca; border-radius: 12px; }
.confirm__q { margin: 0; font-size: 16px; font-weight: 600; color: var(--heading); }
.confirm__note { margin: 0; font-size: 14px; line-height: 1.45; color: #8e1f23; }
.confirm__acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.confirm__acts .btn.red { min-height: 40px; padding: 5px 18px; font-size: 16px; background: var(--red); }
.confirm__acts .btn.red:hover { background: var(--red-hover); }
.confirm__acts .btn.quiet { background: #fff; color: var(--heading); border-color: var(--line-field); }
.confirm__acts .btn.quiet:hover { border-color: var(--line-strong); }

/* Today pane player */
.player { background: var(--paper); border-radius: 999px; height: 52px; display: flex; align-items: center; gap: 12px; padding: 0 16px 0 6px; font-size: 13px; color: var(--muted); }
.player button, .player a { flex: none; min-width: 44px; height: 40px; padding: 0 16px; border-radius: 999px; border: 0; background: var(--heading); color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.player a { display: inline-flex; align-items: center; text-decoration: none; }
.player i { flex: 1; position: relative; height: 4px; background: var(--line-field); border-radius: 4px; overflow: hidden; }
.player i b { position: absolute; inset: 0; width: 0; background: var(--green); border-radius: 4px; }
.player__time { flex: none; min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }

/* Busy state while Santa records (app.js setBusy) */
.busy { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 14px; border-radius: var(--radius-field); background: var(--amber-soft); color: var(--amber); font-size: 14px; }
.busy::before { content: ''; flex: none; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: sv-spin 0.8s linear infinite; }
@keyframes sv-spin { to { transform: rotate(360deg); } }

/* ---------- Messages: the "..." row menu (a native <details>, no JS needed) ---------- */

.row-menu { position: relative; }
.row-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; font-size: 20px; line-height: 1; border-radius: 4px; color: var(--muted); }
.row-menu > summary::-webkit-details-marker, .row-menu > summary::marker { display: none; content: ""; }
.row-menu > summary:hover, .row-menu[open] > summary { background: var(--paper); color: var(--heading); }
.row-menu__list { position: absolute; right: 0; top: 100%; margin-top: 4px; background: #fff; border-radius: 14px; box-shadow: 0 10px 30px rgba(11, 44, 74, 0.16); min-width: 240px; padding: 8px 16px; display: flex; flex-direction: column; gap: 2px; z-index: 5; }

/* ---------- Messages: Deliver and Edit panels (plain #anchor targets, no JS needed) ---------- */

.deliver, .row-edit { display: none; padding-top: 20px; margin-top: 4px; border-top: 1px solid var(--line); }
.deliver:target { display: flex; flex-direction: row; flex-wrap: wrap; gap: 24px; }
.deliver:target > .field { flex: 1; min-width: 0; gap: 10px; }
.deliver:target > .link { flex-basis: 100%; }
.row-edit:target { display: flex; flex-direction: column; gap: 16px; }
.deliver form > .btn, .row-edit .acts { margin-top: 8px; align-self: flex-start; }

/* ---------- Time picker (app/_time_field.php + app.js wireTimePickers) ----------
   Without JavaScript the select is the control. With it the select stays in
   the form (visually hidden) and a field-style button opens the picker: a
   popover beside the field, a bottom sheet on phones. */

.tp { position: relative; }
.tp--js .tp__native { position: absolute; inset: auto 0 0; width: 100%; height: 1px; opacity: 0; pointer-events: none; }
.tp__field {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  text-align: left; cursor: pointer; color: var(--heading); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.tp__field.is-empty { color: var(--faint); font-weight: 400; }
.tp__icon { flex: none; color: var(--muted); transition: color 0.15s ease; }
.tp__field:hover .tp__icon, .tp__field[aria-expanded="true"] .tp__icon { color: var(--green); }
.tp__field[aria-expanded="true"] { border-color: var(--green); box-shadow: 0 0 0 3px rgba(31, 163, 97, 0.25); }
.tp__field:focus-visible { border-color: var(--green); box-shadow: 0 0 0 3px rgba(31, 163, 97, 0.25); }

.tp-scrim { position: fixed; inset: 0; z-index: 40; }
.tp-scrim--sheet { z-index: 40; }
.tp-scrim.open { opacity: 1; }
.tp-pop {
  --focus: var(--green);
  position: fixed; z-index: 41; width: 312px;
  background: #fff; color: var(--ink);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 18px 44px rgba(11, 44, 74, 0.18), 0 2px 6px rgba(11, 44, 74, 0.06);
  display: flex; flex-direction: column;
  opacity: 0; transform: translateY(-4px) scale(0.98); transform-origin: top left;
  transition: opacity 0.16s ease, transform 0.18s var(--ease);
}
.tp-pop--above { transform-origin: bottom left; transform: translateY(4px) scale(0.98); }
.tp-pop.open { opacity: 1; transform: none; }
.tp-pop__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid var(--line); }
.tp-pop__title { font-size: 14px; font-weight: 600; color: var(--muted); }
.tp-pop__preview { font-size: 24px; line-height: 1.1; font-weight: 700; color: var(--heading); font-variant-numeric: tabular-nums; }
.tp-pop__body { display: flex; flex-direction: column; gap: 14px; padding: 14px 18px 16px; }
.tp-pop__section { display: flex; flex-direction: column; gap: 8px; }
.tp-pop__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tp-pop__label { font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--muted-2); }

.tp-presets { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.tp-preset {
  min-height: 36px; padding: 0 6px; border: 1px solid var(--line-field); border-radius: 999px; background: #fff;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--heading); cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.tp-preset:hover { border-color: var(--green); background: var(--green-soft); color: var(--green-dark); }
.tp-preset.on { border-color: var(--green); background: var(--green-soft); color: var(--green-dark); }

.tp-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--paper-2); }
.tp-seg .tp-seg__btn {
  min-height: 30px; min-width: 44px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.tp-seg .tp-seg__btn:hover:not(:disabled) { color: var(--heading); }
.tp-seg .tp-seg__btn.on { background: var(--green); color: #fff; box-shadow: 0 1px 3px rgba(15, 77, 46, 0.3); }
.tp-seg .tp-seg__btn:disabled { color: var(--line-strong); cursor: default; }
.tp-seg--min { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tp-seg--min .tp-seg__btn { min-height: 36px; font-variant-numeric: tabular-nums; }

.tp-hours { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.tp-hour {
  height: 40px; padding: 0; border: 1px solid transparent; border-radius: 10px; background: var(--paper);
  font: inherit; font-size: 15px; font-weight: 600; color: var(--heading); cursor: pointer; font-variant-numeric: tabular-nums;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.tp-hour:hover:not(:disabled) { border-color: var(--green); background: var(--green-soft); }
.tp-hour.on { background: var(--green); border-color: var(--green); color: #fff; box-shadow: 0 2px 6px rgba(31, 163, 97, 0.35); }
.tp-hour:disabled { background: transparent; color: #c3cad3; cursor: default; }

.tp-pop__foot { display: flex; align-items: center; gap: 8px; padding: 12px 18px 16px; border-top: 1px solid var(--line); }
.tp-pop__foot .btn { min-height: 40px; padding: 5px 16px; font-size: 15px; line-height: 22px; }
.tp-pop__foot .tp-cancel { margin-left: auto; border-color: transparent; }
.tp-pop__foot .tp-clear { color: var(--red); border-color: transparent; padding-inline: 10px; }
.tp-pop__foot .tp-clear:hover { background: var(--red-soft); color: var(--red-dark); }
.tp-pop__foot .tp-done { min-width: 96px; }
.tp-pop button:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.tp-hours button:focus-visible, .tp-seg button:focus-visible, .tp-presets button:focus-visible { outline-offset: 1px; }

/* Phones: a bottom sheet over a dimmed page. */
.tp-pop--sheet {
  left: 0; right: 0; bottom: 0; top: auto; width: auto;
  border: 0; border-radius: 18px 18px 0 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -12px 40px rgba(11, 24, 48, 0.25);
  transform: translateY(100%); transition: transform 0.24s var(--ease), opacity 0.01s;
  opacity: 1;
}
.tp-pop--sheet.open { transform: none; }
.tp-pop__grab { position: absolute; top: 6px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 4px; background: var(--line-field); }
.tp-pop--sheet .tp-pop__head { position: relative; padding: 20px 18px 12px; }
.tp-pop--sheet .tp-pop__preview { font-size: 26px; }
.tp-pop--sheet .tp-hour { height: 46px; font-size: 16px; }
.tp-pop--sheet .tp-preset { min-height: 40px; }
.tp-pop--sheet .tp-seg .tp-seg__btn { min-height: 36px; }
.tp-pop--sheet .tp-seg--min .tp-seg__btn { min-height: 40px; }
.tp-pop--sheet .tp-pop__foot .btn { min-height: 46px; font-size: 16px; }
.tp-pop--sheet .tp-pop__foot .tp-done { flex: 0 1 160px; }

@media (forced-colors: active) {
  .tp-hour.on, .tp-seg .tp-seg__btn.on, .tp-preset.on { outline: 3px solid Highlight; outline-offset: -3px; }
}

/* ---------- Tablet and phone (<= 860) ---------- */

@media (max-width: 860px) {
  .top { padding-bottom: 90px; }
  .top__wave { height: 80px; }
  .intro__meta { font-size: 16px; line-height: 24px; }
  .stack { margin-top: -48px; padding-bottom: 40px; }
}

/* ---------- Small screens (<= 700) ---------- */

@media (max-width: 700px) {
  .stack { gap: 16px; }
  :root { --card-pad: 24px; }
  .card h2 { font-size: 22px; }
  .eyebrow { font-size: 15px; letter-spacing: 2.5px; }
  .num { font-size: 26px; }
  .line { padding: 16px; }
  .card--auth { padding: 32px 24px; gap: 20px; }
  .card--row { flex-direction: column; align-items: stretch; }
  .stack > .guest-alert { padding: 14px 18px 14px 16px; font-size: 14px; }
  .btn { white-space: normal; text-align: center; }
  .card > .btn, .card > form:not(.pane) > .btn, .form-stack > .btn, .deliver form > .btn, .acts--start > .btn, .pane__actions .btn { align-self: stretch; flex: 1 1 auto; width: 100%; }
  .row { grid-template-columns: 44px 1fr; row-gap: 12px; }
  .row.clickable { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .row.norm { grid-template-columns: minmax(0, 1fr) auto; }
  .row.norm:has(.acts) { grid-template-columns: 1fr; }
  .row.norm:has(.acts) .acts { grid-column: 1 / -1; justify-content: flex-start; }
  .acts .chev { display: none; }
  .row.add { grid-template-columns: 44px 1fr; }
  .row.add .plus, .avatar-c { width: 44px; height: 44px; }
  .field-row { flex-wrap: wrap; }
  .field-row > .field--name { flex-basis: 100%; }
  .chip { min-height: 44px; }
  .pane .chip { min-height: 44px; font-size: 13px; }
  .filters > .chips + .chips { padding-left: 0; border-left: 0; }
  .share { grid-template-columns: 1fr 1fr; }
  .code input { font-size: 18px; letter-spacing: 0.08em; }
  .input--code { height: 58px; font-size: 28px; }
  .done__big { font-size: 24px; }
  .panel { width: 100%; }
  .panel__head { padding: 16px 20px; }
  .panel > .guest-alert { margin: 12px 20px 0; }
  .panel__loading { padding-inline: 20px; }
  .tabs { padding-inline: 12px; }
  .tab { padding: 12px 8px; font-size: 14px; }
  .pane { padding: 20px 20px 0; }
  .panel__foot { padding-inline: 20px; }
  .panel__foot .btn { min-width: 0; }
  .confirm__acts .btn { flex: 1; }
  .deliver:target { flex-direction: column; }
}
@media (max-width: 480px) {
  .top__deco { display: none; }   /* the small dots would sit on the hero text */
  .packs { grid-template-columns: 1fr; gap: 8px; }
  .pack { display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: center; padding: 12px 44px 12px 14px; }
  .pack b { grid-row: 1 / 3; font-size: 22px; }
}

/* ---------- Forced colours and reduced motion ---------- */

/* Windows High Contrast and other forced-colour modes: keep selections and the switch visible. */
@media (forced-colors: active) {
  .chip.on, .chip:has(input:checked), .pack.on, .pack:has(input:checked) { outline: 3px solid Highlight; outline-offset: -3px; }
  .switch { border: 1px solid ButtonText; }
  .switch::after { background: ButtonText; }
  .switch:checked { background: Highlight; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Reassurance strip under the login and register card ---------- */

.auth-trust { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; font-size: 14px; color: var(--muted); text-align: center; }
.auth-trust li + li::before { content: "\00B7"; margin-right: 8px; }
.auth-trust a { color: var(--green-dark); font-weight: 600; text-underline-offset: 3px; }
@media (hover: none), (max-width: 700px) { .auth-trust a { display: inline-block; padding: 12px 4px; margin: -12px 0; } }
@media (max-width: 480px) {
  .auth-trust { flex-direction: column; gap: 6px; }
  .auth-trust li + li::before { content: none; }
}

/* ---------- Phones (<= 575): compact, app-like density ----------
   The app is used daily, so phones get tool density rather than the
   marketing site's scale. Desktop and tablet rules above are untouched. */

@media (max-width: 575px) {
  :root { --gutter: 16px; --card-pad: 18px; --radius-card: 14px; --space-2: 14px; }
  body { font-size: 15px; }

  /* Header: the website's 200px logo, 32px down, and a 44px menu toggle. */
  .top { padding: 32px 0 60px; }
  .top__wave { height: 36px; }
  .bar, .intro, .stack, .footer__inner { padding-inline: 0; }
  .bar { min-height: 44px; }
  .bar__logo { flex: 0 1 200px; align-self: center; margin-top: 0; }
  .bar__logo img { max-width: 200px; }
  .mnav { margin: 0 -2px 0 0; }
  .mnav[open] > .mnav__toggle { top: 12px; right: 16px; width: 40px; height: 40px; }
  .mnav__panel { gap: 16px; padding: 72px 16px 32px; }
  .mnav__logo img { width: 170px; }
  .mnav__links a { padding: 8px 16px; font-size: 20px; }
  .hbtn { padding: 6px 18px; font-size: 17px; line-height: 28px; }

  /* Hero: short band so the first card starts high. */
  .intro { margin-top: 12px; gap: 6px; }
  .intro__eyebrow { font-size: 13px; line-height: 20px; letter-spacing: 2px; }
  .intro__title { font-size: 27px; line-height: 1.2; }
  .intro__meta { margin-top: 0; font-size: 15px; line-height: 22px; max-width: none; }
  .stack { margin-top: -44px; gap: 16px; padding-bottom: 32px; }

  /* Cards and type. */
  .card { gap: 14px; }
  .card h2 { font-size: 20px; }
  .card > .eyebrow + h2 { margin-top: -8px; }
  .card__head { margin-bottom: 0; gap: 8px 12px; flex-direction: column; align-items: stretch; }
  .card__head > :where(div:not(.filters)) { gap: 6px; }
  .eyebrow { font-size: 13px; letter-spacing: 2px; }
  .muted, .quote { font-size: 15px; }
  .nudge { padding: 10px 14px; font-size: 14px; }
  .auth-lead { font-size: 16px; font-weight: 300; line-height: 24px; }
  .stack > .guest-alert { border-radius: 12px; }

  /* Rows: 40px avatars, 12px rhythm, compact actions that wrap under the title. */
  .row { grid-template-columns: 40px minmax(0, 1fr); gap: 10px 12px; padding: 12px 0; }
  .row.clickable { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .row.add { grid-template-columns: 40px 1fr; font-size: 15px; }
  .row.add .plus, .avatar-c { width: 40px; height: 40px; font-size: 17px; }
  .row.add .plus { font-size: 20px; }
  .name { font-size: 17px; }
  .name span { font-size: 14px; margin-left: 6px; }
  .status { font-size: 14px; line-height: 1.4; }
  .tag { font-size: 12px; padding: 1px 8px; margin-left: 6px; }
  .row .acts { gap: 8px; }
  .acts .btn.outline, .pane .acts .btn.outline, .pane .row .btn.outline { min-height: 40px; padding: 4px 12px; font-size: 15px; line-height: 22px; min-width: 0; }
  .row-menu > summary { width: 40px; height: 40px; }
  .kv { padding: 10px 0; font-size: 14px; }

  /* Chips, segmented filter, tags: 40px controls. */
  .chip, .pane .chip { min-height: 40px; }
  .seg__btn { min-height: 40px; }
  .input--sm { height: 40px; }
  .tags { min-height: 46px; padding: 5px 8px; }
  .tags__entry { height: 34px; }
  .ai-row .btn { min-height: 40px; font-size: 15px; }

  /* Forms: 46px inputs, 14px gaps, full-width 48px primary buttons. */
  .input { height: 46px; }
  textarea.input { height: auto; }
  .field { gap: 6px; }
  .card > form:not(.pane), .form-stack, .deliver form, .row-edit form, .card--auth .form-stack { gap: 14px; }
  .btn { min-height: 44px; font-size: 16px; line-height: 24px; }
  .card > .btn, .card > form:not(.pane) > .btn, .form-stack > .btn, .card--auth .form-stack > .btn,
  .deliver form > .btn, .acts--start > .btn, .pane__actions .btn, .filters ~ .btn, .panel__foot .btn.green {
    min-height: 48px; font-size: 17px; line-height: 24px; padding: 8px 20px;
  }
  .card > form:not(.pane) > .btn, .form-stack > .btn { margin-top: 4px; }

  /* Santa's line and the credit packs. */
  .line { padding: 12px 14px; gap: 8px 12px; }
  .num { font-size: 22px; }
  .line__label { font-size: 13px; }
  .how { font-size: 15px; line-height: 22px; gap: 6px; padding-left: 20px; }
  .pack { padding: 10px 40px 10px 14px; }
  .pack b { font-size: 20px; }
  .toggle-row { padding: 12px 14px; }
  .code input { height: 48px; }
  .code .btn { min-height: 48px; padding-inline: 16px; }

  /* Login and register: same header, smaller hero and card. */
  .card--auth { padding: 20px 18px; gap: 16px; }
  .auth-title { font-size: 22px; }
  .auth-switch a { height: 40px; font-size: 15px; }
  .card--auth .input { font-size: 16px; }
  .card--auth .form-stack > .btn { box-shadow: 0 8px 18px rgba(31, 163, 97, 0.35); }
  .input--code { height: 54px; font-size: 26px; }

  /* Fly-out child panel: full screen, compact head, one-line scrolling tabs, sticky foot. */
  .panel__head { gap: 12px; padding: 10px 16px; }
  .panel__head .avatar-c { width: 36px; height: 36px; font-size: 16px; }
  .panel__head .name { font-size: 20px; }
  .panel__head .status { font-size: 13px; margin-top: 0; }
  .panel > .guest-alert { margin: 10px 16px 0; }
  .tabs { padding: 0 8px; gap: 0; flex-wrap: nowrap; }
  .tab { flex: none; min-height: 44px; padding: 10px 10px; font-size: 15px; }
  .pane { padding: 16px 16px 0; gap: 14px; }
  .pane__title { font-size: 18px; }
  .panel__foot { padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); gap: 10px; }
  .panel__foot .btn.green { flex: 1 1 auto; }
  .card.panel-page { border-radius: 14px; }
  .player { height: 48px; }

  /* Footer: tighter. */
  .footer { padding: 24px 0 calc(24px + env(safe-area-inset-bottom, 0px)); }
  .footer__links { gap: 0 24px; font-size: 15px; }
  .footer__legal { line-height: 20px; margin-top: 8px; }
}

/* Flash message modal (app/_flash.php). Centred card over the same faded
   navy backdrop as the child panel; without JS it still shows centred. */
.notice {
  position: fixed; inset: 0; margin: auto; z-index: 1200;
  width: min(420px, calc(100vw - 32px)); height: fit-content; max-height: calc(100vh - 32px);
  padding: 32px 28px 24px; border: 0; border-radius: 20px; background: #fff; color: var(--ink);
  text-align: center; box-shadow: 0 24px 60px rgba(11, 44, 74, .28);
}
.notice::backdrop { background: rgba(17, 24, 39, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.notice[open] { animation: notice-in .26s cubic-bezier(.2, .9, .3, 1.2); }
.notice[open]::backdrop { animation: notice-fade .22s ease-out; }
.notice__icon {
  width: 60px; height: 60px; margin: 0 auto 14px; border-radius: 50%;
  display: grid; place-items: center; font-size: 30px; font-weight: 700; line-height: 1;
  background: var(--green-soft); color: var(--green); box-shadow: 0 0 0 8px rgba(31, 163, 97, .08);
}
.notice--warning .notice__icon { background: var(--amber-soft); color: var(--amber); box-shadow: 0 0 0 8px rgba(201, 150, 20, .08); }
.notice--error .notice__icon { background: var(--red-soft); color: var(--red); box-shadow: 0 0 0 8px rgba(214, 58, 59, .08); }
.notice__title { margin: 0 0 6px; font-size: 22px; font-weight: 600; color: var(--heading); }
.notice__text { margin: 0 0 22px; font-size: 17px; line-height: 1.5; font-weight: 300; color: var(--ink); }
.notice__acts { margin: 0; }
.notice__acts .btn { width: 100%; min-height: 48px; }
@keyframes notice-in { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes notice-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .notice[open], .notice[open]::backdrop { animation: none; } }

/* ---- the SantaHQ family of sites, in the footer (partials/brands.php) ---- */
.brands { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 16px 40px; margin: 0 auto 28px; }
.brands__title { flex: 0 0 100%; margin: 0 0 -4px; font-size: 13px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: #1fa361; }
.brands a { display: inline-flex; border-radius: 6px; opacity: .85; transition: opacity .2s ease; }
.brands a::after { display: none; }
.brands a:hover, .brands a:focus-visible { opacity: 1; }
.brands a:focus-visible { outline: 3px solid #1fa361; outline-offset: 4px; }
.brands img { display: block; width: auto; height: 40px; }
@media (max-width: 575px) { .brands { gap: 14px 24px; } .brands img { height: 32px; } }

/* Tablets: a fixed 180px logo, as on the website (site.css .site-logo), rather
   than one that shrinks by however much the nav and buttons need. */
@media (min-width: 576px) and (max-width: 991px) {
  .bar__logo { flex: 0 0 180px; }
  .bar__logo img { max-width: 180px; }
}
/* Below 768 the website's header starts 32px down, not 48. */
@media (min-width: 576px) and (max-width: 767px) {
  .top { padding-top: 32px; }
}
/* The hero eyebrow drops to 13px at the website's breakpoint (600px, home.css). */
@media (max-width: 600px) {
  .intro__eyebrow { font-size: 13px; line-height: 20px; letter-spacing: 2px; }
}