/* myJING — light + dark themes via [data-theme] on . */ :root { --gold: #c9a227; --bg: #fafaf7; --card: #ffffff; --text: #1a1a1a; --muted: #6b6b6b; --border: #e6e4de; --primary-text: #1a1a1a; --danger: #b00020; --line-yang: #1a1a1a; --shadow: 0 1px 3px rgba(0, 0, 0, 0.05); --diagram-bg: #faf8f2; --block-bg: #fdfdfb; --changing-bg: #efece4; --changing-border: #d8d4c6; --code-bg: #f0ede5; --modal-overlay: rgba(0, 0, 0, 0.45); --radius: 14px; --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Vogue-style high-contrast Didone serif for the wordmark and tagline */ --vogue: "Bodoni Moda", "Bodoni 72", "Didot", "Bodoni", Georgia, serif; } [data-theme="dark"] { --bg: #181816; --card: #232321; --text: #ececea; --muted: #a3a39d; --border: #3a3a36; --primary-text: #ececea; --danger: #ff7281; --line-yang: #ececea; --shadow: 0 1px 3px rgba(0, 0, 0, 0.4); --diagram-bg: #2a2926; --block-bg: #28282625; --changing-bg: #3a3934; --changing-border: #4d4c46; --code-bg: #2c2c29; --modal-overlay: rgba(0, 0, 0, 0.65); } * { box-sizing: border-box; } html, body { background: var(--bg); } body { margin: 0; font-family: var(--sans); color: var(--text); line-height: 1.45; /* Belt-and-braces zoom kill on top of viewport meta. `manipulation` blocks * double-tap zoom and pinch zoom at the CSS layer; children that need * different behaviour (e.g. .panel = pan-y for vertical scroll) override * explicitly. */ touch-action: manipulation; -webkit-font-smoothing: antialiased; transition: background 0.2s, color 0.2s; } /* Page wrap: scales up to use available width on wider viewports */ .wrap { max-width: 1100px; margin: 0 auto; padding: 18px; } main.wrap { padding-top: 12px; } /* Use :first-of-type so the hidden non-en-banner sibling doesn't disqualify * the cast card from the "no top margin" treatment. Without this, the * middle panel's first card sat ~14px lower than the pie / leaderboard * cards in the other panels. */ main.wrap > .card:first-of-type { margin-top: 0; } .panel > .wrap > .card:first-of-type { margin-top: 0; } /* On narrower viewports, keep things readable */ @media (max-width: 900px) { .wrap { max-width: 100%; padding: 14px; } } /* ======= TOPBAR — compact, logo + brand text ======= */ .topbar { position: sticky; top: 0; z-index: 10; background: var(--bg); border-bottom: 1px solid var(--border); transition: background 0.2s, border-color 0.2s; } :root:not([data-theme="dark"]) .topbar { background: rgba(250, 250, 247, 0.92); backdrop-filter: blur(10px); } [data-theme="dark"] .topbar { background: rgba(24, 24, 22, 0.92); backdrop-filter: blur(10px); } .topbar-inner { position: relative; padding: 6px 18px; } .brand { display: flex; align-items: center; justify-content: center; gap: 14px; } /* Logo: black-and-white only, no gold. Uses currentColor (inherits from .logo). */ .logo { width: 64px; height: 64px; display: grid; place-items: center; color: var(--text); /* pure mono */ flex-shrink: 0; } .logo svg { width: 100%; height: 100%; display: block; } .yy-dot-light { fill: var(--card); } .yy-dot-dark { fill: var(--text); } .brand-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.0; } .brand-title { font-family: "Kohinoor Telugu", "KohinoorTelugu", "Telugu Sangam MN", -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", sans-serif; font-weight: 600; /* Semibold */ font-size: calc(28px * var(--text-scale)); letter-spacing: 0.01em; color: var(--text); } .brand-my { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; font-style: italic; } .brand-tagline { font-family: var(--vogue); font-size: calc(11px * var(--text-scale)); letter-spacing: 0.18em; color: var(--muted); font-weight: 700; margin-top: 4px; /* Lock the visual line-height so script-specific fallback fonts don't * inflate the box. Bodoni Moda has no CJK glyphs, so the browser falls * back to a CJK system serif (PingFang TC / Microsoft JhengHei / Songti) * whose intrinsic ascender + descender boxes are ~1.5–1.7× — that ate * vertical space above and below the tagline in zh mode. line-height:1 * normalises against whichever script is rendered. Latin (en/de/fr) reads * unchanged because Bodoni Moda's own line-box already lives near 1.0. */ line-height: 1; } .brand-tagline em { font-style: italic; } /* zh-Hant tagline: pull the visible glyph up so it sits flush under * "myJING" the way "NOTHING IS RANDOM." does in English. * * Why the gap exists: CJK fonts position glyphs lower in their line-box * than Latin fonts do — the font reserves invisible ascent space above * the visible character (for combining marks, bopomofo, ruby annotation). * Even with line-height: 1, a 萬 glyph renders ~4-5px below the top of * its line-box. Latin caps in Bodoni Moda fill nearly the full ascent, * so NOTHING IS RANDOM. sits flush at the top of its line-box. * * Fix: a negative margin-top pulls the entire tagline upward, cancelling * the CJK ascent gap. Combined with margin-bottom: -4px the brand block * ends up the same total height as in English, so nothing below shifts. * * The font choice (Noto Sans TC, then PingFang TC for Apple, then JhengHei * for Windows) is a script-appropriate sans — it doesn't need to look * like Bodoni; "any font" was on the table per spec. */ :root[lang="zh-Hant"] .brand-tagline, :root[lang="zh"] .brand-tagline { font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Heiti TC", sans-serif; font-size: calc(11px * var(--text-scale)); letter-spacing: 0.08em; line-height: 1; /* Reset the prior fixed-box clipping approach — it controlled bottom * alignment well, but the glyph kept rendering 4-5px below the top of * the 18px box. Switching to natural-height + negative margin is more * predictable across CJK system fonts. */ display: block; height: auto; overflow: visible; /* Negative margins shift the visible glyph up to match the Latin * tagline's vertical position. The base rule sets margin-top: 4px; * -6px here gives a net -2px shift (4 - 6) so the gap above the * tagline matches what English shows. */ margin-top: -6px; margin-bottom: -4px; } /* Subtitle tagline that sits above the cast card on the page background * (not inside any panel). Smaller and bold (not italic) per 2026-05 spec — * reads as a compact lead-in, not a styled flourish. */ .cast-subtitle { font-family: var(--vogue); font-size: calc(11px * var(--text-scale)); letter-spacing: 0.16em; color: var(--muted); font-weight: 700; font-style: normal; text-align: center; margin: 12px 0 8px 0; } .cast-subtitle:empty { margin: 0; } /* Theme toggle — borderless, monochrome SVG icon */ .theme-toggle { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; border: none; background: transparent; cursor: pointer; display: grid; place-items: center; color: var(--text); transition: transform 0.15s, background 0.15s; padding: 0; } .theme-toggle:hover { transform: translateY(-50%) scale(1.08); background: rgba(0,0,0,0.03); } [data-theme="dark"] .theme-toggle:hover { background: rgba(255,255,255,0.05); } .theme-icon { display: inline-flex; } .theme-icon svg { display: block; } /* Language switcher — mirror of the theme toggle on the left side. The * position is absolute within .topbar-inner so the centred .brand stays * visually centred regardless of how wide the language switcher gets. */ .lang-switcher { position: absolute; top: 50%; left: 12px; transform: translateY(-50%); } /* MARKETING PERIOD (started May 2026, planned sunset ~Jul 2026): * Replace the single toggle+dropdown with a vertical column of all * ready languages, always visible. Goal is to advertise multi-language * support to users who'd never otherwise tap the language icon. To * revert: remove the .lang-stack rules below, drop the display:none * on .lang-toggle / .lang-menu, and remove #langStack from index.html. */ .lang-toggle, .lang-menu { display: none !important; } .lang-stack { /* Two-column layout: ready flags (left col) | pending flags (right col). * Each column is a vertical flex stack; the outer container puts the two * columns side by side with a visible gap so the user reads them as * distinct groups (available now vs. coming soon). */ display: flex; flex-direction: row; gap: 14px; align-items: flex-start; } .lang-stack-col { display: flex; flex-direction: column; gap: 6px; align-items: center; } .lang-stack-item { width: 22px; height: 14px; padding: 0; border: none; background: transparent; cursor: pointer; display: block; border-radius: 2px; /* The 1px box-shadow doubles as the "default" border; .is-active swaps * to a 2px gold ring so the current language reads clearly. transform * gives the same gentle hover feedback the toggle had. */ box-shadow: 0 0 0 1px rgba(0,0,0,0.12); transition: transform 0.15s, box-shadow 0.15s; overflow: hidden; position: relative; } [data-theme="dark"] .lang-stack-item { box-shadow: 0 0 0 1px rgba(255,255,255,0.18); } .lang-stack-item:hover { transform: scale(1.12); } .lang-stack-item.is-active { box-shadow: 0 0 0 2px var(--gold); } /* Pending-language tiles render at reduced opacity to signal "not yet * available". They remain clickable (the click triggers the coming-soon * dialog handled by setLanguage), and the hover scale still fires so the * affordance is preserved. The greyscale filter softens the colour without * losing the flag's identity. */ .lang-stack-item.is-pending { opacity: 0.45; filter: grayscale(0.5); } .lang-stack-item.is-pending:hover { opacity: 0.7; } .lang-stack-item svg { width: 100%; height: 100%; display: block; } /* Chinese "文" tile — red square with a single white character, matched in * size to the 22×14 flag slot. Font-size is tuned so the glyph sits visually * balanced with the flags above it (slightly larger than half the height * to compensate for the character's intrinsic bearings). */ .lang-stack-item.lang-stack-zh { background: #DE2910; display: grid; place-items: center; color: #fff; font-family: var(--serif), "Noto Serif CJK SC", "Source Han Serif SC", serif; font-size: calc(12px * var(--text-scale)); font-weight: 600; line-height: 1; } .lang-stack-item.lang-stack-zh::before { content: '文'; } .lang-toggle { width: 36px; height: 36px; border-radius: 50%; border: none; background: transparent; cursor: pointer; display: grid; place-items: center; color: var(--text); transition: transform 0.15s, background 0.15s; padding: 0; overflow: hidden; } .lang-toggle:hover { transform: scale(1.08); background: rgba(0,0,0,0.03); } [data-theme="dark"] .lang-toggle:hover { background: rgba(255,255,255,0.05); } .lang-toggle svg { display: block; border-radius: 2px; /* Faint border so flags read as buttons rather than free-floating images, * particularly the white/coloured ones against light backgrounds. */ box-shadow: 0 0 0 1px rgba(0,0,0,0.12); } [data-theme="dark"] .lang-toggle svg { box-shadow: 0 0 0 1px rgba(255,255,255,0.18); } /* Dropdown menu opens below the toggle */ .lang-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 160px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,0.12); padding: 4px 0; z-index: 30; } [data-theme="dark"] .lang-menu { box-shadow: 0 6px 20px rgba(0,0,0,0.5); } .lang-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 14px; background: transparent; border: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: background 0.12s; } .lang-menu-item:hover { background: rgba(0,0,0,0.04); } [data-theme="dark"] .lang-menu-item:hover { background: rgba(255,255,255,0.06); } .lang-menu-item.is-active { color: var(--gold); font-weight: 500; } .lang-menu-item.is-active::after { content: '✓'; margin-left: auto; color: var(--gold); } .lang-menu-item.is-pending { /* Slightly muted to signal "not yet available" — but still clickable so the * "coming soon" message can fire. */ color: var(--muted); } .lang-menu-flag { display: inline-flex; flex-shrink: 0; width: 22px; height: 14px; align-items: center; justify-content: center; } .lang-menu-flag svg { display: block; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,0.12); } [data-theme="dark"] .lang-menu-flag svg { box-shadow: 0 0 0 1px rgba(255,255,255,0.18); } .lang-menu-label { font-size: calc(14px * var(--text-scale)); letter-spacing: 0.01em; } /* ======= CARDS / TYPE ======= */ .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px 18px 18px; box-shadow: var(--shadow); margin: 14px 0; } /* Small banner shown above the cast card on non-English versions, asking for * feedback on formatting/translation errors and inviting word-of-mouth. */ .non-en-banner { font-size: calc(12px * var(--text-scale)); color: var(--muted); background: var(--block-bg); border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: 6px; padding: 8px 12px; margin: 14px 0 0 0; line-height: 1.5; text-align: center; } .non-en-banner a { color: var(--gold); text-decoration: none; } .non-en-banner a:hover { text-decoration: underline; } h1 { margin: 0 0 10px 0; font-size: calc(20px * var(--text-scale)); font-weight: 700; color: var(--text); font-family: var(--serif); display: flex; align-items: center; gap: 8px; } .title-gold { color: var(--gold); } .ask-anything { font-style: italic; text-transform: lowercase; display: inline-block; vertical-align: middle; } .ask-cursor { display: inline-block; width: 2px; background: var(--gold); margin-left: 2px; animation: ask-blink 0.72s step-end infinite; vertical-align: baseline; /* match line-height of surrounding text */ height: 0.95em; position: relative; top: 0.12em; } .ask-cursor.done { animation: ask-blink 0.72s step-end infinite; } .ask-cursor.hidden { display: none; } @keyframes ask-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } } h2 { margin: 0 0 10px 0; font-size: calc(15px * var(--text-scale)); font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted); } .h2 { font-size: calc(22px * var(--text-scale)); font-weight: 700; font-family: var(--serif); color: var(--text); } .kicker { font-size: calc(11px * var(--text-scale)); color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; } .label { display: block; font-size: calc(12px * var(--text-scale)); color: var(--muted); margin-bottom: 6px; } .changing-info { margin-top: 6px; font-style: italic; } .changing-info-stable { font-style: italic; color: var(--muted); } /* Help "?" buttons: small, discreet, neutral */ .help-btn { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--border); background: transparent; color: var(--muted); font-size: calc(11px * var(--text-scale)); font-family: var(--sans); font-weight: 700; cursor: pointer; padding: 0; line-height: 1; vertical-align: middle; transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.3s, transform 0.2s; /* Gentle attention-pulse so new users notice the buttons are interactive. * Six cycles over ~18s then stops — long enough to register, short enough * not to nag. The transform on hover sits outside the keyframes so the * pulse doesn't interfere with the hover bump. */ animation: help-btn-pulse 3s ease-in-out 0s 6; animation-fill-mode: both; } @keyframes help-btn-pulse { 0%, 100% { transform: scale(1); border-color: var(--border); } 50% { transform: scale(1.15); border-color: var(--gold); color: var(--gold); } } .help-btn.typing-hidden { opacity: 0; pointer-events: none; animation: none; } .help-btn:hover { background: var(--block-bg); color: var(--text); border-color: var(--text); transform: scale(1.1); animation: none; } .help-btn.active { background: var(--gold); color: var(--card); border-color: var(--gold); animation: none; } @media (prefers-reduced-motion: reduce) { .help-btn { animation: none; } } .help-popover { display: none; background: var(--block-bg); border: 1px solid var(--border); border-left: 3px solid var(--gold); padding: 10px 12px; margin: 6px 0 10px 0; font-size: calc(13px * var(--text-scale)); color: var(--text); border-radius: 6px; line-height: 1.5; } .help-popover.open { display: block; } html, body { /* Prevent iOS Safari's pull-to-refresh on overscroll. The panels themselves * already use overscroll-behavior:contain, but the document root needs the * same so a swipe-down from the top of any panel doesn't trigger the * browser's refresh gesture. */ overscroll-behavior: none; } textarea, input[type="text"], input[type="number"], select { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; /* 16px on the global rule (textarea / question / insertHex / select) is * the minimum that prevents iOS Safari from auto-zooming when focus * lands. Per-input rules above can override to smaller sizes for visual * reasons; the search inputs use 13px because they sit inside pills * where 16px overflows the chrome — the focus-zoom on those specific * inputs is the cost of keeping the pill design. */ font-size: calc(16px * var(--text-scale)); font-family: inherit; background: var(--card); color: var(--text); transition: border-color 0.15s, background 0.15s; } textarea { resize: none; overflow: hidden; min-height: 40px; line-height: 1.4; } /* User-changed dropdowns get gold border */ select.user-set { border-color: var(--gold); border-width: 2px; padding: 9px 11px; background: color-mix(in srgb, var(--gold) 6%, var(--card)); } .row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; } /* ======= CATEGORY PICKER ======= */ .category-panel { margin-top: 10px; padding: 12px 14px; background: var(--block-bg); border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: 6px; font-size: calc(13px * var(--text-scale)); } .category-list { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 10px; } .cat-row { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; } .cat-row input[type="checkbox"] { width: 14px; height: 14px; margin: 0; accent-color: var(--gold); } .cat-label { display: inline; } .cat-count { font-size: calc(11px * var(--text-scale)); color: var(--muted); font-variant-numeric: tabular-nums; } .cat-count:empty { display: none; } .category-custom { margin-top: 4px; padding-top: 8px; border-top: 1px dashed var(--border); } .cat-custom-input { display: flex; gap: 8px; align-items: center; } .cat-custom-input input[type="text"] { flex: 1; padding: 6px 10px; font-size: calc(13px * var(--text-scale)); } .cat-custom-input .btn { padding: 5px 12px; font-size: calc(12px * var(--text-scale)); } .cat-helper { margin-top: 8px; font-size: calc(11px * var(--text-scale)); font-style: italic; } /* Category pills shown on journal entries */ .cat-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .cat-pill { display: inline-block; padding: 2px 10px; font-size: calc(11px * var(--text-scale)); background: color-mix(in srgb, var(--gold) 12%, transparent); color: var(--gold); border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); border-radius: 999px; letter-spacing: 0.02em; } /* ======= BUTTONS ======= */ .btn { padding: 7px 14px; border-radius: 8px; border: 1.5px solid var(--gold); background: var(--gold); color: #ffffff; cursor: pointer; font-size: calc(13px * var(--text-scale)); font-family: inherit; font-weight: 600; transition: background 0.15s, transform 0.05s; } .btn:hover { background: #b58e1f; border-color: #b58e1f; } .btn:active { transform: translateY(1px); } .btn.primary { background: var(--gold); color: #ffffff; border-color: var(--gold); } .btn.outline { background: transparent; color: var(--gold); border-color: var(--gold); } .btn.outline:hover { background: color-mix(in srgb, var(--gold) 10%, transparent); color: var(--gold); } .btn.danger { color: var(--danger); border-color: var(--danger); background: transparent; font-weight: 500; } .btn.danger:hover { background: color-mix(in srgb, var(--danger) 8%, transparent); border-color: var(--danger); } .btn.secondary { background: transparent; color: var(--muted); border: 1px dashed var(--border); font-size: calc(13px * var(--text-scale)); padding: 6px 12px; font-weight: 400; } .btn.secondary:hover { background: rgba(0,0,0,0.03); color: var(--text); border-color: var(--border); } [data-theme="dark"] .btn.secondary:hover { background: rgba(255,255,255,0.04); } .muted { color: var(--muted); font-size: calc(13px * var(--text-scale)); } .details { margin-top: 14px; } .details summary { cursor: pointer; color: var(--muted); font-size: calc(13px * var(--text-scale)); padding: 6px 0; /* `inside` keeps the disclosure-triangle marker inside the summary's content * box, so it doesn't bleed past the parent block's left border. */ list-style-position: inside; } .details summary > * { vertical-align: middle; } .details summary .help-btn { margin-left: 6px; } .details summary:hover { color: var(--text); } .details[open] summary { margin-bottom: 10px; } .recommended { color: var(--text); font-style: italic; font-size: calc(12px * var(--text-scale)); } .stack6 { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } .stack6 > div { display: flex; align-items: center; gap: 12px; width: 100%; } .stack6 > div > .label { margin-bottom: 0; min-width: 110px; flex-shrink: 0; } .stack6 > div > select { flex: 1; width: 100%; } .insert-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; } @media (max-width: 600px) { .insert-grid { grid-template-columns: 1fr; } } /* C9 (revised): Two-column primary-hexagram header - scoped to #resultHeader * so other .result-head usages (transforms-into block, journal section * heading) keep the original flex layout they were designed against. Column 1 * (~60%) holds the kicker, hex title, and changing-line info. Column 2 (~40%) * holds the aliases line. On narrow viewports the grid collapses to a single * column; DOM order means primary column comes first, then aliases - which * matches "same content order" on mobile. The category pill is now positioned * absolutely at the card's top-right corner, sitting above the grid (out of * flow) so it doesn't squeeze either column. The mode pill ("your reading") * was dropped entirely - categories carry the contextual info on their own. */ .result-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; } #resultHeader.result-head { display: grid; grid-template-columns: 60fr 40fr; gap: 18px; align-items: start; } #resultHeader .result-col-primary { display: flex; flex-direction: column; gap: 4px; min-width: 0; /* allow flex children with long titles to shrink/wrap */ } #resultHeader .result-col-aliases { min-width: 0; /* On wider viewports leave room on the right edge for the absolutely- * positioned cat pill so aliases text doesn't run under it. The pill is * capped at 240px wide, so 256px of padding gives ~16px breathing room. */ padding-right: 256px; } @media (max-width: 720px) { #resultHeader.result-head { grid-template-columns: 1fr; gap: 8px; } /* On mobile the pill is below the result-head (see .primary-cat-pill rule * for repositioning), so column 2 doesn't need the right padding. */ #resultHeader .result-col-aliases { padding-right: 0; } } /* Result card needs to be a positioning context so the pill can anchor to * its top-right corner. */ #resultCard { position: relative; } /* Category pill - top-right of the result card on desktop, in-flow at the * top on mobile (where there isn't horizontal room beside the title). The * absolute positioning is overridden in the narrow-viewport media query. */ .primary-cat-pill { white-space: nowrap; max-width: 240px; overflow: hidden; text-overflow: ellipsis; position: absolute; top: 14px; right: 18px; z-index: 2; } @media (max-width: 720px) { /* On mobile, place the pill above the grid in-flow and right-aligned. The * out-of-flow absolute positioning would overlap the title on narrow * viewports. width:fit-content + margin-left:auto right-aligns the pill * without requiring its parent to be a flex container. */ .primary-cat-pill { position: static; display: block; width: fit-content; margin: 0 0 8px auto; max-width: 100%; } } .pill { font-size: calc(11px * var(--text-scale)); padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); white-space: nowrap; text-transform: uppercase; letter-spacing: 0.06em; } .qbox { border-left: 3px solid var(--gold); background: color-mix(in srgb, var(--gold) 8%, var(--card)); padding: 10px 14px; margin: 14px 0; border-radius: 0 10px 10px 0; } .qbox .label { margin-bottom: 4px; } .qtext { white-space: pre-wrap; font-family: var(--serif); font-size: calc(15px * var(--text-scale)); } .divider { height: 1px; background: var(--border); margin: 18px 0; } .section { margin: 20px 0; } /* ======= LEADERBOARD ======= */ .lb-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; flex-wrap: wrap; } .lb-title { margin: 0; } /* The mobile anchor where lb-controls is relocated under the meta line on * narrow viewports. Hidden by default (no content when on desktop), shows * margin only when controls are inside it. */ .lb-controls-mobile-anchor:empty { display: none; } .lb-controls-mobile-anchor { margin-top: 10px; margin-bottom: 6px; } /* On mobile, when controls live in the mobile anchor, left-align them so they * sit under the meta line naturally instead of right-edge-aligned. */ .lb-controls-mobile-anchor .lb-controls { margin-left: 0; justify-content: flex-start; } .lb-controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; /* Anchor to the right edge so the dropdown stays put when its toggle label * changes width ("all categories" → a category name → "N selected"). With * justify-content on the parent .lb-header alone, this works on a single * row, but when .lb-header wraps on mobile and .lb-controls drops to its * own row, the controls otherwise left-align and the dropdown visibly * shifts as selections change. margin-left:auto pins the group to the * right edge of the row; flex-end packs internal items rightward so the * dropdown's right edge is the stable reference point. */ margin-left: auto; justify-content: flex-end; } .lb-timeframe { width: auto; min-width: 90px; padding: 4px 8px; font-size: calc(12px * var(--text-scale)); border: 1px solid var(--border); border-radius: 6px; background: transparent; color: var(--muted); font-family: inherit; } .lb-timeframe:hover { color: var(--text); border-color: var(--text); } .lb-cat-dropdown { position: relative; } .lb-cat-toggle { background: transparent; border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; font-size: calc(12px * var(--text-scale)); color: var(--muted); cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 4px; } .lb-cat-toggle:hover { color: var(--text); border-color: var(--text); } .lb-cat-toggle.has-selection { color: var(--gold); border-color: var(--gold); } .lb-cat-toggle-caret { font-size: calc(10px * var(--text-scale)); } .lb-cat-menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 20; min-width: 180px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; box-shadow: 0 4px 16px rgba(0,0,0,0.15); font-size: calc(13px * var(--text-scale)); } [data-theme="dark"] .lb-cat-menu { box-shadow: 0 4px 16px rgba(0,0,0,0.45); } .lb-cat-menu .cat-row { display: flex; align-items: center; gap: 6px; padding: 4px 0; cursor: pointer; user-select: none; } .lb-cat-menu .cat-count { margin-left: auto; font-size: calc(11px * var(--text-scale)); color: var(--muted); font-variant-numeric: tabular-nums; } .lb-cat-menu-empty { color: var(--muted); font-size: calc(12px * var(--text-scale)); padding: 4px 0; } #leaderboardMeta { font-size: calc(13px * var(--text-scale)); } #leaderboardMeta.gold-message { color: var(--gold); font-style: italic; } #leaderboardStats { font-size: calc(12px * var(--text-scale)); margin-top: 2px; } #leaderboardStats.gold-message { color: var(--gold); font-style: italic; } .leaderboard-grid { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; } .leaderboard-grid > div { min-width: 0; } .lb-heading { font-size: calc(10px * var(--text-scale)); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--border); } .lb-list { list-style: none; counter-reset: lb; margin: 0; padding: 0; } .lb-list li { counter-increment: lb; display: flex; align-items: baseline; gap: 6px; padding: 5px 0; border-bottom: 1px dashed var(--border); } .lb-list li:last-child { border-bottom: none; } .lb-list li::before { content: counter(lb); font-family: var(--serif); font-size: calc(14px * var(--text-scale)); font-weight: 700; color: var(--gold); min-width: 18px; flex-shrink: 0; } .lb-name { font-family: var(--serif); font-size: calc(13px * var(--text-scale)); line-height: 1.25; flex: 1; min-width: 0; } .lb-name .lb-num { color: var(--muted); margin-right: 2px; } .lb-pct { font-size: calc(11px * var(--text-scale)); color: var(--muted); white-space: nowrap; flex-shrink: 0; } /* Statistically meaningful overshoot indicator. Applied per-row when the * column's total exceeds 64 (minimum sample for the uniform-baseline math * to mean anything) AND that row holds >= 4.6% of the column's tally — * roughly 3× the 1/64 baseline. Applied uniformly across Primary, * Resulting and Changing-line columns, each against its own total. * See fillLeaderboardList for the threshold logic. */ .lb-pct.lb-pct-elevated { color: var(--gold); font-weight: 700; } .lb-list li.lb-uncast { opacity: 0.55; } .lb-list li.lb-uncast::before { color: var(--muted); } /* C3: Primary/resulting leaderboard rows are clickable when they have at least * one reading. Hover gives subtle feedback; .is-filter-active marks the row * matching the current JOURNAL_FILTER_HEX (replacing the dashed bottom border * with a solid gold one). Both classes are only ever added to lbPrimary and * lbResulting rows - lbChanging rows and uncast rows don't get them. */ .lb-list li.lb-clickable { cursor: pointer; } .lb-list li.lb-clickable:hover { background: color-mix(in srgb, var(--gold) 5%, transparent); } .lb-list li.lb-clickable.is-filter-active { border-bottom: 2px solid var(--gold); } .lb-list li.lb-clickable.is-filter-active .lb-name { color: var(--gold); } /* C2: Changing-line expander rows. Subtle indicator when expanded (the row * itself stays unchanged; the panel below carries the gold accent line). * The expander panel mimics .help-popover styling - gold left border, block * background, comfortable line-height - and breaks out of the row's flex * layout by being a separate

with .lb-expander-panel. The .lb-no-counter * class isn't needed: we suppress numerals via counter-increment: none on * the panel directly. */ .lb-list li.lb-expander-panel { counter-increment: none; display: block; padding: 0; border-bottom: 1px dashed var(--border); } .lb-list li.lb-expander-panel::before { content: none; } .lb-list li.lb-expander-panel .lb-expander-inner { background: var(--block-bg); border-left: 3px solid var(--gold); padding: 10px 12px; margin: 6px 0 8px 0; font-size: calc(13px * var(--text-scale)); color: var(--text); border-radius: 6px; line-height: 1.5; } .lb-list li.lb-expander-panel .lb-expander-header { font-weight: 600; font-size: calc(11px * var(--text-scale)); letter-spacing: 0.04em; color: var(--muted); margin-bottom: 6px; text-transform: uppercase; } .lb-list li.lb-expander-panel .lb-expander-body { font-family: var(--serif); font-size: calc(14px * var(--text-scale)); line-height: 1.55; } .lb-list li.lb-changing-expander.is-expanded { background: color-mix(in srgb, var(--gold) 6%, transparent); } .lb-list li.lb-placeholder { opacity: 0.4; } .lb-list li.lb-placeholder::before { color: var(--muted); content: '—'; } .lb-list li.lb-more-row { counter-increment: none; border-bottom: none; justify-content: flex-start; padding-top: 8px; gap: 8px; } .lb-list li.lb-more-row::before { content: none; } #leaderboardCard { padding: 14px 16px; } #leaderboardCard h1 { font-size: calc(17px * var(--text-scale)); } /* ======= DIAGRAM ======= */ .diagram { display: flex; flex-direction: column; gap: 6px; padding: 16px; background: var(--diagram-bg); border-radius: 10px; margin: 14px 0; align-items: center; } .diagram-pair { display: flex; gap: 24px; align-items: flex-start; } .diagram-col { display: flex; flex-direction: column; align-items: center; gap: 8px; } .diagram-title { font-size: calc(13px * var(--text-scale)); font-weight: 700; font-family: var(--serif); color: var(--text); margin-bottom: 2px; text-align: center; min-height: 1.4em; } .diagram-arrow { color: var(--muted); font-size: calc(22px * var(--text-scale)); padding-top: 28px; } .diagram-caption { font-size: calc(11px * var(--text-scale)); color: var(--muted); margin-top: 4px; text-align: center; text-transform: uppercase; letter-spacing: 0.06em; } .diagram-lines { display: flex; flex-direction: column-reverse; gap: 6px; } .hex-line { width: 120px; height: 8px; display: flex; justify-content: center; align-items: center; gap: 0; position: relative; } .hex-line .bar { background: var(--line-yang); height: 8px; border-radius: 1px; } .hex-line.yang .bar { width: 120px; } .hex-line.yin .bar { width: 52px; } .hex-line.yin { justify-content: space-between; width: 120px; } .hex-line.changing::after { content: ''; position: absolute; inset: -4px; border: 1.5px solid var(--gold); border-radius: 4px; pointer-events: none; } /* ======= TEXT BLOCKS ======= */ .block { padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; margin: 10px 0; background: var(--block-bg); } .block.changing-line-block { background: var(--changing-bg); border: 1.5px solid var(--gold); padding-left: 18px; /* ensure inner content (incl. Read more) sits inside the gold */ } .block.changing-line-block-plain { /* "Plain" variant for resulting-hex changing-lines: regular border, no gold tint */ background: var(--block-bg); border: 1px solid var(--border); } .block-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; align-items: baseline; } .block-title { font-weight: 700; font-size: calc(14px * var(--text-scale)); } .block-meta { font-size: calc(11px * var(--text-scale)); color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; } .translation { margin: 10px 0; padding-left: 12px; border-left: 2px solid var(--border); } .translation:first-child { margin-top: 0; } .translator-name { font-size: calc(11px * var(--text-scale)); color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; } .translator-text { font-family: var(--serif); font-size: calc(15px * var(--text-scale)); line-height: 1.55; white-space: pre-wrap; color: var(--text); } /* Gold-accent translator blocks. Used to signal "this is the important * translator to read in this section." Two cases (May 2026): * 1. The default-shown judgment translation (direct child of #judgment * or #resultJudgment). The `>` combinator scopes to direct children, * so entries inside the "Read more translations" expander are * excluded — they stay on the muted-border style as "extras". * 2. The DeKorne modern-reading entry, wherever it appears. DEKORNE is * the only English-language voice that addresses modern situations * directly, so we flag it visually parallel to the gold judgment line. * Same gold colour as the question box (--gold). Border weight matches * the existing translation rule (2px) so nothing else changes. */ #judgment > .translation, #resultJudgment > .translation, .translation[data-translator="DEKORNE"] { border-left-color: var(--gold); } .more-wrap { margin-top: 10px; } .more-content { margin-top: 10px; display: none; } .more-content.open { display: block; } /* Nested expander appears inside the content of an outer expander (used for * the second "Read more translations" tier on changing-line text, and the * "Read more commentary" tier under "Read commentary"). Indent slightly and * add a top divider so it reads as a child of the surrounding section. */ .more-wrap-nested { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border); } .subsection-heading { margin: 18px 0 8px 0; font-size: calc(13px * var(--text-scale)); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); padding-top: 12px; border-top: 1px solid var(--border); } .more-content > .subsection-heading:first-child { padding-top: 0; border-top: 0; } /* ======= MANAGE CATEGORIES (Journal) ======= */ .manage-cats { position: relative; margin: 14px 0 18px 0; padding: 12px 14px; background: var(--block-bg); border: 1px solid var(--border); border-radius: 10px; } /* Top-right pencil that toggles edit mode for the whole manage-cats panel. * In default state, individual tile pencils are hidden; clicking this reveals * them. Same SVG as the tile pencils, just positioned absolutely. */ .manage-cats-edit-toggle { position: absolute; top: 8px; right: 10px; width: 24px; height: 24px; border-radius: 50%; border: none; background: transparent; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: color 0.15s, background 0.15s; } .manage-cats-edit-toggle:hover { color: var(--text); background: rgba(0,0,0,0.04); } [data-theme="dark"] .manage-cats-edit-toggle:hover { background: rgba(255,255,255,0.05); } .manage-cats-edit-toggle svg { width: 14px; height: 14px; } .manage-cats-edit-toggle.is-active { color: var(--gold); } /* Tile pencils are hidden by default; revealed when panel is in edit-mode. * Using .manage-cats parent class for specificity over the .cat-tile-edit * base rule below. */ .manage-cats:not(.is-editing) .cat-tile-edit { display: none; } .manage-cats-heading { font-size: calc(11px * var(--text-scale)); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; } .manage-cats-tiles { display: flex; flex-wrap: wrap; gap: 8px; } .cat-tile { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 12px; background: var(--card); border: 1px solid var(--border); border-radius: 999px; font-size: calc(13px * var(--text-scale)); font-family: var(--serif); color: var(--text); } .cat-tile.is-default { border-color: color-mix(in srgb, var(--gold) 30%, var(--border)); background: color-mix(in srgb, var(--gold) 6%, var(--card)); } .cat-tile.is-selected { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 18%, var(--card)); cursor: pointer; } /* C8: The special "all" tile is always gold-bordered (visually marking it as a * meta-control rather than a category), and gets a slightly tinted background * when active (.is-selected is toggled in JS). It never carries a pencil - the * tile's edit button is skipped at construction time, so the existing * .manage-cats:not(.is-editing) .cat-tile-edit hide-rule is moot here. */ .cat-tile.cat-tile-all { border-color: var(--gold); } .cat-tile { cursor: pointer; } .cat-tile:hover { border-color: var(--gold); } .cat-tile-name { white-space: nowrap; } .cat-tile-count { color: var(--muted); font-size: calc(11px * var(--text-scale)); font-family: var(--sans); font-variant-numeric: tabular-nums; } .cat-tile-edit { width: 22px; height: 22px; border-radius: 50%; border: none; background: transparent; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin-left: 2px; } .cat-tile-edit:hover { color: var(--text); background: rgba(0,0,0,0.04); } [data-theme="dark"] .cat-tile-edit:hover { background: rgba(255,255,255,0.05); } .cat-tile-edit svg { width: 13px; height: 13px; } /* ---------------------------------------------------------------------------- * Search cat-tile (2026-05) — always last in the manage-cats row, never * editable, never in the registry. Two visual states: * - Collapsed: pill with magnifying-glass icon + localised "Search" label * - Expanded: same pill, label replaced by a text input + live counter * * The input MUST match .cat-tile-name's font-size/family/line-height exactly, * or the pill grows vertically and reflows the manage-cats row. The .cat-tile * rule sets font-size: calc(13px * var(--text-scale)) / font-family:var(--serif) on the tile itself, * which the input inherits via `font: inherit` — but the browser's UA * stylesheet for still imposes a minimum line-height (~1.4×) and a * 2px vertical padding, so we zero those explicitly below. * -------------------------------------------------------------------------- */ .cat-tile-search-icon { flex-shrink: 0; color: var(--muted); } .cat-tile-search.is-selected .cat-tile-search-icon { color: var(--gold); } input.cat-tile-search-input { /* Inherit the pill's font (serif, 13px) so the typed term reads at the * same weight/size as a category name. Selector uses `input.` to beat the * global `input[type="text"]` rule's specificity — otherwise the global * `padding: 10px 12px` wins and the search tile grows ~22px taller than * its sibling category tiles when opened. */ font: inherit; font-family: var(--serif); font-size: calc(13px * var(--text-scale)); color: var(--text); /* Zero out the UA-imposed padding/border/line-height that would otherwise * make the pill taller than its siblings. Tiny left-padding gives * breathing room for glyphs that extend slightly past their advance width * (e.g. `J`'s lower curve), which would otherwise clip against the * input's intrinsic overflow. */ border: none; outline: none; background: transparent; padding: 0 0 0 6px; margin: 0; line-height: 1.2; height: auto; /* Keep width modest so the row doesn't reflow when the tile opens; cap * at the same character budget as the placeholder copy. */ min-width: 160px; max-width: 200px; } /* The placeholder text should feel like a category name — same serif face, * just slightly muted. No italic, matching the rest of the category tiles. */ .cat-tile-search-input::placeholder { font-family: var(--serif); font-size: calc(13px * var(--text-scale)); color: var(--muted); opacity: 0.75; } .cat-tile-search-input::-webkit-search-cancel-button { display: none; } /* Live results counter sitting after the input. Inherits .cat-tile-count * sizing (11px sans, tabular nums). The .cat-tile-search-count class is for * any future search-specific tweaks. */ .cat-tile-search-count { /* No additional styling needed — base .cat-tile-count is fine. */ } /* ---------------------------------------------------------------------------- * Leaderboard inline search (2026-05) — sits alongside #lbTimeframe and * #lbCatDropdown in the controls row. Visual chrome matches the .lb-timeframe * select so the three controls feel like a set. The magnifier icon is * absolutely-positioned inside .lb-search-wrap; the input gets left-padding * to clear it. * -------------------------------------------------------------------------- */ .lb-search-wrap { position: relative; display: inline-flex; align-items: center; } .lb-search-icon { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; } input.lb-search-input { /* Match the .lb-timeframe select's general shape so the three controls * align in the row without ad-hoc fiddling. Selector uses `input.` to * beat the global `input[type="text"]` rule's specificity (otherwise the * 26px left-padding gets clobbered to 12px and the magnifier icon * overlaps the placeholder text). */ font-family: var(--sans); font-size: calc(13px * var(--text-scale)); color: var(--text); background: var(--card-bg, var(--bg)); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px 4px 26px; /* left-pad clears the icon */ outline: none; max-width: 220px; min-width: 180px; line-height: 1.3; } .lb-search-input::placeholder { color: var(--muted); opacity: 0.75; font-style: italic; } .lb-search-input:focus { border-color: var(--gold); } .lb-search-input::-webkit-search-cancel-button { display: none; } @media (max-width: 720px) { /* On narrow viewports the leaderboard controls already stack via JS — make * sure the search input gets full row width too. */ .lb-search-wrap, .lb-search-input { width: 100%; max-width: none; } } .cat-tile-menu { position: absolute; top: 100%; right: 0; margin-top: 4px; z-index: 30; background: var(--card); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,0.15); min-width: 100px; padding: 4px 0; } [data-theme="dark"] .cat-tile-menu { box-shadow: 0 4px 16px rgba(0,0,0,0.45); } .cat-tile-menu button { display: block; width: 100%; text-align: left; background: transparent; border: none; padding: 6px 12px; font-size: calc(13px * var(--text-scale)); font-family: inherit; color: var(--text); cursor: pointer; } .cat-tile-menu button:hover { background: var(--block-bg); } .cat-tile-menu button.menu-delete { color: var(--danger); } .cat-tile-menu button.menu-delete:hover { background: color-mix(in srgb, var(--danger) 8%, transparent); } /* Inline edit mode */ .cat-tile.is-editing { padding: 4px 8px; background: var(--block-bg); } .cat-tile-input { border: 1px solid var(--gold); border-radius: 4px; padding: 2px 6px; font-size: calc(13px * var(--text-scale)); font-family: var(--serif); background: var(--card); color: var(--text); width: 130px; } .cat-tile-input.invalid { border-color: var(--danger); } .cat-tile-confirm { padding: 3px 10px !important; font-size: calc(11px * var(--text-scale)) !important; } .cat-tile-error { position: absolute; top: 100%; left: 0; margin-top: 4px; background: color-mix(in srgb, var(--danger) 10%, var(--card)); color: var(--danger); font-size: calc(11px * var(--text-scale)); padding: 4px 8px; border-radius: 4px; border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--border)); white-space: nowrap; z-index: 30; } .jitem { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin: 10px 0; background: var(--block-bg); cursor: pointer; transition: background 0.12s, border-color 0.12s; /* Positioning context for the absolutely-pinned category pill (.jtop-right). */ position: relative; } .jitem:hover { background: color-mix(in srgb, var(--gold) 5%, var(--card)); border-color: var(--gold); } .jitem.is-active { border: 2px solid var(--gold); background: color-mix(in srgb, var(--gold) 8%, var(--card)); } .jtop { display: flex; justify-content: space-between; gap: 10px; } /* Reserve title-side padding only when the entry has a category pill in the * top-right, so the title text doesn't run under the absolutely-positioned * pill. With the meta line now sitting outside .jtop (full entry width), this * padding affects only the title row itself. :has() is supported in Safari * 15.4+ and Chrome 105+; older browsers fall through to no padding (long * titles may visually touch the pill in that edge case, no functional issue). */ .jtop:has(.jtop-right) > div:first-child { padding-right: 108px; } .jtop > div:first-child { min-width: 0; flex: 1; } /* Category pill - absolutely positioned in the top-right corner of the * journal entry. Width is driven by content (no fixed column reservation), * capped at 96px so very long category names get ellipsis instead of * overflowing the card edge. */ .jtop-right { position: absolute; top: 12px; right: 14px; display: flex; align-items: flex-start; max-width: 96px; } .jtop-right .cat-pill { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } /* font-size moved to the 2026-05 block at the end of this file (set to 14px * to match .jq, per spec — single source of truth there). */ .jtitle { font-weight: 700; font-family: var(--serif); color: var(--text); } /* Meta line: mode · changing-lines · date · time. Sits below .jtop and uses * the full entry width, so the date/time doesn't get squeezed into the * title column on narrow viewports. */ .jmeta { margin-top: 2px; } .jq { margin-top: 6px; font-style: italic; color: var(--muted); } .journal-count { text-align: right; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); font-size: calc(12px * var(--text-scale)); } /* C8: Wrapper for the "Show all journal entries" button, appended to the * #journal container after the last contracted entry. Centred, with a small * top gap so it sits clearly below the entry list. */ .journal-show-all-wrap { display: flex; justify-content: center; margin-top: 10px; } .journal-actions { margin-top: 14px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; } .footer { padding: 20px 0 40px 0; font-size: calc(13px * var(--text-scale)); text-align: center; } .footer > div { margin: 4px 0; } .footer a { color: var(--gold); text-decoration: none; } .footer .footer-policy-links { margin-top: 10px; font-size: calc(12px * var(--text-scale)); opacity: 0.85; } .footer .footer-policy-links span { margin: 0 6px; color: var(--muted); } .footer a:hover { text-decoration: underline; } .error-banner { background: color-mix(in srgb, var(--danger) 8%, transparent); border: 1px solid var(--danger); color: var(--danger); padding: 12px 14px; border-radius: 10px; margin: 14px 0; } .loading { padding: 40px 20px; text-align: center; color: var(--muted); } /* ============================================================================ * Reading panel actions: "Start new reading" button at the bottom of the * middle panel. Lives outside the result card so it sits below the reading * itself (rather than feeling like part of it). Centred and breathing. * ========================================================================== */ .reading-panel-actions { display: flex; justify-content: center; margin: 24px 0 32px 0; } .reading-panel-actions .btn { min-width: 200px; } /* C4: Floating scroll-to-top button. Hidden by default; .is-visible slides * it up and fades it in. Black/white only (matches the logo's mono palette). */ .scroll-top-btn { position: fixed; bottom: 18px; right: 18px; z-index: 50; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); background: var(--card); color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; box-shadow: 0 2px 10px rgba(0,0,0,0.15); opacity: 0; pointer-events: none; transform: translateY(20px); transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s, border-color 0.15s; } [data-theme="dark"] .scroll-top-btn { box-shadow: 0 2px 10px rgba(0,0,0,0.5); } .scroll-top-btn.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); } .scroll-top-btn:hover { background: var(--block-bg); border-color: var(--text); } .scroll-top-btn svg { width: 18px; height: 18px; } @media (max-width: 600px) { .scroll-top-btn { bottom: 14px; right: 14px; width: 38px; height: 38px; } } /* ======= MODAL ======= */ .modal { position: fixed; inset: 0; z-index: 100; background: var(--modal-overlay); display: flex; align-items: center; justify-content: center; padding: 20px; } .modal-card { background: var(--card); color: var(--text); border-radius: var(--radius); border: 1px solid var(--border); padding: 20px; max-width: 400px; width: 100%; box-shadow: 0 6px 30px rgba(0,0,0,0.3); } .modal-title { font-weight: 700; font-size: calc(17px * var(--text-scale)); margin-bottom: 8px; font-family: var(--serif); } .modal-body { color: var(--muted); margin-bottom: 18px; font-size: calc(14px * var(--text-scale)); } .modal-actions { display: flex; gap: 10px; justify-content: flex-end; } /* ==================== Chinese (zh) phase-6 additions ==================== * CJK-specific typography and the four-button expander layout used by the * zh branch of renderJudgmentSection. Scoped to [lang="zh-Hant"] where * possible so it doesn't affect other languages. * * Font stack rationale: * - "Noto Sans TC" loaded from Google Fonts (head ); auto-subset * by Google so only used glyphs are fetched. font-display: swap so we * don't block first paint while waiting. * - System TC fallbacks for users on slow connections or with the font * blocked: PingFang TC (macOS/iOS), Microsoft JhengHei (Windows), * Heiti TC (older macOS), Noto Sans CJK TC (Linux/Android). * - Plain sans-serif last as the universal fallback. * * Lang attribute: set to "zh-Hant" on the body when CURRENT_LANG is 'zh', * so the browser picks correct Han-unified glyph variants. */ :lang(zh-Hant), [lang="zh-Hant"] { font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Heiti TC", "Noto Sans CJK TC", "Source Han Sans TC", sans-serif; /* Slightly looser line height: classical Chinese is dense, especially with * variant readings in 〈〉 brackets. 1.7 leaves breathing room without * looking gappy. */ line-height: 1.7; } /* Apply to translation text wrappers when their content is Chinese, even if * the body lang attribute hasn't been swapped yet (e.g. for a en-default * user who switched to zh). The .translator-text class is generic across * languages; we don't want to apply CJK spacing to en/de text. */ html[lang="zh-Hant"] .translator-text, html[lang="zh-Hant"] .block-title, html[lang="zh-Hant"] .block-meta { letter-spacing: 0.02em; /* tiny tracking helps CJK density */ } /* Lemma (the quoted base-text fragment) — slightly bolder so it stands out * from Zhu Xi's commentary that follows it. Not too bold; classical text * typeset with heavy weights looks wrong. */ .zh-lemma { font-weight: 500; color: var(--text); } /* Commentary (Zhu Xi's notes on the lemma) — lighter weight, smaller, * muted color. The 〈〉 brackets are part of the textContent so users * see the scholarly convention. */ .zh-comment { font-weight: 400; color: var(--muted); font-size: 0.94em; } .zh-comment-ellipsis { color: var(--muted); font-weight: 500; } /* Inline expand button — minimal styling, distinguishable from prose without * looking like a primary action. */ .zh-expand-btn { display: inline; background: none; border: none; padding: 0 2px; margin: 0 2px; font: inherit; font-size: 0.92em; color: var(--accent, #4a7bd9); cursor: pointer; text-decoration: none; } .zh-expand-btn:hover { text-decoration: underline; } /* The four-button expander wrappers stack vertically with small gaps. * Each .zh-expander is the same shape as the existing .more-wrap so the * outer layout matches. */ .zh-expander { margin-top: 10px; } .zh-expander + .zh-expander { margin-top: 6px; /* slightly tighter when buttons are consecutive */ } .btn.zh-expand-section { text-align: left; width: 100%; display: flex; align-items: center; justify-content: space-between; } .btn.zh-expand-section::after { content: "▸"; margin-left: 8px; transition: transform 0.15s ease; opacity: 0.6; } .btn.zh-expand-section.is-open::after { transform: rotate(90deg); } .btn.zh-expand-section.is-disabled { opacity: 0.45; cursor: not-allowed; } .btn.zh-expand-section.is-disabled::after { content: ""; /* no chevron on the disabled placeholder */ } /* Line blocks inside the zh expanders — a touch of left padding for * visual nesting under the parent button. */ .zh-line-block { margin: 10px 0; padding-left: 8px; border-left: 2px solid var(--border); } .zh-line-block .block-title { font-weight: 500; font-size: 0.95em; color: var(--muted); margin-bottom: 4px; } /* Translation wrapper for Zhu Xi structured entries — kill the default * margins between alternating lemma/comment so they flow as prose. */ .translation.zh-zhuxi .translator-text { display: block; } .translation.zh-zhuxi .translator-name { margin-bottom: 4px; } /* Mobile tweaks: smaller font keeps long classical passages readable. * Avoid touch-targets-too-small on the inline expand button. */ @media (max-width: 600px) { html[lang="zh-Hant"] .translator-text { font-size: calc(15px * var(--text-scale)); } .zh-expand-btn { padding: 4px 6px; /* easier to tap */ } .zh-line-block { padding-left: 6px; } } /* ==================== end zh additions ==================== */ /* ==================== 2026-05 changes ==================== */ /* --- Journal entry: hex-title flex-wrap (only when needed) --------------- * The title row holds .jtitle-primary (primary hex + arrow) and .jtitle-result * (resulting hex) as two inline-block segments inside .jtitle. Setting * .jtitle to flex with flex-wrap means both segments stay on one line when * they fit; if combined width exceeds the title's available width, the * resulting segment wraps to its own line. Replaces the earlier forced * mobile line break which always broke regardless of length. */ .jtitle { display: flex; flex-wrap: wrap; /* Small column-gap so the two segments aren't crammed together when on * the same line. */ column-gap: 6px; row-gap: 0; /* The two segments individually can wrap if a single segment is too long * for the row (rare — only on extreme German titles). */ align-items: baseline; } .jtitle-primary, .jtitle-result { /* inline-block lets the segment behave as a single wrap-unit: the WHOLE * "01 ☰ The Dynamic →" stays together rather than breaking mid-word. */ display: inline-block; /* Allow within-segment wrap for the rare extreme-length title. */ overflow-wrap: anywhere; } /* --- Journal hex title alignment: match font size to question ----------- * Spec: question and hexagram title should use the same font size, pick * the smaller. .jq inherits 14px from .jitem (the parent has no font-size * override, so it falls through to body's 14px). The earlier .jtitle was * 16px serif bold. Drop to 14px to match. Only font-size changes — weight, * family, colour all preserved. */ .jtitle { font-size: calc(14px * var(--text-scale)); } /* --- Journal entry: per-entry delete button (trash icon, inline) --------- * The trash sits at the right of the question row (same line as the * question). No longer absolutely positioned bottom-right. Half the * previous size per spec. Subdued by default, brightens to danger-red on * hover. Click stopPropagation in JS prevents the entry reopen. */ .jq-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-top: 6px; } .jq-row .jq { /* Question grows to fill available space; min-width:0 enables proper * shrink-and-wrap inside the flex parent (without it, long unbroken * text would push the trash off the right edge). Reset the .jq's own * top-margin since the row already has margin-top. */ flex: 1 1 auto; min-width: 0; margin-top: 0; /* Long questions wrap onto multiple lines naturally; the trash stays * top-aligned with the first line of the question. */ overflow-wrap: anywhere; } .jq-row .jq-empty { /* When there's no question, the empty .jq still grows to push the * trash to the right edge. min-height keeps the row from collapsing * to zero so the trash has somewhere to sit. */ min-height: 1px; } .jitem-delete { /* Half the previous size (was 22×22 with 14px svg → now 12×12 with 8px * svg). flex-shrink:0 keeps it from being squashed when the question is * long. align-self start so it tops with the first line of the question * rather than centering vertically. */ flex: 0 0 auto; align-self: flex-start; width: 12px; height: 12px; padding: 0; border: none; border-radius: 3px; background: transparent; color: var(--muted); cursor: pointer; opacity: 0.55; display: inline-flex; align-items: center; justify-content: center; transition: opacity 0.15s, color 0.15s, background 0.15s; /* Lift slightly so the icon visually aligns with the italic question's * baseline rather than its descender line. */ margin-top: 2px; } .jitem-delete svg { width: 11px; height: 11px; } .jitem-delete:hover { opacity: 1; color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, transparent); } /* --- Primary-hex category pill on mobile --------------------------------- * Pill stays absolute top-right on mobile (was being moved in-flow which * pushed the PRIMARY HEXAGRAM kicker down). The kicker stays top-left. * Constrain max-width so the pill doesn't overlap the kicker. */ @media (max-width: 720px) { .primary-cat-pill { position: absolute; top: 14px; right: 14px; display: inline-block; margin: 0; max-width: 45%; } #resultHeader .result-col-primary { padding-right: 50%; } } /* --- "Changing line: 4 - subtle shift" spans full card width ------------ * The element was inside .result-col-primary which puts it in the left * column (50% width on desktop). It has no column-pair to its right at * that point (the right column holds aliases only), so the column * constraint was wasted. Now it sits below .result-head and spans the * full card width. */ .changing-info { /* Reset any leftover column-shaped width — full row instead. */ width: 100%; /* Keep a small top margin to separate from the title row above. */ margin-top: 6px; /* Don't force wrap; modern browsers handle this fine. The spec is * "all on one line" — single-line readings like "Changing line: 4 - * subtle shift" will fit. Longer multi-line descriptions naturally wrap. */ } /* --- Labelled expander (three-button pattern, en/de/fr) ------------------ * Each .labelled-expander holds one heading button + a content area. * Heading button stays at full opacity always; an .is-open class flags * which one is currently expanded with a gold border (matching the * existing .btn.secondary dashed-border style, just upgraded to solid * gold when open). No chevron — per spec the gold border IS the open * indicator. */ .labelled-expander { margin: 8px 0; } .labelled-expander .expander-head { width: 100%; text-align: left; } .expander-head.is-open { border-color: var(--gold); border-style: solid; background: color-mix(in srgb, var(--gold) 8%, var(--card)); color: var(--text); } [data-theme="dark"] .expander-head.is-open { background: color-mix(in srgb, var(--gold) 12%, var(--card)); } /* "Less" button: still used by the zh expander path (per the user's spec, * zh keeps explicit collapse buttons under each expanded section). * en/de/fr no longer add Less buttons — heading re-click handles collapse. * Sits at the end of the expanded content area; collapsed state hides it * via the parent .more-content (which is display:none when not .open). */ .expander-less { margin-top: 14px; display: inline-block; } /* --- Inline 360-char translator-text expander ---------------------------- * The "…" toggle sits inline with the preview text, styled as a small * unobtrusive button. On click it swaps to "(less)" and the full text * replaces the preview. */ .translator-text-toggle { display: inline-block; border: none; background: transparent; color: var(--gold); cursor: pointer; padding: 0 4px; font: inherit; font-weight: 700; border-radius: 3px; margin-left: 2px; } .translator-text-toggle:hover { background: color-mix(in srgb, var(--gold) 12%, transparent); } .translator-text-toggle[aria-expanded="true"] { font-weight: 500; } /* --- Manage-cats panel: auto-pack tiles to fill width better ------------- * Earlier set to space-between which left awkward gaps when rows had few * tiles. Switched to flex-start (default) + flex-grow on tiles so each * tile stretches to consume its share of the row's free space. Tiles * remain readable (don't grow obscenely large) because the flex-basis * stays at the tile's natural content width — only leftover whitespace * is distributed. */ .manage-cats-tiles { justify-content: flex-start; align-content: flex-start; } .manage-cats-tiles .cat-tile { /* flex-grow lets each tile claim its share of the row's free space. * flex-shrink:1 lets very long tiles compress if needed. * flex-basis:auto keeps the natural content width as the starting * point so packing is content-aware. */ flex: 1 0 auto; /* Cap individual tile growth so a sparse row doesn't have one giant * tile — keeps the visual rhythm even when there's a lot of free * space. The max-width is generous (~30% of the panel width on most * screens) so wider tiles can still stretch noticeably. */ max-width: 240px; /* Centre the text within the now-wider tile. */ text-align: center; justify-content: center; } /* --- Journal entry: cat-pill wraps on mobile if needed ------------------- * The pill is absolute, capped at 96px desktop. On mobile let it wrap * onto multiple lines so the full category name is readable. */ @media (max-width: 720px) { .jtop-right { max-width: 40%; } .jtop-right .cat-pill { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.25; } .jtop:has(.jtop-right) > div:first-child { padding-right: 44%; } } /* --- Language flags: 25% smaller, lifted off the bottom border ----------- * Per the user: "flags at least 25% smaller; move them up so the Chinese * flag isn't aligned with the bottom border of the header." The flag size * is set on .lang-stack-item (22×14); shrink to 16×11 (~27% smaller area, * matches the spec). The svg fills its container so no svg dimension * change needed. The whole stack is lifted with a negative top offset so * the bottom flag clears the topbar's bottom border. */ .lang-stack-item { width: 16px; height: 11px; } .lang-stack { /* Tighter inter-flag gap to match the smaller flag size. */ gap: 4px; /* Lift the entire column up so the bottom flag isn't flush with the * topbar's bottom border. */ margin-top: -4px; } /* The same flag size also applies inside the topbar's main lang-toggle * button (the always-visible single flag that opens the dropdown), so the * two views stay consistent. */ .lang-toggle svg { width: 16px; height: 11px; } /* --- Hexagram pair alignment: reserve 2 lines for the title block -------- * In the reading panel where primary and result hexagrams sit side-by-side * with their titles above, the trigram-line diagrams misalign when one * title wraps to 2 lines and the other stays 1 line. Solution: always * reserve 2 lines of title space via min-height. Both diagrams then sit * at the same vertical position regardless of title-text length. * * 2 lines × 1.2 line-height × title font-size ≈ 2.4em. */ .diagram-title { min-height: 2.4em; /* Vertically align text to the bottom of the reserved space so a * 1-line title sits adjacent to the line diagram below (rather than * floating at the top of an empty 2-line box). */ display: flex; flex-direction: column; justify-content: flex-end; } /* ==================== end 2026-05 changes ==================== */ /* ============================================================================ * Takashima (ja) overlay — link + apology block * ---------------------------------------------------------------------------- * Surfaced by translationNode() when an entry carries a `url` field * (currently exclusive to the TAKASHIMA translator on the ja locale). * The apology line sits between any excerpt text and the link, in muted * type so it reads as a footnote rather than competing with the excerpt * itself. The link uses the same gold accent as the existing * translator-text-toggle so it feels consistent with the rest of the UI. * ========================================================================== */ .translator-apology { font-size: calc(13px * var(--text-scale)); color: var(--muted); line-height: 1.55; margin-top: 8px; font-family: var(--sans); } /* Sits ABOVE the text (unlike .translator-apology which sits below). Used * when filterByLang has surfaced an entry in a fallback language — currently * only JA→ZH. Italic + muted so the reader registers the explanation as * meta-text, not as part of the oracle. translationNode appends this node * before the .translator-text node, so it lands directly under the * .translator-name without further CSS plumbing. */ .translator-fallback-notice { font-size: calc(12px * var(--text-scale)); color: var(--muted); line-height: 1.5; margin-bottom: 6px; font-style: italic; font-family: var(--sans); } .translator-link { display: inline-block; margin-top: 6px; color: var(--gold); text-decoration: none; font-size: calc(14px * var(--text-scale)); font-family: var(--sans); font-weight: 500; padding: 4px 0; } .translator-link:hover, .translator-link:focus-visible { text-decoration: underline; } /* ============================================================================ * Pie chart of category balance (2026-05) * ---------------------------------------------------------------------------- * Two-column on desktop: smaller pie on the left, controls + per-category * list on the right. Heading uses the serif/sentence-case style of the * Journal h1 (slightly smaller) so it sits as a sibling section visually, * not as a punchier shout-line. * ========================================================================== */ .pie-heading { /* Match Journal's

style (serif, sentence case) but unbolded per * 2026-05 spec — reads as a soft introductory line. / font-family: var(--serif); font-size: calc(16px var(--text-scale)); font-weight: 400; color: var(--text); margin: 0 0 14px 0; line-height: 1.35; text-transform: none; letter-spacing: 0; } .pie-wrap { display: grid; /* Narrower pie column per 2026-05 spec — was minmax(180px, 240px) and * dominated the layout. The pie itself shrinks to fit its column. / grid-template-columns: minmax(120px, 170px) 1fr; gap: 22px; align-items: start; } @media (max-width: 600px) { .pie-wrap { grid-template-columns: 1fr; gap: 14px; } .pie-svg-col { / Centred and capped when stacked so the pie doesn't fill the phone. / max-width: 170px; margin: 0 auto; } } .pie-svg-col { / No fixed width — let the column rule from .pie-wrap drive it. / } .pie-svg { width: 100%; height: auto; display: block; } / Slice strokes match the card background so adjacent slices have a thin * separation that adapts to light/dark mode without manual overrides. / .pie-slice { stroke: var(--card-bg, var(--bg)); stroke-width: 2; stroke-linejoin: round; } .pie-slice.is-placeholder { / Empty-state slices fade slightly so they signal "no data yet". / opacity: 0.55; } .pie-list-col { display: flex; flex-direction: column; gap: 10px; } .pie-controls { display: flex; align-items: center; } / Right-aligned variant (2026-05): pushes the timeframe