/* ═══════════════════════════════════════════════════════════════════════
   PawnPilots app layer (v3, 2026-11)
   One look for every signed-in page: the admin pages, the parent dashboard,
   the kid dashboard and the sign-in page. It sits AFTER each page's own
   <style> and re-skins the classes those pages already use, so no page logic
   changes. Two rules keep it safe:
   - colour meaning stays with the page (a red button stays red, a status
     border keeps its colour): this layer adds depth, type and motion on top;
   - entrance motion only runs while html lacks .ui-settled (ui/app.js adds
     it once the first data render has landed), so a page that re-renders on
     every click never replays it.
   Everything turns off under prefers-reduced-motion.
═══════════════════════════════════════════════════════════════════════ */

:root {
  --ux-f-display: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --ux-f-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ux-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ux-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ux-sun: linear-gradient(110deg, #f59e0b 0%, #ec6a2c 48%, #d9467a 100%);
  --ux-ink: #1d140c;
  --ux-walnut-deep: #21140c;
  --ux-muted: #66563f;
  --ux-paper: rgba(255, 255, 255, 0.82);
  --ux-edge: rgba(69, 41, 26, 0.09);
  --ux-shadow: 0 1px 2px rgba(33, 20, 12, 0.05), 0 14px 34px -14px rgba(33, 20, 12, 0.18);
  --ux-shadow-lg: 0 2px 6px rgba(33, 20, 12, 0.06), 0 30px 64px -24px rgba(33, 20, 12, 0.3);
  --ux-r: 20px;
}

/* ── Canvas, type ─────────────────────────────────────────────────────── */
body.pp-app {
  font-family: var(--ux-f-body) !important;
  color: var(--ux-ink);
  background-color: #fdf8ef !important;
  background-image:
    radial-gradient(55% 38% at 6% 0%, rgba(242, 169, 59, 0.15), transparent 70%),
    radial-gradient(45% 32% at 100% 12%, rgba(217, 70, 122, 0.06), transparent 70%),
    radial-gradient(65% 45% at 50% 100%, rgba(31, 122, 85, 0.06), transparent 70%),
    radial-gradient(rgba(69, 41, 26, 0.06) 1px, transparent 1.2px) !important;
  background-size: auto, auto, auto, 26px 26px !important;
  background-attachment: fixed, fixed, fixed, scroll !important;
  -webkit-font-smoothing: antialiased;
}
body.pp-app input, body.pp-app select, body.pp-app textarea, body.pp-app button { font-family: var(--ux-f-body); }
body.pp-app h1, body.pp-app h2, body.pp-app h3, body.pp-app .brand, body.pp-app .card-title,
body.pp-app .modal h2, body.pp-app .week-label, body.pp-app .month-nav h2, body.pp-app .demo-name,
body.pp-app .att-student-name, body.pp-app .section-title, body.pp-app .metric-value, body.pp-app .stat-num,
body.pp-app .settings-title, body.pp-app .region-head, body.pp-app .student-info h3 {
  font-family: var(--ux-f-display) !important;
  letter-spacing: -0.025em;
}
body.pp-app ::selection { background: rgba(242, 169, 59, 0.35); }
body.pp-app :focus-visible { outline: 3px solid rgba(242, 169, 59, 0.6); outline-offset: 2px; }

/* ── Headers: walnut glass with a sunset hairline ─────────────────────── */
body.pp-app .admin-header,
body.pp-app .att-header,
body.pp-kid > header {
  position: sticky; top: 0; z-index: 60;
  background: linear-gradient(180deg, rgba(36, 22, 13, 0.94), rgba(26, 15, 8, 0.92)) !important;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 0 !important;
  box-shadow: 0 12px 30px -18px rgba(0, 0, 0, 0.55) !important;
}
body.pp-kid > header { position: fixed; }
body.pp-app .admin-header::after,
body.pp-app .att-header::after,
body.pp-kid > header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--ux-sun);
  background-size: 200% 100%;
  animation: pp-hairline 8s linear infinite;
}
@keyframes pp-hairline { to { background-position: 200% 0; } }
body.pp-app .admin-header .brand,
body.pp-app .att-brand { font-weight: 800; letter-spacing: -0.03em; }
body.pp-app .admin-header .brand img, body.pp-app .att-brand img, body.pp-app .brand-logo {
  transition: transform 0.6s var(--ux-ease-spring);
}
body.pp-app .admin-header .brand:hover img, body.pp-app .att-brand:hover img { transform: rotate(-12deg) scale(1.12); }

