/* style-v4-pages.css — v4 styling for the classes the reused engine page-JS
   emits (journal.js, calibration.js, database.js, risk_profile.js, simulator JS,
   shadow JS). Linked alongside style-v4.css on the bespoke pages so their
   existing logic renders in the v4 aesthetic without rewriting it. */

/* page strip */
.pstrip{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.pstrip-id{display:flex;align-items:center;gap:11px}
.pstrip-fn{font-family:var(--mono);font-size:11px;color:var(--accent);background:var(--glow);padding:3px 7px;border-radius:5px}
.pstrip-name{font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:-.01em}
.pstrip-act{font-size:11px;color:var(--faint);font-family:var(--mono)}
.descr{font-size:12.5px;color:var(--soft);line-height:1.6;background:var(--bg2);border:1px solid var(--line-soft);border-radius:12px;padding:14px 16px;margin-bottom:16px}
.descr b{color:var(--ink)}

/* tables (db-table / data tables) */
.db-table,.data-table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:11.5px}
.db-table thead th,.data-table thead th{text-align:right;font-family:var(--body);font-weight:600;font-size:9.5px;letter-spacing:.08em;color:var(--faint);padding:9px 11px;border-bottom:1px solid var(--line);white-space:nowrap}
.db-table thead th:first-child,.data-table thead th:first-child{text-align:left}
.db-table td,.data-table td{padding:7px 11px;text-align:right;border-bottom:1px solid var(--line-soft);color:var(--soft)}
.db-table td:first-child,.data-table td:first-child{text-align:left;color:var(--ink)}
.db-table tr:hover td,.data-table tr:hover td{background:var(--panel2)}
.db-table th.num,.db-table td.num,.num{text-align:right}
.table-scroll{overflow-x:auto;max-height:560px;overflow-y:auto}
.muted-cell{color:var(--faint)}
.empty-row{color:var(--faint);text-align:center;font-style:italic;padding:18px}
th[data-sort]{cursor:pointer;user-select:none}
th[data-sort]:hover{color:var(--soft)}

/* P&L + outcomes */
.pnl-pos{color:var(--green)} .pnl-neg{color:var(--red)}
.outcome-win{color:var(--green)} .outcome-loss{color:var(--red)} .outcome-partial{color:var(--amber)} .outcome-skip{color:var(--faint)}

/* tiers */
.tier-tag,.tier-badge-compact{font-family:var(--disp);font-weight:700;font-size:9.5px;letter-spacing:.08em;padding:2px 8px;border-radius:5px;display:inline-block}
.tier-GREEN{background:var(--green-s);color:var(--tier-green);border:1px solid rgba(74,222,158,.4)}
.tier-YELLOW{background:rgba(245,212,74,.12);color:var(--tier-yellow);border:1px solid rgba(245,212,74,.4)}
.tier-ORANGE{background:rgba(255,153,77,.12);color:var(--tier-orange);border:1px solid rgba(255,153,77,.4)}
.tier-RED{background:var(--red-s);color:var(--tier-red);border:1px solid rgba(255,100,124,.4)}
.tier-PENDING,.tier-SKIP{background:var(--panel2);color:var(--faint);border:1px solid var(--line)}
.struct-code{font-family:var(--mono);color:var(--accent);font-weight:600}
.struct-desc,.struct-filter{color:var(--faint);font-size:10px}
.struct-type,.type-long{color:var(--blue)} .type-short{color:var(--soft)}

/* calibration band / hit / win cells */
.band-tight{background:var(--green-s);color:var(--green)} .band-mid{background:var(--blue-s);color:var(--blue)} .band-loose{background:var(--amber-s);color:var(--amber)} .band-breach{background:var(--red-s);color:var(--red)} .band-pending{background:var(--panel2);color:var(--faint)}
.band-tight,.band-mid,.band-loose,.band-breach,.band-pending{font-family:var(--body);font-weight:600;font-size:9.5px;padding:2px 7px;border-radius:5px;display:inline-block}
.hit-yes{color:var(--green)} .hit-no{color:var(--red)} .hit-pending{color:var(--faint)}
.win-strong{color:var(--green)} .win-moderate{color:var(--amber)} .win-weak{color:var(--red)} .win-pending{color:var(--faint)}
.progress{height:5px;background:var(--inset);border-radius:3px;overflow:hidden;margin-top:4px}
.progress-strong{height:100%;background:var(--green)} .progress-moderate{height:100%;background:var(--amber)} .progress-weak{height:100%;background:var(--red)}
.recent-cell{font-family:var(--mono);font-size:10px} .recent-win{color:var(--green)} .recent-loss{color:var(--red)}
.row-pending td{opacity:.7} .row-detail{background:var(--bg2)} .row-expandable{cursor:pointer}
.expand-toggle{background:none;border:none;color:var(--accent);cursor:pointer;font-family:var(--mono);font-size:11px}

