/* The 2.0 systems' shared places on the page: the bar's extra figures (#barX), their part of the selection panel (#selX),
   their trays (#dockX), their part of the end screen (#endX) and of the manual (#howX). Each system's own styles live in
   this file under its own heading, in the game's own tokens (css/game.css :root). */
#barX{display:flex;align-items:center;gap:var(--gut);min-width:0}
#barX:empty{display:none}
/* the bar fits itself (js/x-bar.js). Above a phone's width nothing in the row shrinks below what it says; while the row is
   wider than the window the script sets fit1, fit2 and so on, each adding to the last: the tide's gauge narrows first, then
   the small print goes, the figures stay to the end. The last step lets the row squeeze as it used to, so the
   buttons at its right end can never leave the window. */
@media (min-width:721px){
  #bar:not(.fit16)>*,#bar:not(.fit16) #barX>*,#bar:not(.fit16) #tideBox>*,#bar:not(.fit16) .stat>*{flex-shrink:0}
  #bar.fit1 #tideBox canvas{max-width:180px}
  #bar.fit2 #tideBox canvas{max-width:150px}
  #bar.fit3 #tideBox canvas{max-width:120px}
  #bar.fit4 #cpInc{display:none}
  #bar.fit5 #tideBox b{display:none}
  #bar.fit6 #supplied{display:none}
  #bar.fit7 #tideBox small{display:none}
  #bar.fit8 #income{display:none}
  #bar.fit9 .stat.hideNarrow{display:none}
  #bar.fit10{gap:8px} #bar.fit10 #barX{gap:10px}
  #bar.fit11 #sideTag span,#bar.fit11 .vsep{display:none}
  #bar.fit12 #sitBtn{display:none}
  #bar.fit13 #tideBox{display:none}
  #bar.fit14 #clock .yr,#bar.fit14 #netChip span{display:none}
  #bar.fit15 #muteBtn{display:none}
}
#selX{padding:0 14px 10px}
#selX[hidden]{display:none}
#dockX{position:absolute;left:var(--scr-pad);bottom:var(--scr-pad);z-index:5;display:flex;flex-direction:column;gap:8px;pointer-events:none}
#dockX>*{pointer-events:auto}
#endX:empty{display:none}
html.aiming #map canvas{cursor:crosshair}
/* a system's section of the selection panel: a heading in the orders' small capitals, then rows as the recruiting list has
   them (a name, a line saying what it does, the button with its price) */
#sel:has(#selX:not([hidden])){max-height:min(74vh,740px)}
#selX{overflow:auto;max-height:34vh;overscroll-behavior:contain}
.xsec{display:flex;flex-direction:column;gap:5px;padding-top:8px;border-top:1px dotted var(--hair-2)}
.xsec+.xsec{margin-top:8px}
.xsec .note{margin:0}
.rec.xrec{padding:5px 8px;gap:0 10px}
.rec.xrec b{font-size:13.5px}
.rec.xrec small{font-size:11.5px;line-height:1.25}
.rec.xrec .btn{height:30px;min-width:46px;padding:0 8px}
.xd{font:600 10px/1 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--paper-faint);margin-left:4px}
/* something running: its name in the poster voice, the time it has left, and a line running out under it */
.xrun{display:grid;grid-template-columns:1fr auto;gap:3px 10px;align-items:baseline;padding:7px 9px;border:1px solid var(--pencil,#ae3322);background:var(--sel-tint)}
.xrun b{font:400 19px/1 var(--f-display);letter-spacing:.05em;color:var(--brass-2)}
.xrun span{font:600 11px/1 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--paper-dim)}
.xrun i{grid-column:1/3;height:3px;background:var(--ink-4)}
.xrun i em{display:block;height:100%;background:var(--pencil,#ae3322)}
.xrun small{grid-column:1/3;font:500 12px/1.3 var(--f-ui);color:var(--paper-dim)}