/* ═══════════════════════════════════════════════════════════════════════════ * reDojo design system — tokens.css (v1, spike-derived brand). * * THE GOLDEN SOURCE + what the app ships: embedded and served at /static/tokens.css, * linked from every page (no build step — the CSS custom property IS the token, ADR-0017). * SUPERSEDES the redojo-0052 brand layer (paper/blue/clay/system fonts). This is the look * ported from the spike-v1 prototypes (the visual source of truth): warm STONE greys, an * AMBER accent, Space Grotesk (display) over Manrope (body), rounded cards, the loop-D mark. * * kata-0026: templates + rule bodies reference ONLY var(--…) — every raw #hex lives here in * :root as a token DEFINITION. (Font woff2 are served from /static/fonts/; the url()s are * RELATIVE to this file so they resolve both served (/static/fonts/…) and standalone.) * ═══════════════════════════════════════════════════════════════════════════ */ @font-face { font-family:"Manrope"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/manrope-latin-400-normal.woff2") format("woff2"); } @font-face { font-family:"Manrope"; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/manrope-latin-500-normal.woff2") format("woff2"); } @font-face { font-family:"Manrope"; font-style:normal; font-weight:600; font-display:swap; src:url("fonts/manrope-latin-600-normal.woff2") format("woff2"); } @font-face { font-family:"Manrope"; font-style:normal; font-weight:700; font-display:swap; src:url("fonts/manrope-latin-700-normal.woff2") format("woff2"); } @font-face { font-family:"Manrope"; font-style:normal; font-weight:800; font-display:swap; src:url("fonts/manrope-latin-800-normal.woff2") format("woff2"); } @font-face { font-family:"Space Grotesk"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/space-grotesk-latin-400-normal.woff2") format("woff2"); } @font-face { font-family:"Space Grotesk"; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/space-grotesk-latin-500-normal.woff2") format("woff2"); } @font-face { font-family:"Space Grotesk"; font-style:normal; font-weight:600; font-display:swap; src:url("fonts/space-grotesk-latin-600-normal.woff2") format("woff2"); } @font-face { font-family:"Space Grotesk"; font-style:normal; font-weight:700; font-display:swap; src:url("fonts/space-grotesk-latin-700-normal.woff2") format("woff2"); } :root { /* ── raw palette (token DEFINITIONS — the ONLY place #hex lives) ────────── */ /* stone — warm neutral foundation */ --stone-50:#fafaf9; --stone-100:#f5f5f4; --stone-200:#e7e5e4; --stone-300:#d6d3d1; --stone-400:#a8a29e; --stone-500:#78716c; --stone-600:#57534e; --stone-700:#44403c; --stone-800:#292524; --stone-900:#1c1917; /* amber — the brand accent */ --amber-400:#fbbf24; --amber-500:#f59e0b; --amber-600:#d97706; --amber-50:#fffbeb; /* emerald — secondary / positive */ --emerald-500:#10b981; --emerald-600:#059669; --emerald-50:#ecfdf5; --emerald-950:#04291b; /* danger */ --red-600:#dc2626; --red-50:#fef2f2; --white:#ffffff; /* per-subject palette (calm, distinct — applied as accent + tint + dot + chip). * a11y: colour is NEVER the sole signal; always paired with the subject NAME. */ --s-indigo-accent:#818cf8; --s-indigo-dot:#6366f1; --s-indigo-tint:#eef2ff; --s-indigo-ic:#4f46e5; --s-rose-accent:#fb7185; --s-rose-dot:#f43f5e; --s-rose-tint:#fff1f2; --s-rose-ic:#e11d48; --s-emerald-accent:#34d399; --s-emerald-dot:#10b981; --s-emerald-tint:#ecfdf5; --s-emerald-ic:#059669; --s-sky-accent:#38bdf8; --s-sky-dot:#0ea5e9; --s-sky-tint:#f0f9ff; --s-sky-ic:#0284c7; --s-amber-accent:#fbbf24; --s-amber-dot:#f59e0b; --s-amber-tint:#fffbeb; --s-amber-ic:#d97706; --s-violet-accent:#a78bfa; --s-violet-dot:#8b5cf6; --s-violet-tint:#f5f3ff; --s-violet-ic:#7c3aed; /* ── semantic aliases (what templates/components reference) ── */ --color-bg:var(--stone-100); --color-surface:var(--white); --color-text:var(--stone-900); --color-text-muted:var(--stone-500); --color-text-faint:var(--stone-400); --color-border:var(--stone-200); --color-accent:var(--amber-400); --color-ink:var(--stone-900); /* ── type ── */ --font-sans:"Manrope", ui-sans-serif, system-ui, sans-serif; --font-display:"Space Grotesk", ui-sans-serif, system-ui, sans-serif; /* ── shape & elevation ── */ --radius-lg:.5rem; --radius-xl:.75rem; --radius-2xl:1rem; --radius-3xl:1.5rem; --radius-pill:9999px; --shadow-sm:0 1px 2px 0 rgb(28 25 23 / .06); --shadow-md:0 4px 6px -2px rgb(28 25 23 / .07), 0 2px 4px -2px rgb(28 25 23 / .06); --shadow-lg:0 12px 24px -8px rgb(28 25 23 / .16), 0 0 0 1px rgb(28 25 23 / .04); } /* ── base ─────────────────────────────────────────────────────────────────── */ * { box-sizing:border-box; } body { margin:0; background:var(--color-bg); color:var(--color-text); font:400 1rem/1.5 var(--font-sans); -webkit-font-smoothing:antialiased; } h1,h2,h3 { font-family:var(--font-display); letter-spacing:-.02em; margin:0; } a { color:inherit; } button { font-family:var(--font-sans); } .muted { color:var(--color-text-muted); } :where(button,a,input,[tabindex]):focus-visible { outline:2px solid var(--color-ink); outline-offset:2px; } /* ── app shell (redojo-0084) ── * ONE shared shell (components.AppShell) frames every authenticated page. Header AND content share * ONE canonical width (1100) — locked together so the header can't jump AND content never pokes * outside the chrome (the Designer's UX call: content-≤-header, one width for the whole app). * The .shell-header band is constant; .shell-content matches it; a reserved-but-empty .shell-footer * region lets a real footer later land in one place. Replaces the old per-page .wrap, whose differing * max-widths (home 1100 / catalog 1080 / schedule 1240) caused the header jump. * box-sizing:border-box is global (top of file), so max-width includes the 24px inline padding — * the constant band width matches the old .wrap. */ .app-shell { min-height:100svh; display:flex; flex-direction:column; } .shell-inner { width:100%; margin-inline:auto; padding-inline:24px; } .shell-header { max-width:1100px; padding-top:28px; } .shell-content { max-width:1100px; padding-bottom:40px; flex:1; } .shell-content-center { display:flex; flex-direction:column; } /* Home: vertically centre the sparse landing */ .shell-footer { max-width:1100px; } /* reserved region — empty in this slice */ .site-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; } html { scrollbar-gutter:stable; } /* redojo-0084 AC9 — scrollbar appear/disappear never shifts centred content */ /* brand lockup — loop-D mark (amber) on a dark tile + the wordmark (+ tagline). */ .brand { display:inline-flex; align-items:center; gap:12px; text-decoration:none; } .brand-mark { display:grid; place-items:center; width:40px; height:40px; flex:none; border-radius:var(--radius-xl); background:var(--stone-900); color:var(--amber-400); } .brand-mark svg { width:18px; height:auto; display:block; fill:currentColor; } .brand-mark svg path[fill="none"] { stroke:currentColor; } .brand-name { display:block; font-family:var(--font-display); font-weight:700; font-size:19px; line-height:1.1; letter-spacing:-.02em; color:var(--color-text); } .brand-tag { display:block; font-size:11px; color:var(--color-text-muted); margin-top:1px; } /* top nav */ .nav { display:flex; align-items:center; gap:4px; } .nav-link { padding:8px 12px; border-radius:var(--radius-lg); font-size:14px; font-weight:600; color:var(--color-text-muted); text-decoration:none; transition:background .15s,color .15s; } .nav-link:hover { background:rgb(255 255 255 / .7); } .nav-link-active { background:var(--white); color:var(--color-text); box-shadow:var(--shadow-sm); } .nav-link-active:hover { background:var(--white); } .avatar { display:grid; place-items:center; width:36px; height:36px; border-radius:var(--radius-pill); background:var(--emerald-600); color:var(--white); font-weight:700; font-size:14px; } /* ── surfaces ── */ .card { background:var(--color-surface); border-radius:var(--radius-3xl); box-shadow:var(--shadow-sm); padding:24px; } /* ── buttons ── */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; font-family:var(--font-sans); cursor:pointer; text-decoration:none; transition:background .15s,opacity .15s; } .btn-primary { border-radius:var(--radius-xl); background:var(--stone-900); color:var(--white); padding:10px 16px; font-size:14px; font-weight:700; } .btn-primary:hover { background:var(--stone-800); } .btn-primary:disabled { opacity:.5; cursor:default; } .btn-ghost { border-radius:var(--radius-xl); background:transparent; color:var(--stone-600); padding:8px 12px; font-size:14px; font-weight:600; } .btn-ghost:hover { background:var(--stone-100); } .btn-amber { border-radius:var(--radius-xl); background:var(--amber-400); color:var(--stone-900); padding:10px 16px; font-size:14px; font-weight:700; } .btn-amber:hover { background:var(--amber-500); } .btn-danger { border-radius:var(--radius-xl); background:transparent; color:var(--red-600); padding:8px 12px; font-size:14px; font-weight:600; } .btn-danger:hover { background:var(--red-50); } .btn-sm { padding:7px 12px; font-size:13px; } .btn-block { width:100%; } /* ── badge ── */ .badge { display:inline-block; border-radius:var(--radius-pill); padding:2px 9px; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; } .badge-stone { background:var(--stone-100); color:var(--stone-600); } .badge-amber { background:var(--amber-50); color:var(--amber-600); } .badge-emerald { background:var(--emerald-50); color:var(--emerald-600); } /* ── progress bar ── */ .bar { height:8px; background:var(--stone-200); border-radius:var(--radius-pill); overflow:hidden; } .bar > i { display:block; height:100%; border-radius:var(--radius-pill); background:var(--color-ink); } /* ── form fields ── */ .field { width:100%; border-radius:var(--radius-xl); padding:10px 14px; font-size:14px; font-family:var(--font-sans); color:var(--color-text); background:var(--white); border:0; outline:none; box-shadow:inset 0 0 0 1px var(--stone-300); transition:box-shadow .15s; } .field:focus { box-shadow:inset 0 0 0 2px var(--stone-900); } .field-label { display:block; margin-bottom:6px; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--color-text-faint); } /* ── per-subject colour (consumes the :root palette via local vars) ── */ .s-indigo { --accent:var(--s-indigo-accent); --dot:var(--s-indigo-dot); --tint:var(--s-indigo-tint); --ic-text:var(--s-indigo-ic); } .s-rose { --accent:var(--s-rose-accent); --dot:var(--s-rose-dot); --tint:var(--s-rose-tint); --ic-text:var(--s-rose-ic); } .s-emerald { --accent:var(--s-emerald-accent); --dot:var(--s-emerald-dot); --tint:var(--s-emerald-tint); --ic-text:var(--s-emerald-ic); } .s-sky { --accent:var(--s-sky-accent); --dot:var(--s-sky-dot); --tint:var(--s-sky-tint); --ic-text:var(--s-sky-ic); } .s-amber { --accent:var(--s-amber-accent); --dot:var(--s-amber-dot); --tint:var(--s-amber-tint); --ic-text:var(--s-amber-ic); } .s-violet { --accent:var(--s-violet-accent); --dot:var(--s-violet-dot); --tint:var(--s-violet-tint); --ic-text:var(--s-violet-ic); } .dot { width:9px; height:9px; border-radius:var(--radius-pill); background:var(--dot); flex:none; } /* lists & rows */ .list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; } .plan-row { display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:var(--radius-2xl); background:var(--tint); border-left:3px solid var(--accent); } .plan-row .topic { font-weight:700; font-size:15px; } .stat { font-family:var(--font-display); font-weight:700; font-size:26px; line-height:1.1; margin:4px 0 0; } .subj-row { display:flex; align-items:center; gap:12px; padding:14px 0; } .subj-row + .subj-row { border-top:1px solid var(--stone-100); } .icon-chip { display:grid; place-items:center; width:40px; height:40px; flex:none; border-radius:var(--radius-xl); background:var(--tint); color:var(--ic-text); font-weight:800; font-family:var(--font-display); font-size:16px; } /* ── full-screen centred shells (landing + auth) ── */ .screen { min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px; padding:48px 24px; } .brand-hero { display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; } .brand-hero .brand-mark { width:64px; height:64px; border-radius:1.25rem; } .brand-hero .brand-mark svg { width:30px; } .brand-hero .wordmark { font-family:var(--font-display); font-weight:700; font-size:32px; letter-spacing:-.03em; line-height:1; margin:0; color:var(--color-text); } .brand-hero .tagline { font-size:14px; color:var(--color-text-muted); margin:0; } .lede-lg { font-size:18px; color:var(--color-text-muted); margin:0; max-width:26rem; text-align:center; } /* auth card */ .auth-card { width:100%; max-width:25rem; background:var(--color-surface); border-radius:var(--radius-3xl); box-shadow:var(--shadow-lg); padding:32px; display:flex; flex-direction:column; gap:20px; text-align:center; } .auth-card h1 { font-size:22px; } .auth-card .lede { color:var(--color-text-muted); margin:0; } .auth-card .foot { color:var(--color-text-faint); font-size:13px; margin:0; } .notice { display:flex; gap:10px; align-items:flex-start; text-align:left; padding:14px 16px; border-radius:var(--radius-xl); background:var(--amber-50); color:var(--amber-600); font-size:13px; } .notice strong { color:var(--color-text); font-weight:700; } /* ── utilities used by the screens ── */ .row { display:flex; align-items:center; gap:12px; } .between { justify-content:space-between; } .grid { display:grid; gap:20px; } .eyebrow { font:700 12px/1.3 var(--font-sans); letter-spacing:.06em; text-transform:uppercase; color:var(--color-text-faint); margin:0; } .lucide { width:1.1em; height:1.1em; stroke-width:1.75; display:inline-block; vertical-align:-.15em; flex-shrink:0; } /* calm "breathing" for the under-construction landing mark */ @keyframes redojo-breathe { 0%,100%{transform:scale(1)} 50%{transform:scale(1.04)} } .breathe { animation:redojo-breathe 6s ease-in-out infinite; transform-origin:center; } @media (prefers-reduced-motion:reduce) { .breathe { animation:none; } } /* ═══════════════════════════════════════════════════════════════════════════ * SCHEDULE (redojo-0061) — component classes for the Weekly-rhythm screen. * * APPEND-ONLY. Paste this block at the END of internal/web/static/tokens.css. * It edits NO existing rule and adds NO new token — every value resolves to an * existing redojo-0058 token (stone · amber · the --s-indigo-* subject accent · * existing radii/shadows/fonts). kata-0026 stays green (no raw #hex here). * * The Architect pins the final class names / promotes the reusable primitives: * • .stepper/.step/.count and .stub* are GENERAL primitives (the −/+ control and * the redojo-0042 "not built yet" mask) — likely promoted out of this section. * • The day stepper borrows the indigo SUBJECT accent (--s-indigo-*) as its colour; * swap for a dedicated semantic alias if preferred. * Excluded from the ship: the preview-only .reviewbar/.seg state switcher and the * .tip* styles (those back an out-of-scope onboarding-tip placeholder), so they are * NOT part of this block. * ═══════════════════════════════════════════════════════════════════════════ */ .ic { width:1.05em; height:1.05em; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; display:inline-block; vertical-align:-.18em; } /* empty-state prompt (first visit — AC1) */ .prompt { display:flex; gap:14px; align-items:flex-start; background:var(--amber-50); border-radius:var(--radius-3xl); padding:18px 20px; box-shadow:inset 0 0 0 1px var(--amber-400); } .prompt-ico { display:grid; place-items:center; width:36px; height:36px; flex:none; border-radius:var(--radius-xl); background:var(--amber-400); color:var(--stone-900); } .prompt h2 { font-family:var(--font-display); font-weight:700; font-size:16px; margin:0 0 4px; color:var(--stone-900); } .prompt p { font-size:13px; line-height:1.5; color:var(--amber-600); margin:0; } /* summary bar: live totals (left) + account-wide session length (right) */ .summary { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px 32px; } .totals { display:flex; flex-wrap:wrap; align-items:center; gap:28px; } .total { display:flex; align-items:baseline; gap:9px; } .total b { font-family:var(--font-display); font-weight:700; font-size:30px; line-height:1; color:var(--color-text); } .total span { font-size:12px; line-height:1.2; color:var(--color-text-muted); } .sesslen { display:flex; align-items:center; gap:14px; padding:12px 14px 12px 18px; border-radius:var(--radius-2xl); background:var(--stone-100); } .sesslen-meta { display:flex; flex-direction:column; } .sesslen-meta .k { font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--color-text-faint); } .sesslen-meta .h { font-size:11px; color:var(--color-text-muted); margin-top:1px; } .sesslen-stepper { display:flex; align-items:center; gap:10px; } .sesslen-val { font-family:var(--font-display); font-weight:700; font-size:18px; line-height:1; width:62px; text-align:center; } .sesslen-val small { font-size:12px; font-weight:600; color:var(--color-text-muted); } /* the −/+ stepper (GENERAL primitive) */ .stepper { display:flex; align-items:center; justify-content:center; gap:10px; } .step { display:grid; place-items:center; width:28px; height:28px; border-radius:var(--radius-lg); background:var(--white); box-shadow:inset 0 0 0 1px var(--stone-200); color:var(--stone-600); cursor:pointer; flex:none; } .step:hover { background:var(--stone-50); } .step:disabled { color:var(--stone-300); cursor:not-allowed; } .count { font-family:var(--font-display); font-weight:700; font-size:24px; line-height:1; width:30px; color:var(--s-indigo-ic); } /* week grid + day card — 2 ROWS (4+3), not a 7-across calendar, so each card is wide enough for * full Subject-package names (redojo-assign-subject-per-session, F7). */ .week { display:grid; gap:12px; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:start; } @media (max-width:900px){ .week { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:560px){ .week { grid-template-columns:1fr; } } .day { display:flex; flex-direction:column; background:var(--color-surface); border-radius:var(--radius-2xl); box-shadow:var(--shadow-sm); padding:14px; } .day.off { background:var(--stone-100); box-shadow:none; } .day h3 { font-family:var(--font-display); font-weight:700; font-size:14px; margin:0 0 10px; } .day.off h3 { color:var(--color-text-faint); } .sess { border-radius:var(--radius-xl); padding:12px 8px; text-align:center; background:var(--s-indigo-tint); } .day.off .sess { background:var(--stone-50); box-shadow:inset 0 0 0 1px var(--stone-200); } .day.off .count { color:var(--stone-300); } .dots { display:flex; align-items:center; justify-content:center; gap:4px; margin-top:9px; min-height:7px; } .dots i { width:7px; height:7px; border-radius:var(--radius-pill); background:var(--s-indigo-dot); } .sesslabel { font-size:12px; font-weight:700; color:var(--s-indigo-ic); margin-top:7px; } .offlabel { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--color-text-faint); margin-top:9px; } /* advisory start cue */ .cue { margin-top:10px; } .cue-toggle { width:100%; display:inline-flex; align-items:center; justify-content:center; gap:6px; font-size:12px; font-weight:700; color:var(--stone-500); background:transparent; border:0; border-radius:var(--radius-lg); padding:6px; cursor:pointer; } .cue-toggle:hover { color:var(--stone-800); } .cue-toggle.add { color:var(--color-text-faint); font-weight:600; box-shadow:inset 0 0 0 1px var(--stone-200); border-style:dashed; } .cue-toggle .muted2 { color:var(--stone-300); font-weight:600; } .cue-edit { display:grid; gap:6px; margin-top:6px; } .cue-edit .row2 { display:flex; gap:6px; } .day.off .cue { visibility:hidden; } .day .grow { flex:1; } .dayhint { font-size:10px; color:var(--color-text-faint); text-align:center; margin-top:9px; } .undergrid { font-size:12px; color:var(--color-text-muted); margin:14px 2px 0; } .undergrid b { color:var(--color-text); } /* stub mask (redojo-0042 "not built yet") — GENERAL primitive, honest + loud for dev */ .stub { position:relative; border-radius:var(--radius-3xl); overflow:hidden; } .stub-tape { position:absolute; inset:0; z-index:1; pointer-events:none; background:repeating-linear-gradient(-45deg, var(--amber-50), var(--amber-50) 14px, var(--amber-400) 14px, var(--amber-400) 16px); opacity:.16; } .stub-tag { position:absolute; top:14px; right:14px; z-index:2; display:inline-flex; align-items:center; gap:6px; background:var(--amber-400); color:var(--stone-900); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; padding:5px 10px; border-radius:var(--radius-pill); } .stub-inner { position:relative; z-index:0; opacity:.6; filter:saturate(.55); pointer-events:none; user-select:none; } /* ═══════════════════════════════════════════════════════════════════════════ * HOLIDAYS (redojo-0062) — additions for the Holidays section of the Schedule screen. * * APPEND-ONLY. Paste at the END of internal/web/static/tokens.css, after the * /* SCHEDULE (redojo-0061) */ block. Edits NO existing rule. No new token — every value * resolves to an existing redojo-0058 token (stone · the existing --red-* danger pair · * radii). kata-0026 stays green (no raw #hex). * * NOTE for the Architect: .form-error is the one genuinely NEW primitive — a token-bound * inline validation message (role="alert"). It's GENERAL (not holidays-specific); promote it * out of this section as the design system's standard form-error treatment. The rhythm * steppers still reject silently (bounded), so this is the first error message in the system. * ═══════════════════════════════════════════════════════════════════════════ */ .holidays h2 { font-family:var(--font-display); font-weight:700; font-size:18px; margin:0 0 4px; } .hol-list { list-style:none; margin:0 0 16px; padding:0; display:flex; flex-direction:column; gap:8px; } .hol-row { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:var(--radius-xl); box-shadow:inset 0 0 0 1px var(--stone-200); } .hol-name { font-weight:700; font-size:14px; } .hol-range { margin-left:auto; display:inline-flex; align-items:center; background:var(--stone-100); color:var(--stone-600); font-size:12px; font-weight:600; padding:4px 10px; border-radius:var(--radius-pill); white-space:nowrap; } .hol-remove { flex:none; display:grid; place-items:center; width:30px; height:30px; border-radius:var(--radius-lg); background:transparent; border:0; color:var(--stone-400); cursor:pointer; } .hol-remove:hover { color:var(--red-600); background:var(--red-50); } .hol-empty { list-style:none; font-size:13px; color:var(--color-text-muted); padding:2px 0; } .hol-form { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; } /* validation message — NEW general primitive (token-bound; role="alert" in markup) */ .form-error { display:flex; gap:8px; align-items:center; margin:0 0 14px; padding:10px 14px; border-radius:var(--radius-xl); background:var(--red-50); color:var(--red-600); font-size:13px; font-weight:600; } /* ═══════════════════════════════════════════════════════════════════════════ * CATALOG (redojo-0066) — component classes for the /catalog browse screen. * * APPEND-ONLY. Paste at the END of internal/web/static/tokens.css (after the * HOLIDAYS section). Edits NO existing rule. No new token — every value resolves to an * existing redojo-0058 token (stone · amber · the --s-* subject palette · radii/shadows). * The subject accents reuse the .s-* palette; a11y: colour is paired with the subject NAME, * never the sole signal. kata-0026 stays green (no raw #hex). * * Note for the Architect: .icon-chip · .badge-stone · the app shell (.shell-*, redojo-0084) · * .site-header are existing primitives reused as-is. The .s-* accent blocks below mirror the existing subject palette * but expose only accent/tint/ic (no dot) for this screen — fold into the canonical .s-* if * preferred. * ═══════════════════════════════════════════════════════════════════════════ */ .cat-context { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin:14px 0 4px; font-size:13px; color:var(--color-text-muted); } .cat-context .chip { display:inline-flex; align-items:center; gap:7px; background:var(--stone-100); border-radius:var(--radius-pill); padding:5px 12px; font-weight:600; color:var(--stone-600); } .qual-nav { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 26px; } .qual-nav a { text-decoration:none; font-size:13px; font-weight:700; color:var(--stone-600); background:var(--white); box-shadow:inset 0 0 0 1px var(--stone-200); border-radius:var(--radius-pill); padding:7px 14px; } .qual-nav a:hover { box-shadow:inset 0 0 0 1px var(--stone-300); background:var(--stone-50); } .qual { display:flex; align-items:baseline; gap:12px; margin:0 0 16px; padding-bottom:10px; border-bottom:1px solid var(--stone-200); } .qual h2 { font-family:var(--font-display); font-weight:700; font-size:22px; } .qual .qmeta { font-size:13px; color:var(--color-text-faint); font-weight:600; } .qual-section { margin-bottom:40px; scroll-margin-top:16px; } .subjects { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; align-items:start; } .subject-card { display:flex; flex-direction:column; background:var(--color-surface); border-radius:var(--radius-3xl); box-shadow:var(--shadow-sm); padding:20px; border-left:4px solid var(--accent); } .subject-card.wide { grid-column:1 / -1; } .subject-head { display:flex; align-items:flex-start; gap:12px; margin-bottom:16px; } .subject-head .icon-chip { flex:none; } .subject-head h3 { font-family:var(--font-display); font-weight:700; font-size:18px; line-height:1.1; } .subject-sub { font-size:12.5px; color:var(--color-text-muted); margin-top:3px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; } .subject-sub .sep { color:var(--stone-300); } .subject-head .ed-count { margin-left:auto; flex:none; } .editions { list-style:none; margin:0; padding:0; display:grid; gap:10px; align-items:start; } .subject-card.wide .editions { grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); } .edition { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:var(--radius-xl); background:var(--tint); } .ed-id { flex:1; min-width:0; } .ed-name { font-weight:700; font-size:14px; color:var(--color-text); min-height:2.6em; line-height:1.3; } .ed-syl { font-size:12px; color:var(--color-text-muted); margin-top:2px; } .ed-syl .lab { color:var(--ic-text); font-weight:700; } /* The Enrol control (.enrol / .enrolled / .enrol-form) is defined in the ENROLMENT section below (redojo-0067) — the redojo-0066 reserved disabled "Enrol · soon" placeholder was retired there. */ .cat-note { font-size:12px; color:var(--color-text-faint); margin:6px 2px 0; } /* subject accents for this screen (mirror the design-system subject palette) */ .s-indigo { --accent:var(--s-indigo-accent); --tint:var(--s-indigo-tint); --ic-text:var(--s-indigo-ic); } .s-rose { --accent:var(--s-rose-accent); --tint:var(--s-rose-tint); --ic-text:var(--s-rose-ic); } .s-emerald { --accent:var(--s-emerald-accent); --tint:var(--s-emerald-tint); --ic-text:var(--s-emerald-ic); } .s-sky { --accent:var(--s-sky-accent); --tint:var(--s-sky-tint); --ic-text:var(--s-sky-ic); } .s-amber { --accent:var(--s-amber-accent); --tint:var(--s-amber-tint); --ic-text:var(--s-amber-ic); } .s-violet { --accent:var(--s-violet-accent); --tint:var(--s-violet-tint); --ic-text:var(--s-violet-ic); } /* ═══════════════════════════════════════════════════════════════════════════ * ENROLMENT (redojo-0067) — the two-state Enrol control on the /catalog edition rows. * * Retires the redojo-0066 reserved placeholder (the disabled ".enrol" + ".enrol .soon" * pill were removed from the CATALOG section above). No new token — stone for the active * action (the system's primary treatment), the existing emerald "positive" pair for the * settled state. kata-0026 stays green (no raw #hex). * * a11y (rule colour-never-sole-signal): the two states differ by TEXT + ICON, not colour * alone — "Enrol" (a real focusable button) vs a check glyph + the word "Enrolled". * ═══════════════════════════════════════════════════════════════════════════ */ /* the enrol form wraps the button but stays out of the row's flex layout */ .enrol-form { display:contents; } /* enrollable — the active, focusable primary enrol action (a real submit button) */ .enrol { flex:none; display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--white); background:var(--stone-900); box-shadow:none; border:0; border-radius:var(--radius-lg); padding:7px 13px; cursor:pointer; font-family:var(--font-sans); transition:background .15s; } .enrol:hover { background:var(--stone-700); } /* enrolled — a settled, non-actionable confirmation (check + word; NOT a button) */ .enrolled { flex:none; display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--emerald-600); background:var(--emerald-50); border-radius:var(--radius-lg); padding:7px 11px; white-space:nowrap; } .enrolled .ic { width:14px; height:14px; } /* ═══════════════════════════════════════════════════════════════════════════ * EXAM DATA (redojo-0081) — exam-date + past-paper-period capture AT enrol, on the /catalog edition * rows. Transcoded from the Designer's package-examdata (HANDOFF-v2.1). Reuses existing primitives * (.field / .field-label, .btn.btn-primary/.btn-ghost + .btn-sm, .form-error); only the classes below * are new. No new token — stone for structure + the subject --ic-text accent for the summary icon. * (The Designer's .examdata-add / enrolled-but-empty affordance is omitted: the PO chose Option B — * legacy enrolments are cleaned up at deploy, so there is no enrolled-but-empty state.) * ═══════════════════════════════════════════════════════════════════════════ */ /* an enrolled/enrolling edition that carries the exam-data zone stacks vertically so the zone gets full width — works in BOTH the ~220px multi-edition grid cell AND the full-width single-edition row */ .edition.has-exam { flex-direction:column; align-items:stretch; gap:0; } .edition.has-exam .edition-main { display:flex; align-items:center; gap:12px; } .examdata { margin-top:11px; padding-top:11px; border-top:1px solid var(--stone-200); } /* captured show-back (AC1/AC4): calendar icon + exam date · period, with an Edit disclosure */ .examdata-summary { display:flex; align-items:center; gap:7px; flex-wrap:wrap; min-height:34px; font-size:12.5px; font-weight:600; color:var(--color-text); } .examdata-summary .ic { width:14px; height:14px; color:var(--ic-text); } .examdata-summary .sep { color:var(--stone-300); } .examdata-summary .period { color:var(--color-text-muted); font-weight:600; } .examdata-editlink { margin-left:auto; display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; color:var(--stone-600); background:var(--white); box-shadow:inset 0 0 0 1px var(--stone-200); border:0; border-radius:var(--radius-pill); padding:4px 11px; cursor:pointer; transition:box-shadow .15s, background .15s, color .15s; } .examdata-editlink:hover { background:var(--stone-50); box-shadow:inset 0 0 0 1px var(--stone-300); color:var(--stone-800); } .examdata-editlink .ic { width:12px; height:12px; color:inherit; } /* the capture/edit form (date + weeks + save) — stacks so it fits the 220px cell */ .examdata-intro { font-size:12px; color:var(--color-text-muted); margin:0 0 2px; } .examdata-form { display:flex; flex-direction:column; gap:10px; } .examdata-form .fld { display:flex; flex-direction:column; gap:5px; } .examdata-weeks-row { display:flex; align-items:center; gap:8px; } .examdata-weeks-row .field { width:78px; text-align:center; } .examdata-weeks-row .unit { font-size:13px; font-weight:600; color:var(--color-text-muted); } .examdata-hint { font-size:11px; color:var(--color-text-faint); margin:1px 0 0; } .examdata-actions { display:flex; gap:8px; } /* ═══════════════════════════════════════════════════════════════════════════ * ACCOUNT (redojo-0065) — shell account menu · /account danger zone · delete confirm. * * APPEND-ONLY. Paste at the END of internal/web/static/tokens.css. Edits NO existing rule. * No new token — stone + the existing --red-600/--red-50 danger pair + emerald .avatar + radii/ * shadows. kata-0026: var() only, no raw #hex. Reuses .avatar / .card / .btn / .btn-ghost / * .btn-block / .site-header as-is. * * Note for the Architect: .btn-danger-solid is the one genuinely NEW primitive — a SOLID destructive * button (the existing .btn-danger is a quiet red-text ghost). It's general (any irreversible * confirm) — promote it alongside .btn-danger. The .account-menu popover is a native
* disclosure (no-JS-robust — a destructive path must never depend on scripting). * ═══════════════════════════════════════════════════════════════════════════ */ /* account menu — native
in the header top-right (replaces the bare Sign-out button) */ .account-menu { position:relative; } .account-menu > summary { list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:7px; border-radius:var(--radius-pill); padding:3px 8px 3px 3px; } .account-menu > summary::-webkit-details-marker { display:none; } .account-menu > summary:hover { background:var(--stone-100); } .account-menu > summary:focus-visible { outline:2px solid var(--color-ink); outline-offset:2px; } .account-menu .chev { color:var(--color-text-muted); transition:transform .15s; } .account-menu[open] .chev { transform:rotate(180deg); } .account-pop { position:absolute; top:calc(100% + 8px); right:0; z-index:30; width:248px; background:var(--color-surface); border-radius:var(--radius-2xl); box-shadow:var(--shadow-lg); padding:8px; display:flex; flex-direction:column; } .account-pop-head { display:flex; align-items:center; gap:10px; padding:10px 10px 12px; border-bottom:1px solid var(--stone-100); margin-bottom:6px; } .account-pop-head .k { font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--color-text-faint); } .account-pop-head .email { font-size:13px; font-weight:600; color:var(--color-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:150px; } .account-pop-item { display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:transparent; border:0; font:600 14px/1 var(--font-sans); color:var(--color-text); text-decoration:none; padding:10px; border-radius:var(--radius-lg); cursor:pointer; } .account-pop-item:hover { background:var(--stone-100); } .account-pop-item .ic { width:16px; height:16px; color:var(--color-text-muted); } .account-pop-form { margin:0; } /* Test-account-only preset section (redojo-test-account-preset-profiles) — a dev-tool label that reuses the menu head's faint-uppercase language; never rendered for a real student. */ .account-pop-sep { font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--color-text-faint); padding:10px 10px 4px; margin-top:4px; border-top:1px solid var(--stone-100); } /* /account settings page */ .account-page { max-width:760px; } .account-whoami { font-size:15px; color:var(--color-text-muted); margin:6px 0 0; } .account-whoami strong { color:var(--color-text); font-weight:700; word-break:break-all; } /* Danger zone — red-bordered card (the delete ENTRY point; does not itself delete) */ .danger-zone { margin-top:32px; background:var(--color-surface); border-radius:var(--radius-3xl); border:1.5px solid var(--red-600); padding:0; overflow:hidden; } .danger-head { display:flex; align-items:center; gap:9px; padding:16px 24px; background:var(--red-50); color:var(--red-600); font-weight:800; font-size:13px; letter-spacing:.04em; text-transform:uppercase; } .danger-head .ic { width:16px; height:16px; } .danger-body { padding:22px 24px 24px; } .danger-body h2 { font-family:var(--font-display); font-weight:700; font-size:19px; margin:0 0 8px; } .danger-body p { font-size:14px; line-height:1.55; color:var(--color-text-muted); margin:0 0 18px; max-width:46rem; } .danger-body p strong { color:var(--color-text); font-weight:700; } /* solid-red destructive button — NEW variant (existing .btn-danger is a quiet ghost) */ .btn-danger-solid { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; cursor:pointer; border-radius:var(--radius-xl); background:var(--red-600); color:var(--white); padding:11px 18px; font-size:14px; font-weight:700; font-family:var(--font-sans); text-decoration:none; } .btn-danger-solid:hover { filter:brightness(.93); } .btn-danger-solid:focus-visible { outline:2px solid var(--red-600); outline-offset:2px; } .btn-danger-solid .ic { width:16px; height:16px; } /* /account/delete confirm page */ .confirm-wrap { max-width:540px; margin-inline:auto; padding-top:12px; } .confirm-card { background:var(--color-surface); border-radius:var(--radius-3xl); box-shadow:var(--shadow-lg); padding:30px; } .confirm-ico { display:grid; place-items:center; width:52px; height:52px; border-radius:var(--radius-pill); background:var(--red-50); color:var(--red-600); margin-bottom:16px; } .confirm-ico .ic { width:26px; height:26px; } .confirm-card h1 { font-family:var(--font-display); font-weight:700; font-size:24px; letter-spacing:-.02em; margin:0 0 12px; } .confirm-card .lead { font-size:14px; color:var(--color-text-muted); margin:0 0 12px; } .erase-list { list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:8px; } .erase-list li { display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; color:var(--color-text); } .erase-list .ic { width:15px; height:15px; color:var(--red-600); flex:none; } .confirm-warning { display:flex; align-items:center; gap:9px; padding:12px 14px; border-radius:var(--radius-xl); background:var(--red-50); color:var(--red-600); font-size:14px; font-weight:800; margin:0 0 22px; } .confirm-warning .ic { width:18px; height:18px; flex:none; } .confirm-actions { display:flex; flex-direction:column; gap:10px; } /* ═════════════════════════════════════════════════════════════════════════════ * RUNNER (redojo-runner-dispatch-and-present-lesson) — Present lesson + Day complete. * * APPEND-ONLY. Paste at the END of internal/web/static/tokens.css. Edits NO existing rule. * No new token — subject accent (--ic-text/--tint via .s-*), stone/emerald/amber, existing * radii/shadows. kata-0026: var() only, no raw #hex. Reuses .card-family, .btn/.btn-ghost/ * .btn-danger/.btn-sm, .icon-chip, the .s-* subject accents, and .stub* as-is. * * Note for the Architect: .btn-open (primary "go study") and .btn-done (completion) are the two * new action styles — fold into the general .btn-* set if preferred. .lesson-title reuses the * display type; the subject accent maps from the subject (reuse the catalog subject→accent map). * ═══════════════════════════════════════════════════════════════════════════ */ /* the focused study column — narrower than the 1100 shell so the single task reads calmly */ .runner { max-width:720px; margin-inline:auto; } /* deferred session-pulse chrome (un-sliced) — a compact bar, shown as a .stub this slice */ .session-bar { display:flex; align-items:center; gap:16px; padding:14px 18px; border-radius:var(--radius-2xl); background:var(--color-surface); box-shadow:var(--shadow-sm); } .session-bar .sb-of { font-size:13px; font-weight:700; color:var(--color-text); } .session-bar .sb-clock { display:inline-flex; align-items:center; gap:7px; font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--color-text); } .session-bar .sb-clock .ic { color:var(--color-text-muted); } .session-bar .sb-actions { margin-left:auto; display:flex; gap:8px; } /* the lesson card */ .lesson-card { position:relative; background:var(--color-surface); border-radius:var(--radius-3xl); box-shadow:var(--shadow-md); padding:32px; border-left:5px solid var(--accent); } .lesson-eyebrow { display:flex; align-items:center; gap:10px; margin-bottom:18px; } .lesson-eyebrow .icon-chip { width:36px; height:36px; font-size:15px; } .lesson-place { font-size:13px; font-weight:600; color:var(--color-text-muted); display:flex; flex-wrap:wrap; align-items:center; gap:6px; } .lesson-place .subj { color:var(--ic-text); font-weight:800; } .lesson-place .chev { color:var(--stone-300); } .lesson-kicker { font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--color-text-faint); margin:0 0 8px; } .lesson-title { font-family:var(--font-display); font-weight:700; font-size:32px; line-height:1.12; letter-spacing:-.02em; margin:0 0 14px; } .lesson-lead { font-size:15px; line-height:1.55; color:var(--color-text-muted); margin:0 0 26px; max-width:42rem; } .lesson-actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; } /* Open lesson — the primary "go study" affordance (opens SME in a new tab) */ .btn-open { display:inline-flex; align-items:center; gap:9px; border-radius:var(--radius-xl); background:var(--stone-900); color:var(--white); padding:13px 22px; font-size:15px; font-weight:700; text-decoration:none; } .btn-open:hover { background:var(--stone-800); } .btn-open .ic { width:17px; height:17px; } /* Mark done — the completion command */ .btn-done { display:inline-flex; align-items:center; gap:8px; border:0; cursor:pointer; border-radius:var(--radius-xl); background:var(--emerald-50); color:var(--emerald-600); padding:13px 20px; font-size:15px; font-weight:700; } .btn-done:hover { background:var(--emerald-50); box-shadow:inset 0 0 0 1.5px var(--emerald-500); } .btn-done .ic { width:17px; height:17px; } .lesson-hint { font-size:12.5px; color:var(--color-text-faint); margin:16px 0 0; } /* Day complete — minimal, on-system placeholder (NOT a stub) */ .daydone { max-width:520px; margin-inline:auto; text-align:center; padding:56px 24px; display:flex; flex-direction:column; align-items:center; gap:6px; } .daydone-mark { display:grid; place-items:center; width:76px; height:76px; border-radius:var(--radius-pill); background:var(--emerald-50); color:var(--emerald-600); margin-bottom:14px; } .daydone-mark .ic { width:34px; height:34px; stroke-width:2.4; } .daydone h1 { font-family:var(--font-display); font-weight:700; font-size:30px; letter-spacing:-.02em; margin:0; } .daydone p { font-size:16px; color:var(--color-text-muted); margin:6px 0 0; max-width:32rem; } .daydone-foot { margin-top:26px; } /* ═══════════════════════════════════════════════════════════════════════════ * redojo-runner-activity-completion-transition (B) — the unified activity-completion transition beat. * TRANSCODED from the Designer's verified preview.html (HANDOFF-v1). The beat = the committed .daydone * terminal + the .ex-summary recap rows (both REUSED verbatim) + these small additions: the celebration * eyebrow (.xn-eyebrow), the "Up next" preview block (.xn-next holding one reused .wk-card.is-planned) or the * no-next inline Day-complete note (.xn-alldone), and the folded-in aesthetic-review tweaks (c) heading scale * + (d) the rail progress bar. All var()-bound, no new token, no raw #hex. Tweak (b) [the "Just done" rail * marker + rail done-cards] is DEFERRED to redojo-runner-landing-done-cards (the marker needs done cards in * the rail — that follow-up's territory). ═══════════════════════════════════════════════════════════════ */ /* tweak (c) — the celebration heading a step under the 30px Day-complete h1, so the recap below isn't top-heavy */ .daydone.is-transition { max-width:560px; } .daydone.is-transition h1 { font-size:27px; margin-top:2px; } /* kind eyebrow above the celebration heading (📖 Lessons complete / 🎯 Practice complete) */ .xn-eyebrow { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--color-text-muted); } .xn-eyebrow .ic { width:14px; height:14px; } /* the up-next preview — a titled section holding the SAME .wk-card.is-planned the rail ships */ .xn-next { width:100%; max-width:460px; margin:26px auto 0; text-align:left; padding-top:24px; border-top:1px solid var(--color-border); } .xn-cap { font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--color-text-faint); margin:0 0 11px; display:flex; align-items:center; gap:7px; } .xn-cap .ic { width:13px; height:13px; } .xn-next .wk-card { cursor:default; } /* here it's a read-only preview, not a drawer trigger */ .xn-next .wk-card:hover { transform:none; box-shadow:var(--shadow-sm); } .xn-planned-chip { background:var(--stone-100); color:var(--color-text-muted); } /* the preview card's visible "Planned" chip (rail planned cards show none) */ /* no next → an inline "that was your last activity" note (Continue → Day complete) */ .xn-alldone { width:100%; max-width:460px; margin:26px auto 0; padding-top:24px; border-top:1px solid var(--color-border); display:flex; align-items:center; gap:13px; text-align:left; } .xn-alldone .re-ic { flex:none; width:40px; height:40px; border-radius:var(--radius-xl); background:var(--emerald-50); color:var(--emerald-600); display:grid; place-items:center; } .xn-alldone .re-ic .ic { width:21px; height:21px; } .xn-alldone-t { font-size:14px; font-weight:800; color:var(--color-text); } .xn-alldone-s { font-size:12.5px; font-weight:600; color:var(--color-text-muted); margin-top:2px; } /* 🎨 tweak (d) — the rail progress becomes a glanceable emerald BAR + a short "N of M done" caption rather than the "N done · M to go" text tally (which duplicated the cards' own Done/planned states). */ .rail-bar { display:flex; flex-direction:column; gap:7px; } .rail-bar-track { height:6px; border-radius:var(--radius-pill); background:var(--stone-200); overflow:hidden; } .rail-bar-fill { height:100%; border-radius:var(--radius-pill); background:var(--emerald-500); transition:width .3s ease; } .rail-bar-cap { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--color-text-muted); } .rail-bar-cap .ic { width:13px; height:13px; color:var(--emerald-600); } .rail-bar-cap b { color:var(--emerald-600); font-weight:800; } /* ═══════════════════════════════════════════════════════════════════════════ * SESSION SUBJECT (redojo-assign-subject-per-session, F7) — per-slot Subject-package picker in the * Schedule day card. A slot assigns ONE enrolled SUBJECT PACKAGE (edition); the picker shows FULL * package names (colour = subject family; the full name distinguishes editions). Custom
* popover (native s in the Apply
(no-JS native, keyboard + focus-visible). Unset is a real third radio (value=""), so a mis-tap is correctable WITHOUT JS. */ .cux-oc { display:inline-flex; align-items:center; gap:6px; } .cux-opt { position:relative; display:inline-flex; cursor:pointer; } .cux-opt-in { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; } .cux-opt-b { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; font:700 12px/1 var(--font-sans); color:var(--stone-600); background:var(--white); box-shadow:inset 0 0 0 1.5px var(--stone-300); border-radius:var(--radius-pill); padding:9px 14px; } .cux-opt-b .ic { width:14px; height:14px; stroke-width:2.4; } .cux-opt:hover .cux-opt-b { background:var(--stone-50); box-shadow:inset 0 0 0 1.5px var(--stone-400); } .cux-opt-in:focus-visible + .cux-opt-b { outline:2px solid var(--stone-900); outline-offset:2px; } /* Got it — emerald fill + check glyph (the runner's .btn-gotit idiom, row-scale) */ .cux-opt.is-got .cux-opt-in:checked + .cux-opt-b { background:var(--emerald-500); color:var(--white); box-shadow:none; } /* Not yet — amber fill + rotate glyph. Distinguished from Got it by GLYPH + WORD, not colour. */ .cux-opt.is-not .cux-opt-in:checked + .cux-opt-b { background:var(--amber-400); color:var(--stone-900); box-shadow:none; } /* clear (unset) — a quiet ✕; the checked (= unmarked) state is deliberately the flattest thing in the row */ .cux-opt.is-clear .cux-opt-b { padding:9px; color:var(--stone-400); box-shadow:inset 0 0 0 1.5px var(--stone-200); } .cux-opt.is-clear .cux-opt-in:checked + .cux-opt-b { color:var(--stone-300); box-shadow:inset 0 0 0 1.5px var(--stone-100); background:var(--white); } .cux-opt.is-clear:hover .cux-opt-b { color:var(--stone-700); } /* ── already marked: the recorded outcome as a badge, NO control and NO un-mark (one-way) ── Mirrors S12's .cu-done treatment; a Not yet also states its consequence (the redo). */ .cux-marked { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; border-radius:var(--radius-pill); padding:5px 12px 5px 10px; white-space:nowrap; } .cux-marked .ic { width:13px; height:13px; } .cux-marked.is-got { color:var(--emerald-600); background:var(--emerald-50); } .cux-marked.is-not { color:var(--amber-600); background:var(--amber-50); box-shadow:inset 0 0 0 1px var(--amber-400); } /* nothing left to mark in a set / no exercise-set under a sub-topic */ .cux-nothing { display:flex; align-items:center; gap:9px; margin:8px 2px; padding:12px 14px; border-radius:var(--radius-lg); background:var(--emerald-50); color:var(--emerald-600); font-size:12.5px; font-weight:600; } .cux-nothing .ic { width:15px; height:15px; flex:none; } .cux-noset { display:flex; align-items:center; gap:8px; margin:2px 0 6px 46px; font-size:12px; color:var(--stone-500); } .cux-noset .ic { width:14px; height:14px; flex:none; } /* the tree's exercise-set row: the masked "🔒 Exercises · S13" pill (.cu-exset-stub) is REMOVED — the row now states how much is left to mark and points down to the Practice-sets card. */ .cux-count { justify-self:end; display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800; color:var(--s-indigo-ic); background:var(--stone-50); border-radius:var(--radius-pill); padding:3px 10px; white-space:nowrap; } .cux-count-a { color:var(--stone-400); } .trow[data-kind="exset"]:hover .cux-count { background:var(--white); box-shadow:inset 0 0 0 1px var(--stone-300); } /* the landing flash after a jump from the tree row (enhancement only) */ .cux-set.is-jumped { box-shadow:inset 0 0 0 2px var(--s-indigo-ic); } /* ── Apply bar: the mixed tally (lessons AND exercises, split by outcome) ── */ .cux-split { display:inline-flex; align-items:center; gap:10px; font-size:12px; font-weight:700; } .cux-split[hidden] { display:none; } /* the split is always rendered as the island's toggle hook (the counts are client-side, so the server can never gate it); this restores the `hidden` attribute the explicit display above would otherwise defeat — same trap + fix as .rd-defaultnote[hidden] */ .cux-split-got { display:inline-flex; align-items:center; gap:5px; color:var(--emerald-500); } .cux-split-not { display:inline-flex; align-items:center; gap:5px; color:var(--amber-400); } .cux-split .ic { width:13px; height:13px; } /* ═══════════════════════════════════════════════════════════════════════════ * EXAM SESSION PICKER (redojo-ia-exam-session-picker, S1) — extends the redojo-0081 EXAM DATA block. * No new token (reuses .field / .field-label / .form-error / the .examdata-* primitives). Transcoded * from the Designer's verified package (package-exam-session-picker, tokens-session-additions.css). * * CONTROL: a native can't fill a date input without JS), it sits consistently with the panel's * existing native date/number .field inputs, and it gives keyboard + focus + contrast for free (kids' * app). The schedule's custom
popover is deliberately NOT reused — that solved a tight inline * grid slot, not this full-width SSR form. * ═══════════════════════════════════════════════════════════════════════════ */ /* the required Exam-session