/* Nav pills (rendered by admin/nav.js into #headerActions or .nav-links) */
body.pp-app #headerActions a,
body.pp-app header .nav-links a {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 7px 13px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 244, 230, 0.86) !important;
  font-family: var(--ux-f-body) !important;
  font-size: 0.8rem !important; font-weight: 650 !important;
  letter-spacing: 0 !important; text-transform: none !important;
  text-decoration: none;
  transition: background 0.25s, color 0.25s, transform 0.35s var(--ux-ease-spring), box-shadow 0.3s !important;
}
body.pp-app #headerActions a:hover,
body.pp-app header .nav-links a:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #fff !important;
  transform: translateY(-1px);
}
body.pp-app #headerActions a.active,
body.pp-app header .nav-links a.active,
body.pp-app header .nav-links a[aria-current="page"] {
  background: var(--ux-sun) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 8px 20px -8px rgba(236, 106, 44, 0.85);
}
body.pp-app #headerActions a::after,
body.pp-app header .nav-links a::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);
  transform: translateX(-130%);
  transition: transform 0.7s var(--ux-ease-out);
}
body.pp-app #headerActions a:hover::after,
body.pp-app header .nav-links a:hover::after { transform: translateX(130%); }

/* ── Cards ────────────────────────────────────────────────────────────── */
body.pp-app .card, body.pp-app .student-card, body.pp-app .pay-card, body.pp-app .demo-card,
body.pp-app .v-row, body.pp-app .region-card, body.pp-app .settings-card, body.pp-app .hw-batch,
body.pp-app .metric-card, body.pp-app .chart-card, body.pp-app .attention-panel, body.pp-app .table-container,
body.pp-app .att-stat, body.pp-app .att-month, body.pp-app .att-table-wrap,
body.pp-app .elo-card, body.pp-app .log-pay-card, body.pp-app .pay-detail-box, body.pp-app .att-rate-bar,
body.pp-app .att-plan {
  background-color: var(--ux-paper) !important;
  border-top-color: rgba(255, 255, 255, 0.95);
  border-right-color: var(--ux-edge);
  border-bottom-color: var(--ux-edge);
  border-radius: var(--ux-r) !important;
  box-shadow: var(--ux-shadow) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body.pp-app .student-card, body.pp-app .pay-card, body.pp-app .demo-card, body.pp-app .v-row,
body.pp-app .metric-card, body.pp-app .att-stat, body.pp-app .region-card, body.pp-app .hw-batch {
  transition: transform 0.45s var(--ux-ease-spring), box-shadow 0.35s var(--ux-ease-out) !important;
}
body.pp-app .student-card:hover, body.pp-app .pay-card:hover, body.pp-app .demo-card:hover, body.pp-app .v-row:hover,
body.pp-app .metric-card:hover, body.pp-app .att-stat:hover, body.pp-app .region-card:hover, body.pp-app .hw-batch:hover {
  transform: translateY(-3px);
  box-shadow: var(--ux-shadow-lg) !important;
}
/* Big numbers wear the walnut-to-amber ink the marketing site uses. */
body.pp-app .metric-value, body.pp-app .att-stat-num, body.pp-app .elo-now {
  font-family: var(--ux-f-display) !important;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

/* ── Buttons: depth and spring on top of each page's own colours ─────── */
body.pp-app .btn, body.pp-app .pp-btn, body.pp-app .today-btn, body.pp-app .snapshot-btn,
body.pp-app .log-pay-submit, body.pp-app .btn-add, body.pp-app .pay-log-btn, body.pp-app .action-btn,
body.pp-app .status-btn, body.pp-app .filter-tab, body.pp-app .copy-btn, body.pp-app .plan-btn,
body.pp-app .login-btn {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 12px;
  font-weight: 700;
  transition: transform 0.35s var(--ux-ease-spring), box-shadow 0.3s var(--ux-ease-out), background-color 0.2s, filter 0.2s, opacity 0.2s !important;
}
body.pp-app .btn-primary, body.pp-app .btn-success, body.pp-app .btn-danger, body.pp-app .pp-btn.primary,
body.pp-app .today-btn, body.pp-app .snapshot-btn, body.pp-app .log-pay-submit, body.pp-app .btn-add,
body.pp-app .pay-log-btn, body.pp-app .login-btn {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, 0.06)) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 10px 22px -12px rgba(33, 20, 12, 0.6);
}
body.pp-app .btn:hover:not(:disabled), body.pp-app .pp-btn:hover:not(:disabled), body.pp-app .today-btn:hover,
body.pp-app .snapshot-btn:hover, body.pp-app .log-pay-submit:hover, body.pp-app .btn-add:hover,
body.pp-app .pay-log-btn:hover, body.pp-app .action-btn:hover, body.pp-app .status-btn:hover,
body.pp-app .filter-tab:hover, body.pp-app .plan-btn:hover, body.pp-app .login-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}
body.pp-app .btn:active, body.pp-app .pp-btn:active, body.pp-app .status-btn:active, body.pp-app .login-btn:active {
  transform: translateY(0) scale(0.97); transition-duration: 0.08s !important;
}
body.pp-app .btn::after, body.pp-app .pp-btn::after, body.pp-app .today-btn::after, body.pp-app .snapshot-btn::after,
body.pp-app .log-pay-submit::after, body.pp-app .btn-add::after, body.pp-app .pay-log-btn::after, body.pp-app .login-btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  transform: translateX(-130%);
  transition: transform 0.7s var(--ux-ease-out);
}
body.pp-app .btn:hover::after, body.pp-app .pp-btn:hover::after, body.pp-app .today-btn:hover::after,
body.pp-app .snapshot-btn:hover::after, body.pp-app .log-pay-submit:hover::after, body.pp-app .btn-add:hover::after,
body.pp-app .pay-log-btn:hover::after, body.pp-app .login-btn:hover::after { transform: translateX(130%); }
body.pp-app .filter-tab.active, body.pp-app .filter-tab.on { box-shadow: 0 8px 18px -10px rgba(33, 20, 12, 0.6); }

