/* ============================================================================
   BuildYourPocket — "App Skin" UI kit for the marketing site
   Faithful, DEMO-labelled recreations of the real product surfaces.
   Palette + metrics mirror the real app tokens (src/styles/tokens.css):
   navy base, blue accent, brand gold, green/red data-semantic, Inter + mono.
   All tokens are scoped to .appwin so they never leak into the marketing frame.
   ========================================================================== */

.appwin {
  --a-app:      #090d1a;
  --a-panel:    #0d1220;
  --a-elev:     #111827;
  --a-card:     #131c2e;
  --a-hover:    #1a2540;
  --a-active:   #1e2d4a;
  --a-line:     rgba(255,255,255,0.08);
  --a-line-2:   rgba(255,255,255,0.14);
  --a-ink:      #f0f4fc;
  --a-dim:      #8899b4;
  --a-dim-2:    #6b7c96;
  --a-muted:    #4a5a70;
  --a-accent:   #3b82f6;
  --a-accent-s: rgba(59,130,246,0.14);
  --a-gold:     #d4af37;
  --a-gold-s:   rgba(212,175,55,0.14);
  --a-gain:     #22c55e;
  --a-gain-s:   rgba(34,197,94,0.12);
  --a-loss:     #ef4444;
  --a-loss-s:   rgba(239,68,68,0.12);
  --a-warn:     #f59e0b;
  --a-warn-s:   rgba(245,158,11,0.12);
  --a-mono: 'JetBrains Mono','Fira Code','Cascadia Code',ui-monospace,monospace;

  position: relative;
  border-radius: 14px;
  background: var(--a-app);
  border: 1px solid var(--a-line-2);
  /* layered depth: contact shadow → mid → deep ambient, plus a hairline edge light */
  box-shadow:
    0 2px 6px rgba(0,0,0,0.35),
    0 14px 34px -10px rgba(0,0,0,0.6),
    0 50px 130px -34px rgba(0,0,0,0.86),
    inset 0 0 0 1px rgba(255,255,255,0.03),
    inset 0 1px 0 rgba(255,255,255,0.07);
  overflow: hidden;
  color: var(--a-ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  isolation: isolate;
}
.appwin, .appwin * { box-sizing: border-box; }
/* glass sheen — a soft diagonal light across the top edge; never over the body */
.appwin::before { content: ""; position: absolute; inset: 0; z-index: 7; pointer-events: none; border-radius: 14px;
  background: linear-gradient(157deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.015) 9%, transparent 22%); }

