/* PI Templates — HUD skin, matching the home page and Capsuleer Radio.
 * Loaded after styles.css; only looks change, the layout stays the same. */

body { background: radial-gradient(1100px 520px at 50% -10%, #0f1d30, var(--bg) 70%); }

/* corner brackets for HUD panels */
.hud-panel { position: relative; }
.hud-panel::before, .hud-panel::after {
  content: ''; position: absolute; width: 12px; height: 12px; border: 2px solid var(--accent);
  opacity: .7; pointer-events: none; z-index: 2;
}
.hud-panel::before { top: 6px; left: 6px; border-right: 0; border-bottom: 0; }
.hud-panel::after { bottom: 6px; right: 6px; border-left: 0; border-top: 0; }

/* ── Title + live readouts ─────────────────────────────────────────────── */
.page-head.compact { align-items: center; }
.hud-read { margin-left: auto; display: flex; gap: 22px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.hud-read div { display: flex; flex-direction: column; gap: 1px; }
.hud-read b { font-family: var(--font); font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--text-strong); font-weight: 700; font-variant-numeric: tabular-nums; }
.hud-read b.ok { color: var(--ok); }
.hud-read .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); display: inline-block; margin-right: 6px; vertical-align: 1px; animation: blink 2.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .35; } }

/* ── Controls ──────────────────────────────────────────────────────────── */
.controls-bar { background: rgba(17,21,32,.72); border-top-color: var(--border-soft); border-bottom-color: var(--border-soft); }
.control-group label, .dl-all-label, .dl-all-heading, .sidebar-header, .stat-label, .inputs-label, .json-title {
  font-family: var(--mono); font-weight: 500; letter-spacing: .12em;
}
.control-group label { font-size: 11px; }
.mode-toggle { border-radius: 0; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
.mode-btn { font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; }
.mode-btn.active { background: radial-gradient(circle at 50% 120%, #2a6aa3, #1d4f7c); box-shadow: inset 0 -2px 0 var(--accent); }
.sec-btn { border-radius: 0; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); }
.sec-btn.active { box-shadow: inset 0 -2px 0 var(--accent); }
.dl-all-group { border-left: 1px solid var(--border-soft); padding: 4px 6px 4px 18px; }
.dl-all-heading { color: var(--accent); }
.btn-dl-all { border-radius: 0; clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px)); }

