/* Production UI contract. Numeric design values live here; see docs/production/07-界面设计规范.md. */
:root {
  /* Instrument-only design exception; never use for regular auxiliary copy. */
  --font-dial-tick: 12px;
  --font-aux: 13px;
  --font-control: 14px;
  --font-body: 15px;
  --font-prose: 16px;
  --font-section: 18px;
  --font-title: 24px;
  --font-metric: 32px;
  --font-display: 48px;
  --line-body: 1.6;
  --line-heading: 1.4;
  --line-metric: 1.25;
  --radius-control: 8px;
  --radius-card: 12px;
  --radius-panel: 16px;
  --radius-composer: 20px;
  --control-height: 40px;
  --control-height-compact: 32px;
  --shadow-none: none;
  --shadow-card: 0 4px 16px #16314e0a;
  --shadow-float: 0 12px 32px #16314e1a;
  --shadow-dialog: 0 24px 72px #0d233d2b;
  --ui-ink: #243247;
  --ui-muted: #66768c;
  --ui-line: #dce5ee;
  --ui-line-strong: #bed1e0;
  --ui-canvas: #f5f8fc;
  --ui-surface: #fff;
  --ui-subtle: #f8fafc;
  --ui-primary: #c90816;
  --ui-primary-soft: #fff1f2;
  --ui-accent: #0078b8;
  --ui-accent-soft: #eef7fd;
  --ui-success: #218567;
  --ui-warning: #9d6c0c;
  --ui-danger: #b42332;
  --motion-fast: 120ms;
  --motion-state: 180ms;
  --motion-page: 200ms;
  --motion-ease: cubic-bezier(.2, .8, .2, 1);
}

/* Inherited text is body text. Browser defaults must not introduce 13.333px buttons or 83% small text. */
.fusion-new, .security-page, .production-management, .mg-dialog {
  font-size: var(--font-body);
  line-height: var(--line-body);
}
:where(.fusion-new, .security-page) :where(button, input, select, textarea, table, th, td, h1, h2, h3, h4, small, sub, sup) {
  font-size: inherit;
}
:where(.fusion-new, .security-page) :where(button, input, select, textarea, table) {
  font-size: var(--font-control);
}
:where(.fusion-new, .security-page) :where(h1, h2, h3, h4) { line-height: var(--line-heading); }
:where(.fusion-new, .security-page) :where(h1) { font-size: var(--font-title); }
:where(.fusion-new, .security-page) :where(h2, h3, h4) { font-size: var(--font-section); }

/* Shared header, section titles and actions. */
.f6-brand>span:last-child>b, .f6-heading h1, .f6-detail-heading h2,
.production-management h2, .security-page h1 { font-size: var(--font-title); }
.f6-panel-head h2, .f6-stage-top h2, .f6-section-title h2,
.f6-enterprise-honors h2, .f6-outcomes h3, .f6-dialog-head h2,
.production-management h3, .mg-dialog h2, .mg-dialog h3, .security-page h2,
.upload-dropzone strong { font-size: var(--font-section); }
.f6-nav>button, .f6-tools a, .f6-timeline-controls button, .f6-timeline-controls input[type=date],
.f6-button, .f6-icon-button, .f6-text-button, .f6-map-legend button, .f6-map-note button,
.f6-legion-selector>button, .f6-company-name, .f6-row-link, .f6-pager button,
.f6-filters input, .f6-filters select, .f6-inline-tools select, .f6-table,
.f6-table th, .f6-table td, .f6-table th button, .f6-table td>b,
.production-management button, .mg-dialog button, .upload-picker,
.security-page button, .security-page td button, .security-page input, .security-page select {
  font-size: var(--font-control);
}
.f6-kpis article>span, .f6-hero-totals span,
.f6-honor-list button>span>b, .f6-honor-list button>strong,
.f6-rank-list>button>span>b, .f6-outcomes dt, .f6-outcomes dl>div,
.f6-legion-summary, .f6-timeline-label>b { font-size: var(--font-body); }

/* Auxiliary copy remains readable, including chart ticks, units and table notes. */
:where(.fusion-new, .security-page) small, .f6-eyebrow, .f6-pill, .f6-account,
.f6-brand>span:last-child>small, .f6-tools .clock, #clock, .f6-nav>button>span,
.f6-timeline-label>span, .f6-timeline-label>small, .f6-timeline-controls>span,
.f6-heading p, .f6-detail-heading p, .f6-panel-head>span, .f6-section-title p,
.f6-gauge-status, .f6-gauge>small, .f6-dial>strong>small, .f6-map-note,
.f6-glory-name>small, .f6-glory-name>strong>span, .f6-legion-glory>div>span,
.f6-legion-glory>div>b small, .f6-honor-foot, .f6-honor-count span,
.f6-honor-list button>span>small, .f6-rank-list>button small,
.f6-outcomes article>small, .f6-chart-note, .f6-chart-legend,
.f6-filters label, .f6-inline-tools label, .f6-inline-tools, .f6-pager,
.f6-kpis article small, .f6-goal-node>span, .f6-goal-node>b,
.f6-table small, .f6-table th small, .f6-company-table .f6-metric-inline>small,
.upload-file small, .fusion-chart-tooltip small, #production-status {
  font-size: var(--font-aux);
}
.ui-prose { font-size: var(--font-prose); line-height: 1.75; }

