/* GM app styles. Loaded after the password gate unlocks. */
#app{display:none;min-height:100vh}
#app.live{display:grid;grid-template-columns:230px 1fr;grid-template-rows:auto 1fr;
  grid-template-areas:"side top" "side main";height:100vh}
/* Battle Map window: no sidebar — just the top bar and the map surface. */
#app.live.map-mode{grid-template-columns:1fr;grid-template-areas:"top" "main"}
.map-top .title{font-family:var(--disp);letter-spacing:1.5px}
.map-top .lnk{flex:0 0 auto}
.map-main{max-width:none}
/* Fullscreen editable map (native Fullscreen API on the map view): keep every
   control visible and let the picture grow to nearly the whole screen. Tokens
   stay draggable — the drag math reads the live rect, so any size works. */
.map-main:fullscreen{background:var(--bg);overflow:auto;padding:14px 18px}
.map-main:fullscreen .bm-stage img{max-width:calc(100vw - 40px);max-height:calc(100vh - 128px)}

/* Sidebar */
.side{grid-area:side;background:var(--bg2);border-right:1px solid var(--stroke);
  display:flex;flex-direction:column;overflow-y:auto}
.brand{padding:18px 16px 10px}
.brand .t{font-size:1.4rem;font-weight:800;color:var(--yellow);letter-spacing:.5px}
.brand .s{font-size:.66rem;color:var(--dim);font-family:var(--mono);text-transform:uppercase;letter-spacing:1px}
.nav{padding:6px 10px;flex:1}
.nav button{display:block;width:100%;text-align:left;background:none;border:none;color:var(--dim);
  font:600 .9rem var(--ui);padding:9px 12px;border-radius:8px;cursor:pointer;margin:2px 0}
.nav button:hover{background:var(--hover)}
.nav button.active{background:var(--panel);color:var(--yellow)}
.nav .sep{height:1px;background:var(--stroke);margin:8px 6px}
.nav .gmscreen{color:var(--yellow);background:var(--panel)}
.nav .navgrp{font:700 .6rem var(--mono);color:var(--faint);text-transform:uppercase;letter-spacing:1px;padding:4px 12px 2px}
.nav a.navlink{display:block;width:100%;text-align:left;color:var(--dim);font:600 .82rem var(--ui);padding:8px 12px;border-radius:8px;text-decoration:none;margin:2px 0}
.nav a.navlink:hover{background:var(--hover);color:var(--cyan)}
.beatchip{padding:10px 16px;font-size:.7rem;color:var(--dim);font-family:var(--mono);
  border-top:1px solid var(--stroke)}
.beatchip b{color:var(--cyan)}

/* Top bar */
.top{grid-area:top;background:var(--bg2);border-bottom:1px solid var(--stroke);
  display:flex;align-items:center;gap:16px;padding:0 18px;height:60px}
.top .title{font-size:1.2rem;font-weight:700;flex:1}
.top .ctl{display:flex;align-items:center;gap:6px;font-size:.72rem;color:var(--dim);font-family:var(--mono)}
.stepper{display:flex;align-items:center;background:var(--panel);border-radius:8px;overflow:hidden}
.stepper button{background:var(--panel2);border:none;color:var(--text);width:26px;height:26px;cursor:pointer;font-weight:700}
.stepper button:hover{background:var(--hover)}
.stepper .v{min-width:26px;text-align:center;color:var(--yellow);font-weight:700}
.pill{background:var(--panel);border-radius:8px;padding:5px 10px;color:var(--cyan);font-weight:700;font-family:var(--mono)}
.saved{color:var(--green);font-size:.72rem;font-family:var(--mono)}
.lnk{color:var(--faint);font-size:.72rem;font-family:var(--mono);cursor:pointer;background:none;border:none}
.lnk:hover{color:var(--cyan)}

/* Main content */
.main{grid-area:main;overflow-y:auto;padding:18px 22px 60px}
.split{display:grid;grid-template-columns:250px 1fr;gap:14px;align-items:start}
.idx{background:var(--bg2);border-radius:12px;padding:8px;position:sticky;top:0;max-height:calc(100vh - 96px);overflow-y:auto}
.idx button{display:block;width:100%;text-align:left;background:none;border:none;color:var(--dim);
  font:600 .82rem var(--ui);padding:7px 10px;border-radius:7px;cursor:pointer}
