/* --------------------------------------------------------------------- ก–ฮ สระ — Thai Alphabet Trainer Same "study journal" palette as thai-flashcards (warm cream / jade / saffron) for portal-wide consistency, but a reference-grid layout instead of a card-flip flow. Sarabun (self-hosted, var(--font-thai)) carries every Thai glyph at generous line-height (complex-script rendering: tone marks / vowel signs above & below the consonant need overflow: visible room). ------------------------------------------------------------------- */ :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"). */ 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; } [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: the hover/focus tooltip on .char-tile is centered on the tile (left:50%/translateX(-50%)) and can overhang the viewport edge for tiles in the outer grid columns — harmless (pointer-events: none, full detail is one tap away in the detail panel) but was inflating document scrollWidth. Clip it here instead of letting it force a page-wide horizontal scrollbar. */ overflow-x: hidden; } [lang="th"] { font-family: var(--font-thai), "Work Sans", sans-serif; } h1, h2 { 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 { 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: 920px; 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: 970px) { .masthead-rule { max-width: 920px; 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.2rem; 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.8rem; color: var(--ink-soft); } .masthead-actions { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; } .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); } /* -------------------- workspace -------------------- */ .workspace { max-width: 920px; margin: 0 auto; padding: 1.75rem 1.25rem 3rem; } .tabs-row { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.9rem; } .tabs { display: flex; gap: 0.5rem; flex: 1; min-width: 0; } .print-btn { display: inline-flex; align-items: center; gap: 0.4rem; flex-shrink: 0; padding: 0.7rem 1rem; border-radius: var(--radius-md); border: 1px solid var(--rule-strong); background: var(--paper-raised); 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; } .print-btn:hover { border-color: var(--jade); color: var(--jade-ink); } .print-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .print-btn:active { transform: scale(0.98); } @media (prefers-reduced-motion: reduce) { .print-btn { transition: none; } } .tab-btn { flex: 1; padding: 0.75rem 1rem; border-radius: var(--radius-md); border: 1px solid var(--rule-strong); background: var(--paper-raised); color: var(--ink-soft); font-weight: 700; font-size: 0.95rem; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .tab-btn:hover { border-color: var(--jade); color: var(--jade-ink); } .tab-btn.is-active { background: var(--jade); border-color: var(--jade); color: var(--paper-raised); } .tab-count { font-weight: 500; opacity: 0.8; font-size: 0.85em; } .hint-copy { margin: 0 0 1.25rem; font-size: 0.8rem; color: var(--ink-faint); } .hint-copy--mobile { display: none; } @media (hover: none) { .hint-copy--mobile { display: inline; } } /* -------------------- character grid -------------------- */ .char-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: 0.7rem; } .char-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; padding: 1rem 0.5rem 0.75rem; background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--radius-md); cursor: pointer; box-shadow: var(--shadow-card); transition: border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease; /* Complex-script rendering: generous line-height + visible overflow so tone-mark-adjacent vowel signs above/below the glyph never clip. */ line-height: 1.9; overflow: visible; } .char-tile:hover, .char-tile:focus-visible { border-color: var(--jade); transform: translateY(-2px); box-shadow: 0 4px 14px -6px rgba(18, 63, 52, 0.35); } .char-tile:active { transform: translateY(0) scale(0.98); } .char-tile--obsolete { opacity: 0.62; } .char-tile--rare { border-style: dashed; } .char-tile-glyph { font-family: var(--font-thai), sans-serif; font-size: 2.1rem; font-weight: 600; color: var(--ink); line-height: 1.9; overflow: visible; } .char-tile-label { font-size: 0.72rem; font-weight: 600; color: var(--ink-soft); text-align: center; } .char-tile-tag { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; padding: 0.1rem 0.45rem; border-radius: 999px; } .char-tile-tag--mid, .char-tile-tag--long { background: var(--jade-soft); color: var(--jade-ink); } .char-tile-tag--high, .char-tile-tag--short { background: var(--clay-soft); color: var(--clay); } .char-tile-tag--low { background: var(--saffron-soft); color: var(--saffron); } .char-tile-tag--tone { background: var(--plum-soft); color: var(--plum); } /* Silbentyp-Tags bei Vokalen (Lebend/Tot/Sonderfall) — gleiche Form wie die Klassen-/Längen-Tags, eigene Farben, damit der Silbentyp nicht mit der Vokallänge verwechselt wird (kurz↔tot korreliert nur grob). */ .char-tile-tag--syllable-live { background: var(--jade-soft); color: var(--jade-ink); } .char-tile-tag--syllable-dead { background: var(--saffron-soft); color: var(--saffron); } .char-tile-tag--syllable-special { background: var(--plum-soft); color: var(--plum); } /* Grobe Klang-Gruppierung (PO-Auftrag 2026-07-28): Zeichen desselben Anlaut-/Vokal-Lauts teilen einen Hintergrund-Farbton (--group-hue wird in script.js pro soundGroup gesetzt). color-mix mit --paper-raised hält den Kontrast zum --ink-Glyph in beiden Themes hoch (helle Tönung im Light Mode, dunkle Tönung im Dark Mode) — kein reines hsl()-Pastell, das im Dark Mode grell wirken würde. */ .char-tile--grouped { background: color-mix(in oklab, hsl(var(--group-hue) 65% 55%) 16%, var(--paper-raised)); border-color: color-mix(in oklab, hsl(var(--group-hue) 65% 55%) 38%, var(--rule)); } /* Tone-mark tiles (วรรณยุกต์) — PO spec 2026-07-22: must be visually distinct from regular vowel cards via a light accent background. Uses the plum/plum-soft tokens already reserved in :root for this (unused elsewhere in this file until now), which already has a dark-mode counterpart defined alongside jade/saffron/clay. */ .char-tile--tone { background: var(--plum-soft); border-color: var(--plum); } .char-tile--tone:hover, .char-tile--tone:focus-visible { border-color: var(--plum); box-shadow: 0 4px 14px -6px rgba(131, 72, 106, 0.35); } .char-tile--tone .char-tile-glyph { color: var(--plum); } /* Mnemonic icon (Unicode emoji) — small corner badge referencing the traditional acrophonic object/animal, e.g. ก ไก่ -> 🐔. Consonants only, vowels have no mnemonic object. */ .char-tile-icon { position: absolute; top: 0.35rem; right: 0.4rem; font-size: 1.9rem; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.12)); } /* Compact hover/focus tooltip — same interaction pattern as .thai-grapheme/.char-tooltip in ../thai-flashcards/style.css. */ .char-tile-tooltip { position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, -4px); width: max-content; max-width: 13rem; background: var(--ink); color: var(--paper); padding: 0.5rem 0.7rem; 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-tile:hover .char-tile-tooltip, .char-tile:focus-visible .char-tile-tooltip { opacity: 1; transform: translate(-50%, -8px); } @media (prefers-reduced-motion: reduce) { .char-tile-tooltip, .char-tile { transition: opacity 0.01s linear; } } .tile-tooltip-th { display: block; font-family: var(--font-thai), sans-serif; opacity: 0.85; margin-top: 0.1rem; } .tile-tooltip-meaning { display: block; font-style: italic; opacity: 0.85; margin-top: 0.15rem; } .tile-tooltip-phonetic { display: block; opacity: 0.9; margin-top: 0.25rem; padding-top: 0.25rem; border-top: 1px solid rgba(250, 245, 233, 0.25); } /* -------------------- tone marks (วรรณยุกต์) -------------------- Own section at the end of the vowel view, not mixed into .char-grid (PO spec 2026-07-22). Same tile/tooltip/detail-panel machinery as the consonant/vowel grid above (see script.js buildTile/openDetail), just a visually separated container with its own heading and a plum accent. */ .tone-section { margin-top: 2.25rem; padding-top: 1.75rem; border-top: 1px dashed var(--rule-strong); } .tone-section-title { font-size: 1.05rem; color: var(--ink); display: flex; align-items: baseline; gap: 0.5rem; } .tone-section-hint { margin: 0.4rem 0 1.1rem; font-size: 0.8rem; color: var(--ink-faint); max-width: 52ch; /* Generous line-height + visible overflow: the hint text itself is Latin, but sits directly above Thai script content in the section below and the tone-mark glyph อ is inline here too — keep the same complex- script safety margin as everywhere else in this file. */ line-height: 1.6; } .tone-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: 0.7rem; } /* -------------------- pronunciation rules (Ausspracheregeln) -------------------- 4. Tab (PO spec 2026-07-26). Deliberately NOT the char-tile grid used by Konsonanten/Vokale — this content is explanatory rule cards (text + matrix/example tables), a different information shape that a glyph grid would misrepresent. Reuses the tool's existing paper/jade/saffron/clay/ plum palette + radius/shadow tokens for visual consistency, but its own card/table layout. */ .rules-section { display: flex; flex-direction: column; gap: 1.5rem; } .rules-legend { margin: 0; padding: 0.85rem 1rem; background: var(--paper-raised); border: 1px dashed var(--rule-strong); border-radius: var(--radius-md); font-size: 0.78rem; color: var(--ink-soft); line-height: 1.7; } .rules-legend strong[lang="th"] { font-family: var(--font-thai), "Work Sans", sans-serif; color: var(--ink); } .rule-card { 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.65rem; } .rule-card-title { font-size: 1.15rem; color: var(--ink); line-height: 1.6; overflow: visible; } .rule-card-intro { margin: 0.65rem 0 0; font-size: 0.9rem; color: var(--ink-soft); line-height: 1.65; max-width: 68ch; } .rule-card-footnote { margin: 1rem 0 0; font-size: 0.8rem; color: var(--ink-faint); line-height: 1.65; padding-top: 0.85rem; border-top: 1px dashed var(--rule-strong); max-width: 68ch; } .rules-see-also { margin: 0; font-size: 0.8rem; color: var(--ink-faint); line-height: 1.7; } .rules-see-also strong[lang="th"] { font-family: var(--font-thai), sans-serif; color: var(--ink-soft); } /* Four factor definitions (Konsonantenklasse/Silbentyp/Vokallänge/Tonzeichen) */ .rule-factors { margin: 1.1rem 0 0; display: grid; grid-template-columns: 1fr; gap: 0.5rem; } .rule-factors dt { font-size: 0.78rem; font-weight: 700; color: var(--jade-ink); } .rule-factors dd { margin: 0.15rem 0 0.5rem; font-size: 0.83rem; color: var(--ink-soft); line-height: 1.6; } .rule-subtitle { font-family: "Work Sans", sans-serif; font-size: 0.85rem; font-weight: 700; color: var(--ink); margin: 1.4rem 0 0.65rem; } /* Horizontal-scroll safety net for narrow viewports — tables keep their natural column widths (never squeezed illegibly), the wrapper scrolls instead of forcing page-level horizontal overflow. */ .rule-table-scroll { overflow-x: auto; border-radius: var(--radius-md); } .rule-matrix-table, .rule-example-table { width: 100%; min-width: 32rem; border-collapse: collapse; font-size: 0.82rem; } .rule-example-table { min-width: 26rem; } .rule-matrix-table th, .rule-example-table th { text-align: left; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-faint); padding: 0 0.6rem 0.5rem 0; border-bottom: 1px solid var(--rule-strong); } .rule-matrix-table td, .rule-example-table td { padding: 0.6rem 0.6rem 0.6rem 0; border-bottom: 1px solid var(--rule); vertical-align: middle; color: var(--ink); } .rule-matrix-table tr:last-child td, .rule-example-table tr:last-child td { border-bottom: none; } .rule-class-tag { display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em; padding: 0.15rem 0.5rem; border-radius: 999px; white-space: nowrap; } .rule-class-tag--mid { background: var(--jade-soft); color: var(--jade-ink); } .rule-class-tag--high { background: var(--clay-soft); color: var(--clay); } .rule-class-tag--low { background: var(--saffron-soft); color: var(--saffron); } .rule-matrix-syllable { font-size: 0.8rem; color: var(--ink-soft); max-width: 12rem; } .rule-mark-glyph { font-family: var(--font-thai), sans-serif; font-size: 1.7rem; font-weight: 700; color: var(--plum); line-height: 1.8; overflow: visible; } /* Tone-result chips — own 5-color scheme (mid/low/falling/high/rising), distinct from the class/length tags elsewhere in this file since they answer a different question (resulting tone of a whole syllable, not the anlaut class or vowel length of a single glyph). */ .tone-chip { display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em; padding: 0.18rem 0.55rem; border-radius: 999px; white-space: nowrap; } .tone-chip--mid { background: var(--rule); color: var(--ink-soft); } .tone-chip--low { background: var(--jade-soft); color: var(--jade-ink); } .tone-chip--falling { background: var(--clay-soft); color: var(--clay); } .tone-chip--high { background: var(--saffron-soft); color: var(--saffron); } .tone-chip--rising { background: var(--plum-soft); color: var(--plum); } .rule-matrix-examples { display: flex; flex-wrap: wrap; gap: 0.4rem; padding-top: 0.5rem; padding-bottom: 0.5rem; } .rule-example-chip { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.05rem; padding: 0.3rem 0.55rem; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-sm); line-height: 1.5; } .rule-example-chip-th { font-family: var(--font-thai), sans-serif; font-size: 1.45rem; font-weight: 600; color: var(--ink); line-height: 1.8; overflow: visible; } .rule-example-chip-ph { font-size: 0.7rem; font-weight: 600; color: var(--jade-ink); } .rule-example-chip-meaning { font-size: 0.68rem; font-style: italic; color: var(--ink-faint); } .rule-example-thai { font-family: var(--font-thai), sans-serif; font-size: 1.5rem; font-weight: 600; line-height: 1.8; overflow: visible; white-space: nowrap; } .rule-example-phonetic { font-size: 0.82rem; font-weight: 600; color: var(--jade-ink); white-space: nowrap; } .rule-example-meaning { font-size: 0.85rem; color: var(--ink-soft); font-style: italic; } @media (max-width: 640px) { .rule-card { padding: 1.25rem 1.1rem 1.4rem; } } /* -------------------- detail panel -------------------- */ .detail-overlay { position: fixed; inset: 0; background: rgba(28, 26, 20, 0.45); z-index: 60; animation: fade-in 0.2s ease both; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } .detail-panel { position: fixed; z-index: 70; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(28rem, calc(100vw - 2rem)); max-height: min(85vh, 42rem); overflow-y: auto; background: var(--paper-raised); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); padding: 1.5rem 1.5rem 1.75rem; animation: pop-in 0.2s ease both; } @keyframes pop-in { from { opacity: 0; transform: translate(-50%, -46%) scale(0.97); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } @media (prefers-reduced-motion: reduce) { .detail-overlay, .detail-panel { animation: none; } } .detail-close { position: absolute; top: 0.9rem; right: 0.9rem; background: none; border: none; color: var(--ink-faint); cursor: pointer; padding: 0.35rem; border-radius: var(--radius-sm); } .detail-close:hover { color: var(--jade-ink); background: var(--jade-soft); } .icon { width: 1.2rem; height: 1.2rem; } .detail-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.1rem; padding-right: 2rem; } .detail-glyph { font-family: var(--font-thai), sans-serif; font-size: 3.2rem; font-weight: 600; color: var(--jade-ink); background: var(--jade-soft); border-radius: var(--radius-md); width: 4.5rem; height: 4.5rem; min-width: 4.5rem; display: flex; align-items: center; justify-content: center; line-height: 1.9; overflow: visible; } .detail-icon { font-size: 4rem; line-height: 1; flex-shrink: 0; margin-left: auto; } .detail-eyebrow { margin: 0; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--jade); } .detail-name { font-size: 1.3rem; margin-top: 0.1rem; } .detail-name-th { margin: 0.15rem 0 0; font-family: var(--font-thai), sans-serif; font-size: 0.95rem; color: var(--ink-soft); line-height: 1.7; } .detail-facts { margin: 0 0 1.2rem; display: flex; flex-direction: column; gap: 0.6rem; } .detail-fact { display: grid; grid-template-columns: 6rem 1fr; gap: 0.6rem; padding-bottom: 0.6rem; border-bottom: 1px dashed var(--rule); } .detail-fact dt { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-faint); } .detail-fact dd { margin: 0; font-size: 0.92rem; color: var(--ink); font-weight: 500; line-height: 1.45; } .detail-similar-label { margin: 0 0 0.6rem; font-size: 0.75rem; font-weight: 700; color: var(--ink-soft); } .detail-similar-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; } .detail-similar-none { margin: 0; font-size: 0.82rem; color: var(--ink-faint); font-style: italic; } .similar-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.6rem; border-radius: var(--radius-sm); border: 1px solid var(--rule-strong); background: var(--paper); cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; } .similar-chip:hover { border-color: var(--jade); background: var(--jade-soft); } .similar-chip-glyph { font-family: var(--font-thai), sans-serif; font-size: 1.15rem; font-weight: 600; color: var(--ink); line-height: 1.7; } .similar-chip-name { font-size: 0.72rem; font-weight: 600; color: var(--ink-soft); } /* -------------------- 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; } /* -------------------- responsive -------------------- */ @media (max-width: 420px) { .char-grid, .tone-grid { grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); } .detail-fact { grid-template-columns: 1fr; gap: 0.15rem; } } /* Verified via CDP at 320/375/414/500px (grid/tabs/detail-panel all fit without page-level horizontal overflow once the tooltip clip above is in place). This block 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; } /* .tabs-row (added for the Auftrag-2 "A4 Drucken" button): 2 flexible tab buttons + 1 fixed-width button is too tight below ~500px — drop the print button to its own full-width row instead of squeezing tab labels ("Vokale (30)") into an unreadable sliver. */ .tabs-row { flex-wrap: wrap; } .print-btn { flex: 1 1 100%; justify-content: center; } /* 3rd tab (Ausspracheregeln, added 2026-07-26) makes 3 equally-flexed buttons too narrow to hold their longest labels on one line below 500px — let the row wrap instead of clipping/squeezing text. */ .tabs { flex-wrap: wrap; } .tab-btn { flex: 1 1 auto; min-width: 8.5rem; } } /* -------------------- print (Auftrag 2, 2026-07-22) -------------------- .print-only is a second, parallel rendering of the full CONSONANTS/ VOWELS/TONE_MARKS arrays (built once in script.js renderPrintSheet()), kept out of the interactive layout entirely (display:none) and only switched on inside @media print. Screen and print therefore never fight over the same DOM nodes/classes — the interactive .char-grid and the print .print-grid are fully independent, so tuning one can never accidentally break the other. */ .print-only { display: none; } @media print { @page { size: A4; margin: 12mm 10mm; } /* Reset the paper texture + serif reading font for ink-efficient, unambiguous black-on-white print output. */ body { background: #fff !important; color: #000; } /* Hide the entire interactive app... */ .skip-link, .masthead, .masthead-rule, .tabs-row, .hint-copy, .char-grid, .tone-section, .rules-section, .site-footer, .detail-overlay, .detail-panel { display: none !important; } /* ...and show only the print sheet. */ .print-only { display: block; } .page, .workspace { max-width: none; margin: 0; padding: 0; } .print-page { break-after: page; page-break-after: always; } .print-page:last-child { break-after: auto; page-break-after: auto; } .print-page-title { font-family: "Fraunces", Georgia, serif; font-size: 15pt; font-weight: 700; color: #000; margin: 0 0 4mm; /* Complex-script rendering (Kai.md): the title itself is Latin/Thai mixed ("ก–ฮ — Thai-Konsonanten"), generous line-height keeps any Thai glyph ascenders/descenders clear. */ line-height: 1.5; } .print-page-count { font-weight: 500; opacity: 0.7; font-size: 0.75em; } .print-section-title { font-family: "Fraunces", Georgia, serif; font-size: 11pt; font-weight: 700; color: #000; margin: 6mm 0 3mm; } .print-grid { display: grid; gap: 2mm; } .print-grid--consonants { grid-template-columns: repeat(6, 1fr); } .print-grid--vowels { grid-template-columns: repeat(6, 1fr); } .print-grid--tones { grid-template-columns: repeat(4, 1fr); } .print-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6mm; border: 0.5pt solid #999; border-radius: 1.5mm; padding: 2mm 1.5mm; text-align: center; /* Never let a tile's border/content split across two physical pages. */ break-inside: avoid; page-break-inside: avoid; } .print-tile-glyph { font-family: var(--font-thai), sans-serif; font-weight: 600; font-size: 15pt; color: #000; /* Complex-script rendering (Kai.md): tone/vowel signs above or below the consonant body must never clip — generous line-height + visible overflow, same rule as the on-screen .char-tile-glyph. */ line-height: 1.9; overflow: visible; } .print-tile-name { font-size: 6.5pt; font-weight: 700; color: #000; } .print-tile-name-th { font-family: var(--font-thai), sans-serif; font-size: 6.5pt; color: #333; line-height: 1.6; overflow: visible; } .print-tile-meta { font-size: 6pt; color: #444; line-height: 1.35; } /* Tone marks keep their on-screen plum accent in print too (PO spec: "farblich abgesetzt" must survive onto paper, not just on screen). print-color-adjust forces the browser to actually paint it instead of silently dropping backgrounds to save ink (the default behavior). */ .print-tile--tone { background: #f0e1ea; border-color: #83486a; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .print-tile--tone .print-tile-glyph { color: #83486a; } /* Page 2 (30 vowels + 4 tone marks) has noticeably more room to spare than the tightly-packed 44-consonant page 1 — sized up rather than left as dead whitespace, verified with Page.printToPDF that this still fits on one A4 sheet (see Kai's dispatch notes). */ .print-page--vowels .print-tile { padding: 3mm 2mm; } .print-page--vowels .print-tile-glyph { font-size: 17pt; } .print-grid--tones .print-tile { padding: 5mm 3mm; gap: 1.2mm; } .print-grid--tones .print-tile-glyph { font-size: 24pt; } .print-grid--tones .print-tile-name, .print-grid--tones .print-tile-name-th { font-size: 8pt; } .print-grid--tones .print-tile-meta { font-size: 7.5pt; line-height: 1.5; } }