/* /architecture — madarX institutional report.
   Palette: Onyx #0F0F11 · Platinum #E8E8E5 · Bone #DCDCD8 · Graphite #4A4A4D · Mars Red var(--accent-500) (#C2452A)
   No gradients, no purple, no glow. */

.shell{
  height:100vh;
  overflow-y:auto;
  background:#E8E8E5;
  color:#0F0F11;
  font-family:var(--font-mono-brand,'IBM Plex Mono','SF Mono',ui-monospace,Menlo,Consolas,monospace);
  padding:34px 40px 80px;
  letter-spacing:.01em;
}
.shell *{box-sizing:border-box}

.topbar{
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid #0F0F11;padding:0 0 14px;margin-bottom:34px;gap:24px;flex-wrap:wrap;
}
.topbar .lead{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
.topbar .lead em{font-style:normal;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:#4A4A4D}
.topbar .lead b{font-size:13px;font-weight:500;letter-spacing:-.01em}
.topbar .lead b i{color:var(--accent-500);font-style:normal}
.topbar a.home{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  text-decoration:none;color:#0F0F11;
  border:1px solid #0F0F11;padding:7px 12px;background:transparent;
}
.topbar a.home:hover{background:#0F0F11;color:#E8E8E5}

.hero{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:34px;align-items:start;margin-bottom:30px}
.hero h1{font-size:clamp(36px,4.9vw,64px);letter-spacing:-.045em;line-height:1.02;margin:0 0 16px;font-weight:500;max-width:1050px}
.hero h1 mark{background:transparent;color:var(--accent-500);padding:0}
.hero p{color:#4A4A4D;font-size:14px;line-height:1.6;margin:0;max-width:72ch}
.hero .meta{
  border:1px solid #0F0F11;padding:14px 16px;background:#DCDCD8;
  font-size:11px;line-height:1.5;color:#0F0F11;align-self:start;margin-top:4px;
}
.hero .meta b{display:block;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:#4A4A4D;font-size:10px;margin-bottom:6px}
.hero .meta dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 14px}
.hero .meta dt{color:#4A4A4D}
.hero .meta dd{margin:0;color:#0F0F11}

.tabs{
  display:flex;gap:0;border:1px solid #0F0F11;background:#0F0F11;
  margin-bottom:24px;overflow-x:auto;
}
.tabs button{
  flex:1;min-width:160px;
  background:#0F0F11;color:#DCDCD8;
  border:0;border-right:1px solid #2a2a2d;
  padding:14px 16px;
  font-family:inherit;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  cursor:pointer;text-align:left;
}
.tabs button:last-child{border-right:0}
.tabs button.on{background:#E8E8E5;color:#0F0F11}
.tabs button:hover:not(.on){background:#1c1c1f;color:#fff}
.tabs button small{display:block;font-size:9.5px;letter-spacing:.16em;color:#7a7a7d;margin-top:3px}
.tabs button.on small{color:#4A4A4D}

.section{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:22px;margin-bottom:28px}
.section.single{grid-template-columns:1fr}
.panel{
  border:1px solid #0F0F11;background:#ffffff;padding:22px 24px;
}
.panel.dark{background:#0F0F11;color:#E8E8E5}
.panel.dark .panelTitle small{color:#9a9a9d}
.panel.dark a{color:var(--accent-500)}
.panel.flat{background:#DCDCD8}

.panelTitle{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid #DCDCD8;
}
.panel.dark .panelTitle{border-bottom-color:#2a2a2d}
.panelTitle b{font-weight:500;font-size:14px;letter-spacing:-.01em}
.panelTitle small{font-size:10px;letter-spacing:.20em;text-transform:uppercase;color:#4A4A4D;font-weight:500}

.body p{font-size:13px;line-height:1.6;color:#0F0F11;margin:0 0 10px}
.body p.muted{color:#4A4A4D}
.panel.dark .body p{color:#E8E8E5}
.panel.dark .body p.muted{color:#9a9a9d}

.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;font-size:12px;margin:6px 0 12px}
.kv dt{color:#4A4A4D;letter-spacing:.06em;text-transform:uppercase;font-size:10px}
.kv dd{margin:0;color:#0F0F11}
.panel.dark .kv dd{color:#E8E8E5}

ul.flat,ol.flat{margin:0;padding-left:18px;font-size:12.5px;line-height:1.65;color:#0F0F11}
.panel.dark ul.flat,.panel.dark ol.flat{color:#E8E8E5}
ul.flat li,ol.flat li{margin:2px 0}
ul.flat code,ol.flat code,.body code,.kv code{
  font-family:inherit;font-size:11.5px;background:#DCDCD8;color:#0F0F11;padding:1px 5px;border-radius:0;
}
.panel.dark ul.flat code,.panel.dark ol.flat code,.panel.dark .body code,.panel.dark .kv code{background:#2a2a2d;color:#E8E8E5}

/* execution loop */
.loop{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;border:1px solid #0F0F11}
.loopStep{
  border-right:1px solid #DCDCD8;background:#ffffff;
  padding:14px 14px 16px;text-align:left;cursor:pointer;
  font-family:inherit;color:#0F0F11;
  display:flex;flex-direction:column;gap:6px;min-height:120px;
  transition:background .12s,color .12s;
}
.loopStep:last-child{border-right:0}
.loopStep:hover{background:#DCDCD8}
.loopStep.on{background:#0F0F11;color:#E8E8E5}
.loopStep.on small{color:#9a9a9d}
.loopStep b{font-size:10px;letter-spacing:.20em;text-transform:uppercase;font-weight:500;color:#4A4A4D}
.loopStep.on b{color:var(--accent-500)}
.loopStep span{font-size:13px;font-weight:500;letter-spacing:-.01em;line-height:1.25}
.loopStep small{font-size:11px;color:#4A4A4D;line-height:1.4}

.loopExplain{
  border:1px solid #0F0F11;border-top:0;background:#DCDCD8;padding:18px 22px;
}
.loopExplain h4{margin:0 0 8px;font-size:13px;letter-spacing:-.01em;font-weight:500}
.loopExplain h4 em{font-style:normal;color:var(--accent-500);font-weight:500}
.loopExplain p{margin:0 0 8px;font-size:12.5px;line-height:1.6;color:#0F0F11}
.loopExplain code{font-family:inherit;background:#0F0F11;color:#E8E8E5;padding:1px 5px;font-size:11px}

/* approval simulator */
.simGrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);gap:22px}
@media (max-width:900px){.simGrid{grid-template-columns:1fr}}
.toggles{display:flex;flex-direction:column;gap:8px}
.toggleRow{
  display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;
  border:1px solid #DCDCD8;padding:9px 12px;background:#ffffff;
}
.toggleRow input{accent-color:#0F0F11;width:14px;height:14px}
.toggleRow b{font-weight:500;font-size:12.5px;letter-spacing:-.01em}
.toggleRow small{display:block;font-size:11px;color:#4A4A4D}
.riskTag{
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  padding:3px 7px;border:1px solid #0F0F11;color:#0F0F11;background:transparent;
}
.riskTag.low{border-color:#4A4A4D;color:#4A4A4D}
.riskTag.medium{border-color:#0F0F11;color:#0F0F11;background:#DCDCD8}
.riskTag.high{border-color:#0F0F11;color:#E8E8E5;background:#0F0F11}
.riskTag.irrev{border-color:var(--accent-500);color:#fff;background:var(--accent-500)}
.scopeTag{font-size:10px;color:#4A4A4D;letter-spacing:.04em}

.modeRow{display:flex;gap:0;border:1px solid #0F0F11;margin:0 0 14px}
.modeRow button{
  flex:1;background:#ffffff;color:#0F0F11;border:0;border-right:1px solid #0F0F11;
  padding:9px 10px;font-family:inherit;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;
}
.modeRow button:last-child{border-right:0}
.modeRow button.on{background:#0F0F11;color:#E8E8E5}
.modeRow button.on.danger{background:var(--accent-500);color:#fff}

.score{
  border:1px solid #0F0F11;background:#0F0F11;color:#E8E8E5;padding:20px 22px;
  display:flex;flex-direction:column;gap:14px;
}
.score b{display:block;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#9a9a9d;font-weight:500}
.scoreBig{font-size:54px;letter-spacing:-.05em;line-height:1;font-weight:500}
.scoreBig em{font-style:normal;color:var(--accent-500)}
.scoreBar{height:6px;background:#2a2a2d;position:relative;overflow:hidden}
.scoreBar i{position:absolute;left:0;top:0;bottom:0;background:var(--accent-500);transition:width .2s}
.scoreList{font-size:11.5px;line-height:1.6;color:#DCDCD8;margin:0;padding:0;list-style:none}
.scoreList li{display:flex;justify-content:space-between;gap:10px;padding:2px 0;border-bottom:1px dashed #2a2a2d}
.scoreList li:last-child{border-bottom:0}
.scoreList li span{color:#9a9a9d}

/* matrix */
.matrix{width:100%;border-collapse:collapse;font-size:12px}
.matrix th,.matrix td{border:1px solid #0F0F11;padding:9px 12px;text-align:left;vertical-align:top;line-height:1.5}
.matrix thead th{background:#0F0F11;color:#E8E8E5;font-weight:500;letter-spacing:.10em;text-transform:uppercase;font-size:10.5px}
.matrix tbody tr:nth-child(even){background:#DCDCD8}
.matrix tbody th{background:transparent;color:#4A4A4D;font-weight:500;letter-spacing:.06em;font-size:11px;text-transform:uppercase;width:170px}
.matrix .mark{color:var(--accent-500);font-weight:500}

/* source map */
.sourceList{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px}
.sourceCard{
  border:1px solid #0F0F11;background:#ffffff;padding:12px 14px;cursor:pointer;
  font-family:inherit;text-align:left;color:#0F0F11;
  display:flex;flex-direction:column;gap:4px;
}
.sourceCard:hover{background:#DCDCD8}
.sourceCard.on{background:#0F0F11;color:#E8E8E5}
.sourceCard b{font-size:12px;font-weight:500;letter-spacing:-.005em}
.sourceCard code{font-family:inherit;font-size:10.5px;color:#4A4A4D;background:transparent;padding:0}
.sourceCard.on code{color:var(--accent-500)}
.sourceCard small{font-size:11px;line-height:1.45;color:#4A4A4D}
.sourceCard.on small{color:#DCDCD8}

/* mission simulator */
.simShell{border:1px solid #0F0F11;background:#ffffff;padding:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);min-height:380px}
@media (max-width:980px){.simShell{grid-template-columns:1fr}}
.simInput{border-right:1px solid #0F0F11;padding:18px 20px;display:flex;flex-direction:column;gap:10px}
.simInput textarea{
  flex:1;min-height:180px;
  border:1px solid #0F0F11;background:#ffffff;color:#0F0F11;
  font-family:inherit;font-size:12.5px;line-height:1.55;padding:10px 12px;resize:vertical;
}
.simInput textarea:focus{outline:0;border-color:var(--accent-500)}
.simHelp{font-size:11px;color:#4A4A4D;line-height:1.5;margin:0}
.simRow{display:flex;gap:8px;flex-wrap:wrap}
.simRow button{
  font-family:inherit;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:9px 14px;border:1px solid #0F0F11;background:#0F0F11;color:#E8E8E5;cursor:pointer;
}
.simRow button.secondary{background:#ffffff;color:#0F0F11}
.simRow button:hover{background:var(--accent-500);color:#fff;border-color:var(--accent-500)}
.simRow button.secondary:hover{background:#DCDCD8;color:#0F0F11;border-color:#0F0F11}

.simOut{padding:18px 20px;display:flex;flex-direction:column;gap:14px;background:#DCDCD8}
.simBlock{border:1px solid #0F0F11;background:#ffffff;padding:11px 13px}
.simBlock b{display:block;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:#4A4A4D;font-weight:500;margin-bottom:6px}
.simBlock p,.simBlock li{font-size:12px;line-height:1.5;margin:0;color:#0F0F11}
.simBlock ul{margin:0;padding-left:18px;font-size:12px;line-height:1.55}
.simBlock .empty{color:#4A4A4D;font-style:normal}
.simBlock .audit{font-size:11px;color:#4A4A4D}
.simBlock .audit em{font-style:normal;color:var(--accent-500)}

/* phase roadmap */
.roadmap{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0;border:1px solid #0F0F11}
.phase{border-right:1px solid #DCDCD8;padding:16px;background:#ffffff;display:flex;flex-direction:column;gap:7px}
.phase:last-child{border-right:0}
.phase b{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-600);font-weight:500}
.phase span{font-size:13px;font-weight:500;letter-spacing:-.01em;color:#0F0F11}
.phase small{font-size:11.5px;line-height:1.5;color:#4A4A4D}
.phase ul{margin:0;padding-left:16px;font-size:11.5px;line-height:1.55;color:#0F0F11}

/* misc */
.footer{
  margin-top:42px;padding-top:18px;border-top:1px solid #0F0F11;
  display:flex;justify-content:space-between;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#4A4A4D;flex-wrap:wrap;gap:12px;
}
.callout{
  border:1px solid var(--accent-500);background:#ffffff;padding:14px 16px;font-size:12.5px;line-height:1.55;
}
.callout b{color:var(--accent-500);font-weight:500;letter-spacing:-.005em}

@media (max-width:780px){
  .shell{padding:22px 18px 60px}
  .hero{grid-template-columns:1fr;gap:18px}
  .section{grid-template-columns:1fr}
  .tabs button{min-width:130px}
  .matrix th,.matrix td{padding:7px 9px;font-size:11.5px}
  .matrix tbody th{width:120px}
}
