@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@300;400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* Brand tokens — from team color-spec.docx (Math EdTech Platform v1.0) */ --color-brand-teacher: #1E3A5F; --color-brand-teacher-subtle: #E8F1FC; --color-brand-student: #5B21B6; --color-brand-student-subtle: #F5F3FF; --color-accent: #0369A1; --color-accent-subtle: #E0F2FE; --color-surface-page: #F8FAFC; --color-surface-card: #FFFFFF; --color-surface-raised: #F1F5F9; --color-text-primary: #0F172A; --color-text-secondary: #475569; --color-text-tertiary: #64748B; --color-text-inverse: #FFFFFF; --color-border-default: #E2E8F0; --color-border-strong: #CBD5E1; --color-status-success: #22C55E; --color-status-success-subtle: #F0FDF4; --color-status-success-text: #166534; --color-status-warning: #FACC15; --color-status-warning-subtle: #FEFCE8; --color-status-warning-text: #854D0E; --color-status-caution: #F97316; --color-status-caution-subtle: #FFF7ED; --color-status-caution-text: #9A3412; --color-status-danger: #EF4444; --color-status-danger-subtle: #FEF2F2; --color-status-danger-text: #991B1B; --color-status-neutral: #94A3B8; --color-status-neutral-subtle: #F1F5F9; --color-status-neutral-text: #475569; /* Legacy aliases — existing components keep working while we migrate */ --bg: var(--color-surface-page); --bg-2: var(--color-surface-card); --bg-3: var(--color-surface-raised); --text: var(--color-text-primary); --muted: var(--color-text-secondary); --muted-2: var(--color-text-tertiary); --line: var(--color-border-default); --line-strong: var(--color-border-strong); --live: var(--color-status-success); --warn: var(--color-status-danger); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; height: 100vh; overflow: hidden; } /* Pages that scroll vertically: lift the lock from too */ html:has(body.history-body), html:has(body.about-body), html:has(body.class-body), html:has(body.classes-body), html:has(body.preview-body), html:has(body.tugi-body), html:has(body.student-body), html:has(body.loo-body), html:has(body.lesson-detail-body) { height: auto; overflow: visible; } body.loo-body, body.lesson-detail-body { height: auto; overflow: visible; } body { display: flex; flex-direction: column; } h1, h2, h3 { margin: 0; } .display { font-family: 'Barlow Condensed', 'Inter', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1; } .eyebrow, .section-heading { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.3em; color: var(--muted); display: block; } .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; } a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line); } a:hover { border-bottom-color: var(--text); } button { font: 600 12px 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: 0.22em; background: transparent; color: var(--text); border: 1px solid var(--line-strong); padding: 12px 22px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; border-radius: 0; } button:hover:not(:disabled) { background: var(--text); color: var(--bg); border-color: var(--text); } button.primary { background: var(--text); color: var(--bg); border-color: var(--text); } button.primary:hover:not(:disabled) { background: transparent; color: var(--text); } button:disabled { opacity: 0.35; cursor: not-allowed; } input[type="text"], input[type="email"], input[type="password"], textarea { font-family: 'Inter', sans-serif; font-size: 15px; background: transparent; color: var(--text); border: 0; border-bottom: 1px solid var(--line); padding: 12px 0; width: 100%; outline: none; border-radius: 0; -webkit-text-fill-color: var(--text); caret-color: var(--text); } input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, textarea:focus { border-bottom-color: var(--text); } input[type="text"]::placeholder, input[type="email"]::placeholder, input[type="password"]::placeholder, textarea::placeholder { color: var(--muted-2); } /* Override Chrome/Edge autofill yellow + dark text */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-text-fill-color: var(--text) !important; -webkit-box-shadow: 0 0 0 1000px var(--bg) inset !important; caret-color: var(--text) !important; transition: background-color 5000s ease-in-out 0s; } textarea { resize: none; line-height: 1.4; } .banner { position: fixed; top: 0; left: 0; right: 0; background: var(--warn); color: #fff; padding: 9px 20px; font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.25em; text-align: center; z-index: 1000; display: none; } .banner.show { display: block; } .wordmark { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 20px; letter-spacing: 0.3em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; } .wordmark::before { content: ''; width: 28px; height: 28px; background-image: url('/logo-icon.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; flex-shrink: 0; } .wordmark small { margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--line); font-size: 10px; font-weight: 500; letter-spacing: 0.28em; color: var(--muted); } .pill { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; } .pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); } .pill.live { color: var(--text); } .pill.live::before { background: var(--live); box-shadow: 0 0 0 4px rgba(0, 255, 136, 0.15); } /* === Class analysis view (the actual product per the spec) === */ body.class-body { height: auto; overflow-y: auto; } .class-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 28px; border-bottom: 1px solid var(--line); gap: 18px; } .class-meta-bar { display: flex; gap: 20px; font-size: 11px; color: var(--muted); letter-spacing: 0.05em; } .class-main { max-width: 1200px; margin: 0 auto; padding: 32px 24px 80px; display: flex; flex-direction: column; gap: 36px; } /* Recommendation hero */ .recommendation { border: 1px solid var(--line-strong); background: rgba(15, 23, 42, 0.02); padding: 32px 36px; } .recommendation .eyebrow { margin-bottom: 12px; } .rec-headline { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: clamp(28px, 4vw, 44px); line-height: 1.15; letter-spacing: 0.02em; margin: 0 0 16px; } .rec-detail { font-size: 15px; color: var(--muted); line-height: 1.6; max-width: 760px; margin: 0 0 24px; } .rec-actions { display: flex; flex-wrap: wrap; gap: 12px; } .rec-actions button { padding: 14px 24px; font-size: 12px; letter-spacing: 0.22em; } /* Three traffic-light buckets */ .buckets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .bucket { border: 1px solid var(--line); padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; } .bucket-head { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 14px; } .bucket-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--line-strong); } .bucket-label { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text); } .bucket-count { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 38px; line-height: 1; } .bucket-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; } .bucket-list li { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 8px; font-size: 14px; border-bottom: 1px dashed rgba(15, 23, 42, 0.06); } .bucket-list li:last-child { border-bottom: 0; } .bucket-list .ratio { font-size: 11px; color: var(--muted); } .bucket-need { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.5); } .bucket-need .bucket-dot { background: var(--color-status-danger); box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2); } .bucket-mid { background: rgba(250, 204, 21, 0.08); border-color: rgba(250, 204, 21, 0.5); } .bucket-mid .bucket-dot { background: var(--color-status-warning); box-shadow: 0 0 0 4px rgba(250, 204, 21, 0.2); } .bucket-ready { background: rgba(34, 197, 94, 0.08); border-color: rgba(34, 197, 94, 0.5); } .bucket-ready .bucket-dot { background: var(--color-status-success); box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2); } @media (max-width: 800px) { .buckets { grid-template-columns: 1fr; } .class-header { flex-wrap: wrap; } .class-meta-bar { order: 3; flex-basis: 100%; } } /* Per-student grid */ .grid-section { display: flex; flex-direction: column; gap: 14px; } .grid-section-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 12px; } .grid-legend { display: flex; gap: 14px; font-size: 11px; color: var(--muted); letter-spacing: 0.04em; } .grid-legend .leg { display: inline-flex; align-items: center; gap: 6px; } .grid-legend .leg::before { content: ''; width: 12px; height: 12px; display: inline-block; } .grid-legend .leg-correct::before { background: var(--color-status-success); } .grid-legend .leg-partial::before { background: var(--color-status-warning); } .grid-legend .leg-wrong::before { background: var(--color-status-danger); } .grid-legend .leg-blank::before { background: rgba(15, 23, 42, 0.1); } .grid-table-wrap { border: 1px solid var(--line); overflow-x: auto; } .grid-table { width: 100%; border-collapse: collapse; font-size: 13px; } .grid-table th, .grid-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); } .grid-table th { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); font-weight: 500; background: rgba(15, 23, 42, 0.02); } .grid-table td.cell { width: 56px; text-align: center; padding: 0; } .grid-table td.cell::after { content: ''; display: inline-block; width: 14px; height: 14px; vertical-align: middle; background: rgba(15, 23, 42, 0.1); border-radius: 2px; } .grid-table td.cell-correct::after { background: var(--color-status-success); } .grid-table td.cell-partial::after { background: var(--color-status-warning); } .grid-table td.cell-wrong::after { background: var(--color-status-danger); } .grid-table td.cell-blank::after { background: rgba(15, 23, 42, 0.08); border: 1px dashed rgba(15, 23, 42, 0.2); } .grid-table td.total { font-weight: 600; font-size: 12px; color: var(--muted); } .grid-table tr.row-need .name { color: #ff8a73; } .grid-table tr.row-mid .name { color: #f7d96a; } .grid-table tr.row-ready .name { color: #6ee7a8; } .live-badge { display: inline-flex; align-items: center; gap: 12px; padding: 10px 16px; border: 1px solid var(--live); background: rgba(0, 255, 136, 0.06); font-family: 'Barlow Condensed', sans-serif; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--live); align-self: flex-start; } .live-badge .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 4px rgba(0, 255, 136, 0.18); } .live-badge .mono { color: var(--muted); font-size: 10px; } /* === Print stylesheet for /class — paper handout format === */ @media print { body { background: white !important; color: black !important; height: auto !important; overflow: visible !important; } body * { color: black !important; } .class-header > div:last-child, .extra-links, .algo-note, .reload-btn { display: none !important; } .recommendation { background: #f5f5f5 !important; border: 1px solid #999 !important; } .bucket { background: white !important; border: 1px solid #999 !important; } .bucket-need { border-color: #c00 !important; } .bucket-mid { border-color: #b80 !important; } .bucket-ready { border-color: #060 !important; } .bucket-need .bucket-dot { background: #c00 !important; box-shadow: none !important; } .bucket-mid .bucket-dot { background: #b80 !important; box-shadow: none !important; } .bucket-ready .bucket-dot { background: #060 !important; box-shadow: none !important; } .grid-table td.cell-correct::after { background: #060 !important; } .grid-table td.cell-partial::after { background: #b80 !important; } .grid-table td.cell-wrong::after { background: #c00 !important; } .grid-table td.cell-blank::after { background: white !important; border: 1px solid #999 !important; } .patterns-list .pattern { background: white !important; } a { color: black !important; text-decoration: none !important; border: 0 !important; } .class-main { padding: 0 !important; max-width: none !important; } section { page-break-inside: avoid; } } /* Algorithm transparency disclosure */ .algo-note { border: 1px solid var(--line); padding: 16px 20px; } .algo-note summary { cursor: pointer; font-family: 'Barlow Condensed', sans-serif; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); } .algo-note summary:hover { color: var(--text); } .algo-body { margin-top: 14px; font-size: 14px; line-height: 1.65; color: var(--muted); max-width: 720px; } .algo-body strong { color: var(--text); } .algo-body ol, .algo-body ul { padding-left: 20px; margin: 8px 0; } .algo-body li { margin-bottom: 6px; } .algo-foot { margin-top: 14px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.05em; color: var(--muted-2); } /* Hidden patterns */ .patterns { border-top: 1px solid var(--line); padding-top: 22px; } .patterns-list { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 8px; } .patterns-list .pattern { font-size: 14px; line-height: 1.5; padding: 12px 14px; border-left: 2px solid var(--line-strong); background: rgba(15, 23, 42, 0.02); } .patterns-list .pattern-shaky-strong { border-left-color: var(--color-status-warning); } .patterns-list .pattern-topic-gap { border-left-color: var(--color-status-danger); } .patterns-list .pattern-skill-gap { border-left-color: var(--color-status-danger); } /* === Võimendatud õpetaja: multi-class grid === */ body.classes-body { height: auto; overflow-y: auto; } .classes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 14px; } .class-card { border: 1px solid var(--line); padding: 22px; display: flex; flex-direction: column; gap: 16px; background: rgba(15, 23, 42, 0.02); } .class-card.priority-critical { border-color: rgba(239, 68, 68, 0.5); background: rgba(239, 68, 68, 0.05); } .class-card.priority-watch { border-color: rgba(250, 204, 21, 0.45); background: rgba(250, 204, 21, 0.04); } .class-card.priority-ok { border-color: rgba(34, 197, 94, 0.4); background: rgba(34, 197, 94, 0.04); } .class-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .class-card-priority { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; } .class-card.priority-critical .class-card-priority { color: var(--color-status-danger); } .class-card.priority-watch .class-card-priority { color: var(--color-status-warning); } .class-card.priority-ok .class-card-priority { color: var(--color-status-success); } .class-card-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 32px; letter-spacing: 0.04em; line-height: 1; } .class-card-action { font-family: 'Barlow Condensed', sans-serif; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; text-align: right; color: var(--text); max-width: 200px; } .class-card-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .class-card-stats .cstat { padding: 10px 12px; border: 1px solid var(--line); } .class-card-stats .cstat .num { display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 24px; line-height: 1; } .class-card-stats .cstat .label { display: block; font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-top: 4px; } .class-card-stats .cstat-need .num { color: var(--color-status-danger); } .class-card-stats .cstat-mid .num { color: var(--color-status-warning); } .class-card-stats .cstat-ready .num { color: var(--color-status-success); } .class-card-bar { display: flex; height: 8px; border: 1px solid var(--line); overflow: hidden; } .class-card-bar .seg-need { background: var(--color-status-danger); } .class-card-bar .seg-mid { background: var(--color-status-warning); } .class-card-bar .seg-ready { background: var(--color-status-success); } .class-card-foot { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--muted); } .class-card-foot a { padding: 0; } .patterns-list .pattern-cross-class { border-left-color: var(--color-status-warning); } .patterns-list .pattern-global { border-left-color: var(--line-strong); } /* === About page === */ body.about-body { height: auto; overflow-y: auto; } .about-main { max-width: 980px; margin: 0 auto; padding: 48px 24px 80px; display: flex; flex-direction: column; gap: 56px; } .about-hero { max-width: 760px; } .about-hero .eyebrow { display: block; margin-bottom: 14px; } .about-h1 { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: clamp(28px, 4.5vw, 48px); line-height: 1.2; letter-spacing: 0.01em; margin: 0 0 22px; } .about-lead { font-size: 17px; line-height: 1.65; color: var(--muted); max-width: 700px; margin: 0; } .about-three { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; } .about-tile { border-top: 1px solid var(--line); padding: 20px 0; } .about-tile .about-num { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--muted); letter-spacing: 0.05em; } .about-tile h2 { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 24px; letter-spacing: 0.04em; margin: 6px 0 12px; } .about-tile p { font-size: 14px; line-height: 1.65; color: var(--muted); margin: 0; } .about-tile p strong, .about-tile p em { color: var(--text); font-style: normal; } .about-roles .about-roles-list { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 14px; } .about-roles li { border: 1px solid var(--line); padding: 16px 18px; font-size: 14px; line-height: 1.55; color: var(--muted); } .about-roles li strong { color: var(--text); } .about-roles a { color: var(--text); border-bottom: 1px solid var(--line-strong); } .about-not ul { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; font-size: 14px; color: var(--muted); line-height: 1.6; } .about-not li { padding-left: 22px; position: relative; } .about-not li::before { content: '×'; position: absolute; left: 0; top: 0; color: var(--warn); font-weight: 700; } .about-foot { border-top: 1px solid var(--line); padding-top: 22px; } /* === Sektorgraafik === */ body.sektor-body { height: auto; overflow-y: auto; } .sektor-frame { display: grid; grid-template-columns: minmax(360px, 1fr) 280px; gap: 28px; align-items: start; } .sektor-svg-wrap { background: var(--color-surface-card); border: 1px solid var(--line); padding: 16px; } #sektor-svg { width: 100%; height: auto; max-height: 560px; display: block; margin: 0 auto; } .sektor-legend { display: flex; flex-direction: column; gap: 22px; } .legend-block { border: 1px solid var(--line); background: var(--color-surface-card); padding: 14px 16px; } .legend-title { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 10px; } .legend-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; } .legend-list li { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.4; color: var(--text); padding: 4px 0; } .legend-list li .legend-name { flex: 1; min-width: 0; } .legend-list li .legend-meta { font-size: 11px; color: var(--muted); } .legend-list .swatch { width: 14px; height: 14px; border-radius: 2px; display: inline-block; flex-shrink: 0; } .legend-topics li::before { content: ''; width: 18px; height: 18px; border: 2px solid var(--color-text-secondary); border-radius: 50%; display: inline-block; flex-shrink: 0; margin-right: 4px; } .legend-topics li:nth-child(2)::before { width: 14px; height: 14px; } .legend-topics li:nth-child(3)::before { width: 10px; height: 10px; } .sektor-table-wrap { border: 1px solid var(--line); background: var(--color-surface-card); overflow-x: auto; } .sektor-table { width: 100%; border-collapse: collapse; font-size: 13px; } .sektor-table th, .sektor-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); } .sektor-table th { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); font-weight: 500; background: var(--color-surface-raised); } .sektor-table th .th-sub { font-family: 'Inter', sans-serif; font-size: 10px; letter-spacing: 0.04em; text-transform: none; color: var(--muted-2); font-weight: 400; } .sektor-table td .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; } .sektor-table td .muted { color: var(--muted); } .sektor-table td.name { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 16px; letter-spacing: 0.04em; } @media (max-width: 900px) { .sektor-frame { grid-template-columns: 1fr; } } /* === Tugiõpetaja mobile view === */ body.tugi-body { height: auto; overflow-y: auto; background: var(--bg); } .tugi-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); gap: 12px; } .tugi-main { max-width: 540px; margin: 0 auto; padding: 24px 18px 80px; display: flex; flex-direction: column; gap: 24px; } .tugi-action { border: 1px solid var(--line-strong); background: rgba(239, 68, 68, 0.06); padding: 22px 22px; } .tugi-action h1 { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 28px; line-height: 1.2; letter-spacing: 0.02em; margin: 10px 0 12px; } .tugi-action .muted-text { color: var(--muted); font-size: 14px; line-height: 1.55; margin: 0; } .tugi-block { border: 1px solid var(--line); padding: 16px 18px; } .tugi-block-head { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 12px; } .tugi-block-label { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; } .tugi-block-count { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 30px; line-height: 1; } .tugi-name-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; counter-reset: tugi; } .tugi-name-list li { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 12px; background: rgba(15, 23, 42, 0.02); font-size: 16px; counter-increment: tugi; } .tugi-name-list li::before { content: counter(tugi, decimal-leading-zero); font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); margin-right: 14px; } .tugi-name-list .ratio { font-size: 12px; color: var(--muted); } .tugi-name-list.small li { font-size: 14px; padding: 8px 12px; } .tugi-foot { text-align: center; font-size: 12px; color: var(--muted); margin-top: 16px; } .tugi-foot a { color: var(--text); border-bottom: 1px solid var(--line-strong); } /* === History page === */ body.history-body { height: auto; overflow-y: auto; } .history-header { display: flex; justify-content: space-between; align-items: center; padding: 18px 28px; border-bottom: 1px solid var(--line); } .history-main { max-width: 960px; margin: 0 auto; padding: 36px 24px 60px; } .history-state { text-align: center; padding: 80px 20px; color: var(--muted); font-size: 14px; line-height: 1.7; } .history-state a { color: var(--text); border-bottom: 1px solid var(--line-strong); } .history-card { border: 1px solid var(--line); padding: 0; margin-bottom: 14px; background: var(--bg-2); } .history-card-link { display: grid; grid-template-columns: 1fr 130px; gap: 22px; padding: 22px 24px; text-decoration: none; border: 0; color: var(--text); align-items: center; } .history-card-link:hover { background: var(--color-surface-raised); } .history-card-link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; } .history-card-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; } .history-card-polar { position: relative; width: 130px; height: 130px; display: grid; place-items: center; } .history-card-polar canvas { width: 130px !important; height: 130px !important; } .history-polar-empty { position: absolute; inset: 0; display: grid; place-items: center; font-family: 'Barlow Condensed', sans-serif; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted-2); text-align: center; pointer-events: none; } .history-card .history-details { border-top: 1px solid var(--line); padding: 14px 24px 16px; } @media (max-width: 600px) { .history-card-link { grid-template-columns: 1fr; } .history-card-polar { margin: 0 auto; } } .history-card-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; gap: 14px; } .history-room { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 36px; letter-spacing: 0.06em; line-height: 1; } .history-when { font-size: 12px; color: var(--muted); margin-top: 6px; letter-spacing: 0.02em; } .history-pct { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 40px; line-height: 1; letter-spacing: 0.02em; } .history-card-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border: 1px solid var(--line); } .history-stat { display: flex; flex-direction: column; gap: 4px; padding: 14px 12px; border-right: 1px solid var(--line); } .history-stat:last-child { border-right: 0; } .history-stat .num { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 28px; line-height: 1; } .history-stat .label { font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--muted); } .history-stat.maybe .num { color: #b8b8b8; } .history-stat.no .num { color: #5a5a5a; } .history-details { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; } .history-details summary { font-family: 'Barlow Condensed', sans-serif; font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--muted); cursor: pointer; } .history-details summary:hover { color: var(--text); } .history-exercise-list { margin: 14px 0 0; padding-left: 20px; color: var(--muted); font-size: 14px; line-height: 1.8; } .history-exercise-list li { margin-bottom: 6px; } @media (max-width: 600px) { .history-card-grid { grid-template-columns: repeat(2, 1fr); } .history-stat { border-bottom: 1px solid var(--line); } .history-stat:nth-last-child(-n+2) { border-bottom: 0; } } /* === Top-right auth corner === */ .top-auth { position: fixed; top: 14px; right: 16px; z-index: 50; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); flex-wrap: wrap; justify-content: flex-end; } #user-email { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 600px) { .top-auth { top: 12px; right: 12px; gap: 8px; } #user-email { display: none !important; } #top-auth-user { gap: 8px !important; } #top-auth-user a, #signout-btn { font-size: 10px !important; } } /* === Modal === */ .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(6px); display: none; place-items: center; z-index: 200; padding: 24px; } .modal-overlay.show { display: grid; } .modal-content { max-width: 420px; width: 100%; padding: 32px; background: var(--bg); border: 1px solid var(--line-strong); } .summary-content { max-width: 540px; } .summary-grid { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--line); } .summary-tile { padding: 22px 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; } .summary-tile:nth-child(2n) { border-right: 0; } .summary-tile:nth-last-child(-n+2) { border-bottom: 0; } .summary-tile .num { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 48px; line-height: 1; } .summary-tile .label { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); } /* === Auth form === */ .form-label { display: block; font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } .form-field { margin-bottom: 18px; } .form-field input[type="email"], .form-field input[type="password"], .form-field input[type="text"] { border: 1px solid var(--line); background: rgba(15, 23, 42, 0.02); padding: 14px 16px; font-size: 15px; } .form-field input:focus { border-color: var(--text); background: rgba(15, 23, 42, 0.04); } .signin-button { width: 100%; padding: 16px; font-size: 13px; letter-spacing: 0.3em; } .form-toggle { text-align: center; margin-top: 20px; font-size: 13px; color: var(--muted); letter-spacing: 0.02em; } .link-button { background: transparent; border: 0; padding: 0; color: var(--text); font-size: 13px; font-family: 'Inter', sans-serif; letter-spacing: 0.02em; text-transform: none; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); } .link-button:hover { background: transparent; color: var(--text); border: 0; text-decoration-color: var(--text); } .auth-error { min-height: 20px; margin-bottom: 8px; color: #ff8a73; font-size: 13px; letter-spacing: 0.01em; } .auth-card { text-align: left; max-width: 380px; } .auth-card .display { font-size: 56px; text-align: center; margin-bottom: 8px; } .auth-card .auth-tagline { text-align: center; color: var(--muted); font-size: 13px; letter-spacing: 0.04em; margin: 0 0 36px; } /* === Start screen === */ .start-screen { flex: 1; display: grid; place-items: start center; padding: 60px 24px; background: radial-gradient(circle at 50% 30%, rgba(15, 23, 42, 0.04), transparent 60%), var(--bg); overflow-y: auto; min-height: 100vh; } .start-screen .start-card { margin-top: clamp(0px, 8vh, 80px); } .start-card { max-width: 600px; width: 100%; text-align: center; } .start-logo { display: block; margin: 0 auto 18px; width: 96px; height: 96px; } .start-card .display { font-size: clamp(64px, 12vw, 120px); margin-bottom: 14px; } .start-card p { color: var(--muted); font-size: 14px; letter-spacing: 0.04em; margin: 0 0 36px; } .start-card .start-button { font-size: 13px; padding: 16px 48px; letter-spacing: 0.3em; } .resume-banner { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; border: 1px solid var(--live); background: rgba(0, 255, 136, 0.06); margin-bottom: 22px; text-align: left; } .resume-banner button { padding: 10px 18px; font-size: 11px; } @media (max-width: 600px) { .resume-banner { flex-direction: column; align-items: stretch; gap: 12px; } } /* === Hero join input (Kahoot-style: PIN front and center) === */ .join-hero { display: flex; flex-direction: column; align-items: stretch; gap: 14px; max-width: 360px; margin: 0 auto; } .join-hero-label { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: var(--muted); text-align: center; } .join-hero input { font-family: 'Barlow Condensed', sans-serif !important; font-weight: 700 !important; font-size: 56px !important; letter-spacing: 0.22em !important; text-align: center !important; text-transform: uppercase; border: 1px solid var(--line-strong) !important; background: rgba(15, 23, 42, 0.02) !important; padding: 18px 0 !important; color: var(--text); caret-color: var(--text); } .join-hero input::placeholder { color: var(--muted-2); letter-spacing: 0.22em; } .join-hero input:focus { border-color: var(--text) !important; background: rgba(15, 23, 42, 0.05) !important; } .join-hero-go { font-size: 14px; padding: 18px 28px; letter-spacing: 0.3em; } .host-divider { text-align: center; margin: 32px 0 18px; font-family: 'Barlow Condensed', sans-serif; font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--muted-2); } .extra-links { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); } .extra-links a { padding: 4px 0; } .ghost-button { display: inline-block; background: transparent; border: 1px solid var(--line); color: var(--muted); padding: 12px 22px; font-size: 12px; letter-spacing: 0.22em; } .ghost-button:hover:not(:disabled) { background: transparent; color: var(--text); border-color: var(--text); } @media (max-width: 600px) { .join-hero input { font-size: 44px !important; } } .start-details { margin-top: 24px; text-align: left; max-width: 380px; margin-left: auto; margin-right: auto; } .start-details summary { cursor: pointer; color: var(--muted); font-family: 'Barlow Condensed', sans-serif; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; text-align: center; padding: 8px; } .start-details summary:hover { color: var(--text); } .start-details-grid { display: grid; gap: 10px; margin-top: 14px; } .start-details-grid input { border: 1px solid var(--line); padding: 10px 14px; font-size: 14px; background: rgba(15, 23, 42, 0.02); } /* === App shell === */ .app { display: flex; flex-direction: column; height: 100vh; width: 100%; overflow: hidden; } .app-header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; padding: 0 24px; height: 60px; border-bottom: 1px solid var(--line); flex-shrink: 0; } .app-header .right { display: flex; align-items: center; gap: 12px; justify-self: end; } .ctrl-btn { padding: 10px 16px; font-size: 11px; letter-spacing: 0.22em; } .ctrl-btn[data-on="false"] { background: var(--warn); border-color: var(--warn); color: #fff; } .ctrl-btn[data-on="false"]:hover:not(:disabled) { background: transparent; color: var(--warn); border-color: var(--warn); } .tabs { display: flex; align-items: center; height: 100%; justify-self: center; } .tab { background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 0 22px; height: 60px; font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; } .tab:hover:not(.active) { color: var(--text); background: transparent; border-color: transparent; } .tab.active { color: var(--text); border-bottom-color: var(--text); } .tab .badge { margin-left: 8px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500; color: var(--muted); letter-spacing: 0; } .tab.active .badge { color: var(--live); } .app-main { flex: 1; position: relative; overflow: hidden; min-height: 0; } .tab-panel { position: absolute; inset: 0; display: none; overflow-y: auto; -webkit-overflow-scrolling: touch; } .tab-panel.active { display: block; } /* === LIITUMINE tab === */ .join-display { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 32px; text-align: center; } .join-display .eyebrow { margin-bottom: 16px; } .qr-canvas-huge { background: white; padding: 16px; display: grid; place-items: center; margin-bottom: 28px; } .qr-canvas-huge canvas, .qr-canvas-huge img { display: block; } .room-code-huge { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: clamp(120px, 18vw, 220px); letter-spacing: 0.05em; line-height: 0.8; margin-bottom: 20px; } .join-url-display { font-size: 14px; color: var(--muted); margin-bottom: 36px; word-break: break-all; max-width: 600px; } .student-counter-huge { display: flex; align-items: baseline; gap: 14px; font-family: 'Barlow Condensed', sans-serif; border-top: 1px solid var(--line); padding-top: 24px; min-width: 280px; justify-content: center; } .student-counter-huge strong { font-size: 56px; font-weight: 700; line-height: 1; letter-spacing: 0.02em; } .student-counter-huge span { font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); } /* === TUND (lesson) tab === */ .lesson-grid { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr auto; width: 100%; min-height: 100%; } .lesson-input-bar { position: sticky; bottom: 0; z-index: 5; } .steps-review { position: sticky; bottom: 0; z-index: 5; } .step-nav { position: sticky; bottom: 0; z-index: 5; } .lesson-video { grid-column: 1; grid-row: 1; background: #000; position: relative; overflow: hidden; } .lesson-video iframe { border: 0; width: 100%; height: 100%; display: block; } .lesson-video .video-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted-2); font-family: 'Barlow Condensed', sans-serif; font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase; } .lesson-sidebar { grid-column: 1; grid-row: 1; border: 0; padding: 24px 28px 32px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; align-content: start; background: var(--bg); max-width: 1400px; width: 100%; margin: 0 auto; } .lesson-sidebar .sidebar-card { min-width: 0; } .lesson-sidebar .join-card-mini { grid-column: 1 / -1; max-width: 480px; } .sidebar-card { border: 1px solid var(--line); padding: 16px; display: flex; flex-direction: column; gap: 12px; } .sidebar-card.intervention { border-color: var(--warn); background: rgba(255, 85, 56, 0.08); } .classes-card { display: flex; flex-direction: column; gap: 10px; } .classes-card-head { display: flex; justify-content: space-between; align-items: baseline; } .classes-card-head .mono { font-size: 11px; color: var(--muted); letter-spacing: 0.04em; } .classes-rows { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .class-row { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 10px; padding: 6px 0; } .class-row-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 16px; letter-spacing: 0.04em; } .class-row-bar { display: flex; height: 8px; border: 1px solid var(--line); background: var(--color-surface-raised); overflow: hidden; } .class-row-bar .seg { height: 100%; } .class-row-bar .seg-yes { background: var(--color-status-success); } .class-row-bar .seg-mid { background: var(--color-status-warning); } .class-row-bar .seg-no { background: var(--color-status-danger); } .class-row-meta { font-size: 10px; color: var(--muted); letter-spacing: 0.02em; white-space: nowrap; } .comments-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; max-height: 220px; overflow-y: auto; } .comments-list li { font-size: 13px; line-height: 1.45; color: var(--text); padding: 8px 10px; border-left: 2px solid var(--line-strong); background: rgba(15, 23, 42, 0.03); } .join-card-mini { display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: center; } .qr-canvas-small { background: white; padding: 4px; width: 92px; height: 92px; display: grid; place-items: center; } .qr-canvas-small canvas, .qr-canvas-small img { display: block; max-width: 100%; height: auto; } .room-code-small { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 32px; letter-spacing: 0.06em; line-height: 1; } .student-counter-mini { font-family: 'Barlow Condensed', sans-serif; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-top: 4px; } .student-counter-mini strong { font-size: 16px; letter-spacing: 0.04em; color: var(--text); margin-right: 6px; } .current-exercise { font-family: 'Barlow Condensed', sans-serif; font-weight: 500; font-size: 22px; line-height: 1.25; letter-spacing: 0.01em; padding: 12px 0; min-height: 50px; } .current-exercise.empty { color: var(--muted-2); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; font-weight: 500; } .mini-totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .mini-tile { display: flex; flex-direction: column; gap: 4px; padding: 10px; border: 1px solid var(--line); } .mini-tile .num { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 28px; line-height: 1; } .mini-tile .label { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); } .mini-tile.maybe .num { color: #b8b8b8; } .mini-tile.no .num { color: #5a5a5a; } .polar-wrap { position: relative; border: 1px solid var(--line); padding: 14px; margin-top: 4px; aspect-ratio: 1 / 1; max-height: 360px; } .polar-wrap canvas { width: 100% !important; height: 100% !important; } .polar-empty { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: var(--muted-2); font-family: 'Barlow Condensed', sans-serif; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; pointer-events: none; } .polar-wrap.has-data .polar-empty { display: none; } .lesson-input-bar { grid-column: 1; grid-row: 2; display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--line); align-items: stretch; background: var(--bg); } .steps-review { grid-column: 1; grid-row: 2; border-top: 1px solid var(--line); padding: 18px 22px; background: var(--bg-2); display: flex; flex-direction: column; gap: 14px; max-height: 50vh; overflow-y: auto; } .steps-review.show + .lesson-input-bar { display: none; } .steps-review-head { display: flex; justify-content: space-between; align-items: baseline; } .steps-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .steps-list li { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; } .steps-list .num { font-family: 'JetBrains Mono', monospace; font-size: 14px; color: var(--muted); letter-spacing: 0.05em; } .steps-list input { border: 1px solid var(--line); background: rgba(15, 23, 42, 0.03); padding: 10px 14px; font-size: 14px; } .steps-list input:focus { border-color: var(--text); } .steps-list .remove { background: transparent; border: 1px solid var(--line); color: var(--muted); padding: 8px 12px; font-size: 14px; cursor: pointer; } .steps-list .remove:hover { background: var(--warn); border-color: var(--warn); color: #fff; } .steps-review-actions { display: flex; justify-content: space-between; align-items: center; padding-top: 6px; border-top: 1px solid var(--line); } .step-nav { grid-column: 1; grid-row: 2; display: flex; align-items: center; gap: 14px; padding: 14px 22px; border-top: 1px solid var(--line); background: var(--bg-2); } .step-nav .eyebrow { font-size: 12px; letter-spacing: 0.28em; } .lesson-input-bar textarea { flex: 1 1 240px; min-width: 0; } .lesson-input-bar button { flex: 0 0 auto; } .lesson-input-bar textarea { border: 1px solid var(--line); padding: 12px 14px; font-size: 15px; height: 48px; min-height: 48px; max-height: 120px; } .lesson-input-bar textarea:focus { border-color: var(--text); } .lesson-input-bar button { padding: 0 28px; min-height: 48px; } .lesson-input-bar .hint { position: absolute; pointer-events: none; } @media (max-width: 900px) { .lesson-grid { grid-template-columns: 1fr; grid-template-rows: 1fr auto auto; } .lesson-sidebar { grid-column: 1; grid-row: 2; border-left: 0; border-top: 1px solid var(--line); max-height: 280px; } .lesson-input-bar { grid-row: 3; } } /* === ANALÜÜTIKA tab === */ .analytics-grid { display: grid; grid-template-columns: 1.4fr 1fr; width: 100%; height: 100%; overflow: hidden; } .analytics-cell { padding: 28px 32px; overflow-y: auto; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 24px; } .analytics-cell:last-child { border-right: 0; } .totals-large { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); } .totals-large .total-tile { padding: 22px 18px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; } .totals-large .total-tile:last-child { border-right: 0; } .totals-large .label { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); } .totals-large .num { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 64px; line-height: 0.95; } .totals-large .total-tile.maybe .num { color: #b8b8b8; } .totals-large .total-tile.no .num { color: #5a5a5a; } .chart-wrap-large { flex: 1; min-height: 280px; border: 1px solid var(--line); padding: 20px; } .stat-rows { display: flex; flex-direction: column; border: 1px solid var(--line); } .stat-row { display: flex; justify-content: space-between; align-items: baseline; padding: 18px 22px; border-bottom: 1px solid var(--line); } .stat-row:last-child { border-bottom: 0; } .stat-row .label { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .stat-row .num { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 36px; line-height: 1; } @media (max-width: 900px) { .analytics-grid { grid-template-columns: 1fr; grid-template-rows: 1fr auto; overflow-y: auto; } .analytics-cell { border-right: 0; border-bottom: 1px solid var(--line); } .analytics-cell:last-child { border-bottom: 0; } } /* === Student layout (mobile-first) === */ .student-shell { max-width: 720px; margin: 0 auto; padding: 20px 16px 60px; height: auto; min-height: 100vh; overflow-y: auto; } body.student-body { overflow-y: auto; height: auto; } .student-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 20px; gap: 16px; } .student-header .wordmark { font-size: 16px; } .student-header .wordmark small { font-size: 10px; } .student-video { aspect-ratio: 16/9; background: var(--bg-2); border: 1px solid var(--line); margin-bottom: 22px; position: relative; overflow: hidden; } .student-video iframe { border: 0; width: 100%; height: 100%; display: block; } .student-exercise { font-family: 'Barlow Condensed', sans-serif; font-weight: 500; font-size: 26px; line-height: 1.25; text-align: center; padding: 28px 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); min-height: 120px; display: flex; align-items: center; justify-content: center; margin-bottom: 22px; letter-spacing: 0.01em; } .student-exercise.empty { color: var(--muted-2); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; } .student-buttons { display: grid; gap: 10px; } .student-buttons button { font-size: 14px; padding: 20px 22px; letter-spacing: 0.28em; display: flex; align-items: center; justify-content: space-between; gap: 16px; text-align: left; } .student-buttons button .num { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); letter-spacing: 0.05em; font-weight: 500; text-transform: none; } .student-buttons button:hover:not(:disabled) .num { color: var(--bg); } .student-status { text-align: center; margin-top: 22px; font-family: 'Barlow Condensed', sans-serif; font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--muted); min-height: 18px; font-weight: 500; } .student-status.ok { color: var(--live); } /* === Student step list (parallel voting) === */ .student-steps-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .student-step { border: 1px solid var(--line); padding: 16px; display: flex; flex-direction: column; gap: 12px; background: rgba(15, 23, 42, 0.02); } .student-step.answered { border-color: var(--line-strong); } .student-step.a-yes { border-color: rgba(15, 23, 42, 0.85); background: rgba(15, 23, 42, 0.06); } .student-step.a-unsure { border-color: #888; background: rgba(136,136,136,0.08); } .student-step.a-no { border-color: var(--warn); background: rgba(255, 85, 56, 0.06); } .student-step-text { font-family: 'Barlow Condensed', sans-serif; font-size: 18px; line-height: 1.3; font-weight: 500; } .student-step-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .student-step-buttons button { padding: 12px 8px; font-size: 11px; letter-spacing: 0.18em; border: 1px solid var(--line); background: transparent; color: var(--muted); } .student-step-buttons button:hover { border-color: var(--text); color: var(--text); background: transparent; } .student-step.a-yes .student-step-buttons button[data-answer="yes"] { background: var(--text); color: var(--bg); border-color: var(--text); } .student-step.a-unsure .student-step-buttons button[data-answer="unsure"] { background: #888; color: var(--bg); border-color: #888; } .student-step.a-no .student-step-buttons button[data-answer="no"] { background: var(--warn); color: #fff; border-color: var(--warn); } .class-picker { border: 1px solid var(--color-brand-student); background: var(--color-brand-student-subtle); padding: 18px 18px 22px; margin-bottom: 22px; } .class-picker .eyebrow { color: var(--color-brand-student); display: block; margin-bottom: 12px; } .class-picker-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; } .class-pick-btn { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 22px; letter-spacing: 0.05em; padding: 18px 14px; background: var(--color-surface-card); color: var(--color-brand-student); border: 1px solid var(--color-brand-student); } .class-pick-btn:hover:not(:disabled) { background: var(--color-brand-student); color: var(--color-text-inverse); border-color: var(--color-brand-student); } .student-comment { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 18px; } .student-comment summary { cursor: pointer; color: var(--muted); font-family: 'Barlow Condensed', sans-serif; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; } .student-comment summary:hover { color: var(--text); } .student-comment textarea { margin-top: 12px; border: 1px solid var(--line); padding: 12px; font-size: 14px; background: rgba(15, 23, 42, 0.02); } .student-comment button { margin-top: 10px; } .join-card { text-align: center; } .join-card .display { font-size: 48px; margin-bottom: 14px; } .join-card .join-input { font-family: 'Barlow Condensed', sans-serif !important; font-weight: 700 !important; font-size: 56px !important; letter-spacing: 0.18em !important; text-align: center !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; padding: 16px 0 !important; background: transparent !important; } .join-card .join-input:focus { border-bottom-color: var(--text) !important; } .join-card button { margin-top: 24px; } /* =========================== /loo — Teacher prep flow =========================== */ .loo-body { background: var(--color-surface-page); color: var(--text); } .loo-body .class-main { max-width: 1180px; margin: 0 auto; padding: 32px 24px 80px; } .loo-phase { display: block; } .loo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 24px 0; } @media (max-width: 720px) { .loo-grid { grid-template-columns: 1fr; } } .loo-block { background: var(--color-surface-card, #ffffff); border: 1px solid var(--line); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 10px; } .loo-block input[type="text"], .loo-block textarea { border: 1px solid var(--line); background: #fff; color: var(--text); border-radius: 10px; padding: 12px 14px; font: inherit; font-size: 15px; width: 100%; box-sizing: border-box; } .loo-block textarea { resize: vertical; min-height: 200px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; line-height: 1.6; } .loo-block input:focus, .loo-block textarea:focus { outline: 2px solid var(--accent, #0369A1); outline-offset: 1px; } .loo-doc { margin-top: 8px; } .loo-hint { color: var(--muted); font-size: 12px; margin: 0; } .loo-actions { display: flex; gap: 12px; align-items: center; margin-top: 18px; flex-wrap: wrap; } .loo-actions button { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; padding: 14px 22px; border-radius: 10px; border: 1px solid var(--line-strong); background: #ffffff; color: var(--text); cursor: pointer; } .loo-actions button.primary { background: var(--brand-teacher, #1E3A5F); border-color: var(--brand-teacher, #1E3A5F); color: #ffffff; } .loo-actions button.primary:hover { filter: brightness(1.08); } /* ----- Review phase: problem cards ----- */ .loo-problems { display: flex; flex-direction: column; gap: 16px; margin: 18px 0 24px; } .loo-problem-card { background: #ffffff; border: 1px solid var(--line); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 14px; } .loo-problem-head { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; } .loo-problem-num { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 22px; color: var(--brand-teacher, #1E3A5F); background: rgba(30, 58, 95, 0.08); padding: 6px 12px; border-radius: 8px; letter-spacing: 0.06em; } .loo-problem-text { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 14px; line-height: 1.5; resize: vertical; width: 100%; box-sizing: border-box; background: #fff; } .loo-problem-remove { background: transparent; border: 1px solid var(--line); border-radius: 8px; width: 32px; height: 32px; font-size: 18px; color: var(--muted); cursor: pointer; } .loo-problem-remove:hover { color: #EF4444; border-color: #EF4444; } .loo-steps { border-top: 1px dashed var(--line); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; } .loo-step-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; counter-reset: step; } .loo-step-row { display: grid; grid-template-columns: 28px 1fr auto auto auto; gap: 8px; align-items: center; } .loo-step-up, .loo-step-down { background: transparent; border: 1px solid var(--line); border-radius: 6px; width: 26px; height: 26px; font-size: 14px; color: var(--muted); cursor: pointer; font-family: inherit; line-height: 1; } .loo-step-up:hover:not(:disabled), .loo-step-down:hover:not(:disabled) { color: var(--text); border-color: var(--text); } .loo-step-up:disabled, .loo-step-down:disabled { opacity: 0.3; cursor: not-allowed; } .loo-step-row::before { counter-increment: step; content: counter(step) "."; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; color: var(--accent, #0369A1); text-align: right; font-size: 14px; } .loo-step-row input[type="text"] { border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; font: inherit; font-size: 14px; background: #fff; } .loo-step-row input:focus { outline: 2px solid var(--accent, #0369A1); outline-offset: 1px; } .loo-step-remove { background: transparent; border: 1px solid var(--line); border-radius: 6px; width: 26px; height: 26px; font-size: 14px; color: var(--muted); cursor: pointer; } .loo-step-remove:hover { color: #EF4444; border-color: #EF4444; } .loo-step-actions { display: flex; gap: 8px; flex-wrap: wrap; } .loo-step-add, .loo-step-regen { background: transparent; border: 1px dashed var(--line-strong); border-radius: 8px; padding: 7px 12px; font-size: 12px; font-family: 'Barlow Condensed', sans-serif; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); cursor: pointer; } .loo-step-add:hover, .loo-step-regen:hover { color: var(--text); border-color: var(--text); } /* ----- Done phase: QR grid ----- */ .loo-qr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin: 24px 0; } .loo-qr-card { background: #ffffff; border: 1px solid var(--line); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; } .loo-qr-num { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 26px; color: var(--brand-teacher, #1E3A5F); letter-spacing: 0.08em; } .loo-qr-text { font-size: 13px; color: var(--text); line-height: 1.5; min-height: 38px; } .loo-qr-canvas { background: #fff; padding: 10px; border: 1px solid var(--line); border-radius: 10px; display: inline-flex; } .loo-qr-canvas img, .loo-qr-canvas canvas { display: block; } .loo-qr-link { font-size: 11px; color: var(--muted); word-break: break-all; } .loo-qr-steps { width: 100%; border-top: 1px dashed var(--line); padding-top: 10px; text-align: left; } .loo-qr-steps ol { margin: 6px 0 0; padding-left: 18px; font-size: 12px; line-height: 1.5; color: var(--muted); } /* Error toast */ .loo-error { background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.4); color: #B91C1C; padding: 12px 16px; border-radius: 10px; margin-top: 16px; font-size: 13px; } /* Mobile compaction */ @media (max-width: 600px) { .loo-body .class-header { flex-wrap: wrap; gap: 8px; padding: 12px 16px; } .loo-body .class-main { padding: 20px 14px 60px; } .loo-problem-head { grid-template-columns: auto 1fr; } .loo-problem-remove { grid-column: 1 / -1; justify-self: end; } } /* =========================== /lesson — koondvaade (MVP per Arendusnõuete koond) =========================== */ /* Response rate */ .response-rate-card { background: #ffffff; border: 1px solid var(--line); border-radius: 14px; padding: 18px 22px; display: grid; grid-template-columns: 1fr; gap: 12px; } .response-rate-line { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 22px; letter-spacing: 0.02em; color: var(--text); margin-top: 4px; } .response-rate-bar { height: 8px; background: rgba(15, 23, 42, 0.06); border-radius: 999px; overflow: hidden; } .response-rate-fill { display: block; height: 100%; background: linear-gradient(90deg, #1E3A5F 0%, #0369A1 100%); transition: width 600ms cubic-bezier(.2,.8,.2,1); } /* Per-problem cards */ .lesson-problems-list { display: flex; flex-direction: column; gap: 16px; } .lesson-problem-card { background: #ffffff; border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; } .lesson-problem-head { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; } .lesson-problem-num { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 22px; color: var(--brand-teacher, #1E3A5F); background: rgba(30, 58, 95, 0.08); padding: 6px 12px; border-radius: 8px; letter-spacing: 0.06em; white-space: nowrap; } .lesson-problem-text { margin: 0; font-family: inherit; font-weight: 500; font-size: 17px; line-height: 1.45; letter-spacing: 0; text-transform: none; color: var(--text); } /* Step list with traffic light */ .lesson-step-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; border-top: 1px dashed var(--line); padding-top: 14px; } .lesson-step { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 10px; background: rgba(15, 23, 42, 0.025); } .step-row-head { display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 12px; } .step-class-row { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 28px; } .class-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.7); border: 1px solid var(--line); font-size: 11px; } .class-pill .class-pill-light { width: 8px; height: 8px; border-radius: 999px; background: #94A3B8; } .class-pill.bucket-ok .class-pill-light { background: #22C55E; } .class-pill.bucket-warn .class-pill-light { background: #FACC15; } .class-pill.bucket-alert .class-pill-light { background: #EF4444; } .class-pill .class-pill-name { font-weight: 600; color: var(--text); } .class-pill .class-pill-pct { color: var(--muted); } .class-pill.bucket-alert { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.3); } .class-pill.bucket-warn { background: rgba(250, 204, 21, 0.10); border-color: rgba(250, 204, 21, 0.35); } .class-pill.bucket-ok { background: rgba(34, 197, 94, 0.08); border-color: rgba(34, 197, 94, 0.28); } .lesson-step .step-light { width: 12px; height: 12px; border-radius: 999px; background: #94A3B8; box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.18); } .lesson-step.bucket-ok .step-light { background: #22C55E; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18); } .lesson-step.bucket-warn .step-light { background: #FACC15; box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.22); } .lesson-step.bucket-alert .step-light { background: #EF4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.22); } .lesson-step.bucket-alert { background: rgba(239, 68, 68, 0.06); border: 1px solid rgba(239, 68, 68, 0.18); } .lesson-step.bucket-warn { background: rgba(250, 204, 21, 0.08); border: 1px solid rgba(250, 204, 21, 0.24); } .lesson-step.bucket-ok { background: rgba(34, 197, 94, 0.06); border: 1px solid rgba(34, 197, 94, 0.18); } .lesson-step .step-text { font-size: 14px; line-height: 1.5; color: var(--text); } .lesson-step .step-meta { font-size: 12px; color: var(--muted); white-space: nowrap; } .lesson-step-empty, .lesson-empty-state { color: var(--muted); font-size: 13px; font-style: italic; padding: 8px 0; } /* Legend */ .grid-section-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; } .grid-legend { display: inline-flex; gap: 12px; font-size: 11px; color: var(--muted); } .grid-legend .leg { display: inline-flex; align-items: center; gap: 6px; } .grid-legend .leg::before { content: ""; width: 10px; height: 10px; border-radius: 999px; display: inline-block; } .grid-legend .leg-correct::before { background: #22C55E; } .grid-legend .leg-partial::before { background: #FACC15; } .grid-legend .leg-wrong::before { background: #EF4444; } /* Demo seed card */ .lesson-seed-card { display: flex; justify-content: space-between; align-items: center; gap: 16px; background: rgba(3, 105, 161, 0.04); border: 1px dashed rgba(3, 105, 161, 0.3); border-radius: 14px; padding: 16px 22px; flex-wrap: wrap; } .lesson-seed-card button.primary { background: var(--accent, #0369A1); color: #fff; border: none; padding: 12px 20px; border-radius: 8px; font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; cursor: pointer; } .lesson-seed-card button.primary:disabled { opacity: 0.6; cursor: not-allowed; } @media (max-width: 600px) { .step-row-head { grid-template-columns: 12px 1fr; } .step-row-head .step-meta { grid-column: 1 / -1; padding-left: 24px; } .step-class-row { padding-left: 24px; } .lesson-seed-card { flex-direction: column; align-items: stretch; } } /* =========================== /loo — Õpilasevaate eelvaade (FR-15) =========================== */ .loo-problem-head { grid-template-columns: auto 1fr auto auto; } .loo-problem-preview { background: transparent; border: 1px solid var(--line); border-radius: 8px; width: 32px; height: 32px; font-size: 16px; color: var(--muted); cursor: pointer; } .loo-problem-preview:hover { color: var(--brand-teacher, #1E3A5F); border-color: var(--brand-teacher, #1E3A5F); } .preview-modal-content { max-width: 480px; width: 92vw; max-height: 80vh; overflow-y: auto; } .preview-problem { background: rgba(91, 33, 182, 0.05); border: 1px solid rgba(91, 33, 182, 0.2); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; } .preview-problem-text { font-size: 15px; line-height: 1.5; margin: 6px 0 0; color: var(--text); } .preview-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .preview-step { display: grid; grid-template-columns: 24px 1fr; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; } .preview-step-num { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; color: var(--accent, #0369A1); font-size: 16px; } .preview-step-text { font-size: 14px; line-height: 1.4; margin-bottom: 8px; color: var(--text); } .preview-step-buttons { display: flex; gap: 6px; flex-wrap: wrap; } .preview-step-buttons button { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 11px; color: var(--muted); cursor: not-allowed; flex: 1; min-width: 130px; } /* =========================== /lesson — kommentaarid (FR-22/FR-27) =========================== */ .lesson-comments { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; } .lesson-comments-empty { color: var(--muted); font-style: italic; font-size: 13px; padding: 12px 0; } .lesson-comment { background: #ffffff; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; } .lesson-comment-meta { font-size: 10px; color: var(--muted); letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 6px; } .lesson-comment-text { font-size: 14px; line-height: 1.5; color: var(--text); } /* =========================== /loo — kuvamisrežiimi dropdown (FR-13/14) =========================== */ .loo-mode-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: rgba(91, 33, 182, 0.04); border: 1px solid rgba(91, 33, 182, 0.16); border-radius: 10px; } .loo-mode-label { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .loo-mode-select { flex: 1; border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 7px 10px; font: inherit; font-size: 13px; color: var(--text); cursor: pointer; } .loo-mode-select:focus { outline: 2px solid var(--accent, #0369A1); outline-offset: 1px; } /* =========================== Õpilane — Teema-režiim (FR-13) =========================== */ .student-theme-row { padding: 0; background: transparent; } .theme-pick-btn { width: 100%; text-align: left; background: #ffffff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; font: inherit; font-size: 15px; color: var(--text); cursor: pointer; transition: all 150ms; } .theme-pick-btn:hover { border-color: #EF4444; background: rgba(239, 68, 68, 0.04); color: #B91C1C; } .theme-pick-btn:active { transform: scale(0.98); } .theme-ok-btn { width: 100%; background: #22C55E; color: #fff; border: 0; border-radius: 12px; padding: 14px 16px; font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; margin-top: 8px; } .theme-ok-btn:hover { filter: brightness(1.05); } .theme-ok-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* /loo — kool select dropdown */ .loo-select { border: 1px solid var(--line); background: #fff; color: var(--text); border-radius: 10px; padding: 12px 14px; font: inherit; font-size: 15px; width: 100%; box-sizing: border-box; cursor: pointer; } .loo-select:focus { outline: 2px solid var(--accent, #0369A1); outline-offset: 1px; } /* /loo — klasside checkbox-võre */ .classes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; } .classes-empty { grid-column: 1 / -1; padding: 14px 12px; text-align: center; color: var(--muted); font-size: 13px; font-style: italic; background: rgba(15, 23, 42, 0.025); border: 1px dashed var(--line); border-radius: 8px; } .class-check { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; background: #fff; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-size: 14px; transition: all 120ms; user-select: none; } .class-check input[type="checkbox"] { margin: 0; accent-color: var(--brand-teacher, #1E3A5F); cursor: pointer; } .class-check:hover { border-color: var(--brand-teacher, #1E3A5F); } .class-check:has(input:checked) { background: var(--brand-teacher, #1E3A5F); border-color: var(--brand-teacher, #1E3A5F); color: #fff; } .class-check span { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; letter-spacing: 0.05em; } /* =========================== /loo — konsolideeritud teemad (uus voog) =========================== */ .review-context { background: rgba(15, 23, 42, 0.03); border: 1px solid var(--line); border-radius: 14px; padding: 16px 22px; margin-bottom: 18px; } .review-context .eyebrow { margin-bottom: 8px; display: block; } .review-problems { list-style: decimal; padding-left: 22px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; } .review-problems li { margin-bottom: 4px; } .loo-teemad-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .loo-teema-row { display: grid; grid-template-columns: 32px 1fr auto auto auto; gap: 8px; align-items: center; padding: 8px 10px; background: rgba(15, 23, 42, 0.025); border-radius: 10px; } .loo-teema-num { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; color: var(--accent, #0369A1); font-size: 13px; text-align: center; } .loo-teema-input { border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; font: inherit; font-size: 14px; background: #fff; width: 100%; box-sizing: border-box; } .loo-teema-input:focus { outline: 2px solid var(--accent, #0369A1); outline-offset: 1px; } .loo-qr-card-single { max-width: 460px; margin: 0 auto; } .loo-qr-card-single .loo-qr-canvas { padding: 14px; }