/* ============================================================
   CableBox — Android phone frame + in-app circuit mockups
   ============================================================ */

/* ---------- Device frame (modern Android) ---------- */
.phone {
  --w: 300px;
  position: relative;
  width: var(--w);
  aspect-ratio: 1260 / 2615;   /* matches the real app screenshots */
  border-radius: 44px;
  padding: 7px;
  background:
    linear-gradient(150deg, #2a2c44 0%, #0c0d22 38%, #16182f 70%, #34374f 100%);
  box-shadow:
    0 2px 0 rgba(255,255,255,0.10) inset,
    0 0 0 1.5px rgba(0,0,0,0.6),
    0 40px 80px -28px rgba(0,0,0,0.85),
    0 0 90px -30px rgba(73,80,250,0.55);
}
.phone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 37px;
  overflow: hidden;
  background: var(--bg);
  box-shadow: 0 0 0 2px #000 inset;
}
/* punch-hole camera */
.phone__cam {
  position: absolute;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #000;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.05), 0 0 4px 1px rgba(80,120,255,0.4) inset;
  z-index: 6;
}
/* real screenshot fills the screen */
.phone__shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  z-index: 1;
}

/* ---------- Full-bleed device-in-context photo (lifestyle render) ----------
   For images that already include their own phone bezel + workbench scene.
   No CSS frame — just a soft framed crop with depth. */
.device-photo {
  position: relative;
  z-index: 1;
  display: block;
  margin: 0;
  width: var(--dpw, 320px);
  max-width: 100%;
  border-radius: 26px;
  overflow: hidden;
  background: #05061a;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.07) inset,
    0 0 0 1px rgba(0,0,0,0.55),
    0 44px 90px -34px rgba(0,0,0,0.92),
    0 0 96px -40px rgba(73,80,250,0.55);
}
.device-photo img {
  display: block;
  width: 100%;
  height: auto;
}
.device-photo--hero { --dpw: 350px; }
.feature__media .device-photo { --dpw: 308px; }

/* glass reflection */
.phone__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(125deg, rgba(255,255,255,0.07) 0%, transparent 26%);
  pointer-events: none;
  z-index: 5;
}

/* ---------- App chrome ---------- */
.app {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  font-size: 13px;
}
.app__status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 18px 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}
.app__status .sig { display: flex; gap: 4px; align-items: center; }
.app__status .sig i {
  width: 3px; border-radius: 1px; background: var(--ink-soft); display: inline-block;
}
.app__status .sig i:nth-child(1){height:4px} .app__status .sig i:nth-child(2){height:6px}
.app__status .sig i:nth-child(3){height:8px} .app__status .sig i:nth-child(4){height:10px}
.batt { width: 20px; height: 10px; border: 1px solid var(--ink-soft); border-radius: 3px; position: relative; }
.batt::after { content:""; position:absolute; inset:1.5px; right: 6px; background: var(--ink-soft); border-radius:1px; }
.batt::before { content:""; position:absolute; right:-3px; top:3px; width:2px; height:4px; background: var(--ink-soft); border-radius:0 1px 1px 0; }

