/* ========================================================================== ShouldaSaid — "The Adjudicator's Ballot" design system Ported from DESIGN_DIR/tokens.js + styles.js (mockup .ss scope removed). Mobile-first. Light is default; dark = "evening chamber". Fonts are linked from index.html (Google Fonts) — no @import here. ========================================================================== */ /* ---------- 1. Tokens (light, default) ---------- */ :root { /* colour */ --paper: #F3EEE3; --sheet: #FBF8F1; --sunken: #E8E1D2; --ink: #1B2640; --ink-2: #3F4A63; --ink-3: #5A6074; --rule: #D9CFBC; --rule-strong: #8C7F66; --pen: #9A2B22; --pen-soft: #F1DAD4; --side: #E6AC2E; --side-soft: #F7E3AE; --on-side: #1B1407; --side-ink: #7A5306; --opp: #2F4A6E; --opp-soft: #DDE4ED; --ok: #2E6B46; --focus: #1D5BD6; --carbon: #F6E3DD; --card: #FFFDF8; --card-line: #C8D5E5; --card-margin: #D98A80; /* type (latin default) */ --f-display: 'Newsreader', Georgia, serif; --f-ui: 'IBM Plex Sans', system-ui, sans-serif; --f-mono: 'IBM Plex Mono', ui-monospace, monospace; --f-hand: 'Caveat', cursive; --fs-12: 12px; --fs-14: 14px; --fs-16: 16px; --fs-18: 18px; --fs-22: 22px; --fs-28: 28px; --fs-36: 36px; --fs-48: 48px; --fs-64: 64px; --fs-84: 84px; /* space · radius · shadow (light) */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --r-1: 2px; --r-2: 4px; --r-3: 8px; --r-pill: 999px; --sh-sheet: 0 1px 0 rgba(27,38,64,.06), 0 8px 24px -14px rgba(27,38,64,.28); --sh-lift: 0 2px 0 rgba(27,38,64,.06), 0 22px 48px -20px rgba(27,38,64,.40); --sh-press: inset 0 2px 0 rgba(27,38,64,.10); --body-line: 1.5; /* ---- legacy variable bridge ---- public/js/app.js and stray inline styles still reference the OLD design- system custom properties (--color-*, --space-*, --text-*, --radius-*, --font-*) directly via inline style="...". Until the app.js migration (Phase 2) removes those, alias them here so nothing renders unstyled or with a see-through/invalid value. Safe to delete once app.js no longer references any --color-*/--text-*/--font-*/old --space-N/--radius-* variable. */ --color-bg: var(--paper); --color-surface: var(--sheet); --color-surface-2: var(--sunken); --color-border: var(--rule); --color-text: var(--ink); --color-text-muted: var(--ink-2); --color-text-faint: var(--ink-3); --color-primary: var(--ink); --color-accent: var(--side-ink); --color-primary-glow: var(--side-soft); --color-steam: var(--sunken); --color-win: var(--ok); --color-lose: var(--pen); --color-warning: var(--side-ink); --color-brand: var(--pen); --font-display: var(--f-display); --font-body: var(--f-ui); --radius-sm: var(--r-1); --radius-md: var(--r-2); --radius-lg: var(--r-3); --radius-xl: var(--r-3); --space-1: var(--s-1); --space-2: var(--s-2); --space-3: var(--s-3); --space-4: var(--s-4); --space-5: var(--s-4); --space-6: var(--s-5); --space-8: var(--s-6); --space-12: var(--s-7); --space-16: var(--s-8); --text-xs: var(--fs-12); --text-sm: var(--fs-14); --text-base: var(--fs-16); --text-lg: var(--fs-18); --text-xl: var(--fs-28); --text-2xl: var(--fs-48); --transition: 160ms ease; } /* Arabic font stacks + looser leading */ [dir="rtl"] { --f-display: 'Amiri', 'Newsreader', serif; --f-ui: 'IBM Plex Sans Arabic', 'IBM Plex Sans', sans-serif; --f-hand: 'Aref Ruqaa', 'Caveat', serif; --body-line: 1.7; } /* Evening chamber (dark) — explicit toggle */ :root[data-theme="dark"] { --paper: #101814; --sheet: #17221D; --sunken: #0B110E; --ink: #EEE7D5; --ink-2: #CBC3AF; --ink-3: #A39C8C; --rule: #28362F; --rule-strong: #6E7F75; --pen: #F0907F; --pen-soft: #3B201C; --side: #F2BD48; --side-soft: #4A3A12; --on-side: #1B1407; --side-ink: #F2C45E; --opp: #9FB8DA; --opp-soft: #1B2733; --ok: #7CC79A; --focus: #9CBDFF; --carbon: #231A18; --card: #1C2822; --card-line: #2E3D36; --card-margin: #7A4039; --sh-sheet: 0 1px 0 rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.7); --sh-lift: 0 2px 0 rgba(0,0,0,.4), 0 24px 56px -20px rgba(0,0,0,.85); --sh-press: inset 0 2px 0 rgba(0,0,0,.35); } /* Evening chamber (dark) — OS preference, unless the page opted into light */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #101814; --sheet: #17221D; --sunken: #0B110E; --ink: #EEE7D5; --ink-2: #CBC3AF; --ink-3: #A39C8C; --rule: #28362F; --rule-strong: #6E7F75; --pen: #F0907F; --pen-soft: #3B201C; --side: #F2BD48; --side-soft: #4A3A12; --on-side: #1B1407; --side-ink: #F2C45E; --opp: #9FB8DA; --opp-soft: #1B2733; --ok: #7CC79A; --focus: #9CBDFF; --carbon: #231A18; --card: #1C2822; --card-line: #2E3D36; --card-margin: #7A4039; --sh-sheet: 0 1px 0 rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.7); --sh-lift: 0 2px 0 rgba(0,0,0,.4), 0 24px 56px -20px rgba(0,0,0,.85); --sh-press: inset 0 2px 0 rgba(0,0,0,.35); } } /* ---------- 2. Reset (ported from .ss, now global) ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { overflow-x: hidden; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--f-ui); font-size: 16px; line-height: var(--body-line); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } p, h1, h2, h3, h4, ul, ol, figure, fieldset, dl, dd { margin: 0; padding: 0; } fieldset { border: 0; min-width: 0; } ul, ol { list-style: none; } h1, h2, h3, h4 { font-weight: inherit; } a { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 1px; } a:hover { color: var(--pen); } button, input, textarea, select { font: inherit; color: inherit; } svg { flex-shrink: 0; } [dir="rtl"] .flip { transform: scaleX(-1); } .sr-only, .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .ltr { direction: ltr; unicode-bidi: isolate; } .is-hidden { display: none !important; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } /* Focus + tap targets */ :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; } .is-focus { outline: 3px solid var(--focus); outline-offset: 3px; } /* Headings get tabindex="-1" + .focus() on screen change for a11y announcements (see announceScreenChange in app.js) — that's a programmatic focus, not a keyboard one, so it must not show a ring. */ [tabindex="-1"]:focus { outline: none; } button, a.btn, .btn, .iconbtn, .langpill, .navlink, .opt, .sidecard, .tabs button, input:not([type="radio"]):not([type="checkbox"]), select, textarea, .inp { min-height: 44px; } input[type="radio"], input[type="checkbox"] { min-width: 22px; min-height: 22px; } /* ---------- 3. Layout primitives ---------- */ .wrap { padding: 0 16px; } @media (min-width: 1024px) { .wrap { max-width: 1280px; margin: 0 auto; padding: 0 48px; } } .k { font: 500 12px/1.35 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); } [dir="rtl"] .k { font-family: var(--f-ui); letter-spacing: 0; text-transform: none; font-size: 13px; font-weight: 600; } .num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; } [dir="rtl"] .num { font-family: var(--f-ui); } .muted { color: var(--ink-3); } .hl { background: linear-gradient(transparent 58%, var(--side-soft) 58%); padding: 0 .08em; } /* wordmark */ .wm { display: inline-flex; align-items: baseline; font-family: 'Newsreader', Georgia, serif; font-weight: 600; font-size: 24px; letter-spacing: -.015em; color: var(--ink); white-space: nowrap; direction: ltr; text-decoration: none; line-height: 1; } .wm i { font-style: italic; font-weight: 500; letter-spacing: -.01em; } .wm .car { width: .34em; height: .42em; margin: 0 .03em 0 .02em; position: relative; top: .2em; color: var(--pen); } /* top bar */ .top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 8px 16px; border-bottom: 1px solid var(--rule); } @media (min-width: 1024px) { .top { min-height: 80px; padding: 0 80px; } } .top nav { display: flex; align-items: center; gap: 4px; } /* `.top nav` (class+type, specificity 0,1,1) otherwise beats the plain `.only-desktop`/`.only-mobile` utility rule (0,1,0) below, so a nav flagged only-desktop would still render display:flex on mobile — doubling up with #mobile-lang-pill and overflowing the header. Match its own specificity. */ .top nav.only-desktop { display: none; } /* 1200px, not the usual 1024px breakpoint: the Spanish nav ("Cómo funciona" / "Para profesores" / "Preguntas Frecuentes") plus the language pill no longer fits the header at 1024 (measured overflow up to ~1188px), so the header-specific toggles below (nav, only-desktop/only-mobile, the mobile menu button and flyout) share this wider breakpoint. Other layout breakpoints in this file stay at 1024. */ @media (min-width: 1200px) { .top nav.only-desktop { display: flex; } } .navlink { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--r-2); font-size: 15px; font-weight: 500; color: var(--ink-2); text-decoration: none; white-space: nowrap; } .navlink.on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); } .langs { display: inline-flex; border: 1.5px solid var(--rule-strong); border-radius: var(--r-2); overflow: hidden; margin-inline-start: 12px; } .langs button { appearance: none; border: 0; background: transparent; min-width: 44px; min-height: 40px; padding: 0 10px; font: 600 13px var(--f-mono); color: var(--ink-2); cursor: pointer; } .langs button.ar { font: 600 14px 'IBM Plex Sans Arabic', sans-serif; } .langs button[aria-pressed="true"] { background: var(--ink); color: var(--sheet); } /* AC16: the header login/signup link (e.g. ES "Iniciar sesión / Registrarse") is the only nav child without white-space:nowrap, so under width pressure flexbox shrinks it — not the fixed-width langs group or the nowrap navlinks — down toward its longest single word, wrapping it to 2-3 lines that spill over the language switcher. Keep it one line and let it truncate instead; the 1200-1399px band also reclaims header padding/gaps so it rarely needs to. */ .top nav.only-desktop { flex-wrap: nowrap; } .top nav.only-desktop .langs { flex-shrink: 0; } #header-login-btn { flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; } @media (min-width: 1200px) and (max-width: 1399px) { .top { padding-inline: 32px; } .top nav.only-desktop { gap: 2px; } .top nav.only-desktop .navlink { padding-inline: 10px; font-size: 14px; } #header-login-btn { max-width: 168px; padding-inline: 12px; font-size: 13px; } } .iconbtn { appearance: none; display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; border: 1.5px solid transparent; border-radius: var(--r-2); background: transparent; color: var(--ink-2); cursor: pointer; } .iconbtn.line { border-color: var(--rule-strong); } .langpill { appearance: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 1.5px solid var(--rule-strong); border-radius: var(--r-2); background: transparent; font: 600 13px var(--f-mono); color: var(--ink); cursor: pointer; } /* buttons */ .btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 10px 22px; border-radius: var(--r-2); font: 600 16px/1.2 var(--f-ui); border: 1.5px solid transparent; cursor: pointer; text-decoration: none; text-align: center; } .btn-ink { background: var(--ink); color: var(--sheet); } .btn-side { background: var(--side); color: var(--on-side); border-color: var(--on-side); box-shadow: 0 3px 0 var(--on-side); } .btn-line { background: transparent; color: var(--ink); border-color: var(--rule-strong); } .btn-quiet { background: transparent; color: var(--ink-2); text-decoration: underline; text-underline-offset: 4px; padding: 10px 8px; } .btn-lg { min-height: 58px; font-size: 18px; padding: 12px 28px; } .btn-sm { min-height: 44px; font-size: 14px; padding: 8px 14px; } .btn-block { width: 100%; } .btn[disabled] { background: var(--sunken); color: var(--ink-3); border-color: var(--rule); box-shadow: none; cursor: not-allowed; } /* motion card (prep-room slip) */ .motion { position: relative; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-2); box-shadow: var(--sh-sheet); padding: 30px 22px 20px; } .motion::before { content: ""; position: absolute; inset-inline: 14px; top: 12px; border-top: 2px dotted var(--rule-strong); } .motion .meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .motion .thw { margin-top: 18px; font: italic 400 20px/1.2 var(--f-display); color: var(--ink-2); } .motion .txt { margin-top: 6px; font: 500 38px/1.08 var(--f-display); letter-spacing: -.018em; color: var(--ink); text-wrap: balance; min-height: 2.16em; } [dir="rtl"] .motion .thw { font-style: normal; font-size: 22px; } [dir="rtl"] .motion .txt { font-weight: 700; font-size: 36px; line-height: 1.5; letter-spacing: 0; } @media (min-width: 1024px) { .motion { padding: 40px 44px 28px; } .motion .thw { font-size: 26px; } .motion .txt { font-size: 68px; line-height: 1.02; } [dir="rtl"] .motion .txt { font-size: 60px; line-height: 1.45; } } /* AC6/#25: reserve the motion card's height before the daily-motion fetch resolves, so first paint doesn't show a collapsed/empty card. */ .motion .txt.skel { background: linear-gradient(90deg, var(--sunken) 25%, var(--rule) 50%, var(--sunken) 75%); background-size: 200% 100%; animation: ssaid-skel 1.4s ease-in-out infinite; border-radius: var(--r-1); } @keyframes ssaid-skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { .motion .txt.skel { animation: none; } } .motion .foot { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--rule); } /* AC6/#25: plain inline text, not inline-flex — the single hero_facts text node has no icon child, and inline-flex was indenting its wrapped second line on narrow viewports. */ .motion .foot span { display: inline; font: 500 13px var(--f-mono); color: var(--ink-2); } [dir="rtl"] .motion .foot span { font-family: var(--f-ui); font-size: 14px; } /* round markers */ .rounds { display: flex; align-items: center; } .rm { display: flex; align-items: center; gap: 8px; } .dot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 600 12px var(--f-mono); border: 1.5px solid var(--rule-strong); color: var(--ink-3); background: var(--sheet); } [dir="rtl"] .dot { font: 700 13px var(--f-ui); } .dot.done { background: var(--ink); border-color: var(--ink); color: var(--sheet); } .dot.now { background: var(--side); border-color: var(--on-side); color: var(--on-side); box-shadow: 0 0 0 4px var(--side-soft); } .rm .lbl { font-size: 13px; font-weight: 500; color: var(--ink-3); } .rm .lbl.on { color: var(--ink); font-weight: 600; } .lnk { flex: 1; min-width: 14px; height: 2px; background: var(--rule); margin: 0 8px; } .lnk.done { background: var(--ink); } /* section heads */ .sh { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .h2 { font: 500 28px/1.15 var(--f-display); letter-spacing: -.01em; } @media (min-width: 1024px) { .h2 { font-size: 36px; } } [dir="rtl"] .h2 { font-weight: 700; line-height: 1.5; } .h3 { font: 600 20px/1.25 var(--f-display); } [dir="rtl"] .h3 { font-weight: 700; line-height: 1.6; } .lede { font: 400 18px/1.5 var(--f-ui); color: var(--ink-2); } /* how a round works */ .steps { display: grid; gap: 0; border-top: 2px solid var(--ink); } .step { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--rule); } .step .dot { display: grid; place-items: center; width: 44px; height: 44px; font-size: 13px; } .step b { display: block; font: 600 18px/1.3 var(--f-display); } [dir="rtl"] .step b { font-weight: 700; } .step span { display: block; margin-top: 4px; font-size: 15px; color: var(--ink-2); } @media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--rule); } .step { grid-template-columns: 1fr; padding: 24px 28px 28px 0; border-bottom: 0; border-inline-end: 1px solid var(--rule); gap: 16px; } .step:not(:first-child) { padding-inline-start: 28px; } .step:last-child { border-inline-end: 0; } } /* benches + speeches */ .bench-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 3px solid var(--side); } .bench-h.them { border-bottom-color: var(--opp); } .bench-h.redo { border-bottom-color: var(--pen); } .bench-h b { font: 700 13px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; } [dir="rtl"] .bench-h b { font: 700 15px var(--f-ui); letter-spacing: 0; } .bench-h.them b { color: var(--opp); } .bench-h.redo b { color: var(--pen); } .speech { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-2); padding: 16px 18px; } .speech + .speech { margin-top: 12px; } .speech .who { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; } .speech p { font: 400 17px/1.55 var(--f-display); color: var(--ink); } [dir="rtl"] .speech p { font-size: 18px; line-height: 1.85; } .speech.collapsed p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--ink-2); } .chip { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 var(--f-ui); padding: 6px 10px; border-radius: var(--r-pill); border: 1.5px solid var(--rule-strong); color: var(--ink-2); white-space: nowrap; } [dir="rtl"] .chip { font-size: 13px; } .chip.me { background: var(--side); border-color: var(--side); color: var(--on-side); } .chip.them { border-color: var(--opp); color: var(--opp); } .chip.ok { border-color: var(--ok); color: var(--ok); } .chip.pen { border-color: var(--pen); color: var(--pen); } .chip.dim { border-color: var(--rule); color: var(--ink-3); } .waiting { border: 1.5px dashed var(--rule-strong); border-radius: var(--r-2); padding: 18px; color: var(--ink-3); font-size: 15px; display: flex; align-items: center; gap: 10px; } .dots { display: inline-flex; gap: 4px; } .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); display: block; } .dots i:nth-child(2) { opacity: .6; } .dots i:nth-child(3) { opacity: .3; } /* editor */ .editor { background: var(--sheet); border: 1.5px solid var(--rule-strong); border-radius: var(--r-2); box-shadow: var(--sh-sheet); } .editor .eh { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--rule); } .editor label { font: 600 15px var(--f-ui); } .editor textarea { display: block; width: 100%; border: 0; resize: none; outline: none; padding: 2px 16px 12px; min-height: 252px; background-color: transparent; background-image: repeating-linear-gradient(to bottom, transparent 0 27px, var(--rule) 27px 28px); background-attachment: local; font: 400 17px/28px var(--f-display); color: var(--ink); } [dir="rtl"] .editor textarea { font-size: 18px; line-height: 32px; background-image: repeating-linear-gradient(to bottom, transparent 0 31px, var(--rule) 31px 32px); min-height: 288px; } .editor .ef { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--rule); flex-wrap: wrap; } .clock { display: inline-flex; align-items: center; gap: 10px; font: 600 15px var(--f-mono); font-variant-numeric: tabular-nums; color: var(--ink-2); } .meter { width: 84px; height: 6px; background: var(--sunken); border-radius: 3px; overflow: hidden; display: block; } .meter i { display: block; height: 100%; background: var(--ink); } .editor.near .clock { color: var(--side-ink); } .editor.near .meter i { background: var(--side); } .editor.over { border-color: var(--pen); box-shadow: 0 0 0 4px var(--pen-soft); } .editor.over .clock { color: var(--pen); } .editor.over .meter i { background: var(--pen); } .overmsg { display: flex; align-items: center; gap: 8px; color: var(--pen); font-size: 14px; font-weight: 600; padding: 10px 16px 0; } .tip { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--ink-2); } .tip b { color: var(--ink); } /* ballot */ .ballot { background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: var(--r-1); box-shadow: var(--sh-lift); position: relative; } .b-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 20px 14px; border-bottom: 2px solid var(--ink); } .b-title { font: 600 24px/1.1 var(--f-display); letter-spacing: -.01em; } [dir="rtl"] .b-title { font-weight: 700; line-height: 1.4; } .b-form { margin-top: 6px; } .b-fields { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--rule); } .f { padding: 10px 20px 12px; border-bottom: 1px solid var(--rule); } .f:nth-child(odd) { border-inline-end: 1px solid var(--rule); } .f.wide { grid-column: 1 / -1; border-inline-end: 0; } .f .l { display: block; font: 500 11px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); } [dir="rtl"] .f .l { font: 600 12px var(--f-ui); letter-spacing: 0; } .f .v { display: block; margin-top: 2px; font: 500 15px/1.35 var(--f-ui); color: var(--ink); } .f .v.serif { font: 500 17px/1.3 var(--f-display); } [dir="rtl"] .f .v.serif { font-weight: 700; line-height: 1.6; } .b-dec { display: grid; grid-template-columns: 1fr auto; gap: 12px 16px; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--rule); } .stamp { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; border: 2.5px solid var(--pen); color: var(--pen); border-radius: 6px; padding: 8px 14px 6px; transform: rotate(-4deg); font: 700 11px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; } .stamp b { font: 700 28px/1 var(--f-display); letter-spacing: 0; text-transform: none; } [dir="rtl"] .stamp { transform: rotate(4deg); font: 700 13px var(--f-ui); letter-spacing: 0; } .why { grid-column: 1 / -1; display: flex; gap: 8px; align-items: flex-start; font: 600 24px/1.2 var(--f-hand); color: var(--pen); } [dir="rtl"] .why { font-size: 22px; line-height: 1.7; font-weight: 400; } .why svg { margin-top: 4px; } .crit { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; padding: 18px 20px; border-bottom: 1px solid var(--rule); } .crit .name { font: 600 20px/1.2 var(--f-display); } [dir="rtl"] .crit .name { font-weight: 700; line-height: 1.5; } .crit .desc { margin-top: 4px; font-size: 13px; color: var(--ink-3); } .box { min-width: 108px; height: 66px; border: 1.5px solid var(--ink); border-radius: var(--r-1); display: flex; align-items: center; justify-content: center; gap: 4px; background: var(--paper); } .box .hand { font: 700 46px/1 var(--f-hand); color: var(--pen); transform: rotate(-3deg); display: inline-block; } [dir="rtl"] .box .hand { font-size: 38px; font-weight: 700; transform: rotate(2deg); } .box .of { font: 500 15px var(--f-mono); color: var(--ink-3); } [dir="rtl"] .box .of { font: 600 16px var(--f-ui); } .box.big { min-width: 132px; height: 80px; border-width: 2px; } .box.big .hand { font-size: 58px; } [dir="rtl"] .box.big .hand { font-size: 48px; } .box.empty .hand { color: var(--ink-3); font-size: 30px; } .scale { grid-column: 1 / -1; position: relative; height: 26px; margin-top: 2px; } .scale .trk { position: absolute; inset-inline: 0; top: 8px; height: 2px; background: var(--rule); } .scale .fill { position: absolute; inset-inline-start: 0; top: 7px; height: 4px; background: var(--pen); border-radius: 2px; } .scale .tk { position: absolute; top: 4px; width: 1px; height: 10px; background: var(--rule-strong); } .scale .tl { position: absolute; top: 14px; font: 500 10px var(--f-mono); color: var(--ink-3); transform: translateX(-50%); } [dir="rtl"] .scale .tl { transform: translateX(50%); font-family: var(--f-ui); font-size: 11px; } .cmt { grid-column: 1 / -1; font: italic 400 17px/1.5 var(--f-display); color: var(--ink-2); } [dir="rtl"] .cmt { font-style: normal; font-size: 17px; line-height: 1.85; } .crit.struck .name { text-decoration: line-through; text-decoration-color: var(--pen); text-decoration-thickness: 2px; color: var(--ink-3); } .crit.struck .note { font: 600 20px/1.2 var(--f-hand); color: var(--pen); align-self: center; } [dir="rtl"] .crit.struck .note { font-size: 18px; line-height: 1.6; font-weight: 400; } .total { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; border-top: 3px double var(--ink); border-bottom: 1px solid var(--rule); } .total .name { font: 700 22px var(--f-display); } .vtable { padding: 4px 0; } .vtable .vh { padding: 14px 20px 6px; } .vrow { display: grid; grid-template-columns: 34px 1fr; gap: 4px 12px; align-items: center; padding: 10px 20px; border-bottom: 1px solid var(--rule); } .vrow .dot { width: 34px; height: 34px; } .vrow .rs { grid-column: 2; font-size: 15px; color: var(--ink-2); } .wide-ballot .vrow { grid-template-columns: 34px 150px 1fr; } .wide-ballot .vrow .rs { grid-column: auto; } @media (min-width: 1024px) { .vrow { grid-template-columns: 34px 150px 1fr; } .vrow .rs { grid-column: auto; } } .sig { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding: 16px 20px 18px; } .sig .line { flex: 1; border-bottom: 1px solid var(--ink-3); padding-bottom: 2px; font: 600 24px/1 var(--f-hand); color: var(--pen); } [dir="rtl"] .sig .line { font-size: 22px; line-height: 1.5; font-weight: 400; } /* index card */ .idx { background-color: var(--card); border: 1px solid var(--rule); border-radius: var(--r-1); box-shadow: var(--sh-sheet); background-image: repeating-linear-gradient(to bottom, transparent 0 31px, var(--card-line) 31px 32px); background-position: 0 56px; background-repeat: no-repeat; background-size: 100% calc(100% - 56px); } .idx .ih { height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 20px; border-bottom: 2px solid var(--card-margin); background: var(--card); } .idx .ib { padding: 0 20px 16px; font: 600 24px/32px var(--f-hand); color: var(--ink); } [dir="rtl"] .idx .ib { font-size: 21px; font-weight: 400; } .idx .ib .note { display: block; font: italic 400 15px/32px var(--f-display); color: var(--ink-3); } [dir="rtl"] .idx .ib .note { font-style: normal; font-family: var(--f-ui); font-size: 14px; } /* forms */ .fs { padding: 20px 0; border-bottom: 1px solid var(--rule); } .fs legend { float: left; width: 100%; padding: 0; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } [dir="rtl"] .fs legend { float: right; } .fs legend + * { clear: both; } .fs legend b { font: 600 13px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); } [dir="rtl"] .fs legend b { font: 700 15px var(--f-ui); letter-spacing: 0; } .opt { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; min-height: 56px; background: var(--sheet); border: 1.5px solid var(--rule-strong); border-radius: var(--r-2); cursor: pointer; } .opt + .opt { margin-top: 8px; } .opt input { appearance: none; flex-shrink: 0; width: 22px; height: 22px; margin: 2px 0 0; border: 2px solid var(--rule-strong); border-radius: 50%; background: var(--sheet); display: grid; place-items: center; } .opt input:checked { border-color: var(--ink); background: radial-gradient(var(--ink) 0 5px, var(--sheet) 6px); } .opt.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); } .opt .t { display: block; font-weight: 600; font-size: 16px; } .opt .s { display: block; font-size: 14px; color: var(--ink-3); margin-top: 2px; } .opt .mo { display: block; margin-top: 6px; font: 500 17px/1.3 var(--f-display); color: var(--ink); } [dir="rtl"] .opt .mo { font-weight: 700; line-height: 1.7; } .sides { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .sidecard { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 128px; padding: 16px; border: 1.5px solid var(--rule-strong); border-radius: var(--r-2); background: var(--sheet); cursor: pointer; } .sidecard input { position: absolute; opacity: 0; pointer-events: none; } .sidecard .pos { font: 600 12px var(--f-mono); letter-spacing: .12em; color: var(--ink-3); } [dir="rtl"] .sidecard .pos { font: 700 13px var(--f-ui); letter-spacing: 0; } .sidecard .nm { font: 600 22px/1.15 var(--f-display); } [dir="rtl"] .sidecard .nm { font-weight: 700; line-height: 1.5; } .sidecard .ds { font-size: 14px; color: var(--ink-2); } .sidecard.on { background: var(--side); border-color: var(--on-side); color: var(--on-side); box-shadow: 0 3px 0 var(--on-side); } .sidecard.on .pos, .sidecard.on .ds { color: var(--on-side); } .sidecard .tick { display: none; position: absolute; top: 12px; inset-inline-end: 12px; } .sidecard.on .tick { display: block; } .seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1.5px solid var(--rule-strong); border-radius: var(--r-2); overflow: hidden; background: var(--sheet); } .seg label { position: relative; display: grid; place-items: center; min-height: 48px; padding: 0 8px; font: 600 14px var(--f-ui); color: var(--ink-2); cursor: pointer; border-inline-end: 1px solid var(--rule); } .seg label:last-child { border-inline-end: 0; } .seg input { position: absolute; opacity: 0; pointer-events: none; } .seg label.on { background: var(--ink); color: var(--sheet); } .seg .arl { font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 15px; } .field { display: block; } .field .lab { display: block; font-weight: 600; font-size: 15px; margin-bottom: 6px; } .field .hint { display: block; font-size: 13px; color: var(--ink-3); margin-top: 6px; } .inp { display: block; width: 100%; min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--rule-strong); border-radius: var(--r-2); background: var(--sheet); font: 400 16px/1.4 var(--f-ui); color: var(--ink); } textarea.inp { min-height: 132px; font: 400 17px/1.5 var(--f-display); resize: none; } [dir="rtl"] textarea.inp { font-size: 18px; line-height: 1.8; } .tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1.5px solid var(--rule-strong); } .tabs button { appearance: none; background: transparent; border: 0; min-height: 52px; padding: 0 8px; font: 600 15px var(--f-ui); color: var(--ink-3); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1.5px; } .tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); } .tabs button.redo[aria-selected="true"] { border-bottom-color: var(--pen); color: var(--pen); } /* footer action bar — mobile: sticks to the bottom of the viewport; desktop: becomes a static/sticky column inside .grid-main-aside (see below), never absolute to an arbitrary ancestor. */ .dock { position: sticky; inset-inline: 0; bottom: 0; z-index: 5; padding: 12px 16px 20px; background: var(--paper); border-top: 1px solid var(--rule); box-shadow: 0 -10px 24px -18px rgba(27,38,64,.4); } .dock .note { margin-top: 8px; text-align: center; font-size: 13px; color: var(--ink-3); } @media (min-width: 1024px) { .dock { position: sticky; top: 24px; bottom: auto; inset-inline: auto; z-index: auto; padding: 0; background: transparent; border-top: 0; box-shadow: none; } .dock .note { margin-top: 12px; } } /* teacher band */ .band { background: var(--ink); color: var(--sheet); border-radius: var(--r-3); padding: 28px 20px; } .band .k { color: var(--side); } .band .h2 { color: var(--sheet); } .band p { color: var(--sheet); opacity: .86; } .band .btn-side { box-shadow: none; } .band .btn-line { color: var(--sheet); border-color: rgba(251,248,241,.55); } :root[data-theme="dark"] .band .btn-line { border-color: rgba(16,24,20,.55); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .band .btn-line { border-color: rgba(16,24,20,.55); } } .band ul li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid rgba(251,248,241,.18); font-size: 15px; } :root[data-theme="dark"] .band ul li { border-top-color: rgba(16,24,20,.18); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .band ul li { border-top-color: rgba(16,24,20,.18); } } @media (min-width: 1024px) { .band { padding: 56px 64px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; } } /* tables */ .tbl { width: 100%; border-collapse: collapse; } .tbl th { font: 500 11px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); text-align: start; padding: 10px 12px; border-bottom: 2px solid var(--ink); white-space: nowrap; } [dir="rtl"] .tbl th { font: 700 13px var(--f-ui); letter-spacing: 0; } .tbl td { padding: 12px; border-bottom: 1px solid var(--rule); font-size: 15px; vertical-align: middle; } .tbl td.n, .tbl th.n { text-align: end; font-family: var(--f-mono); font-variant-numeric: tabular-nums; } [dir="rtl"] .tbl td.n { font-family: var(--f-ui); font-weight: 600; } .tbl tr.sel td { background: var(--side-soft); } .tbl .rank { font: 600 20px var(--f-hand); color: var(--pen); width: 36px; } .tbl .nm { font-weight: 600; } .tbl .tot { font-weight: 700; color: var(--ink); } .row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); min-height: 60px; } .row .nm { font-weight: 600; } .row .sub { font-size: 13px; color: var(--ink-3); } .codebox { font: 600 40px/1 var(--f-mono); letter-spacing: .18em; color: var(--ink); direction: ltr; unicode-bidi: isolate; } @media (min-width: 1024px) { .codebox { font-size: 48px; } } .progress { height: 8px; border-radius: 4px; background: var(--sunken); overflow: hidden; } .progress i { display: block; height: 100%; background: var(--ok); } /* carbon (Redo a Fight) */ .carbon { background: var(--carbon); border: 1px solid var(--rule); border-radius: var(--r-2); box-shadow: var(--sh-sheet); position: relative; } .carbon .re { display: flex; align-items: baseline; gap: 10px; padding: 18px 20px 12px; border-bottom: 1.5px dashed var(--pen); } .carbon .re b { font: 700 30px/1 var(--f-hand); color: var(--pen); } [dir="rtl"] .carbon .re b { font-size: 26px; line-height: 1.4; font-weight: 700; } .carbon .re span { font: 500 20px/1.3 var(--f-display); color: var(--ink); } [dir="rtl"] .carbon .re span { font-weight: 700; line-height: 1.6; } .carbon .copy { position: absolute; top: 14px; inset-inline-end: 16px; font: 700 10px var(--f-mono); letter-spacing: .16em; color: var(--pen); border: 1.5px solid var(--pen); padding: 3px 6px; border-radius: 2px; transform: rotate(3deg); } [dir="rtl"] .carbon .copy { font: 700 12px var(--f-ui); letter-spacing: 0; transform: rotate(-3deg); } /* footer */ .foot { border-top: 1px solid var(--rule); padding: 28px 16px 36px; display: grid; gap: 18px; } @media (min-width: 1024px) { .foot { padding: 40px 80px 48px; grid-template-columns: auto 1fr; align-items: start; gap: 48px; } } .foot ul { display: flex; flex-wrap: wrap; gap: 0 4px; } .foot ul a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; font-size: 14px; color: var(--ink-2); text-decoration: none; } .foot small { display: block; font-size: 13px; color: var(--ink-3); } /* ========================================================================== App-shell (not part of the marketing mockups — built for the real app) ========================================================================== */ .screen { display: none; } .screen.active { display: block; } .screen.active > * + * { margin-top: var(--s-5); } .toast { position: fixed; top: calc(16px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%) translateY(-16px); background: var(--ink); color: var(--sheet); border-radius: var(--r-2); padding: 12px 20px; font: 600 14px var(--f-ui); box-shadow: var(--sh-lift); opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; z-index: 9999; max-width: 90vw; text-align: center; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .modal-overlay { position: fixed; inset: 0; background: rgba(27,38,64,.55); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 1000; } :root[data-theme="dark"] .modal-overlay { background: rgba(0,0,0,.65); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .modal-overlay { background: rgba(0,0,0,.65); } } .modal { position: relative; width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto; background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: var(--r-3); box-shadow: var(--sh-lift); padding: 28px 24px 24px; } .modal-close { position: absolute; top: 10px; inset-inline-end: 10px; min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; background: transparent; border: 1.5px solid transparent; border-radius: var(--r-2); color: var(--ink-2); cursor: pointer; } .modal-close:hover { border-color: var(--rule-strong); } .modal h2, .modal h3 { font-family: var(--f-display); } /* desktop layout helpers */ .grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--s-6); } @media (min-width: 1024px) { .grid-2 { grid-template-columns: 1fr 1fr; gap: var(--s-7); } } .grid-main-aside { display: grid; grid-template-columns: 1fr; gap: var(--s-6); } @media (min-width: 1024px) { .grid-main-aside { grid-template-columns: 1fr 440px; gap: var(--s-8); } } .only-desktop { display: none; } .only-mobile { display: block; } /* 1200px to match the header's nav breakpoint above (see comment there) — these utilities gate the header's "Practice now" button and mobile controls, so they must switch in step with the nav or the header ends up with neither the desktop nav nor the mobile menu button visible. */ @media (min-width: 1200px) { .only-desktop { display: block; } .only-mobile { display: none; } } /* ========================================================================== Doors (home screen: Practice / Friend / Class entry cards) ========================================================================== */ .doors-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-4); } @media (min-width: 1024px) { .doors-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } } .door-card { position: relative; display: flex; flex-direction: column; gap: 10px; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-2); box-shadow: var(--sh-sheet); padding: 24px 20px 20px; } .door-card .door-icon { color: var(--pen); } .door-card h3 { margin-top: 2px; } .door-card p { flex: 1; margin: 0; font-size: 15px; color: var(--ink-2); } .door-card .btn { margin-top: 4px; } /* ========================================================================== My ballots screen ========================================================================== */ #ballots-list .row { align-items: center; padding-inline: var(--s-4); gap: var(--s-4); } #ballots-list .row .nm { font: 500 16px/1.3 var(--f-display); } [dir="rtl"] #ballots-list .row .nm { font-weight: 700; } #ballots-list .row .sub { margin-top: 2px; } #ballots-list .row .num { font-weight: 700; color: var(--ink); min-width: 52px; max-width: 45%; text-align: end; white-space: normal; overflow-wrap: anywhere; } /* AC18: app.js (out of CSS-agent scope) reuses the same .num span with a ballot_ungraded sentence ("Not graded — the judge was unavailable...") instead of a "42/60" score — the rule above stops it breaking the row, but it still renders as bold monospace. Report to the app.js owner: tag the ungraded case with a second class (e.g. totalBox.className = b.graded ? 'num' : 'num ungraded') so this rule can apply normal table typography. */ #ballots-list .row .num.ungraded { font-family: var(--f-ui); font-weight: 400; font-size: 14px; line-height: 1.35; color: var(--ink-2); } /* ========================================================================== Debate-a-friend room (1v1): benches + final ballot ========================================================================== */ #room-bench-me, #room-bench-them { display: flex; flex-direction: column; gap: 12px; } #room-final .chip.dim { font-size: 13px; } #room-final .h3 { text-align: end; } [dir="rtl"] #room-final .h3 { text-align: start; } /* ========================================================================== Compat layer — a small number of rules still load-bearing after the Phase-2 app.js migration to the class vocabulary above: real ids/classes app.js or index.html still emit that aren't part of that vocabulary. (AC10 cleanup removed everything else that used to live here — dead Aura/XP/streak/badges/leaderboard/testimonials/chat-bubble/ verdict-panel/level-card era styles with no matching markup anywhere.) ========================================================================== */ #app { max-width: 680px; margin: 0 auto; padding: var(--s-6) var(--s-4); } @media (min-width: 1024px) { #app { max-width: 1280px; padding: var(--s-7) 48px; } } /* app.js renderClassHistoryList: item.className = 'btn btn-ghost' */ .btn-ghost { background: transparent; color: var(--ink-2); border: 1.5px solid var(--rule-strong); } .btn-ghost:hover { border-color: var(--ink); color: var(--ink); } /* index.html #game-scenario-bar */ .game-scenario-bar { font: 500 12px var(--f-mono); letter-spacing: .08em; color: var(--ink-3); text-align: center; padding: 4px var(--s-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } #typing-row { display: none; align-items: center; gap: var(--s-2); padding: 0 var(--s-4) 4px; } /* generic un-classed form fields — baseline styling for any bare