/* db tabs */
.db-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:14px}
.db-tab{font-family:var(--body);font-size:12px;font-weight:500;color:var(--mute);background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:7px 12px;cursor:pointer;transition:.12s}
.db-tab:hover{color:var(--soft);border-color:var(--line-bright)}
.db-tab.active{background:var(--glow);color:var(--ink);border-color:var(--accent)}
.db-tab-pane{display:none} .db-tab-pane.active{display:block}
.db-stats{display:flex;gap:1px;flex-wrap:wrap;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:14px}
.db-stat{background:var(--panel);padding:11px 16px;flex:1;min-width:110px;display:flex;flex-direction:column;gap:3px}
.db-stat .label{font-size:9px;letter-spacing:.1em;color:var(--faint)} .db-stat .value{font-family:var(--mono);font-size:15px;font-weight:600}
.db-status,#summary-status,#cal-status,#risk-status,#shadow-status{font-size:11px;color:var(--faint);font-family:var(--mono)}

/* risk family blocks */
.family-block{background:var(--panel);border:1px solid var(--line);border-radius:12px;margin-bottom:14px;overflow:hidden}
.family-block>h3,.family-block .fam-head{font-family:var(--disp);font-weight:600;font-size:13px;padding:12px 15px;border-bottom:1px solid var(--line-soft);margin:0}

/* shadow stat grid */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
@media(max-width:900px){.stat-grid{grid-template-columns:repeat(2,1fr)}}
.stat-tile{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:15px 16px}
.stat-label{font-size:9.5px;letter-spacing:.1em;color:var(--faint);margin-bottom:6px}
.stat-value{font-family:var(--mono);font-size:22px;font-weight:600}
.stat-sub{font-size:10.5px;color:var(--faint);margin-top:4px}
.v-standdown{color:var(--amber)} .v-trade{color:var(--green)}
.gate-chip{font-family:var(--mono);font-size:9px;color:var(--faint);border:1px solid var(--line);border-radius:4px;padding:1px 5px;margin-right:3px}
.gate-chip.on{color:var(--amber);border-color:rgba(251,191,74,.4)}

/* forms (journal + simulator) */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:14px}
.form-grid label,.field label,.flabel{display:block;font-size:9.5px;letter-spacing:.08em;color:var(--faint);margin-bottom:5px;text-transform:uppercase}
.full-row{grid-column:1/-1}
input,select,textarea{font-family:var(--mono);font-size:12.5px;color:var(--ink);background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px 10px;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(124,140,255,.22)}
textarea{min-height:60px;font-family:var(--body)}
.btn,button.btn,.op-btn{font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:.02em;padding:8px 14px;border-radius:8px;border:1px solid var(--line-bright);background:var(--panel2);color:var(--soft);cursor:pointer;transition:.12s}
.btn:hover,.op-btn:hover{border-color:var(--accent);color:var(--ink)}
.btn-primary,.op-btn-primary{background:var(--accent);border-color:var(--accent);color:#0a0b10}
.btn-primary:hover{background:var(--accent2)}
.btn-danger{border-color:rgba(255,100,124,.4);color:var(--red)}
.form-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:6px}
details>summary{cursor:pointer;font-family:var(--disp);font-weight:600;font-size:13px;padding:6px 0}
.halt-status-halted{color:var(--red);font-weight:600}
#form-pnl-preview{font-family:var(--mono);font-size:14px;font-weight:600}

/* simulator payoff svg */
.zone-rect{} .zone-win{fill:rgba(74,222,158,.18)} .zone-partial{fill:rgba(251,191,74,.18)} .zone-loss{fill:rgba(255,100,124,.18)}
.zone-label{fill:var(--soft);font-size:9px;font-family:var(--mono)}
.strike-tick{stroke:var(--line-bright);stroke-width:1} .strike-label{fill:var(--faint);font-size:9px;font-family:var(--mono)}
.spot-line{stroke:var(--accent);stroke-width:1.5;stroke-dasharray:3 2} .spot-label{fill:var(--accent);font-size:9px;font-family:var(--mono)} .spot-dot{fill:var(--accent)}
.analog-dot{fill:var(--ink);opacity:.5}
.chart-empty{fill:var(--faint);font-size:11px}
.zone-row-win{color:var(--green)} .zone-row-partial{color:var(--amber)} .zone-row-loss{color:var(--red)}
.legend-item{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--soft);margin-right:14px}
.legend-swatch{width:11px;height:11px;border-radius:3px;display:inline-block}
.legend-swatch.zone-win{background:rgba(74,222,158,.4)} .legend-swatch.zone-partial{background:rgba(251,191,74,.4)} .legend-swatch.zone-loss{background:rgba(255,100,124,.4)}
.swatch-spot{background:var(--accent)} .swatch-analog{background:var(--ink);opacity:.5}

/* generic card section for these pages */
.pcard{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:16px}
.pcard-h{font-family:var(--disp);font-weight:600;font-size:14px;margin-bottom:12px;display:flex;justify-content:space-between;align-items:baseline}
.wire8{display:grid;grid-template-columns:repeat(8,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
@media(max-width:1000px){.wire8{grid-template-columns:repeat(4,1fr)}}
.wire8 .wc{background:var(--panel);padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.wire8 .wc .wl{font-size:9px;letter-spacing:.1em;color:var(--faint)} .wire8 .wc .wv{font-family:var(--mono);font-size:15px;font-weight:600}