body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.shell{max-width:1480px;margin:auto;padding:28px}
.hero{background:var(--cream);color:var(--ink);border:1px solid rgba(183,190,197,.9);border-radius:24px;padding:24px;display:flex;justify-content:space-between;gap:28px;align-items:flex-start;margin-bottom:16px;box-shadow:0 16px 42px var(--green-shadow)}
.eyebrow{font-size:12px;font-weight:900;letter-spacing:.18em;color:var(--root-green)}
h1{margin:8px 0 7px;font-size:clamp(34px,5vw,64px);letter-spacing:-.055em;line-height:.92;color:var(--deep-root)}
.hero p{margin:0;color:#555950;max-width:760px;font-size:14px;line-height:1.55}
.status{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.status span{font-size:10px;letter-spacing:.1em;border:1px solid var(--slate-silver);border-radius:999px;padding:8px 10px;color:var(--ink);background:var(--parchment)}
.status span:first-child{border-color:var(--old-gold);background:#F0DEAC}
.controls{background:var(--cream);border:1px solid rgba(183,190,197,.9);border-radius:18px;display:grid;grid-template-columns:minmax(220px,1.4fr) repeat(2,minmax(150px,.55fr)) auto;gap:10px;margin-bottom:14px;padding:12px;box-shadow:0 12px 30px var(--green-shadow)}
.controls input,.controls select,.controls button{height:44px;border:1px solid var(--slate-silver);background:var(--parchment);color:var(--ink);border-radius:11px;padding:0 13px;outline:none}
.controls input::placeholder{color:#77766f}.controls input:focus,.controls select:focus{border-color:var(--old-gold);box-shadow:0 0 0 3px rgba(197,162,74,.16)}
.controls button{cursor:pointer;font-weight:800}.controls button:hover{background:#F0DEAC;border-color:var(--old-gold)}
.grid{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:14px}
.panel{background:var(--cream);color:var(--ink);border:1px solid rgba(183,190,197,.9);border-radius:20px;box-shadow:0 16px 42px var(--green-shadow)}
.chart-panel{padding:18px;min-height:720px}.panel-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
.panel-head h2{font-size:16px;margin:0 0 5px;color:var(--deep-root)}.panel-head p{font-size:11px;line-height:1.45;color:#5d615a;margin:0;max-width:650px}
.legend{font-size:11px;color:#5d615a;white-space:nowrap}.legend i{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--old-gold);box-shadow:0 0 0 4px rgba(197,162,74,.14);margin-right:6px}
.axis-controls{display:grid;grid-template-columns:minmax(150px,1fr) 44px minmax(150px,1fr) minmax(190px,.9fr);gap:9px;align-items:end;margin:15px 0 4px;padding:11px;border:1px solid #CEC4B4;background:var(--parchment);border-radius:14px}
.axis-controls label{display:grid;gap:5px}.axis-controls label span,.comparison-chip span{font-size:9px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:#6B6E68}
.axis-controls select,.axis-controls button{height:42px;border:1px solid var(--slate-silver);background:var(--cream);color:var(--ink);border-radius:10px;padding:0 11px;outline:none;font-weight:800}
.axis-controls select:focus,.axis-controls button:focus{border-color:var(--old-gold);box-shadow:0 0 0 3px rgba(197,162,74,.16)}
.axis-controls button{cursor:pointer;font-size:19px;padding:0}.axis-controls button:hover{background:#F0DEAC;border-color:var(--old-gold)}
.comparison-chip{min-height:42px;display:flex;flex-direction:column;justify-content:center;border:1px solid var(--old-gold);background:#F0DEAC;border-radius:10px;padding:5px 11px}.comparison-chip b{font-size:11px;color:var(--deep-root)}
.chart-wrap{position:relative}#chart{display:block;width:100%;height:590px}
.gridline{stroke:#D9D0C2;stroke-width:1}.gridline.major{stroke:#BEB5A8}.axis{stroke:#7E817C;stroke-width:1.2}.tick{fill:#5D625D;font-size:10px}.axis-label{fill:#4E534E;font-size:11px}.tier{fill:#686D68;font-size:9px;letter-spacing:.05em}
.point-label{fill:var(--ink);font-size:11px;font-weight:900;paint-order:stroke;stroke:var(--cream);stroke-width:4px;stroke-linejoin:round}.point{cursor:pointer;transition:.15s}.point:hover,.point:focus{filter:brightness(1.04) drop-shadow(0 0 5px rgba(197,162,74,.45))}
.no-results{display:none;position:absolute;inset:0;place-items:center;color:#666A64}.no-results.show{display:grid}
.detail-panel{padding:18px;min-height:680px}.name-row{display:flex;justify-content:space-between;gap:10px;align-items:center}.name{font-size:27px;font-weight:950;letter-spacing:-.04em;color:var(--deep-root)}
.badge{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);border:1px solid var(--old-gold);background:#F0DEAC;border-radius:999px;padding:5px 8px}
.civilian{color:#575B55;margin-top:2px}.summary{font-size:12px;line-height:1.55;color:#5E625B;margin:14px 0}
.meta{display:grid;grid-template-columns:1fr 1fr;gap:8px}.meta div{border:1px solid #CEC4B4;background:var(--parchment);border-radius:10px;padding:10px}.meta span{display:block;color:#6B6E68;font-size:9px;letter-spacing:.09em;text-transform:uppercase;margin-bottom:3px}.meta b{font-size:11px;color:var(--ink)}
.comparison-readout{margin:12px 0 0;padding:11px 12px;border:1px solid #CEC4B4;background:var(--parchment);border-radius:10px;display:grid;gap:3px}.comparison-readout span,.top-baseline span{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#6B6E68}.comparison-readout b{font-size:11px;color:var(--ink)}.comparison-readout i{font-style:normal;color:var(--bark);padding:0 3px}
.mean{margin:10px 0;padding:14px;border:1px solid var(--old-gold);background:#F0DEAC;border-radius:12px;display:flex;align-items:end;justify-content:space-between}.mean span{font-size:10px;color:#555850;line-height:1.4}.mean b{font-size:32px;letter-spacing:-.06em;color:var(--deep-root)}
.top-baseline{margin:0 0 12px;padding:9px 11px;border:1px solid #CEC4B4;background:var(--parchment);border-radius:10px;display:flex;justify-content:space-between;gap:10px}.top-baseline b{font-size:10px;color:var(--ink)}
.section-label{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#646862;font-weight:900;margin:17px 0 8px}
.stat{display:grid;grid-template-columns:88px 1fr 38px;gap:8px;align-items:center;margin:7px 0}.stat-name{font-size:10px;color:#434741}.track{height:6px;background:#D5CCBF;border-radius:999px;overflow:hidden}.fill{height:100%;background:linear-gradient(90deg,var(--root-green),var(--old-gold));border-radius:999px}.stat-val{font-size:10px;text-align:right;color:var(--ink)}
.conditional{display:flex;justify-content:space-between;padding:9px 10px;border:1px solid #CEC4B4;border-radius:10px;background:var(--parchment);margin:7px 0;font-size:11px;color:var(--ink)}
.conditional-empty{padding:9px 10px;border:1px solid #CEC4B4;border-radius:10px;background:var(--parchment);font-size:11px;color:#5E625B}
.dossier-link{display:block;margin:13px 0 4px;padding:9px 11px;text-align:center;background:var(--parchment);color:var(--ink);border:1px solid var(--old-gold);border-radius:999px;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;text-decoration:none}.dossier-link:hover{background:#fff8ed}
.tooltip{position:fixed;z-index:99;pointer-events:none;min-width:245px;max-width:310px;background:var(--cream);color:var(--ink);border:1px solid var(--old-gold);border-radius:12px;padding:12px;box-shadow:0 18px 50px rgba(0,0,0,.28);opacity:0;transform:translateY(4px);transition:.1s}
.tooltip.show{opacity:1;transform:translateY(0)}.tooltip strong{font-size:14px;color:var(--deep-root)}.tooltip small{display:block;color:#5E625B;margin-top:1px}.tooltip .trow{display:flex;justify-content:space-between;gap:14px;margin-top:8px;font-size:10px;color:#646862}.tooltip .trow b{color:var(--ink)}
footer{margin:14px 0 0;padding:14px 16px;background:var(--cream);color:var(--ink);border:1px solid rgba(183,190,197,.9);border-radius:16px;font-size:10px;line-height:1.5;box-shadow:0 10px 26px var(--green-shadow)}
::selection{background:var(--old-gold);color:var(--ink)}
@media(max-width:980px){.grid{grid-template-columns:1fr}.detail-panel{min-height:auto}.controls{grid-template-columns:1fr 1fr}.axis-controls{grid-template-columns:1fr 44px 1fr}.comparison-chip{grid-column:1/-1}}
@media(max-width:640px){.shell{padding:16px}.hero{display:block}.status{justify-content:flex-start;margin-top:14px}.controls{grid-template-columns:1fr}.panel-head{display:block}.legend{margin-top:8px}.axis-controls{grid-template-columns:1fr 44px 1fr;padding:9px}.axis-controls select{font-size:12px}.comparison-chip{grid-column:1/-1}.chart-panel{padding:12px;min-height:650px}#chart{height:525px}.detail-panel{min-height:auto}}


/* OldRoot DPI branding */
.hero,.panel{position:relative;overflow:hidden}
.hero::after,.panel::after{
  content:"";position:absolute;right:13px;bottom:11px;width:38px;height:38px;
  background:url("assets/branding/oldroot-monogram.png") center/contain no-repeat;
  opacity:.09;pointer-events:none;
}
.hero>*,.panel>*{position:relative;z-index:1}
.dpi-footer.oldroot-signature{gap:14px}
@media(max-width:640px){
  .hero::after,.panel::after{width:32px;height:32px;right:10px;bottom:9px}
}


/* DPI Analytics 2.0 */
.analytics-toolbar{
  display:grid;grid-template-columns:minmax(260px,1fr) auto auto auto;gap:10px;
  margin-bottom:12px;padding:12px;background:var(--cream);border:1px solid rgba(183,190,197,.9);
  border-radius:18px;box-shadow:0 12px 30px var(--green-shadow)
}
.analytics-search{display:grid;gap:5px}.analytics-search label,.display-controls span{
  font-size:9px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#6b6e68
}
.analytics-search input,.analytics-toolbar button,.display-controls select,.filter-drawer button{
  height:42px;border:1px solid var(--slate-silver);border-radius:10px;background:var(--parchment);
  color:var(--ink);padding:0 12px;font-weight:800;outline:none
}
.analytics-search input:focus,.display-controls select:focus{border-color:var(--old-gold);box-shadow:0 0 0 3px rgba(197,162,74,.16)}
.analytics-toolbar button,.filter-drawer button{cursor:pointer}
.analytics-toolbar button:hover,.filter-drawer button:hover,.compare-toggle.active{background:#f0deac;border-color:var(--old-gold)}
.filter-open span{display:inline-grid;place-items:center;min-width:19px;height:19px;margin-left:5px;border-radius:999px;background:var(--deep-root);color:var(--cream);font-size:9px}
.filter-drawer{
  margin-bottom:12px;padding:16px;background:var(--cream);border:1px solid rgba(183,190,197,.9);
  border-radius:18px;box-shadow:0 12px 30px var(--green-shadow)
}
.filter-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.filter-drawer-head>div:first-child{display:grid;gap:4px}.filter-drawer-head span{font-size:9px;font-weight:900;letter-spacing:.12em;color:var(--root-green)}
.filter-drawer-head strong{font-size:15px;color:var(--deep-root)}.filter-drawer-head>div:last-child{display:flex;gap:8px}
.filter-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.filter-group{border:1px solid #cec4b4;border-radius:13px;padding:12px;background:var(--parchment)}
.filter-group h3{font-size:10px;margin:0 0 9px;text-transform:uppercase;letter-spacing:.08em;color:var(--deep-root)}
.filter-options{display:grid;gap:6px}.filter-check{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:6px 7px;border-radius:8px;background:rgba(243,235,221,.72);font-size:10px;cursor:pointer}
.filter-check:hover{background:#fff8ed}.filter-check input{accent-color:var(--root-green)}.filter-option-count{font-size:9px;color:#6c6f69}
.active-filters{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 12px}
.active-filters button{border:1px solid var(--old-gold);border-radius:999px;background:#f0deac;padding:7px 9px;font-size:9px;font-weight:900;cursor:pointer}
.plot-count{font-size:10px;font-weight:900;color:#636760;white-space:nowrap}
.display-controls{
  display:grid;grid-template-columns:repeat(3,minmax(130px,1fr));gap:9px;margin:8px 0 4px;
  padding:10px;border:1px solid #cec4b4;background:#f7efe3;border-radius:13px
}
.display-controls label{display:grid;gap:5px}.display-controls select{background:var(--cream)}
.chart-note{min-height:18px;margin-top:4px;font-size:10px;line-height:1.4;color:#6b6e68}
.chart-legend .legend-text{font-size:9px;fill:#5d625d}.compare-ring{pointer-events:none}
.detail-portrait{display:block;width:100%;max-height:200px;object-fit:cover;object-position:center top;border:1px solid #cec4b4;border-radius:13px;margin-bottom:13px;background:var(--parchment)}
.detail-empty{display:grid;place-items:center;min-height:280px;color:#666a64;text-align:center}
.compare-tray{margin-top:14px;padding:18px}
.compare-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:14px}
.compare-head span{font-size:9px;font-weight:900;letter-spacing:.12em;color:var(--root-green)}
.compare-head h2{margin:4px 0 0;color:var(--deep-root)}.compare-head button{height:38px;border:1px solid var(--old-gold);border-radius:999px;background:var(--parchment);font-weight:850;cursor:pointer}
.compare-empty{padding:28px;border:1px dashed var(--cafe);border-radius:13px;background:var(--parchment);text-align:center;color:#5f625c}
.compare-names{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px}.compare-names button{border:1px solid var(--old-gold);border-radius:999px;background:#f0deac;padding:7px 9px;font-size:9px;font-weight:900;cursor:pointer}
.compare-table-wrap{overflow-x:auto;border:1px solid #cec4b4;border-radius:13px}
.compare-table{width:100%;border-collapse:collapse;min-width:560px}.compare-table th,.compare-table td{padding:9px 11px;border-bottom:1px solid #d8d0c4;text-align:right;font-size:10px}
.compare-table th:first-child,.compare-table td:first-child{text-align:left}.compare-table thead th{background:var(--deep-root);color:var(--cream);font-size:9px;text-transform:uppercase;letter-spacing:.07em}
.compare-table tbody tr:nth-child(even){background:#f7efe3}.compare-table .analytics-row{background:#f0deac!important;font-weight:900}
.compare-footnote{font-size:9px;color:#696c66;margin:9px 0 0}
@media(max-width:980px){
  .analytics-toolbar{grid-template-columns:1fr 1fr}.filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .analytics-toolbar{grid-template-columns:1fr}.filter-drawer-head{align-items:flex-start;flex-direction:column}
  .filter-grid{grid-template-columns:1fr}.display-controls{grid-template-columns:1fr}
  .compare-head{align-items:flex-start;flex-direction:column}.detail-portrait{max-height:260px}
}


/* OldRoot DPI modernization */
body{font-family:var(--font-sans)}
.shell{max-width:1480px;padding:34px 28px 46px}
.hero,.panel,.analytics-toolbar,.filter-drawer{
  border-color:var(--line);box-shadow:var(--surface-shadow)
}
.hero{
  border-radius:18px;padding:30px 32px;
  background:
    linear-gradient(120deg,rgba(197,162,74,.09),transparent 40%),
    linear-gradient(180deg,var(--paper-bright),var(--cream))
}
.eyebrow,.status span,.panel-head h2,.panel-head p,.analytics-search label,.display-controls span,
.filter-drawer-head span,.filter-group h3,.filter-check,.plot-count,.section-label,.compare-head span,
.compare-table,.compare-footnote{font-family:var(--font-sans)}
h1{font-family:var(--font-display);font-weight:920;font-size:clamp(48px,6.5vw,92px);letter-spacing:-.072em}
.hero p{font-size:13px;line-height:1.65;max-width:820px}
.status span{border-color:var(--line-strong);background:rgba(231,220,203,.55)}
.analytics-toolbar,.filter-drawer{border-radius:14px;background:rgba(247,240,229,.97)}
.analytics-search input,.analytics-toolbar button,.display-controls select,.filter-drawer button,
.axis-controls select,.axis-controls button{border-color:var(--line-strong);background:var(--paper-bright);border-radius:9px}
.grid{gap:12px}.panel{border-radius:15px;background:var(--paper-bright)}
.chart-panel,.detail-panel{padding:20px}
.axis-controls,.display-controls,.filter-group,.meta div,.comparison-readout,.top-baseline,.conditional,.conditional-empty{
  border-color:var(--line);background:rgba(231,220,203,.42);border-radius:10px
}
.name{font-family:var(--font-display);font-weight:900}
.compare-tray{border-radius:15px}
.compare-head h2{font-family:var(--font-display)}
.tooltip{border-color:rgba(197,162,74,.7);background:var(--paper-bright)}
@media(max-width:640px){.shell{padding:20px 14px 34px}.hero{padding:24px 20px}}


/* OPI tactical workstation — dark OldRoot intelligence surface */
body{
  background:
    radial-gradient(circle at 18% 0%,rgba(197,162,74,.055),transparent 28%),
    linear-gradient(180deg,#0d1d17 0%,#10251c 42%,#0a1712 100%);
  color:#dce5dd;
}
.shell{max-width:1560px}
.hero{
  color:#edf1e9;
  border-color:rgba(197,162,74,.28);
  background:
    linear-gradient(115deg,rgba(197,162,74,.09),transparent 38%),
    linear-gradient(180deg,#173428,#10261d);
  box-shadow:0 22px 60px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.025)
}
.hero h1{color:#f3ebdd;text-shadow:0 0 32px rgba(197,162,74,.08)}
.hero p{color:#aebbb2}.eyebrow{color:#c5a24a}
.status span{color:#d8e0da;background:#10261d;border-color:#4b6257}
.status span:first-child{color:#f2dfaa;background:rgba(197,162,74,.12);border-color:#c5a24a}

.analytics-toolbar,.filter-drawer{
  background:#12291f;border-color:#345044;box-shadow:0 16px 42px rgba(0,0,0,.25)
}
.analytics-search label,.display-controls span,.filter-drawer-head span,.filter-group h3,.plot-count{color:#8fa398}
.analytics-search input,.analytics-toolbar button,.display-controls select,.filter-drawer button,
.axis-controls select,.axis-controls button{
  color:#dce5dd;background:#0d2018;border-color:#3d584c
}
.analytics-search input::placeholder{color:#71867a}
.analytics-search input:focus,.display-controls select:focus,.axis-controls select:focus,.axis-controls button:focus{
  border-color:#c5a24a;box-shadow:0 0 0 3px rgba(197,162,74,.10)
}
.analytics-toolbar button:hover,.filter-drawer button:hover,.compare-toggle.active{
  color:#f1dfaa;background:#243d31;border-color:#c5a24a
}
.filter-group{background:#0f241b;border-color:#314b3f}
.filter-check{color:#c9d3cc;background:#132b21}
.filter-check:hover{background:#193529}.filter-option-count{color:#84988d}

.panel{
  color:#dce5dd;background:#0d2018;border-color:#345044;
  box-shadow:0 22px 60px rgba(0,0,0,.30),inset 0 1px rgba(255,255,255,.02)
}
.chart-panel{min-height:760px}
.panel-head h2{color:#e8e4d8;text-transform:uppercase;letter-spacing:.08em;font-size:13px}
.panel-head p{color:#82978b}
.axis-controls,.display-controls{
  background:#10271d;border-color:#314b3f
}
.comparison-chip{background:rgba(197,162,74,.10);border-color:#806c37}
.comparison-chip span{color:#8fa398}.comparison-chip b{color:#e6d39c}
.chart-wrap{
  margin-top:12px;border:1px solid #2c493c;border-radius:12px;overflow:hidden;
  background:
    linear-gradient(rgba(117,151,132,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(117,151,132,.035) 1px,transparent 1px),
    radial-gradient(circle at 50% 45%,rgba(36,76,58,.38),transparent 70%),
    #091a13;
  background-size:24px 24px,24px 24px,auto,auto;
  box-shadow:inset 0 0 70px rgba(0,0,0,.38)
}
#chart{height:620px}
.gridline{stroke:#234235;stroke-width:1}.axis{stroke:#5d786b;stroke-width:1.1}
.tick{fill:#718b7e;font-family:var(--font-mono);font-size:9px}
.axis-label{fill:#a5b7ad;font-family:var(--font-sans);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.point-label{fill:#e7eee9;stroke:#091a13;stroke-width:5px;letter-spacing:.02em}
.point{stroke:#07140f!important;stroke-width:2!important;filter:drop-shadow(0 0 5px rgba(197,162,74,.16))}
.point:hover{filter:brightness(1.16) drop-shadow(0 0 8px rgba(197,162,74,.65))}
.compare-ring{stroke:#c5a24a!important;stroke-dasharray:4 3}
.chart-note{color:#789084}
.no-results{color:#82978b}
.chart-crosshair{stroke:#c5a24a;stroke-width:1;stroke-dasharray:3 5;opacity:.62;pointer-events:none}
.target-ring{fill:none;stroke:#c5a24a;stroke-width:1.5;opacity:.92;pointer-events:none}
.target-ring.outer{stroke-dasharray:3 4;opacity:.5}
.target-bracket{fill:none;stroke:#c5a24a;stroke-width:1.5;pointer-events:none}
.chart-legend-bg{fill:#0c1d16;stroke:#315044;stroke-width:1;opacity:.96}
.chart-legend-title{fill:#81998d;font-size:8px;font-weight:900;letter-spacing:.12em}
.chart-legend-text{fill:#c9d5ce;font-size:9px}
.chart-legend-dot{stroke:#07140f;stroke-width:1}

.detail-panel{background:linear-gradient(180deg,#10261d,#0b1c15)}
.detail-portrait{border-color:#3a5549;background:#091a13;filter:saturate(.88) contrast(1.04)}
.name{color:#f0eadf}.civilian,.summary{color:#98aa9f}.badge{color:#eadba9;background:rgba(197,162,74,.10)}
.meta div,.comparison-readout,.top-baseline,.conditional,.conditional-empty{
  background:#10271d;border-color:#304a3e
}
.meta span,.comparison-readout span,.top-baseline span,.section-label{color:#789084}
.meta b,.comparison-readout b,.top-baseline b,.conditional{color:#d8e2dc}
.mean{background:rgba(197,162,74,.09);border-color:#806c37}.mean span{color:#9bab9f}.mean b{color:#e9d7a1}
.stat-name,.stat-val{color:#bac8c0}.track{background:#1d392d}.fill{background:linear-gradient(90deg,#4f7764,#c5a24a)}
.dossier-link{color:#e9d8a4;background:#132b21;border-color:#806c37}.dossier-link:hover{background:#1a3529}
.tooltip{color:#dce5dd;background:#0b1d15;border-color:#806c37;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.tooltip strong{color:#f0eadf}.tooltip small,.tooltip .trow{color:#8ea096}.tooltip .trow b{color:#e4ebe6}
.compare-tray{background:#0d2018}.compare-head h2{color:#eee8dc}
.compare-table-wrap{border-color:#304a3e}.compare-table th,.compare-table td{border-color:#284438;color:#cbd7d0}
.compare-table thead th{background:#071a12;color:#dce5dd}.compare-table tbody tr:nth-child(even){background:#10271d}
.compare-table .analytics-row{background:rgba(197,162,74,.10)!important}.compare-footnote{color:#82958a}
.oldroot-footer{border-color:#304a3e!important;background:#10261d!important;color:#aebbb2!important}

@media(max-width:640px){#chart{height:550px}.chart-wrap{background-size:18px 18px,18px 18px,auto,auto}}


/* OR-WEB-0007 — mobile OPI workstation consistency */
@media(max-width:640px){
  .shell{padding:14px}
  .hero{padding:22px 18px}
  .hero h1{font-size:clamp(40px,13vw,58px);line-height:.92}
  .analytics-toolbar{grid-template-columns:1fr;padding:10px}
  .axis-controls{grid-template-columns:1fr;padding:9px}
  .axis-controls>#swap-axes{width:44px;justify-self:center}
  .comparison-chip{grid-column:auto}
  .display-controls{grid-template-columns:1fr}
  .chart-panel,.detail-panel{padding:12px}
  #chart{height:480px}
  .name-row{align-items:flex-start;flex-direction:column}
  .meta{grid-template-columns:1fr}
  .compare-table-wrap{max-width:100%;overflow-x:auto}
}
@media(max-width:430px){
  .shell{padding:12px}
  .hero{padding:19px 16px}
  .chart-panel,.detail-panel{padding:10px}
  #chart{height:440px}
}


/* =========================================================
   OR-WEB-0016 · AFTER DARK · OPI WORKSTATION ALIGNMENT
   ========================================================= */
body.oldroot-after-dark{
  background:
    radial-gradient(circle at 14% 4%,rgba(49,124,84,.17),transparent 32rem),
    radial-gradient(circle at 90% 10%,rgba(197,162,74,.055),transparent 28rem),
    linear-gradient(180deg,#07150f 0%,#04100b 48%,#020906 100%) fixed;
}
body.oldroot-after-dark .hero{
  border-color:rgba(197,162,74,.24);
  background:
    radial-gradient(circle at 88% 0%,rgba(197,162,74,.07),transparent 20rem),
    linear-gradient(145deg,#0b2b1e,#061a12);
  box-shadow:0 30px 82px rgba(0,0,0,.30),inset 0 1px rgba(255,255,255,.025)
}
body.oldroot-after-dark .analytics-toolbar,
body.oldroot-after-dark .filter-drawer,
body.oldroot-after-dark .panel,
body.oldroot-after-dark .compare-tray{
  border-color:rgba(243,235,221,.085);
  background:
    radial-gradient(circle at 100% 0%,rgba(52,126,88,.07),transparent 16rem),
    #071b12;
  box-shadow:0 22px 64px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.018)
}
body.oldroot-after-dark .chart-wrap{
  border-color:rgba(197,162,74,.18);
  background:
    linear-gradient(rgba(117,151,132,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(117,151,132,.028) 1px,transparent 1px),
    radial-gradient(circle at 50% 45%,rgba(36,90,61,.30),transparent 70%),
    #030d09;
  background-size:26px 26px,26px 26px,auto,auto;
  box-shadow:inset 0 0 90px rgba(0,0,0,.42)
}
body.oldroot-after-dark .detail-panel{
  background:
    radial-gradient(circle at 100% 0%,rgba(197,162,74,.055),transparent 14rem),
    linear-gradient(180deg,#09251a,#06170f)
}
body.oldroot-after-dark .axis-controls,
body.oldroot-after-dark .display-controls,
body.oldroot-after-dark .filter-group,
body.oldroot-after-dark .meta div,
body.oldroot-after-dark .comparison-readout,
body.oldroot-after-dark .top-baseline,
body.oldroot-after-dark .conditional,
body.oldroot-after-dark .conditional-empty{
  border-color:rgba(243,235,221,.085);
  background:rgba(12,38,26,.60)
}
body.oldroot-after-dark .compare-table-wrap{border-color:rgba(243,235,221,.09)}
body.oldroot-after-dark .compare-table thead th{background:#03100b}
body.oldroot-after-dark .compare-table tbody tr:nth-child(even){background:rgba(12,38,26,.48)}

/* =========================================================
   OR-WEB-0025 · OPI LIVING ROOT FIELD ALIGNMENT
   Matches the sitewide organic depth system without importing
   editorial layout rules into the analytics workstation.
   ========================================================= */
body.oldroot-after-dark{
  position:relative;
  isolation:isolate;
  overflow-x:clip;
  background:
    radial-gradient(circle at 14% 4%,rgba(49,124,84,.16),transparent 32rem),
    radial-gradient(circle at 90% 10%,rgba(197,162,74,.04),transparent 28rem),
    radial-gradient(circle at 52% 70%,rgba(27,88,59,.09),transparent 46rem),
    linear-gradient(180deg,#04100b 0%,#020a07 48%,#010604 100%) fixed;
}
body.oldroot-after-dark > main,
body.oldroot-after-dark > footer{
  position:relative;
  z-index:1;
}
body.oldroot-after-dark > .masthead{
  z-index:30;
}
body.oldroot-after-dark::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.35;
  background-image:
    url("assets/branding/oldroot-root-field.svg"),
    url("assets/branding/oldroot-root-field.svg");
  background-repeat:repeat-y,repeat-y;
  background-size:min(1840px,145vw) 2760px,min(2320px,178vw) 3480px;
  background-position:50% 0,68% 1260px;
  filter:saturate(.72) contrast(1.02);
}
body.oldroot-after-dark::after{
  content:"";
  position:fixed;
  inset:-4%;
  z-index:0;
  pointer-events:none;
  opacity:.30;
  background:
    radial-gradient(circle at 16% 22%,rgba(197,162,74,.38) 0 1px,transparent 1.5px),
    radial-gradient(circle at 76% 18%,rgba(94,174,130,.30) 0 1px,transparent 1.5px),
    radial-gradient(circle at 88% 67%,rgba(94,174,130,.22) 0 1px,transparent 1.5px),
    repeating-linear-gradient(116deg,transparent 0 138px,rgba(104,161,131,.017) 138px 139px),
    radial-gradient(ellipse at 48% 45%,transparent 38%,rgba(0,0,0,.34) 100%);
  background-size:520px 520px,680px 680px,760px 760px,auto,auto;
  mix-blend-mode:screen;
  animation:opiRootAmbientDrift 42s ease-in-out infinite alternate;
}
@keyframes opiRootAmbientDrift{
  0%{transform:translate3d(-.25%,-.15%,0) scale(1.004)}
  100%{transform:translate3d(.35%,.24%,0) scale(1.009)}
}
@media(max-width:640px){
  body.oldroot-after-dark::before{
    opacity:.25;
    background-image:url("assets/branding/oldroot-root-field.svg");
    background-size:1120px 1680px;
    background-position:52% 0;
  }
  body.oldroot-after-dark::after{opacity:.22}
}
@media(prefers-reduced-motion:reduce){
  body.oldroot-after-dark::after{animation:none!important}
}

/* =========================================================
   OR-WEB-0029 · OPI MOBILE ACCESSIBILITY PASS
   ========================================================= */
.panel{
  content-visibility:auto;
  contain-intrinsic-size:1px 620px;
}
.analytics-toolbar button,
.filter-drawer button,
.axis-controls button,
.axis-controls select,
.display-controls select,
.analytics-search input{
  min-height:44px;
}
@media(max-width:760px){
  .shell{padding:14px}
  .hero{padding:24px 18px}
  .hero h1{font-size:clamp(42px,13vw,70px);line-height:.86}
  .analytics-toolbar{grid-template-columns:1fr 1fr}
  .analytics-search{grid-column:1/-1}
  .toolbar-reset,.compare-toggle,.filter-open{width:100%}
  .grid{grid-template-columns:1fr}
  .chart-panel,.detail-panel{min-height:0}
  .axis-controls{grid-template-columns:1fr}
  .axis-controls>#swap-axes{width:44px;justify-self:center}
  .display-controls{grid-template-columns:1fr}
  #chart{height:460px}
  .compare-tray{max-height:70vh;overflow:auto}
}
@media(max-width:430px){
  .analytics-toolbar{grid-template-columns:1fr}
  .analytics-search{grid-column:auto}
  #chart{height:400px}
  .panel{border-radius:14px}
}
@media(prefers-reduced-motion:reduce){
  .panel{content-visibility:visible}
}



/* =========================================================
   OR-WEB-0038 · UNSCORED OPI PUBLIC RECORDS
   ========================================================= */
.unscored-panel{margin:0 0 12px;padding:16px}
.unscored-list{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px}
.unscored-record{
  min-width:250px;flex:1 1 280px;display:flex;align-items:center;justify-content:space-between;gap:14px;
  border:1px solid var(--line-strong);border-radius:11px;background:rgba(231,220,203,.42);
  color:var(--ink);padding:11px 12px;text-align:left;cursor:pointer
}
.unscored-record:hover,.unscored-record:focus-visible{border-color:var(--old-gold);background:rgba(240,222,172,.20);outline:none}
.unscored-record span{display:grid;gap:2px}.unscored-record b{font-size:12px;color:var(--cream)}
.unscored-record small{font-size:10px;color:rgba(243,235,221,.64)}
.unscored-record strong{font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:var(--old-gold);text-align:right}
.unscored-detail{
  margin:12px 0;padding:13px;border:1px solid rgba(197,162,74,.30);border-radius:11px;
  background:rgba(197,162,74,.07)
}
.unscored-detail span{display:block;font-size:9px;font-weight:900;letter-spacing:.11em;color:var(--old-gold);margin-bottom:4px}
.unscored-detail strong{display:block;color:var(--cream);font-size:14px}
.unscored-detail p{margin:7px 0 0;font-size:11px;line-height:1.55;color:rgba(243,235,221,.70)}
@media(max-width:640px){
  .unscored-panel{padding:12px}
  .unscored-record{min-width:0;flex-basis:100%;align-items:flex-start;flex-direction:column}
  .unscored-record strong{text-align:left}
}


/* OR-WEB-0050 · character emblem support */
.detail-mark{
  display:block;
  width:72px;
  height:72px;
  object-fit:contain;
  margin:0 0 10px;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.22));
}
@media(max-width:640px){
  .detail-mark{width:62px;height:62px}
}