/* ============================================================
   PHOENIX — dark, on-brand interactive mini-screens.
   Replaces the pale-gold console mocks. Rich-black surfaces,
   maroon rail, cream Relais headings, mono eyebrows, the
   generated-text pills, square data, yellow/pink/coral accents.
   Built on tokens from home.css. Loaded after home.css.
   ============================================================ */

/* dark product mock shell ----------------------------------- */
.dpm { background: var(--page-panel); color: var(--cream); font-family: var(--f-text); display: grid; grid-template-columns: 170px 1fr; }
.dpm.solo { grid-template-columns: 1fr; }
.dpm-side { background: var(--page-bg); border-right: 1px solid var(--hair); padding: 16px 0; }
.dpm-side .brand { font-family: var(--f-display); font-size: 16px; color: var(--cream); padding: 2px 16px 14px; }
.dpm-nav { display: flex; flex-direction: column; }
.dpm-nav a { display: flex; align-items: center; gap: 9px; padding: 8px 16px; font-family: var(--f-sans); font-size: 12.5px; color: var(--cream-3); text-decoration: none; border-left: 2px solid transparent; transition: color .15s, background .15s; }
.dpm-nav a .ic { width: 14px; height: 14px; opacity: .8; flex-shrink: 0; }
.dpm-nav a.on { color: var(--cream); background: rgba(246,239,224,.06); border-left-color: var(--pink); }
.dpm-nav a:hover { color: var(--cream-2); }
.dpm-eyb-side { font-family: var(--f-label); font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--cream-4); padding: 14px 16px 6px; }
.dpm-main { padding: 24px 26px; min-width: 0; }
.dpm-eyb { font-family: var(--f-label); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--cream-3); }
.dpm-h { font-family: var(--f-display); font-size: 30px; letter-spacing: -.03em; color: var(--cream); margin: 6px 0 0; line-height: 1; }
.dpm-h .hstop { color: var(--pink); }
.dpm-tags { display: flex; gap: 8px; margin: 14px 0 0; flex-wrap: wrap; }
.dtag { font-family: var(--f-label); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--hair-2); color: var(--cream-2); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.dtag.ok  { color: var(--ok); border-color: rgba(46,184,134,.4); }
.dtag.acc { color: var(--pink); border-color: rgba(255,122,233,.4); }

/* FRAGMENTS composer ---------------------------------------- */
.frag { margin-top: 20px; border-top: 1px solid var(--hair); }
.frag-row { display: grid; grid-template-columns: 92px 1fr auto; gap: 14px; align-items: center; padding: 12px 8px; border-bottom: 1px solid var(--hair); cursor: pointer; transition: background .15s var(--ease); }
.frag-row:hover, .frag-row.sel { background: rgba(246,239,224,.045); }
.frag-row.sel { box-shadow: inset 2px 0 0 var(--pink); }
.frag-k { font-family: var(--f-label); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--cream-3); }
.frag-row.sel .frag-k { color: var(--pink); }
.frag-v { font-size: 13.5px; color: var(--cream); line-height: 1.4; min-width: 0; }
.frag-score { font-family: var(--f-data); font-size: 11px; color: var(--ok); white-space: nowrap; text-align: right; }
.frag-imgrow { display: flex; align-items: center; gap: 10px; }
.frag-img { width: 34px; height: 34px; border-radius: 6px; background: linear-gradient(135deg, #7a004b, #ff6051); flex-shrink: 0; }
.frag-foot { margin-top: 14px; font-family: var(--f-data); font-size: 10px; color: var(--cream-3); display: flex; align-items: center; gap: 8px; }
.frag-foot b { color: var(--pink); font-weight: 500; }

/* SURFACES toggle (same fragments, every surface) ----------- */
.surf-tabs { display: flex; gap: 6px; margin: 18px 0 0; flex-wrap: wrap; }
.surf-tab { font-family: var(--f-sans); font-size: 12px; font-weight: 500; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--hair-2); background: transparent; color: var(--cream-2); cursor: pointer; transition: all .16s var(--ease); white-space: nowrap; }
.surf-tab:hover { border-color: var(--cream-3); }
.surf-tab.on { background: var(--yellow); color: #15020c; border-color: var(--yellow); }
.surf-card { margin-top: 18px; background: var(--page-bg); border: 1px solid var(--hair); padding: 18px; min-height: 150px; }
.surf-pane { display: none; }
.surf-pane.on { display: block; animation: lc-in .4s var(--ease); }
.surf-meta { font-family: var(--f-label); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--cream-3); margin-bottom: 12px; display: flex; gap: 8px; align-items: center; }
.surf-body { font-size: 15px; color: var(--cream); line-height: 1.5; }
.surf-sub { font-size: 13px; color: var(--cream-2); line-height: 1.5; margin-top: 8px; }
.surf-cta { display: inline-block; margin-top: 14px; font-family: var(--f-sans); font-weight: 600; font-size: 13px; padding: 9px 18px; border-radius: 999px; background: var(--yellow); color: #15020c; }

/* REWARD-SIGNAL spectrum ------------------------------------ */
.spec { margin-top: 6px; }
.spec-scale { display: flex; justify-content: space-between; font-family: var(--f-label); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--cream-3); margin-bottom: 10px; }
.spec-track { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.sig { text-align: left; padding: 16px 14px; border: 1px solid var(--hair); background: var(--page-panel); cursor: pointer; position: relative; overflow: hidden; transition: border-color .18s var(--ease), background .18s var(--ease); }
.sig::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--pink); transform: scaleY(0); transform-origin: bottom; transition: transform .25s var(--ease); }
.sig .si-n { font-family: var(--f-sans); font-weight: 600; font-size: 14px; color: var(--cream-2); display: block; }
.sig .si-q { font-size: 11px; color: var(--cream-2); margin-top: 5px; display: block; line-height: 1.35; }
.sig:hover { border-color: var(--hair-2); }
.sig.on { background: var(--page-panel-2); border-color: rgba(255,122,233,.45); }
.sig.on::before { transform: scaleY(1); }
.sig.on .si-n { color: var(--cream); }
.sig .si-dot { position: absolute; top: 12px; right: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--pink); opacity: 0; transition: opacity .2s; }
.sig.on .si-dot { opacity: 1; }
.spec-out { margin-top: 18px; padding: 20px; border: 1px solid var(--hair); background: var(--page-bg); display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; }
.spec-big { font-family: var(--f-display); font-size: 48px; letter-spacing: -.03em; color: var(--cream); line-height: 1; }
.spec-big .u { color: var(--pink); }
.spec-desc { font-size: 14px; color: var(--cream-2); line-height: 1.5; }
.spec-desc b { color: var(--cream); font-weight: 600; }

