/* ============================================================ Ag Prep — Design System v2 (royal blue + gold, contest-neutral) Plain CSS, no build. Restyles the shared class vocabulary used by every page; JS markup is unchanged. ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { /* ── Palette ── */ --bg: #f2f5fa; /* cool neutral app background */ --bg-2: #e7ecf5; --surface: #ffffff; --ink: #15213b; /* primary text (blue-black) */ --muted: #57617a; --faint: #8a93a8; --line: #e3e8f1; --blue: #2a4bb0; /* royal brand blue */ --blue-700: #1f3a8c; --blue-50: #ecf1fb; --gold: #cf9f38; /* gold accent */ --gold-700: #a87d22; --gold-50: #f8efd5; --correct: #1f8a4c; --correct-50: #dcefe2; --incorrect: #c23b32; --incorrect-50: #f7e1de; /* ── Legacy aliases (so any stray reference still resolves) ── */ --green-dark: var(--blue-700); --green-mid: var(--blue); --green-light: var(--blue-50); --blue-light: var(--blue-50); --correct-light: var(--correct-50); --incorrect-light: var(--incorrect-50); --card: var(--surface); --text: var(--ink); --border: var(--line); /* ── Shape & depth ── */ --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --radius: var(--r-md); --shadow-sm: 0 1px 2px rgba(21,33,59,.07), 0 1px 1px rgba(21,33,59,.04); --shadow-md: 0 12px 32px -20px rgba(21,33,59,.5), 0 2px 8px -4px rgba(21,33,59,.10); /* ── Layout ── */ --content: 680px; /* readable column for quiz/start/auth */ --wide: 1080px; /* dashboard column */ --page-pad: 18px; /* ── Safe-area ── */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } /* ── Dark theme ────────────────────────────────────────────── Toggled via the profile dropdown; applied as by an inline bootstrap in each page's . The whole UI is driven by the custom props above (incl. the legacy aliases, which resolve through var()), so overriding the palette here re-themes every page. */ :root[data-theme="dark"] { --bg: #0f1626; --bg-2: #0b1120; --surface: #161f33; --ink: #e7ecf5; --muted: #aab4c8; --faint: #7e8aa3; --line: #283349; --blue: #5b7fe0; --blue-700: #88a4ef; --blue-50: #1e2a44; --gold: #d8ad4e; --gold-700: #e6c372; --gold-50: #2a2415; --correct: #3fb56f; --correct-50: #16301f; --incorrect: #e0635a; --incorrect-50: #361b1a; --shadow-sm: 0 1px 2px rgba(0,0,0,.45), 0 1px 1px rgba(0,0,0,.35); --shadow-md: 0 12px 32px -20px rgba(0,0,0,.85), 0 2px 8px -4px rgba(0,0,0,.55); color-scheme: dark; } /* Headers hardcode a translucent-white bar; darken it in dark mode. */ :root[data-theme="dark"] .quiz-header, :root[data-theme="dark"] .start-header, :root[data-theme="dark"] .auth-header, :root[data-theme="dark"] .dash-header { background: rgba(22, 31, 51, .9); } html, body { height: 100%; font-family: var(--sans); background: var(--bg); color: var(--ink); line-height: 1.5; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; } #app { min-height: 100dvh; display: flex; flex-direction: column; } /* ============================================================ APP BAR (shared slim white bar — quiz, start, auth, dashboard) ============================================================ */ .quiz-header, .start-header, .auth-header, .dash-header { background: rgba(255,255,255,.9); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); color: var(--ink); flex-shrink: 0; position: sticky; top: 0; z-index: 40; } /* ============================================================ QUIZ SCREEN ============================================================ */ .quiz-screen { display: flex; flex-direction: column; height: 100dvh; } /* Quiz header = app bar with title + count + progress bar */ .quiz-header { padding-top: calc(11px + var(--safe-top)); padding-bottom: 11px; padding-left: max(calc(var(--page-pad) + var(--safe-left)), calc((100% - var(--content)) / 2)); padding-right: max(calc(var(--page-pad) + var(--safe-right)), calc((100% - var(--content)) / 2)); } .header-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .quiz-title { font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: .01em; } .progress-count { font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; } .progress-track { height: 7px; background: var(--bg-2); border-radius: 99px; overflow: hidden; } .progress-fill { height: 100%; background: linear-gradient(90deg, var(--blue), #5c7fe0); border-radius: 99px; transition: width .35s ease; } .score-line { display: none; } /* progress bar conveys this now */ /* Card = white sheet floating on the bg */ .card { flex: 1; width: min(100% - 28px, var(--content)); margin: 16px auto calc(16px + var(--safe-bottom)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: 24px 22px; display: flex; flex-direction: column; min-height: 0; /* allow the flex item to shrink so it scrolls internally, not the page */ overflow-y: auto; -webkit-overflow-scrolling: touch; } /* Category kicker */ .type-badge { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; color: var(--gold-700); background: var(--gold-50); margin-bottom: 4px; } .type-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); } /* keep type variants subtle (override the gold default tint) */ .type-badge.grass { color: #1f6f4a; background: #e2f1e8; } .type-badge.grass::before { background: #2f8a5a; } .type-badge.legume { color: var(--gold-700); background: var(--gold-50); } .type-badge.forb { color: #8a4d86; background: #f3e6f2; } .type-badge.forb::before { background: #a85ea3; } .type-badge.woody { color: #8a5a33; background: #f0e6dc; } .type-badge.woody::before { background: #aa744a; } .plant-name { font-size: 30px; font-weight: 800; letter-spacing: -.5px; line-height: 1.12; margin: 12px 0 4px; } .plant-scientific { font-size: 15px; font-style: italic; color: var(--muted); margin-bottom: 18px; } /* Characteristics */ .characteristics { display: flex; flex-direction: column; } .char-row { display: block; padding: 14px 0; border-top: 1px solid var(--line); } .char-row:first-child { border-top: none; padding-top: 4px; } .char-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-bottom: 9px; } .btn-group { display: flex; flex-wrap: wrap; gap: 8px; } /* Choice chips */ .choice-btn, .setting-btn { font: 600 14px var(--sans); padding: 10px 16px; border: 1.5px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--ink); cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s, color .12s; -webkit-user-select: none; user-select: none; } .choice-btn:hover:not(:disabled), .setting-btn:hover { border-color: var(--blue); background: var(--blue-50); } .choice-btn.selected, .setting-btn.selected { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: var(--shadow-sm); } .choice-btn.correct { background: var(--correct-50); border-color: var(--correct); color: var(--correct); cursor: default; } .choice-btn.incorrect { background: var(--incorrect-50); border-color: var(--incorrect); color: var(--incorrect); cursor: default; } .choice-btn:disabled:not(.correct):not(.incorrect) { opacity: .5; cursor: default; } /* Contest "blind" mode: the chosen answer locks neutrally — no correctness shown. */ .choice-btn.locked, .hs-cell.locked, .hs-cat.locked { background: var(--surface-2, #e2e8f0); border-color: #94a3b8; color: var(--text, #334155); cursor: default; opacity: 1; } .acc-value.locked { color: #64748b; font-weight: 600; } /* ── Collapsible characteristic accordions (entomology characteristics quiz) ── */ .char-accordion { border-top: 1px solid var(--line); } .char-accordion:first-child { border-top: none; } .char-acc-head { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 12px 2px; background: none; border: none; cursor: pointer; text-align: left; font: inherit; color: var(--ink); } .char-acc-toprow { display: flex; align-items: center; justify-content: space-between; } .char-acc-label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); } .char-acc-head .acc-value { width: 100%; text-align: right; font-size: 14px; font-weight: 600; color: var(--muted); } .char-acc-head .acc-value.chosen { color: var(--blue); } .acc-caret { flex: 0 0 auto; color: var(--faint); transition: transform .15s; } .char-accordion.open .acc-caret { transform: rotate(180deg); } /* Body collapses by default; opens with the accordion */ .char-acc-body { display: none; padding: 2px 0 12px; } .char-accordion.open .char-acc-body { display: block; } .char-opts { display: flex; flex-wrap: wrap; gap: 8px; } /* Two-column grid for the long order list; last item (Non-insects) spans both */ .char-opts-wide { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; } .char-opts-wide .choice-btn { white-space: normal; padding: 9px 10px; font-size: 13px; text-align: center; } .char-opts-wide .choice-btn.opt-span { grid-column: 1 / -1; } /* Equal-width column grids for the shorter lists */ .char-opts-cols2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; } .char-opts-cols1 { display: grid; grid-template-columns: 1fr; gap: 7px; } .char-opts-cols1 .choice-btn, .char-opts-cols2 .choice-btn { white-space: normal; padding: 9px 10px; font-size: 13px; text-align: center; } /* Inline graded result shown in the accordion header (lists stay collapsed) */ .acc-value.ans-correct { color: var(--correct); } .acc-value.ans-graded { display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: flex-end; } .acc-ans-correct { color: var(--correct); font-weight: 700; } .acc-ans-wrong { color: var(--incorrect); font-weight: 700; } /* ── Numeric range selector (entomology start screen) ── */ .range-row { display: flex; align-items: center; gap: 8px; } .range-input { width: 72px; font: 600 15px var(--sans); padding: 9px 10px; border: 1.5px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--ink); text-align: center; } .range-input:focus { outline: none; border-color: var(--blue); } .range-dash { color: var(--faint); font-weight: 700; } .range-clear { margin-left: auto; font: 600 13px var(--sans); padding: 8px 12px; border: 1.5px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--muted); cursor: pointer; } .range-clear:hover { border-color: var(--blue); color: var(--blue); } /* Action button */ .action-area { margin-top: auto; padding-top: 20px; } .action-btn { width: 100%; padding: 15px; font: 700 16px var(--sans); color: #fff; background: var(--blue); border: none; border-radius: var(--r-md); cursor: pointer; box-shadow: var(--shadow-sm); transition: background .12s, opacity .12s; } .action-btn:not(:disabled):hover { background: var(--blue-700); } .action-btn:disabled { background: #aab2c4; cursor: not-allowed; box-shadow: none; } .action-btn.correct-btn { background: var(--correct); } .action-btn.correct-btn:hover { background: #176b3b; } .action-btn.action-btn-ghost { background: #fff; color: var(--blue); border: 1.5px solid var(--blue); box-shadow: none; } .action-btn.action-btn-ghost:not(:disabled):hover { background: #eef3fb; } .practice-badge { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: var(--gold-50); color: var(--gold-700); padding: 3px 9px; border-radius: 999px; } /* ============================================================ MCQ (multiple-choice contests) ============================================================ */ .mcq-stem { font-size: 22px; font-weight: 800; letter-spacing: -.3px; line-height: 1.3; margin-bottom: 18px; } .mcq-choices { display: flex; flex-direction: column; gap: 10px; } .mcq-choice { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; white-space: normal; padding: 13px 15px; font-size: 15px; border-radius: var(--r-md); } .mcq-letter { flex-shrink: 0; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--blue-50); color: var(--blue-700); font-weight: 800; font-size: 13px; } .mcq-choice.selected { background: var(--blue-50); border-color: var(--blue); color: var(--ink); } .mcq-choice.selected .mcq-letter { background: var(--blue); color: #fff; } .mcq-choice.correct .mcq-letter { background: var(--correct); color: #fff; } .mcq-choice.incorrect .mcq-letter { background: var(--incorrect); color: #fff; } .mcq-text { flex: 1; } /* ============================================================ START / SETTINGS SCREEN ============================================================ */ .start-screen { display: flex; flex-direction: column; min-height: 100dvh; } .start-header { display: flex; flex-direction: column; padding-top: calc(12px + var(--safe-top)); padding-bottom: 12px; padding-left: max(calc(var(--page-pad) + var(--safe-left)), calc((100% - var(--content)) / 2)); padding-right: max(calc(var(--page-pad) + var(--safe-right)), calc((100% - var(--content)) / 2)); } .back-link { align-self: flex-start; font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; margin-bottom: 6px; } .back-link:hover { color: var(--blue-700); } .start-title-link { text-decoration: none; color: inherit; display: inline-block; } .start-title { font-size: 18px; font-weight: 800; letter-spacing: -.3px; } .start-subtitle { font-size: 13px; color: var(--faint); font-weight: 600; margin-top: 2px; } .settings-card { flex: 1; width: min(100% - 28px, var(--content)); margin: 16px auto calc(16px + var(--safe-bottom)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: 24px 22px; display: flex; flex-direction: column; gap: 22px; } .settings-section { display: flex; flex-direction: column; gap: 10px; } .settings-label { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); } .settings-group { display: flex; flex-wrap: wrap; gap: 8px; } .available-count { font-size: 13px; color: var(--muted); margin-top: 2px; } .auth-signout { text-align: center; margin-top: 4px; } .auth-signout-btn { background: none; border: none; cursor: pointer; font: 600 13px var(--sans); color: var(--muted); text-decoration: none; padding: 4px; } .auth-signout-btn:hover { color: var(--blue-700); text-decoration: underline; } /* settings.html reuses .settings-card inside a dash card — neutralize the full-bleed sizing there. */ #dash-root .settings-card { width: auto; margin: 0; box-shadow: var(--shadow-sm); border-radius: var(--r-md); } /* ============================================================ RESULTS SCREEN ============================================================ */ .results-screen { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: calc(24px + var(--safe-top)) max(var(--page-pad), env(safe-area-inset-left)) calc(24px + var(--safe-bottom)); } .results-card { width: 100%; max-width: 440px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: 30px 26px; text-align: center; } .results-grade { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 5px 13px; border-radius: 999px; margin-bottom: 14px; } .grade-a { background: var(--correct-50); color: var(--correct); } .grade-b { background: var(--blue-50); color: var(--blue-700); } .grade-c { background: var(--gold-50); color: var(--gold-700); } .grade-d { background: var(--incorrect-50); color: var(--incorrect); } .results-title { font-size: 22px; font-weight: 800; letter-spacing: -.3px; margin-bottom: 22px; } .score-pct { font-size: 56px; font-weight: 800; line-height: 1; letter-spacing: -1px; margin-bottom: 4px; } .score-pct.grade-a { color: var(--correct); } .score-pct.grade-b { color: var(--blue); } .score-pct.grade-c { color: var(--gold-700); } .score-pct.grade-d { color: var(--incorrect); } .score-pct-label { font-size: 13px; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 24px; } .score-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; } .score-item { background: var(--bg); border-radius: var(--r-md); padding: 16px 10px; } .score-value { font-size: 22px; font-weight: 800; color: var(--blue-700); } .score-label { font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.3; } .results-buttons { display: flex; flex-direction: column; gap: 10px; } .secondary-btn { background: transparent; color: var(--blue-700); border: 1.5px solid var(--blue); box-shadow: none; } .secondary-btn:not(:disabled):hover { background: var(--blue-50); } /* ============================================================ AUTH ============================================================ */ .auth-screen { min-height: 100dvh; display: flex; flex-direction: column; width: 100%; max-width: 460px; margin: 0 auto; } .auth-header { position: static; text-align: center; padding: calc(30px + var(--safe-top)) 22px 22px; } .auth-title { font-size: 22px; font-weight: 800; letter-spacing: -.3px; } .auth-subtitle { font-size: 13px; color: var(--faint); font-weight: 600; margin-top: 3px; } .auth-notice { background: var(--incorrect-50); color: var(--incorrect); font-size: 13px; padding: 12px 20px; text-align: center; border-bottom: 1px solid #f0c4bd; } .auth-notice-actions { display: flex; flex-direction: column; align-items: center; gap: 4px; } .auth-spinner { font-size: 24px; margin-top: 10px; animation: spin 1.5s linear infinite; } @keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } } .auth-card { flex: 1; background: var(--surface); padding: 24px 22px calc(28px + var(--safe-bottom)); display: flex; flex-direction: column; overflow-y: auto; } .auth-form { display: none; flex-direction: column; gap: 16px; } .auth-form.active { display: flex; } .auth-field { display: flex; flex-direction: column; gap: 6px; } .auth-label { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); } .auth-input { width: 100%; padding: 12px 13px; border: 1.5px solid var(--line); border-radius: var(--r-md); font-size: 15px; color: var(--ink); background: var(--surface); transition: border-color .15s; -webkit-appearance: none; } .auth-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-50); } .auth-input:disabled { background: var(--bg); color: var(--muted); } .auth-error { font-size: 13px; color: var(--incorrect); min-height: 18px; } .auth-success { color: var(--correct); } .auth-note { font-size: 12px; color: var(--muted); line-height: 1.5; background: var(--blue-50); border-radius: var(--r-md); padding: 11px 13px; } .auth-footer { text-align: center; font-size: 13px; color: var(--muted); } .auth-footer a { color: var(--blue-700); text-decoration: none; font-weight: 600; } .auth-footer-sep { color: var(--line); margin: 0 8px; } .auth-invite-badge { background: var(--gold-50); color: var(--gold-700); border-radius: var(--r-md); padding: 11px 14px; font-size: 14px; font-weight: 700; text-align: center; } .auth-confirm-icon { font-size: 40px; text-align: center; margin-top: 16px; } .auth-confirm-title { font-size: 20px; font-weight: 800; text-align: center; margin-bottom: 8px; } .auth-confirm-text { font-size: 14px; color: var(--muted); text-align: center; line-height: 1.6; margin-bottom: 8px; } .auth-confirm-link { text-align: center; text-decoration: none; display: block; } .auth-loading { display: flex; align-items: center; justify-content: center; height: 100dvh; font-size: 16px; color: var(--muted); background: var(--bg); } /* landing page */ .landing-lede { font-size: 15px; line-height: 1.6; color: var(--ink); margin-bottom: 16px; } .landing-features { list-style: none; margin: 0 0 20px; padding: 0; } .landing-features li { position: relative; padding: 8px 0 8px 24px; font-size: 14px; color: var(--muted); line-height: 1.5; border-top: 1px solid var(--line); } .landing-features li:first-child { border-top: none; } .landing-features li::before { content: '✓'; position: absolute; left: 0; top: 8px; color: var(--blue); font-weight: 800; } .landing-features strong { color: var(--ink); } .landing-cta { text-align: center; text-decoration: none; display: block; margin-bottom: 10px; } .landing-cta-alt { background: transparent; color: var(--blue-700); border: 1.5px solid var(--blue); box-shadow: none; } .landing-cta-alt:not(:disabled):hover { background: var(--blue-50); } .landing-signin { margin-top: 6px; } /* account-type chooser */ .auth-choose-prompt { font-size: 15px; font-weight: 700; margin-bottom: 14px; text-align: center; } .auth-choice-btn { display: flex; flex-direction: column; gap: 3px; text-align: left; width: 100%; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 15px 16px; margin-bottom: 12px; cursor: pointer; font-family: inherit; transition: border-color .15s, background .15s; } .auth-choice-btn:hover { border-color: var(--blue); background: var(--blue-50); } .auth-choice-title { font-size: 16px; font-weight: 800; color: var(--blue-700); } .auth-choice-desc { font-size: 13px; color: var(--muted); } /* Desktop: auth as a centered card */ @media (min-width: 521px) { .auth-screen { justify-content: center; padding: 28px 0; } .auth-header { border-radius: var(--r-lg) var(--r-lg) 0 0; } .auth-card { flex: 0 1 auto; border-radius: 0 0 var(--r-lg) var(--r-lg); border: 1px solid var(--line); border-top: none; box-shadow: var(--shadow-md); } } /* ============================================================ DASHBOARD FAMILY (dashboard / history / settings / manage / contest) ============================================================ */ #dash-root { min-height: 100dvh; background: var(--bg); } .dash-wrap { width: 100%; min-height: 100dvh; display: flex; flex-direction: column; } .dash-header { padding: 0 max(var(--page-pad), env(safe-area-inset-left)); } .dash-header-inner { max-width: var(--wide); margin: 0 auto; width: 100%; position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(11px + var(--safe-top)) 0 11px; } /* centered page title — tells the user where they are */ .dash-page-title { position: absolute; left: 50%; top: calc(50% + var(--safe-top) / 2); transform: translate(-50%, -50%); font-size: 15px; font-weight: 800; color: var(--ink); letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 56%; text-align: center; pointer-events: none; } @media (max-width: 430px) { .dash-wordmark { display: none; } } /* title block with a monogram chip to its left */ .dash-logo { position: relative; padding-left: 43px; } .dash-logo::before { content: "AP"; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: linear-gradient(150deg, var(--blue), #3f63cf); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .5px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); } .dash-title { font-size: 16px; font-weight: 800; letter-spacing: -.3px; line-height: 1.1; } .dash-subtitle { font-size: 12px; color: var(--faint); font-weight: 600; margin-top: 2px; } /* clickable logo wrapping the title block */ .dash-logo { text-decoration: none; color: inherit; display: block; } /* profile dropdown */ .dash-profile { position: relative; flex-shrink: 0; } .dash-profile-btn { width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer; display: grid; place-items: center; background: linear-gradient(150deg, var(--blue), #3f63cf); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .3px; font-family: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); } .dash-profile-btn:hover { filter: brightness(1.05); } .dash-profile-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 80; min-width: 200px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-md); padding: 6px; display: flex; flex-direction: column; } .dash-profile-menu[hidden] { display: none; } .dash-profile-name { font-size: 13px; font-weight: 700; color: var(--ink); padding: 8px 10px 9px; border-bottom: 1px solid var(--line); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dash-profile-item { font-size: 14px; font-weight: 600; color: var(--muted); text-decoration: none; background: none; border: none; cursor: pointer; text-align: left; padding: 9px 10px; border-radius: 8px; font-family: inherit; width: 100%; } .dash-profile-item:hover { background: var(--blue-50); color: var(--blue-700); } .dash-main { max-width: var(--wide); margin: 0 auto; width: 100%; flex: 1; padding: 22px max(var(--page-pad), env(safe-area-inset-left)) calc(40px + var(--safe-bottom)); display: flex; flex-direction: column; } /* metric cards */ .dash-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; } .dash-stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 12px; box-shadow: var(--shadow-sm); } .dash-stat-val { font-size: 24px; font-weight: 800; color: var(--ink); line-height: 1.1; word-break: break-word; } .dash-stat:last-child .dash-stat-val { color: var(--gold-700); } .dash-stat-lbl { font-size: 11px; color: var(--faint); margin-top: 4px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } /* sections */ .dash-section { margin-bottom: 24px; } /* Extra breathing room above secondary sections (Manage / More). */ .dash-section--spaced { margin-top: 14px; } .dash-section-title { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); margin-bottom: 11px; } .dash-section-subtitle { font-size: 12px; color: var(--muted); margin-bottom: 6px; } .dash-section-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .dash-link-sm { font-size: 13px; color: var(--blue-700); text-decoration: none; white-space: nowrap; font-weight: 600; } .dash-link-sm:hover { text-decoration: underline; } .dash-export-btn { background: none; border: none; cursor: pointer; font-family: inherit; padding: 0; } /* list cards */ .dash-list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm); } .dash-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); gap: 10px; } .dash-row:last-child { border-bottom: none; } .dash-row-main { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; } .dash-row-scores { display: flex; gap: 12px; align-items: center; flex-shrink: 0; } .dash-score { display: flex; flex-direction: column; align-items: center; min-width: 36px; } .dash-score-val { font-size: 14px; font-weight: 800; color: var(--ink); } .dash-score-lbl { font-size: 10px; color: var(--faint); text-transform: uppercase; letter-spacing: .03em; } .dash-row-date { font-size: 12px; color: var(--faint); } .dash-student-name { font-size: 15px; font-weight: 600; } .dash-muted { font-size: 13px; color: var(--muted); } .dash-row-link { text-decoration: none; color: inherit; cursor: pointer; } .dash-row-link:hover { background: var(--blue-50); } .dash-row-chevron { color: var(--faint); font-size: 20px; line-height: 1; margin-left: 4px; } .dash-tag { font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: var(--bg-2); color: var(--muted); text-transform: capitalize; } .dash-tag--texas { background: var(--blue-50); color: var(--blue-700); } .dash-tag--national { background: var(--gold-50); color: var(--gold-700); } .dash-missed-row { justify-content: space-between; } .dash-missed-name { font-size: 14px; font-weight: 600; } .dash-missed-count { font-size: 13px; color: var(--incorrect); font-weight: 700; flex-shrink: 0; } .dash-empty { font-size: 14px; color: var(--muted); padding: 18px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm); } .dash-empty a { color: var(--blue-700); } /* invites */ .dash-invite-links { margin-bottom: 12px; } .dash-invite-link-row { display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: 6px; box-shadow: var(--shadow-sm); } .dash-invite-link-text { font-size: 11px; color: var(--blue-700); word-break: break-all; flex: 1; } .dash-copy-btn { flex-shrink: 0; padding: 6px 12px; background: var(--blue); color: #fff; border: none; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; font-family: inherit; } .dash-copy-btn:hover { background: var(--blue-700); } .dash-invite-gen-btn { width: 100%; margin-top: 4px; } /* join code box */ .dash-code-box { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--blue-50); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; } .dash-code-label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .dash-code-value { font-size: 22px; font-weight: 800; color: var(--blue-700); letter-spacing: .08em; } /* member row actions */ .dash-row-actions { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; } .dash-mini-btn { padding: 6px 10px; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; font-family: inherit; background: transparent; color: var(--blue-700); border: 1.5px solid var(--blue); } .dash-mini-btn:hover { background: var(--blue-50); } .dash-mini-btn.ok { background: var(--blue); color: #fff; border-color: var(--blue); } .dash-mini-btn.ok:hover { background: var(--blue-700); } .dash-mini-btn.danger { color: var(--incorrect); border-color: var(--incorrect); } .dash-mini-btn.danger:hover { background: var(--incorrect-50); } .dash-badge-head { font-size: 11px; font-weight: 700; color: var(--blue-700); background: var(--blue-50); padding: 2px 8px; border-radius: 999px; } .dash-toggle-row { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink); margin: 4px 0 12px; cursor: pointer; } .dash-toggle-row input { width: 18px; height: 18px; flex-shrink: 0; } .dash-new-link-box { margin-top: 12px; background: var(--blue-50); border-radius: var(--r-md); padding: 14px; } .dash-new-link-label { font-size: 12px; font-weight: 700; color: var(--blue-700); margin-bottom: 8px; } /* accuracy bars */ .dash-bars { display: flex; flex-direction: column; gap: 10px; } .dash-bar-row { display: flex; align-items: center; gap: 10px; } .dash-bar-lbl { width: 64px; font-size: 13px; color: var(--muted); } .dash-bar-track { flex: 1; height: 10px; background: var(--bg-2); border-radius: 6px; overflow: hidden; } .dash-bar-fill { height: 100%; background: linear-gradient(90deg, var(--blue), #5c7fe0); border-radius: 6px; } .dash-bar-val { width: 38px; text-align: right; font-size: 13px; font-weight: 700; } /* needs-attention */ .dash-attn-row { display: flex; align-items: center; justify-content: space-between; } .dash-attn-flag { font-size: 12px; color: var(--incorrect); background: var(--incorrect-50); padding: 2px 8px; border-radius: 999px; } /* quiz launcher cards */ .quiz-launch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .quiz-launch-card { display: flex; flex-direction: column; gap: 5px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); text-decoration: none; color: var(--ink); box-shadow: var(--shadow-sm); text-align: left; /* buttons (e.g. Send Feedback) default to center — match the cards */ align-items: flex-start; transition: border-color .12s, transform .1s, box-shadow .12s; } .quiz-launch-card:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: var(--shadow-md); } .quiz-launch-card:active { transform: translateY(0); } .quiz-launch-badge { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 11px; font-weight: 800; font-size: 15px; color: #fff; margin-bottom: 5px; } .quiz-launch-badge.tx { background: linear-gradient(150deg, var(--blue), #3f63cf); } .quiz-launch-badge.nat { background: linear-gradient(150deg, var(--gold), #e0bc63); } .quiz-launch-badge.land { background: linear-gradient(150deg, #2f8f5e, #4cb27c); } /* green */ .quiz-launch-badge.home { background: linear-gradient(150deg, #b9742a, #d99a4e); } /* amber */ .quiz-launch-badge.dairy { background: linear-gradient(150deg, #7a3fb0, #9c63cf); } /* purple */ .quiz-launch-badge.ento { background: linear-gradient(150deg, #14857f, #2bb1a8); } /* teal */ .quiz-launch-badge.flor { background: linear-gradient(150deg, #c2417a, #de6a9c); } /* rose */ .quiz-launch-badge.live { background: linear-gradient(150deg, #b1422c, #d4694f); } /* terracotta */ .quiz-launch-badge.mqp { background: linear-gradient(150deg, #4a5fb8, #6e82d4); } /* indigo */ .quiz-launch-badge.nurs { background: linear-gradient(150deg, #1f8aa6, #41acc6); } /* cyan */ .quiz-launch-badge.parli { background: linear-gradient(150deg, #8a6d1f, #b09236); } /* olive-gold */ .quiz-launch-badge.alt { background: linear-gradient(150deg, #3a4a6b, #5a6e96); } /* fallback navy */ .quiz-launch-badge.util { background: linear-gradient(150deg, #5a6478, #828ca3); } .quiz-launch-badge svg { width: 22px; height: 22px; } .quiz-launch-name { font-weight: 700; font-size: 16px; } .quiz-launch-meta { font-size: 13px; color: var(--muted); } /* enrollment toggle */ .assign-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; margin-right: 10px; } .assign-toggle .assign-lbl { font-size: 12px; color: var(--muted); } .assign-toggle input { width: 16px; height: 16px; accent-color: var(--blue); cursor: pointer; } /* history drill-down */ .hist-filter { margin: 4px 0 12px; } .hist-item { border-bottom: 1px solid var(--line); } .hist-item:last-child { border-bottom: none; } .hist-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 4px; cursor: pointer; } .hist-row:hover { background: var(--blue-50); } .hist-caret { color: var(--faint); margin-left: 4px; transition: transform .15s; } .hist-item.open .hist-caret { transform: rotate(180deg); } .hist-detail { padding: 4px 4px 12px; } .hist-plant { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; font-size: 14px; } .hist-plant.ok { background: var(--correct-50); } .hist-plant.miss { background: var(--incorrect-50); } .hist-plant-name { flex: 1; } .hist-plant-chars { color: var(--muted); font-size: 12px; } .hist-plant-flag { font-weight: 800; } .hist-plant.ok .hist-plant-flag { color: var(--correct); } .hist-plant.miss .hist-plant-flag { color: var(--incorrect); } /* ── Post-close contest answer review ── */ .review-list { gap: 10px; } .review-item { padding: 10px 12px; border-radius: 8px; font-size: 14px; } .review-item.ok { background: var(--correct-50); } .review-item.miss { background: var(--incorrect-50); } .review-q-head { font-weight: 600; margin-bottom: 6px; } .review-q-num { color: var(--muted); margin-right: 4px; } .review-item.ok .review-q-flag { color: var(--correct); font-weight: 800; } .review-item.miss .review-q-flag { color: var(--incorrect); font-weight: 800; } .review-part { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 2px 0; } .review-part-lbl { color: var(--muted); font-size: 12px; min-width: 90px; } .review-ans-user { font-weight: 500; } .review-part.miss .review-ans-user { color: var(--incorrect); } .review-ans-correct { color: var(--correct); font-weight: 600; } .review-ans-correct::before { content: "→ "; color: var(--muted); font-weight: 400; } /* ── Desktop: two-column dashboard ── */ @media (min-width: 900px) { .dash-main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; column-gap: 28px; padding: 28px max(var(--page-pad), env(safe-area-inset-left)) 48px; } .dash-main > .dash-section { margin-bottom: 0; } .dash-main > .dash-stat-grid, .dash-main > .lb-carousel, .dash-main > .dash-section:has(.quiz-launch-grid) { grid-column: 1 / -1; } .quiz-launch-grid { grid-template-columns: repeat(3, 1fr); } } /* ============================================================ MOBILE BOTTOM TAB BAR (replaces top links ≤780px) ============================================================ */ @media (max-width: 780px) { /* backdrop-filter on the header would trap position:fixed children; drop it so the tab bar anchors to the viewport bottom. */ .dash-header { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; } } /* ============================================================ DESKTOP: roomier quiz card + two-column characteristics ============================================================ */ @media (min-width: 900px) { .card, .settings-card { padding: 30px 32px; } .plant-name { font-size: 34px; } } /* ============================================================ COMPACT: tighten vertical rhythm so quiz questions fit without page scrolling on portrait phones (most are 600–850px tall). ============================================================ */ @media (max-width: 899px) and (max-height: 900px) { .card { padding: 18px 18px; margin-top: 10px; margin-bottom: calc(10px + var(--safe-bottom)); } .plant-name { font-size: 26px; margin: 8px 0 4px; } .plant-scientific { margin-bottom: 10px; } .char-row { padding: 9px 0; } .char-label { margin-bottom: 6px; } .choice-btn, .setting-btn { padding: 8px 13px; } .action-area { padding-top: 12px; } .mcq-stem { margin-bottom: 12px; } } /* small phones (iPhone SE/8 ≈667) / landscape — go tighter still */ @media (max-width: 899px) and (max-height: 700px) { .card { padding: 14px 16px; margin-top: 8px; } .plant-name { font-size: 22px; margin: 4px 0 2px; } .plant-scientific { margin-bottom: 8px; } .char-row { padding: 7px 0; } .char-label { margin-bottom: 4px; } .type-badge { margin-bottom: 2px; } .action-area { padding-top: 10px; } .action-btn { padding: 12px; } } @media (max-width: 480px) { .dash-stat-grid { gap: 8px; } .dash-stat { padding: 13px 10px; } .dash-stat-val { font-size: 21px; } .quiz-launch-grid { grid-template-columns: 1fr; } } /* ============================================================ QUIZ TITLE BUTTON (clickable logo → abandon modal) ============================================================ */ .quiz-title-btn { background: none; border: none; padding: 0; cursor: pointer; font: inherit; color: inherit; } .quiz-title-btn:hover { color: var(--blue); text-decoration: underline; } /* ============================================================ ABANDON QUIZ MODAL ============================================================ */ .modal-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; padding: 20px; } .modal-box { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: 28px 24px 22px; width: min(100%, 360px); } .modal-title { font-size: 20px; font-weight: 800; letter-spacing: -.3px; margin: 0 0 8px; } .modal-body { font-size: 15px; color: var(--muted); margin: 0 0 22px; } .modal-actions { display: flex; gap: 10px; justify-content: flex-end; } .modal-btn { font: 600 14px var(--sans); padding: 10px 18px; border-radius: var(--r-md); border: 1.5px solid var(--line); cursor: pointer; background: var(--surface); color: var(--ink); transition: background .12s, border-color .12s; } .modal-btn:hover { border-color: var(--blue); background: var(--blue-50); } .modal-btn-leave { background: var(--incorrect); border-color: var(--incorrect); color: #fff; } .modal-btn-leave:hover { background: #a12e26; border-color: #a12e26; } .modal-btn-primary { background: var(--blue); border-color: var(--blue); color: #fff; } .modal-btn-primary:hover { background: var(--blue-700, #2a4bb0); border-color: var(--blue-700, #2a4bb0); } .modal-btn-primary:disabled { opacity: .6; cursor: default; } /* feedback form controls */ .feedback-select, .feedback-input { width: 100%; box-sizing: border-box; font: 400 14px var(--sans); color: var(--ink); background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; margin-bottom: 12px; } .feedback-input { min-height: 110px; resize: vertical; } .feedback-select:focus, .feedback-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-50); } .feedback-error { color: var(--incorrect); font-size: 13px; font-weight: 600; margin: -4px 0 12px; } /* ============================================================ CUSTOM QUIZ BUILDER (teacher) + start-screen order accordion ============================================================ */ /* The order multi-select reuses the in-quiz accordion; soften its top border so it sits cleanly inside a settings-section. */ .start-order-acc { border-top: none; } /* Fixed overall size so the modal never snaps to different heights as the bug list is filtered or the student count changes; lists scroll internally. */ .cq-modal { width: min(100%, 440px); height: min(640px, 88vh); overflow-y: auto; } .cq-input { width: 100%; box-sizing: border-box; font: 400 14px var(--sans); color: var(--ink); background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 9px 12px; margin-bottom: 10px; } .cq-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-50); } .cq-builder-label { font-size: 13px; font-weight: 700; color: var(--ink); margin: 10px 0 6px; } .cq-builder-label span { font-weight: 400; color: var(--muted); } .cq-pick-list { border: 1.5px solid var(--line); border-radius: var(--r-md); height: 200px; overflow-y: auto; margin-bottom: 6px; } #cq-student-list { height: 130px; } .cq-pick-row { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border-bottom: 1px solid var(--line); font-size: 14px; cursor: pointer; } .cq-pick-row:last-child { border-bottom: none; } .cq-pick-id { font-size: 12px; font-weight: 600; color: var(--muted); min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; } .cq-pick-name { flex: 1; } .cq-pick-tag { font-size: 11px; color: var(--muted); } /* ============================================================ PWA INSTALL BANNER ============================================================ */ .pwa-install-banner { position: fixed; left: 12px; right: 12px; bottom: calc(12px + var(--safe-bottom)); max-width: 496px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--ink); color: #fff; padding: 13px 15px; border-radius: var(--r-md); box-shadow: 0 10px 30px rgba(21,33,59,.3); font-size: 14px; z-index: 1000; } .pwa-install-actions { display: flex; align-items: center; gap: 8px; } .pwa-install-btn { background: #fff; color: var(--ink); border: none; border-radius: 8px; padding: 7px 14px; font-weight: 700; font-family: inherit; cursor: pointer; } .pwa-install-dismiss { background: none; border: none; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; } /* ============================================================ LIVE CONTESTS + LEADERBOARD ============================================================ */ /* Per-question countdown (injected into the quiz header in contest mode). */ .contest-timer { display: flex; align-items: center; gap: 8px; margin-top: 8px; } .contest-timer-track { flex: 1; height: 6px; border-radius: 999px; background: var(--bg-2); overflow: hidden; } .contest-timer-fill { height: 100%; width: 100%; border-radius: 999px; background: var(--blue); transition: width 1s linear, background-color .3s ease; } .contest-timer-fill.low { background: var(--incorrect); } .contest-timer-num { font-size: 12px; font-weight: 700; color: var(--muted); min-width: 30px; text-align: right; } /* One-time focus-loss warning toast. */ .contest-toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: var(--incorrect); color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; box-shadow: 0 6px 20px rgba(0,0,0,.18); z-index: 1000; max-width: 90%; text-align: center; } /* Live-hub cards. */ .contest-live-card { padding: 16px; } .contest-live-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .contest-live-title { font-size: 16px; font-weight: 700; color: var(--text); } .contest-cadence-tag { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--bg-2); color: var(--muted); text-transform: uppercase; letter-spacing: .03em; } .contest-cadence-tag.weekly { background: var(--blue-50); color: var(--blue-700); } .contest-live-status { margin-top: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .contest-pill { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; } .contest-pill.open { background: var(--correct-50); color: var(--correct); } .contest-pill.closed { background: var(--bg-2); color: var(--muted); } .contest-pill.done { background: var(--blue-50); color: var(--blue-700); } .contest-countdown { font-size: 13px; color: var(--muted); font-weight: 600; } .contest-live-meta { margin-top: 8px; font-size: 12px; color: var(--muted); } .contest-live-action { margin-top: 14px; } /* Leaderboard table. */ .lb-list { display: flex; flex-direction: column; gap: 2px; } .lb-row { display: grid; grid-template-columns: 36px 1fr auto auto; gap: 10px; align-items: center; padding: 11px 12px; border-radius: 10px; background: var(--surface); } .lb-row + .lb-row { border-top: 1px solid var(--line); } .lb-row.lb-head { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; background: transparent; padding-bottom: 4px; } .lb-row.me { background: var(--blue-50); outline: 2px solid var(--blue); } .lb-rank { font-weight: 800; color: var(--blue-700); text-align: center; font-size: 15px; } .lb-name { display: flex; flex-direction: column; font-weight: 600; color: var(--text); font-size: 14px; min-width: 0; } .lb-name .lb-school { font-weight: 500; color: var(--muted); font-size: 12px; } .lb-score { font-weight: 800; color: var(--text); font-size: 15px; text-align: right; white-space: nowrap; } .lb-score .lb-score-lbl { display: block; font-size: 10px; font-weight: 600; color: var(--muted); text-transform: uppercase; } .lb-time { font-size: 13px; color: var(--muted); font-weight: 600; text-align: right; white-space: nowrap; } /* Live event: scores withheld until the window closes. */ .lb-score .lb-hidden { font-size: 14px; opacity: .6; } .lb-live-note { font-size: 11px; color: var(--blue); background: var(--blue-50, #eef4fb); border-radius: 6px; padding: 4px 8px; margin-bottom: 6px; line-height: 1.35; } /* Live position shown on the contest results screen. */ .contest-live-position { margin-top: 14px; padding: 12px; border-radius: 10px; background: var(--blue-50, #eef4fb); text-align: center; } .contest-live-position-rank { font-size: 30px; font-weight: 800; color: var(--blue); line-height: 1; } .contest-live-position-of { font-size: 16px; font-weight: 600; color: var(--muted); } .contest-live-position-lbl { font-size: 12px; color: var(--muted); margin-top: 4px; } /* Per-contest live entry grid (contest.html). */ .contest-live-grid { display: grid; grid-template-columns: 1fr; gap: 12px; } @media (min-width: 560px) { .contest-live-grid { grid-template-columns: 1fr 1fr; } } /* Leaderboard history nav (prev / picker / next). */ .lb-history { display: flex; align-items: center; gap: 8px; } .lb-history .setting-btn { flex-shrink: 0; } .lb-date-input { flex: 1; min-width: 0; } /* Leaderboard uses the full screen width on desktop. Force single-column flow so the desktop dashboard's 2-column grid (≥900px) doesn't split the board. */ body.lb-wide .dash-main { max-width: none; display: block; } body.lb-wide .dash-header-inner { max-width: none; } /* Contest selector: scrollable strip of colored badge chips. */ .lb-contest-bar { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 14px; margin-bottom: 8px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } .lb-contest-chip { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; cursor: pointer; padding: 7px 14px 7px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; transition: border-color .12s, box-shadow .12s, background .12s; } .lb-contest-chip:hover { border-color: var(--blue); } .lb-contest-chip.selected { border-color: var(--blue); background: var(--blue-50); box-shadow: var(--shadow-sm); } .lb-contest-chip .quiz-launch-badge { width: 30px; height: 30px; border-radius: 9px; font-size: 12px; margin: 0; } .lb-contest-name { font-weight: 700; font-size: 14px; white-space: nowrap; } /* Division (Student | Teacher) segmented toggle. */ .lb-div-toggle { display: inline-flex; gap: 0; margin-top: 6px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--surface); } .lb-div-btn { padding: 6px 18px; border: none; background: transparent; color: var(--ink); font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; transition: background .12s, color .12s; } .lb-div-btn:hover:not(.selected) { background: var(--blue-50); } .lb-div-btn.selected { background: var(--blue); color: #fff; } /* Compact per-column date nav (◀ selector ▶). */ .lb-colnav { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; } .lb-navbtn { flex: 0 0 auto; width: 30px; height: 30px; padding: 0; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: border-color .12s, color .12s; } .lb-navbtn:hover:not(:disabled) { border-color: var(--blue); color: var(--blue-700); } .lb-navbtn:disabled { opacity: .4; cursor: default; } .lb-navsel { flex: 1; min-width: 0; padding: 5px 8px; font-size: 13px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); } .lb-navlabel { flex: 1; text-align: center; font-weight: 700; font-size: 13px; color: var(--text); } /* Three-column leaderboard layout (Streak | Weekly | Daily). */ .lb-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 760px) { .lb-grid { grid-template-columns: 1fr 1fr 1fr; align-items: start; } } .lb-col { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm); padding: 14px; } .lb-col .lb-col-title { font-size: 14px; color: var(--blue-700); margin-bottom: 2px; } .lb-col .dash-section-subtitle { margin-bottom: 10px; } .lb-sub { font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 16px 0 6px; } .lb-col .lb-row { padding: 8px 10px; grid-template-columns: 26px 1fr auto auto; gap: 8px; } /* ── Dashboard leaderboard carousel ── */ .lb-carousel { margin-bottom: 24px; } .lb-carousel-track { position: relative; } .lb-slide { display: block; text-decoration: none; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm); padding: 16px; transition: border-color .12s, box-shadow .12s; } .lb-slide:hover { border-color: var(--blue); box-shadow: var(--shadow-md); } .lb-slide-head { font-size: 14px; font-weight: 800; color: var(--blue-700); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 12px; } .lb-slide-cols { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 560px) { .lb-slide-cols { grid-template-columns: 1fr 1fr; } } .lb-col-title { font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; } .lb-carousel .lb-row { padding: 8px 10px; } .lb-carousel .lb-row { grid-template-columns: 28px 1fr auto; } .lb-carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 12px; } .lb-dot { width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0; cursor: pointer; background: var(--line); transition: background .12s, transform .12s; } .lb-dot.active { background: var(--blue); transform: scale(1.25); } /* Mobile: carousel fills roughly the upper two-thirds of the screen. */ @media (max-width: 559px) { .lb-carousel { min-height: 66dvh; display: flex; flex-direction: column; } .lb-carousel-track { flex: 1; } .lb-slide { height: 100%; } }