/* ============================================================================
   WILDER BULL & BEAR — PAGE-SPECIFIC RULES
   Scope: engine.html, performance.html, strategy.html. Everything shared
   lives in house.css — this file adds what those three pages need that the
   house system does not already provide: the schematic frame + its
   click-to-enlarge lightbox (engine.html), the live-stat number face
   (performance.html), and the four-plate working-cycle instrument
   (strategy.html). No border+clip-path combinations. No CSS filter on the
   schematic <img> — the plate's own drop-shadow (already on the host in
   house.css) is the only glow this file adds.
   ========================================================================= */

/* ---------------------------------------------------- SCHEMATIC (engine) */
.diagram-plate{ padding:14px; margin-bottom:16px; }
.diagram-trigger{
  display:block; width:100%; border:0; background:transparent; padding:0;
  cursor:zoom-in;
}
.diagram-trigger img{ width:100%; height:auto; cursor:zoom-in; }
.diagram-trigger:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }
.diagram-cap{ display:block; margin-top:14px; text-align:center; color:var(--dim-2); }

.lightbox{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center; padding:32px;
  background:rgba(5,5,6,.93);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.lightbox[hidden]{ display:none; }
.lightbox-backdrop{ position:absolute; inset:0; cursor:zoom-out; }
.lightbox-img{
  position:relative; max-width:100%; max-height:100%; object-fit:contain;
  box-shadow:0 24px 80px rgba(0,0,0,.85);
  animation:lbIn .22s var(--ease);
}
.lightbox-close{
  position:absolute; top:20px; right:22px; z-index:2;
  width:44px; height:44px; display:grid; place-items:center;
  border:0; background:transparent; isolation:isolate; color:var(--ink);
  font:400 26px/1 var(--mono); cursor:pointer;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.65));
  transition:color var(--t-fast) var(--ease);
}
/* double-plate per the Ticket Notch Law — same polygon on both plates */
.lightbox-close::before{
  content:''; position:absolute; inset:0; z-index:-2; pointer-events:none;
  clip-path:var(--tn-sm);
  background:linear-gradient(180deg,rgba(232,197,87,.55),#565B66);
}
.lightbox-close::after{
  content:''; position:absolute; inset:var(--tn-rim); z-index:-1; pointer-events:none;
  clip-path:var(--tn-sm); background:rgba(13,14,18,.94);
}
.lightbox-close:hover{ color:var(--gold-hi); }
.lightbox-close:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
@keyframes lbIn{ from{ opacity:0; transform:scale(.97); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .lightbox-img{ animation:none; }
}

/* --------------------------------------------------- LIVE STATS (performance)
   A single plate panel (p-head/p-foot, exactly like the home page's Market
   Pulse and Wire panels) holding a row of plain stat cells — no nested
   plates, one frame per panel. */
.stat-panel{ margin-bottom:34px; }
.stat-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); }
.stat-cell{ min-width:0; padding:22px 20px 20px; box-shadow:0 1px 0 var(--line) inset; }
.stat-num{
  font:700 clamp(19px,3.6vw,30px)/1.05 var(--mono); font-variant-numeric:tabular-nums;
  letter-spacing:.01em; color:var(--gold-hi); margin-bottom:10px;
  overflow-wrap:anywhere;
}
.stat-num.dark{ color:var(--dim-2); font-size:clamp(14px,2.6vw,18px); letter-spacing:.08em; }
/* .stat-num.u / .stat-num.d — unreachable today: require pl>0 / pl<0 in
   performance.html's own inline pullAccount() (setStat('lvPL', ...)).
   Same $0.00 standing gap as .desk-cell .v.d (HARDENING-PLAN.md). These are
   the profit/loss faces of the live Day P&L stat — stay. H5 six-state
   sweep, 2026-08-31. */
.stat-num.u{ color:var(--up); }
.stat-num.d{ color:var(--dn); }
.stat-label{
  font:400 var(--t-micro)/1.4 var(--mono); letter-spacing:.28em;
  text-transform:uppercase; color:var(--dim-2);
}
.stat-panel .p-head{ flex-wrap:wrap; row-gap:8px; }
@media (max-width:640px){
  .stat-row{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:400px){
  .stat-row{ grid-template-columns:1fr; }
}
.quote-card p{ font-style:italic; }
.honest-note{
  display:flex; flex-direction:column; align-items:flex-start; gap:0;
  padding:22px 24px 20px;
}
.honest-note .tkt{ align-self:flex-start; margin-bottom:14px; }
.honest-note p{ color:var(--ink-2); max-width:78ch; }

/* a figure that is a plain declared fact, not a bridge reading — never the
   same colour as a live gold figure, never the muted grey of a DARK/
   unreachable one. Its own third state, honestly its own. */
.stat-num.declared{ color:var(--ink-2); }
.ledger-panel .p-foot{ flex-wrap:wrap; row-gap:6px; }

/* ------------------------------------------------ WORKING CYCLE (strategy)
   Four numbered engraved plates in the idiom of the front door's House Law
   (.law, home.css) — this is this file's own recipe, scoped to strategy.html,
   so home.css's .law rules are never touched, imported, or duplicated
   verbatim. Same double-plate host (.plate) as every other instrument. */
.cycle{ display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:var(--gap); margin-top:var(--gap); }
@media(min-width:560px) and (max-width:1183px){ .cycle{ grid-template-columns:repeat(2,1fr); } }
.cyc{ padding:26px 26px 24px; display:flex; flex-direction:column; gap:14px; text-align:left; }
.cyc .no{
  font:600 var(--t-micro)/1 var(--mono); letter-spacing:.4em; color:var(--gold); text-transform:uppercase;
  text-shadow:0 1px 0 rgba(0,0,0,.92), 0 -1px 0 rgba(255,255,255,.07);
}
.cyc .say{
  font-family:var(--house); font-weight:700; font-size:var(--t-title); line-height:1.24; letter-spacing:.012em;
  color:var(--ink); text-shadow:0 1px 0 rgba(0,0,0,.85), 0 -1px 0 rgba(255,255,255,.045);
}
.cyc .why{ font-size:15px; line-height:1.7; color:var(--dim); margin-top:auto; }
.cyc .stg{ padding-top:14px; box-shadow:0 -1px 0 var(--line); }
.cyc:hover{
  transform:translateY(-3px);
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.85)) drop-shadow(0 22px 46px rgba(0,0,0,.6)) drop-shadow(0 0 20px rgba(232,197,87,.17));
}