/* Title / traffic-light bar */
.appwin__bar {
  height: 40px; display: flex; align-items: center; gap: 8px;
  padding: 0 14px; background: var(--a-panel);
  border-bottom: 1px solid var(--a-line);
}
.appwin__lights { display: inline-flex; gap: 7px; }
.appwin__lights i { width: 11px; height: 11px; border-radius: 50%; background: #2a3550; display: block; }
.appwin__title { font-size: 12px; color: var(--a-dim-2); font-family: var(--a-mono); letter-spacing: .02em; }
.appwin__grow { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }

/* persistent demo ribbon — honesty: nothing here is real market data */
.appwin__demo {
  font-family: var(--a-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--a-gold); background: var(--a-gold-s); border: 1px solid rgba(212,175,55,0.3);
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}

/* ── The app shell: sidebar + main ─────────────────────────────────────── */
.app { display: grid; grid-template-columns: 208px 1fr; min-height: 460px; }
.app__side {
  background: var(--a-panel); border-right: 1px solid var(--a-line);
  padding: 14px 10px; display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.app__brand { display: flex; align-items: center; gap: 8px; padding: 4px 8px 12px; }
.app__brand img { width: 22px; height: 22px; border-radius: 6px; }
.app__brand b { font-size: 13px; font-weight: 600; letter-spacing: -.01em; }
.app__sect { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--a-muted); padding: 12px 8px 5px; }
.app__nav {
  display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 8px;
  font-size: 12.5px; color: var(--a-dim); cursor: default; transition: background .18s, color .18s;
}
.app__nav svg { width: 15px; height: 15px; flex: 0 0 auto; opacity: .8; }
.app__nav:hover { background: var(--a-hover); color: var(--a-ink); }
.app__nav.is-active { background: var(--a-accent-s); color: #cfe0ff; box-shadow: inset 2px 0 0 var(--a-accent); }
.app__main { display: flex; flex-direction: column; min-width: 0; background: var(--a-app); }

/* Topbar */
.app__top {
  height: 46px; display: flex; align-items: center; gap: 12px; padding: 0 16px;
  border-bottom: 1px solid var(--a-line); background: linear-gradient(180deg,var(--a-panel),transparent);
}
.app__top h4 { font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; }
.app__tabs { display: inline-flex; gap: 2px; margin-left: 6px; }
.app__tab { font-size: 11.5px; color: var(--a-dim-2); padding: 5px 10px; border-radius: 7px; cursor: default; }
.app__tab.is-active { color: var(--a-ink); background: var(--a-card); }
.app__actions { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.app__body { padding: 16px; display: grid; gap: 12px; overflow: hidden; }

/* ── Honesty badges (mirror the app's data-honesty envelope) ───────────── */
.badge {
  display: inline-flex; align-items: center; gap: 5px; font-family: var(--a-mono);
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; padding: 3px 7px; border-radius: 999px;
  border: 1px solid transparent; white-space: nowrap;
}
.badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.badge--demo { color: var(--a-gold); background: var(--a-gold-s); border-color: rgba(212,175,55,.3); }
.badge--live { color: var(--a-gain); background: var(--a-gain-s); border-color: var(--a-gain-s); }
.badge--delayed { color: var(--a-warn); background: var(--a-warn-s); border-color: var(--a-warn-s); }
.badge--mixed { color: var(--a-accent); background: var(--a-accent-s); border-color: var(--a-accent-s); }
.badge--insufficient { color: var(--a-dim-2); background: rgba(107,124,150,.12); border-color: rgba(107,124,150,.2); }

/* ── Cards & metrics ───────────────────────────────────────────────────── */
.dk { display: grid; gap: 12px; }
.dk.cols-2 { grid-template-columns: repeat(2,1fr); }
.dk.cols-3 { grid-template-columns: repeat(3,1fr); }
.dk.cols-4 { grid-template-columns: repeat(4,1fr); }
.dk-card {
  background: var(--a-card); border: 1px solid var(--a-line); border-radius: 10px; padding: 13px 14px;
  min-width: 0; transition: border-color .2s, transform .2s, background .2s;
}
.dk-card--btn { cursor: pointer; }
.dk-card--btn:hover { border-color: var(--a-accent-border,rgba(59,130,246,.4)); transform: translateY(-2px); background: var(--a-elev); }
.dk-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.dk-h h5 { font-size: 12px; font-weight: 600; color: var(--a-ink); letter-spacing: .01em; }
.dk-h .badge { margin-left: auto; }
.dk-sub { font-size: 11px; color: var(--a-dim-2); }

.metric { display: flex; flex-direction: column; gap: 3px; }
.metric__l { font-size: 10.5px; color: var(--a-dim-2); letter-spacing: .02em; }
.metric__v { font-family: var(--a-mono); font-size: 19px; font-weight: 500; color: var(--a-ink); letter-spacing: -.01em; }
.metric__v.sm { font-size: 15px; }
.metric__d { font-family: var(--a-mono); font-size: 11px; }
.up { color: var(--a-gain) !important; } .dn { color: var(--a-loss) !important; }
.mono { font-family: var(--a-mono); }
.dim { color: var(--a-dim-2); }

/* Rows (tables) */
.row { display: grid; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--a-line); font-size: 12px; }
.row:last-child { border-bottom: 0; }
.row .sym { font-weight: 600; color: var(--a-ink); }
.row .mut { color: var(--a-dim-2); }
.row .num { font-family: var(--a-mono); text-align: right; }

/* ── Gauges (health / risk) ────────────────────────────────────────────── */
.gauge { display: flex; align-items: center; gap: 12px; }
.gauge__dial { --p: 0; --c: var(--a-accent); width: 62px; height: 62px; flex: 0 0 auto; border-radius: 50%;
  background: conic-gradient(var(--c) calc(var(--p)*1%), rgba(255,255,255,.07) 0);
  display: grid; place-items: center; transition: background 1.1s var(--ease-out,cubic-bezier(.16,1,.3,1)); }
.gauge__dial::after { content: ""; width: 48px; height: 48px; border-radius: 50%; background: var(--a-card); }
.gauge__val { position: absolute; font-family: var(--a-mono); font-size: 14px; color: var(--a-ink); }
.gauge__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gauge__meta b { font-size: 12px; } .gauge__meta span { font-size: 10.5px; color: var(--a-dim-2); }
.dialwrap { position: relative; display: grid; place-items: center; }

/* Linear bars */
.bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; }
.bar > i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--a-accent);
  transition: width 1.1s var(--ease-out,cubic-bezier(.16,1,.3,1)); }
