/* Shared pieces. Each direction themes them through these tokens. */
:root {
  --spec: #ff3b5c;
  --spec-pad: rgba(255, 59, 92, 0.16);
  --spec-type: #2f6bff;
  --spec-fill: #12a150;
  --spec-tag-ink: #fff;
  --spec-grid: rgba(47, 107, 255, 0.07);
  --spec-font: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;
  --phone-frame: #1d1d1f;
  --phone-edge: #48484a;
}

.da-piece { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: transparent; }

/* ---------- iPhone 15 Pro, 393x852 pt ---------- */
.da-phone { --w: 393px; width: var(--w); aspect-ratio: 413 / 872; position: relative; flex: none; }
.da-phone-body {
  position: absolute; inset: 0; border-radius: calc(var(--w) * 0.168);
  background: var(--phone-frame);
  box-shadow: inset 0 0 0 1.5px var(--phone-edge), inset 0 0 0 calc(var(--w) * 0.024) #050505, 0 30px 60px -28px rgba(0, 0, 0, 0.55);
}
.da-phone-screen {
  position: absolute; inset: calc(var(--w) * 0.025); border-radius: calc(var(--w) * 0.14);
  overflow: hidden; background: var(--wall, #0b0b10); isolation: isolate; container-type: size;
  color: #fff;
}
.da-phone-home, .da-phone-app { position: absolute; inset: 0; }
.da-phone-app { pointer-events: none; z-index: 2; }
.da-phone-app.open { pointer-events: auto; }
.da-phone-status {
  position: absolute; top: 0; left: 0; right: 0; height: 54px; z-index: 4; pointer-events: none;
  display: flex; align-items: center; justify-content: space-between; padding: 4px 30px 0 44px;
  font: 600 17px/1 -apple-system, 'SF Pro Text', 'Inter', system-ui, sans-serif; letter-spacing: -0.2px;
  color: var(--status-ink, #fff);
}
.da-phone-sys { display: flex; }
.da-phone-island {
  position: absolute; z-index: 5; top: 11px; left: 50%; width: 126px; height: 37px; margin-left: -63px;
  border-radius: 20px; background: #000;
}
.da-phone-bar {
  position: absolute; z-index: 5; bottom: 8px; left: 50%; width: 139px; height: 5px; margin-left: -69.5px;
  border-radius: 3px; background: #fff; mix-blend-mode: difference; pointer-events: none;
}
.da-phone.small .da-phone-status { transform: scale(0.8); transform-origin: top center; }

/* App launch: icon grows into the screen */
.da-launch {
  position: absolute; inset: 0; transform-origin: 0 0; display: grid; place-items: center; z-index: 2;
  will-change: transform;
}
.da-launch svg { width: 22%; color: #fff; }
.da-launch-piece { position: absolute; inset: 0; opacity: 0; transition: opacity 0.24s ease-out; z-index: 1; }
.da-launch-piece.in { opacity: 1; }

/* ---------- Inspect overlay ---------- */
.da-spec { position: absolute; inset: 0; pointer-events: none; z-index: 30; opacity: 0; transition: opacity 0.18s ease-out; font: 500 10.5px/1 var(--spec-font); }
.da-spec.on { opacity: 1; }
.da-spec-grid, .da-spec-ruler { position: absolute; left: var(--fx); top: var(--fy); width: var(--fw); height: var(--fh); opacity: 0; transition: opacity 0.2s; }
.da-spec.grid .da-spec-grid, .da-spec.grid .da-spec-ruler { opacity: 1; }
.da-spec-grid {
  --m: calc(16px * var(--fk)); --g: calc(8px * var(--fk));
  padding: 0 var(--m); display: grid; grid-template-columns: repeat(4, 1fr); column-gap: var(--g); box-sizing: border-box;
}
.da-spec-grid > i { background: var(--spec-grid); box-shadow: inset 1px 0 0 var(--spec-grid), inset -1px 0 0 var(--spec-grid); }
.da-spec-ruler.x { height: 10px; top: calc(var(--fy) - 14px); background: repeating-linear-gradient(90deg, var(--spec) 0 1px, transparent 1px calc(8px * var(--fk))); opacity: 0; mask: linear-gradient(#000 40%, transparent 41%); }
.da-spec-ruler.y { width: 10px; left: calc(var(--fx) - 14px); background: repeating-linear-gradient(180deg, var(--spec) 0 1px, transparent 1px calc(8px * var(--fk))); mask: linear-gradient(90deg, transparent 59%, #000 60%); }
.da-spec.grid .da-spec-ruler { opacity: 0.55; }
.da-spec-marks > * { position: absolute; left: 0; top: 0; }
.da-box { box-shadow: inset 0 0 0 1px var(--spec); border-radius: 1px; }
.da-box.lock { box-shadow: inset 0 0 0 1px var(--spec-type); }
.da-pad { background: var(--spec-pad); }
.da-tag {
  white-space: nowrap; padding: 4px 5px; border-radius: 3px; background: var(--spec); color: var(--spec-tag-ink);
  display: flex; align-items: center; gap: 5px; letter-spacing: 0.02em;
}
.da-tag.size { translate: -50% 0; }
.da-tag.radius { translate: -100% -100%; }
.da-tag.type { background: var(--spec-type); }
.da-tag.fill { background: var(--spec-fill); }
.da-tag b { font-weight: 700; }
.da-tag s { width: 9px; height: 9px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7); display: inline-block; }
.da-dim { color: var(--spec); }
.da-dim.h { height: 1px; background: var(--spec); }
.da-dim.v { width: 1px; background: var(--spec); }
.da-dim.h::before, .da-dim.h::after { content: ''; position: absolute; top: -3px; width: 1px; height: 7px; background: var(--spec); }
.da-dim.h::before { left: 0; } .da-dim.h::after { right: 0; }
.da-dim.v::before, .da-dim.v::after { content: ''; position: absolute; left: -3px; height: 1px; width: 7px; background: var(--spec); }
.da-dim.v::before { top: 0; } .da-dim.v::after { bottom: 0; }
.da-dim i { position: absolute; font-style: normal; background: var(--spec); color: var(--spec-tag-ink); padding: 2px 4px; border-radius: 3px; left: 50%; top: 50%; translate: -50% -50%; }
.inspecting .da-piece { cursor: crosshair; }

@media (prefers-reduced-motion: reduce) {
  .da-spec, .da-launch-piece { transition: none; }
}