/* ── Chips and pills ──────────────────────────────────────────────────── */
body.pp-app .stat-chip, body.pp-app .month-stat-chip {
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.78) !important;
  border-color: rgba(255, 255, 255, 0.95) !important;
  box-shadow: var(--ux-shadow) !important;
  font-weight: 700;
  transition: transform 0.4s var(--ux-ease-spring);
}
body.pp-app .stat-chip:hover, body.pp-app .month-stat-chip:hover { transform: translateY(-2px) rotate(-1deg); }
body.pp-app .stat-chip span, body.pp-app .stat-chip .stat-num { font-family: var(--ux-f-display); font-weight: 800; }
body.pp-app .status-tag, body.pp-app .pay-status, body.pp-app .demo-status-badge, body.pp-app .status-badge,
body.pp-app .status-pill, body.pp-app .pay-status-pill, body.pp-app .level-badge, body.pp-app .dst-badge {
  border-radius: 999px !important;
  letter-spacing: 0.06em;
}

/* ── Forms ────────────────────────────────────────────────────────────── */
body.pp-app input[type="text"], body.pp-app input[type="number"], body.pp-app input[type="date"],
body.pp-app input[type="time"], body.pp-app input[type="email"], body.pp-app input[type="password"],
body.pp-app input[type="search"], body.pp-app input[type="tel"], body.pp-app input[type="url"],
body.pp-app input:not([type]), body.pp-app select, body.pp-app textarea {
  border-radius: 12px !important;
  transition: border-color 0.2s, box-shadow 0.3s var(--ux-ease-out), background-color 0.2s;
}
body.pp-app input[type="text"]:focus, body.pp-app input[type="number"]:focus, body.pp-app input[type="date"]:focus,
body.pp-app input[type="time"]:focus, body.pp-app input[type="email"]:focus, body.pp-app input[type="password"]:focus,
body.pp-app input[type="search"]:focus, body.pp-app input[type="tel"]:focus, body.pp-app input[type="url"]:focus,
body.pp-app input:not([type]):focus, body.pp-app select:focus, body.pp-app textarea:focus {
  border-color: rgba(242, 169, 59, 0.9) !important;
  box-shadow: 0 0 0 4px rgba(242, 169, 59, 0.18), 0 8px 18px -12px rgba(191, 122, 27, 0.7) !important;
  outline: none !important;
  background-color: #fff;
}
body.pp-app input[type="checkbox"], body.pp-app input[type="radio"] { accent-color: #c46a12; }

/* ── Modals and toasts ────────────────────────────────────────────────── */
body.pp-app .modal-overlay {
  background: rgba(26, 15, 8, 0.45) !important;
  backdrop-filter: blur(6px) saturate(130%);
  -webkit-backdrop-filter: blur(6px) saturate(130%);
}
body.pp-app .modal {
  border-radius: 26px !important;
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 40px 90px -30px rgba(26, 15, 8, 0.65) !important;
  animation: pp-modal-in 0.5s var(--ux-ease-spring) both;
}
@keyframes pp-modal-in { from { opacity: 0; transform: translateY(18px) scale(0.94); } to { opacity: 1; transform: none; } }
body.pp-app .toast {
  border-radius: 999px !important;
  background: rgba(26, 15, 8, 0.92) !important;
  color: #fff4e6 !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.6) !important;
  font-weight: 650;
}

/* ── Tables ───────────────────────────────────────────────────────────── */
body.pp-app .att-table thead th, body.pp-app .pay-history-table thead th, body.pp-app .table-container thead th {
  background: linear-gradient(180deg, #2a1810, #1f120b) !important;
  color: #f7e6cf !important;
  letter-spacing: 0.08em;
}
body.pp-app .att-table tbody tr, body.pp-app .table-container tbody tr { transition: background-color 0.2s; }
body.pp-app .att-table tbody tr:hover, body.pp-app .table-container tbody tr:hover { background: rgba(242, 169, 59, 0.07) !important; }

/* ── Schedule ─────────────────────────────────────────────────────────── */
body.pp-app .week-grid { border-radius: 24px !important; overflow: hidden; box-shadow: var(--ux-shadow-lg) !important; }
body.pp-app .day-col-header { background: linear-gradient(180deg, #2c1a11, #20130b) !important; }
body.pp-app .day-col-header.is-today { background: var(--ux-sun) !important; box-shadow: 0 10px 24px -12px rgba(236, 106, 44, 0.9); }
body.pp-app .stu-chip {
  border-radius: 14px !important;
  transition: transform 0.4s var(--ux-ease-spring), box-shadow 0.3s var(--ux-ease-out) !important;
}
body.pp-app .stu-chip:hover { transform: translateY(-2px) scale(1.015); box-shadow: 0 14px 26px -14px rgba(33, 20, 12, 0.55) !important; }
body.pp-app .clock { border-radius: 16px !important; background: linear-gradient(160deg, #2c1a11, #170d07) !important; box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important; }
body.pp-app .clock .t, body.pp-app .clock strong, body.pp-app .clock b { font-variant-numeric: tabular-nums; }
body.pp-app .add-session-btn { border-radius: 12px !important; transition: background-color 0.2s, transform 0.3s var(--ux-ease-spring); }
body.pp-app .add-session-btn:hover { transform: translateY(-1px); }

/* ── Parent dashboard ─────────────────────────────────────────────────── */
body.pp-app .att-rate-fill { background: linear-gradient(90deg, #2f7a54, #3fa36f, #f2a93b) !important; background-size: 200% 100% !important; animation: pp-fill-shift 6s ease-in-out infinite alternate; }
@keyframes pp-fill-shift { to { background-position: 100% 0; } }
body.pp-app .att-day { border-radius: 9px !important; transition: transform 0.3s var(--ux-ease-spring); }
body.pp-app .att-day:hover { transform: scale(1.12); }
body.pp-app .att-student-name { font-size: clamp(2rem, 4.6vw, 3rem) !important; line-height: 1.02; }

/* ── Kid dashboard ────────────────────────────────────────────────────── */
body.pp-kid .plusJakartaSans { font-family: var(--ux-f-display) !important; letter-spacing: -0.02em; }
body.pp-kid .inter { font-family: var(--ux-f-body) !important; }
body.pp-kid .mission { position: relative; overflow: hidden; isolation: isolate; box-shadow: 0 30px 60px -28px rgba(29, 94, 60, 0.75) !important; }
body.pp-kid .mission::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.18) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: pp-sheen 5s 1.2s ease-in-out infinite;
}
body.pp-kid .mission > * { position: relative; z-index: 1; }
@keyframes pp-sheen { 0%, 65% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
body.pp-kid .mini-board { animation: pp-float 4.5s ease-in-out infinite; }
@keyframes pp-float { 50% { transform: translateY(-6px) rotate(-2deg); } }
body.pp-kid .playbtn { animation: pp-pulse 2.4s ease-out infinite; }
@keyframes pp-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55); } 70%, 100% { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); } }
body.pp-kid .tile, body.pp-kid .play-card {
  transition: transform 0.45s var(--ux-ease-spring), box-shadow 0.35s var(--ux-ease-out) !important;
}
body.pp-kid .tile:hover, body.pp-kid .play-card:hover { transform: translateY(-5px) rotate(-1deg) !important; box-shadow: var(--ux-shadow-lg) !important; }
body.pp-kid .tile .ic, body.pp-kid .play-card .ic { transition: transform 0.5s var(--ux-ease-spring); }
body.pp-kid .tile:hover .ic, body.pp-kid .play-card:hover .ic { transform: rotate(-12deg) scale(1.15); }
body.pp-kid .pp-chip { transition: transform 0.4s var(--ux-ease-spring); }
body.pp-kid .pp-chip:hover { transform: translateY(-2px) scale(1.06); }
body.pp-kid .pp-nav {
  background: rgba(255, 252, 245, 0.86) !important;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 -12px 30px -18px rgba(33, 20, 12, 0.35) !important;
}
body.pp-kid .pp-navbtn { transition: transform 0.35s var(--ux-ease-spring), color 0.2s; }
body.pp-kid .pp-navbtn:active { transform: scale(0.92); }
body.pp-kid .pp-navbtn.on .nb { box-shadow: 0 8px 18px -10px rgba(29, 94, 60, 0.8); }
body.pp-kid .hw-row { transition: transform 0.4s var(--ux-ease-spring), box-shadow 0.3s; }
body.pp-kid .hw-row:hover { transform: translateX(4px); }
body.pp-kid .rbadge { transition: transform 0.45s var(--ux-ease-spring); }
body.pp-kid .rbadge:hover { transform: translateY(-3px) rotate(-6deg) scale(1.08); }
body.pp-kid .nextbar i { transition: width 1.4s var(--ux-ease-out); }
/* Coach's corner used to run edge to edge under a 760px home column. */
body.pp-kid #panel-home > .sec-h, body.pp-kid #panel-recaps { max-width: 1080px; margin-left: auto !important; margin-right: auto !important; padding-left: 16px; padding-right: 16px; }

/* ── Sign-in ──────────────────────────────────────────────────────────── */
body.pp-login { display: grid !important; grid-template-columns: minmax(0, 1fr); align-items: stretch; justify-content: stretch; min-height: 100svh; }
body.pp-login::before { display: none; }
.login-art { display: none; }
body.pp-login .login-wrapper { place-self: center; width: min(420px, calc(100vw - 32px)); padding: 40px 0; position: relative; z-index: 1; }
body.pp-login .login-brand img { animation: pp-bob 4s ease-in-out infinite; }
@keyframes pp-bob { 50% { transform: translateY(-5px) rotate(-4deg); } }
body.pp-login .login-brand h1 { font-size: 2.1rem; }
body.pp-login .login-card {
  border-radius: 26px !important;
  background: rgba(255, 255, 255, 0.86) !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 2px 6px rgba(33, 20, 12, 0.05), 0 40px 80px -36px rgba(33, 20, 12, 0.45) !important;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  position: relative; overflow: hidden;
}
body.pp-login .login-card::before { height: 3px !important; background: var(--ux-sun) !important; }
body.pp-login .login-btn { border-radius: 14px !important; background-color: #2b1a10; }
body.pp-login .login-error.show { animation: pp-shake 0.42s; }
@keyframes pp-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@media (min-width: 960px) {
  body.pp-login { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .login-art {
    display: block; position: relative; overflow: hidden;
    margin: 18px 0 18px 18px; border-radius: 32px;
    box-shadow: 0 40px 90px -40px rgba(33, 20, 12, 0.7);
  }
  .login-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; animation: pp-kenburns 22s var(--ux-ease-out) both; }
  @keyframes pp-kenburns { from { transform: scale(1.18); } to { transform: scale(1.02); } }
  .login-art::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(26, 15, 8, 0) 30%, rgba(26, 15, 8, 0.82) 100%);
  }
  .login-art-copy { position: absolute; left: 44px; right: 44px; bottom: 44px; z-index: 1; color: #fff4e6; }
  .login-art-copy .k { display: inline-block; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.22); font: 800 0.72rem/1 var(--ux-f-body); letter-spacing: 0.16em; text-transform: uppercase; }
  .login-art-copy h2 { margin: 16px 0 10px; font: 800 clamp(2.2rem, 3.6vw, 3.2rem)/1 var(--ux-f-display); letter-spacing: -0.035em; color: #fff; }
  .login-art-copy p { margin: 0; max-width: 38ch; font-size: 1.05rem; line-height: 1.55; color: rgba(255, 244, 230, 0.85); }
  .login-art-copy > * { animation: pp-rise 0.9s var(--ux-ease-out) both; }
  .login-art-copy > :nth-child(2) { animation-delay: 0.12s; }
  .login-art-copy > :nth-child(3) { animation-delay: 0.24s; }
}
body.pp-login .login-wrapper > * { animation: pp-rise 0.8s var(--ux-ease-out) both; }
body.pp-login .login-wrapper > :nth-child(2) { animation-delay: 0.1s; }
body.pp-login .login-wrapper > :nth-child(3) { animation-delay: 0.2s; }
@keyframes pp-rise { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

/* ── Entrance: the first render rises in, staggered. ui/app.js adds
   .ui-settled once it has landed, so later re-renders are instant. ── */
html:not(.ui-settled) body.pp-app :is(.student-card, .pay-card, .demo-card, .v-row, .region-card, .hw-batch,
  .metric-card, .chart-card, .att-stat, .stat-chip, .month-stat-chip, .day-col, .stu-chip, .att-month,
  .elo-card, .tile, .play-card, .hw-row, .mission, .rbadge, .settings-card, .card) {
  animation: pp-card-in 0.7s var(--ux-ease-out) both;
}
@keyframes pp-card-in { from { opacity: 0; transform: translateY(16px) scale(0.985); } to { opacity: 1; transform: none; } }
html:not(.ui-settled) body.pp-app :is(.student-card, .pay-card, .demo-card, .v-row, .metric-card, .att-stat, .stat-chip, .day-col, .stu-chip, .tile, .play-card, .hw-row, .region-card):nth-child(2) { animation-delay: 0.05s; }
html:not(.ui-settled) body.pp-app :is(.student-card, .pay-card, .demo-card, .v-row, .metric-card, .att-stat, .stat-chip, .day-col, .stu-chip, .tile, .play-card, .hw-row, .region-card):nth-child(3) { animation-delay: 0.1s; }
html:not(.ui-settled) body.pp-app :is(.student-card, .pay-card, .demo-card, .v-row, .metric-card, .att-stat, .stat-chip, .day-col, .stu-chip, .tile, .play-card, .hw-row, .region-card):nth-child(4) { animation-delay: 0.15s; }
html:not(.ui-settled) body.pp-app :is(.student-card, .pay-card, .demo-card, .v-row, .metric-card, .att-stat, .stat-chip, .day-col, .stu-chip, .tile, .play-card, .hw-row, .region-card):nth-child(5) { animation-delay: 0.2s; }
html:not(.ui-settled) body.pp-app :is(.student-card, .pay-card, .demo-card, .v-row, .metric-card, .att-stat, .stat-chip, .day-col, .stu-chip, .tile, .play-card, .hw-row, .region-card):nth-child(6) { animation-delay: 0.25s; }
html:not(.ui-settled) body.pp-app :is(.student-card, .pay-card, .demo-card, .v-row, .metric-card, .att-stat, .stat-chip, .day-col, .stu-chip, .tile, .play-card, .hw-row, .region-card):nth-child(7) { animation-delay: 0.3s; }
html:not(.ui-settled) body.pp-app :is(.student-card, .pay-card, .demo-card, .v-row, .metric-card, .att-stat, .stat-chip, .day-col, .stu-chip, .tile, .play-card, .hw-row, .region-card):nth-child(n+8) { animation-delay: 0.35s; }
html:not(.ui-settled) body.pp-app #headerActions a, html:not(.ui-settled) body.pp-app header .nav-links a { animation: pp-card-in 0.5s var(--ux-ease-out) both; }

/* ── Reduced motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body.pp-app *, body.pp-app *::before, body.pp-app *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}