/* Design tokens: quiet paper, ink green, restrained vermilion. */
:root {
  --paper: #f7f6f0;
  --panel: #fdfcf8;
  --ink: #263f35;
  --muted: #68766d;
  --line: #dde2d8;
  --soft: #edf0e7;
  --red: #b95a44;
  --serif: "Songti SC", "STSong", "Noto Serif CJK SC", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 20px;
  --space-4: 28px;
  --space-5: 40px;
  --content-width: 1240px;
  --sidebar-width: 208px;
  --shell-width: calc(var(--content-width) + var(--sidebar-width) + var(--space-4));
  --radius: 8px;
  font-synthesis: none;
}

/* Foundation and keyboard access. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 14px/1.75 var(--sans); }
button, input, textarea, select { font: inherit; }
button, a, input, textarea, select, summary { -webkit-tap-highlight-color: transparent; }
button { min-width: 40px; min-height: 40px; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
button, a { transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
input:focus, select:focus, textarea:focus { outline: 2px solid #93a28f; outline-offset: 2px; }
button:disabled { cursor: default; opacity: .55; }
button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
[hidden] { display: none !important; }
.site-header, .app-shell { width: min(var(--shell-width), calc(100% - 80px)); margin-inline: auto; }
.app-shell > main { grid-column: 2; grid-row: 1; width: 100%; max-width: var(--content-width); min-width: 0; margin-inline: auto; }
h1, h2, h3, h4 { font-weight: 500; }
.small-label { margin: 0; color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: 1px; }

/* Slim header and collapsible application navigation. */
.site-header { position: sticky; z-index: 40; top: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 76px; border-bottom: 1px solid var(--line); background: var(--paper); }
.header-brand-group { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.sidebar-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: var(--space-1); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); flex: 0 0 auto; }
.sidebar-toggle:hover { background: var(--soft); border-color: #bfcbbd; }
.brand { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; min-height: 40px; }
.brand-icon { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--ink); border-radius: 4px; font: 26px/1 var(--serif); flex: 0 0 auto; }
.brand-name { font: 28px/1.15 var(--serif); letter-spacing: 2px; }
.brand-subtitle { display: block; margin-top: var(--space-1); color: var(--muted); font: 10px/1.3 var(--sans); letter-spacing: 1px; white-space: nowrap; }
.history-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); border: 1px solid var(--line); border-radius: var(--radius); background: transparent; font-size: 12px; white-space: nowrap; flex: 0 0 auto; }
.history-button:hover { background: var(--soft); border-color: #bfcbbd; }
.count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; min-height: 20px; border-radius: 20px; background: var(--ink); color: var(--panel); font-size: 11px; }
.app-shell { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); align-items: start; gap: var(--space-4); }
.site-sidebar { position: sticky; top: 96px; grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: var(--space-3); width: var(--sidebar-width); min-height: calc(100vh - 116px); padding: var(--space-4) var(--space-3) var(--space-5) 0; border-right: 1px solid var(--line); }
.sidebar-heading { margin: 0; padding-inline: var(--space-2); color: var(--muted); font-size: 12px; letter-spacing: 1px; }
.sidebar-title-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-1); }
.sidebar-close { display: none; }
.site-sidebar nav { display: flex; flex-direction: column; gap: var(--space-1); width: 100%; }
.nav-link { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-2); width: 100%; min-height: 48px; padding: var(--space-2); border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: var(--muted); text-align: left; white-space: nowrap; }
.nav-link:hover { border-color: var(--line); background: var(--panel); color: var(--ink); }
.nav-link.nav-active { border-color: var(--line); background: var(--soft); color: var(--ink); font-weight: 600; }
.nav-link svg { width: 18px; height: 18px; }
.sidebar-backdrop { display: none; }
@media (min-width: 900px) {
  body.sidebar-collapsed .app-shell { grid-template-columns: minmax(0, 1fr); gap: 0; }
  body.sidebar-collapsed .site-sidebar { display: none; }
  body.sidebar-collapsed .app-shell > main { grid-column: 1; }
}

