/* SIGNAL 2002, SCENE C, the cartridge deck. SILVER's live palette only (silver.py LIVE): royal blue wells, dot grid, white type, orange marker. */
.scf{--hole:#1a3a9e;--lcd:#ffffff;--lcd-ghost:rgba(255,255,255,.12);--lcd-dim:#9fb6ff;--amber:#ff8a1e;--ink:#081a5e}
.scf .dh{background:linear-gradient(180deg,#2448b8 0,#173193 100%)}
.scf .dh::after{background:radial-gradient(circle,rgba(0,8,50,.45) 0 .7px,transparent 1px) 0 0/3px 3px}
.scf .dh::before{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,40,.6);border-radius:inherit;z-index:2}
.scf .seg__lit{text-shadow:0 0 4px rgba(200,220,255,.6)}
.scf .tbc,.scf .tbc span{color:var(--amber)}
.scf__tl{position:absolute;left:16px;top:10px;display:flex;align-items:flex-start;gap:20px;z-index:1}
.scf__tw{font:400 30px var(--px);color:#fff;letter-spacing:3px;line-height:1;white-space:pre;text-shadow:0 0 4px rgba(200,220,255,.6);min-width:5.4em}
.scf__tn{font-size:32px}
.scf__title .lcd__sub{position:absolute;left:16px;right:16px;bottom:7px;display:flex;justify-content:space-between;font:400 9px var(--px);color:var(--lcd-dim)}

/* the drive readout and its load bar */
.scf__status{display:flex;align-items:center;gap:24px;padding:0 22px}
.scf__drive{position:relative;z-index:1;font:400 22px var(--px);color:#fff;letter-spacing:2px;flex:1;display:flex;align-items:baseline;gap:16px;white-space:nowrap}
.scf__drive .cap{color:var(--lcd-dim)}
.scf__bar{position:relative;z-index:1;display:grid;grid-template-columns:repeat(16,14px);gap:4px}
.scf__bar i{height:26px;background:rgba(255,255,255,.1)}
.scf__bar i.on{background:#fff;box-shadow:0 0 4px rgba(200,220,255,.7)}

/* the picture well: the loaded city's card */
.scf__pic figure{position:absolute;inset:12px;z-index:1;margin:0}
.scf__pic img{width:100%;height:100%;object-fit:cover;display:block;box-shadow:0 0 0 1px rgba(0,8,50,.6)}
.scf__pic figcaption{position:absolute;left:10px;bottom:10px;font:400 14px var(--px);color:#fff;letter-spacing:2px;background:#0b1f6e;padding:4px 8px}
.scf__empty{position:absolute;inset:0;display:grid;place-items:center;z-index:1;font:400 13px var(--px);color:var(--lcd-dim);letter-spacing:2px}

/* the feed well */
.scf__feed{z-index:1}
.scf__list{position:absolute;inset:0;overflow-y:auto;padding:16px 22px 18px;z-index:1;scrollbar-width:thin;scrollbar-color:#9fb6ff transparent;outline:0}
.scf__list:focus-visible{outline:2px dotted var(--amber);outline-offset:-4px}
.scf__kick{font:400 10px var(--px);color:var(--lcd-dim);letter-spacing:1px;margin:14px 0 6px}
.scf__kick:first-child{margin-top:0}
.scf__places{font-size:22px;line-height:1.15;color:#fff;display:flex;flex-wrap:wrap;column-gap:0;row-gap:2px}
.scf__places i{display:inline-block;width:6px;height:6px;background:var(--amber);margin:0 12px;align-self:center}
.scf__list ul{list-style:none;border-top:1px solid #3b55a8}
.scf__list li{display:flex;justify-content:space-between;gap:24px;padding:6px 0;border-bottom:1px solid #3b55a8;font-size:20px;line-height:1.05;color:#fff}
.scf__list li em{font-style:normal;color:var(--lcd-dim);white-space:nowrap}
.scf__idle{position:absolute;inset:0;padding:18px 22px;z-index:1}
.scf__idle ul{list-style:none;border-top:1px solid #3b55a8}
.scf__idle li{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #3b55a8;font-size:26px;color:#fff}
.scf__idle li b{font-weight:400}
.scf__idle li span{color:var(--lcd-dim);font-size:20px}

/* the ports and the cartridges: rendered sprites, moved in stepped frames by sceneface.js */
.scf__port{position:absolute;overflow:hidden;z-index:2}
.scf__cart{position:absolute;border:0;padding:0;cursor:pointer;background:var(--coff) no-repeat;background-size:var(--sw) var(--sh)}
.scf__cart:hover,.scf__cart:focus-visible{background-image:var(--clit)}
.scf__cart.is-in,.scf__cart:active{background-image:var(--cdown)}
.scf__cart:focus-visible{outline:2px dotted var(--amber);outline-offset:2px}
.scf__cart img{position:absolute;object-fit:cover;border-radius:3px;pointer-events:none}
.scf__lip{position:absolute;pointer-events:none;z-index:3}

/* phone */
.scf.is-phone .scf__tl{left:12px;top:8px;gap:12px}
.scf.is-phone .scf__tw{font-size:21px;letter-spacing:2px}
.scf.is-phone .scf__tn{font-size:23px}
.scf.is-phone .scf__title .lcd__sub{font-size:8px;left:12px;right:12px;bottom:5px}
.scf.is-phone .scf__screen .scf__pic{position:absolute;left:0;right:0;top:0;height:150px}
.scf.is-phone .scf__screen .scf__feed{position:absolute;left:0;right:0;top:150px;bottom:0}
.scf.is-phone .scf__pic figure{inset:10px 10px 0}
.scf.is-phone .scf__pic figcaption{font-size:11px}
.scf.is-phone .scf__list{padding:12px 14px}
.scf.is-phone .scf__places{font-size:18px}
.scf.is-phone .scf__places i{margin:0 8px;width:5px;height:5px}
.scf.is-phone .scf__list li{font-size:17px;flex-direction:column;gap:2px}
.scf.is-phone .scf__idle{padding:12px 14px}
.scf.is-phone .scf__idle li{font-size:22px;padding:8px 0}
.scf.is-phone .scf__status{padding:0 12px;gap:10px;flex-direction:column;align-items:flex-start;justify-content:center}
.scf.is-phone .scf__drive{font-size:14px;gap:10px;flex:none}
.scf.is-phone .scf__bar{grid-template-columns:repeat(16,16px);gap:4px}
.scf.is-phone .scf__bar i{height:10px}
.scf.is-phone .scf__cart img{border-radius:2px}