/* PHOENIX IN ACTION — agent run ----------------------------- */
.run-prompt { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 16px 18px; background: #7a004b; border-radius: 18px; box-shadow: 0 0 0 1px rgba(246,239,224,.14); }
.run-prompt .rp-ic { width: 26px; height: 26px; border-radius: 999px; background: var(--yellow); color: #15020c; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--f-display); font-size: 14px; }
.run-prompt .rp-t { font-size: 14px; color: var(--cream); line-height: 1.5; }
.run-steps { margin-top: 14px; display: flex; flex-direction: column; }
.run-step { display: grid; grid-template-columns: 24px 1fr; gap: 12px; padding: 11px 4px; border-bottom: 1px solid var(--hair); }
/* pending steps de-emphasise via compliant tokens, not opacity (contrast) */
.run-step .rs-t { color: var(--cream-3); transition: color .35s var(--ease); }
.run-step .rs-tool { color: var(--cream-4); transition: color .35s var(--ease); }
.run-step.done .rs-t, .run-step.active .rs-t { color: var(--cream); }
.run-step.done .rs-tool { color: var(--cream-3); }
.rs-ic { width: 20px; height: 20px; border-radius: 999px; border: 1.5px solid var(--cream-4); display: flex; align-items: center; justify-content: center; color: var(--cream-4); margin-top: 1px; transition: all .25s var(--ease); }
.rs-ic svg { width: 11px; height: 11px; opacity: 0; transition: opacity .2s var(--ease); }
.run-step.done .rs-ic svg { opacity: 1; }
.run-step.done .rs-ic { border-color: var(--ok); color: var(--ok); background: rgba(46,184,134,.14); }
.run-step.active .rs-ic { border-color: var(--yellow); color: var(--yellow); animation: rs-spin 1s linear infinite; }
@keyframes rs-spin { to { transform: rotate(360deg); } }
.rs-t { font-family: var(--f-sans); font-size: 14px; font-weight: 500; }
.rs-tool { font-family: var(--f-data); font-size: 10px; letter-spacing: .04em; margin-top: 3px; }
.run-step.active .rs-tool { color: var(--yellow); }
.run-bar { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.run-btn { font-family: var(--f-sans); font-size: 13px; font-weight: 600; padding: 9px 18px; border-radius: 999px; background: var(--yellow); color: #15020c; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: filter .16s; }
.run-btn:hover { filter: brightness(1.06); }
.run-status { font-family: var(--f-label); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--cream-3); }

/* ONTOLOGY — 4-layer MCP stack ------------------------------ */
.onto { margin-top: 52px; display: flex; flex-direction: column; gap: 14px; }
.olayer { border: 1px solid var(--hair); background: var(--page-panel); padding: 24px 28px; position: relative; overflow: hidden; transition: border-color .25s var(--ease), transform .25s var(--ease), background .25s var(--ease); }
.olayer::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--lc, var(--maroon-500)); }
.olayer:hover { border-color: var(--hair-2); transform: translateX(4px); background: var(--page-panel-2); }
.olayer-top { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.olayer-n { font-family: var(--f-label); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--lc, var(--maroon-400)); }
.olayer-t { font-family: var(--f-display); font-size: 24px; letter-spacing: -.02em; color: var(--cream); }
.olayer-d { font-size: 13.5px; color: var(--cream-3); margin-left: auto; max-width: 360px; text-align: right; }
.olayer-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ochip { font-family: var(--f-data); font-size: 10.5px; letter-spacing: .03em; padding: 6px 11px; border: 1px solid var(--hair-2); border-radius: 999px; color: var(--cream-2); background: rgba(246,239,224,.02); transition: border-color .16s, color .16s; }
.olayer:hover .ochip { border-color: color-mix(in oklch, var(--lc) 50%, var(--hair-2)); }
.ochip.sub { border-style: dashed; color: var(--cream-3); }

@media (max-width: 620px) {
  .dpm { grid-template-columns: 1fr; }
  .dpm-side { display: none; }
  .spec-track { grid-template-columns: repeat(2, 1fr); }
  .spec-out { grid-template-columns: 1fr; }
  .olayer-d { margin-left: 0; text-align: left; max-width: none; }
}