/* Portal additions on top of tokens.css + dashboard.css (login, admin, alerts, install hint). */
.p-user .who{color:#e4ecff;font-weight:600;font-size:.94rem}
.eyebrow-deep{color:var(--ss-gold-deep)}
.inline-form{display:inline;margin:0}
.kid-switch{display:flex;gap:.5rem;margin:1rem 0 0;flex-wrap:wrap}
.kid-switch .chip{text-decoration:none;min-height:44px;display:inline-flex;align-items:center;padding:0 1rem}
.video-frame video.vault-video{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;background:#000}
.btn-join[aria-disabled=true]{cursor:not-allowed}
.login-wrap{display:grid;place-items:center;min-height:calc(100vh - 140px);padding-block:2rem}
.login-card{width:min(460px,100%);text-align:center;position:relative}
.login-mascot{margin:-10px auto 6px;display:block}
.form{display:grid;gap:.55rem;text-align:left;margin-top:1.2rem}
.form label{font-family:var(--ss-font-head);font-weight:700;font-size:.95rem;color:var(--ss-navy)}
.form input,.form select{font:inherit;font-size:1rem;min-height:48px;padding:.6rem .9rem;border-radius:var(--ss-r-md);border:2px solid var(--ss-line);background:#fff;color:var(--ss-ink);width:100%}
.form input:focus{border-color:var(--ss-navy-3);outline:none;box-shadow:var(--ss-focus-ring)}
.form .btn{margin-top:.8rem;justify-content:center}
.form-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.form-grid label{display:grid;gap:.35rem}
.form-grid .check{display:flex;gap:.6rem;align-items:center;font-weight:600;grid-column:1/-1}
.form-grid .check input{width:22px;min-height:22px}
.login-help{font-size:var(--ss-fs-sm);color:var(--ss-muted);margin-top:1.2rem}
.login-help a{color:var(--ss-navy-3);font-weight:600}
.alert{border-radius:var(--ss-r-md);padding:.8rem 1rem;margin:1rem 0;font-size:var(--ss-fs-sm);text-align:left}
.alert-error{background:var(--ss-blush);color:var(--ss-danger)}
.alert-info{background:var(--ss-sky-soft);color:var(--ss-navy)}
.alert-ok{background:var(--ss-mint);color:var(--ss-success)}
.temp-pw{font-size:1.1rem;font-weight:700;background:#fff;padding:.1rem .4rem;border-radius:6px;user-select:all}
.admin-card{margin-top:1.5rem}
.admin-card .meta{font-size:var(--ss-fs-sm);color:var(--ss-muted);margin-top:.8rem}
.table-wrap{overflow-x:auto}
.admin-table{width:100%;border-collapse:collapse;font-size:var(--ss-fs-sm)}
.admin-table th,.admin-table td{text-align:left;padding:.6rem;border-bottom:1px solid var(--ss-line);vertical-align:top}
.install-hint{position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:9000;width:min(420px,calc(100vw - 24px));background:#fff;color:var(--ss-ink);border-radius:var(--ss-r-card);box-shadow:var(--ss-shadow-lg);border:1px solid var(--ss-line);padding:1rem 1.2rem}
.install-hint[hidden]{display:none}
.install-hint ol{margin:.5rem 0;padding-left:1.2rem;font-size:var(--ss-fs-sm)}
.ih-actions{display:flex;gap:.5rem;justify-content:flex-end;flex-wrap:wrap}
@media (forced-colors:active){.install-hint,.alert{border:1px solid CanvasText}}
/* v1.1 portal additions */
.btn-join:disabled{background:#e9ecf3;color:var(--ss-text-muted);box-shadow:none;cursor:not-allowed}
.btn-join:disabled::after,.btn-join:disabled::before{animation:none;display:none}
.cd-head[hidden],.cd-digits[hidden],.vault-ctrls[hidden]{display:none}
.cal .upcoming.is-today::after{content:"Today"}
/* ===== v1.2: admin panel, installer, change-password (all on tokens.css) ===== */
.btn-primary{background:var(--ss-coral);color:var(--ss-navy);box-shadow:var(--ss-shadow-coral)}   /* ONE per screen */
.btn-primary::before{background:var(--ss-gold)}
.btn-danger{border-color:var(--ss-danger);color:var(--ss-danger);background:#fff}
.btn-danger::before{background:var(--ss-blush)}
.btn-danger:hover{color:var(--ss-danger)}
.form input,.form select,.form textarea{border-radius:var(--ss-r-md)}          /* 16px */
.form input:focus-visible,.form select:focus-visible,.form textarea:focus-visible,.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--ss-navy-3);box-shadow:var(--ss-focus-ring)}
.form textarea{font:inherit;padding:.7rem .9rem;border:2px solid var(--ss-line);width:100%;min-height:120px}
.form .hint{font-size:var(--ss-fs-xs);color:var(--ss-muted);margin:-.2rem 0 .3rem}
.admin-wrap{padding-bottom:4rem}
.admin-nav{margin:1rem 0 .5rem;overflow-x:auto;-webkit-overflow-scrolling:touch}
.admin-nav ul{list-style:none;display:flex;gap:.4rem;margin:0;padding:0 0 .4rem;white-space:nowrap}
.admin-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 1rem;border-radius:var(--ss-r-pill);background:#fff;border:1px solid var(--ss-line);color:var(--ss-navy);font-family:var(--ss-font-head);font-weight:700;font-size:.92rem;text-decoration:none}
.admin-nav a[aria-current=page]{background:var(--ss-navy);color:#fff;border-color:var(--ss-navy)}
.admin-h1{margin:.6rem 0 .4rem}
.help{background:var(--ss-sky-soft);color:var(--ss-navy);border-radius:var(--ss-r-md);padding:.8rem 1rem;font-size:var(--ss-fs-sm);margin:.4rem 0 1rem}
.admin-list{list-style:none;margin:0;padding:0}
.admin-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding:.8rem 0;border-bottom:1px solid var(--ss-line)}
.admin-row small{display:block;color:var(--ss-muted);font-size:var(--ss-fs-xs);margin-top:.15rem}
.admin-row.is-off{opacity:.6}
.btn-row{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.btn-row form{margin:0}
.chip.ok{background:var(--ss-mint);color:var(--ss-success)}
.chip.off{background:var(--ss-blush);color:var(--ss-danger)}
.chip.warn{background:var(--ss-butter);color:var(--ss-gold-deep)}
.code-big{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.05rem;font-weight:700;background:var(--ss-butter);color:var(--ss-navy);padding:.3rem .6rem;border-radius:8px;margin-right:.4rem}
.field{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.field .lbl{width:100%;font-family:var(--ss-font-head);font-weight:700;font-size:.95rem;color:var(--ss-navy)}
.kid-picker{grid-column:1/-1;border:2px solid var(--ss-line);border-radius:var(--ss-r-md);padding:.8rem 1rem}
.kid-picker legend{font-family:var(--ss-font-head);font-weight:700;color:var(--ss-navy);padding:0 .3rem}
.kid-picker .checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.3rem;margin-top:.6rem}
.check{display:flex;gap:.5rem;align-items:center;min-height:44px;font-weight:600}
.check input{width:22px;height:22px;min-height:22px;flex:none}
.sub-h{margin-top:1.4rem}
.child-row{border-bottom:1px dashed var(--ss-line);padding-bottom:1rem;margin-bottom:1rem}
.danger-zone{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--ss-line)}
.welcome-card{border:2px solid var(--ss-gold)}
.welcome-text{width:100%;font:inherit;font-size:.95rem;border:2px solid var(--ss-line);border-radius:var(--ss-r-md);padding:.8rem;margin:.6rem 0;background:var(--ss-paper)}
.status-badge{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--ss-font-head);font-weight:700;border-radius:var(--ss-r-pill);padding:.45rem 1rem;font-size:1rem}
.status-badge.not_connected{background:#e9ecf3;color:var(--ss-muted)}
.status-badge.connected{background:var(--ss-mint);color:var(--ss-success)}
.status-badge.problem{background:var(--ss-blush);color:var(--ss-danger)}
.rec-row{display:grid;grid-template-columns:1fr;gap:.6rem;padding:1rem 0;border-bottom:1px solid var(--ss-line)}
.rec-row .class-pick{display:flex;flex-wrap:wrap;gap:.4rem}
.steps-select{min-width:220px}
.install-steps{counter-reset:s;list-style:none;padding:0}
@media (max-width:640px){.admin-row{align-items:flex-start}.admin-row .btn-row{width:100%}}
/* Artisian admin design fixes v1.3 - paste into portal.css */
html{scroll-padding-top:var(--p-header-h,76px)}
/* 1. change-password: no sticky header, Log out moved below card as "Not you? Log out" */
body.page-change-password .p-header{position:static}
/* 3. Staircase selects */
.steps-select{min-height:48px;border-radius:var(--ss-r-md);border:2px solid var(--ss-line);padding:.5rem .8rem;font:inherit;background:#fff}
.steps-select:focus-visible{outline:3px solid var(--ss-gold);outline-offset:3px}
.admin-row .steps-select{flex:1;min-width:0}
/* 4. AA focus on light surfaces */
.admin-wrap :focus-visible{outline-color:var(--ss-gold)}
.p-bar :focus-visible{outline-color:var(--ss-gold)}
/* 5. one coral per screen */
.admin-wrap .chip.new{background:var(--ss-blush);color:var(--ss-danger)}
.admin-card .btn-primary{margin-top:.8rem}
/* 6. mobile tabs hint */
.admin-nav{scroll-snap-type:x proximity;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
/* 7. tap targets */
.admin-wrap summary{min-height:44px;display:flex;align-items:center;cursor:pointer}
/* 8. file pickers */
.form input[type=file]::file-selector-button{font:700 .9rem var(--ss-font-head);border:2px solid var(--ss-navy);background:#fff;color:var(--ss-navy);border-radius:var(--ss-r-pill);padding:.45rem 1rem;margin-right:.8rem;cursor:pointer}
/* 9. installer rows */
.admin-row>span:first-child{flex:1;min-width:0;text-align:left;overflow-wrap:anywhere}
.admin-row .chip{flex:none}
/* 11. minor */
.stats .stat{min-width:calc(50% - .4rem)}
/* v1.3 login: WhatsApp help line under the login form */
.login-wa{font:400 14px/1.5 "Inter Variable","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;color:#4a5672;text-align:center;margin:16px 0 0}
.login-wa a{color:#16336e;text-decoration:underline;display:inline-flex;align-items:center;gap:4px;vertical-align:middle}
.login-wa .wa-ico{flex:none}
@media (max-width:640px){.login-wa a{min-height:44px}}
/* v1.5 trial: layout comes from trial.css (Artisian). Replaces the mockup's inline style (CSP: no inline styles). */
.hero.t-hero-short{grid-template-columns:1fr}
.t-note blockquote p{margin:0}
.chip.trial-tag{background:var(--ss-butter,#fff3c4);color:#6b4d00}

/* header logo: icon-192 has transparent corners, keep it visible on the navy bar */
.p-brand img{background:#fff;border-radius:50%;padding:2px}
/* v1.13 keep me signed in + calendar + stage visits */
.keep-check{display:flex;align-items:center;gap:.6rem;min-height:48px;font:500 15px/1.4 "Inter Variable","Inter",system-ui,sans-serif;color:var(--ss-navy);cursor:pointer;margin:.4rem 0 0}
.keep-check input{width:22px;height:22px;margin:0;accent-color:var(--ss-gold);flex:none}
.keep-hint{font:400 13px/1.45 "Inter Variable","Inter",system-ui,sans-serif;color:var(--ss-muted);margin:0 0 1rem 2.1rem}
.cal-card,.visits-card{background:var(--ss-cream,#fff8ec);border-radius:28px;padding:1.2rem 1.4rem;margin:1.2rem 0}
.cal-card h3,.visits-card h3{margin:0 0 .4rem}
.cal-link{display:block;width:100%;font:400 13px/1.4 ui-monospace,monospace;padding:.7rem;border-radius:12px;border:1px solid rgba(0,0,0,.15);background:#fff;margin:.6rem 0;overflow-wrap:anywhere}
.cal-actions{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.cal-actions .btn{min-height:48px}
.cal-small{font-size:13px;color:var(--ss-muted);margin:.5rem 0 0}
.visits-n{font:600 17px/1.4 "Inter Variable","Inter",system-ui,sans-serif;color:var(--ss-navy);margin:0}
.btn-cal-new{background:transparent;border:2px solid var(--ss-navy);color:var(--ss-navy)}
/* v1.14 avatar picker */
.av-card{background:var(--ss-cream);border-radius:28px;padding:1.2rem 1.4rem;margin:1.2rem 0}
.av-card h3{margin:0 0 .4rem}
.av-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:.75rem;border:0;padding:0;margin:.8rem 0 1rem}
.av-opt{position:relative;display:grid;justify-items:center;gap:.35rem;padding:.6rem .4rem;border-radius:20px;border:2px solid transparent;cursor:pointer;font:500 13px/1.3 var(--ss-font-body);color:var(--ss-navy);text-align:center;min-height:48px}
.av-opt input{position:absolute;opacity:0;width:1px;height:1px}
.av-opt img{width:72px;height:72px;border-radius:20px}
.av-opt:has(input:checked){border-color:var(--ss-gold);background:var(--ss-white);box-shadow:var(--ss-shadow-gold)}
.av-opt:has(input:focus-visible){box-shadow:var(--ss-focus-ring)}
.inv-ready-link{font-weight:700;color:var(--ss-navy);text-decoration:underline}
/* v1.15 type: Fredoka for every heading and card heading; Inter (via --ss-font-head) for buttons, nav, labels, eyebrows */
h1,h2,h3,h4,.greet,.section-title,.card-title,.video-meta h3,.step h3,.panel h3,.cal-card h3,.visits-card h3,.av-card h3,.ff-card h3{font-family:var(--ss-font-display)}
.btn,button,.admin-nav a,label,.lbl,legend,.eyebrow{font-family:var(--ss-font-head)}
/* v1.15 tap targets of at least 48px */
.skip{display:inline-flex;align-items:center;min-height:48px;min-width:48px}
.p-brand{min-height:48px;min-width:48px}
.login-wa a,.login-help a,.drive-off-link{display:inline-flex;align-items:center;min-height:48px}
.login-wa a{vertical-align:middle}
body.has-install-hint{padding-bottom:var(--ih-pad,160px)}
.login-mascot{width:96px;height:96px}
.visits-card{background:var(--ss-cream);border-radius:28px}
.visits-star{color:#ffc83d}
/* v1.16 signed-out pages (no nav): "Speak & Sparkle" wordmark beside the round logo at every width, Fredoka 18px cream; link >= 48px */
.p-header.is-signed-out .p-brand.p-brand-word{display:inline-flex;align-items:center;gap:10px;min-height:48px}
.p-header.is-signed-out .p-brand.p-brand-word span{display:inline;font-family:var(--ss-font-display);font-size:18px;font-weight:600;line-height:1.2;color:var(--ss-cream);white-space:nowrap}
.p-header.is-signed-out .p-brand.p-brand-word span em{color:inherit}
/* v1.16 friendly "please try once more" note (stale form key) */
.again-wrap{margin-top:16px}
.again-note{margin:0 auto;max-width:560px;padding:14px 18px;background:var(--ss-cream);border:1px solid rgba(255,200,61,.6);border-radius:28px;color:var(--ss-ink);font:500 var(--ss-fs-base)/1.5 var(--ss-font-body)}
/* v1.16 busy submit button: same colour at 70%, width locked by portal.js, small slowly spinning gold star */
.is-busy,.is-busy:disabled,button.is-busy[disabled]{opacity:.7;cursor:progress;filter:none}
.busy-star{display:inline-block;margin-right:8px;color:#ffc83d;font-size:.9em;line-height:1;animation:ss-busy-spin 2.4s linear infinite}
@keyframes ss-busy-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.busy-star{animation:none}}
.busy-note{margin:8px 0 0;font-size:var(--ss-fs-sm);color:var(--ss-muted)}
.go-wrap{max-width:460px;margin:0 auto}
.go-card{text-align:center}
.go-btn{min-height:48px;display:inline-flex;align-items:center;justify-content:center}
.go-hint{margin-top:12px;color:var(--ss-navy,#0c1f45);font-size:14px}
/* v1.18.3 cream notes: sign-in "class has started", dashboard "just finished" */
.alert.alert-cream{background:#fff7e8;border:1.5px solid #ffc83d;border-radius:20px;color:#0c1f45;font-family:Inter,system-ui,sans-serif;font-size:16px}
.page-go .go-card{background:#fff}

/* v1.19: the installed app never shows install prompts */
.is-standalone #install-hint,.is-standalone .install-hint,.is-standalone .p-install,.is-standalone [data-install-app]{display:none !important}
html.is-standalone body.has-install-hint{padding-bottom:0}
/* v1.19 family dashboard: what we did in class (topic, word, attended / missed) */
.hist-t{font-size:var(--ss-fs-sm);margin:1rem 0 .4rem}
.hist-list{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.hist-row{display:grid;grid-template-columns:auto 1fr;gap:.1rem .7rem;padding:.55rem .7rem;border-radius:var(--ss-r-md);background:var(--ss-sky-soft);font-size:var(--ss-fs-sm);line-height:var(--ss-lh-snug)}
.hist-row .hist-date{font-weight:var(--ss-fw-bold);white-space:nowrap;grid-row:span 2}
.hist-row .hist-topic{font-weight:var(--ss-fw-semi)}
.hist-row .hist-word{color:var(--ss-muted)}
.hist-row .hist-att{grid-column:2;color:var(--ss-success);font-weight:var(--ss-fw-semi)}
.hist-row.is-missed{background:var(--ss-blush)}
.hist-row.is-missed .hist-att{color:var(--ss-danger)}
/* v1.19.2 public install page (/portal/app/) */
.app-card{text-align:center}
.app-icon{display:block;margin:0 auto .6rem;border-radius:22px;box-shadow:var(--ss-shadow-md)}
.app-btn{min-height:56px;font-size:1.15rem;padding-inline:1.8rem;display:inline-flex;align-items:center;justify-content:center;margin:.6rem 0 .2rem}
.app-sub{font-size:var(--ss-fs-md);margin:1.4rem 0 .4rem}
.app-steps{text-align:left;margin:0 auto;padding-left:1.2rem;max-width:26rem;font-size:var(--ss-fs-sm);line-height:1.5}
.app-steps li+li{margin-top:.5rem}
.app-login{margin-top:1.4rem;font-size:var(--ss-fs-sm)}
.app-login a{font-weight:var(--ss-fw-bold)}
.app-installed{display:none}
.is-standalone .app-browser{display:none}
.is-standalone .app-installed{display:block}
.app-done{font-size:var(--ss-fs-lg);margin:.4rem 0 .6rem}
/* v1.19.3 family history: "Show all classes" */
.hist-more{margin-top:.5rem}
.hist-more>summary{cursor:pointer;min-height:44px;display:inline-flex;align-items:center;font-weight:var(--ss-fw-semi);color:var(--ss-navy-2)}
.hist-more>summary:focus-visible{outline:3px solid var(--ss-gold,#ffc83d);outline-offset:2px;border-radius:8px}
.hist-more>.hist-list{margin-top:.4rem}

/* v1.21 show password */
.pw-wrap{position:relative;display:block}
.pw-wrap input{width:100%;padding-right:9rem}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);min-height:40px;min-width:56px;padding:0 .7rem;border:0;border-radius:8px;background:transparent;color:var(--ss-navy);font:600 14px/1 "Inter Variable","Inter",system-ui,sans-serif;text-decoration:underline;cursor:pointer}
.pw-toggle:focus-visible{outline:2px solid var(--ss-gold);outline-offset:2px}

/* v1.21.1 batch rename inline form & gold-bordered action button */
.batch-rename-form{margin:.35rem 0 .65rem}
.batch-rename-row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.batch-rename-row input{flex:1 1 220px;min-width:0}
.batch-rename-cancel{border:0;background:transparent;color:var(--ss-navy);font:600 14px/1 "Inter Variable","Inter",system-ui,sans-serif;text-decoration:underline;cursor:pointer;padding:.4rem .5rem}
.batch-actions-row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-top:.75rem}
.batch-del-form{margin:0}
.btn-gold-line{background:transparent;border:1.5px solid #E5A93C;color:var(--ss-navy)}
.btn-gold-line:hover{background:rgba(229,169,60,.12)}