/* ============================================================================ DESIGN TOKENS — AIRIS design system (D1) ---------------------------------------------------------------------------- A branded, friendly, accessible (WCAG AA) light-first visual language. This deliberately SUPERSEDES the earlier flat "system colors" theme, which read as a bland admin tool. Every screen (landing, login, learner home, family dashboard, admin) is built on these tokens, so new surfaces inherit the look instead of being re-skinned. A dark mapping is staged for D8. Vanilla CSS, fully self-contained — NO external fonts/assets (CSP-safe). ========================================================================== */ :root { color-scheme: light; /* --- Brand palette --- */ --primary: #5b57e8; /* energetic, trustworthy indigo-violet */ --primary-strong: #4a46d6; /* hover / pressed fills, links on light */ --primary-shadow: #3f3bbf; /* bottom edge of chunky CTA */ --on-primary: #ffffff; --primary-soft: #ecebfd; /* tinted surface for selected/active */ --primary-tint: #f4f3fe; /* very light wash */ --secondary: #ff7a1a; /* warm coral-amber — coins / gamified accents */ --secondary-soft: #fff0e3; /* --- Semantic --- */ --ok: #0f7a4f; --ok-bg: #e6f5ee; --err: #c0362c; --err-bg: #fbeae8; --warn: #8a6400; --warn-bg: #fcf2dc; /* --- Neutral surfaces & ink (light-first) --- */ --bg: #f5f6fb; /* app canvas */ --surface: #ffffff; /* raised cards/panels */ --panel: #ffffff; --panel2: #f1f2f9; /* inset / subtle fill */ --ink: #1b1c2a; /* near-black, AA on light */ --ink-2: #3a3c52; --mute: #5a5e74; /* secondary text, AA on white */ --line: #e4e6f1; --line-soft: #eef0f7; /* --- Legacy aliases (existing rules reference these) --- */ --accent: var(--primary); --accent-ink: var(--on-primary); --accent-soft: var(--primary-soft); --field: #ffffff; --field-ink: var(--ink); --btn: #ffffff; --btn-ink: var(--ink); /* --- Type --- */ --font: ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "Cascadia Code", Consolas, monospace; --fs-display: 46px; --fs-h1: 32px; --fs-h2: 21px; --fs-h3: 16px; --fs-body: 15px; --fs-small: 12.5px; /* --- Spacing (4 / 8) --- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-8: 48px; /* --- Radius (rounded / friendly) --- */ --radius-sm: 8px; --radius: 12px; --radius-lg: 18px; --radius-pill: 999px; /* --- Elevation --- */ --sh-1: 0 1px 2px rgba(22,24,60,.06), 0 1px 3px rgba(22,24,60,.05); --sh-2: 0 4px 14px rgba(22,24,60,.09); --sh-3: 0 16px 40px rgba(22,24,60,.16); --ring: 0 0 0 3px var(--primary-soft); --speed: .18s; } /* ============================================================================ D8 — Dark theme. Light remains the designed default; this is a full, AA-aware remapping of the D1 tokens. An inline script resolves the scheme (stored pref → else prefers-color-scheme) and sets , so there is no flash and CSS only needs the explicit selector below. The app-bar toggle flips data-theme and persists the choice to localStorage (airis_theme). ========================================================================== */ :root[data-theme="dark"] { color-scheme: dark; /* Brand on dark: keep the FILL dark enough that white label text stays AA (white-on-#5b57e8 ≈ 4.8:1), while links use the lighter --primary-strong. */ --primary: #5b57e8; --primary-strong: #a6a3f8; /* links / hovered fills read brighter on dark */ --primary-shadow: #4039c4; --on-primary: #ffffff; --primary-soft: #2b2a4d; /* tinted active surface */ --primary-tint: #20203a; --secondary: #ff9447; --secondary-soft: #3a2a18; --ok: #5fd49a; --ok-bg: #14301f; --err: #f3897e; --err-bg: #3a1d1a; --warn: #e6c15a; --warn-bg: #322a12; --bg: #13141d; --surface: #1d1f2e; --panel: #1d1f2e; --panel2: #262a3d; --ink: #eef0f7; --ink-2: #c7cadb; --mute: #9aa0b8; /* AA on the dark surfaces */ --line: #2e3247; --line-soft: #262a3d; --field: #262a3d; --field-ink: var(--ink); --btn: #262a3d; --btn-ink: var(--ink); /* Deeper, softer elevation on a dark canvas + a brand-tinted focus ring. */ --sh-1: 0 1px 2px rgba(0,0,0,.40), 0 1px 3px rgba(0,0,0,.35); --sh-2: 0 6px 18px rgba(0,0,0,.48); --sh-3: 0 18px 44px rgba(0,0,0,.58); --ring: 0 0 0 3px rgba(125,121,242,.40); } /* Selector-specific fixes: spots that pair a semantic-bg with hardcoded dark text (unreadable once the bg goes dark), plus the light gold washes. */ :root[data-theme="dark"] .choice-ok, :root[data-theme="dark"] .practice-fb.ok { color: var(--ok); } :root[data-theme="dark"] .choice-bad, :root[data-theme="dark"] .practice-fb.bad { color: var(--err); } :root[data-theme="dark"] .pill.coin { color: #ffb471; } :root[data-theme="dark"] .reward-row.done { background: linear-gradient(135deg, #2e2410, var(--surface)); border-color: #6b5418; } /* Skeleton shimmer: the bright-white sweep is too hot on dark — soften it. */ :root[data-theme="dark"] .skeleton::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font: var(--fs-body)/1.55 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3 { margin: 0; line-height: 1.2; } a { color: var(--primary-strong); } ::selection { background: var(--primary-soft); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* ---- screen routing ---- */ .screen { display: none; } .screen.active { display: block; animation: screen-in .26s ease both; } #screen-app.active { display: flex; flex-direction: column; height: 100dvh; } @keyframes screen-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .screen.active { animation: none; } } /* ---- landing / presentation ---- */ .landing { max-width: 1040px; margin: 0 auto; padding: 9vh 24px 56px; text-align: center; } .logo-xl { font-size: 60px; color: var(--primary); display: block; filter: drop-shadow(0 6px 16px rgba(91,87,232,.30)); } .hero-title { font-size: var(--fs-display); letter-spacing: 1px; margin: 8px 0; font-weight: 800; background: linear-gradient(120deg, var(--primary), #8a6bff 60%, var(--secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-tag { font-size: 18px; color: var(--mute); max-width: 620px; margin: 0 auto 28px; line-height: 1.55; } .btn.big { font-size: 16px; padding: 13px 28px; border-radius: var(--radius-lg); } .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 60px; text-align: left; } .feat { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; background: var(--surface); box-shadow: var(--sh-1); transition: transform var(--speed), box-shadow var(--speed); } .feat:hover { transform: translateY(-3px); box-shadow: var(--sh-2); } .feat-ico { font-size: 24px; margin-bottom: 10px; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--primary-soft); } .feat h3 { font-size: var(--fs-h3); margin-bottom: 6px; } .feat p { color: var(--mute); font-size: 13.5px; margin: 0; } /* ---- login ---- */ .login-card { max-width: 400px; margin: 9vh auto; padding: 32px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); text-align: center; box-shadow: var(--sh-3); } .login-card .logo-xl { font-size: 42px; } .login-card h2 { margin: 8px 0 2px; font-size: 24px; } .login-card label { display: block; text-align: left; margin: 16px 0 4px; font-size: var(--fs-small); color: var(--mute); font-weight: 600; } .login-card .btn.primary { width: 100%; margin-top: 18px; padding: 12px; } .login-card .or { display: flex; align-items: center; gap: 10px; color: var(--mute); font-size: 11px; margin: 18px 0 0; } .login-card .or::before, .login-card .or::after { content: ""; flex: 1; height: 1px; background: var(--line); } .login-err { color: var(--err); background: var(--err-bg); border: 1px solid color-mix(in srgb, var(--err) 22%, transparent); border-radius: var(--radius-sm); padding: 9px 12px; margin-top: 12px; font-size: 13px; } .linkbtn { background: none; border: none; color: var(--primary-strong); cursor: pointer; margin-top: 16px; font-size: 13px; font-weight: 600; } .linkbtn:hover { text-decoration: underline; } .small { font-size: 11px; } /* ---- app bar (learner + admin) ---- */ .appbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; background: var(--surface); border-bottom: 1px solid var(--line); flex: 0 0 auto; box-shadow: var(--sh-1); } .appbar .brand { display: flex; gap: 8px; align-items: center; font-size: var(--fs-h3); font-weight: 700; } .appbar-right { display: flex; gap: 8px; align-items: center; } /* U9 — role chip: name + a small colored role dot; full role in tooltip/aria. U8 — also the button that opens the Account & settings drawer. */ .who-chip { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: var(--fs-small); font-weight: 600; color: var(--ink); margin-right: 2px; height: 30px; padding: 0 9px; border-radius: var(--radius-sm); border: 1px solid transparent; background: none; cursor: pointer; max-width: 240px; } .who-chip:hover { background: var(--panel2); border-color: var(--line); } .who-chip:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--primary); } .who-chip .who-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .role-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; line-height: 1; padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--role-color, var(--mute)) 16%, var(--surface)); color: var(--ink); border: 1px solid color-mix(in srgb, var(--role-color, var(--mute)) 38%, transparent); } .role-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--role-color, var(--mute)); flex: 0 0 auto; } /* ---- language switcher (U11 — compact, searchable combobox) --------------- A small globe+code trigger that opens a body-level searchable popover. Built to scale to dozens of languages: the popover filters by autonym/English/code, so the control stays the same size whether 2 or 50+ languages are enabled. */ .lang-trigger { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: var(--fs-small); font-weight: 700; line-height: 1; height: 30px; padding: 0 8px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; } .lang-trigger:hover { border-color: var(--primary); } .lang-trigger:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--primary); } .lang-trigger[aria-expanded="true"] { border-color: var(--primary); box-shadow: var(--ring); } .lang-trigger .lang-globe { font-size: 14px; line-height: 1; } .lang-trigger .lang-code { letter-spacing: .02em; } .lang-trigger .lang-caret { font-size: 9px; color: var(--mute); margin-left: -1px; } .lp-nav-actions .lang-trigger { background: transparent; } /* Mobile: icon-only trigger to save the narrow bar (code still in aria-label). */ @media (max-width: 480px) { .lang-trigger .lang-code, .lang-trigger .lang-caret { display: none; } .lang-trigger { padding: 0 7px; } } /* The popover lives at the level, positioned (fixed) under its trigger. */ .lang-pop { position: fixed; z-index: 200; width: min(320px, calc(100vw - 24px)); max-width: calc(100vw - 24px); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--sh-3); display: flex; flex-direction: column; overflow: hidden; } .lang-pop[hidden] { display: none; } .lang-pop-search { padding: 10px; border-bottom: 1px solid var(--line-soft); flex: 0 0 auto; } .lang-search { width: 100%; box-sizing: border-box; font: inherit; font-size: var(--fs-body); padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--bg); color: var(--ink); } .lang-search::placeholder { color: var(--mute); } .lang-search:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--primary); } .lang-list { list-style: none; margin: 0; padding: 6px; max-height: 320px; overflow-y: auto; } .lang-group { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mute); padding: 8px 10px 4px; } .lang-opt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; scroll-margin: 8px; } .lang-opt:hover, .lang-opt.active { background: var(--panel2); } .lang-opt[aria-selected="true"] { background: var(--primary-soft); } .lang-opt-native { font-weight: 600; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lang-opt-meta { font-size: var(--fs-small); color: var(--mute); flex: 0 0 auto; } .lang-opt-check { color: var(--primary); font-weight: 800; width: 14px; text-align: center; flex: 0 0 auto; visibility: hidden; } .lang-opt[aria-selected="true"] .lang-opt-check { visibility: visible; } .lang-empty { padding: 18px 12px; text-align: center; color: var(--mute); font-size: var(--fs-small); } /* ---- learner chat home ---- */ .chat-main { flex: 1 1 auto; display: flex; flex-direction: column; max-width: 820px; width: 100%; margin: 0 auto; padding: 16px; min-height: 0; } .chat-stream { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 8px 4px; } /* D3 — chat bubbles: a row of [avatar?][body]; the body is the rounded bubble. */ .msg { max-width: 82%; display: flex; gap: 8px; align-items: flex-end; } .msg-tutor { align-self: flex-start; } .msg-you { align-self: flex-end; flex-direction: row-reverse; } /* Sender grouping: tighten consecutive same-sender bubbles, hide the repeat avatar. */ .msg-tutor + .msg-tutor, .msg-you + .msg-you { margin-top: -6px; } .msg-tutor + .msg-tutor .msg-avatar { visibility: hidden; } .msg-avatar { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; background: var(--primary-soft); box-shadow: var(--sh-1); } .msg-body { min-width: 0; padding: 11px 15px; border-radius: var(--radius-lg); box-shadow: var(--sh-1); } .msg-text { white-space: pre-wrap; line-height: 1.55; overflow-wrap: anywhere; } .msg-text.md { white-space: normal; } .msg-text.md p { margin: 0 0 8px; } .msg-text.md p:last-child { margin-bottom: 0; } .msg-text.md ul, .msg-text.md ol { margin: 6px 0; padding-left: 22px; } .msg-text.md li { margin: 2px 0; } .msg-text.md code { font-family: var(--font-mono); font-size: .92em; background: var(--panel2); padding: 1px 5px; border-radius: 6px; } .msg-text.md pre { background: var(--panel2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; overflow-x: auto; margin: 6px 0; } .msg-text.md pre code { background: none; padding: 0; } .msg-time { display: block; font-size: 10.5px; color: var(--mute); margin-top: 4px; opacity: .8; } .msg-you .msg-body { background: var(--primary); color: var(--on-primary); border-bottom-right-radius: var(--radius-sm); } .msg-you .msg-time { color: var(--on-primary); opacity: .78; text-align: right; } .msg-tutor .msg-body { background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: var(--radius-sm); } .msg-warn .msg-body { border-color: var(--err); } /* Gentle reveal on freshly sent/received bubbles. */ @keyframes msgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .msg-enter { animation: msgIn var(--speed) ease-out; } /* Animated three-dot typing indicator. */ .typing { display: inline-flex; gap: 4px; align-items: center; padding: 3px 2px; } .typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--mute); opacity: .5; animation: typingBlink 1.2s infinite ease-in-out; } .typing span:nth-child(2) { animation-delay: .18s; } .typing span:nth-child(3) { animation-delay: .36s; } @keyframes typingBlink { 0%, 80%, 100% { opacity: .35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } } /* Empty-state suggested-prompt chips. */ .suggest-chips { align-self: flex-start; max-width: 100%; display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 2px 38px; } .suggest-label { flex-basis: 100%; font-size: var(--fs-small); color: var(--mute); margin-bottom: 2px; } .suggest-chip { font: inherit; font-size: 13px; cursor: pointer; padding: 8px 14px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--surface); color: var(--primary-strong); box-shadow: var(--sh-1); transition: transform var(--speed), background var(--speed), border-color var(--speed); } .suggest-chip:hover { background: var(--primary-soft); border-color: var(--primary); transform: translateY(-1px); } .suggest-chip:active { transform: translateY(0); } .chat-composer { flex: 0 0 auto; display: flex; gap: 10px; padding-top: 10px; align-items: flex-end; } .chat-composer textarea { flex: 1; resize: none; overflow-y: auto; max-height: 160px; } .chat-composer .btn { align-self: stretch; } /* ---- C2 conversations: chat list sidebar + active chat pane ---- */ #home-tutor { max-width: 1100px; flex-direction: row; gap: 18px; align-items: stretch; position: relative; } .conv-sidebar { flex: 0 0 250px; display: flex; flex-direction: column; gap: 10px; min-height: 0; } .conv-new { width: 100%; } .conv-list { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 2px; } .conv-item { text-align: left; width: 100%; background: var(--panel2); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 9px 12px; cursor: pointer; font: inherit; transition: background var(--speed), border-color var(--speed); } .conv-item:hover { background: var(--surface); } .conv-item.active { background: var(--surface); border-color: var(--primary); box-shadow: var(--sh-1); } .conv-item:focus-visible { outline: none; box-shadow: var(--ring); } .conv-item-title { font-weight: 600; font-size: var(--fs-small); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .conv-item-meta { font-size: 11px; color: var(--mute); margin-top: 2px; } .conv-item-track { font-size: 11px; color: var(--primary-strong); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* C3 — per-chat track pill + topic picker */ .track-pill { cursor: pointer; border: 1px solid var(--line); background: var(--primary-soft); color: var(--primary-strong); max-width: 240px; } .track-pill #convTrackLabel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .track-pill:hover { border-color: var(--primary); } .track-pill:focus-visible { outline: none; box-shadow: var(--ring); } .track-list { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; } .track-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); cursor: pointer; transition: border-color var(--speed), background var(--speed); } .track-opt:hover { background: var(--surface); } .track-opt.active { border-color: var(--primary); background: var(--primary-soft); } .track-opt:focus-visible { outline: none; box-shadow: var(--ring); } .track-opt-label { font-weight: 600; color: var(--ink); } .track-opt-sub { font-size: 12px; color: var(--mute); } /* C4 — conversation-item controls, dividers, and collapsible closed items */ .item-actions { display: flex; gap: 8px; justify-content: flex-end; padding: 6px 0; opacity: .55; transition: opacity var(--speed); } .item-actions.ready { opacity: 1; } .item-actions .btn[disabled] { cursor: default; } .item-divider { text-align: center; font-size: 12px; color: var(--mute); margin: 12px 0 6px; position: relative; } .item-divider::before, .item-divider::after { content: ""; position: absolute; top: 50%; width: 22%; height: 1px; background: var(--line); } .item-divider::before { left: 4%; } .item-divider::after { right: 4%; } .item-block { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); margin: 8px 0; padding: 4px 10px; } .item-block > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 6px; padding: 6px 2px; font-size: var(--fs-small); color: var(--mute); } .item-block > summary::-webkit-details-marker { display: none; } .item-block-title { font-weight: 600; color: var(--ink); } .item-block-sum { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .item-block[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 6px; } .item-block .msg { opacity: .92; } .conv-pane { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; min-height: 0; } .conv-topbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 6px; } .conv-title { font-weight: 700; font-size: var(--fs-body); color: var(--ink); min-width: 0; flex: 0 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* V1 — inline rename input (replaces the blocking prompt()) */ .conv-title-edit { font-weight: 700; font-size: var(--fs-body); color: var(--ink); flex: 0 1 220px; min-width: 0; max-width: 100%; padding: 2px 8px; border: 1px solid var(--primary); border-radius: var(--radius-sm); background: var(--surface); outline: none; } .conv-title-edit:focus { box-shadow: 0 0 0 3px var(--focus-ring, color-mix(in srgb, var(--primary) 30%, transparent)); } /* V1 — armed "double-tap to confirm" state for destructive buttons */ .btn.confirming { background: var(--err-bg); color: var(--err); border-color: var(--err); font-weight: 700; } .conv-spacer { flex: 1 1 auto; } .conv-menu { display: none; } .conv-scrim:not([hidden]) { display: none; } @media (max-width: 760px) { #home-tutor { flex-direction: column; } .conv-menu { display: inline-flex; } /* keep the long track pill from crowding the topbar — give it its own row */ .track-pill { order: 5; flex-basis: 100%; max-width: 100%; } .conv-sidebar { position: absolute; z-index: 30; top: 0; left: 0; bottom: 0; width: 82%; max-width: 300px; background: var(--bg); border-right: 1px solid var(--line); padding: 12px; transform: translateX(-106%); transition: transform var(--speed); box-shadow: var(--sh-2); } .conv-sidebar.open { transform: translateX(0); } .conv-scrim:not([hidden]) { display: block; position: absolute; inset: 0; background: rgba(0,0,0,.38); z-index: 20; } } /* T10 — narrow-viewport app bar: the brand + actions fit on row 1, the status strip wraps to its own centered row, and the redundant name chip is hidden, so the learner home no longer overflows horizontally at ~375px. */ @media (max-width: 560px) { .appbar { flex-wrap: wrap; padding: 10px 14px; gap: 8px 10px; } .appbar .brand { flex: 0 0 auto; } .appbar-right { flex: 1 1 auto; justify-content: flex-end; } .appbar .who-chip { display: none; } .learner-status { order: 3; flex-basis: 100%; justify-content: center; } } /* ---- learner status strip (T5) ---- */ .learner-status { display: flex; gap: 8px; align-items: center; } .learner-status .stat { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-small); font-weight: 700; color: var(--ink-2); background: var(--panel2); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 4px 11px; } .learner-status .stat b { color: var(--ink); } /* ---- D4 gamification visuals ---- */ .learner-status .stat { transition: transform var(--speed), background var(--speed), border-color var(--speed); } .learner-status .stat.pop { animation: statPop .45s ease; } @keyframes statPop { 0% { transform: scale(1); } 35% { transform: scale(1.18); } 100% { transform: scale(1); } } .learner-status #statStreak.lit { background: var(--secondary-soft); border-color: color-mix(in srgb, var(--secondary) 40%, transparent); } .learner-status #statStreak.lit b { color: var(--secondary); } @media (prefers-reduced-motion: no-preference) { .learner-status #statStreak.lit { animation: flameGlow 2.4s ease-in-out infinite; } } @keyframes flameGlow { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 3px var(--secondary-soft); } } /* U2: the level stat is a button that opens the My-skills path. */ .stat-level { gap: 6px; font: inherit; cursor: pointer; transition: transform var(--speed), background var(--speed), border-color var(--speed); } .stat-level:hover { background: var(--primary-soft); border-color: var(--primary); transform: translateY(-1px); } .stat-level:focus-visible { outline: none; box-shadow: var(--ring); } .stat-level .lvl-ring { width: 16px; height: 16px; border-radius: 50%; flex: 0 0 auto; position: relative; background: conic-gradient(var(--secondary) var(--ring, 0%), var(--line) 0); } .stat-level .lvl-ring::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--panel2); } /* floating "+N 🪙" gain cue */ .gain-pop { position: fixed; transform: translate(-50%, 0); z-index: 80; pointer-events: none; font-weight: 800; color: var(--secondary); text-shadow: 0 1px 2px rgba(0, 0, 0, .12); animation: gainFloat 1s ease-out forwards; } @keyframes gainFloat { 0% { opacity: 0; transform: translate(-50%, 4px) scale(.8); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -34px) scale(1.05); } } /* celebration burst (confetti + badge), reduced-motion safe via the global rule + JS guard */ .celebrate-layer { position: fixed; inset: 0; z-index: 90; pointer-events: none; overflow: hidden; } .celebrate-badge { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); font-size: 64px; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .25)); animation: badgePop .9s ease-out forwards; } @keyframes badgePop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); } 30% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } 70% { transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -60%) scale(1); } } .confetti { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; opacity: .95; animation: confettiFall 1.5s ease-in forwards; } @keyframes confettiFall { 0% { transform: translateY(0) translateX(0) rotate(0); } 100% { transform: translateY(104vh) translateX(var(--dx, 0)) rotate(var(--rot, 360deg)); opacity: .4; } } /* badges as colorful medallions (My progress + Learner-360) */ .medallions { display: flex; flex-wrap: wrap; gap: 12px; } .medallion { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 76px; text-align: center; } .medallion-ico { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; box-shadow: var(--sh-1); } .medallion.earned .medallion-ico { background: radial-gradient(circle at 30% 25%, #ffe9a8, var(--secondary)); color: #5a3d00; border: 2px solid #f2b705; } .medallion.locked .medallion-ico { background: var(--panel2); border: 2px dashed var(--line); filter: grayscale(1); opacity: .7; } .medallion-label { font-size: 11px; color: var(--mute); line-height: 1.25; } .medallion.earned .medallion-label { color: var(--ink-2); font-weight: 600; } /* ---- learner home view toggle (tutor / practice) ---- */ .seg { flex: 0 0 auto; display: flex; gap: 4px; align-self: center; margin: 12px auto 0; padding: 4px; background: var(--panel2); border: 1px solid var(--line); border-radius: var(--radius-pill); } .seg-btn { font: inherit; font-weight: 600; font-size: var(--fs-small); color: var(--mute); background: none; border: none; border-radius: var(--radius-pill); padding: 7px 18px; cursor: pointer; transition: background var(--speed), color var(--speed); } .seg-btn.active { background: var(--surface); color: var(--primary-strong); box-shadow: var(--sh-1); } .seg-btn:focus-visible { outline: none; box-shadow: var(--ring); } .home-view { display: none; } .home-view.active { display: flex; } /* U3/U2 fix: some home surfaces (.chat-main, .skills-main) set `display:flex` directly, which overrode the `hidden` attribute — so the hidden "My skills" map kept rendering *under* the chat and stole the flex height the chat needs to fill the page. Make `hidden` win (attribute selector out-specifies the surface classes) so only the active surface occupies space. */ .home-view[hidden] { display: none; } /* ---- practice panel (T5) ---- */ /* U1: flex-direction column so the card fills the centered max-width (matching .skills-main). Without it the surface is a flex row and the card collapses to its content width, making Practice render narrower than the other segments. */ .practice-main { flex: 1 1 auto; display: flex; flex-direction: column; max-width: 680px; width: 100%; margin: 0 auto; padding: 16px; min-height: 0; overflow-y: auto; } .practice-card { display: flex; flex-direction: column; gap: 14px; } .practice-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .practice-q { margin: 4px 0; font-size: var(--fs-h2); line-height: 1.35; } .choices { display: grid; gap: 10px; } .choice { font: inherit; font-size: 16px; text-align: left; padding: 14px 16px; border-radius: var(--radius); border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; transition: transform var(--speed), border-color var(--speed), background var(--speed); } .choice:hover:not(:disabled) { border-color: var(--primary); transform: translateY(-1px); } .choice:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--primary); } .choice:disabled { cursor: default; } .choice-ok { border-color: var(--ok); background: var(--ok-bg); color: #0a6b3d; font-weight: 700; } .choice-bad { border-color: var(--err); background: var(--err-bg); color: #a31515; font-weight: 700; } .practice-foot { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; } .practice-fb { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: var(--radius); background: var(--panel2); border: 1px solid var(--line); font-weight: 600; } .practice-fb.ok { background: var(--ok-bg); border-color: var(--ok); color: #0a6b3d; } .practice-fb.bad { background: var(--err-bg); border-color: var(--err); color: #a31515; } .btn.tiny { padding: 6px 12px; font-size: var(--fs-small); } /* ---- U10: inline in-chat quiz card (lives inside a tutor message bubble) ---- */ .composer-quiz { align-self: stretch; white-space: nowrap; } .quiz-card { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1.5px solid var(--line); border-radius: var(--radius-lg); background: var(--panel2); max-width: 520px; } .quiz-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .quiz-topic { font-size: var(--fs-small); } .quiz-q { font-size: var(--fs-h3, 17px); font-weight: 700; line-height: 1.35; } .quiz-card .choices { gap: 8px; } .quiz-fb { padding: 11px 13px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); font-weight: 600; } .quiz-fb.ok { background: var(--ok-bg); border-color: var(--ok); color: #0a6b3d; } .quiz-fb.bad { background: var(--err-bg); border-color: var(--err); color: #a31515; } .quiz-foot { display: flex; justify-content: flex-end; } :root[data-theme="dark"] .quiz-fb.ok { color: var(--ok); } :root[data-theme="dark"] .quiz-fb.bad { color: var(--err); } .home-young .quiz-q { font-size: 21px; } .home-young .quiz-card .choice { font-size: 18px; padding: 16px 18px; } /* X1: quiz sessions — progress dots, per-answer foot, end-of-session summary. */ .quiz-progress-text { margin-left: auto; font-size: var(--fs-small); font-weight: 700; white-space: nowrap; } .quiz-dots { display: flex; flex-wrap: wrap; gap: 7px; } .quiz-dot { width: 11px; height: 11px; border-radius: 50%; background: #d1d5db; transition: background .3s ease, transform .3s ease, box-shadow .3s ease; } .quiz-dot.is-ok { background: #22c55e; } .quiz-dot.is-wrong { background: #f59e0b; } .quiz-dot.is-current { transform: scale(1.18); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 32%, transparent); } :root[data-theme="dark"] .quiz-dot { background: #4b5563; } /* X2: a brief pop on the dot that just resolved, so progress is felt visually. */ .quiz-dot.just-answered { animation: quizDotPop .3s ease; } @keyframes quizDotPop { 0% { transform: scale(1); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } } .quiz-cap-note { font-size: 13px; } .quiz-body { display: flex; flex-direction: column; gap: 12px; } .quiz-foot-session { display: flex; flex-direction: column; gap: 10px; } .quiz-next-row { display: flex; justify-content: flex-end; } .quiz-summary { display: flex; flex-direction: column; gap: 14px; } .quiz-summary-msg { font-weight: 600; line-height: 1.4; } .quiz-summary-cta { display: flex; gap: 10px; flex-wrap: wrap; } @media (prefers-reduced-motion: reduce) { .quiz-dot { transition: none; } .quiz-dot.just-answered { animation: none; } } /* ---- W5: Learn-mode lesson card (lives inside a tutor message bubble) ---- */ .msg-lesson { display: flex; flex-direction: column; gap: 12px; max-width: 640px; } .lesson-loading { gap: 10px; min-width: 240px; } .lesson-loading-cap { font-size: var(--fs-small); } .lesson-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .lesson-title { font-weight: 800; font-size: var(--fs-h3); line-height: 1.3; overflow-wrap: anywhere; } .lesson-intro { margin: 0; font-weight: 600; line-height: 1.45; } .lesson-explain { line-height: 1.55; } .lesson-explain p { margin: 0 0 8px; } .lesson-explain p:last-child { margin-bottom: 0; } .lesson-examples { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; } .lesson-examples li { line-height: 1.5; } .lesson-fig { margin: 0; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow-x: auto; text-align: center; } .lesson-fig svg { max-width: 100%; height: auto; } .lesson-lab { margin: 0; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); } .lesson-lab-head { font-weight: 800; font-size: var(--fs-small); letter-spacing: .03em; text-transform: uppercase; margin-bottom: 8px; color: var(--primary-strong); } .lesson-lab-frame { display: block; width: 100%; max-width: 100%; height: 360px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); } .lesson-experiment { border: 1px solid var(--secondary); border-radius: var(--radius); background: var(--secondary-soft); padding: 12px 14px; } .lesson-exp-head { font-weight: 800; font-size: var(--fs-small); letter-spacing: .03em; text-transform: uppercase; margin-bottom: 5px; } .lesson-experiment p { margin: 0; line-height: 1.5; } .lesson-refs-head { font-weight: 700; font-size: var(--fs-small); color: var(--mute); letter-spacing: .03em; text-transform: uppercase; margin-bottom: 7px; } .lesson-ref-list { display: flex; flex-direction: column; gap: 7px; } .lesson-ref { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel2); color: var(--ink); text-decoration: none; font-weight: 600; font-size: var(--fs-small); transition: border-color var(--speed), transform var(--speed); } .lesson-ref:hover { border-color: var(--primary); transform: translateX(2px); } .lesson-ref-ico { flex: 0 0 auto; color: var(--primary-strong); font-size: 14px; } .lesson-ref-label { overflow-wrap: anywhere; } .lesson-foot { display: flex; } .lesson-quiz { width: 100%; justify-content: center; } .home-young .msg-lesson { font-size: 16px; } .home-young .lesson-title { font-size: 20px; } /* The skill-node "📖 Learn" link sits under each unlocked node's label (W5). */ .skill-learn { margin-top: 4px; font-size: var(--fs-small); } /* ---- skill map (T6) ---- */ .skills-main { flex: 1 1 auto; display: flex; flex-direction: column; max-width: 680px; width: 100%; margin: 0 auto; padding: 16px; min-height: 0; overflow-y: auto; } .skills-main .skill-map { width: 100%; } .skills-head { margin-bottom: 14px; } .skills-head h2 { font-size: var(--fs-h2); } /* ---- skill map as a learning path (D5) ---- */ .skill-map { display: block; } .path { display: flex; flex-direction: column; align-items: center; padding: 10px 0 28px; } .path-step { display: flex; flex-direction: column; align-items: center; will-change: transform; } .path-cue { font-size: var(--fs-small); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--primary-strong); background: var(--surface); border: 1.5px solid var(--primary); padding: 3px 11px; border-radius: 999px; box-shadow: var(--sh-1); margin-bottom: 8px; animation: cueBob 1.6s ease-in-out infinite; position: relative; } .path-cue::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 9px; height: 9px; background: var(--surface); border-right: 1.5px solid var(--primary); border-bottom: 1.5px solid var(--primary); transform: translateX(-50%) rotate(45deg); } @keyframes cueBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } .path-node { position: relative; width: 78px; height: 78px; border-radius: 50%; border: none; padding: 0; display: grid; place-items: center; font-size: 32px; color: var(--ink); background: var(--primary-soft); box-shadow: 0 6px 0 rgba(63, 59, 191, .18), var(--sh-1); transition: transform .12s ease, box-shadow .12s ease; } /* conic progress ring */ .path-node::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; z-index: -1; background: conic-gradient(var(--ring, var(--primary)) calc(var(--pct, 0) * 1%), var(--line-soft) 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)); mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)); } .path-node.open { background: var(--primary); color: var(--on-primary); cursor: pointer; --ring: var(--secondary); box-shadow: 0 6px 0 var(--primary-shadow), var(--sh-2); } .path-node.open:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--primary-shadow), var(--sh-2); } .path-node.open:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--primary-shadow), var(--sh-1); } .path-node.mastered { background: linear-gradient(160deg, #ffd778, #f2a93b); color: #5a3c00; cursor: pointer; --ring: #e89b1c; box-shadow: 0 6px 0 #c8841a, var(--sh-1); } .path-node.mastered:hover { transform: translateY(-2px); } .path-node.locked { background: var(--panel2); color: var(--mute); --ring: var(--line); opacity: .8; box-shadow: 0 5px 0 rgba(0,0,0,.06); cursor: not-allowed; } .path-node.current { animation: nodePulse 2s ease-in-out infinite; } @keyframes nodePulse { 0%, 100% { box-shadow: 0 6px 0 var(--primary-shadow), 0 0 0 0 rgba(91, 87, 232, .45); } 50% { box-shadow: 0 6px 0 var(--primary-shadow), 0 0 0 12px rgba(91, 87, 232, 0); } } .path-ico { line-height: 1; } .path-label { text-align: center; margin: 9px 0 2px; max-width: 220px; } .path-title { font-weight: 700; font-size: var(--fs-body); line-height: 1.25; } .path-sub { font-size: var(--fs-small); margin-top: 1px; } .path-link { display: flex; flex-direction: column; align-items: center; gap: 5px; margin: 9px 0; will-change: transform; } .path-link span { width: 7px; height: 7px; border-radius: 50%; background: var(--line); } .path-link.lit span { background: var(--secondary); } /* ---- W8: mastery filter pills ---- */ .skill-filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 640px; margin: 0 auto 14px; } .skill-filters[hidden] { display: none; } /* `display:flex` beats the UA [hidden] default — toggled via .hidden in JS */ .skill-filters .pill-filter { font: inherit; font-size: var(--fs-small); font-weight: 700; cursor: pointer; padding: 6px 14px; margin-right: 0; border-radius: 999px; line-height: 1.1; transition: background var(--speed), color var(--speed), border-color var(--speed); } .skill-filters .pill-filter.pill-soft:hover { border-color: var(--primary); color: var(--ink); } .skill-filters .pill-filter.pill-active { background: var(--primary); color: var(--on-primary); border: 1px solid var(--primary); box-shadow: var(--sh-1); } .skill-filters .pill-filter:focus-visible { outline: none; box-shadow: var(--ring); } /* ---- W7: collapsible chapter/unit grouping ---- */ .skill-chapter { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); margin: 0 auto 12px; max-width: 640px; box-shadow: var(--sh-1); overflow: hidden; } .skill-chapter > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 14px 16px; font-weight: 700; user-select: none; } .skill-chapter > summary::-webkit-details-marker { display: none; } .skill-chapter > summary::marker { content: ""; } .skill-chapter > summary:hover { background: var(--panel2); } .skill-chapter > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; } .skill-chapter-caret { flex: none; width: 0; height: 0; border-left: 7px solid var(--mute); border-top: 5px solid transparent; border-bottom: 5px solid transparent; transition: transform .15s ease; } .skill-chapter[open] > summary .skill-chapter-caret { transform: rotate(90deg); } .skill-chapter-name { flex: 1 1 auto; min-width: 0; font-size: var(--fs-body); } .skill-chapter-prog { flex: none; font-size: var(--fs-small); font-weight: 600; } .skill-chapter .path { padding: 4px 0 22px; } @media (prefers-reduced-motion: reduce) { .skill-chapter-caret { transition: none; } } .skill-all-done { display: flex; align-items: center; gap: 14px; margin: 4px auto 0; max-width: 420px; padding: 16px 20px; border-radius: var(--radius-lg); border: 1px solid #f0c869; background: linear-gradient(135deg, #fff7e6, var(--surface)); box-shadow: var(--sh-2); } .skill-all-done-ico { font-size: 34px; line-height: 1; } .skill-all-done-title { font-weight: 800; font-size: var(--fs-body); } .skill-all-done-sub { font-size: var(--fs-small); margin-top: 2px; } :root[data-theme="dark"] .skill-all-done { background: linear-gradient(135deg, #2e2410, var(--surface)); border-color: #6b5418; } .home-young .path-node { width: 88px; height: 88px; font-size: 38px; } .home-young .path-title { font-size: var(--fs-h3); } @media (prefers-reduced-motion: reduce) { .path-cue, .path-node.current { animation: none; } } /* ---- my-progress drawer ---- */ .drawer { position: fixed; top: 0; right: 0; width: min(420px, 92vw); height: 100dvh; background: var(--bg); border-left: 1px solid var(--line); box-shadow: var(--sh-3); padding: 16px; overflow-y: auto; z-index: 15; } .drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; } .drawer-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 14; } /* ---- account & settings drawer (U8) ---- */ .account-drawer { z-index: 30; } .account-drawer .drawer-scrim { display: none; } #accountScrim { z-index: 29; } .acct-id { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid var(--line); } .acct-avatar { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #8a6bff); color: var(--on-primary); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 19px; } .acct-id-name { font-weight: 700; font-size: var(--fs-h3); } .acct-id-role { margin-top: 4px; } .acct-section { padding: 14px 0; border-bottom: 1px solid var(--line); } .acct-section:last-child { border-bottom: none; } .acct-section h4 { margin: 0 0 10px; font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .04em; color: var(--mute); } .acct-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; font-size: var(--fs-small); font-weight: 600; } .acct-field input, .acct-field select { font: inherit; font-weight: 500; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); } .acct-field input[readonly] { background: var(--panel2); color: var(--mute); cursor: default; } .acct-field input:focus-visible, .acct-field select:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--primary); } .acct-field .hint { font-weight: 400; } .acct-kv { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; font-size: var(--fs-small); } .acct-kv span { color: var(--mute); } .acct-kv b { color: var(--ink); } .acct-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; } .acct-signout { display: flex; justify-content: flex-end; } .seg-mini { display: inline-flex; gap: 0; background: var(--panel2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 2px; width: fit-content; } .seg-mini-btn { font: inherit; font-size: var(--fs-small); font-weight: 600; border: none; background: none; color: var(--mute); padding: 6px 12px; border-radius: calc(var(--radius-sm) - 2px); cursor: pointer; } .seg-mini-btn.active { background: var(--surface); color: var(--primary-strong); box-shadow: var(--sh-1); } .seg-mini-btn:focus-visible { outline: none; box-shadow: var(--ring); } .pill-soft { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--panel2); color: var(--mute); border: 1px solid var(--line); margin-right: 4px; } .btn.danger { color: var(--err); border-color: color-mix(in srgb, var(--err) 40%, transparent); } .btn.danger:hover { background: var(--err-bg); border-color: var(--err); } /* ---- family organizer dashboard ---- */ .family-main { max-width: 980px; margin: 0 auto; padding: 20px; display: grid; gap: 18px; } .fam-children { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; } .child-card { display: flex; align-items: center; gap: 12px; text-align: left; width: 100%; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); padding: 14px; cursor: pointer; font: inherit; color: var(--ink); box-shadow: var(--sh-1); transition: transform var(--speed), box-shadow var(--speed), border-color var(--speed); } .child-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--sh-2); } .child-card:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--primary); } .child-avatar { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #8a6bff); color: var(--on-primary); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; } .child-meta { flex: 1 1 auto; min-width: 0; } .child-go { flex: 0 0 auto; color: var(--primary); font-size: var(--fs-small); font-weight: 600; } /* mastery progress ring around the avatar (D6) */ .ring-avatar { position: relative; flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; padding: 4px; background: conic-gradient(var(--ok) calc(var(--pct, 0) * 1%), var(--line-soft) 0); } .ring-avatar .child-avatar { width: 100%; height: 100%; font-size: 19px; } .child-progress { font-size: var(--fs-small); color: var(--ink-2); margin-top: 4px; } .child-progress b { color: var(--ok); } .child-card-wrap { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--sh-1); transition: transform var(--speed), box-shadow var(--speed), border-color var(--speed); } .child-card-wrap:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--sh-2); } .child-card-top { display: flex; align-items: center; gap: 12px; } .child-plan { margin-top: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .child-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .child-plan-set { display: flex; align-items: center; gap: 6px; } .child-plan-set select { max-width: 130px; } .empty { color: var(--mute); padding: 24px; text-align: center; border: 1px dashed var(--line); border-radius: var(--radius); background: var(--panel2); } .fam-section { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); } .fam-section h3 { margin: 0 0 4px; font-size: var(--fs-h3); } .reward-list { display: grid; gap: 8px; margin-top: 8px; } .reward-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--line); background: var(--panel2); border-radius: var(--radius-sm); padding: 10px 12px; } .reward-main { display: flex; align-items: center; gap: 10px; min-width: 0; } .reward-medal { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; background: var(--secondary-soft); } .reward-row.done { background: linear-gradient(135deg, #fff7e6, var(--surface)); border-color: #f0c869; } .reward-row.done .reward-medal { background: linear-gradient(160deg, #ffd778, #f2a93b); } .topbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; background: var(--surface); border-bottom: 1px solid var(--line); } .brand { display: flex; gap: 12px; align-items: center; } .logo { font-size: 26px; color: var(--primary); } .brand h1 { font-size: 17px; letter-spacing: .5px; } .brand p { margin: 0; color: var(--mute); font-size: 12px; } .health { font-size: 12px; color: var(--mute); text-align: right; max-width: 55%; } .health b { color: var(--ink); } .tabs { display: flex; gap: 4px; padding: 8px 16px 0; border-bottom: 1px solid var(--line); background: var(--surface); flex-wrap: wrap; position: sticky; top: 0; z-index: 5; } .tab { border: 1px solid transparent; border-bottom: none; background: transparent; color: var(--mute); padding: 9px 15px; border-radius: var(--radius-sm) var(--radius-sm) 0 0; cursor: pointer; font-size: 13.5px; font-weight: 600; } .tab:hover { color: var(--ink); background: var(--panel2); } .tab.active { background: var(--bg); color: var(--primary-strong); border-color: var(--line); margin-bottom: -1px; } main { padding: 20px; max-width: 1200px; margin: 0 auto; } .tabview { display: none; } .tabview.active { display: grid; gap: 18px; } /* min-width:0 lets a panel shrink below its widest child inside a grid/flex track (the default min-width:auto would let a wide table widen the whole admin console past a phone viewport). Paired with .table-wrap's overflow-x, wide tables scroll inside their wrap instead of overflowing the document — applies to every tab. */ .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--sh-1); min-width: 0; } .panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; } .panel-head h2 { font-size: var(--fs-h2); } .hint { color: var(--mute); font-size: 12.5px; margin: 4px 0 0; max-width: 760px; } .l360-pick { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } .l360-pick .hint { text-align: right; } .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; min-width: 0; } .two-col > * { min-width: 0; } @media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } } .table-wrap { overflow-x: auto; min-width: 0; } table { width: 100%; border-collapse: collapse; font-size: 13px; } th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; } th { color: var(--mute); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; } tbody tr:hover { background: var(--panel2); } .col-order { width: 64px; } .col-actions { width: 1%; white-space: nowrap; } .col-pick { width: 36px; text-align: center; } .col-pick input { cursor: pointer; } /* Languages tab (U12) toolbar: search + bulk actions */ .lang-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .lang-search { flex: 1 1 220px; min-width: 0; max-width: 420px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); color: var(--ink); font-size: 13px; } .lang-search:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--primary); } /* (The Languages/Translations wide-table overflow guard is now global on .panel + .table-wrap above, so every admin tab — Providers, Identity, … — scrolls its table inside the wrap rather than overflowing the document at phone widths.) */ .lang-pick-label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-small); color: var(--mute); font-weight: 600; } .lang-pick-label select { padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); color: var(--ink); font: inherit; } .tr-seg { display: inline-flex; gap: 4px; padding: 4px; background: var(--panel2); border: 1px solid var(--line); border-radius: var(--radius-pill); } .tr-missing-filter { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); color: var(--mute); white-space: nowrap; } #trTable th, #trTable td { vertical-align: top; } .tr-col-key { width: 22%; min-width: 140px; } .tr-col-state { width: 84px; text-align: center; white-space: nowrap; } .tr-en { color: var(--mute); font-size: 13px; max-width: 320px; } .tr-input { width: 100%; min-width: 160px; font: inherit; font-size: 13px; resize: vertical; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); color: var(--ink); } .tr-input:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--primary); } .mono { font-family: var(--font-mono); font-size: 12px; } .muted { color: var(--mute); font-weight: 400; font-size: 11.5px; } .badge { display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; } .badge.ok, .badge.pass { background: var(--ok-bg); color: var(--ok); } .badge.error, .badge.fail { background: var(--err-bg); color: var(--err); } .badge.untested { background: var(--panel2); color: var(--mute); } .badge.warn { background: var(--warn-bg); color: var(--warn); } .type-tag { font-size: 11px; color: var(--primary-strong); } /* ---- pill / chip (reusable) ---- */ .pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--radius-pill); font-size: var(--fs-small); font-weight: 700; background: var(--panel2); color: var(--ink-2); } .pill.brand { background: var(--primary-soft); color: var(--primary-strong); } .pill.coin { background: var(--secondary-soft); color: #a4500a; } /* ---- buttons ---- */ .btn { border: 1px solid var(--line); background: var(--surface); color: var(--ink); padding: 8px 14px; border-radius: var(--radius-sm); cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; transition: border-color var(--speed), background var(--speed), transform var(--speed); } .btn:hover { border-color: var(--primary); background: var(--primary-tint); } .btn:active { transform: translateY(1px); } .btn:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--primary); } .btn.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); font-weight: 700; } .btn.primary:hover { background: var(--primary-strong); border-color: var(--primary-strong); } .btn.ghost { background: transparent; border-color: transparent; } .btn.ghost:hover { background: var(--panel2); border-color: var(--line); } .btn.tiny { padding: 5px 10px; font-size: 12px; } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0; } .icon-btn { background: none; border: none; color: var(--mute); font-size: 16px; cursor: pointer; border-radius: 8px; padding: 4px 8px; } .icon-btn:hover { background: var(--panel2); color: var(--ink); } /* Duolingo-style chunky CTA: solid fill, bottom-shadow edge, press-down. */ .btn.cta { background: var(--primary); color: var(--on-primary); border: none; border-radius: var(--radius-lg); font-weight: 800; letter-spacing: .02em; box-shadow: 0 4px 0 var(--primary-shadow); transition: filter var(--speed), transform .08s, box-shadow .08s; } .btn.cta:hover { filter: brightness(1.04); background: var(--primary); } .btn.cta:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--primary-shadow); } @media (prefers-reduced-motion: reduce) { .btn.cta:active { transform: none; } } .ord-btn { background: var(--surface); border: 1px solid var(--line); color: var(--ink); width: 24px; height: 21px; border-radius: 6px; cursor: pointer; line-height: 1; } .actions-cell { display: flex; gap: 6px; } .switch { position: relative; display: inline-block; width: 42px; height: 22px; } .switch input { display: none; } .slider { position: absolute; inset: 0; background: color-mix(in srgb, var(--ink) 22%, var(--surface)); border-radius: 22px; transition: var(--speed); cursor: pointer; } .slider::before { content: ""; position: absolute; height: 16px; width: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: var(--speed); box-shadow: var(--sh-1); } .switch input:checked + .slider { background: var(--ok); } .switch input:checked + .slider::before { transform: translateX(20px); } textarea, input, select { width: 100%; background: var(--field); border: 1px solid var(--line); color: var(--field-ink); border-radius: var(--radius-sm); padding: 9px 11px; font: inherit; } textarea { resize: vertical; } input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--mute) 80%, transparent); } input:focus, select:focus, textarea:focus { outline: none; box-shadow: var(--ring); border-color: var(--primary); } #sendBtn, #chatInput { margin-bottom: 10px; } .inline-form { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; align-items: center; } .inline-form input[type="file"] { flex: 1 1 240px; min-width: 0; } /* U7 — CASE import result */ .import-out:empty { display: none; } .import-out { margin-top: 4px; } .import-out > div { padding: 9px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line-soft); } .import-ok { background: color-mix(in srgb, var(--ok, #16a34a) 12%, var(--panel2)); border-color: color-mix(in srgb, var(--ok, #16a34a) 35%, var(--line-soft)); } .import-err { background: color-mix(in srgb, var(--err, #dc2626) 12%, var(--panel2)); border-color: color-mix(in srgb, var(--err, #dc2626) 35%, var(--line-soft)); } /* W1 — Learn-mode cache maintenance row */ .learn-cache-row { margin-top: 14px; align-items: center; flex-wrap: wrap; gap: 10px; } .list { display: grid; gap: 6px; } .list .row { display: flex; justify-content: space-between; padding: 8px 11px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--panel2); } .chat-out, .log-out { margin-top: 12px; display: grid; gap: 8px; max-height: 360px; overflow-y: auto; } .bubble { background: var(--panel2); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 10px 12px; } .bubble .who { font-size: 11px; color: var(--primary-strong); margin-bottom: 4px; font-weight: 700; } .trail { font-size: 11.5px; color: var(--mute); margin-top: 8px; border-top: 1px dashed var(--line); padding-top: 6px; } .trail .t-ok { color: var(--ok); } .trail .t-fail { color: var(--err); } .trail .t-skip { color: var(--warn); } .log-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; padding: 7px 9px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--panel2); } .log-row .l-meta { color: var(--mute); } .mastery-wrap { margin: 12px 0; } .mastery-label { display: flex; justify-content: space-between; font-size: 12px; color: var(--mute); margin-bottom: 4px; } .meter { height: 12px; background: var(--panel2); border: 1px solid var(--line); border-radius: var(--radius-pill); overflow: hidden; } .meter-fill { height: 100%; background: linear-gradient(90deg, var(--primary), #8a6bff); transition: width .35s ease; } .wallet { margin-top: 8px; font-size: 13px; } .wallet b { color: var(--ok); } .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .card { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; background: var(--surface); box-shadow: var(--sh-1); } .card-h { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--mute); margin-bottom: 6px; font-weight: 700; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .card-pill { text-transform: none; letter-spacing: 0; font-size: 10.5px; font-weight: 700; padding: 2px 9px; border-radius: var(--radius-pill); } .card-pill.ok { background: var(--ok-bg); color: var(--ok); } .card-pill.warn { background: var(--warn-bg); color: var(--warn); } .card-pill.fail { background: var(--err-bg); color: var(--err); } .card-pill.untested { background: var(--panel2); color: var(--mute); } .card-b { font-size: 14px; line-height: 1.6; } .card-b b { font-size: 18px; color: var(--primary-strong); } /* T9 overview: deep-link cards that jump to a management tab. */ .card-link { cursor: pointer; transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; } .card-link:hover { box-shadow: var(--sh-2, var(--sh-1)); transform: translateY(-2px); border-color: var(--primary); } .card-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .card-b .muted.warn { color: var(--warn); } .summary { font-size: 13px; margin-bottom: 10px; } .summary .s-pass, .s-pass { color: var(--ok); font-weight: 700; } .summary .s-fail, .s-fail { color: var(--err); font-weight: 700; } .detail-cell { color: var(--mute); font-size: 11.5px; max-width: 420px; } .modal-backdrop { position: fixed; inset: 0; background: rgba(16,18,40,.45); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 20; padding: 16px; } .modal-backdrop[hidden] { display: none; } /* make `hidden` win over display:flex */ .modal { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); width: min(680px, 100%); max-height: 92vh; overflow-y: auto; box-shadow: var(--sh-3); } .modal-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--line); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px; } .form-grid[hidden] { display: none; } /* make `hidden` win over display:grid (e.g. the toggled famAddChildForm) */ .form-grid.compact { padding: 0 0 10px; } .form-grid label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--mute); font-weight: 600; } .form-grid label.wide { grid-column: 1 / -1; } .form-grid label.check { flex-direction: row; align-items: center; gap: 8px; color: var(--ink); } .form-grid label.check input { width: auto; } .form-actions { display: flex; justify-content: flex-end; gap: 10px; grid-column: 1 / -1; } /* ---- toast (D7) — friendly, non-blocking feedback; full system ---- */ .toast-host { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 60; width: min(420px, calc(100vw - 32px)); pointer-events: none; } .toast { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-3); font-size: 13.5px; color: var(--ink); border-left: 4px solid var(--primary); animation: toast-in var(--speed) ease both; pointer-events: auto; } .toast.ok { border-left-color: var(--ok); } .toast.err { border-left-color: var(--err); } .toast.warn { border-left-color: var(--warn); } .toast-ico { line-height: 1.4; flex: 0 0 auto; } .toast-msg { flex: 1 1 auto; min-width: 0; word-break: break-word; } .toast-x { flex: 0 0 auto; border: 0; background: transparent; color: var(--mute); cursor: pointer; font-size: 13px; line-height: 1; padding: 2px 4px; border-radius: var(--radius-sm); } .toast-x:hover { color: var(--ink); background: var(--panel2); } .toast-x:focus-visible { outline: none; box-shadow: var(--ring); } .toast.toast-out { animation: toast-out var(--speed) ease both; } @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes toast-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(8px); } } /* ---- skeleton loader ---- */ .skeleton { position: relative; overflow: hidden; background: var(--panel2); border-radius: var(--radius-sm); min-height: 14px; } .skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); transform: translateX(-100%); animation: shimmer 1.3s infinite; } @keyframes shimmer { to { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { .skeleton::after { animation: none; } } /* ---- inline spinner (border-spin) ---- */ .spinner { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; border: 2px solid var(--line); border-top-color: var(--primary); border-radius: 50%; animation: spin .7s linear infinite; } .btn .spinner { width: 13px; height: 13px; border-color: rgba(255,255,255,.45); border-top-color: #fff; margin-right: 6px; vertical-align: -1px; } .btn.ghost .spinner, .btn.tiny .spinner { border-color: var(--line); border-top-color: var(--primary); } @keyframes spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 1.6s; } } /* ============================================================================ T7 — Age-appropriate presentation (young vs adult learner) ---------------------------------------------------------------------------- One codebase, two registers. The learner shell carries `home-young` or `home-adult`. Adult = the default density above. Young = larger type, bigger tap targets, friendlier/playful accents and fewer competing controls, so a 9-year-old isn't overwhelmed. Both inherit the D1 tokens and stay AA. ========================================================================== */ #screen-app.home-young { --fs-body: 17px; } /* Bigger, friendlier greeting + composer */ .home-young .msg { max-width: 84%; } .home-young .msg-body { padding: 13px 17px; font-size: 16.5px; } .home-young .suggest-chip { font-size: 14.5px; padding: 9px 16px; } .home-young .chat-composer textarea { font-size: 16.5px; min-height: 56px; } .home-young .chat-composer .btn { font-size: 15px; padding: 12px 20px; } /* Chunkier segmented toggle (easy to tap, clear labels) */ .home-young .seg { gap: 6px; padding: 6px; } .home-young .seg-btn { font-size: 14px; padding: 10px 22px; } /* Practice: large question + generously sized answer choices */ .home-young .practice-q { font-size: 25px; line-height: 1.3; } .home-young .choice { font-size: 19px; padding: 18px 20px; border-radius: var(--radius-lg); } .home-young .practice-head .pill { font-size: 14px; padding: 6px 14px; } /* (skill map young-mode sizing lives with the .path rules) */ /* Playful status pills, always front-and-centre */ .home-young .learner-status .stat { font-size: 13.5px; padding: 6px 14px; } /* Fewer competing controls — keep the kid focused on learning */ .home-young #myProgressBtn { display: none; } /* ============================================================================ D2 — Landing & login redesign (first impressions), on the D1 system ========================================================================== */ /* entrance animation (reduced-motion safe) */ .reveal { animation: reveal-up .5s ease both; } .reveal:nth-of-type(2) { animation-delay: .06s; } .reveal:nth-of-type(3) { animation-delay: .12s; } .reveal:nth-of-type(4) { animation-delay: .18s; } @keyframes reveal-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .reveal { animation: none; } } /* landing top nav */ .lp-nav { display: flex; align-items: center; justify-content: space-between; max-width: 1100px; margin: 0 auto; padding: 18px 24px 0; } .lp-nav .brand { font-size: var(--fs-h3); font-weight: 800; } .lp-nav .logo { filter: drop-shadow(0 3px 8px rgba(91,87,232,.30)); } .lp-nav-actions { display: flex; gap: 8px; } /* hero — two-column on desktop */ .landing { max-width: 1100px; padding-top: 4vh; } .hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; text-align: left; padding: 5vh 0 2vh; } .hero-copy .pill { margin-bottom: 16px; } .hero .hero-title { font-size: var(--fs-display); margin: 6px 0 10px; } .hero .hero-tag { margin: 0 0 24px; max-width: 540px; } .hero-cta { display: flex; gap: 12px; flex-wrap: wrap; } .hero-note { color: var(--mute); font-size: 12.5px; margin: 16px 0 0; } .hero-art { display: grid; place-items: center; min-height: 240px; } .hero-art svg { max-width: 320px; width: 100%; } .art-ring { fill: none; stroke: var(--primary-soft); stroke-width: 10; stroke-dasharray: 14 16; } .art-coin { fill: var(--secondary-soft); stroke: var(--secondary); stroke-width: 2; } .art-coin-t { font-size: 16px; } .art-spark { fill: var(--secondary); opacity: .85; } .art-float { animation: float 4.5s ease-in-out infinite; transform-origin: 120px 120px; } @keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @media (prefers-reduced-motion: reduce) { .art-float { animation: none; } } /* section title + how-it-works */ .section-title { text-align: center; font-size: var(--fs-h2); margin: 8px 0 22px; } .how { margin-top: 64px; } .how-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .how-step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px 20px; box-shadow: var(--sh-1); } .how-num { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--primary); color: var(--on-primary); font-weight: 800; margin-bottom: 12px; } .how-step h3 { font-size: var(--fs-h3); margin-bottom: 6px; } .how-step p { color: var(--mute); font-size: 13.5px; margin: 0; } /* trust / safety strip */ .trust { margin-top: 32px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; background: var(--primary-tint); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; } .trust-item { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; color: var(--ink-2); } .trust-item b { color: var(--ink); } .trust-ico { font-size: 22px; line-height: 1; } @media (max-width: 860px) { .hero { grid-template-columns: 1fr; gap: 16px; text-align: center; padding-top: 3vh; } .hero-copy .hero-tag { margin-left: auto; margin-right: auto; } .hero-cta { justify-content: center; } .hero-art { order: -1; min-height: 180px; } .hero-art svg { max-width: 220px; } .how-steps, .trust { grid-template-columns: 1fr; } .lp-nav-actions #navParent, .lp-nav-actions #navSignup { display: none; } } /* login — demo profile picker (avatar chips) */ .login-card { position: relative; } .login-back { position: absolute; top: 16px; left: 16px; margin: 0; } .user-picker { display: grid; gap: 8px; margin: 14px 0 4px; text-align: left; } .upick-skel { display: grid; gap: 8px; } .upick-skel .skeleton { height: 52px; } .upick { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; cursor: pointer; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); font: inherit; color: var(--ink); box-shadow: var(--sh-1); transition: transform var(--speed), box-shadow var(--speed), border-color var(--speed); } .upick:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--sh-2); } .upick:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--primary); } .upick-av { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; background: var(--primary-soft); } .upick-meta { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .upick-name { font-weight: 700; } .upick-role { font-size: var(--fs-small); color: var(--mute); } /* signup prompt + form (T8) */ .signup-prompt { margin-top: 16px; font-size: 13px; color: var(--mute); } .signup-prompt .linkbtn { margin-top: 0; } .signup-form .btn.primary { width: 100%; margin-top: 18px; padding: 12px; } .signup-form .linkbtn { display: block; margin: 12px auto 0; }