:root{--forge-accent:#8b2f24;--surface:#fff;--muted:#5b6571;--line:#d9dee4;--soft:#f3f5f6;--danger:#a52323;--success:#1f6d48}

*{box-sizing:border-box}
body{margin:0;background:#eef1f2;color:#17212b;font:15px/1.45 system-ui,sans-serif}
.product-hero{display:flex;justify-content:space-between;gap:2rem;align-items:end;padding:1.5rem 2rem;background:linear-gradient(110deg,#fff 0,#f7f1ed 100%);border-bottom:4px solid var(--forge-accent)}
.product-hero p{margin:.15rem 0;color:#4f5964}
.product-hero>div>p:first-child{font-weight:800;color:var(--forge-accent);letter-spacing:.04em}
.product-hero h1{margin:.2rem 0;font-size:clamp(1.45rem,2.6vw,2.35rem);line-height:1.12}
.product-hero label{min-width:17rem;font-weight:700}
.product-hero select{width:100%;margin-top:.35rem}
#banner{min-height:1.7rem;padding:.25rem 2rem;background:#fff7d9;color:#523e00}
#banner:empty{display:none}
#banner.error{background:#fde8e8;color:#7d1515}
main{padding:1.25rem 2rem 3rem}
.tabs{display:flex;gap:.35rem;overflow:auto;position:sticky;top:0;z-index:4;padding:.6rem;background:#eef1f2;border-bottom:1px solid var(--line)}
button,input,select,textarea{font:inherit}
button{min-height:2.65rem;padding:.55rem .85rem;border:1px solid #9aa5af;border-radius:.35rem;background:#fff;color:#18222d;cursor:pointer;font-weight:650}
button:hover,button:focus-visible{border-color:var(--forge-accent);box-shadow:0 0 0 3px #8b2f2430}
button.primary,.heading>button,.actions button,.shop-actions button,#traceButton{background:var(--forge-accent);border-color:var(--forge-accent);color:#fff}
.tabs button[aria-pressed=true]{background:#253b35;border-color:#253b35;color:#fff}
.heading{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:1.1rem 0}
.heading h2,.heading p{margin:.1rem 0}
.actions,.shop-actions{display:flex;flex-wrap:wrap;gap:.45rem}
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem;margin:1rem 0}
.metric,.card,.record,.scanner-card,.split>article{background:var(--surface);border:1px solid var(--line);border-radius:.55rem;box-shadow:0 1px 2px #00000010}
.metric{padding:1rem}
.metric span{display:block;color:var(--muted)}
.metric strong{font-size:1.65rem}
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.split>article{padding:1rem}
.records{display:grid;gap:.5rem}
.record{display:grid;grid-template-columns:minmax(12rem,2fr) repeat(2,minmax(6rem,1fr)) auto;align-items:center;gap:.65rem;padding:.7rem}
.record strong,.record small{display:block}
.record small{color:var(--muted)}
.record.state-exception{border-left:5px solid var(--danger)}
.record.state-hold{border-left:5px solid #c67b00}
.record.state-complete{border-left:5px solid var(--success)}
.board{display:grid;grid-template-columns:repeat(4,minmax(14rem,1fr));gap:.75rem;overflow:auto}
.column{background:#e5e9eb;border-radius:.5rem;padding:.7rem;min-height:9rem}
.column .record{display:block;margin:.5rem 0}
.filters,.scanner-card{display:flex;gap:.65rem;padding:.75rem;margin-bottom:1rem}
.filters input{flex:1}
.filters select{min-width:12rem}
.scanner-card label{flex:1}
.scanner-card input{width:100%;margin-top:.25rem}
input,select,textarea{min-height:2.65rem;border:1px solid #89949e;border-radius:.3rem;padding:.5rem;background:#fff;color:#17212b}
textarea{min-height:6rem}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}
.card{padding:1rem}
.timeline{border-left:3px solid #7c8a94;margin:1rem;padding-left:1rem}
.timeline .record{margin:.7rem 0}
dialog{border:0;border-radius:.65rem;box-shadow:0 1.5rem 4rem #0007;width:min(42rem,calc(100vw - 2rem));max-height:90vh;overflow:auto}
dialog::backdrop{background:#13201cc0}
dialog form,.dialog-body{display:grid;gap:.8rem}
dialog label{display:grid;gap:.25rem;font-weight:650}
.check{grid-template-columns:auto 1fr;align-items:start}
.check input{min-height:auto;margin-top:.3rem}
.dialog-actions{display:flex;justify-content:flex-end;gap:.5rem}
.empty{padding:1rem;color:var(--muted);font-style:italic}

.engineering-workbench{margin:1rem 0;padding:1rem;background:var(--surface);border:1px solid var(--line);border-radius:.55rem}
.bom-tools{display:grid;grid-template-columns:2fr 1fr 2fr;gap:.75rem}
.bom-tools form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:.55rem;padding:.8rem;background:var(--soft);border:1px solid var(--line);border-radius:.45rem}
.bom-tools h4{grid-column:1/-1;margin:0}
.bom-tools label{display:grid;gap:.2rem;font-weight:650}
.bom-tools button{align-self:end}
.bom-tools #whereUsedForm{grid-template-columns:1fr}
.analysis-results{margin-top:.8rem}
.analysis-table{overflow:auto;border:1px solid var(--line);border-radius:.4rem}
.analysis-table table{width:100%;border-collapse:collapse;background:#fff}
.analysis-table th,.analysis-table td{padding:.55rem;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
.analysis-table th{background:#253b35;color:#fff}

.inline-analysis{display:grid;grid-template-columns:2fr 1fr 1fr auto;align-items:end;gap:.6rem;margin-top:1rem;padding:.8rem;background:var(--soft);border:1px solid var(--line);border-radius:.45rem}
.inline-analysis label{display:grid;gap:.2rem;font-weight:650}

.configuration-choices{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:.6rem;padding:.7rem;background:#fff;border:1px solid var(--line);border-radius:.35rem}
.configuration-choices label{display:grid;gap:.2rem;font-weight:650}
.configuration-choices .empty{grid-column:1/-1;margin:0}

.bom-tree{margin-top:1rem;padding:1rem;background:#fff;border:1px solid var(--line);border-radius:.45rem;overflow:auto}
.bom-tree ul{list-style:none;margin:.4rem 0 .4rem 1rem;padding-left:1rem;border-left:2px solid #aeb8b3}
.bom-tree li{margin:.35rem 0}
.bom-tree .bom-node>strong{display:inline-block;padding:.3rem .55rem;background:#253b35;color:#fff;border-radius:.3rem}
.bom-tree .bom-node.drop-target>strong{outline:4px solid #d29332}
.bom-tree .bom-line{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.5rem;padding:.4rem;background:var(--soft);border:1px solid var(--line);border-radius:.3rem}
.bom-tree .bom-line>ul{grid-column:1/-1}
.bom-tree .bom-line button{min-height:2rem;padding:.25rem .55rem}

.planning-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.planning-tools form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:.55rem;padding:.8rem;background:var(--soft);border:1px solid var(--line);border-radius:.45rem}
.planning-tools h4{grid-column:1/-1;margin:0}
.planning-tools label{display:grid;gap:.2rem;font-weight:650}
.planning-tools button{align-self:end}

@media(max-width:950px){.metrics,.cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.board{grid-template-columns:repeat(2,minmax(14rem,1fr))}
.bom-tools,.inline-analysis,.planning-tools{grid-template-columns:1fr}
.record{grid-template-columns:minmax(10rem,1fr) auto}
.record>span:nth-of-type(n+3){display:none}
}

@media(max-width:650px){.product-hero,.heading,.filters{align-items:stretch;flex-direction:column}
.product-hero{padding:1rem}
.product-hero label{min-width:0}
main{padding:.75rem}
.metrics,.cards,.split,.board{grid-template-columns:1fr}
.tabs{margin:0 -.75rem}
.actions,.shop-actions,.bom-tools form,.planning-tools form{display:grid;grid-template-columns:1fr}
.record{grid-template-columns:1fr auto}
}

@media(forced-colors:active){button,.record,.card,.metric{border:1px solid ButtonText}
}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}
}

.button-link{display:inline-flex;align-items:center;justify-content:center;min-height:2.65rem;padding:.55rem .85rem;border:1px solid var(--forge-accent);border-radius:.35rem;background:var(--forge-accent);color:#fff;text-decoration:none;font-weight:650}
.button-link:focus-visible{outline:3px solid #8b2f2450;outline-offset:2px}

.schedule-timeline{display:grid;gap:.55rem;padding:.75rem;border:1px solid #c8d2d7;border-radius:.55rem;background:#f5f8f9}
.schedule-bar{display:flex;justify-content:space-between;gap:1rem;align-items:center;width:100%;min-height:2.7rem;padding:.55rem .75rem;border-left:.45rem solid #b4202a;text-align:left;background:#fff;color:#17242c}
.schedule-bar span{font-size:.82rem;color:#465761}
.schedule-bar:focus-visible{outline:3px solid #f0b429;outline-offset:2px}
.record-opens{cursor:pointer}
.record-opens:focus-visible{outline:3px solid #f0b429;outline-offset:2px}
#documentPreviewFrame {
  width: min(90vw, 1100px);
  height: 70vh;
  border: 1px solid var(--border, #bbb);
}
