/*
 * Guanshi shared tool surfaces, 2026-10-25.
 * The existing DOM, component geometry, responsive rules and semantic diagram
 * colors stay in their original files. This layer changes surfaces and type
 * families only. All color and elevation values follow the active theme.
 */

/* Display type belongs to titles; controls, dates and calculations stay sans. */
#page-title,
.result-heading h2,
.knowledge-heading h2,
.coming-panel h2,
.method-card h3,
.knowledge-note h3,
.knowledge-sources h3,
.learning-steps h3,
.learning-next h3,
.hexagram-name h4,
.six-lines-input-title,
.six-lines-hexagram-name,
.liu-ren-final-name,
.chart-title,
.chart-cell-name,
.chart-dialog-heading h2,
.chart-overview-title,
.chart-reading-tools h3,
.chart-reference-heading h3,
.chart-related-name,
.chart-change-copy h4,
.dialog-heading h2,
.data-info-body h3,
.history-text h3,
.bazi-title,
.bazi-sheet-header h2,
.bazi-sheet-header h3,
.bazi-result-heading h2,
.bazi-section-heading h3 {
  font-family: var(--serif);
}

.input-panel :is(input, textarea, select),
.bazi-view :is(input, textarea, select),
.chart-filter-field :is(input, select),
.chart-view-toggle,
.chart-reading-options,
.six-lines-line-table,
.calculation-grid,
.number-inputs,
.bazi-pillars,
.bazi-elements,
.bazi-luck-list,
.bazi-year-list,
.bazi-context-list,
.bazi-record-meta,
.history-meta,
.chart-matrix th,
.chart-cell-number,
.chart-related-number {
  font-family: var(--sans);
}

/* A white page is the common foreground across every tool. */
.input-panel,
.hexagram-card,
.six-lines-hexagram-card,
.method-card,
.knowledge-note,
.trigram-knowledge,
.coming-panel,
.liu-ren-final,
.bazi-sheet,
.chart-matrix-scroller {
  border-color: var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--surface-shadow, 0 10px 32px rgb(40 74 104 / 0.055));
}

.calculation-panel,
.traditional-details,
.liu-ren-process,
.six-lines-input-list {
  border-color: var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.six-lines-input,
.chart-reading-plain,
.chart-reference-list,
.chart-change-result,
.chart-related-card,
.chart-empty,
.result-empty {
  border-color: var(--line);
  background: var(--paper);
}

.chart-hex-card {
  border-color: var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--surface-shadow, 0 10px 32px rgb(40 74 104 / 0.055));
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}
.chart-hex-card:hover {
  border-color: var(--accent-line, var(--line));
  background: var(--soft);
}

/* Quiet secondary layers keep inputs, rules and output distinguishable. */
.trigram-strip,
.question-display,
.number-input,
.method-card code,
.chart-matrix th,
.chart-view-toggle,
.chart-reading-modes,
.chart-reading-sizes,
.bazi-segment {
  border-color: var(--line);
  background: var(--soft);
}
.question-display { border-left-color: var(--ornament-gold); }
.chart-reading-ancient { border-left-color: var(--ornament-gold); }
.learning-steps > article { border-top-color: var(--ornament-gold); }
.chart-keyword { color: var(--accent-text); background: var(--soft); }
.chart-trigram-label { color: var(--ink); }

/* Clear field boundaries without changing native control sizes or behavior. */
.input-panel :is(input, textarea, select):not([type="radio"]):not([type="checkbox"]),
.bazi-view :is(input, textarea, select):not([type="radio"]):not([type="checkbox"]),
.chart-search,
.chart-select,
.bazi-records-tools select,
.bazi-save-controls select {
  border-color: var(--field-border, var(--field-line, var(--line)));
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  box-shadow: inset 0 1px 3px rgb(34 69 96 / 0.035);
}
.input-panel :is(input, textarea, select):not([type="radio"]):not([type="checkbox"]):focus,
.bazi-view :is(input, textarea, select):not([type="radio"]):not([type="checkbox"]):focus,
.chart-search:focus,
.chart-select:focus {
  border-color: var(--focus, var(--accent-text));
  outline-color: var(--focus, var(--accent-text));
  background: var(--panel);
}