.app__bar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 16px 12px;
}
.app__bar .title { font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.app__bar .spacer { flex: 1; }
.app__bar .pill {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  padding: 4px 9px;
  border-radius: 100px;
  border: 1px solid var(--hairline-strong);
  color: var(--ink-soft);
}

/* ---------- Circuit canvas ---------- */
.canvas {
  position: relative;
  flex: 1;
  margin: 0 12px 12px;
  border-radius: 18px;
  background-color: #04042a;
  background-image:
    radial-gradient(rgba(120,130,220,0.16) 1px, transparent 1.4px);
  background-size: 17px 17px;
  background-position: -1px -1px;
  border: 1px solid var(--hairline);
  overflow: hidden;
}
.canvas--lit { box-shadow: 0 0 50px -10px rgba(254,192,19,0.4) inset; }

/* component card on the canvas */
.cmp {
  position: absolute;
  background: linear-gradient(180deg, #11123a, #0a0a2c);
  border: 1px solid var(--hairline-strong);
  border-radius: 11px;
  padding: 8px 9px 9px;
  box-shadow: 0 6px 16px -8px rgba(0,0,0,0.8);
}
.cmp__label {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 6px;
  white-space: nowrap;
}
.terminals { display: flex; gap: 7px; }
.term { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.term b {
  font-family: var(--font-mono);
  font-size: 7px;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}
/* terminal screw motif */
.screw {
  width: 13px; height: 13px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d7dcf2, #7e83ad 60%, #4a4e75);
  position: relative;
  box-shadow: 0 0 0 2px #05052a, 0 1px 2px rgba(0,0,0,0.6);
}
.screw::after {
  content:""; position:absolute; inset:0; margin:auto;
  width: 9px; height: 1.5px; background: #2c2f4d; border-radius: 2px;
  transform: rotate(35deg);
}
.screw.live    { box-shadow: 0 0 0 2px #05052a, 0 0 7px 1px var(--gold); }
.screw.wired::before {
  content:""; position:absolute; inset:-2px; border-radius:50%;
  border: 1.5px solid var(--cyan); opacity: 0.7;
}

/* lamp / ceiling rose */
.lamp {
  width: 46px; height: 46px; border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #2a2c52, #0d0e30);
  border: 1.5px solid var(--hairline-strong);
  position: relative;
  display: grid; place-items: center;
  transition: box-shadow 0.5s ease, background 0.5s ease;
}
.lamp .bulb {
  width: 20px; height: 20px; border-radius: 50%;
  background: #1b1d3f;
  transition: all 0.5s ease;
}
.lamp.on {
  background: radial-gradient(circle at 50% 42%, #fff3cf, #ffd34d 55%, #b07f12);
  box-shadow: 0 0 36px 6px rgba(254,192,19,0.75), 0 0 90px 18px rgba(254,192,19,0.35);
}
.lamp.on .bulb { background: #fff; box-shadow: 0 0 14px 3px #fff; }

/* drawn cable (twin & earth) as a routed path */
.cable {
  position: absolute;
  border-radius: 100px;
  background: linear-gradient(90deg, rgba(209,248,248,0.0), rgba(209,248,248,0.85), rgba(209,248,248,0.0));
  height: 3px;
  box-shadow: 0 0 8px rgba(209,248,248,0.5);
}

/* ---------- Cable cross-section craft motif (reusable) ---------- */
.tne {
  --d: 56px;
  width: var(--d); height: calc(var(--d) * 0.62);
  border-radius: 100px;
  background: linear-gradient(180deg, #cfd2e4, #9aa0bd);
  box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.6);
  display: flex; align-items: center; justify-content: center;
  gap: calc(var(--d) * 0.06);
  position: relative;
}
.tne .core { border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25); }
.tne .core.l { width: 28%; aspect-ratio:1; background: radial-gradient(circle at 35% 30%, #b5662e, #7a3d12); }
.tne .core.n { width: 28%; aspect-ratio:1; background: radial-gradient(circle at 35% 30%, #3aa0ff, #1657c4); }
.tne .core.e {
  width: 22%; aspect-ratio:1;
  background: repeating-linear-gradient(45deg, var(--gy-green) 0 3px, var(--gy-yellow) 3px 6px);
}

/* ---------- Compliance checker chips ---------- */
.regs { display: flex; flex-direction: column; gap: 7px; padding: 4px 6px; }
.reg {
  display: flex; align-items: flex-start; gap: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.3;
}
.reg .mk {
  flex: none; width: 16px; height: 16px; border-radius: 50%;
  display: grid; place-items: center; font-size: 10px; font-weight: 700; margin-top: 1px;
}
.reg.ok  .mk { background: rgba(47,174,90,0.18); color: #6ee79a; }
.reg.bad .mk { background: rgba(244,41,150,0.18); color: #ff7ec0; }
.reg .clause { font-family: var(--font-mono); font-size: 9px; color: var(--ink-mute); letter-spacing: 0.04em; display:block; margin-top: 3px; }
.reg.bad { border-color: rgba(244,41,150,0.35); }

/* ---------- Challenge list ---------- */
.chlist { display: flex; flex-direction: column; gap: 8px; padding: 2px 6px; }
.chrow {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: 12px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--hairline);
}
.chrow .num {
  flex: none; width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  background: rgba(73,80,250,0.16); color: var(--cyan);
  border: 1px solid rgba(73,80,250,0.4);
}
.chrow .meta { flex: 1; min-width: 0; }
.chrow .meta b { font-weight: 600; font-size: 12px; display:block; }
.chrow .meta span { font-size: 10px; color: var(--ink-mute); font-family: var(--font-mono); }
.chrow .state { font-size: 13px; }
.chrow.done { border-color: rgba(47,174,90,0.3); }
.chrow.done .num { background: rgba(47,174,90,0.16); color: #6ee79a; border-color: rgba(47,174,90,0.4); }
.chrow.lock { opacity: 0.5; }
.bar { height: 4px; border-radius: 4px; background: rgba(255,255,255,0.08); margin-top: 5px; overflow:hidden; }
.bar i { display:block; height:100%; border-radius:4px; background: linear-gradient(90deg, var(--cyan), var(--electric)); }

/* ---------- Saved circuits (sandbox) ---------- */
.saved { display:flex; flex-direction:column; gap: 9px; padding: 2px 6px; }
.savedcard {
  border: 1px solid var(--hairline); border-radius: 12px; overflow:hidden;
  background: rgba(255,255,255,0.025);
}
.savedcard .thumb {
  height: 64px;
  background-color: #04042a;
  background-image: radial-gradient(rgba(120,130,220,0.16) 1px, transparent 1.4px);
  background-size: 13px 13px;
  position: relative;
  border-bottom: 1px solid var(--hairline);
}
.savedcard .cap { display:flex; justify-content: space-between; align-items:center; padding: 8px 11px; }
.savedcard .cap b { font-size: 11.5px; font-weight: 600; }
.savedcard .cap span { font-family: var(--font-mono); font-size: 9px; color: var(--ink-mute); }

/* mini app aurora inside a screen */
.app-aurora { position:absolute; inset:0; overflow:hidden; z-index:0; }
.app-aurora .b {
  position:absolute; border-radius:50%; filter: blur(26px); mix-blend-mode: screen; opacity:0.6;
}