/* ===========================================================================
   Factory OS — framed-grid layout (same system as AI Platform).
   Loaded after styles.css: styles.css still styles the interactive widgets
   (line dashboard, UNS console, decision record); this file owns the page
   layout and squares off the widget chrome. Visual vocabulary: machines,
   signals, perimeters, evidence — not consoles and receipts.
   =========================================================================== */

.fx {
  --fx-frame: 1320px;
  --fx-pad: clamp(20px, 3vw, 40px);
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --radius: 3px;
  font-size: 16px;
}
.fx::before { display: none; }
.fx section { padding: 0; }
.fx .mono { font-family: var(--font-mono); letter-spacing: 0; }
.fx h1, .fx h2, .fx h3 { letter-spacing: -0.02em; }
.fx h2 { font-size: clamp(1.9rem, 3.6vw, 3.1rem); line-height: 1.04; }

.fx-frame { max-width: var(--fx-frame); margin: 0 auto; border-left: 1px solid var(--line); border-right: 1px solid var(--line); position: relative; z-index: 1; }
main.fx-frame > section { border-top: 1px solid var(--line); }

.fx-crumb, .fx-kicker, .fx-visual-k { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fx-kicker { display: block; margin-bottom: 1.1rem; }
.fx-kicker::before { content: "■ "; color: var(--teal); font-size: .6rem; vertical-align: 1px; }

.fx-btn { font-family: var(--font-display); font-weight: 500; font-size: .95rem; display: inline-flex; align-items: center; gap: .6rem;
  padding: .85rem 1.2rem; border: 1px solid transparent; border-radius: 2px; text-decoration: none; transition: background .2s, color .2s; }
.fx-btn-primary { background: var(--ink); color: var(--white); }
.fx-btn-primary:hover { background: var(--teal-deep); }
.fx-btn-ghost { border-color: var(--ink); color: var(--ink); }
.fx-btn-ghost:hover { background: var(--ink); color: var(--white); }
.fx-btn-ink { background: var(--ink); color: var(--white); }
.fx-btn-ink:hover { background: var(--white); color: var(--ink); }
.fx-btn .arrow { transition: transform .2s; }
.fx-btn:hover .arrow { transform: translateX(3px); }

/* ---------- hero ---------- */
.fx-hero-head { padding: clamp(40px, 6vw, 88px) var(--fx-pad) clamp(28px, 4vw, 48px); border-bottom: 1px solid var(--line); }
.fx-hero-head h1 { margin-top: 1.2rem; font-size: clamp(2.4rem, 5.4vw, 5.2rem); line-height: .98; max-width: none; }
.fx-hero-body { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.fx-hero-side { padding: clamp(24px, 3vw, 40px) var(--fx-pad); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 1.8rem; }
.fx-lead { font-size: clamp(1.05rem, 1.4vw, 1.22rem); color: var(--ink-soft); line-height: 1.5; max-width: 36ch; }
.fx-cta-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.fx-hero-meta { margin-top: auto; padding-top: 1.2rem; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: .3rem; }
.fx-hero-meta .k { font-family: var(--font-mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.fx-hero-meta .mono { font-size: .88rem; color: var(--ink); }
.fx-hero-visual { padding: clamp(20px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 1rem;
  background-color: var(--paper-2);
  background-image: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 28px 28px; }
.fx .converge { margin: auto 0; max-width: none; filter: none; background: var(--white); border: 1px solid var(--ink); padding: clamp(12px, 2vw, 24px); box-shadow: 10px 10px 0 color-mix(in srgb, var(--ink) 7%, transparent); }
.fx .hero-depth rect { rx: 3; }

/* ---------- facts ---------- */
.fx-facts { display: grid; grid-template-columns: repeat(5, 1fr); }
.fx-fact { padding: clamp(22px, 3vw, 34px) var(--fx-pad); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: .35rem; }
.fx-fact:last-child { border-right: 0; }
.fx-fact strong { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.4rem, 2.3vw, 2.1rem); line-height: 1.05; letter-spacing: -0.02em; }
.fx-fact span { font-size: .86rem; color: var(--muted); }
.fx-fact strong.sm { font-size: clamp(1.1rem, 1.6vw, 1.45rem); }

/* ---------- split / blocks ---------- */
.fx-split { display: grid; grid-template-columns: 5fr 7fr; }
.fx-split-l { padding: clamp(40px, 5vw, 72px) var(--fx-pad); border-right: 1px solid var(--line); }
.fx-split-l p { color: var(--ink-soft); margin-top: 1.2rem; max-width: 46ch; }
.fx-split-r { padding: clamp(24px, 3vw, 40px); display: flex; align-items: center; background: var(--paper-2); }
.fx .erp-gap { width: 100%; max-width: none; }
.fx-head { padding: clamp(48px, 6vw, 80px) var(--fx-pad) clamp(28px, 3.5vw, 44px); border-bottom: 1px solid var(--line); }
.fx-head p { color: var(--muted); margin-top: 1rem; max-width: 60ch; }
.fx-note { padding: 1rem var(--fx-pad); border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: .76rem; color: var(--muted); }

/* pipeline as a row of cells */
.fx .pipeline { margin-top: 0; }
.fx .pstep { text-align: left; padding: 1.6rem var(--fx-pad) 1.8rem; border-right: 1px solid var(--line); }
.fx .pstep:last-child { border-right: 0; }
.fx .pstep:not(:last-child)::after { content: "→"; right: -9px; top: 2.1rem; color: var(--teal); background: var(--paper); padding: 0 2px; }
.fx .pstep .pico { margin: 0 0 1rem; border-radius: 2px; width: 52px; height: 52px; }
.fx .pstep.key { background: var(--white); }
.fx .pstep h3 { font-size: 1.15rem; }
.fx .pstep p { font-size: .88rem; }

/* scenario + console widgets: keep, square off */
.fx-story-body, .fx-console-body { padding: clamp(24px, 3vw, 40px) var(--fx-pad); }
.fx .story-viz { top: 76px; border-radius: 3px; border-color: var(--ink); box-shadow: 10px 10px 0 color-mix(in srgb, var(--ink) 7%, transparent); }
.fx .walkthrough { border-radius: 3px; box-shadow: none; background: var(--paper-2); }
.fx .console-frame, .fx .station-card, .fx .stock-card, .fx .dash-panel, .fx .decision-card, .fx .driver-card, .fx .edge-node,
.fx .condition-record, .fx .recommend-record, .fx .audit-record, .fx .walk-copy, .fx .erp-system-card, .fx .erp-machine-card,
.fx .erp-logo-card, .fx .cm-card, .fx .cm-decision, .fx .walk-tab, .fx .oee-pill, .fx .live-chip { border-radius: 2px !important; }
.fx .erp-logo-card.wordmark { font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; letter-spacing: 0; color: var(--ink); }

/* sector cards as a cell grid */
.fx .cards { border: 0; border-radius: 0; gap: 0; background: transparent; }
.fx .card { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-height: 220px; padding: 1.6rem var(--fx-pad) 1.8rem; }
.fx .card:nth-child(3n) { border-right: 0; }
.fx .card:nth-last-child(-n+3) { border-bottom: 0; }
.fx .card:hover { background: var(--white); transform: none; box-shadow: none; }
.fx .card h3 { font-size: 1.5rem; margin-top: .4rem; }
.fx .card p { font-size: .95rem; }
.fx .card .tag { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .04em; color: var(--teal-deep); background: color-mix(in srgb, var(--teal) 10%, transparent); padding: .2rem .5rem; align-self: flex-start; border-radius: 2px; }

/* ---------- sovereignty (dark) ---------- */
.fx-sov { display: grid; grid-template-columns: 5fr 7fr; background: var(--ink); color: var(--paper); }
.fx-sov-copy { padding: clamp(48px, 6vw, 88px) var(--fx-pad); border-right: 1px solid #34332f; }
.fx-sov h2 { color: var(--white); }
.fx-sov .teal { color: #3CC2B1; }
.fx-sov .fx-kicker { color: #9d998e; }
.fx-sov p { color: #D8D3C7; margin-top: 1.4rem; max-width: 46ch; }
.fx-sov-note { font-size: .88rem; color: #9d998e !important; padding-top: 1.2rem; border-top: 1px solid #34332f; }
.fx-sov-visual { padding: clamp(32px, 4vw, 56px) var(--fx-pad); display: flex; flex-direction: column; justify-content: center; gap: 1.4rem;
  background-image: linear-gradient(#262522 1px, transparent 1px), linear-gradient(90deg, #262522 1px, transparent 1px); background-size: 28px 28px; }
.fx-perimeter { width: 100%; max-width: 640px; height: auto; margin: 0 auto; display: block; }
.fx-perimeter .per { fill: none; stroke: #3CC2B1; stroke-width: 1.5; stroke-dasharray: 6 5; }
.fx-perimeter .per-k { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; fill: #3CC2B1; }
.fx-perimeter .mach rect, .fx-perimeter .box rect { fill: #1f1e1b; stroke: #5a5850; stroke-width: 1.2; }
.fx-perimeter .box.hl rect { stroke: #3CC2B1; fill: #16302d; }
.fx-perimeter text { font-family: var(--font-display); font-size: 14px; fill: var(--white); }
.fx-perimeter text.sm { font-family: var(--font-mono); font-size: 10px; fill: #9d998e; }
.fx-perimeter .flow path { fill: none; stroke: #3CC2B1; stroke-width: 1.4; stroke-dasharray: 4 5; animation: fx-flow 1.2s linear infinite; }
@keyframes fx-flow { to { stroke-dashoffset: -18; } }
.fx-chips { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.fx-chips span { font-family: var(--font-mono); font-size: .74rem; color: var(--paper); border: 1px solid #5a5850; padding: .35rem .7rem; border-radius: 2px; }

/* ---------- stakes ---------- */
.fx .numbers { gap: 0; }
.fx .stat { border-top: 0; border-right: 1px solid var(--line); padding: 1.8rem var(--fx-pad) 2rem; background: none; }
.fx .stat:last-child { border-right: 0; }
.fx .stat .src { font-family: var(--font-mono); font-style: normal; font-size: .7rem; }

/* ---------- CTA band + footer ---------- */
.fx-band { background: var(--teal); color: var(--white); }
.fx-band .fx-frame { border-color: color-mix(in srgb, var(--white) 25%, transparent); }
.fx-band-inner { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; padding: clamp(56px, 8vw, 112px) var(--fx-pad) clamp(40px, 5vw, 64px); }
.fx-band-k { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--white) 80%, transparent); }
.fx-band h2 { color: var(--white); font-size: clamp(2.1rem, 4.6vw, 4rem); max-width: 18ch; margin-top: 1rem; }
.fx-band p { margin-top: 1rem; color: color-mix(in srgb, var(--white) 85%, transparent); max-width: 50ch; }
.fx-band-actions { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.fx-band-link { font-family: var(--font-mono); color: var(--white); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--white) 50%, transparent); }

.fx-footer { border-top: 1px solid var(--line); padding: 0; color: var(--muted); }
.fx-foot-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.fx-foot-col { padding: 2rem var(--fx-pad) 2.4rem; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: .15rem; }
.fx-foot-col:last-child { border-right: 0; }
.fx-foot-col h4 { font-family: var(--font-mono); font-weight: 500; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: .8rem; }
.fx-foot-col a { text-decoration: none; font-size: .92rem; color: var(--ink-soft); padding: .15rem 0; }
.fx-foot-col a:hover { color: var(--teal); }
.fx-foot-mark { border-top: 1px solid var(--line); display: flex; align-items: flex-end; justify-content: space-between; padding: clamp(32px, 5vw, 64px) var(--fx-pad) 1.6rem; overflow: hidden; }
.fx-foot-logo { width: min(640px, 70%); aspect-ratio: 796 / 258; height: auto; color: var(--ink); display: block; }
.fx-foot-mark .mono { font-size: .74rem; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .fx-hero-body, .fx-split, .fx-sov { grid-template-columns: 1fr; }
  .fx-hero-side, .fx-split-l { border-right: 0; border-bottom: 1px solid var(--line); }
  .fx-sov-copy { border-right: 0; border-bottom: 1px solid #34332f; }
  .fx-hero-meta { margin-top: 0; }
  .fx-facts { grid-template-columns: repeat(3, 1fr); }
  .fx-fact:nth-child(3) { border-right: 0; }
  .fx-fact:nth-child(n+4) { border-top: 1px solid var(--line); }
  .fx .pipeline { grid-template-columns: 1fr 1fr; }
  .fx .pstep { border-bottom: 1px solid var(--line); }
  .fx .pstep:nth-child(even) { border-right: 0; }
  .fx .pstep::after { display: none; }
  .fx .numbers { grid-template-columns: 1fr 1fr; }
  .fx .stat:nth-child(2) { border-right: 0; }
  .fx .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 760px) {
  .fx-facts { grid-template-columns: 1fr 1fr; }
  .fx-fact { border-top: 1px solid var(--line); }
  .fx-fact:nth-child(-n+2) { border-top: 0; }
  .fx-fact:nth-child(3) { border-right: 1px solid var(--line); }
  .fx-fact:nth-child(even) { border-right: 0; }
  .fx-fact:last-child { grid-column: span 2; }
  .fx .pipeline { grid-template-columns: 1fr; }
  .fx .pstep { border-right: 0; }
  .fx .cards { grid-template-columns: 1fr; }
  .fx .card { border-right: 0; border-bottom: 1px solid var(--line) !important; }
  .fx .numbers { grid-template-columns: 1fr; }
  .fx .stat { border-right: 0; border-top: 1px solid var(--line); }
  .fx-story-body, .fx-console-body { padding: 16px 12px; }
  .fx-foot-grid { grid-template-columns: 1fr 1fr; }
  .fx-foot-col:nth-child(2) { border-right: 0; }
  .fx-foot-col:nth-child(n+3) { border-top: 1px solid var(--line); }
  .fx-foot-mark { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .fx-foot-logo { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .fx-perimeter .flow path { animation: none; } }

/* ===========================================================================
   Widget vocabulary — bring the interactive widgets into the AI Platform
   language: square cells, mono labels, ink frames, offset shadows, no pills,
   no window dots, no boxes-in-boxes.
   =========================================================================== */

/* labels: mono, compact tracking (was spaced-out display caps) */
.fx .k, .fx .dash-k, .fx .lbl, .fx .erp-tag, .fx .walk-copy .k, .fx .story-step .k, .fx .cm-card .lbl, .fx .cm-decision .lbl,
.fx .recommend-record .lbl, .fx .audit-table th, .fx .asset-metric span, .fx .driver-card span, .fx .tag-meta b, .fx .topic-path span,
.fx .erp-gap-label, .fx .erp-line-txt {
  font-family: var(--font-mono) !important; letter-spacing: .06em !important;
}

/* pills -> square chips (dots stay round) */
.fx .oee-pill, .fx .status-badge, .fx .alert-chip, .fx .ghost-actions button, .fx .proof-tags span, .fx .walk-tab,
.fx .edge-badges span, .fx .birth-ticker span, .fx .evidence-list span, .fx .condition-meta span, .fx .decision-actions button,
.fx .ok-pill, .fx .asset-status, .fx .erp-gap-label, .fx .bar-track, .fx .health-bar, .fx .confidence-track, .fx .pstep .pico {
  border-radius: 2px !important;
}
.fx .proof-tags span, .fx .edge-badges span, .fx .condition-meta span, .fx .alert-chip, .fx .status-badge, .fx .ok-pill,
.fx .evidence-list span, .fx .birth-ticker span, .fx .asset-status { font-family: var(--font-mono); letter-spacing: .02em; }
.fx .live-chip { border-radius: 2px; font-family: var(--font-mono); font-size: .72rem; }

/* every panel inside the widgets: square, hairline, no soft shadow */
.fx .story-viz *, .fx .walkthrough *, .fx .erp-gap * { box-shadow: none; }
.fx .erp-gap [class]:not(.status-dot):not(.live-dot),
.fx .story-viz [class]:not(.status-dot):not(.live-dot):not(.dotc),
.fx .walkthrough [class]:not(.status-dot):not(.live-dot):not(.dotc):not(.asset-status-dot) { border-radius: 2px !important; }
.fx .status-dot, .fx .live-dot { border-radius: 50% !important; }

/* problem section: the gap diagram as three stacked cells */
.fx .erp-gap { border: 1px solid var(--ink); background: var(--white); padding: 0; box-shadow: 10px 10px 0 color-mix(in srgb, var(--ink) 7%, transparent); }
.fx .erp-gap::before { display: none; }
.fx .erp-top, .fx .erp-bottom { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 1.1rem 1.2rem !important; margin: 0 !important; border-radius: 0 !important; }
.fx .erp-divider { border: 0 !important; border-top: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; margin: 0 !important; background: color-mix(in srgb, #C0473D 5%, var(--white)) !important; }
.fx .erp-system-card, .fx .erp-machine-card { border: 1px solid var(--line) !important; box-shadow: none !important; background: var(--paper) !important; }

/* layer row: numbered like the platform walkthrough */
.fx .pipeline { counter-reset: layer; }
.fx .pstep::before { counter-increment: layer; content: "0" counter(layer); display: block; font-family: var(--font-mono); font-size: .72rem; color: var(--muted); margin-bottom: .9rem; }
.fx .pstep .pico { width: 44px; height: 44px; background: var(--white); border-color: var(--ink-soft); }
.fx .pstep.key .pico { background: var(--teal); border-color: var(--teal); box-shadow: none; }
.fx .pstep.key svg { stroke: var(--white); }

/* scenario: step list reads like the platform's sticky index */
.fx .story-stage { grid-template-columns: 2px minmax(240px, 300px) minmax(0, 1fr); gap: 0 clamp(20px, 3vw, 40px); }
.fx .story-progress { border-radius: 0; background: var(--line); width: 2px; }
.fx .story-progress span { border-radius: 0; background: var(--teal); }
.fx .story-step { border-bottom: 1px solid var(--line-soft); padding-block: 1.2rem !important; }
.fx .story-step::before { border-radius: 0 !important; }
.fx .story-step .k { color: var(--teal-deep); font-size: .7rem; }
.fx .story-step h3 { font-size: 1.35rem; }
.fx .story-viz { padding: 0 !important; }
.fx .factory-topbar { border-bottom: 1px solid var(--line); padding: .8rem 1rem !important; margin: 0 !important; background: var(--white); }
.fx .factory-line { padding: 1rem !important; background-color: var(--paper-2);
  background-image: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px); background-size: 24px 24px; margin: 0 !important; }
.fx .factory-lower { padding: 0 1rem 1rem; background: var(--paper-2); margin: 0 !important; }
.fx #vizCaption { margin: 0 !important; border-top: 1px solid var(--line); border-radius: 0 !important; background: var(--white); font-family: var(--font-mono); font-size: .76rem; padding: .8rem 1rem !important; }
.fx .station-card, .fx .stock-card, .fx .dash-panel, .fx .decision-card { background: var(--white) !important; border: 1px solid var(--line); }

/* console: no outer grey box; tabs as a cell row; copy as cells; ink-framed screens */
.fx .walkthrough { background: transparent; border: 0; padding: 0; }
.fx .walk-tabs { display: flex; gap: 0; border: 1px solid var(--ink) !important; width: max-content; max-width: 100%; margin: 0 0 1.2rem !important; padding: 0 !important; background: none !important; }
.fx .walk-tab { border: 0 !important; border-right: 1px solid var(--ink) !important; background: var(--white); padding: .7rem 1.1rem; font-family: var(--font-display); }
.fx .walk-tab:last-child { border-right: 0 !important; }
.fx .walk-tab.active { background: var(--ink); color: var(--white); }
.fx .workflow-line { font-family: var(--font-mono); font-size: .76rem; color: var(--muted); border: 0; padding: 0; margin: 0 0 1.2rem; }
.fx .walk-copy-grid { gap: 0 !important; border: 1px solid var(--line); background: transparent; margin-bottom: 1.4rem; }
.fx .walk-copy { border: 0 !important; border-right: 1px solid var(--line) !important; background: transparent !important; padding: 1.2rem 1.3rem !important; opacity: .55; }
.fx .walk-copy:last-child { border-right: 0 !important; }
.fx .walk-copy.active { opacity: 1; background: var(--white) !important; box-shadow: inset 0 3px 0 var(--teal) !important; }
.fx .walk-copy h3 { font-size: 1.15rem; }
.fx .console-frame { border: 1px solid var(--ink) !important; background: var(--white); box-shadow: 10px 10px 0 color-mix(in srgb, var(--ink) 7%, transparent) !important; }
.fx .console-frame .console-bar { background: var(--white); border-bottom: 1px solid var(--line); padding: .7rem 1rem; }
.fx .console-frame .console-bar .dotc { display: none; }
.fx .console-frame .curl { font-family: var(--font-mono); font-size: .74rem; color: var(--muted); margin: 0; padding: 0; background: none; border: 0; }
.fx .console-frame .curl::before { content: "■ "; color: var(--teal); font-size: .6rem; vertical-align: 1px; }

/* sector cards: bordered icon square like the layer row; drop the skewed grid motif */
.fx .card .motif { display: none; }
.fx .card .cico { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--ink-soft); background: var(--white); }
.fx .card .cico svg { width: 22px; height: 22px; }
.fx .card:hover .cico { background: var(--ink); color: var(--white); border-color: var(--ink); }