/* Primary operations consistently use the deep-ink action token. */
.cast-button,
.traditional-button-primary,
.bazi-button-primary {
  border-color: var(--action-bg);
  background: var(--action-bg);
  color: var(--action-text);
  box-shadow: 0 5px 16px rgb(28 65 96 / 0.12);
}
.cast-button:hover:not(:disabled),
.traditional-button-primary:hover:not(:disabled),
.bazi-button-primary:hover:not(:disabled) {
  border-color: var(--action-hover);
  background: var(--action-hover);
  color: var(--action-text);
}

.save-button,
.icon-button,
.result-inspect,
.traditional-button:not(.traditional-button-primary),
.bazi-button:not(.bazi-button-primary),
.chart-detail-prev,
.chart-detail-next,
.chart-reference-full,
.chart-empty-reset,
.history-controls button:not(.delete-record) {
  border-color: var(--line);
  background: var(--panel);
  color: var(--ink);
}
.save-button:hover:not(:disabled),
.icon-button:hover:not(:disabled),
.result-inspect:hover:not(:disabled),
.traditional-button:not(.traditional-button-primary):hover:not(:disabled),
.bazi-button:not(.bazi-button-primary):hover:not(:disabled),
.chart-reference-full:hover,
.history-controls button:not(.delete-record):hover {
  border-color: var(--accent-line, var(--line));
  background: var(--soft);
}
.chart-toggle.is-active,
.chart-reading-mode-button.is-active,
.chart-reading-size-button.is-active,
.bazi-mode[aria-pressed="true"] {
  border-color: var(--action-bg);
  background: var(--action-bg);
  color: var(--action-text);
}
.chart-detail-jump.is-active { color: var(--accent-text); }
.chart-detail-jump.is-active::after { background: var(--ornament-gold); }
.chart-change-inspect,
.chart-supplemental-source { color: var(--accent-text); }

/* Numeric charts keep neutral paper surfaces and all source element colors. */
.bazi-pillars,
.bazi-year-list,
.bazi-record,
.history-row,
.six-lines-input-row,
.six-lines-line-table :is(th, td),
.chart-matrix :is(th, td) {
  border-color: var(--line);
}
.bazi-pillars { background: var(--panel); }
.bazi-pillar.is-day,
.bazi-element { background: var(--soft); }
.bazi-year { background: var(--panel); }
.bazi-luck { border-color: var(--line); background: var(--panel); }
.bazi-luck:hover,
.bazi-luck[aria-pressed="true"] {
  border-color: var(--accent-line, var(--line));
  background: var(--soft);
}
.bazi-art { border-color: var(--line); color: var(--accent-text); }
.bazi-art::before { border-color: var(--line); }
.bazi-art::after,
.bazi-eyebrow::before { background: var(--ornament-gold); }

/* Reading dialogs remain solid paper, with a themed backdrop behind them. */
dialog,
.chart-dialog {
  border-color: var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 24px 90px rgb(14 38 62 / 0.2);
}
dialog::backdrop { background: var(--backdrop, rgb(20 42 64 / 0.3)); }
.chart-dialog-top { border-color: var(--line); background: var(--panel); }
.dialog-heading,
.chart-reading-block,
.chart-readings,
.chart-reference-section,
.chart-relationships { border-color: var(--line); }
.dialog-close,
.chart-dialog .dialog-close { border-color: var(--line); background: var(--soft); color: var(--ink); }
.dialog-close:hover { background: var(--paper); }

/* No new movement is introduced; retain a calm appearance for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .chart-hex-card { transition: none; }
}