.barlabel { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--a-dim-2); margin-bottom: 5px; }

/* ── Regime / status pills ─────────────────────────────────────────────── */
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pillr { font-size: 10.5px; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--a-line-2); color: var(--a-dim); }
.pillr.on { color: #cfe0ff; background: var(--a-accent-s); border-color: var(--a-accent-s); }
.pillr.warn { color: var(--a-warn); background: var(--a-warn-s); border-color: var(--a-warn-s); }

/* ── Evidence lineage ──────────────────────────────────────────────────── */
.evi { display: flex; flex-direction: column; gap: 7px; }
.evi__item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px;
  padding: 8px 10px; border: 1px solid var(--a-line); border-radius: 8px; background: var(--a-panel);
  font-size: 11.5px; transition: border-color .2s, background .2s; }
.evi__item:hover { border-color: var(--a-accent-s); background: var(--a-elev); }
.evi__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--a-accent); }
.evi__src { color: var(--a-dim); } .evi__src b { color: var(--a-ink); font-weight: 600; }
.evi__w { font-family: var(--a-mono); font-size: 11px; color: var(--a-gold); }

/* ── Checklist (decision support) ──────────────────────────────────────── */
.ck { display: flex; flex-direction: column; gap: 2px; }
.ck__i { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 9px 6px;
  border-bottom: 1px solid var(--a-line); font-size: 12px; }
.ck__i:last-child { border-bottom: 0; }
.ck__box { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--a-line-2); display: grid; place-items: center; }
.ck__box svg { width: 10px; height: 10px; opacity: 0; transition: opacity .3s; }
.ck__i.done .ck__box { background: var(--a-gain-s); border-color: var(--a-gain); color: var(--a-gain); }
.ck__i.done .ck__box svg { opacity: 1; }
.ck__i.warn .ck__box { background: var(--a-warn-s); border-color: var(--a-warn); }

/* ── Timeline (monitoring) ─────────────────────────────────────────────── */
.tl { position: relative; padding-left: 18px; }
.tl::before { content: ""; position: absolute; left: 5px; top: 4px; bottom: 4px; width: 2px; background: var(--a-line-2); }
.tl__i { position: relative; padding: 7px 0; font-size: 11.5px; }
.tl__i::before { content: ""; position: absolute; left: -16px; top: 11px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--a-accent); box-shadow: 0 0 0 3px var(--a-app); }
.tl__i.warn::before { background: var(--a-warn); } .tl__i.gain::before { background: var(--a-gain); } .tl__i.loss::before { background: var(--a-loss); }
.tl__t { font-family: var(--a-mono); font-size: 10px; color: var(--a-dim-2); }
.tl__x { color: var(--a-ink); }

/* ── Split compare ─────────────────────────────────────────────────────── */
.split { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 0; }
.split__mid { background: var(--a-line-2); }
.split__c { padding: 0 14px; } .split__c:first-child { padding-left: 0; }

