/* Shared display tokens and readability layer. Night mode uses a neutral ink palette. */
:root,
html[data-theme="light"] {
  --bg: #f7f3ef;
  --surface: #fffdfb;
  --surface-soft: #f0e9e4;
  --surface-strong: #e5ddd6;
  --text: #282322;
  --text-sub: #6f6662;
  --text-faint: #837772;
  --primary: #85495d;
  --primary-soft: #c996a6;
  --gold: #987640;
  --border: rgba(55, 43, 40, 0.13);
  --panel: var(--surface);
  --panel2: var(--surface-soft);
  --line: var(--border);
  --muted: var(--text-sub);
  --faint: var(--text-faint);
  --pink: var(--primary);
  --violet: #7663a6;
  --green: #397967;
  --danger: #b13f55;
  --shadow: 0 18px 48px rgba(55, 43, 40, 0.09);
}

html[data-theme="light"][data-default-category="work"] {
  --primary: #496b65;
  --primary-soft: #8eb0aa;
  --pink: var(--primary);
}

html[data-theme="night"] {
  --bg: #181a19;
  --surface: #222523;
  --surface-soft: #2b2f2c;
  --surface-strong: #353a36;
  --text: #f6f4ef;
  --text-sub: #d0ccc4;
  --text-faint: #aaa59c;
  --primary: #d59aad;
  --primary-soft: #ad7789;
  --gold: #c8aa6a;
  --border: rgba(255, 255, 255, 0.14);
  --panel: var(--surface);
  --panel2: var(--surface-soft);
  --line: var(--border);
  --muted: var(--text-sub);
  --faint: var(--text-faint);
  --pink: var(--primary);
  --violet: #aaa5b2;
  --green: #82b7a7;
  --danger: #ef9da6;
  --shadow: 0 22px 64px rgba(0, 0, 0, 0.28);
}