/* Intro: typography takes precedence over decorative geometry. */
.intro { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding: var(--space-4) 0; }
.eyebrow { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); color: var(--muted); font-size: 12px; letter-spacing: 1px; }
.eyebrow > span { width: 20px; height: 1px; background: var(--red); }
h1 { margin: 0 0 var(--space-2); font: 500 40px/1.4 var(--serif); letter-spacing: 1px; }
h1 > span { color: #6b7c68; }
.intro-copy { margin: 0; color: var(--muted); font-size: 14px; }
.intro-art { position: relative; width: 120px; height: 88px; flex: 0 0 auto; }
.art-orbit, .art-orbit.second, .art-seal { display: none; }
.art-yao { position: absolute; right: var(--space-3); top: 20px; width: 72px; height: 5px; background: #8d9b84; }
.art-yao.y2 { top: 40px; background: linear-gradient(to right, #8d9b84 43%, transparent 43%, transparent 57%, #8d9b84 57%); }
.art-yao.y3 { top: 60px; }

/* Full-width casting panel, followed by the result workspace. */
.workspace { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.input-panel { width: 100%; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); }
.tiny-mark { color: var(--muted); font: 13px/1.5 var(--serif); }
#casting-form { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) minmax(0, 1.2fr); align-items: start; gap: var(--space-3); }
.method-field, .question-field, .time-field, .location-field { min-width: 0; margin: 0; }
.method-field { grid-column: 1; }
.time-field { grid-column: 2; }
.location-field { grid-column: 3; }
.question-field { grid-column: 1 / -1; }
.field-label { display: flex; align-items: center; gap: var(--space-1); margin: 0 0 var(--space-1); font-size: 14px; font-weight: 500; }
.method-field > .field-label, .location-controls .field-label { min-height: 40px; }
.optional { margin-left: auto; color: var(--muted); font-size: 12px; font-weight: 400; }
textarea, input, select { width: 100%; min-width: 0; min-height: 44px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--ink); }
input, select { padding: var(--space-1) var(--space-2); }
select { font-size: 14px; }
textarea { display: block; height: 44px; min-height: 44px; padding: var(--space-1) var(--space-2); resize: vertical; line-height: 1.75; }
textarea::placeholder { color: #879183; }
input[type="datetime-local"] { font-size: 13px; font-variant-numeric: tabular-nums; color-scheme: light; }
.method-number-inputs { grid-column: 1 / span 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: 0; }
.method-number-inputs > div { min-width: 0; }
.method-number-inputs label { display: block; margin-bottom: var(--space-1); color: var(--muted); font-size: 12px; }
.method-form-hint { grid-column: 3; align-self: center; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.date-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 40px; margin-bottom: var(--space-1); }
.date-heading .field-label { margin: 0; }
.inline-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); padding: 0 var(--space-1); border: 0; border-radius: var(--radius); background: transparent; color: var(--muted); font-size: 13px; }
.inline-button:hover { background: var(--soft); color: var(--ink); }
.inline-button > span { font-size: 18px; }
.time-context { display: flex; align-items: center; gap: var(--space-1); margin: var(--space-1) 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.time-context > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.time-context .inline-button { flex: 0 0 auto; font-size: 12px; }
.time-help { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.location-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.location-control { min-width: 0; }
.location-help { margin: var(--space-1) 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.form-bottom { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) 240px; align-items: start; gap: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.policy-details { min-width: 0; }
.policy-details summary { display: flex; align-items: center; gap: var(--space-1); min-height: 48px; cursor: pointer; list-style: none; font-size: 13px; }
.policy-details summary::-webkit-details-marker, .calculation-heading::-webkit-details-marker { display: none; }
.policy-details summary::after { margin-left: auto; color: var(--muted); font-size: 18px; content: "+"; }
.policy-details[open] summary::after { content: "−"; }
.policy-details summary > span { color: var(--muted); font-size: 12px; }
.policy-content { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); padding-top: var(--space-2); }
.setting-field { min-width: 0; }
.policy-content label { display: block; min-height: 24px; margin: 0 0 var(--space-1); font-size: 13px; }
.policy-content .timezone-label { margin-top: 0; }
.policy-content p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 12px; }
.select-wrap { min-width: 0; }
.form-submit { min-width: 0; }
.cast-button { display: flex; align-items: center; justify-content: center; gap: var(--space-2); width: 100%; min-height: 48px; margin: 0; padding: var(--space-2); border: 1px solid var(--ink); border-radius: var(--radius); background: var(--ink); color: var(--panel); font-size: 14px; }
.cast-button:hover { background: #375647; border-color: #375647; }
.cast-button > span[aria-hidden] { margin-left: auto; font-size: 20px; }
.cast-button > svg { margin-right: auto; }
.form-note { margin: var(--space-2) 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.form-error { grid-column: 1 / -1; margin: 0; padding: var(--space-2); border: 1px solid #ead4c9; border-radius: var(--radius); background: #f8eee7; color: var(--red); font-size: 13px; }
.panel-bottom, .blossom, .vertical-text { display: none; }

/* Results: three equivalent cards, with secondary calculations below. */
.result-panel { width: 100%; min-width: 0; }
.result-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.result-heading h2 { margin: var(--space-1) 0 0; font: 500 28px/1.4 var(--serif); letter-spacing: 1px; }
.result-actions { display: flex; align-items: center; gap: var(--space-1); flex: 0 0 auto; }
.save-button, .icon-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); min-height: 40px; padding: var(--space-1) var(--space-2); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); font-size: 13px; white-space: nowrap; }
.icon-button { width: 40px; padding: var(--space-1); }
.save-button:hover, .icon-button:hover { background: var(--soft); border-color: #bfcbbd; }
.result-date { margin: var(--space-2) 0 var(--space-3); color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.question-display { margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); border-left: 2px solid #8a9b80; background: var(--soft); font-family: var(--serif); font-size: 15px; white-space: pre-wrap; overflow-wrap: anywhere; }
.trigram-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: var(--space-3); padding: var(--space-2) 0; border-block: 1px solid var(--line); }
.strip-item { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--space-1); min-width: 0; padding-inline: var(--space-1); border-right: 1px solid var(--line); line-height: 1.5; }
.strip-item:last-child { border-right: 0; }
.strip-label { color: var(--muted); font-size: 12px; }
.strip-item strong { font: 500 18px/1.4 var(--serif); white-space: nowrap; }
.mini-trigram { font: 26px/1 serif; }
.element-pill { padding: 0 var(--space-1); border-radius: 4px; background: var(--soft); color: var(--muted); font-size: 12px; }
.moving-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.moving-strip strong { color: var(--red); }
.moving-kind { color: var(--muted); font-size: 12px; white-space: nowrap; }
.hexagram-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.hexagram-card { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.card-heading { display: flex; align-items: center; gap: var(--space-1); width: 100%; min-height: 24px; }
.card-number { color: var(--muted); font: 12px/1.5 Georgia, serif; }
.card-heading h3 { margin: 0; font-size: 14px; }
.card-tag { margin-left: auto; color: var(--muted); font-size: 11px; white-space: nowrap; }
.hexagram-figure { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); width: 100%; height: 176px; margin: var(--space-1) 0; }
.yao { position: relative; display: flex; gap: 16px; width: 104px; height: 8px; }
.yao-segment { flex: 1; border-radius: 1px; background: var(--ink); }
.yao.moving .yao-segment { background: var(--red); }
.yao.moving::after { position: absolute; right: -20px; top: 1px; width: 6px; height: 6px; border: 1px solid var(--red); border-radius: 50%; content: ""; }
.yao-label { position: absolute; left: -24px; top: -4px; color: #8c9785; font: 11px/16px var(--serif); }
.hexagram-name { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.hexagram-number { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.hexagram-name h4 { margin: 0; font: 500 26px/1.5 var(--serif); letter-spacing: 1px; text-align: center; }
.hexagram-caption { min-height: 44px; margin: var(--space-2) 0; color: var(--muted); font-size: 13px; line-height: 1.7; text-align: center; }
.card-footer { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--space-1); width: 100%; margin-top: auto; padding-block: var(--space-2); border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.card-plus { color: #91a087; }
.result-inspect { width: 100%; padding: var(--space-1) var(--space-2); border: 1px solid var(--line); border-radius: var(--radius); background: transparent; font-size: 13px; }
.result-inspect:hover { border-color: #bfcbbd; background: var(--soft); }
.figure-legend { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); margin: var(--space-2) 0 var(--space-3); color: var(--muted); font-size: 12px; }
.legend-line { width: 12px; height: 3px; background: var(--red); flex: 0 0 auto; }
.rule-note { margin-left: auto; }
.body-use-note { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); color: var(--muted); font-size: 13px; }
.body-use-note strong { color: var(--ink); font-weight: 500; }
.body-use-note .relation-tag { margin-left: auto; color: var(--red); }
.result-empty { display: grid; place-items: center; min-height: 320px; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius); color: var(--muted); }

/* Collapsible calculation details. */
.calculation-panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.calculation-heading { display: flex; align-items: center; gap: var(--space-2); min-height: 48px; padding: var(--space-2) var(--space-3); cursor: pointer; list-style: none; }
.calculation-heading h3, #calculation-title { margin: 0; color: var(--ink); font-size: 14px; font-weight: 500; }
.calculation-heading > span:last-child { margin-left: auto; color: var(--muted); font-size: 12px; }
.calculation-heading::after { color: var(--muted); font-size: 18px; content: "+"; }
.calculation-panel[open] .calculation-heading::after { content: "−"; }
.calculation-content { padding: 0 var(--space-3) var(--space-3); }
.number-inputs { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); padding: var(--space-3) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 12px; }
.number-input { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); border-radius: 4px; background: var(--soft); color: var(--muted); }
.number-input b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.number-plus { color: var(--muted); }
.calculation-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); padding-top: var(--space-3); }
.step-label { color: var(--muted); font-size: 12px; }
.calculation-grid p { margin: var(--space-1) 0; color: var(--ink); font-size: 15px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.step-result { color: var(--muted); font-size: 12px; }
.result-policy { margin: var(--space-3) 0 0; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }

/* Method library and sources. */
.knowledge-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); }
.knowledge-heading h2 { margin: var(--space-1) 0 0; font: 500 28px/1.4 var(--serif); letter-spacing: 1px; }
.knowledge-heading > span { color: var(--muted); font-size: 13px; }
.knowledge-intro { margin: 0 0 var(--space-4); color: var(--muted); font-size: 14px; }
.method-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.method-card { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.method-index { color: var(--muted); font-size: 12px; }
.method-card h3 { margin: var(--space-2) 0; font: 500 23px/1.5 var(--serif); }
.method-card > p { margin: 0 0 var(--space-3); color: var(--muted); font-size: 14px; line-height: 1.8; }
.method-card code { display: block; width: 100%; margin: auto 0 var(--space-2); padding: var(--space-2); border-radius: 4px; background: var(--soft); color: var(--ink); font-size: 13px; line-height: 1.8; white-space: normal; }
.method-card > button { width: 100%; padding: var(--space-1) 0; border: 0; background: transparent; font-size: 14px; text-align: left; }
.method-card > button:hover { color: var(--red); }
.method-card > a { display: inline-flex; align-items: center; min-height: 40px; margin-top: var(--space-1); color: var(--muted); font-size: 12px; }
.method-card > a:hover, .knowledge-note a:hover, .knowledge-sources > a:hover { text-decoration: underline; text-underline-offset: 4px; }
.modern-source { display: block; margin-top: var(--space-1); color: var(--muted); font-size: 12px; line-height: 1.8; }
.modern-method .method-index { color: var(--red); }
.knowledge-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: var(--space-4) 0; }
.knowledge-note { padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.knowledge-note h3, .knowledge-sources h3 { margin: var(--space-2) 0; font: 500 23px/1.5 var(--serif); }
.knowledge-note p:not(.small-label) { margin: 0 0 var(--space-2); color: var(--muted); font-size: 14px; line-height: 1.9; }
.knowledge-note a { display: inline-flex; align-items: center; min-height: 40px; color: var(--muted); font-size: 13px; }
.trigram-knowledge { padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
#trigram-knowledge-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--space-2); margin: var(--space-3) 0; }
.trigram-knowledge-item { padding: var(--space-2) var(--space-1); border: 1px solid var(--line); border-radius: var(--radius); text-align: center; }
.trigram-knowledge-item .trigram-symbol { display: block; font: 30px/1.3 serif; }
.trigram-knowledge-item strong { display: block; margin: var(--space-1) 0; font: 500 20px/1.4 var(--serif); }
.trigram-knowledge-item small { display: block; color: var(--muted); font-size: 12px; }
.trigram-knowledge > p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.9; }
.knowledge-sources { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.knowledge-sources > p:not(.small-label) { margin: var(--space-2) 0 var(--space-3); color: var(--muted); font-size: 14px; line-height: 1.9; }
.knowledge-sources > a { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-2); min-height: 40px; padding-block: var(--space-1); color: var(--ink); font-size: 13px; }
.knowledge-sources > a > span { color: var(--muted); font-size: 12px; }
.knowledge-sources .knowledge-version { margin-top: var(--space-3); font-size: 12px; }

/* Footer and local dialogs. Chart details define their own component styling. */
.site-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin-top: var(--space-5); padding: var(--space-3) 0 var(--space-4); border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.site-footer > span { font-family: var(--serif); font-size: 14px; }
.site-footer > div { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
.site-footer a { display: inline-flex; align-items: center; min-height: 40px; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.footer-button { display: inline-flex; align-items: center; min-height: 40px; padding: 0; border: 0; background: transparent; color: inherit; font-size: 12px; text-align: left; }
.footer-button:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
dialog { width: min(620px, calc(100% - 40px)); max-height: 88vh; padding: var(--space-4); overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--ink); box-shadow: 0 20px 60px #263f3520; }
dialog::backdrop { background: #263f3559; }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--line); }
.dialog-heading h2 { margin: var(--space-1) 0 0; font: 500 28px/1.4 var(--serif); }
.dialog-close { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: transparent; font-size: 28px; line-height: 1; }
.dialog-close:hover { background: var(--soft); }
.rules-body { color: var(--muted); font-size: 14px; line-height: 1.9; }
.rules-body > p { margin: var(--space-3) 0; }
.rules-body ol { padding-left: var(--space-4); }
.rules-body li { padding-left: var(--space-1); margin-top: var(--space-3); }
.rules-body strong { color: var(--ink); font-weight: 500; }
.rules-body li p { margin: var(--space-1) 0; }
.rules-source { padding-top: var(--space-3); border-top: 1px solid var(--line); font-size: 13px; }
.history-help { margin: var(--space-3) 0; color: var(--muted); font-size: 13px; }
.history-help p { margin: var(--space-1) 0; }
.data-info-body { color: var(--muted); font-size: 14px; line-height: 1.9; }
.data-info-body section { margin-top: var(--space-3); }
.data-info-body h3 { margin: 0 0 var(--space-1); color: var(--ink); font: 500 20px/1.5 var(--serif); }
.data-info-body p { margin: var(--space-1) 0 0; }
.history-empty { padding: var(--space-5) 0; color: var(--muted); font-family: var(--serif); text-align: center; }
.history-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-3); border-top: 1px solid var(--line); }
.history-text { min-width: 0; }
.history-text h3 { margin: 0 0 var(--space-1); font: 500 20px/1.5 var(--serif); }
.history-text p { margin: var(--space-1) 0; color: var(--muted); font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.history-meta { color: var(--muted); font-size: 12px; }
.history-controls { display: flex; align-items: center; gap: var(--space-1); flex: 0 0 auto; }
.history-controls button { padding: var(--space-1) var(--space-2); border: 1px solid var(--line); border-radius: var(--radius); background: var(--soft); font-size: 13px; }
.history-controls .delete-record { background: transparent; color: var(--red); }
.toast { position: fixed; z-index: 20; bottom: var(--space-4); left: 50%; transform: translateX(-50%); max-width: calc(100% - 40px); padding: var(--space-2) var(--space-3); border-radius: var(--radius); background: var(--ink); color: var(--panel); font-size: 13px; text-align: center; }
.active-view { animation: fade-in 160ms ease; }
@keyframes fade-in { from { opacity: .65; } to { opacity: 1; } }

/* Compact desktops keep the sidebar and the three primary form fields. */
@media (max-width: 1180px) {
  .site-header, .app-shell { width: calc(100% - 56px); }
  .app-shell { gap: var(--space-3); }
  .form-bottom { grid-template-columns: minmax(0, 1fr) 220px; }
  .policy-content { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .policy-content .setting-field:last-of-type { grid-column: 1 / -1; }
  .method-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Keep the date control readable beside the sidebar on compact screens. */
@media (min-width: 900px) and (max-width: 1080px) {
  #casting-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .method-field { grid-column: 1 / -1; }
  .time-field { grid-column: 1; }
  .location-field { grid-column: 2; }
  .question-field, .method-number-inputs, .method-form-hint { grid-column: 1 / -1; }
  .question-field textarea { min-height: 72px; }
  .method-form-hint { align-self: auto; }
}

/* Below 900px the sidebar becomes a closed-by-default navigation drawer. */
@media (max-width: 899px) {
  .site-header, .app-shell { width: calc(100% - 40px); }
  .site-header { gap: var(--space-2); }
  .header-brand-group { gap: var(--space-2); }
  .app-shell { display: block; }
  .app-shell > main { grid-column: auto; }
  .site-sidebar { position: fixed; z-index: 35; top: 76px; right: auto; bottom: 0; left: 0; width: min(280px, calc(100% - 40px)); min-height: 0; margin: 0; padding: var(--space-4) var(--space-3); overflow-y: auto; border-right: 1px solid var(--line); background: var(--panel); box-shadow: 12px 0 36px #263f351a; transform: translateX(-105%); visibility: hidden; pointer-events: none; transition: transform 180ms ease, visibility 180ms ease; }
  body.sidebar-open { overflow: hidden; }
  body.sidebar-open .site-sidebar { transform: translateX(0); visibility: visible; pointer-events: auto; }
  .sidebar-close { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-1); border: 1px solid var(--line); border-radius: var(--radius); background: transparent; font-size: 24px; line-height: 1; }
  .sidebar-close:hover { background: var(--soft); }
  .sidebar-backdrop { position: fixed; z-index: 30; top: 76px; right: 0; bottom: 0; left: 0; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: #263f354a; cursor: pointer; }
  body.sidebar-open .sidebar-backdrop { display: block; }
  .brand-name { font-size: 25px; }
  .intro { padding: var(--space-4) 0; }
  .intro-art { display: none; }
  h1 { font-size: 34px; }
  #casting-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .method-field { grid-column: 1 / -1; }
  .time-field { grid-column: 1; }
  .location-field { grid-column: 2; }
  .question-field, .method-number-inputs, .method-form-hint { grid-column: 1 / -1; }
  .question-field textarea { min-height: 72px; }
  .method-form-hint { align-self: auto; }
  .body-use-note .relation-tag { margin-left: 0; }
  .knowledge-row { grid-template-columns: 1fr; }
  #trigram-knowledge-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .method-card, .knowledge-note, .trigram-knowledge { padding: var(--space-3); }
  .knowledge-heading h2 { font-size: 26px; }
  .knowledge-sources > a { align-items: flex-start; }
  .knowledge-sources > a > span { width: 100%; }
  .site-footer { align-items: flex-start; }
  .site-footer > div { gap: var(--space-1) var(--space-3); }
  dialog { padding: var(--space-3); }
  .dialog-heading h2 { font-size: 25px; }
}

/* Small phones use one input column and readable stacked result cards. */
@media (max-width: 600px) {
  .brand-icon { display: none; }
  .brand-name { font-size: 24px; }
  .brand-subtitle { font-size: 9px; }
  .history-button { width: auto; padding: var(--space-1); font-size: 0; }
  .input-panel { padding: var(--space-3); }
  #casting-form { grid-template-columns: minmax(0, 1fr); }
  .method-field, .time-field, .location-field, .question-field, .method-number-inputs, .method-form-hint { grid-column: 1; }
  .location-controls { grid-template-columns: minmax(0, 1fr); }
  .method-number-inputs { grid-template-columns: minmax(0, 1fr); }
  input, textarea, select, input[type="datetime-local"] { font-size: 16px; }
  .question-field textarea { min-height: 88px; }
  .form-bottom { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .policy-content { grid-template-columns: minmax(0, 1fr); }
  .form-submit { width: 100%; }
  .result-heading { align-items: flex-start; flex-wrap: wrap; gap: var(--space-2); }
  .result-heading h2 { font-size: 26px; }
  .result-actions { gap: var(--space-1); }
  .save-button { padding-inline: var(--space-1); font-size: 12px; }
  .result-date { line-height: 1.8; }
  .trigram-strip { gap: 0; }
  .strip-item { gap: var(--space-1); padding-inline: var(--space-1); }
  .strip-label { width: 100%; text-align: center; }
  .strip-item strong { font-size: 18px; }
  .mini-trigram { font-size: 24px; }
  .moving-kind, .element-pill, .moving-dot { display: none; }
  .hexagram-grid { grid-template-columns: 1fr; gap: var(--space-2); }
  .hexagram-card { display: grid; grid-template-columns: 100px minmax(0, 1fr); align-items: center; column-gap: var(--space-3); }
  .card-heading { grid-column: 1 / -1; margin-bottom: var(--space-1); }
  .hexagram-figure { grid-column: 1; grid-row: 2 / span 2; height: 140px; margin: 0; }
  .yao { width: 76px; height: 7px; gap: var(--space-2); }
  .yao-label { left: -16px; }
  .yao.moving::after { right: -12px; top: 0; }
  .hexagram-name { grid-column: 2; align-items: flex-start; gap: var(--space-1); }
  .hexagram-name h4 { font-size: 26px; text-align: left; }
  .hexagram-caption { grid-column: 2; min-height: 0; margin: var(--space-1) 0; text-align: left; }
  .card-footer, .result-inspect { grid-column: 1 / -1; }
  .figure-legend { align-items: flex-start; }
  .rule-note { width: 100%; margin-left: var(--space-3); }
  .calculation-grid { grid-template-columns: 1fr; gap: var(--space-3); }
  .calculation-grid > div + div { padding-top: var(--space-2); border-top: 1px solid var(--line); }
  .calculation-grid p { font-size: 16px; }
  .number-plus { display: none; }
  .method-cards { grid-template-columns: 1fr; }
  .knowledge-heading { align-items: flex-start; }
  .history-row { align-items: flex-start; }
  .history-controls { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}