/* --------------------------------------------------------------------- เก่งไทย — Thai Flashcard Trainer Design direction: "study journal" — warm cream paper, deep jade ink, saffron accent (nods to Thai temple jade/marigold without leaning on red-gold cliché). Sarabun (self-hosted, var(--font-thai)) carries all Thai glyphs at a large, legible size; Fraunces gives headings a literary, non-generic voice; Work Sans handles UI text. ------------------------------------------------------------------- */ :root { --paper: #faf5e9; --paper-raised: #fffdf8; --ink: #23201a; --ink-soft: #6c6353; --ink-faint: #9a9080; --rule: #e4dabf; --rule-strong: #d3c5a2; --jade: #1f6f5c; --jade-ink: #123f34; --jade-soft: #dcece5; --saffron: #c97a1f; --saffron-soft: #f4e3c7; --clay: #a8461f; --clay-soft: #f3ddd0; --plum: #83486a; --plum-soft: #f0e1ea; --focus-ring: #123f34; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --shadow-card: 0 1px 2px rgba(35, 32, 26, 0.06), 0 12px 32px -18px rgba(35, 32, 26, 0.35); --shadow-pop: 0 20px 60px -20px rgba(18, 63, 52, 0.45); color-scheme: light; } /* ---------- Dark theme ---------- Toggled via [data-theme="dark"] on (set by the anti-FOUC inline script in index.html). Same token names as the light palette above are redefined here — every rule in this file already reads var(--paper)/ var(--ink)/etc., so the whole page repaints without touching component styles. Jade/saffron/clay/plum keep the tool's own identity but get dark-safe counterparts (Spec: "Kategorie-/Akzentfarben... für Dark Mode ebenfalls beide Varianten pflegen"). Kept in sync with ../thai-alphabet/ style.css, which shares this exact palette. */ html[data-theme="dark"] { --paper: #201d16; --paper-raised: #2a271d; --ink: #ece6d6; --ink-soft: #b7ae95; --ink-faint: #8f8870; --rule: #3d3828; --rule-strong: #59503a; --jade: #5fb89e; --jade-ink: #bfe8d9; --jade-soft: #24413a; --saffron: #e0a24f; --saffron-soft: #3d2e18; --clay: #d98b64; --clay-soft: #3d2519; --plum: #c98fae; --plum-soft: #38222f; --focus-ring: #ece6d6; color-scheme: dark; } * { box-sizing: border-box; } /* An author-stylesheet `display` declaration always wins over the browser's built-in `[hidden] { display: none }` rule, regardless of selector specificity — origin beats specificity in the cascade. Several elements here (.modal, .unverified-badge, etc.) declare their own `display` for when they're shown, and are toggled via the `hidden` attribute from script.js. This single global override guarantees `hidden` always means hidden, everywhere in this app. */ [hidden] { display: none !important; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; min-height: 100vh; background: var(--paper); color: var(--ink); font-family: "Work Sans", -apple-system, BlinkMacSystemFont, sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased; /* Defense-in-depth for 320-500px viewports (verified via CDP: no overflow found today, but nothing on this page needs horizontal scroll, so guard against future regressions at the document level). */ overflow-x: hidden; } .thai-input, [lang="th"] { font-family: var(--font-thai), "Work Sans", sans-serif; } /* Sarabun — portal-wide Thai standard (self-hosted WOFF2, looped schoolbook/official forms). Generous line-height + overflow: visible for tone/vowel stacks on consonant bases. */ h1, h2, h3 { font-family: "Fraunces", Georgia, serif; font-weight: 600; margin: 0; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--paper); padding: 0.75rem 1.25rem; border-radius: 0 0 var(--radius-sm) 0; z-index: 200; } .skip-link:focus { left: 0; } .sr-only, .icon-btn-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } button { font-family: inherit; } /* -------------------- page + masthead -------------------- Standardized 2-line header, same class names as the portal/web-countdown (see assets/css/portal.css) — kept in sync so this block can be copy-pasted into the next tool during rollout. Colors reuse this tool's own jade/ink tokens so it keeps its "study journal" identity instead of inheriting the portal's neutral rust accent. */ .page { max-width: 1080px; margin: 0 auto; } .masthead { max-width: 760px; margin: 0 auto; padding: 1.5rem 1.25rem 1.15rem; } .masthead-rule { border: none; border-top: 2px solid var(--ink); margin: 0 1.25rem 0; } @media (min-width: 810px) { .masthead-rule { max-width: 760px; margin: 0 auto; } } .masthead-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .masthead-brand { display: flex; align-items: center; gap: 0.7rem; min-width: 0; } .home-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; flex-shrink: 0; border-radius: 50%; color: var(--ink-soft); text-decoration: none; transition: background-color 0.12s ease, color 0.12s ease; } .home-icon:hover { background: var(--jade-soft); color: var(--jade-ink); } .home-icon:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .home-icon { transition: none; } } .brand-tile { width: 2.5rem; height: 2.5rem; border-radius: var(--radius-sm); background: var(--jade); color: var(--paper-raised); display: flex; align-items: center; justify-content: center; font-family: var(--font-thai), sans-serif; font-size: 1.15rem; font-weight: 700; flex-shrink: 0; line-height: 1.9; overflow: visible; } .brand-tile img { display: block; width: 1.25rem; height: 1.25rem; /* External SVGs do not inherit currentColor. Brand-tile is ink-on-paper inverted (dark tile / paper glyph). Force monochrome paint to match. */ filter: brightness(0) invert(1); } html[data-theme="dark"] .brand-tile img { /* Dark theme: --ink tile is light; keep icon dark. */ filter: brightness(0); } .brand-title { font-size: 1.25rem; color: var(--ink); /* Complex-script rendering (Kai.md): generous line-height + visible overflow so Thai tone marks/vowel signs above the consonant are never clipped, and no truncation since this title is always short. */ line-height: 1.8; overflow: visible; white-space: normal; min-width: 0; } .brand-title-sub { font-family: "Work Sans", sans-serif; font-weight: 500; font-size: 0.85rem; color: var(--ink-soft); } .masthead-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; } .theme-toggle { position: relative; width: 2.3rem; height: 2.3rem; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--rule-strong); border-radius: 50%; background: var(--paper-raised); color: var(--ink-soft); cursor: pointer; transition: border-color 0.12s ease, color 0.12s ease, transform 0.1s ease; } .theme-toggle:hover { border-color: var(--jade); color: var(--jade-ink); } .theme-toggle:active { transform: scale(0.94); } .theme-toggle:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .theme-icon { position: absolute; width: 1.1rem; height: 1.1rem; transition: opacity 0.15s ease, transform 0.15s ease; } .theme-icon--sun { opacity: 1; transform: scale(1) rotate(0deg); } .theme-icon--moon { opacity: 0; transform: scale(0.5) rotate(-40deg); } html[data-theme="dark"] .theme-icon--sun { opacity: 0; transform: scale(0.5) rotate(40deg); } html[data-theme="dark"] .theme-icon--moon { opacity: 1; transform: scale(1) rotate(0deg); } @media (prefers-reduced-motion: reduce) { .theme-toggle, .theme-icon { transition: none; } } .masthead-sub { margin: 0.4rem 0 0; font-size: 0.78rem; color: var(--ink-soft); } .icon-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.75rem; background: transparent; border: 1px solid var(--rule); border-radius: var(--radius-sm); color: var(--ink-soft); cursor: pointer; font-size: 0.82rem; font-weight: 600; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .icon-btn:hover { color: var(--jade-ink); border-color: var(--jade); background: var(--jade-soft); } .icon-btn--plain { border: none; padding: 0.4rem; } @media (min-width: 480px) { .icon-btn-label { position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal; display: inline; } } .icon { width: 1.1rem; height: 1.1rem; flex-shrink: 0; } .icon-sm { width: 0.9rem; height: 0.9rem; flex-shrink: 0; } /* -------------------- workspace -------------------- */ .workspace { max-width: 640px; margin: 0 auto; padding: 1.75rem 1.25rem 2.5rem; } .lesson-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 0.65rem; } .lesson-axis-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.45rem 0.75rem; margin: 0 0 0.15rem; } .lesson-eyebrow { margin: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--jade); } /* Second taxonomy axis (school-year) — deliberately different style from Level */ .grade-axis-label { margin: 0; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; text-transform: none; color: var(--ink-soft); padding: 0.12rem 0.45rem; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: transparent; } .lesson-title { font-size: 1.35rem; } .card-counter { margin: 0; font-size: 0.85rem; font-weight: 500; color: var(--ink-soft); white-space: nowrap; } .progress-track { width: 100%; height: 0.45rem; background: var(--rule); border-radius: 999px; overflow: hidden; } .progress-fill { height: 100%; background: linear-gradient(90deg, var(--jade), #2f9179); border-radius: 999px; transform-origin: left center; transition: transform 0.35s ease; width: 100%; } @media (prefers-reduced-motion: reduce) { .progress-fill { transition: none; } } /* -------------------- flashcard -------------------- */ .card-stage { margin: 1.5rem 0; } .flashcard { background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 1.5rem 1.5rem 1.25rem; min-height: 22rem; display: flex; flex-direction: column; animation: card-in 0.28s ease both; } @keyframes card-in { from { opacity: 0; transform: translateY(6px) scale(0.995); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { .flashcard { animation: none; } } /* Retriggered by script.js on Next/Prev/Shuffle/jump-to-card (see playCardTransition()) so switching cards reads as a deliberate reveal instead of an instant text swap. Same motion as the initial load-in, just re-armed via a class toggle + forced reflow. Skipped entirely under prefers-reduced-motion (checked in JS before the class is ever added, so no @media override is needed here). */ .flashcard.is-turning { animation: card-in 0.22s ease both; } .card-topline { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: 1.6rem; } .card-topline-center { display: flex; align-items: center; justify-content: center; gap: 0.5rem; flex: 1; min-width: 0; } .explain-topline { justify-content: flex-start; margin-bottom: 0.35rem; } .unverified-badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.28rem 0.6rem; border-radius: 999px; background: var(--plum-soft); color: var(--plum); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; cursor: help; } .mastery-badge { padding: 0.28rem 0.65rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; } .mastery-badge--mastered { background: var(--jade-soft); color: var(--jade-ink); } .mastery-badge--practice { background: var(--clay-soft); color: var(--clay); } .speak-btn { background: none; border: none; color: var(--ink-faint); cursor: pointer; padding: 0.25rem; border-radius: var(--radius-sm); flex-shrink: 0; transition: color 0.15s ease, transform 0.15s ease; } .speak-btn:hover:not(:disabled) { color: var(--jade); } .speak-btn[aria-pressed="true"], .speak-btn.is-speaking { color: var(--jade); } .speak-btn:active:not(:disabled) { transform: scale(0.92); } .speak-btn:disabled { opacity: 0.45; cursor: not-allowed; } .icon-speak { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 2; } .star-btn { background: none; border: none; color: var(--ink-faint); cursor: pointer; padding: 0.25rem; border-radius: var(--radius-sm); flex-shrink: 0; transition: color 0.15s ease, transform 0.15s ease; } .star-btn:hover { color: var(--saffron); } .star-btn[aria-pressed="true"] { color: var(--saffron); } .star-btn[aria-pressed="true"] .icon-star { fill: var(--saffron); } .star-btn:active { transform: scale(0.92); } .icon-star { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 1.6; } .card-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.3rem; text-align: center; padding: 1rem 0; } .thai-text { font-family: var(--font-thai), "Work Sans", sans-serif; font-size: clamp(2.1rem, 8vw, 3.1rem); font-weight: 700; color: var(--ink); line-height: 1.9; margin: 0; cursor: pointer; user-select: text; letter-spacing: 0.01em; } /* Word groups: adjacent by default (Thai script has no inter-word spaces). The "Split Words" toggle adds visible spacing between groups without inserting extra characters into the DOM text, so copy-to-clipboard still yields the exact original sentence. */ .thai-word-group { display: inline; } .thai-text.is-split .thai-word-group + .thai-word-group { margin-left: 0.5em; } /* Per-grapheme hover/tap tooltip. Glyphs still render per codepoint (.thai-char) for CHAR_INFO lookup, but the interactive hit-box is the visual grapheme cluster (.thai-grapheme = base + combining marks) so tone marks and stacked vowels are reachable by mouse/touch. The accessible name is on the cluster via aria-label; the visual tooltip is aria-hidden to avoid double announcement. */ .thai-grapheme { position: relative; display: inline-block; border-radius: 5px; cursor: pointer; transition: background-color 0.15s ease; } .thai-char { display: inline; } .thai-grapheme:hover, .thai-grapheme:focus-visible, .thai-grapheme.is-open { background: var(--jade-soft); } .thai-grapheme:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; } .char-tooltip { position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, -4px); width: max-content; max-width: 14rem; background: var(--ink); color: var(--paper); padding: 0.45rem 0.65rem; border-radius: var(--radius-sm); font-family: "Work Sans", sans-serif; font-size: 0.72rem; font-weight: 500; line-height: 1.4; text-align: center; opacity: 0; pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease; z-index: 30; } .char-tooltip-entry + .char-tooltip-entry { display: block; margin-top: 0.45rem; padding-top: 0.4rem; border-top: 1px solid rgba(250, 245, 233, 0.25); } .thai-grapheme:hover .char-tooltip, .thai-grapheme:focus-visible .char-tooltip, .thai-grapheme.is-open .char-tooltip { opacity: 1; transform: translate(-50%, -8px); } @media (prefers-reduced-motion: reduce) { .char-tooltip { transition: opacity 0.01s linear; } } .char-tooltip strong { display: block; font-weight: 700; } .char-tooltip-thai { display: block; font-family: var(--font-thai), sans-serif; opacity: 0.85; } .char-tooltip-meaning { display: block; font-style: italic; opacity: 0.85; margin-top: 0.1rem; } .char-tooltip-class { display: block; opacity: 0.7; font-size: 0.85em; margin-top: 0.1rem; } .reveal-block { width: 100%; max-width: 22rem; display: flex; flex-direction: column; gap: 0.6rem; } .reveal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; } .reveal-btn { width: 100%; padding: 0.65rem 1rem; border-radius: var(--radius-md); border: 1px solid var(--rule-strong); background: var(--paper); color: var(--ink-soft); font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .split-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; width: 100%; padding: 0.55rem 1rem; border-radius: var(--radius-md); border: 1px dashed var(--rule-strong); background: transparent; color: var(--ink-soft); font-weight: 600; font-size: 0.85rem; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .split-btn:hover { border-color: var(--jade); color: var(--jade-ink); background: var(--jade-soft); } .split-btn.is-active { border-style: solid; border-color: var(--jade); color: var(--jade-ink); background: var(--jade-soft); } .literal-gloss-block { margin-bottom: 0.55rem; padding-bottom: 0.55rem; border-bottom: 1px dashed var(--rule); } .literal-value { font-style: italic; color: var(--ink-soft); font-weight: 500; cursor: text; } .reveal-btn:hover { border-color: var(--jade); color: var(--jade-ink); background: var(--jade-soft); } .reveal-btn.is-active { background: var(--jade); border-color: var(--jade); color: var(--paper-raised); } .reveal-btn--secondary.is-active { background: var(--saffron); border-color: var(--saffron); color: var(--paper-raised); } .reveal-panel { margin-top: 0.7rem; animation: fade-up 0.22s ease both; } @keyframes fade-up { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .reveal-panel { animation: none; } } .reveal-label { margin: 0 0 0.2rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); } .reveal-value { margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--ink); cursor: pointer; } .phonetic-value { color: var(--jade-ink); } /* word-by-word breakdown */ .breakdown-block { width: 100%; max-width: 22rem; padding-top: 0.4rem; border-top: 1px dashed var(--rule); } .breakdown-toggle { display: inline-flex; align-items: center; gap: 0.3rem; margin: 0.6rem auto 0; background: none; border: none; color: var(--ink-soft); font-size: 0.8rem; font-weight: 600; cursor: pointer; padding: 0.2rem 0.3rem; } .breakdown-toggle:hover { color: var(--jade-ink); } .chevron { width: 0.9rem; height: 0.9rem; transition: transform 0.18s ease; } .breakdown-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); } @media (prefers-reduced-motion: reduce) { .chevron { transition: none; } } .breakdown-panel { margin-top: 0.6rem; animation: fade-up 0.22s ease both; } @media (prefers-reduced-motion: reduce) { .breakdown-panel { animation: none; } } .word-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; } .word-chip { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-md); padding: 0.5rem 0.75rem; text-align: left; min-width: 6.5rem; } .word-chip-thai { font-family: var(--font-thai), sans-serif; font-size: 1.1rem; font-weight: 600; color: var(--ink); display: block; } .word-chip-phonetic { display: block; font-size: 0.78rem; font-weight: 600; color: var(--jade-ink); margin-top: 0.15rem; } .word-chip-translation { display: block; font-size: 0.78rem; color: var(--ink-soft); margin-top: 0.1rem; } /* Nested syllable reveal — one level deeper than word chips */ .syllable-toggle { display: inline-flex; align-items: center; gap: 0.2rem; margin-top: 0.45rem; padding: 0.1rem 0; background: none; border: none; color: var(--ink-faint); font-size: 0.68rem; font-weight: 600; cursor: pointer; line-height: 1.2; } .syllable-toggle:hover { color: var(--jade-ink); } .chevron--sm { width: 0.7rem; height: 0.7rem; } .syllable-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); } .syllable-list { list-style: none; margin: 0.4rem 0 0; padding: 0.35rem 0 0 0.55rem; border-left: 2px solid var(--rule); display: flex; flex-wrap: wrap; gap: 0.3rem; animation: fade-up 0.22s ease both; } @media (prefers-reduced-motion: reduce) { .syllable-list { animation: none; } } .syllable-chip { background: var(--paper-raised); border: 1px dashed var(--rule); border-radius: var(--radius-sm); padding: 0.25rem 0.4rem; text-align: left; min-width: 0; } .syllable-chip-thai { font-family: var(--font-thai), sans-serif; font-size: 0.88rem; font-weight: 600; color: var(--ink); display: block; line-height: 1.45; } .syllable-chip-phonetic { display: block; font-size: 0.65rem; font-weight: 600; color: var(--jade-ink); margin-top: 0.05rem; } .card-footer { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.72rem; color: var(--ink-faint); border-top: 1px solid var(--rule); padding-top: 0.8rem; margin-top: 0.5rem; flex-wrap: wrap; } /* -------------------- controls -------------------- */ .controls { display: flex; flex-direction: column; gap: 0.9rem; } .eval-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } .eval-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; padding: 0.75rem 1rem; border-radius: var(--radius-md); font-weight: 700; font-size: 0.92rem; cursor: pointer; border: 2px solid var(--rule-strong); background: var(--paper-raised); color: var(--ink-soft); transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease; } .eval-btn:active { transform: scale(0.98); } /* Haptic-confirmation-style pulse (uimotion.fyi pattern #13/#28 family): a brief overshoot-and-settle scale confirms the mastery/practice judgement landed, beyond the instant color swap alone. Triggered by script.js adding/removing this class; transform-only, so it composites cheaply and never fights the badge's own color transition. */ .eval-btn.is-confirming { animation: eval-btn-pulse 0.32s ease-out; } @keyframes eval-btn-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .eval-btn.is-confirming { animation: none; } } .eval-btn--practice.is-active { border-color: var(--clay); background: var(--clay); color: var(--paper-raised); } .eval-btn--mastered.is-active { border-color: var(--jade); background: var(--jade); color: var(--paper-raised); } .nav-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.6rem; align-items: stretch; } .nav-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.7rem 1rem; border-radius: var(--radius-md); border: 1px solid var(--rule-strong); background: var(--paper-raised); color: var(--ink); font-weight: 600; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; } .nav-btn:hover { border-color: var(--jade); background: var(--jade-soft); } .nav-btn:disabled { opacity: 0.4; cursor: not-allowed; } .nav-btn:disabled:hover { border-color: var(--rule-strong); background: var(--paper-raised); } .nav-btn--icon { padding: 0.7rem; } /* -------------------- footer -------------------- */ .site-footer { text-align: center; padding: 1.5rem 1rem 2.5rem; color: var(--ink-faint); font-size: 0.78rem; } .app-version { margin-top: 0.35rem; opacity: 0.7; } .app-version:empty { display: none; } /* -------------------- drawer -------------------- */ .drawer { position: fixed; inset: 0; z-index: 60; } .drawer-overlay { position: absolute; inset: 0; background: rgba(28, 26, 20, 0.42); animation: fade-in 0.2s ease both; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } .drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(24rem, 100vw); background: var(--paper-raised); box-shadow: var(--shadow-pop); display: flex; flex-direction: column; animation: slide-in-right 0.25s ease both; } @keyframes slide-in-right { from { transform: translateX(100%); } to { transform: translateX(0); } } @media (prefers-reduced-motion: reduce) { .drawer-overlay, .drawer-panel { animation: none; } } .drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--rule); } .drawer-head h2 { font-size: 1.1rem; } .drawer-body { padding: 1.1rem 1.25rem 2rem; overflow-y: auto; } .stats-card { background: var(--jade-soft); border-radius: var(--radius-md); padding: 1rem 1.1rem; margin-bottom: 1.3rem; } .stats-heading { margin: 0 0 0.6rem; font-size: 0.85rem; font-weight: 700; color: var(--jade-ink); } .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; } .stats-label { margin: 0; font-size: 0.68rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.03em; } .stats-value { margin: 0.1rem 0 0; font-size: 1.5rem; font-weight: 700; color: var(--ink); } .stats-value--mastered { color: var(--jade-ink); } .stats-value--practice { color: var(--clay); } .drawer-subhead { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 0.75rem; } .lesson-list { display: flex; flex-direction: column; gap: 0.85rem; } .lesson-list-item { border: 1px solid var(--rule); border-radius: var(--radius-md); padding: 0.9rem; } .lesson-list-item.is-current { border-color: var(--jade); background: var(--jade-soft); } .lesson-list-item-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.2rem; } .lesson-list-item-head h4 { margin: 0; font-size: 0.92rem; font-family: "Work Sans", sans-serif; font-weight: 700; color: var(--ink); } .lesson-count { font-size: 0.68rem; font-weight: 700; color: var(--ink-soft); background: var(--paper); padding: 0.15rem 0.5rem; border-radius: 999px; white-space: nowrap; } .lesson-desc { margin: 0 0 0.6rem; font-size: 0.75rem; color: var(--ink-soft); } .lesson-axes { margin: 0 0 0.35rem; font-size: 0.7rem; color: var(--ink-soft); } .lesson-axis-ped { font-weight: 700; color: var(--jade); letter-spacing: 0.04em; text-transform: uppercase; } .lesson-axis-grade { font-weight: 500; } .lesson-card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.4rem; } .lesson-card-btn { display: flex; align-items: center; justify-content: space-between; gap: 0.3rem; padding: 0.45rem 0.6rem; border-radius: var(--radius-sm); border: 1px solid var(--rule); background: var(--paper-raised); font-size: 0.85rem; font-family: var(--font-thai), sans-serif; font-weight: 600; color: var(--ink); cursor: pointer; text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .lesson-card-btn.is-current { background: var(--jade); border-color: var(--jade); color: var(--paper-raised); } .lesson-card-btn.is-mastered:not(.is-current) { background: var(--jade-soft); border-color: var(--jade-soft); color: var(--jade-ink); } .lesson-card-btn.is-practice:not(.is-current) { background: var(--clay-soft); border-color: var(--clay-soft); color: var(--clay); } /* -------------------- modal -------------------- */ .modal { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 1.25rem; } .modal-overlay { position: absolute; inset: 0; background: rgba(28, 26, 20, 0.5); animation: fade-in 0.2s ease both; } .modal-panel { position: relative; width: 100%; max-width: 30rem; max-height: 90vh; overflow-y: auto; background: var(--paper-raised); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); animation: pop-in 0.2s ease both; } @keyframes pop-in { from { opacity: 0; transform: translateY(8px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { .modal-overlay, .modal-panel { animation: none; } } .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--rule); } .modal-head h2 { font-size: 1.1rem; } .modal-form { padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; } .field { display: flex; flex-direction: column; gap: 0.35rem; } .field label { font-size: 0.75rem; font-weight: 700; color: var(--ink-soft); letter-spacing: 0.02em; } .req { color: var(--clay); font-weight: 600; text-transform: lowercase; } .field input, .field select { font-family: inherit; font-size: 1rem; padding: 0.6rem 0.7rem; border-radius: var(--radius-sm); border: 1px solid var(--rule-strong); background: var(--paper); color: var(--ink); } .field input:focus-visible, .field select:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; } .field-rule { border: none; border-top: 1px dashed var(--rule); margin: 0.15rem 0; } .modal-actions { display: flex; justify-content: flex-end; gap: 0.6rem; padding-top: 0.4rem; } .btn { padding: 0.65rem 1.15rem; border-radius: var(--radius-sm); font-weight: 700; font-size: 0.88rem; cursor: pointer; border: 1px solid transparent; } .btn--ghost { background: transparent; color: var(--ink-soft); border-color: var(--rule-strong); } .btn--ghost:hover { background: var(--paper); } .btn--primary { background: var(--jade); color: var(--paper-raised); } .btn--primary:hover { background: var(--jade-ink); } /* -------------------- toast -------------------- */ .toast { position: fixed; bottom: 1.25rem; right: 1.25rem; left: 1.25rem; max-width: 22rem; margin-left: auto; z-index: 90; background: var(--ink); color: var(--paper); padding: 0.75rem 1rem; border-radius: var(--radius-md); font-size: 0.85rem; font-weight: 600; box-shadow: var(--shadow-pop); opacity: 0; transform: translateY(0.75rem); pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; } .toast.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .toast { transition: opacity 0.01s linear; } } /* -------------------- explain text mode -------------------- */ .explain-view { display: flex; flex-direction: column; gap: 1.25rem; } .explain-head { display: flex; flex-direction: column; align-items: flex-start; gap: 0.65rem; } .explain-back-btn { align-self: flex-start; } .explain-title { font-size: clamp(1.35rem, 4vw, 1.65rem); color: var(--jade-ink); } .explain-card { align-items: stretch; text-align: left; } .explain-form { width: 100%; display: flex; flex-direction: column; gap: 0.85rem; } .explain-textarea { font-family: var(--font-thai), "Work Sans", sans-serif; font-size: 1.15rem; line-height: 1.7; min-height: 5.5rem; resize: vertical; padding: 0.65rem 0.75rem; border-radius: var(--radius-sm); border: 1px solid var(--rule-strong); background: var(--paper); color: var(--ink); } .explain-textarea:focus-visible, .explain-label-input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; } .explain-label-input { font-family: inherit; font-size: 0.95rem; padding: 0.55rem 0.7rem; border-radius: var(--radius-sm); border: 1px solid var(--rule-strong); background: var(--paper); color: var(--ink); } .field-optional { font-weight: 500; color: var(--ink-faint); text-transform: lowercase; } .explain-actions-row { display: flex; flex-wrap: wrap; gap: 0.55rem; } .explain-space-toggle { display: flex; flex-wrap: wrap; gap: 0.45rem; } .segment-btn { font-family: inherit; font-size: 0.82rem; font-weight: 600; padding: 0.45rem 0.85rem; border-radius: 999px; border: 1px solid var(--rule-strong); background: var(--paper); color: var(--ink-soft); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .segment-btn:hover:not(:disabled) { background: var(--jade-soft); color: var(--jade-ink); } .segment-btn.is-active { background: var(--jade); color: var(--paper-raised); border-color: var(--jade); } .segment-btn:disabled { opacity: 0.45; cursor: not-allowed; } .explain-hint { margin: 0; font-size: 0.78rem; color: var(--ink-faint); line-height: 1.45; } .explain-display-wrap { width: 100%; padding: 1rem 0 0.25rem; text-align: center; } .explain-thai-display { cursor: default; } .explain-hint-copy { margin: 0.65rem 0 0; font-size: 0.75rem; color: var(--ink-faint); } .explain-disclaimer { margin: 0.5rem 0 0; padding-top: 0.85rem; border-top: 1px dashed var(--rule); font-size: 0.72rem; color: var(--ink-faint); line-height: 1.5; } .explain-saved { background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--radius-md); padding: 1rem 1.1rem; } .explain-saved-heading { font-family: "Fraunces", Georgia, serif; font-size: 1rem; font-weight: 600; margin: 0 0 0.65rem; color: var(--ink); } .explain-saved-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; } .explain-saved-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.55rem; border-radius: var(--radius-sm); border: 1px solid var(--rule); background: var(--paper); } .explain-saved-load { flex: 1; min-width: 0; text-align: left; font-family: inherit; font-size: 0.85rem; font-weight: 600; color: var(--ink); background: transparent; border: none; cursor: pointer; padding: 0.15rem 0.25rem; border-radius: 4px; } .explain-saved-load:hover, .explain-saved-load:focus-visible { background: var(--jade-soft); outline: none; } .explain-saved-load:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; } .explain-saved-preview { display: block; font-family: var(--font-thai), sans-serif; font-size: 0.95rem; font-weight: 700; color: var(--jade-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .explain-saved-meta { display: block; font-size: 0.7rem; font-weight: 500; color: var(--ink-faint); } .explain-saved-delete { flex-shrink: 0; width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--ink-faint); cursor: pointer; } .explain-saved-delete:hover { background: var(--clay-soft); color: var(--clay); } .explain-saved-delete:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; } /* -------------------- responsive -------------------- */ @media (max-width: 420px) { .lesson-card-grid { grid-template-columns: 1fr; } .flashcard { padding: 1.25rem 1rem 1rem; } } /* Verified via CDP at 320/375/414/500px: no horizontal overflow found on this page. This block only lifts the masthead's two interactive controls to the 44x44px minimum touch target. */ @media (max-width: 500px) { .home-icon, .theme-toggle { width: 2.75rem; height: 2.75rem; } /* When the title wraps and pushes .masthead-actions to its own line, margin-left: auto keeps it pinned to the right instead of collapsing to flex-start (space-between has nothing to distribute for a lone item on a wrapped line). */ .masthead-actions { margin-left: auto; } }