html[data-theme="light"] body {
  color: var(--text);
  background: linear-gradient(180deg, #fcfaf8, var(--bg));
}

html[data-theme="light"] .panel {
  background: var(--surface);
  box-shadow: var(--shadow);
}
html[data-theme="light"] .hero::after {
  background-image: linear-gradient(rgba(76, 39, 57, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(76, 39, 57, .055) 1px, transparent 1px);
}
html[data-theme="light"] .brand-seal,
html[data-theme="light"] .ghost-button,
html[data-theme="light"] .icon-button,
html[data-theme="light"] .secondary-button,
html[data-theme="light"] .choice-button,
html[data-theme="light"] .scope-metric,
html[data-theme="light"] .scope-list article,
html[data-theme="light"] .category-card,
html[data-theme="light"] .system-details details,
html[data-theme="light"] .daily-profile-note,
html[data-theme="light"] .daily-card,
html[data-theme="light"] .daily-day,
html[data-theme="light"] .iching-summary,
html[data-theme="light"] .iching-result-card,
html[data-theme="light"] .profile-card,
html[data-theme="light"] .insight-card,
html[data-theme="light"] .verdict-card,
html[data-theme="light"] .action-step {
  background-color: rgba(255, 255, 255, .62);
}
html[data-theme="light"] .reading-controls,
html[data-theme="light"] .result-tabs { background: rgba(255, 250, 251, .88); }
html[data-theme="light"] .field input,
html[data-theme="light"] .field select,
html[data-theme="light"] .reading-select,
html[data-theme="light"] .iching-field select,
html[data-theme="light"] .iching-manual select,
html[data-theme="light"] .data-item,
html[data-theme="light"] .planet,
html[data-theme="light"] .daily-action,
html[data-theme="light"] .score-ring > div,
html[data-theme="light"] .app-dialog {
  background: var(--surface);
  color: var(--text);
}
html[data-theme="light"] .field select option,
html[data-theme="light"] .reading-select option,
html[data-theme="light"] .iching-field select option,
html[data-theme="light"] .iching-manual select option { background: var(--surface); color: var(--text); }
html[data-theme="light"] .field input::placeholder { color: #938681; }
html[data-theme="light"] .daily-day.today { background: color-mix(in srgb, var(--primary-soft) 24%, transparent); border-color: color-mix(in srgb, var(--primary) 46%, transparent); }
html[data-theme="light"] .choice-button.active,
html[data-theme="light"] .iching-button.active,
html[data-theme="light"] .scope-tags .active {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary-soft) 27%, transparent);
  border-color: color-mix(in srgb, var(--primary) 40%, transparent);
}
html[data-theme="light"] .primary-button {
  color: #fff;
  background: var(--primary);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--primary) 18%, transparent);
}
html[data-theme="light"] .primary-button:hover { background: color-mix(in srgb, var(--primary) 88%, #000); }
html[data-theme="light"] .result-tab.active {
  color: #fff;
  background: var(--primary);
}
html[data-theme="light"] .progress span { background: linear-gradient(90deg, var(--primary), var(--gold)); }
html[data-theme="light"] .action-step b { color: var(--primary); background: color-mix(in srgb, var(--primary-soft) 24%, transparent); }
html[data-theme="light"] .toast { background: #fffafb; color: var(--text); box-shadow: var(--shadow); }
html[data-theme="light"] .app-dialog::backdrop { background: rgba(44, 23, 34, .26); }

/* Night mode is intentionally calm and neutral, not a separate occult visual system. */
html[data-theme="night"] body {
  background: linear-gradient(180deg, #1c1f1d, var(--bg));
}
html[data-theme="night"] .field input,
html[data-theme="night"] .field select,
html[data-theme="night"] .reading-select,
html[data-theme="night"] .iching-field select,
html[data-theme="night"] .iching-manual select { background: var(--surface); }
html[data-theme="night"] .app-dialog { background: var(--surface); }
html[data-theme="night"] .choice-button.active,
html[data-theme="night"] .iching-button.active { color: #fff1f6; }

/* Results are prose first: readable size, line-height, contrast and measure. */
.hero-lead,
.section-head > p,
.scope-lead,
.result-summary > p:not(.eyebrow),
.system-title > p,
.verdict-card p,
.insight-card p,
.action-step p,
.category-card p,
.system-details p,
.daily-card p,
.daily-action span,
.daily-direction,
.iching-summary p,
.iching-result-card p,
.theme-dialog-lead {
  color: var(--muted);
  font-size: clamp(.94rem, 1.3vw, 1rem);
  line-height: 1.8;
}

.result-content .insight-card p,
.result-content .system-title > p,
.system-details article,
.verdict-card p,
.action-step p { max-width: 45em; }

.hero h1 { font-size: clamp(2.25rem, 4.7vw, 4.35rem); }

/* The primary reading flow appears before the optional daily and I Ching tools. */
.hero-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.hero-primary { width: auto; text-decoration: none; }
.hero-secondary { min-height: 44px; display: inline-flex; align-items: center; padding: 0 15px; border: 1px solid var(--border); border-radius: 14px; color: var(--text-sub); text-decoration: none; font-size: .82rem; font-weight: 700; transition: .2s; }
.hero-secondary:hover { border-color: var(--primary-soft); color: var(--primary); transform: translateY(-1px); }
.hero-quiet-link { display: inline-flex; margin-top: 13px; color: var(--text-sub); font-size: .82rem; font-weight: 700; text-decoration: none; }
.hero-quiet-link:hover { color: var(--primary); }
.hero-quiet-link i { margin-left: 6px; font-style: normal; }
.hero-note { margin: 12px 0 0; color: var(--text-sub); font-size: .76rem; }
.work-seo-intro { margin-top: 20px; }
.work-seo-intro h2 { margin: 0; font-family: "Yu Mincho", Georgia, serif; font-weight: 500; }
.work-seo-intro > p { max-width: 52em; margin: 12px 0 0; color: var(--text-sub); line-height: 1.8; }
.work-seo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.work-seo-grid article { min-width: 0; padding: 22px 24px; border: 1px solid var(--border); border-radius: 17px; background: color-mix(in srgb, var(--surface-soft) 72%, transparent); }
.work-seo-grid h3 { margin: 0; color: var(--primary); font-size: 1rem; line-height: 1.55; }
.work-seo-grid p { margin: 10px 0 0; color: var(--text-sub); font-size: .9rem; line-height: 1.85; }

/* Progressive profile entry keeps the first screen focused on the minimum data needed. */
.quick-entry-note { grid-column: 1 / -1; display: grid; gap: 3px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 15px; background: color-mix(in srgb, var(--surface-soft) 78%, transparent); }
.quick-entry-note strong { color: var(--primary); font-size: .9rem; }
.quick-entry-note span { color: var(--text-sub); font-size: .84rem; line-height: 1.7; }
.advanced-inputs-wrap { grid-column: 1 / -1; }
.advanced-inputs { border: 1px solid var(--border); border-radius: 17px; background: color-mix(in srgb, var(--surface) 82%, transparent); }
.advanced-inputs summary { padding: 15px 17px; color: var(--primary); cursor: pointer; font-weight: 700; font-size: .9rem; }
.advanced-inputs > p { margin: 0; padding: 0 17px 15px; color: var(--text-sub); font-size: .84rem; }
.advanced-input-grid { padding: 0 17px 17px; }

/* Birthplace is entered as a familiar place name; exact coordinates stay optional. */
.birth-location-card { grid-column: 1 / -1; margin-top: 5px; padding: 20px; border: 1px solid var(--border); border-radius: 17px; background: color-mix(in srgb, var(--surface-soft) 70%, transparent); }
.birth-location-card .subsection-head { align-items: flex-start; gap: 16px; }
.birth-location-card .subsection-head strong { color: var(--text); }
.birth-location-card .subsection-head small { max-width: 52em; color: var(--text-sub); font-size: .82rem; line-height: 1.75; }
.birth-location-grid { gap: 14px; }
.birth-map-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.birth-map-actions span { color: var(--text-sub); font-size: .78rem; }
.map-link { display: inline-flex; align-items: center; min-height: 42px; padding: 0 14px; border: 1px solid var(--border); border-radius: 12px; color: var(--primary); background: var(--surface); font-size: .82rem; font-weight: 800; text-decoration: none; }
.map-link:hover { border-color: var(--primary-soft); transform: translateY(-1px); }
.coordinate-details { grid-column: 1 / -1; border-top: 1px solid var(--border); padding-top: 12px; }
.coordinate-details > summary { color: var(--primary); cursor: pointer; font-size: .84rem; font-weight: 800; }
.coordinate-details > p { margin: 8px 0 14px; color: var(--text-sub); font-size: .82rem; line-height: 1.75; }
.coordinate-details > .form-grid { padding: 2px 0 0; }
.inline-input-action { display: flex; gap: 8px; }
.inline-input-action input { min-width: 0; }
.inline-input-action button { flex: none; min-height: 50px; padding: 0 13px; border: 1px solid var(--border); border-radius: 12px; color: var(--primary); background: var(--surface-soft); cursor: pointer; font-size: .8rem; font-weight: 800; }
.field input.auto-filled { color: var(--text-sub); background: color-mix(in srgb, var(--surface-soft) 76%, transparent); }
[data-prefecture-field].location-mode-hidden { display: none; }
.person-form-next { display: none; grid-column: 1 / -1; margin-top: 4px; padding-top: 20px; border-top: 1px solid var(--border); }
.partner-enabled .person-form-next { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.person-form-next button { min-height: 46px; padding: 0 17px; border: 1px solid var(--primary-soft); border-radius: 13px; color: var(--primary); background: color-mix(in srgb, var(--primary-soft) 18%, var(--surface)); cursor: pointer; font-weight: 800; }
.person-form-next small { color: var(--text-sub); }
.person-tab { display: grid; gap: 2px; text-align: left; }
.person-tab span { margin: 0; color: var(--primary); font-size: .64rem; font-weight: 800; letter-spacing: .08em; }
.person-tab strong { font-size: .84rem; }
.person-tab small { color: var(--text-faint); font-size: .68rem; }
.input-panel.sample-loaded { animation: sample-confirm .55s ease; }
@keyframes sample-confirm { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-soft) 30%, transparent), var(--shadow); } }

/* Time axis and evidence are first-class result information. */
.score-ring.period-ring { background: conic-gradient(var(--primary) 100%, transparent 0); }
.score-ring.period-ring strong { font-family: "Yu Mincho", Georgia, serif; font-size: 1.65rem; }
.reading-period-banner { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 12px; row-gap: 4px; margin: 0 0 22px; padding: 16px 18px; border-left: 3px solid var(--primary); border-radius: 0 14px 14px 0; background: color-mix(in srgb, var(--surface-soft) 74%, transparent); }
.reading-period-banner span { color: var(--text-faint); font-size: .72rem; font-weight: 800; }
.reading-period-banner strong { color: var(--primary); font-size: 1rem; }
.reading-period-banner p { grid-column: 1 / -1; max-width: 48em; margin: 0; color: var(--text-sub); font-size: .88rem; line-height: 1.75; }
.category-card { padding: 18px; }
.category-card b { line-height: 1.45; }
.category-card-evidence { margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--border); }
.category-card-evidence summary { color: var(--primary); cursor: pointer; font-size: .78rem; font-weight: 800; }
.category-card-evidence p { font-size: .8rem; }
.timing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.timing-grid .insight-card { margin: 0; }
.timing-grid small { display: block; margin-bottom: 5px; color: var(--text-faint); font-size: .72rem; }
.timing-grid strong { color: var(--primary); font-size: .86rem; }
.timing-evidence { margin-top: 12px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; background: color-mix(in srgb, var(--surface) 82%, transparent); }
.timing-evidence summary { color: var(--primary); cursor: pointer; font-size: .82rem; font-weight: 800; }
.timing-evidence p { margin: 9px 0 0; color: var(--text-sub); font-size: .82rem; line-height: 1.75; }
.verdict-grid.work-verdict-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.work-verdict-card { align-self: start; }
.work-verdict-card:first-child { grid-column: 1 / -1; }
.work-verdict-card > p + p { margin-top: 10px; }
.verdict-points { display: grid; gap: 9px; margin: 14px 0 0; padding: 0; list-style: none; }
.verdict-points li { padding-top: 9px; border-top: 1px solid var(--border); }
.verdict-points b, .verdict-points span { display: block; }
.verdict-points b { color: var(--primary); font-size: .76rem; }
.verdict-points span { margin-top: 3px; color: var(--text-sub); font-size: .82rem; line-height: 1.7; }
.verdict-facts { display: grid; gap: 9px; margin: 14px 0 0; }
.verdict-facts div { padding-top: 9px; border-top: 1px solid var(--border); }
.verdict-facts dt { color: var(--primary); font-size: .74rem; font-weight: 800; }
.verdict-facts dd { margin: 3px 0 0; color: var(--text-sub); font-size: .82rem; line-height: 1.7; }
.category-card.has-sections { grid-column: 1 / -1; }
.category-card.support { border-top: 3px solid color-mix(in srgb, var(--primary) 72%, #557d70); }
.category-card.friction { border-top: 3px solid color-mix(in srgb, var(--gold) 72%, #9f5d4e); }
.category-card.mixed { border-top: 3px solid var(--border); }
.category-card-evidence { margin-top: 13px; padding-top: 10px; border-top: 1px solid var(--border); }
.category-card-evidence summary { color: var(--primary); cursor: pointer; font-size: .74rem; font-weight: 800; }
.category-card-evidence p { margin-top: 7px; color: var(--text-sub); font-size: .78rem; line-height: 1.75; }
.reading-limit-card { margin-top: 18px; padding: 16px 18px; border-left: 3px solid var(--gold); border-radius: 0 14px 14px 0; background: color-mix(in srgb, var(--surface-soft) 72%, transparent); }
.reading-limit-card strong { color: var(--text); font-size: .86rem; }
.reading-limit-card p { margin: 6px 0 0; color: var(--text-sub); font-size: .84rem; line-height: 1.75; }
.category-card-sections { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 15px; }
.category-card-sections > div { padding: 13px; border: 1px solid var(--border); border-radius: 12px; background: color-mix(in srgb, var(--surface-soft) 70%, transparent); }
.category-card-sections strong { color: var(--primary); font-size: .8rem; }
.category-card-sections p { margin-top: 5px; }
.work-forecast { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border); }
.work-forecast-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.work-forecast-heading h3 { margin: 0; font-family: "Yu Mincho", Georgia, serif; font-size: 1.35rem; font-weight: 500; }
.work-forecast-heading > p { max-width: 480px; margin: 0; color: var(--text-sub); font-size: .82rem; }
.forecast-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.forecast-card { padding: 18px; border: 1px solid var(--border); border-radius: 16px; background: color-mix(in srgb, var(--surface) 88%, transparent); }
.forecast-card.current { border-color: var(--primary-soft); box-shadow: inset 0 3px 0 var(--primary); }
.forecast-card > small { display: block; color: var(--text-faint); font-size: .72rem; }
.forecast-card h4 { margin: 5px 0 8px; color: var(--primary); font-family: "Yu Mincho", Georgia, serif; font-size: 1.05rem; }
.forecast-card > p { margin: 0; color: var(--text-sub); font-size: .84rem; line-height: 1.75; }
.forecast-card dl { display: grid; gap: 8px; margin: 14px 0 0; }
.forecast-card dl div { padding-top: 8px; border-top: 1px solid var(--border); }
.forecast-card dt { color: var(--text-faint); font-size: .7rem; font-weight: 800; }
.forecast-card dd { margin: 2px 0 0; color: var(--text); font-size: .8rem; line-height: 1.65; }
.forecast-card details { margin-top: 12px; }
.forecast-card summary { color: var(--primary); cursor: pointer; font-size: .72rem; font-weight: 800; }
.forecast-card details p { margin: 7px 0 0; color: var(--text-faint); font-size: .74rem; line-height: 1.7; }
.overview-detail-list { display: grid; gap: 8px; margin-top: 14px; }
.overview-detail-list > div { padding: 11px 12px; border-left: 2px solid var(--primary); background: color-mix(in srgb, var(--surface-soft) 72%, transparent); }
.overview-detail-list b, .overview-detail-list span { display: block; }
.overview-detail-list b { color: var(--primary); font-size: .76rem; }
.overview-detail-list span { margin-top: 3px; color: var(--text-sub); font-size: .82rem; line-height: 1.7; }
.system-details article h3:not(:first-child) { margin-top: 18px; }

/* Optional choices stay one level below the main question selector. */
.reading-controls { grid-template-columns: minmax(220px, 1.15fr) minmax(210px, .9fr) minmax(210px, .9fr); }
.reading-option-details { min-width: 0; position: relative; }
.reading-option-details > summary { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 13px; border: 1px solid var(--border); border-radius: 13px; color: var(--text-sub); background: color-mix(in srgb, var(--surface) 88%, transparent); cursor: pointer; list-style: none; }
.reading-option-details > summary::-webkit-details-marker { display: none; }
.reading-option-details > summary span { display: grid; gap: 1px; min-width: 0; }
.reading-option-details > summary small { color: var(--primary); font-size: .68rem; font-style: normal; }
.reading-option-details > summary b { overflow: hidden; color: var(--text); font-size: .83rem; text-overflow: ellipsis; white-space: nowrap; }
.reading-option-details > summary em { flex: none; color: var(--text-sub); font-size: .72rem; font-style: normal; }
.reading-option-details > summary em::after { content: "＋"; margin-left: 6px; color: var(--primary); }
.reading-option-details[open] > summary { border-color: var(--primary-soft); }
.reading-option-details[open] > summary em::after { content: "−"; }
.reading-option-details > .control-block,
.other-category-buttons { position: absolute; z-index: 8; top: calc(100% + 7px); left: 0; width: 100%; margin: 0; padding: 11px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); box-shadow: var(--shadow); }
.other-category-buttons { display: flex; flex-wrap: wrap; gap: 7px; }
.category-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

.microcopy,
.data-note,
.daily-method-note,
.disclaimer,
.daily-week-head p,
.iching-note,
.scope-metric span,
.category-card small,
.daily-score span,
.daily-day em,
.system-details small { color: var(--faint); font-size: .82rem; line-height: 1.7; }

.field label,
.field-title { color: var(--text-sub); font-size: .88rem; }
.control-label,
.iching-field label { color: var(--text-sub); font-size: .8rem; }
.daily-action { background: color-mix(in srgb, var(--surface-soft) 80%, transparent); }
.daily-action b { font-size: .8rem; }
.daily-day span { color: var(--muted); font-size: .82rem; line-height: 1.65; }
.daily-day time { font-size: .82rem; }
.daily-card > small,
.iching-result-card small { font-size: .74rem; }
.result-tab,
.choice-button,
.reading-select,
.iching-button { font-size: .86rem; }
.system-details summary { color: var(--primary); font-size: .94rem; }
.result-metrics i { display: block; margin-top: 1px; color: var(--text-faint); font-size: .68rem; font-style: normal; line-height: 1.45; }

.theme-dialog { max-width: 640px; }
.theme-dialog-lead { margin: 0; }
.theme-options { display: grid; gap: 10px; margin-top: 20px; }
.theme-option {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 16px;
  text-align: left;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 15px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  cursor: pointer;
}
.theme-option b { color: var(--primary); font-size: 1rem; }
.theme-option span { color: var(--muted); font-size: .9rem; line-height: 1.7; }
.theme-option.active { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-soft) 32%, transparent); }

/* The result is a readable report. A single total score is deliberately secondary. */
.result-reference {
  width: 118px;
  min-height: 104px;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 18px;
  color: var(--text-sub);
  background: color-mix(in srgb, var(--surface-soft) 72%, transparent);
  text-align: center;
}
.result-reference small { color: var(--text-faint); font-size: .68rem; font-weight: 800; }
.result-reference strong { color: var(--primary); font-family: "Yu Mincho", Georgia, serif; font-size: 1.45rem; font-weight: 600; line-height: 1.2; }
.result-reference span { color: var(--text-faint); font-size: .66rem; line-height: 1.4; }
.result-reference.has-score { border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); }
.confidence-explanation { max-width: 54em; margin: 16px 0 0; padding: 13px 15px; border-left: 3px solid var(--primary); color: var(--text-sub); background: color-mix(in srgb, var(--surface-soft) 72%, transparent); font-size: .84rem; line-height: 1.75; }
.confidence-explanation strong { color: var(--text); }

.axis-section { margin: 28px 0 34px; padding: 24px 0 30px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.axis-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.axis-heading h3 { margin: 0; font-family: "Yu Mincho", Georgia, serif; font-size: 1.4rem; font-weight: 500; }
.axis-heading > p { max-width: 34em; margin: 0; color: var(--text-sub); font-size: .84rem; line-height: 1.75; }
.reference-score-note { margin: 16px 0 0; color: var(--text-faint); font-size: .78rem; line-height: 1.7; text-align: right; }

.report-synthesis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 26px 0; }
.report-synthesis > article { min-width: 0; padding: 18px; border: 1px solid var(--border); border-radius: 16px; background: color-mix(in srgb, var(--surface) 86%, transparent); }
.report-synthesis > article > span { display: block; margin-bottom: 10px; color: var(--primary); font-size: .78rem; font-weight: 800; }
.report-synthesis .conflict > span { color: #a4653d; }
.report-synthesis .insufficient > span { color: var(--text-faint); }
.report-synthesis ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.report-synthesis li + li { padding-top: 10px; border-top: 1px solid var(--border); }
.report-synthesis li strong,
.report-synthesis li span,
.report-synthesis li small { display: block; }
.report-synthesis li strong { color: var(--text); font-size: .84rem; }
.report-synthesis li span { margin-top: 3px; color: var(--text-sub); font-size: .78rem; line-height: 1.65; }
.report-synthesis li small { margin-top: 4px; color: var(--text-faint); font-size: .68rem; }
.report-empty { margin: 0; color: var(--text-sub); font-size: .8rem; line-height: 1.7; }

.report-toc { margin: 30px 0; padding: 22px; border: 1px solid var(--border); border-radius: 18px; background: color-mix(in srgb, var(--surface-soft) 68%, transparent); }
.report-toc > p { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin: 0 0 16px; }
.report-toc > p strong { color: var(--text); font-family: "Yu Mincho", Georgia, serif; font-size: 1.08rem; }
.report-toc > p span { color: var(--text-faint); font-size: .75rem; }
.report-toc > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.report-toc a { display: flex; align-items: baseline; gap: 8px; min-width: 0; padding: 9px 10px; border-radius: 10px; color: var(--text-sub); background: color-mix(in srgb, var(--surface) 80%, transparent); font-size: .78rem; line-height: 1.5; text-decoration: none; }
.report-toc a:hover { color: var(--primary); background: var(--surface); }
.report-toc a span { flex: none; color: var(--primary); font-family: Georgia, serif; font-size: .66rem; }

.report-chapters { display: grid; gap: 16px; }
.report-chapter { scroll-margin-top: 88px; padding: clamp(22px, 3.2vw, 34px); border: 1px solid var(--border); border-radius: 19px; background: color-mix(in srgb, var(--surface) 91%, transparent); }
.report-chapter header { display: grid; grid-template-columns: 38px 1fr; align-items: start; gap: 12px; margin-bottom: 16px; }
.report-chapter header > span { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border)); border-radius: 50%; color: var(--primary); font-family: Georgia, serif; font-size: .72rem; }
.report-chapter header small { display: block; margin-bottom: 3px; color: var(--text-faint); font-size: .7rem; font-weight: 800; }
.report-chapter h3 { margin: 0; color: var(--text); font-family: "Yu Mincho", Georgia, serif; font-size: clamp(1.15rem, 2vw, 1.38rem); font-weight: 500; }
.report-chapter > p { max-width: 45em; margin: 12px 0 0; color: var(--text-sub); font-size: 1rem; line-height: 1.86; text-align: left; }
.report-chapter .report-chapter-summary { margin-top: 0; color: var(--text); font-weight: 700; }
.report-chapter details { max-width: 48em; margin-top: 18px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: color-mix(in srgb, var(--surface-soft) 68%, transparent); }
.report-chapter summary { color: var(--primary); cursor: pointer; font-size: .78rem; font-weight: 800; }
.report-chapter details p { margin: 8px 0 0; color: var(--text-faint); font-size: .78rem; line-height: 1.75; }
.report-back-link { display: inline-flex; margin-top: 18px; color: var(--text-faint); font-size: .72rem; text-decoration: none; }
.report-back-link:hover { color: var(--primary); }
.forecast-summary { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--border); }
.forecast-summary h3 { margin: 0; font-family: "Yu Mincho", Georgia, serif; font-weight: 500; }
.forecast-summary > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.forecast-summary article { padding: 15px; border: 1px solid var(--border); border-radius: 13px; background: color-mix(in srgb, var(--surface-soft) 70%, transparent); }
.forecast-summary small,
.forecast-summary strong { display: block; }
.forecast-summary small { color: var(--text-faint); font-size: .7rem; }
.forecast-summary strong { margin-top: 3px; color: var(--primary); font-size: .9rem; }
.forecast-summary p { margin: 7px 0 0; color: var(--text-sub); font-size: .78rem; line-height: 1.65; }