.idx button:hover{background:var(--hover)}
.idx button.active{background:var(--panel);color:var(--yellow)}
.idx .grp{font:700 .64rem var(--mono);color:var(--faint);text-transform:uppercase;letter-spacing:1px;padding:10px 10px 3px}
.idx .done{color:var(--green)} .idx .cur{color:var(--yellow)}

/* Cards */
.card{background:var(--panel);border:1px solid var(--stroke);border-radius:12px;margin:10px 0;overflow:hidden}
.card .hd{display:flex;align-items:center;gap:8px;padding:11px 14px 4px}
.card .hd .bar{width:4px;height:17px;border-radius:2px;background:var(--yellow)}
.card .hd h3{margin:0;font-size:1rem}
.card .bd{padding:4px 14px 12px}
.readaloud{background:var(--panel2);border:1px solid var(--cyan2);border-radius:10px;margin:10px 0;padding:12px 14px}
.readaloud .lbl{font:700 .72rem var(--mono);color:var(--cyan);letter-spacing:1px}
.readaloud .tx{font:italic 15px/1.5 var(--ui);margin-top:5px}
.muted{color:var(--dim)} .faint{color:var(--faint)} .small{font-size:.84rem}
.tiny{font-size:.74rem} h2.view-h{margin:2px 0 4px}