/* Metrics have their own scale; never enlarge a missing-value label. */
.f6-dial>strong, .f6-kpis article>strong, .f6-hero-totals b, .f6-gear-core-value {
  font-size: var(--font-metric);
  line-height: var(--line-metric);
  font-variant-numeric: tabular-nums;
}
.f6-honor-count strong, .f6-honor-crest { font-size: var(--font-display); }
.f6-glory-name>strong, .f6-legion-glory>div>b { font-size: var(--font-title); }
.f6-outcomes dd, .f6-rank-list>button>strong, .f6-rank-list>button>em,
.f6-legion-summary b { font-size: var(--font-section); }
.f6-kpis article>div>b, .f6-metric-inline>b, .f6-rank-number,
.f6-honor-list button>em { font-size: var(--font-control); }

/* SVG text uses the same roles in its drawing coordinate system. Charts and
   gear diagrams remain proportional graphics; HTML labels never scale. */
.fusion-new svg text { font-size: var(--font-aux); }
.fusion-new svg .f6-gear-name, .fusion-new svg .f6-gear-core-label,
.fusion-new svg .f6-gear-value { font-size: var(--font-section); }
.fusion-new svg .f6-gear-meta { font-size: var(--font-control); }
.fusion-new svg .f6-gear-core-value { font-size: var(--font-metric); }
.fusion-chart-tooltip { width: min(560px, calc(100vw - 24px)); max-width: min(560px, calc(100vw - 24px)); font-size: var(--font-control); box-shadow: var(--shadow-float); }
.fusion-chart-tooltip .fc-tooltip-row { column-gap: 16px; }
.fusion-chart-tooltip .fc-tooltip-row strong { margin-left: 24px; }
.fc-tooltip-date { font-size: var(--font-control); }

/* Structural radii and four elevation levels; ui/ composes the shared surfaces. */
.f6-panel, .mg-dialog, .f6-dialog { border-radius: var(--radius-panel); }
.f6-kpis>article, .f6-outcomes>article, .f6-hero-totals>div, .mg-card,
.media-gallery article, .security-card, .f6-timeline { border-radius: var(--radius-card); }
.f6-panel, .mg-card, .security-card, .f6-kpis>article, .f6-outcomes>article { box-shadow: var(--shadow-card); }
.f6-dialog, .mg-dialog { box-shadow: var(--shadow-dialog); }
.fusion-new header.nav { box-shadow: var(--shadow-none); }

/* Default forms use 40px. Dense navigation/table actions use 32px at the same 14px type. */
.production-management input:not([type=checkbox]):not([type=file]), .production-management select,
.mg-dialog input:not([type=checkbox]), .mg-dialog select,
.security-page input, .security-page select, .f6-filters input, .f6-filters select, .f6-inline-tools select {
  box-sizing: border-box; height: var(--control-height); padding: 0 12px;
  font-size: var(--font-control); border-radius: var(--radius-control);
}
.production-management button, .mg-dialog button, .security-page button, .upload-picker, .f6-button {
  box-sizing: border-box; min-height: var(--control-height); padding: 8px 14px;
  line-height: 1.5; border-radius: var(--radius-control);
}
.f6-nav>button, .f6-tools a, .f6-icon-button, .f6-pager button,
.f6-legion-selector>button, .f6-map-legend button, .f6-timeline-controls button,
.f6-timeline-controls input[type=date], .security-page td button {
  box-sizing: border-box; min-height: var(--control-height-compact); padding: 4px 10px;
  line-height: 1.5; border-radius: var(--radius-control);
}
.f6-timeline-controls input[type=date] { width: 145px; min-width: 145px; height: var(--control-height-compact); }
.f6-timeline { min-width: 0; }
.f6-top { gap: 20px; }
.f6-timeline-label { flex-wrap: wrap; row-gap: 0; }
.f6-heading p, .f6-detail-heading p { line-height: var(--line-body); }
.f6-heading h1, .f6-detail-heading h2, .f6-brand>span:last-child>b { letter-spacing: .5px; }
.f6-honor-count span { white-space: normal; }
.f6-dial>strong>small { line-height: 1; }
.f6-kpis article>strong { overflow-wrap: anywhere; }
.f6-gauge-label { font-size: var(--font-control); }
/* Layout and available-height sizing live in production.css. Type never scales
   with the overview diagram or the browser viewport. */
.mg-legion-card strong { font-size: var(--font-section); line-height: var(--line-heading); }
.mg-legion-card span, .mg-heading p, .mg-section>p { font-size: var(--font-aux); }
.mg-legion-card small { font-size: var(--font-aux); }
.production-management .mg-settings { font-size: var(--font-section); }
.public-note, .public-viewers { font-size: var(--font-aux); }
.public-viewers b { font-size: var(--font-section); }
.f6-dial-ticks-html { font-size: var(--font-dial-tick); }
.f6-dialog-head button { font-size: var(--font-title); min-width: var(--control-height); min-height: var(--control-height); }

/* Responsive changes are layout only. Keep the same type at 1366 through 2520. */
@media(max-width:1600px) {
  .f6-top { gap: 12px; }
  .f6-tools { gap: 6px; }
  .f6-brand { gap: 10px; }
  .f6-timeline-label>small { margin-left: 0; }
}