﻿.page-lattice-reduction-forge {
  color-scheme: light dark;
  --bg: #0d1720;
  --surface: #142531;
  --surface-2: #1b3140;
  --line: #385364;
  --text: #ecf5f7;
  --muted: #a9c0c7;
  --accent: #ffbb66;
  --accent-2: #70d6d3;
  --danger: #ff8d8d;
  --focus: #fff1a6;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.page-lattice-reduction-forge * { box-sizing: border-box; }
.page-lattice-reduction-forge { margin: 0; min-width: 0; background: var(--bg); color: var(--text); line-height: 1.45; }

.page-lattice-reduction-forge button, .page-lattice-reduction-forge input, .page-lattice-reduction-forge select { font: inherit; }
.page-lattice-reduction-forge button, .page-lattice-reduction-forge select, .page-lattice-reduction-forge input { min-height: 42px; }
.page-lattice-reduction-forge button { cursor: pointer; }
.page-lattice-reduction-forge button:focus-visible, .page-lattice-reduction-forge input:focus-visible, .page-lattice-reduction-forge select:focus-visible, .page-lattice-reduction-forge summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.page-lattice-reduction-forge button:disabled { cursor: not-allowed; opacity: .52; }

.page-lattice-reduction-forge .forge-shell { width: min(1440px, 100%); margin: 0 auto; padding: 8px clamp(14px, 3vw, 42px) 34px; }
.page-lattice-reduction-forge .forge-header { margin-bottom: 13px; }
.page-lattice-reduction-forge .eyebrow { margin: 0 0 4px; color: var(--accent-2); font-size: .74rem; letter-spacing: .12em; font-weight: 700; }
.page-lattice-reduction-forge h1 { margin: 0; font-size: clamp(2rem, 3.6vw, 2.7rem); line-height: 1.06; letter-spacing: -.025em; }
.page-lattice-reduction-forge h2 { margin: 0; font-size: 1.05rem; line-height: 1.2; }
.page-lattice-reduction-forge h3 { margin: 0; font-size: .77rem; letter-spacing: .09em; color: var(--accent-2); }
.page-lattice-reduction-forge .lede { max-width: 680px; margin: 5px 0 0; color: var(--muted); font-size: .92rem; }
.page-lattice-reduction-forge .forge-layout { display: grid; grid-template-columns: minmax(320px, 390px) minmax(0, 1fr); gap: 17px; align-items: start; }
.page-lattice-reduction-forge .control-column, .page-lattice-reduction-forge .visual-column { min-width: 0; display: grid; gap: 15px; }
.page-lattice-reduction-forge .panel { min-width: 0; border: 1px solid var(--line); background: linear-gradient(155deg, rgba(27,49,64,.98), rgba(20,37,49,.98)); border-radius: 13px; padding: 14px; box-shadow: 0 10px 25px rgba(0,0,0,.17); }
.page-lattice-reduction-forge .panel-heading, .page-lattice-reduction-forge .result-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.page-lattice-reduction-forge .panel-heading > :last-child, .page-lattice-reduction-forge .result-heading > :last-child { color: var(--muted); font-size: .76rem; }
.page-lattice-reduction-forge .state-badge { border: 1px solid var(--line); border-radius: 999px; padding: 3px 8px; letter-spacing: .08em; }
.page-lattice-reduction-forge .state-badge[data-state="reduced"] { color: #b5f3c2; border-color: #4e9c72; }
.page-lattice-reduction-forge .state-badge[data-state="safe-stop"] { color: var(--danger); border-color: #a34d5e; }
.page-lattice-reduction-forge .state-badge[data-state="cancelled"] { color: var(--accent); border-color: #a77943; }
.page-lattice-reduction-forge .field-label { display: block; margin: 7px 0 3px; color: var(--muted); font-size: .8rem; }
.page-lattice-reduction-forge .field-control { width: 100%; border: 1px solid var(--line); border-radius: 7px; color: var(--text); background: #0e1d27; padding: 7px 9px; }
.page-lattice-reduction-forge .basis-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 9px; }
.page-lattice-reduction-forge fieldset { min-width: 0; border: 1px solid var(--line); border-radius: 9px; padding: 6px 8px 8px; }
.page-lattice-reduction-forge legend { padding: 0 4px; color: var(--accent); font-size: .78rem; }
.page-lattice-reduction-forge .current-basis { margin-top: 11px; }
.page-lattice-reduction-forge .current-basis-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 5px; }
.page-lattice-reduction-forge .current-basis-grid > div { min-width: 0; padding: 7px 8px; background: rgba(13,23,32,.35); border-left: 3px solid var(--accent-2); }
.page-lattice-reduction-forge .current-basis-grid strong, .page-lattice-reduction-forge .current-basis-grid span { display: block; overflow-wrap: anywhere; }
.page-lattice-reduction-forge .current-basis-grid strong { font-size: .86rem; }
.page-lattice-reduction-forge .current-basis-grid span { margin-top: 2px; color: var(--muted); font-size: .74rem; }
.page-lattice-reduction-forge .length-total { margin: 6px 0 0; color: var(--muted); font-size: .82rem; }
.page-lattice-reduction-forge .length-total strong { color: var(--text); font-variant-numeric: tabular-nums; }
.page-lattice-reduction-forge .target-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-items: center; margin-top: 10px; }
.page-lattice-reduction-forge .target-row > .field-label { grid-column: 1 / -1; margin: 0; }
.page-lattice-reduction-forge .button { border: 1px solid var(--line); border-radius: 7px; background: var(--surface-2); color: var(--text); padding: 7px 8px; min-width: 0; transition: background .15s ease, border-color .15s ease; }
.page-lattice-reduction-forge .button:hover { border-color: var(--accent-2); }
.page-lattice-reduction-forge .button-primary { background: #804e24; border-color: #d58f4e; }
.page-lattice-reduction-forge .button-block { display: block; width: 100%; margin-top: 12px; min-height: 48px; font-weight: 750; letter-spacing: .045em; }
.page-lattice-reduction-forge .button-target.is-selected { background: #1e5f62; border-color: var(--accent-2); }
.page-lattice-reduction-forge .drag-note { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .77rem; }
.page-lattice-reduction-forge .core-result { margin-top: 5px; padding-top: 4px; border-top: 1px solid rgba(112,214,211,.3); min-height: 102px; }
.page-lattice-reduction-forge .result-heading { margin-bottom: 3px; }
.page-lattice-reduction-forge .result-message { min-height: 0; margin: 0 0 3px; color: var(--muted); font-size: .74rem; line-height: 1.2; }
.page-lattice-reduction-forge .result-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 6px; margin: 0; }
.page-lattice-reduction-forge .result-summary div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px; align-items: baseline; min-width: 0; padding: 1px 5px; border: 1px solid rgba(56,83,100,.72); background: rgba(13,23,32,.28); }
.page-lattice-reduction-forge .result-summary dt { color: var(--muted); font-size: .72rem; line-height: 1.1; }
.page-lattice-reduction-forge .result-summary dd { margin: 0; overflow-wrap: anywhere; text-align: right; font-size: .78rem; font-weight: 650; line-height: 1.15; }
.page-lattice-reduction-forge .detailed-result { margin: 0 0 11px; padding: 8px 0 10px; border-bottom: 1px dashed rgba(169,192,199,.35); }
.page-lattice-reduction-forge .detailed-result h3 { margin-bottom: 7px; }
.page-lattice-reduction-forge .detailed-result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 8px; margin: 0; }
.page-lattice-reduction-forge .detailed-result-grid div { min-width: 0; padding: 5px 6px; border: 1px solid rgba(56,83,100,.72); background: rgba(13,23,32,.28); }
.page-lattice-reduction-forge .detailed-result-grid dt { color: var(--muted); font-size: .72rem; }
.page-lattice-reduction-forge .detailed-result-grid dd { margin: 2px 0 0; overflow-wrap: anywhere; font-size: .76rem; line-height: 1.25; }
.page-lattice-reduction-forge .advanced-details { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 8px; }
.page-lattice-reduction-forge .advanced-details summary { min-height: 42px; padding: 9px 4px; cursor: pointer; color: var(--accent-2); font-weight: 650; }
.page-lattice-reduction-forge .advanced-content { padding-top: 5px; }
.page-lattice-reduction-forge .button-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; }
.page-lattice-reduction-forge .button-grid .button-wide { grid-column: 1 / -1; }
.page-lattice-reduction-forge .metrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 10px 0 0; }
.page-lattice-reduction-forge .metrics-grid div { min-width: 0; padding: 6px 7px; border: 1px solid rgba(56,83,100,.72); background: rgba(13,23,32,.34); }
.page-lattice-reduction-forge .metrics-grid dt { color: var(--muted); font-size: .72rem; }
.page-lattice-reduction-forge .metrics-grid dd { margin: 2px 0 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; font-size: .84rem; }
.page-lattice-reduction-forge .metrics-grid .matrix-metric { grid-column: 1 / -1; }
.page-lattice-reduction-forge .metric-explanation { margin: 8px 0 0; color: var(--muted); font-size: .78rem; overflow-wrap: anywhere; }
.page-lattice-reduction-forge .minor-actions { display: flex; gap: 6px; margin-top: 10px; }
.page-lattice-reduction-forge .minor-actions .button { flex: 0 1 105px; }
.page-lattice-reduction-forge .process-line { min-height: 2.35em; margin: 9px 0 0; padding: 7px 9px; border-left: 3px solid var(--accent-2); background: rgba(112,214,211,.07); color: var(--muted); font-size: .8rem; }
.page-lattice-reduction-forge .error-line { min-height: 1.15em; margin: 5px 0 0; color: var(--danger); font-size: .8rem; }
.page-lattice-reduction-forge .canvas-panel { padding-bottom: 10px; }
.page-lattice-reduction-forge #forgeCanvas { display: block; width: 100%; height: auto; aspect-ratio: 860 / 520; border: 1px solid var(--line); border-radius: 8px; background: #0a141d; touch-action: none; }
.page-lattice-reduction-forge .visual-invariant { margin: 8px 0 0; color: var(--text); font-size: .82rem; }
.page-lattice-reduction-forge .canvas-note { margin: 4px 0 0; color: var(--muted); font-size: .75rem; }
.page-lattice-reduction-forge .legend { white-space: normal; }
.page-lattice-reduction-forge .swatch { display: inline-block; width: 9px; height: 9px; margin: 0 3px 0 7px; border-radius: 50%; vertical-align: .02em; }
.page-lattice-reduction-forge .swatch.original { background: #70d6d3; }
.page-lattice-reduction-forge .swatch.current { background: #ffbb66; }
.page-lattice-reduction-forge .step-list { margin: 0; padding-left: 22px; max-height: 260px; overflow: auto; }
.page-lattice-reduction-forge .step-list li { margin: 0 0 6px; color: var(--muted); overflow-wrap: anywhere; font-size: .82rem; }
.page-lattice-reduction-forge .empty-step { list-style: none; margin-left: 0; }
.page-lattice-reduction-forge .report-output { max-height: 310px; overflow: auto; margin: 0; padding: 10px; border: 1px solid var(--line); border-radius: 7px; background: #0a141d; color: #d4e6e8; font-size: .72rem; line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere; }
.page-lattice-reduction-forge .download-link { display: inline-block; margin-top: 8px; color: var(--accent); }
.page-lattice-reduction-forge .download-link[hidden] { display: none; }
.page-lattice-reduction-forge .forge-footer { margin-top: 13px; color: var(--muted); font-size: .74rem; }
.page-lattice-reduction-forge .forge-footer p { margin: 0; }
.page-lattice-reduction-forge .forge-limits { margin: 14px auto 0; max-width: 1440px; padding: 0 clamp(14px, 3vw, 42px); color: var(--muted); font-size: .74rem; }
.page-lattice-reduction-forge .forge-operation-wrap { max-width: 1440px; margin: 14px auto 0; padding: 0 clamp(14px, 3vw, 42px); }
.page-lattice-reduction-forge .forge-operation-wrap .operation-panel { margin: 0; }

@media (max-width: 900px) {
  .page-lattice-reduction-forge .forge-layout { grid-template-columns: 1fr; }
  .page-lattice-reduction-forge .control-column { order: 0; }
  .page-lattice-reduction-forge .visual-column { order: 1; }
}

@media (max-width: 520px) {
  .page-lattice-reduction-forge .forge-shell { padding: 15px 10px 23px; }
  .page-lattice-reduction-forge .forge-header { margin-bottom: 10px; }
  .page-lattice-reduction-forge h1 { font-size: 1.95rem; }
  .page-lattice-reduction-forge .panel { padding: 11px; border-radius: 10px; }
  .page-lattice-reduction-forge .basis-fields { gap: 6px; }
  .page-lattice-reduction-forge .current-basis-grid { gap: 5px; }
  .page-lattice-reduction-forge .current-basis-grid strong { font-size: .8rem; }
  .page-lattice-reduction-forge .result-summary { gap: 4px 5px; }
  .page-lattice-reduction-forge .result-summary dt { font-size: .7rem; }
  .page-lattice-reduction-forge .result-summary dd { font-size: .78rem; }
  .page-lattice-reduction-forge .detailed-result-grid { grid-template-columns: 1fr; }
  .page-lattice-reduction-forge .step-list { max-height: 220px; }
}

/* This chamber keeps the shared hero compact so its first action remains visible. */
.page-lattice-reduction-forge .lab-hero { padding: 12px 0 10px; }
.page-lattice-reduction-forge .lab-route { margin: 4px 0 4px; padding: 6px 10px; }
.page-lattice-reduction-forge .lab-route__details summary { min-height: 30px; padding: 4px 0; }
.page-lattice-reduction-forge .lab-hero__copy > p:last-child { margin: 6px 0 0; }
.page-lattice-reduction-forge .lab-status-panel { padding: 10px 14px; }

@media (max-width: 520px) {
  .page-lattice-reduction-forge .lab-hero { padding-top: 5px; gap: 8px; }
  .page-lattice-reduction-forge .lab-route { margin: 0; padding: 2px 8px; }
  .page-lattice-reduction-forge .lab-status-panel { padding: 6px 10px; }
  .page-lattice-reduction-forge .forge-shell { padding-top: 8px; }
  .page-lattice-reduction-forge .panel { padding: 8px; }
  .page-lattice-reduction-forge .controls-panel { padding: 6px 8px; }
  .page-lattice-reduction-forge .controls-panel .core-result { margin-top: 7px; }
}