/* badges & chips */
.badge{display:inline-block;font:700 .68rem var(--ui);padding:2px 8px;border-radius:7px;background:var(--panel2);color:var(--dim)}
.b-yellow{background:var(--yellow);color:#0a0a0f}.b-cyan{background:var(--cyan);color:#0a0a0f}
.b-magenta{background:var(--magenta);color:#0a0a0f}.b-green{background:var(--green);color:#0a0a0f}
.b-red{background:var(--red);color:#0a0a0f}.b-purple{background:var(--purple);color:#0a0a0f}.b-orange{background:var(--orange);color:#0a0a0f}

/* generic buttons */
.button{cursor:pointer;border-radius:8px;font:700 .82rem var(--ui);padding:8px 12px;border:1px solid transparent}
.solid{background:var(--yellow);color:#0a0a0f}.solid:hover{filter:brightness(1.08)}
.ghost{background:transparent;border-color:var(--cyan);color:var(--cyan)}.ghost:hover{background:var(--hover)}
.ghost.mag{border-color:var(--magenta);color:var(--magenta)}.ghost.grn{border-color:var(--green);color:var(--green)}
.ghost.red{border-color:var(--red);color:var(--red)}.ghost.dim{border-color:var(--stroke);color:var(--dim)}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* tables */
table.tbl{width:100%;border-collapse:collapse;font-size:.86rem;margin:6px 0}
table.tbl th{text-align:left;color:var(--cyan);font:700 .68rem var(--mono);text-transform:uppercase;
  letter-spacing:.5px;padding:6px 8px;border-bottom:1px solid var(--stroke)}
table.tbl td{padding:6px 8px;border-bottom:1px solid var(--stroke);vertical-align:top}
table.tbl tr:nth-child(even) td{background:rgba(255,255,255,.018)}
.dvcell{font-family:var(--mono);font-weight:700;color:var(--cyan)}
.rangegrid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;margin-top:4px}
.rangegrid div{text-align:center;font:11px var(--mono)}
.rangegrid .b{color:var(--faint)} .rangegrid .v{color:var(--cyan);font-weight:700}

/* stats strip */
.stats{display:grid;grid-template-columns:repeat(9,1fr);gap:4px;background:var(--panel2);border-radius:10px;padding:8px;margin:6px 0}
.stats div{text-align:center}.stats .k{font:.62rem var(--mono);color:var(--dim)}.stats .v{font:800 1.1rem var(--mono)}
.vit{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0}
.vit .c{background:var(--panel2);border-radius:8px;padding:4px 10px;font-size:.82rem}
.vit .c b{font-family:var(--mono)}

/* combat */
/* Combat toolbar stays pinned to the top of the scroller so Next Turn / Roll
   Initiative are always one tap away, even mid-list on a small screen. */
.cbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--bg2);border-radius:12px;padding:10px 14px;margin-bottom:8px;position:sticky;top:0;z-index:5;box-shadow:0 6px 12px -8px rgba(0,0,0,.75)}
.cbar .rnd{font-size:1.2rem;font-weight:800;color:var(--yellow)}
.crow{background:var(--panel);border:2px solid var(--stroke);border-radius:10px;margin:5px 0;padding:7px 9px}
.crow.turn{border-color:var(--yellow)}
.crow .l1{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.crow .stripe{width:5px;height:28px;border-radius:2px}
.crow input.init{width:44px;text-align:center;font:800 1.05rem var(--mono);background:var(--panel2);border:1px solid var(--stroke);color:var(--text);border-radius:6px;padding:3px}
.crow input.nm{flex:1;min-width:120px;background:transparent;border:none;color:var(--text);font:700 1rem var(--ui)}
.crow .ws{font-weight:700;font-size:.8rem}
/* Collapsed (inactive) combatant row — a single scannable summary line. */
.crow.ccompact{display:flex;align-items:center;gap:8px;cursor:pointer;padding:6px 9px}
.crow.ccompact:hover{border-color:var(--yellow)}
.crow.ccompact.cdead{opacity:.5}
.crow.ccompact .stripe{flex:none;height:22px}
.ci-init{flex:none;min-width:22px;text-align:center;font:800 .95rem var(--mono);color:var(--dim)}
.ci-nm{flex:1;min-width:60px;font:700 .95rem var(--ui);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ci-tag{flex:none;font:700 .62rem var(--mono);letter-spacing:.5px}
.ci-hp{flex:none;font:800 .9rem var(--mono)}
.ci-ws{flex:none;font-weight:700;font-size:.74rem}
.ci-ammo{flex:none;font:700 .78rem var(--mono)}
.ci-x{flex:none;color:var(--faint);font-size:.8rem;margin-left:2px}
.hpbox{display:flex;align-items:center;background:var(--panel2);border-radius:8px}
.hpbox button{background:none;border:none;width:28px;height:26px;cursor:pointer;font-weight:700}
.hpbox .hp{min-width:66px;text-align:center;font:800 1rem var(--mono)}
.chip{cursor:pointer;border:none;border-radius:12px;font:.7rem var(--ui);padding:4px 9px;background:var(--panel2);color:var(--dim)}
.chip.on{background:var(--magenta);color:#0a0a0f}
.ammoline{background:var(--panel2);border-radius:8px;padding:5px 8px}
.ammoline .ammo-ct{min-width:58px;text-align:center;font:800 .95rem var(--mono)}
.det{background:var(--panel2);border-radius:8px;margin-top:8px;padding:8px 10px;font-size:.82rem}
.det .sec{font:700 .66rem var(--mono);text-transform:uppercase;letter-spacing:.5px;margin-top:6px}
input.mini,select.mini{background:var(--panel2);border:1px solid var(--stroke);color:var(--text);border-radius:6px;padding:5px 7px;font-size:.85rem}
textarea.area{width:100%;background:var(--panel2);border:1px solid var(--stroke);color:var(--text);border-radius:8px;padding:8px;font:.85rem var(--ui);resize:vertical}
.choice{display:block;width:100%;text-align:left;background:var(--panel2);border:1px solid var(--stroke);border-radius:8px;padding:10px 12px;margin:6px 0 2px;cursor:pointer;color:var(--text);font:700 .88rem var(--ui)}
.choice:hover{background:var(--hover);border-color:var(--yellow)}
.hook{color:var(--dim);font-size:.82rem;margin:0 0 6px 18px}
.bullet{display:flex;gap:7px;margin:3px 0}.bullet .d{color:var(--yellow);font-weight:700}
img.map{max-width:100%;border-radius:8px;border:1px solid var(--stroke);display:block;margin:4px 0}
.gallery img{max-width:100%}
.who{background:var(--panel2);border-radius:8px;padding:7px 10px;margin:4px 0}
.who .nm{font-weight:700}.who .role{color:var(--dim);font-size:.72rem}
.search{width:100%;padding:9px 12px;border-radius:9px;border:1px solid var(--stroke);background:var(--panel2);color:var(--text);font-size:.92rem;margin-bottom:8px}

/* GM screen modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;justify-content:flex-end;z-index:50}
.modal .panel{width:min(560px,94vw);background:var(--bg);border-left:1px solid var(--stroke);height:100%;overflow-y:auto;padding:16px 18px}
.modal .x{float:right;cursor:pointer;background:none;border:none;color:var(--dim);font-size:1.3rem}
.gms h4{color:var(--yellow);font:700 .8rem var(--mono);text-transform:uppercase;margin:14px 0 4px;border-bottom:1px solid var(--stroke);padding-bottom:3px}
.gms p{margin:4px 0;font-size:.86rem}

iframe.guide{width:100%;height:calc(100vh - 150px);border:1px solid var(--stroke);border-radius:10px;background:#fff}

@media(max-width:820px){
  #app.live{grid-template-columns:1fr;grid-template-areas:"top" "main"}
  .side{position:fixed;left:0;top:0;bottom:0;width:230px;z-index:40;transform:translateX(-100%);transition:transform .2s}
  .side.open{transform:none}
  .split{grid-template-columns:1fr}
  .idx{position:static;max-height:none}
  .menu-btn{display:inline-block!important}
  /* Top bar: one compact row that scrolls sideways on a phone — every control
     stays reachable with a swipe instead of being clipped off-screen. */
  .top{height:auto;min-height:52px;padding:8px 12px;gap:12px;overflow-x:auto;
    flex-wrap:nowrap;scrollbar-width:none}
  .top::-webkit-scrollbar{display:none}
  .top>*{flex:0 0 auto}
  .top .title{flex:0 0 auto;font-size:1.05rem}
}
.menu-btn{display:none;background:none;border:none;color:var(--yellow);font-size:1.4rem;cursor:pointer}

/* combat: player-view visibility controls */
.crow.phidden{opacity:.55}
.pvis{align-items:center;border-top:1px dashed var(--stroke);padding-top:6px}
.pvis input.mini{padding:3px 6px}

/* ---------------- Primary tab highlight (first nav item = "Run the Game") ---------------- */
.nav button:first-of-type{color:var(--yellow);border-left:3px solid var(--yellow);border-radius:0 8px 8px 0}
.nav button:first-of-type.active{background:var(--panel)}

/* ---------------- reference chips + detail popovers ---------------- */
.ref{display:inline-flex;align-items:center;gap:4px;background:var(--panel2);border:1px solid var(--stroke);
  border-radius:7px;padding:2px 7px;margin:2px 4px 2px 0;cursor:help;font-size:.8rem;color:var(--text);
  vertical-align:middle;line-height:1.3}
.ref:hover,.ref:focus{outline:none;border-color:var(--cyan);background:var(--hover)}
.ref .ref-g{font-size:.78rem;opacity:.9}
.ref .ref-l{font-weight:600}
.ref-plain{color:var(--text)}
.ref-vehicle:hover,.ref-vehicle:focus{border-color:var(--orange)}
.ref-location:hover,.ref-location:focus{border-color:var(--cyan)}
.ref-item:hover,.ref-item:focus,.ref-char:hover,.ref-char:focus{border-color:var(--yellow)}
.ref-weapon:hover,.ref-weapon:focus{border-color:var(--magenta)}
.ref-cyber:hover,.ref-cyber:focus{border-color:var(--purple)}
.refpop{position:absolute;z-index:60;display:none;width:min(330px,92vw);background:var(--bg);
  border:1px solid var(--cyan2);border-radius:11px;padding:11px 13px;box-shadow:0 12px 40px rgba(0,0,0,.55);font-size:.84rem}
.refpop-h{border-bottom:1px solid var(--stroke);padding-bottom:5px;margin-bottom:6px}
.refpop-t{font-weight:800;font-size:.98rem;line-height:1.25}
.refpop-s{font:700 .64rem var(--mono);text-transform:uppercase;letter-spacing:.5px;color:var(--dim);margin-top:1px}
.refpop-stats{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:6px}
.refpop-kv{display:flex;gap:5px;background:var(--panel2);border-radius:6px;padding:2px 7px;font-size:.76rem}
.refpop-kv .k{color:var(--dim);font-family:var(--mono)} .refpop-kv .v{font-weight:700}
.refpop-kv2{font-size:.8rem;margin:3px 0}.refpop-kv2 .k{color:var(--cyan);font-weight:700;margin-right:4px}
.refpop-d{font-size:.84rem;line-height:1.45;margin:2px 0}
.refpop-x{font-size:.78rem;color:var(--dim);border-top:1px dashed var(--stroke);margin-top:6px;padding-top:5px;line-height:1.4}

/* presence badges */
.pres{display:inline-block;font:700 .58rem var(--mono);text-transform:uppercase;letter-spacing:.5px;
  border:1px solid;border-radius:6px;padding:1px 6px;margin-left:6px;background:rgba(255,255,255,.02);white-space:nowrap}

/* per-beat scene header */
.scene-top{display:flex;flex-wrap:wrap;gap:12px;margin:2px 0 8px}
.scene-cell{flex:1 1 130px;min-width:118px}
.scene-k{font:700 .6rem var(--mono);text-transform:uppercase;letter-spacing:1px;color:var(--faint);margin-bottom:3px}
.scene-v{font-size:.9rem;line-height:1.4}
.scene-setup{font-size:.9rem;line-height:1.5;color:var(--text);background:var(--panel2);border-radius:9px;padding:9px 11px;margin:6px 0}
.scene-cast{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:7px 0 2px}
.scene-cast .scene-k{margin:0 4px 0 0;align-self:center}
.scene-castitem{display:inline-flex;align-items:center}

/* First-time "how to run a fight" walkthrough in the Combat Tracker. */
.helpbox{background:var(--bg2);border:1px solid var(--cyan2);border-radius:12px;padding:10px 14px;margin-bottom:8px}

/* ==================== 2077 SKIN (GM app) ====================
   Chamfered corners, yellow-block active states with black text, Rajdhani
   chrome. Body copy, tables and inputs stay calm: this UI is read mid-session.
   Relies on the tokens (--disp, --cut-*) defined in site.css. */
.brand .t{font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:2px}
.nav button{font-family:var(--disp);font-weight:600;font-size:.86rem;text-transform:uppercase;letter-spacing:.8px;border-radius:0}
.nav button.active,.nav button:first-of-type.active{background:var(--yellow);color:#0a0b0e;clip-path:var(--cut-tr-sm)}
.nav button:first-of-type{border-radius:0}
.nav a.navlink{border-radius:0;font-family:var(--disp);font-weight:600;font-size:.8rem;letter-spacing:.6px}
.top .title{font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:1.5px}
.stepper,.pill,.idx,.hpbox,.ammoline,.det,.stats,.helpbox,.who,.chip,.ref,.refpop,.pres,
input.mini,select.mini,textarea.area,.search,.crow input.init,img.map,iframe.guide{border-radius:0}
.vit .c{border-radius:0}
.idx button{border-radius:0}
.idx button.active{background:var(--yellow);color:#0a0b0e;clip-path:var(--cut-tr-sm);font-weight:700}
.card{border-radius:0;clip-path:var(--cut-tr)}
.card .hd .bar{border-radius:0;width:5px}
.card .hd h3{font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:1px;font-size:.95rem}
h2.view-h{font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:1px}
.button{border-radius:0;clip-path:var(--cut-tr-sm);font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:.8px}
.badge{border-radius:0;font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.readaloud{border-radius:0;border-left:3px solid var(--cyan)}
.cbar{border-radius:0;border-left:4px solid var(--yellow)}
.cbar .rnd{font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:1px}
.crow{border-radius:0;clip-path:var(--cut-tr-sm)}
.crow.turn{box-shadow:0 0 16px rgba(252,238,10,.14)}
.crow .stripe{border-radius:0}
.choice{border-radius:0;clip-path:var(--cut-tr-sm);font-family:var(--disp);font-weight:700}
.modal .panel{border-left:2px solid var(--yellow)}
.gms h4{font-family:var(--disp);font-weight:600;letter-spacing:1.5px}
.scene-setup{border-radius:0;border-left:3px solid var(--stroke)}
.beatchip b{color:var(--yellow)}
.helpbox>summary{cursor:pointer;font-weight:700;color:var(--cyan);list-style:none}
.helpbox>summary::-webkit-details-marker{display:none}
.helpbox>summary::before{content:'▸ ';color:var(--cyan)}
.helpbox[open]>summary::before{content:'▾ '}
.helpbox[open]>summary{margin-bottom:2px}
/* Collapsible "how to run this fight" encounter panel — orange to set it apart
   from the cyan first-time walkthrough. */
.helpbox.enc{border-color:var(--orange)}
.helpbox.enc>summary,.helpbox.enc>summary::before{color:var(--orange)}

/* ============================================================ DISPLAY PREFS
   Opt-in small-screen tweaks toggled from the "⚙ Display" panel. Each is gated
   by a class on #app, so with all off the layout is exactly as before. */

/* Content text scaling (content area only; menus stay compact). */
.main{zoom:var(--font-scale,1)}

/* Collapsible sections: fold a card by clicking its header. */
.card .hd .cchev{margin-left:auto;color:var(--faint);font-size:.8rem;display:none;transition:transform .12s}
.ui-collapsible .card .hd{cursor:pointer}
.ui-collapsible .card .hd .cchev{display:inline-block}
.ui-collapsible .card.collapsed .hd .cchev{transform:rotate(-90deg)}
.ui-collapsible .card.collapsed .bd{display:none}
.ui-collapsible .card.collapsed{margin:6px 0}
.collapse-ctl{display:none}
.ui-collapsible .collapse-ctl{display:inline-block}

/* Compact density: trim padding/margins and text a touch to fit more. */
.ui-compact .main{padding:10px 12px 40px}
.ui-compact .card{margin:6px 0;border-radius:9px}
.ui-compact .card .hd{padding:8px 11px 3px}
.ui-compact .card .bd{padding:3px 11px 9px}
.ui-compact .readaloud{padding:9px 11px;margin:7px 0}
.ui-compact .readaloud .tx{font-size:13.5px;line-height:1.42}
.ui-compact .small{font-size:.8rem}
.ui-compact .who{padding:5px 8px;margin:3px 0}
.ui-compact table.tbl{font-size:.8rem}
.ui-compact .split{gap:10px;grid-template-columns:210px 1fr}
.ui-compact .scene-setup{padding:7px 9px;margin:4px 0}

/* Slim icon sidebar: collapse the nav to a 64px icon rail; hover/tap expands. */
.nvi{display:none}
#app.live.ui-slim-nav{grid-template-columns:64px 1fr;position:relative}
.ui-slim-nav .side{width:64px;overflow-x:hidden;z-index:60}
.ui-slim-nav .nvl{display:none}
.ui-slim-nav .nvi{display:inline-block;width:100%;text-align:center;font-size:1.15rem}
.ui-slim-nav .nav button{padding:11px 4px;text-align:center}
.ui-slim-nav .nav .navgrp,.ui-slim-nav .brand .t,.ui-slim-nav .brand .s,.ui-slim-nav .beatchip{display:none}
.ui-slim-nav .brand{padding:14px 4px;text-align:center}
.ui-slim-nav .brand::before{content:'🧥';font-size:1.4rem}
.ui-slim-nav .nav a.navlink{overflow:hidden;white-space:nowrap;text-align:center;padding:9px 4px}
.ui-slim-nav .nav .gmscreen{font-size:0}
.ui-slim-nav .nav .gmscreen::before{content:'⧉';font-size:1.15rem}
/* Hover (or tap-focus) expands the rail into an absolute overlay so it can grow
   past its 64px grid track without shifting the content column. */
.ui-slim-nav .side:hover,.ui-slim-nav .side:focus-within{position:absolute;top:0;bottom:0;left:0;width:230px;box-shadow:5px 0 26px rgba(0,0,0,.55)}
.ui-slim-nav .side:hover .nvl,.ui-slim-nav .side:focus-within .nvl{display:inline}
.ui-slim-nav .side:hover .nvi,.ui-slim-nav .side:focus-within .nvi{display:none}
.ui-slim-nav .side:hover .nav button,.ui-slim-nav .side:focus-within .nav button{text-align:left;padding:9px 12px}
.ui-slim-nav .side:hover .navgrp,.ui-slim-nav .side:focus-within .navgrp{display:block}
.ui-slim-nav .side:hover .brand .t,.ui-slim-nav .side:focus-within .brand .t{display:block}
.ui-slim-nav .side:hover .brand .s,.ui-slim-nav .side:focus-within .brand .s{display:block}
.ui-slim-nav .side:hover .brand::before,.ui-slim-nav .side:focus-within .brand::before{content:''}
.ui-slim-nav .side:hover .brand,.ui-slim-nav .side:focus-within .brand{text-align:left;padding:18px 16px 10px}
.ui-slim-nav .side:hover .nav a.navlink,.ui-slim-nav .side:focus-within .nav a.navlink{text-align:left;padding:8px 12px}
.ui-slim-nav .side:hover .nav .gmscreen,.ui-slim-nav .side:focus-within .nav .gmscreen{font-size:.86rem}
.ui-slim-nav .side:hover .nav .gmscreen::before,.ui-slim-nav .side:focus-within .nav .gmscreen::before{content:''}

/* ============================================================ 11-INCH MODE
   One-switch bundle (.ui-eleven) for a small Chromebook. applyUiPrefs() also
   sets ui-compact + ui-slim-nav alongside it; the rules below add the rest:
   the top-bar text-size buttons, a slim auto-hiding top bar, and a touch more
   density on the big content views. */

/* Text-size stepper: lives in the top bar, but only surfaces in 11-inch mode. */
.text-ctl{display:none}
.ui-eleven .text-ctl{display:inline-flex}
.ui-eleven .text-ctl button{width:22px;height:22px;font-size:.72rem}

/* A little extra density on the big content views (beats / NPCs / rules), on
   top of compact mode, so more fits between scrolls. */
.ui-eleven .main{padding:8px 12px 40px}
.ui-eleven .card .hd h3{font-size:.86rem}
.ui-eleven .card .bd{font-size:.9rem}
.ui-eleven .hook{margin-bottom:4px}
.ui-eleven .bullet{margin:2px 0}
.ui-eleven .idx{padding:6px}
.ui-eleven .idx button{padding:5px 8px;font-size:.78rem}
.ui-eleven h2.view-h{font-size:1.05rem;margin:2px 0 6px}

/* Slim, auto-hiding top bar (desktop width only; under 820px the bar keeps its
   normal mobile flow). The grid's top ROW collapses so the reclaimed height goes
   to the content and never overlaps the combat sticky toolbar. It snaps rather
   than glides (Chrome won't transition grid-template-rows). onMainScroll toggles
   .chrome-hidden as the GM scrolls. */
@media(min-width:821px){
  #app.live.ui-eleven{grid-template-rows:42px 1fr}
  #app.live.ui-eleven.chrome-hidden{grid-template-rows:0 1fr}
  .ui-eleven .top{height:auto;min-height:0;overflow:hidden;padding:0 12px;gap:10px}
  .ui-eleven .top .title{font-size:1rem}
  .ui-eleven .top .ctl{font-size:.66rem;gap:4px}
  .ui-eleven .top .stepper button{width:22px;height:22px}
  .ui-eleven .top .lnk{font-size:.68rem}
}

/* Settings panel rows. */
.setrow{display:flex;align-items:flex-start;gap:10px;padding:10px 2px;border-bottom:1px solid var(--stroke)}
.setrow input[type=checkbox]{margin-top:3px;width:16px;height:16px;flex:none}

/* ---------------- polish: input focus + inner-scroller scrollbars ---------------- */
/* Text inputs show a quiet cyan edge when focused (matches the 2077 skin). */
.search:focus,input.mini:focus,select.mini:focus,textarea.area:focus,
.crow input.init:focus,.crow input.nm:focus{outline:none;border-color:var(--cyan2)}
.crow input.nm:focus{box-shadow:inset 0 -1px 0 var(--cyan2)}
/* Slim scrollbars on the app's inner scroll areas (sidebar, index, modals). */
.side,.idx,.modal .panel{scrollbar-width:thin}
.side::-webkit-scrollbar,.idx::-webkit-scrollbar,.modal .panel::-webkit-scrollbar{width:8px}

/* Crew sheet: sections that always fold/unfold on header click (independent of
   the app-wide collapsible-sections display mode). State is remembered per PC. */
.card.coll>.hd{cursor:pointer}
.card.coll>.hd .cchev{display:inline-block}
.card.coll.collapsed>.hd .cchev{transform:rotate(-90deg)}
.card.coll.collapsed>.bd{display:none}
.card.coll.collapsed{margin:6px 0}

/* ============================ Battle Map (GM only) ============================
   The interactive token-placement surface. Players get a static overlay on their
   tracker; only the GM sees the drag cursor, ✕ remove buttons and the tray. */
/* The stage shrink-wraps the image (inline-block) so the token layer (inset:0)
   always maps exactly onto the picture — that's what keeps tokens aligned as the
   map is resized. The image is bounded by the pane width AND the viewport height,
   so it fits the screen without page-scroll; fullscreen (below) lifts the height. */
.bm-stage{position:relative;display:inline-block;vertical-align:top;line-height:0;max-width:100%;
  margin-top:4px;border:2px solid var(--stroke);border-radius:8px;overflow:hidden;background:#05070b;
  user-select:none;touch-action:none}
.bm-stage img{display:block;width:auto;height:auto;max-width:100%;max-height:78vh}
.bm-tokens{position:absolute;inset:0}
.bm-tok{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;
  align-items:center;gap:2px;cursor:grab;touch-action:none;z-index:1}
.bm-tok.drag{cursor:grabbing;z-index:3}
.bm-tok.turn{z-index:2}
.bm-tok .dot{width:18px;height:18px;border-radius:50%;border:2px solid #05070b;
  box-shadow:0 0 0 1px rgba(255,255,255,.55),0 1px 6px rgba(0,0,0,.7)}
.bm-tok.turn .dot{box-shadow:0 0 0 2px var(--yellow),0 0 10px rgba(252,238,10,.7)}
.bm-tok.thidden{opacity:.5}
.bm-tok .tnm{font:700 .62rem/1 var(--mono);text-transform:uppercase;letter-spacing:.5px;
  color:var(--text);background:rgba(6,8,12,.82);padding:2px 5px;border-radius:3px;
  white-space:nowrap;max-width:150px;overflow:hidden;text-overflow:ellipsis}
.bm-tok .thb{position:absolute;top:-8px;right:-8px;font-size:.62rem;line-height:1;
  filter:drop-shadow(0 0 2px #000);pointer-events:none}
/* Per-token popover: colour swatches + hide/remove (opened by clicking a token). */
.bm-pop{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);z-index:9;
  background:var(--panel);border:1px solid var(--stroke);border-radius:8px;padding:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.6);cursor:default;min-width:150px}
.bm-sw{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-bottom:8px}
.bm-sw .sw{width:22px;height:22px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0}
.bm-sw .sw.on{border-color:var(--text);box-shadow:0 0 0 1px var(--bg)}
.bm-sw .sw.def{background:var(--panel2);color:var(--dim);font-size:.72rem;line-height:1}
.bm-popbtn{display:block;width:100%;text-align:left;background:var(--panel2);border:1px solid var(--stroke);
  border-radius:6px;padding:6px 8px;margin-top:5px;color:var(--text);font-size:.78rem;cursor:pointer}
.bm-popbtn:hover{border-color:var(--cyan2)}
.bm-popbtn.rm{color:var(--red)}
.bm-popnote{font-size:.72rem;color:var(--faint);padding:2px 2px 4px}
.bm-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:4px 0 2px}
.bm-bar{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.bm-tray{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}
.bm-tray .lbl{font:700 .68rem/1 var(--mono);text-transform:uppercase;letter-spacing:1px;color:var(--faint)}
.bm-chip{display:inline-flex;align-items:center;gap:6px;background:var(--panel);
  border:1px solid var(--stroke);border-radius:14px;padding:4px 10px;color:var(--text);
  font-size:.8rem;cursor:pointer}
.bm-chip:hover{border-color:var(--cyan2)}
.bm-chip .d{width:10px;height:10px;border-radius:50%;display:inline-block}
.bm-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:10px}
.bm-pick{display:flex;flex-direction:column;gap:6px;padding:6px;background:var(--panel);
  border:1px solid var(--stroke);border-radius:8px;color:var(--text);cursor:pointer;
  font-size:.78rem;text-align:center}
.bm-pick:hover{border-color:var(--cyan2)}
.bm-pick img{width:100%;height:90px;object-fit:cover;border-radius:5px;display:block}