/* FIELD PATCHES · phone screen 10 (2026-11-07). Mock-up docs/sl-vision/Patches.dc.html. Each patch its own colour; dashed until earned. */
.slv-pt {
  position: fixed; inset: 0; z-index: 91; box-sizing: border-box; display: flex; flex-direction: column; gap: 16px;
  padding: calc(22px + env(safe-area-inset-top, 0px)) 18px calc(22px + env(safe-area-inset-bottom, 0px));
  background: radial-gradient(120% 60% at 50% 20%, #0c1a1c 0%, #040308 62%), #040308;
  color: #efe6d6; font-family: "Saira Semi Condensed", var(--font-display), sans-serif; overflow-y: auto;
}
.slv-pt[hidden] { display: none !important; }
body.slv-pt-on { overflow: hidden; }
.slv-pt__head { position: relative; display: flex; flex-direction: column; gap: 2px; }
.slv-pt__kick { font-size: 12px; letter-spacing: 0.24em; color: var(--sl); font-weight: 700; padding-right: 60px; }
.slv-pt__name { font-size: 26px; font-weight: 800; }
.slv-pt .slv-pt__close { all: unset; position: absolute; right: 0; top: 0; cursor: pointer; padding: 2px 0 8px 12px; font: 11px "JetBrains Mono", monospace; color: #8a8174; }
.slv-pt__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.slv-pt .slv-pt__patch {
  all: unset; box-sizing: border-box; cursor: pointer; aspect-ratio: 1; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  text-align: center; padding: 10px; border: 2px dashed rgba(255, 255, 255, 0.2); color: #8a8174; background: none !important;
}
.slv-pt .slv-pt__patch b { font-size: 18px; font-weight: 800; letter-spacing: 0.06em; line-height: 1.1; }
.slv-pt .slv-pt__patch small { font-family: "JetBrains Mono", var(--font-mono), monospace; font-size: 10px; line-height: 1.3; }
.slv-pt .slv-pt__patch.on { border: 2px solid var(--pc); background: color-mix(in srgb, var(--pc) 8%, transparent) !important; color: #efe6d6; }
.slv-pt .slv-pt__patch.on b { color: var(--pc); }
.slv-pt .slv-pt__patch.on small { color: #8a8174; }
.slv-pt__note { margin: auto 0 0; font-family: "JetBrains Mono", var(--font-mono), monospace; font-size: 11px; color: #8a8174; text-align: center; }
.slv-pt__foot { display: flex; }
.slv-pt .slv-pt__card { all: unset; box-sizing: border-box; flex: 1; height: 56px; border-radius: 14px; text-align: center; cursor: pointer; border: 1px solid rgba(var(--sl-rgb), 0.5); color: #efe6d6; font: 800 16px "Saira Semi Condensed", sans-serif; letter-spacing: 0.12em; background: rgba(var(--sl-rgb), 0.08) !important; }
.slv-pt__how { position: absolute; left: 16px; right: 16px; top: 36%; display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid rgba(var(--sl-rgb), 0.5); border-radius: 14px; background: rgba(4, 3, 8, 0.97); }
.slv-pt__how[hidden] { display: none; }
.slv-pt__how b { font-size: 18px; font-weight: 800; letter-spacing: 0.06em; }
.slv-pt__how span { font-family: "JetBrains Mono", var(--font-mono), monospace; font-size: 11px; color: #8a8174; line-height: 1.5; }
.slv-pt .slv-pt__how button { all: unset; cursor: pointer; align-self: flex-end; padding: 8px 14px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.14); font: 800 12px "Saira Semi Condensed", sans-serif; letter-spacing: 0.14em; background: none !important; }
/* the STATION entry */
.slv-pt__entry { margin-bottom: 10px; width: 100%; }
/* on the Desktop the screen docks in the desk centre, as every room does */
body.sld .slv-pt { top: 64px; left: 300px; right: 340px; bottom: 0; padding: 22px 28px; border-left: 1px solid rgba(255, 255, 255, 0.06); border-right: 1px solid rgba(255, 255, 255, 0.06); }
body.sld .slv-pt__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 640px; }
body.sld .slv-pt__foot { max-width: 640px; }