/* ── Umro chat ─────────────────────────────────────────────────────────── */
.umro { display: flex; flex-direction: column; gap: 10px; }
.umro__msg { display: flex; gap: 9px; }
.umro__av { width: 26px; height: 26px; border-radius: 8px; flex: 0 0 auto; display: grid; place-items: center;
  background: linear-gradient(135deg,var(--a-accent),#8b5cf6); color: #fff; }
.umro__av svg { width: 15px; height: 15px; }
.umro__b { background: var(--a-card); border: 1px solid var(--a-line); border-radius: 10px; padding: 10px 12px; font-size: 12px; color: var(--a-dim); line-height: 1.55; }
.umro__b b { color: var(--a-ink); font-weight: 600; }
.umro__conf { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-family: var(--a-mono); font-size: 10px; color: var(--a-dim-2); }
.umro__conf i { flex: 1; height: 4px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; min-width: 60px; }
.umro__conf i > b { display: block; height: 100%; background: linear-gradient(90deg,var(--a-accent),var(--a-gain)); border-radius: 999px; }
.umro__you { justify-content: flex-end; } .umro__you .umro__b { background: var(--a-accent-s); color: #dbe7ff; border-color: var(--a-accent-s); }

/* node/relationship mini-map for cross-asset / macro hover */
.relmap { position: relative; height: 100%; min-height: 150px; }
.relmap svg { width: 100%; height: 100%; display: block; overflow: visible; }
.relmap .lnk { stroke: var(--a-line-2); stroke-width: 1; transition: stroke .25s, stroke-width .25s; }
.relmap .nd { fill: var(--a-card); stroke: var(--a-line-2); stroke-width: 1.5; cursor: pointer; transition: fill .25s, stroke .25s; }
.relmap .nd:hover { fill: var(--a-accent-s); stroke: var(--a-accent); }
.relmap .ndl { fill: var(--a-dim); font-size: 10px; font-family: 'Inter',sans-serif; pointer-events: none; }
.relmap [data-rel].hot .lnk { stroke: var(--a-accent); stroke-width: 2; }
.relmap [data-rel].hot .nd { stroke: var(--a-accent); }

/* ── Device frames (showroom) ──────────────────────────────────────────── */
.appphone {
  --a-app:#090d1a; --a-panel:#0d1220; --a-card:#131c2e; --a-line:rgba(255,255,255,0.08);
  --a-ink:#f0f4fc; --a-dim:#8899b4; --a-dim-2:#6b7c96; --a-accent:#3b82f6; --a-accent-s:rgba(59,130,246,0.14);
  --a-gold:#d4af37; --a-gold-s:rgba(212,175,55,0.14); --a-gain:#22c55e; --a-loss:#ef4444; --a-warn:#f59e0b;
  --a-mono:'JetBrains Mono','Fira Code',ui-monospace,monospace;
  position: relative; width: 300px; max-width: 82vw; aspect-ratio: 9 / 19.5; margin: 0 auto;
  background: #05070c; border: 9px solid #0e1424; border-radius: 40px; overflow: hidden;
  box-shadow: 0 50px 120px -30px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.04) inset;
  color: var(--a-ink); font-family: 'Inter',-apple-system,sans-serif; font-variant-numeric: tabular-nums;
}
.appphone::before { content:""; position:absolute; top:10px; left:50%; transform:translateX(-50%);
  width:96px; height:22px; background:#0e1424; border-radius:0 0 14px 14px; z-index:5; }
.appphone__scr { position:absolute; inset:0; background:var(--a-app); display:flex; flex-direction:column; }
.appphone__top { height:44px; display:flex; align-items:center; gap:8px; padding:14px 16px 0; font-size:12px; color:var(--a-dim); }
.appphone__body { flex:1; padding:12px; display:flex; flex-direction:column; gap:9px; overflow:hidden; }
.appphone__tabbar { display:flex; justify-content:space-around; padding:10px 6px 16px; border-top:1px solid var(--a-line); background:var(--a-panel); color:var(--a-dim-2); font-size:9px; }
.appphone__tabbar b { display:flex; flex-direction:column; align-items:center; gap:3px; font-weight:500; }
.appphone__tabbar b.on { color:var(--a-accent); }

.browserbar { display:flex; align-items:center; gap:10px; }
.browserbar .url { flex:1; height:24px; border-radius:999px; background:var(--a-app); border:1px solid var(--a-line);
  display:flex; align-items:center; gap:6px; padding:0 10px; font-family:var(--a-mono); font-size:10.5px; color:var(--a-dim); }
.browserbar .url svg { width:11px; height:11px; color:var(--a-gain); }

.showroom { display:grid; grid-template-columns:1.4fr .9fr; gap:26px; align-items:center; }
.showroom--rev { grid-template-columns:.9fr 1.4fr; }
@media (max-width: 860px) { .showroom, .showroom--rev { grid-template-columns:1fr; } }

/* cursor-follow 3D tilt (cinema.js sets the transform) */
[data-tilt] { transition: transform .35s cubic-bezier(.16,1,.3,1); transform-style: preserve-3d; will-change: transform; }

/* honest availability chips */
.avail { display:flex; flex-wrap:wrap; gap:10px; }
.avail__chip { display:inline-flex; align-items:center; gap:8px; font-size:.8rem; padding:7px 12px; border-radius:999px;
  border:1px solid var(--line, rgba(255,255,255,.1)); color:var(--muted, #93a0b4); }
.avail__chip b { color:var(--text, #eef1f7); font-weight:600; }
.avail__chip .d { width:7px; height:7px; border-radius:50%; background:#22c55e; box-shadow:0 0 8px rgba(34,197,94,.6); }
.avail__chip.soon { color:var(--faint, #5a6678); }
.avail__chip.soon .d { background:#f59e0b; box-shadow:0 0 8px rgba(245,158,11,.5); }
.avail__chip.soon b { color:var(--muted, #93a0b4); }

/* ── Micro-interactions (emotional polish) ─────────────────────────────── */
/* Hovering a dimension row focuses it and lets neighbours recede — connected feel */
.relmap .row { border-radius: 7px; margin: 0 -6px; padding-left: 6px; padding-right: 6px;
  transition: opacity .32s var(--ease-out,ease), background .32s var(--ease-out,ease), box-shadow .32s var(--ease-out,ease); }
.relmap:hover .row:not(:hover) { opacity: 0.48; }
.relmap .row:hover { background: var(--a-accent-s); box-shadow: inset 2px 0 0 var(--a-accent); }
/* evidence links glow on hover; the weight brightens */
.evi__item { transition: border-color .3s var(--ease-out,ease), background .3s var(--ease-out,ease), box-shadow .3s var(--ease-out,ease); }
.evi__item:hover { box-shadow: 0 0 24px -6px rgba(59,130,246,0.4); }
.evi__item:hover .evi__w { text-shadow: 0 0 12px rgba(212,175,55,0.5); }
/* interactive scenario/detail cards lift with a soft glow */
.dk-card--btn { transition: border-color .28s var(--ease-out,ease), transform .28s var(--ease-spring,cubic-bezier(.34,1.56,.64,1)), background .28s, box-shadow .28s; }
.dk-card--btn:hover { box-shadow: 0 16px 40px -16px rgba(0,0,0,0.6), 0 0 0 1px var(--a-accent-s); }
/* gauge dial gets a faint halo once filled */
.gauge__dial { filter: drop-shadow(0 0 10px rgba(59,130,246,0.16)); }
@media (prefers-reduced-motion: reduce) {
  .relmap .row, .evi__item, .dk-card--btn { transition: none; }
  .relmap:hover .row:not(:hover) { opacity: 1; }
}

/* Responsive: collapse the app shell to a single column on small screens */
@media (max-width: 720px) {
  .app { grid-template-columns: 1fr; }
  .app__side { display: none; }
  .dk.cols-4 { grid-template-columns: repeat(2,1fr); }
  .dk.cols-3 { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; } .split__mid { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dk-card, .gauge__dial, .bar > i, .ck__box svg { transition: none !important; }
}