/* city-desk.css - the city view as desk hardware (1.11.9.128).
   City Overhaul mockup B: the projection table in the middle housing, the
   colony list and the district file on screens either side, the districts as
   lit keys under the table. The same housings, screws, keycaps and CRT glass as
   the desk monitors (desk-monitors.css, whose --dkm-* tokens this reuses, so
   the Red and Jade skins tint it too) and the Nav Console.

   STYLE ONLY. city.js builds the view (.fmcity: .cyhead, .cywrap with .cyrail,
   .cymid and .cyside) and keeps every class, id and handler; this sheet only
   restyles them. Phones keep the flat view: every rule is scoped off
   .fm-mobile. Some rules carry !important because city.js injects its own
   stylesheet (#fmCityStyles) after this one is parsed. */

body:not(.fm-mobile) .fmcity{--cd-ph:#7cf0a4;--cd-brass:#c99a4e;font-family:'Share Tech Mono',ui-monospace,monospace}

/* ── header: a plate across the top ────────────────────────────────────── */
body:not(.fm-mobile) .fmcity .cyhead{position:relative;padding:8px 14px!important;margin-bottom:12px!important;border:0!important;border-radius:9px;
  background:var(--dkm-screws),var(--dkm-shell)!important;
  box-shadow:0 0 0 1px #000,0 4px 14px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px var(--dkm-edge),inset 0 -2px 0 rgba(0,0,0,.6)}
body:not(.fm-mobile) .fmcity .cytitle{display:inline-block;padding:3px 12px;border-radius:4px;background:#030503;box-shadow:inset 0 1px 4px #000;
  font-family:'Doto','Share Tech Mono',monospace;font-weight:700;font-size:22px!important;letter-spacing:.08em;color:var(--cd-ph)!important;text-shadow:0 0 8px rgba(66,255,126,.5)}
body:not(.fm-mobile) .fmcity .cysub{margin-left:10px;font-size:11px!important;letter-spacing:.16em;color:#8a948b!important}

/* ── keys ──────────────────────────────────────────────────────────────── */
body:not(.fm-mobile) .fmcity .cybtn,body:not(.fm-mobile) .fmcity .cyexit{border:0!important;border-radius:4px!important;font-family:'Share Tech Mono',ui-monospace,monospace!important;
  letter-spacing:.12em;color:#f5c26a!important;background:linear-gradient(#262b26,#171a17)!important;
  box-shadow:0 3px 0 #060706,0 4px 4px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.1)}
body:not(.fm-mobile) .fmcity .cybtn:hover:not(:disabled),body:not(.fm-mobile) .fmcity .cyexit:hover{color:#ffd88a!important}
body:not(.fm-mobile) .fmcity .cybtn:active:not(:disabled),body:not(.fm-mobile) .fmcity .cyexit:active{transform:translateY(2px);box-shadow:0 1px 0 #060706}
body:not(.fm-mobile) .fmcity .cybtn.hot{color:#ff8a7a!important}
body:not(.fm-mobile) .fmcity .cyhead .cybtn,body:not(.fm-mobile) .fmcity .cyhead .cyexit{height:30px;padding:0 14px!important;font-size:11px!important}

/* ── the three housings ────────────────────────────────────────────────── */
body:not(.fm-mobile) .fmcity .cywrap{gap:0 12px!important;grid-template-columns:0px minmax(0,1fr) 330px!important;height:calc(100% - 66px)!important}
body:not(.fm-mobile) .fmcity .cywrap.railopen{grid-template-columns:230px minmax(0,1fr) 330px!important}
body:not(.fm-mobile) .fmcity .cymid,
body:not(.fm-mobile) .fmcity .cyside,
body:not(.fm-mobile) .fmcity .cywrap.railopen .cyrail{box-sizing:border-box;border:0!important;border-radius:9px!important;
  background:var(--dkm-screws),var(--dkm-shell)!important;
  box-shadow:0 0 0 1px #000,0 4px 14px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px var(--dkm-edge),inset 0 -2px 0 rgba(0,0,0,.6)}
body:not(.fm-mobile) .fmcity .cymid{padding:14px 16px 14px}
body:not(.fm-mobile) .fmcity .cyside{padding:14px 12px 12px 14px!important;gap:10px;scrollbar-width:thin;scrollbar-color:rgba(124,240,164,.25) transparent}
body:not(.fm-mobile) .fmcity .cywrap.railopen .cyrail{padding:14px 10px 12px!important}

/* ── the projection table: glass behind a bezel ────────────────────────── */
body:not(.fm-mobile) .fmcity .cvwrap{margin:6px 6px 4px;border:0!important;border-radius:14px!important;background:#020503!important;
  box-shadow:inset 0 0 50px #000,0 0 0 2px #000,0 0 0 8px var(--dkm-ring),0 0 0 9px var(--dkm-ring2)}
body:not(.fm-mobile) .fmcity .hud{left:16px!important;top:12px!important;padding:5px 10px 6px;border-left:2px solid #f5c26a;background:rgba(2,8,4,.78)}
body:not(.fm-mobile) .fmcity .hud .st{font-family:'Doto','Share Tech Mono',monospace;font-weight:700;color:#f5c26a!important;text-shadow:0 0 8px rgba(245,194,106,.5)}
body:not(.fm-mobile) .fmcity .hud .sub{color:#8fbf9c!important}
body:not(.fm-mobile) .fmcity .cyzoom{margin-top:16px!important;gap:7px!important;flex-wrap:wrap}
body:not(.fm-mobile) .fmcity .cyzoom .cybtn{height:30px;padding:0 13px!important;font-size:11px!important}
body:not(.fm-mobile) .fmcity #cityZoomHint{color:#7d8f80!important;font-size:11px;letter-spacing:.06em}

/* ── districts: lit keys with a lens LED ───────────────────────────────── */
body:not(.fm-mobile) .fmcity .cystrip{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:7px!important;margin-top:12px!important}
body:not(.fm-mobile) .fmcity .cychip{position:relative;min-width:0!important;padding:6px 8px 6px 22px!important;border:0!important;border-radius:4px!important;
  background:linear-gradient(#1a1d1a,#101210)!important;box-shadow:0 3px 0 #060706,inset 0 1px 0 rgba(255,255,255,.06);color:#8a948b!important}
body:not(.fm-mobile) .fmcity .cychip::before{content:'';position:absolute;left:8px;top:50%;width:7px;height:7px;margin-top:-4px;border-radius:2px;background:#1f2a22;box-shadow:inset 0 1px 1px #000}
body:not(.fm-mobile) .fmcity .cychip b{font-family:'Share Tech Mono',ui-monospace,monospace;font-weight:400;font-size:11.5px!important;letter-spacing:.04em}
body:not(.fm-mobile) .fmcity .cychip span{color:#5f6f62!important}
body:not(.fm-mobile) .fmcity .cychip:hover{color:#cfe9d6!important}
body:not(.fm-mobile) .fmcity .cychip[aria-current="true"]{transform:translateY(2px);background:linear-gradient(#141814,#0c0e0c)!important;box-shadow:0 1px 0 #060706,inset 0 1px 3px #000}
body:not(.fm-mobile) .fmcity .cychip[aria-current="true"]::before{background:#f5c26a;box-shadow:0 0 7px #f5c26a}
body:not(.fm-mobile) .fmcity .cychip[aria-current="true"] b{color:#f5c26a!important}

/* ── the side screens: each panel is a CRT in the housing ──────────────── */
body:not(.fm-mobile) .fmcity .cyside .cyp{position:relative;margin:0 0 4px!important;padding:10px 12px 12px!important;border:0!important;border-radius:10px/12px!important;
  background:radial-gradient(ellipse at 50% 40%,#0a1a0e 0%,#05100a 70%,#020805 100%)!important;color:#b8f0c8;
  box-shadow:inset 0 0 30px rgba(0,0,0,.85),0 0 0 2px #000,0 0 0 6px var(--dkm-ring),0 0 0 7px var(--dkm-ring2)!important}
body:not(.fm-mobile) .fmcity .cyside .cyp+.cyp{margin-top:10px!important}
body:not(.fm-mobile) .fmcity .cyside .cyp::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 1px,transparent 1px 3px)}
body:not(.fm-mobile) .fmcity .cyt{color:#f5c26a!important;letter-spacing:.16em!important;font-size:11.5px!important}
body:not(.fm-mobile) .fmcity .cykv{border-bottom:1px dotted rgba(124,240,164,.16)!important}
body:not(.fm-mobile) .fmcity .cykv .k{color:#7fae8c!important}

/* ── the colony screen (when the rail is open) ─────────────────────────── */
body:not(.fm-mobile) .fmcity .cywrap.railopen .cyrail>*{position:relative}
body:not(.fm-mobile) .fmcity .cyrow{border:0!important;border-bottom:1px dotted rgba(124,240,164,.14)!important;border-radius:0!important;margin:0!important;color:#9fe8b6}
body:not(.fm-mobile) .fmcity .cyrow:hover{background:rgba(124,240,164,.06)!important}
body:not(.fm-mobile) .fmcity .cyrow[aria-current="true"]{background:rgba(124,240,164,.1)!important;box-shadow:inset 2px 0 0 #7cf0a4}
body:not(.fm-mobile) .fmcity .cywrap.railopen .cyrail{background:radial-gradient(ellipse at 50% 40%,#0a1a0e 0%,#05100a 70%,#020805 100%)!important;
  box-shadow:inset 0 0 30px rgba(0,0,0,.85),0 0 0 2px #000,0 0 0 8px var(--dkm-ring),0 0 0 9px var(--dkm-ring2)!important;margin:4px}
body:not(.fm-mobile) .fmcity .cybtn.on{color:#1b1206!important;background:linear-gradient(#ffc76a,#d8922a)!important;box-shadow:0 3px 0 #6a4410,0 4px 5px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.45)!important}