/* AIPX3 platform demo pages — extends /styles.css design tokens. */

/* mode / audit bar */
.platform-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:
  radial-gradient(420px 160px at 92% 0%,rgba(93,153,238,.22),transparent 65%),
  repeating-linear-gradient(112deg,rgba(93,153,238,.05) 0 1px,transparent 1px 26px),
  var(--navy-800);color:#cdd9f0;border-radius:var(--radius-lg);padding:14px 20px;margin:18px 0 34px;font-family:var(--font-mono);font-size:.78rem}
.platform-bar .mode-toggle{display:inline-flex;border:1px solid #2c4a7e;border-radius:999px;overflow:hidden}
.platform-bar .mode-toggle button{background:none;border:0;color:#9fb4d6;font:inherit;padding:6px 16px;cursor:pointer;transition:background .15s,color .15s}
.platform-bar .mode-toggle button.on{background:var(--elec-500);color:#fff}
.platform-bar .mode-toggle button:focus-visible{outline:2px solid var(--elec-400);outline-offset:-2px}
.platform-bar .asof{color:#8aa3cc}
.platform-bar .spacer{flex:1}
.platform-bar a{color:var(--elec-400);text-decoration:underline;text-underline-offset:3px}

/* data tables */
.ptable-wrap{overflow-x:auto;border:1px solid var(--gray-200);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);background:var(--white)}
table.ptable{width:100%;border-collapse:collapse;font-size:.84rem;min-width:640px}
table.ptable th{position:sticky;top:0;background:var(--navy-800);color:#dbe6f8;text-align:left;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;padding:10px 12px;white-space:nowrap}
table.ptable td{padding:9px 12px;border-top:1px solid var(--gray-100);vertical-align:top}
table.ptable tbody tr:hover{background:var(--elec-50)}
table.ptable td.num{font-family:var(--font-mono);text-align:right;white-space:nowrap}
table.ptable tr.total td{font-weight:700;background:var(--gray-50);border-top:2px solid var(--gray-300)}
table.ptable td .pos{color:var(--green-600)}
table.ptable td .neg{color:var(--red-600)}
table.ptable input{font-family:var(--font-mono);font-size:.82rem;width:90px;padding:4px 6px;border:1px solid var(--gray-300);border-radius:4px}
table.ptable select{font-size:.82rem;padding:4px 6px;border:1px solid var(--gray-300);border-radius:4px}
table.ptable input:focus,table.ptable select:focus{outline:2px solid var(--elec-400);border-color:var(--elec-500)}

/* status chips inside tables */
.pchip{display:inline-block;padding:2px 9px;border-radius:999px;font-family:var(--font-mono);font-size:.68rem;font-weight:600;white-space:nowrap}
.pchip.ok{background:#dcfce7;color:#15803d}
.pchip.watch{background:var(--amber-100);color:#92400e}
.pchip.crit,.pchip.failed{background:var(--red-100);color:var(--red-700)}
.pchip.info{background:var(--elec-100);color:var(--elec-700)}

/* charts */
.chart-card{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:20px}
.chart-card h4{font-size:.95rem;margin-bottom:4px}
.chart-card .src{display:block;margin-bottom:12px}
.chart-card svg{width:100%;height:auto;display:block}
.gauge-num{font-family:var(--font-mono);font-weight:700}

/* registry tabs + search */
.ptabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.ptabs button{font:inherit;font-size:.82rem;font-weight:600;padding:8px 16px;border:1px solid var(--gray-300);border-radius:999px;background:var(--white);color:var(--gray-700);cursor:pointer;transition:all .15s}
.ptabs button:hover{border-color:var(--elec-500);color:var(--elec-600)}
.ptabs button.on{background:var(--navy-800);border-color:var(--navy-800);color:#fff}
.psearch{font:inherit;font-size:.88rem;padding:9px 14px;border:1px solid var(--gray-300);border-radius:var(--radius);width:min(360px,100%);margin-bottom:14px}
.psearch:focus{outline:2px solid var(--elec-400);border-color:var(--elec-500)}
.pcount{font-family:var(--font-mono);font-size:.74rem;color:var(--gray-500);margin-left:10px}

/* lab cards on the hub */
.lab-card{display:block;background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .18s,border-color .18s}
.lab-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--elec-400)}
.lab-card .mono-id{font-family:var(--font-mono);font-size:.68rem;color:var(--elec-600);letter-spacing:.12em}
.lab-card h3{margin:8px 0 8px;font-size:1.12rem}
.lab-card p{font-size:.88rem;color:var(--gray-600)}
.lab-card .stat{font-family:var(--font-mono);font-size:.76rem;color:var(--gray-500);margin-top:14px;border-top:1px solid var(--gray-100);padding-top:12px}

/* two-col control + result layout */
.lab-grid{display:grid;grid-template-columns:320px 1fr;gap:26px;align-items:start}
@media(max-width:900px){.lab-grid{grid-template-columns:1fr}}
.control-panel{background:
  radial-gradient(360px 200px at 88% 0%,rgba(93,153,238,.18),transparent 65%),
  repeating-linear-gradient(112deg,rgba(93,153,238,.045) 0 1px,transparent 1px 26px),
  var(--navy-800);border-radius:var(--radius-lg);padding:22px;color:#cdd9f0;position:sticky;top:92px}
.control-panel h4{color:#fff;font-size:.95rem;margin-bottom:14px}
.control-panel .slider-box{margin-top:0;margin-bottom:18px}
.control-panel .field{margin-bottom:16px}
.control-panel .field label{display:block;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:#9fb4d6;margin-bottom:6px}
.control-panel .field input,.control-panel .field select{width:100%;font-family:var(--font-mono);font-size:.9rem;padding:8px 10px;border-radius:6px;border:1px solid #2c4a7e;background:#0e2347;color:#fff}
.control-panel .btn-run{width:100%;background:var(--elec-500);color:#fff;border:0;border-radius:var(--radius);padding:11px;font:inherit;font-weight:700;cursor:pointer;transition:background .15s}
.control-panel .btn-run:hover{background:var(--elec-600)}
.control-panel .note{font-size:.74rem;color:#8aa3cc;line-height:1.5}

.formula-note{font-family:var(--font-mono);font-size:.74rem;color:var(--gray-500);background:var(--gray-50);border-left:3px solid var(--elec-400);padding:10px 14px;border-radius:0 var(--radius) var(--radius) 0;margin:14px 0}
.section-gap{margin-top:46px}