/* SEEK · phone screen 5 (2026-11-07). Mock-up docs/sl-vision/Seek.dc.html. The arrow turns with the phone; nothing flashes. */
.slv-seek {
  position: fixed; inset: 0; z-index: 91; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: calc(22px + env(safe-area-inset-top, 0px)) 20px calc(22px + env(safe-area-inset-bottom, 0px));
  background: radial-gradient(100% 60% at 50% 45%, #0c1a1c 0%, #040308 65%), #040308;
  color: #efe6d6; font-family: "Saira Semi Condensed", var(--font-display), sans-serif;
}
.slv-seek[hidden] { display: none !important; }
body.slv-seek-on { overflow: hidden; }
.slv-seek__head { position: relative; align-self: stretch; display: flex; flex-direction: column; gap: 2px; }
.slv-seek__kick { font-size: 12px; letter-spacing: 0.24em; color: var(--sl); font-weight: 700; }
.slv-seek__name { font-size: 26px; font-weight: 800; padding-right: 70px; }
.slv-seek__src { font-family: "JetBrains Mono", var(--font-mono), monospace; font-size: 11px; color: #8a8174; line-height: 1.45; }
.slv-seek .slv-seek__close { all: unset; position: absolute; right: 0; top: 0; cursor: pointer; padding: 2px 0 8px 12px; font: 11px "JetBrains Mono", monospace; color: #8a8174; }
.slv-seek__dial { width: 300px; height: 300px; max-width: 78vw; max-height: 78vw; flex: none; }
.slv-seek__dial text { font-family: "JetBrains Mono", var(--font-mono), monospace; }
.slv-seek__num { display: flex; flex-direction: column; align-items: center; }
.slv-seek__dist { font-size: 64px; font-weight: 800; line-height: 1; color: var(--sl); }
.slv-seek__sub { font-size: 14px; letter-spacing: 0.24em; color: #8a8174; font-weight: 700; text-align: center; }
.slv-seek__foot { align-self: stretch; margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.slv-seek__sig { font-family: "JetBrains Mono", var(--font-mono), monospace; font-size: 11px; color: #8a8174; text-align: center; line-height: 1.5; }
.slv-seek__row { display: flex; gap: 8px; }
.slv-seek .slv-seek__row button {
  all: unset; box-sizing: border-box; flex: 1; height: 56px; border-radius: 14px; text-align: center; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.12); font: 800 16px "Saira Semi Condensed", sans-serif; letter-spacing: 0.12em; color: #efe6d6;
  background: none !important; box-shadow: none !important; touch-action: none; user-select: none; -webkit-user-select: none;
}
.slv-seek .slv-seek__talk { border-color: rgba(var(--sl-rgb), 0.5) !important; background: rgba(var(--sl-rgb), 0.08) !important; }
.slv-seek__pick { position: absolute; left: 16px; right: 16px; top: 30%; display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid rgba(var(--sl-rgb), 0.5); border-radius: 14px; background: rgba(4, 3, 8, 0.97); }
.slv-seek__pick[hidden] { display: none; }
.slv-seek__pick > span { font-size: 12px; letter-spacing: 0.24em; color: var(--sl); font-weight: 700; }
.slv-seek .slv-seek__pick button { all: unset; cursor: pointer; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(245, 197, 66, 0.35); color: #efe6d6; font-size: 17px; font-weight: 800; background: none !important; }
.slv-seek .slv-seek__pickx { border: 0 !important; color: #8a8174 !important; font: 11px "JetBrains Mono", monospace !important; text-align: right; }
.slv-seek__note { margin: 4px; font-family: "JetBrains Mono", var(--font-mono), monospace; font-size: 11px; color: #8a8174; }
/* the chip that appears when you tap a name on the scope */
.slv-seek__chip {
  all: unset; position: fixed; z-index: 89; left: 50%; bottom: calc(190px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); cursor: pointer;
  padding: 10px 16px; border-radius: 999px; border: 1px solid var(--sl); background: rgba(4, 3, 8, 0.95) !important; color: var(--sl);
  font: 800 13px "Saira Semi Condensed", sans-serif; letter-spacing: 0.14em; white-space: nowrap;
}
.slv-seek__chip[hidden] { display: none; }
body.sld .slv-seek, body.sld .slv-seek__chip { display: none !important; }