.work-context-fields { margin-top: 0; padding: 18px; border: 1px solid var(--border); border-radius: 16px; background: color-mix(in srgb, var(--surface-soft) 70%, transparent); }
.work-context-fields .subsection-head { align-items: flex-start; }
.work-context-fields .subsection-head small { max-width: 48em; color: var(--text-sub); line-height: 1.7; }

@media (max-width: 900px) {
  .reading-controls { grid-template-columns: 1fr 1fr; }
  .reading-controls > .control-block:first-child { grid-column: 1 / -1; }
  .timing-grid { grid-template-columns: 1fr; }
  .forecast-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .category-card-sections { grid-template-columns: 1fr; }
  .report-synthesis { grid-template-columns: 1fr; }
  .report-toc > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .forecast-summary > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .top-actions #themeButton,
  .top-actions #sampleButton { display: inline-flex; }
  .hero-lead,
  .section-head > p,
  .scope-lead,
  .result-summary > p:not(.eyebrow),
  .system-title > p,
  .verdict-card p,
  .insight-card p,
  .action-step p,
  .category-card p,
  .system-details p,
  .daily-card p,
  .daily-action span,
  .daily-direction,
  .iching-summary p,
  .iching-result-card p { font-size: 1rem; }
  .result-hero { justify-items: stretch; text-align: left; }
  .result-reference { width: 100%; min-height: auto; grid-template-columns: auto auto 1fr; align-items: baseline; justify-content: start; text-align: left; }
  .verdict-grid.work-verdict-grid { grid-template-columns: 1fr; }
  .work-forecast-heading { align-items: flex-start; flex-direction: column; }
  .forecast-grid { grid-template-columns: 1fr; }
  .result-metrics { justify-content: flex-start; }
  .result-buttons { width: 100%; }
  .result-tabs { top: 6px; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-primary,
  .hero-secondary { width: 100%; }
  .hero-secondary { justify-content: center; }
  .quick-entry-note span,
  .advanced-inputs > p { font-size: .9rem; }
  .reading-controls { grid-template-columns: 1fr; }
  .reading-controls > .control-block:first-child { grid-column: auto; }
  .reading-option-details { width: 100%; }
  .reading-option-details > .control-block,
  .other-category-buttons { position: static; width: 100%; margin-top: 7px; background: transparent; box-shadow: none; }
  .work-seo-grid { grid-template-columns: 1fr; }
  .birth-location-card { padding: 16px; }
  .birth-location-card .subsection-head { flex-direction: column; }
  .inline-input-action { align-items: stretch; flex-direction: column; }
  .inline-input-action button { width: 100%; }
  .reading-period-banner { grid-template-columns: 1fr; }
  .reading-period-banner p { grid-column: auto; }
  .person-tabs { display: grid; grid-template-columns: 1fr 1fr; }
  .person-tab { padding: 12px 10px; }
  .axis-heading { align-items: flex-start; flex-direction: column; }
  .report-toc { padding: 17px; }
  .report-toc > p { align-items: flex-start; flex-direction: column; }
  .report-toc > div,
  .forecast-summary > div { grid-template-columns: 1fr; }
  .report-chapter { padding: 20px 17px; }
  .report-chapter header { grid-template-columns: 32px 1fr; gap: 9px; }
}

@media (max-width: 420px) {
  .top-actions { gap: 5px; }
  .top-actions #themeButton,
  .top-actions #sampleButton { width: 42px; padding: 0; justify-content: center; overflow: hidden; font-size: 0; }
  .top-actions #themeButton::before { content: "◐"; font-size: 1rem; }
  .top-actions #sampleButton::before { content: "例"; font-size: .78rem; font-weight: 800; }
}