/* static/css/app.css Saya. One stylesheet, no framework. Mobile first; desktop layouts start at 768px. All sizes in px; see the readability and zoom blocks at the end for large screens. */ /* ---------- Tokens: "saya" palette (shadow: cool paper, indigo ink and accent) ---------- */ :root { --paper: #F4F5F9; --ink: #171A2B; --muted: #5F6478; --caption: #8E92A6; --line: #DDE0EA; --line-soft: #E9EBF2; --card: #FFFFFF; --field: #EEF0F6; --accent: #3F3DBF; --ok: #2F7A5B; --ok-soft: #DFF1E7; --ok-deep: #23604A; --part: #B7791F; --part-soft: #F8ECD2; --part-deep: #8F5D14; --bad: #BF3B3B; --bad-soft: #F6DEDE; --bad-deep: #9A2E2E; --count-bg: #E8E8FA; --count-fg: #3F3DBF; --on-ink: #C3C5D6; --on-ink-dim: #7C7F96; --shadow: rgba(23, 26, 43, 0.12); --font-display: 'Fraunces', Georgia, serif; --font-body: 'IBM Plex Sans', system-ui, sans-serif; --r-card: 16px; /* phone card radius */ --r-btn: 14px; } /* ---------- Tokens: "warm" palette (alternative: cream paper, terracotta accent) ---------- Enable with data-theme="warm" on . */ :root[data-theme="warm"] { --paper: #FAF9F4; --ink: #1C1B18; --muted: #6B6A64; --caption: #9B9A93; --line: #E4E1D8; --line-soft: #EFEDE5; --card: #FFFFFF; --field: #F4F2EA; --accent: #B4562F; --ok: #3F6B4F; --ok-soft: #E3EDE5; --ok-deep: #2F5A3F; --part: #C08A2E; --part-soft: #F5EBD6; --part-deep: #9A6B1C; --bad: #B4453B; --bad-soft: #F3DEDB; --bad-deep: #9A3A31; --count-bg: #F4E7DA; --count-fg: #A9552B; --on-ink: #C9C7BC; --on-ink-dim: #7A7970; --shadow: rgba(28, 27, 24, 0.10); } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; } body { background: var(--paper); color: var(--ink); font-family: var(--font-body); -webkit-font-smoothing: antialiased; min-height: 100vh; } button, input, textarea { font: inherit; color: inherit; } button { cursor: pointer; } a { color: inherit; text-decoration: none; } :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } [hidden] { display: none !important; } /* the hidden attribute must beat display:flex on .page etc. */ @keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .is-live { animation: fade-in 300ms ease-out; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* ---------- Page shells ---------- */ .page { min-height: 100vh; display: flex; flex-direction: column; } .page--student { padding: 28px 24px 20px; max-width: 480px; margin: 0 auto; width: 100%; } .page--teacher { padding: 28px 20px 20px; } .spacer { flex-grow: 1; } /* ---------- Header pieces ---------- */ .brand { font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: 0.02em; color: var(--accent); } .brand--sm { font-size: 14px; } .subtitle { font-size: 13px; color: var(--muted); margin-top: 4px; } .h1 { margin: 0; font-family: var(--font-display); font-size: 26px; font-weight: 600; line-height: 1.25; } .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: var(--caption); } .topbar { display: flex; justify-content: space-between; align-items: flex-start; } .topbar__title { font-size: 17px; font-weight: 600; line-height: 1.25; margin-top: 4px; } .live-pill { display: flex; align-items: center; gap: 6px; padding-top: 4px; } .live-pill__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bad); } .live-pill__text { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--muted); } /* ---------- Student: three-state choice ---------- */ .choices { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; } .choice { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: var(--r-card); background: var(--card); border: 2px solid var(--line); text-align: left; transition: transform 100ms ease-in-out, border-color 150ms ease; } .choice:active { transform: scale(0.98); } .choice__icon { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .choice__icon--ok { background: var(--ok-soft); } .choice__icon--part { background: var(--part-soft); } .choice__icon--bad { background: var(--bad-soft); } .choice__text { display: flex; flex-direction: column; gap: 2px; } .choice__title { font-size: 17px; font-weight: 600; } .choice__sub { font-size: 13px; color: var(--muted); } .choice.is-selected--ok { border-color: var(--ok); } .choice.is-selected--part { border-color: var(--part); } .choice.is-selected--bad { border-color: var(--bad); } /* ---------- Student: A/B/C/D option ---------- */ .opt { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: var(--r-card); background: var(--card); border: 2px solid var(--line); text-align: left; transition: transform 100ms ease-in-out, border-color 150ms ease; } .opt:active { transform: scale(0.98); } .opt__badge { width: 40px; height: 40px; border-radius: 50%; background: var(--field); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 15px; flex-shrink: 0; transition: background 150ms ease, color 150ms ease; } .opt__text { font-size: 16px; font-weight: 500; } .opt.is-selected { border-color: var(--ink); } .opt.is-selected .opt__badge { background: var(--ink); color: var(--paper); } /* ---------- Form field ---------- */ .field { display: flex; flex-direction: column; gap: 8px; margin-top: 22px; } .field__label { font-size: 13px; color: var(--muted); } .field__input { resize: none; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 14px; background: var(--card); } .field__input:focus { outline: none; border-color: var(--ink); } /* ---------- Buttons ---------- */ .btn { display: block; width: 100%; padding: 15px; border: none; border-radius: var(--r-btn); font-size: 16px; font-weight: 600; text-align: center; transition: transform 100ms ease-in-out, background 150ms ease; } .btn:active { transform: scale(0.98); } .btn--primary { background: var(--accent); color: var(--paper); } .btn--primary:disabled { opacity: 0.4; cursor: not-allowed; } .btn--ghost { background: transparent; border: 1px solid var(--ink); color: var(--ink); padding: 13px; font-size: 14px; } .btn--ghost:hover { background: var(--field); } .btn--sm { width: auto; padding: 10px 14px; border-radius: 10px; font-size: 13px; } .actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; } .note { font-size: 12px; color: var(--caption); text-align: center; } /* ---------- Teacher: pulse + counts ---------- */ .board { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; } .pulse { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 26px 20px; display: flex; flex-direction: column; align-items: center; gap: 6px; } .pulse__label { font-size: 11px; color: var(--muted); letter-spacing: 0.04em; } .pulse__value { font-family: var(--font-display); font-size: 72px; font-weight: 600; line-height: 1; color: var(--ink); } .pulse__meta { font-size: 13px; color: var(--muted); } .stats { display: flex; flex-direction: column; gap: 10px; } .stat { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 15px 18px; display: flex; align-items: center; justify-content: space-between; } .stat__label { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; } .stat__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .stat__dot--ok { background: var(--ok); } .stat__dot--part { background: var(--part); } .stat__dot--bad { background: var(--bad); } .stat__value { font-family: var(--font-display); font-size: 22px; font-weight: 600; } .qr { display: none; /* phone: opened by the button */ background: var(--ink); border-radius: 20px; padding: 28px; flex-direction: column; align-items: center; justify-content: center; gap: 16px; } .qr.is-open { display: flex; } .qr__box { width: 132px; height: 132px; background: var(--paper); border-radius: 10px; display: flex; align-items: center; justify-content: center; } .qr__box img { width: 112px; height: 112px; display: block; } .qr__hint { font-size: 13px; color: var(--on-ink); text-align: center; } .qr__url { font-size: 12px; color: var(--on-ink-dim); font-family: ui-monospace, Menlo, monospace; } .only-desktop { display: none; } /* ---------- Teacher: AI analysis ---------- */ .gaps { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; } .gap { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 10px; transition: transform 200ms ease, box-shadow 200ms ease; } .gap__head { display: flex; align-items: center; justify-content: space-between; } .gap__idx { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--caption); } .gap__count { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--count-bg); color: var(--count-fg); } .gap__title { margin: 0; font-family: var(--font-display); font-size: 18px; font-weight: 600; line-height: 1.3; } .gap__desc { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; } .gap__rec { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line-soft); } .gap__rec-label { display: block; font-size: 11px; color: var(--caption); margin-bottom: 4px; } .gap__rec-text { margin: 0; font-size: 13px; line-height: 1.5; } .gap__rec .btn--sm { margin-top: 10px; } .footer-action { margin-top: 18px; } .empty { margin-top: 24px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 12px; max-width: 560px; } .empty__text { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.5; } .empty__row { display: flex; gap: 10px; flex-wrap: wrap; } .empty__row .btn { width: auto; padding: 12px 20px; font-size: 14px; } /* ---------- Teacher: before / after ---------- */ .story { display: flex; flex-direction: column; margin-top: 22px; } .story__card { border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 6px; } .story__card--before { background: var(--card); border: 1px solid var(--line); } .story__card--after { background: var(--card); border: 2px solid var(--ok); } .story__card--mid { background: var(--ink); color: var(--paper); gap: 8px; } .story__value { font-family: var(--font-display); font-size: 48px; font-weight: 600; line-height: 1; } .story__value--bad { color: var(--bad); } .story__value--ok { color: var(--ok); } .story__sub { font-size: 13px; color: var(--muted); } .story__detail { margin-top: 6px; font-size: 13px; color: var(--muted); } .story__detail strong { color: var(--ink); } .story__detail strong.ok { color: var(--ok); } .story__mid-title { font-family: var(--font-display); font-size: 18px; font-weight: 600; line-height: 1.35; } .story__mid-text { margin: 0; font-size: 13px; color: var(--on-ink); line-height: 1.55; } .story__arrow { height: 44px; display: flex; align-items: center; justify-content: center; } .story__arrow svg { display: block; } .story__arrow .arrow-h { display: none; } .quote { margin: 0; padding-top: 20px; text-align: center; font-family: var(--font-display); font-style: italic; font-size: 15px; line-height: 1.4; color: var(--muted); } /* ============================================================ Desktop, 768px and up ============================================================ */ @media (min-width: 768px) { .page--teacher { padding: 40px 56px; max-width: 1280px; margin: 0 auto; width: 100%; } .brand--sm { font-size: 15px; } .topbar__title { font-size: 20px; } .live-pill { gap: 10px; } .live-pill__dot { width: 8px; height: 8px; } .live-pill__text { font-size: 13px; } .h1--lg { font-size: 30px; } /* Pulse row */ .board { flex-direction: row; gap: 32px; margin-top: 36px; flex-grow: 1; } .pulse { flex: 1.1; border-radius: 20px; padding: 36px; justify-content: center; gap: 8px; } .pulse__label { font-size: 13px; } .pulse__value { font-size: 104px; } .pulse__meta { font-size: 14px; } .stats { flex: 1; gap: 14px; } .stat { border-radius: 16px; padding: 20px 22px; } .stat__label { gap: 12px; font-size: 15px; } .stat__value { font-size: 26px; } .qr { display: flex; flex: 0.75; } .only-desktop { display: block; } .only-phone { display: none !important; } .stats .btn--primary { margin-top: 6px; padding: 16px; font-size: 15px; } /* Analysis */ .gaps { flex-direction: row; gap: 20px; margin-top: 30px; flex-grow: 1; } .gap { flex: 1; border-radius: 18px; padding: 26px; gap: 14px; } .gap:hover { transform: translateY(-4px); box-shadow: 0 10px 24px var(--shadow); } .gap__idx { font-size: 12px; } .gap__count { font-size: 13px; } .gap__title { font-size: 20px; } .gap__desc { font-size: 14px; } .gap__rec { padding-top: 12px; } .gap__rec-label { font-size: 12px; margin-bottom: 6px; } .gap__rec .btn--sm { margin-top: 12px; } .footer-action { margin-top: 26px; display: flex; justify-content: flex-end; } .footer-action .btn { width: auto; padding: 15px 26px; font-size: 15px; } /* Before / after */ .story { flex-direction: row; align-items: stretch; margin-top: 44px; } .story__card { border-radius: 18px; padding: 30px; gap: 10px; flex: 1; } .story__card--mid { flex: 1.15; } .story__value { font-size: 56px; } .story__sub { font-size: 14px; } .story__detail { margin-top: 10px; } .story__mid-title { font-size: 20px; } .story__arrow { height: auto; width: 70px; } .story__arrow .arrow-v { display: none; } .story__arrow .arrow-h { display: block; } .quote { font-size: 18px; padding-top: 24px; } } /* ---------- Demo banner (only when session.is_demo) ---------- */ .demo-banner { background: var(--ink); color: var(--paper); font-size: 12px; text-align: center; padding: 6px 12px; } /* ---------- Teacher navigation ---------- */ .nav { border-bottom: 1px solid var(--line); background: var(--paper); } .nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 20px; max-width: 1280px; margin: 0 auto; width: 100%; } .nav__inner--sub { padding-top: 0; } .nav__group { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .nav__brand { font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: 0.02em; color: var(--accent); margin-right: 10px; } .nav__link, .nav__tab { font-size: 13px; font-weight: 500; color: var(--muted); padding: 7px 10px; border-radius: 10px; background: transparent; border: none; } .nav__link:hover, .nav__tab:hover { background: var(--field); color: var(--ink); } .nav__link.is-active { color: var(--ink); font-weight: 600; } .nav__tab { border: 1px solid var(--line); background: var(--card); } .nav__tab.is-active { border-color: var(--ink); color: var(--ink); font-weight: 600; } .nav__user { font-size: 13px; color: var(--caption); padding: 0 6px; } .nav__form { margin: 0; } /* ---------- Teacher: sessions table ---------- */ .table-wrap { margin-top: 22px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow-x: auto; } .table { width: 100%; border-collapse: collapse; font-size: 14px; } .table th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--caption); padding: 14px 18px; border-bottom: 1px solid var(--line); white-space: nowrap; } .table td { padding: 14px 18px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; } .table tr:last-child td { border-bottom: none; } .table__title { font-weight: 600; } .table__title:hover { color: var(--accent); } .table__sub { font-size: 12px; color: var(--muted); white-space: nowrap; } .table__num { text-align: right; font-family: var(--font-display); font-weight: 600; } .table th.table__num { font-family: var(--font-body); } .table__actions { white-space: nowrap; text-align: right; } .table__actions .nav__tab { display: inline-block; margin-left: 4px; } .status { display: inline-block; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--field); color: var(--muted); } .status--active, .status--intervention { background: var(--part-soft); color: var(--part-deep); } .status--analysis { background: var(--count-bg); color: var(--count-fg); } .status--completed { background: var(--ok-soft); color: var(--ok-deep); } @media (min-width: 768px) { .nav__inner { padding: 12px 56px; } .nav__inner--sub { padding-top: 0; } } /* ---------- Pupil pages: larger type for ages 10 to 15 ---------- */ .page--student .h1 { font-size: 28px; } .page--student .choice__title, .page--student .opt__text { font-size: 18px; } .page--student .choice__sub { font-size: 14px; } /* ---------- Print: recovery pack shows only the title and the three cards ---------- */ @media print { .nav, .btn, .demo-banner { display: none !important; } } /* ---------- Saya mark: inline SVG next to the wordmark ---------- */ .mark { width: 18px; height: 18px; flex-shrink: 0; } .nav__brand, .brand { display: inline-flex; align-items: center; gap: 7px; } .brand--sm .mark { width: 16px; height: 16px; } /* ---------- Language switcher ---------- */ .lang { display: flex; align-items: center; gap: 2px; margin: 0; flex-wrap: wrap; } .lang__btn { font-size: 12px; font-weight: 500; color: var(--caption); padding: 5px 7px; border-radius: 8px; background: transparent; border: none; } .lang__btn:hover { background: var(--field); color: var(--ink); } .lang__btn.is-active { color: var(--ink); font-weight: 600; background: var(--field); } .page--student .lang { justify-content: center; margin-top: 10px; } @media print { .lang { display: none !important; } } /* ---------- Readability: nothing under 12px. ---------- Teacher pages: body 15 / secondary 14 / captions 12. Pupil pages: labels 15, note 13. Dashboard is projected on a classroom wall: stats, QR hint and live pill get the biggest bump. */ body { font-size: 15px; } .subtitle, .field__label, .table { font-size: 14px; } .field__input { font-size: 15px; } .eyebrow, .gap__idx, .pulse__label, .table th { font-size: 12px; } .caption, .note, .gap__rec-label, .table__sub, .nav__user { font-size: 13px; } .nav__link, .nav__tab, .lang__btn { font-size: 14px; } .gap__desc, .gap__rec-text, .empty__text, .story__sub, .story__detail, .story__mid-text { font-size: 15px; line-height: 1.55; } .btn--ghost { font-size: 15px; } .btn--sm { font-size: 14px; } /* Pupils (phones, ages 10 to 15) */ .page--student .field__label { font-size: 15px; } .page--student .field__input { font-size: 16px; } /* 16px also stops iOS zooming into the textarea */ .page--student .note { font-size: 13px; } .page--student .subtitle { font-size: 14px; } .page--student .opt__badge { font-size: 16px; } /* Dashboard on a projector */ .live-pill__text { font-size: 13px; } .stat__label { font-size: 16px; } .stat__value { font-size: 26px; } .pulse__meta { font-size: 15px; } .qr__hint { font-size: 15px; } .qr__url { font-size: 13px; } @media (min-width: 768px) { .live-pill__text { font-size: 14px; } .stat__label { font-size: 18px; } .stat__value { font-size: 32px; } .pulse__label { font-size: 14px; } .pulse__meta { font-size: 16px; } .qr__box { width: 168px; height: 168px; } .qr__box img { width: 144px; height: 144px; } .qr__hint { font-size: 16px; } .gap__title { font-size: 22px; } .gap__desc, .gap__rec-text { font-size: 15px; } .h1--lg { font-size: 32px; } } /* ---------- Big screens and projectors ---------- Every size in this file is in px and tuned for a ~1366px laptop. On a 1920px screen the same UI looks small with wide empty margins. Rather than stretching the layout (long lines read badly), scale the whole page: a 1920px screen then renders like a 1536px one. Screen only; print unaffected. */ /* vh units are multiplied by zoom as well, so the 100vh body is divided back down to fit one screen. */ @media screen and (min-width: 1440px) { body { zoom: 1.12; min-height: calc(100vh / 1.12); } } @media screen and (min-width: 1700px) { body { zoom: 1.25; min-height: calc(100vh / 1.25); } } @media screen and (min-width: 2400px) { body { zoom: 1.5; min-height: calc(100vh / 1.5); } } /* ---------- Fit one screen ---------- .page was min-height:100vh with the nav stacked above it, so every teacher page scrolled by the nav's height. The body is now the 100vh column and the page fills the rest, so the live dashboard (the wall screen) fits without scrolling; pages with more content still grow and scroll normally. */ body { display: flex; flex-direction: column; } .page { min-height: 0; flex: 1 0 auto; } /* ---------- Nav right side: languages | account ---------- */ .nav__sep { width: 1px; height: 18px; background: var(--line); margin: 0 8px; flex-shrink: 0; } .nav__account { display: inline-flex; align-items: center; gap: 2px; } .nav__user { color: var(--ink); font-weight: 500; } .nav__user::before { content: "\1F464"; font-size: 12px; margin-right: 6px; opacity: 0.55; } .nav__link--strong { color: var(--ink); font-weight: 600; } @media (max-width: 767px) { .nav__sep { display: none; } } /* ---------- Sharing: dashboard QR actions + the share page (teacher/qr.html) ---------- */ .qr__actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 4px; } .qr__btn { font-size: 13px; font-weight: 600; color: var(--paper); padding: 8px 14px; border-radius: 10px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.25); } .qr__btn:hover { background: rgba(255, 255, 255, 0.2); } .qr__btn.is-done { background: var(--ok); border-color: var(--ok); } .share__body { display: flex; flex-direction: column; align-items: center; gap: 24px; margin-top: 24px; } .share__qr { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 20px; } .share__qr img { display: block; width: 260px; height: 260px; } .share__side { display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; max-width: 560px; } .share__hint { margin: 0; font-family: var(--font-display); font-size: 24px; font-weight: 600; } .share__or { margin: 0; font-size: 14px; color: var(--muted); } .share__url { margin: 0; font-family: ui-monospace, Menlo, monospace; font-size: 14px; word-break: break-all; color: var(--ink); } .share__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; width: 100%; } .share__actions .btn.is-done { background: var(--ok); color: var(--paper); } .share__back { margin-top: 8px; font-size: 14px; color: var(--muted); } .share__back:hover { color: var(--ink); } @media (min-width: 768px) { .share__body { flex-direction: row; align-items: center; justify-content: center; gap: 56px; margin-top: 40px; flex-grow: 1; } .share__qr img { width: 360px; height: 360px; } .share__side { align-items: flex-start; text-align: left; } .share__hint { font-size: 30px; } .share__actions { flex-direction: row; flex-wrap: wrap; } .share__actions .btn { width: auto; padding: 13px 20px; } } /* Print: an A4 poster with only title, QR and link */ @media print { .share__head .brand, .share__actions, .share__back, .share__or { display: none !important; } .share { padding: 0; } .share__body { flex-direction: column; align-items: center; gap: 24px; margin-top: 40px; } .share__qr { border: none; padding: 0; } .share__qr img { width: 440px; height: 440px; } .share__side { align-items: center; text-align: center; } .share__hint { font-size: 32px; } .share__url { font-size: 16px; } body { zoom: 1; } } /* ---------- Analysis: evidence quotes and the anonymous notes list ---------- */ .gap__quotes { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .gap__quote { font-size: 14px; line-height: 1.45; color: var(--ink); padding-left: 10px; border-left: 2px solid var(--count-bg); font-style: italic; } .notes { margin-top: 32px; } .notes__title { margin: 0 0 12px; font-family: var(--font-display); font-size: 20px; font-weight: 600; } .notes__list { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; } .note-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line-soft); font-size: 15px; line-height: 1.5; } .note-item:last-child { border-bottom: none; } .note-item .stat__dot { margin-top: 8px; } .stat__dot--answer { background: var(--caption); } .note-item__text { flex: 1; } .note-item__key { font-family: var(--font-display); font-weight: 600; color: var(--muted); } /* ---------- Lesson settings: delete block ---------- */ .danger { margin-top: 40px; max-width: 560px; padding-top: 24px; border-top: 1px solid var(--line); } .danger__title { margin: 0 0 6px; font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--bad); } .danger__form { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 14px; } .danger__check { display: flex; align-items: center; gap: 8px; font-size: 14px; } .btn--danger { background: var(--bad); color: var(--paper); } .btn--danger:hover { background: var(--bad-deep); } /* ---------- Teacher home: overview tiles above the lessons table ---------- */ .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; } .tile { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; min-width: 0; } .tile--wide { grid-column: 1 / -1; } .tile__value { font-family: var(--font-display); font-size: 34px; font-weight: 600; line-height: 1.1; } .tile__value--text { font-size: 22px; line-height: 1.3; } .tile__label { font-size: 13px; color: var(--muted); } .tile__bad { color: var(--bad); } .tile__ok { color: var(--ok); } .tile__arrow { color: var(--caption); font-size: 24px; margin: 0 6px; } @media (min-width: 768px) { .tiles { grid-template-columns: 1fr 1fr 1.6fr 2fr; gap: 16px; margin-top: 28px; } .tile--wide { grid-column: auto; } .tile { padding: 22px 24px; } .tile__value { font-size: 40px; } }