/* ── Sidebar ───────────────────────────────────────────────────────────── */
.sidebar { background: rgba(17,21,32,.78); border-right-color: var(--border-soft); }
.sidebar-header { font-size: 11px; display: flex; align-items: center; gap: 10px; }
.sidebar-header::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--border), transparent); }
.product-btn { position: relative; border-left: 0; padding-left: 22px; }
.product-btn::before { content: ''; position: absolute; left: 10px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border: 1px solid var(--border); transform: rotate(45deg); transition: background .15s, border-color .15s; }
.product-btn:hover { background: #172236; }
.product-btn:hover::before { border-color: var(--accent); }
.product-btn.active { background: linear-gradient(90deg, #12233a, transparent); color: var(--text-strong); font-weight: 600; }
.product-btn.active::before { background: currentColor; border-color: currentColor; box-shadow: 0 0 8px currentColor; }
body[data-tier] .product-btn.active { border-left: 0; }
body[data-tier="P1"] .product-btn.active::before { color: var(--bif-color); }
body[data-tier="P2"] .product-btn.active::before, body[data-tier="P3"] .product-btn.active::before { color: var(--aif-color); }
body[data-tier="P4"] .product-btn.active::before { color: var(--ht-color); }
body[data-tier] .product-btn.active { color: var(--text-strong); }

/* ── Layout scope ──────────────────────────────────────────────────────── */
.svg-wrap { position: relative; border-right-color: var(--border-soft);
  background:
    radial-gradient(circle at 50% 50%, rgba(42,106,163,.16), transparent 60%),
    linear-gradient(rgba(126,184,212,.06) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(126,184,212,.06) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--surface-sunk); }
.svg-wrap > .scan { position: absolute; left: 0; right: 0; top: -60px; height: 60px; pointer-events: none;
  background: linear-gradient(transparent, rgba(126,184,212,.10), transparent); animation: sweep 6s linear infinite; }
@keyframes sweep { to { top: 100%; } }
.svg-wrap > .scope-tag { position: absolute; top: 10px; left: 26px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; color: var(--faint); text-transform: uppercase; z-index: 2; }
.preview-top { border-bottom-color: var(--border-soft); }

/* ── Stats ─────────────────────────────────────────────────────────────── */
.stats-panel { background: rgba(17,21,32,.78); }
.stat-label { font-size: 10.5px; color: var(--faint); }
.stat-value { font-size: 15px; }
.stat-value.large { font-size: 28px; font-weight: 750; color: var(--text-strong); letter-spacing: -.01em; text-shadow: 0 0 22px rgba(126,184,212,.35); }
.bar-bg { height: 6px; background: var(--surface-sunk); border: 1px solid var(--border-soft); border-radius: 0; }
.bar-fill { border-radius: 0; }
.bar-fill.cpu { background: linear-gradient(90deg, #1d4f7c, var(--aif-color)); box-shadow: 0 0 10px var(--aif-color); }
.bar-fill.power { background: linear-gradient(90deg, #8a5a14, var(--lp-color)); box-shadow: 0 0 10px var(--lp-color); }

/* ── Schematic chips ───────────────────────────────────────────────────── */
.inputs-block { background: rgba(17,21,32,.72); border-bottom-color: var(--border-soft); }
.inputs-label { font-size: 10.5px; color: var(--faint); }
.input-tag, .output-tag { border-radius: 0; padding: 3px 10px; clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px)); }
.output-tag { background: #12233a; box-shadow: inset 0 -2px 0 var(--accent); }

/* ── JSON terminal ─────────────────────────────────────────────────────── */
.json-toolbar { background: rgba(17,21,32,.72); border-bottom-color: var(--border-soft); }
.json-title { font-size: 10.5px; }
.json-title::before { content: '▸ '; color: var(--ok); }
.json-toolbar .btn { border-radius: 0; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); }
.json-toolbar .btn-primary { box-shadow: 0 0 18px rgba(42,106,163,.5); }
.json-scroll { background: repeating-linear-gradient(0deg, rgba(126,184,212,.025) 0 1px, transparent 1px 3px), rgba(11,14,21,.6); }
#json-output { color: #9fc6d8; }

/* ── Empty state ───────────────────────────────────────────────────────── */
#placeholder .empty-state { position: relative; background: linear-gradient(180deg, rgba(22,29,44,.85), rgba(17,21,32,.85)); border: 1px solid var(--border-soft); border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); }
#placeholder .empty-state > .icon { filter: drop-shadow(0 0 10px rgba(126,184,212,.5)); }
#placeholder .empty-state::after { content: 'STANDBY · SELECT A PRODUCT'; display: block; margin-top: 16px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; color: var(--faint); }
#placeholder .examples .btn { border-radius: 0; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); }

@media (prefers-reduced-motion: reduce) { .svg-wrap > .scan, .hud-read .dot { animation: none; } }
@media (max-width: 1100px) { .hud-read { display: none; } }

/* let the scope grid show through the drawn layout (app.js paints an opaque backdrop) */
#layout-svg rect[fill="#0a0d12"] { fill: transparent; }
#layout-svg circle[fill="#080b0f"] { fill: rgba(8,11,15,.72); stroke: #2a6aa3; }
#stat-note { font-family: var(--font); letter-spacing: 0; }
.stats-panel { gap: 11px; overflow: hidden; }
@media (max-width: 640px) { .json-title { flex-basis: 100%; } }