/* The command deck's tabs: people to hire, departments to open, research as
   a tree, with whatever is in progress at the top of each. Drawn by deck.js. */
.dk-h {gap:8px}
.dk-seatbar {overflow:hidden}
.dk-seatbar i {display:block;height:100%;transition:width .3s}
.dk-seatbar.full i {background:#c0271c}
/* Extend the office: a quiet row under the desk bar, stronger when the
   office is full; while it is being built, it fills as it goes */
.dk-ext {
  font:inherit;font-size:12.5px;text-align:left}
.dk-ext i {color:#6a7b98}
.dk-ext-name {flex:1}
.dk-ext.full i, .dk-ext.full .dk-ext-meta {color:var(--dk-team, #d9261c)}
.dk-ext.short {opacity:.55}
.dk-ext:focus-visible {outline-offset:2px}

/* Cards: one per role or department. The whole card is the action. */
.dk-card {
  font:inherit;
  transition:border-color .12s, box-shadow .12s, transform .08s}
.dk-card:active:not(.locked) {transform:translateY(1px)}
.dk-card.locked .dk-face, .dk-card.locked .dk-tile {filter:grayscale(1);opacity:.55}
.dk-face {border-radius:50%;box-shadow:0 0 0 2px var(--dk-team, #d9261c);background:#e9edf6}
.dk-tile {justify-content:center;font-size:20px;
 }
.dk-main {min-width:0;display:flex;flex-direction:column;gap:2px}
.dk-name {font:600 13px/1.25 var(--font-d);color:#0a0a0a;overflow:hidden;text-overflow:ellipsis}
.dk-count {vertical-align:1px}
.dk-desc {font:400 11px/1.35 var(--font-u);color:#586981}
.dk-desc .ph-bold, .dk-desc .ph-fill {font-size:11px;vertical-align:-1px;margin-right:3px}
.dk-side {white-space:nowrap}
/* Not enough cash yet: a quiet price, not an alarm */
.dk-sub {color:#586981}
.dk-show {display:inline-flex;align-items:center;gap:3px;font:600 11px var(--font-u)}

/* Hire and Buildings: squares, three to a row. What a square does, costs and
   needs shows in the line under the grid when it is pointed at. */
.dk-grid {grid-template-columns:repeat(3, minmax(0, 1fr))}
.dk-grid .dk-card {flex-direction:column;gap:5px}
.dk-grid .dk-face, .dk-grid .dk-tile {flex:0 0 auto}
/* Departments show their building */
.dk-tile img {display:none}
.dk-tile.pic i {display:none}
.dk-tile.pic img {display:block;width:72px;height:72px;object-fit:contain}
/* Going up (or being researched): the square fills from the ground in your colour */
.dk-rise {position:absolute;left:0;right:0;bottom:0;height:calc(var(--p, 0) * 1%);pointer-events:none;
  background:color-mix(in srgb, var(--dk-team, #d9261c) 28%, transparent);border-top:2px solid var(--dk-team, #d9261c);transition:height .3s}
.dk-card:not(.rising) .dk-rise {display:none}
.dk-card.rising .dk-tile img {filter:grayscale(.55);opacity:.8}
.dk-grid .dk-main {align-items:center}
.dk-grid .dk-name {-webkit-line-clamp:2;-webkit-box-orient:vertical}
.dk-grid .dk-count {top:6px}
.dk-grid .dk-card.locked .dk-desc {display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:10px;line-height:1.3}
.dk-grid .dk-side {justify-content:center;margin-top:auto}
.dk-grid .dk-card.locked .dk-side {display:none}

/* In progress: training, construction, research */
.dk-bar {height:4px;margin-top:5px;border-radius:2px;background:#e3e9f3;overflow:hidden}
.dk-bar i {display:block;height:100%;width:0;background:var(--dk-team, #d9261c);border-radius:2px}

/* Team */
.dk-member {gap:9px}
.dk-mring {position:relative}
.dk-member.training .dk-face {position:absolute;inset:3px}
.dk-fire {cursor:pointer}
/* Letting someone go: the menu that asks first */
.dk-menu {position:fixed;z-index:60;min-width:228px;padding:6px;border-radius:var(--r-md);background:var(--v2-black);border:1px solid var(--v2-line);
  box-shadow:none;font:500 12.5px/1.3 var(--font-u);color:#fff}
.dk-menu[hidden] {display:none}
.dk-menu-head {padding:6px 9px 9px;margin-bottom:4px;border-bottom:1px solid var(--v2-line)}
.dk-menu-head b {display:block;font:600 13px/1.3 var(--font-d)}
.dk-menu-head span {display:block;margin-top:2px;font-size:11.5px;font-weight:400;color:var(--v2-grey)}
.dk-menu-item {display:flex;align-items:center;gap:9px;width:100%;padding:8px 9px;border:0;border-radius:var(--r-sm);background:transparent;
  color:#fff;font:inherit;text-align:left;cursor:pointer}
.dk-menu-item i {font-size:15px}
.dk-menu-item:hover, .dk-menu-item:focus-visible {background:var(--v2-raised);outline:none}
.dk-menu-item.danger {color:var(--v2-red-hi)}
.dk-menu-item.danger:hover, .dk-menu-item.danger:focus-visible {background:rgba(239,58,45,.14)}

/* A small action in a section header */
.dk-link {cursor:pointer}
.dk-gate button {cursor:pointer}
.dk-go {padding:7px 14px;border:0;border-radius:var(--r-md);background:#d9261c;color:#fff;font:600 12px var(--font-u);cursor:pointer}
.dk-go:disabled {background:var(--v2-raised);color:var(--v2-dim);cursor:default}

/* The whole tech tree, over the city */
.tt-back {position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.72)}
.tt-back[hidden] {display:none}
.tt-panel {display:flex;flex-direction:column;width:min(1240px,100%);height:min(780px,100%);background:var(--v2-panel);border:0;border-radius:var(--r-lg);box-shadow:none;overflow:hidden}
.tt-head {display:flex;align-items:center;gap:16px;padding:14px 18px}
.tt-head h2 {font:700 16px var(--font-d);color:#fff}
.tt-legend {display:flex;flex-wrap:wrap;gap:12px;margin-right:auto}
.tt-key {display:inline-flex;align-items:center;gap:5px;font:500 11px var(--font-u);color:var(--v2-grey)}
.tt-close {flex:0 0 auto;width:30px;height:30px;border:0;border-radius:var(--r-sm);background:var(--v2-raised);color:#fff;cursor:pointer;font-size:14px}
.tt-close:hover {background:var(--v2-hover)}
.tt-scroll {flex:1;min-height:0;overflow:auto;display:flex}
.tt-sizer {position:relative;flex:0 0 auto;margin:auto}
.tt-board {position:absolute;transform-origin:0 0}
.tt-links {position:absolute;pointer-events:none;overflow:visible}
.tt-links path {fill:none;stroke:#3a3a3a;stroke-width:2}
.tt-links path.lit {stroke:var(--dk-team, #d9261c)}
.tt-node {position:absolute;display:flex;align-items:center;gap:9px;width:152px;height:64px;padding:6px 8px 6px 6px;background:var(--v2-raised);border:1px solid transparent;border-radius:var(--r-md);
  text-align:left;cursor:pointer;font:inherit;color:#fff;overflow:hidden;transition:border-color .12s, box-shadow .12s}
.tt-node:hover {border-color:var(--v2-grey);box-shadow:none}
.tt-node.sel {border-color:#fff;box-shadow:0 0 0 1px #fff}
.tt-node:focus-visible {outline-offset:2px}
.tt-node .dk-name {font-size:12px;line-height:1.2;color:#fff}
.tt-node .dk-desc {color:var(--v2-grey);font-size:10.5px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tt-pic {flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:10px;font-size:20px;
  background:color-mix(in srgb, var(--dk-team, #d9261c) 16%, var(--v2-black))}
.tt-u .tt-pic {border-radius:50%;background:none}
.tt-u .tt-pic .dk-face {height:44px}
.tt-b .tt-pic img {display:none}
.tt-b .tt-pic.has {background:var(--v2-black)}
.tt-b .tt-pic.has i {display:none}
.tt-b .tt-pic.has img {display:block;width:48px;height:48px;object-fit:contain}
.tt-node.done {border-color:color-mix(in srgb, var(--dk-team, #d9261c) 60%, transparent);background:color-mix(in srgb, var(--dk-team, #d9261c) 14%, var(--v2-raised))}
.tt-node.locked {background:var(--v2-panel);border-color:var(--v2-line)}
.tt-node.locked .tt-pic {filter:grayscale(1);opacity:.55}
.tt-node.locked .dk-name {color:var(--v2-grey)}
.tt-node.short .dk-desc {color:var(--v2-dim)}
.tt-node .dk-nbar {position:absolute;left:0;right:0;bottom:0;height:3px}
.tt-node .dk-nbar i {display:block;height:100%;background:var(--dk-team, #d9261c)}
.tt-detail {padding:12px 18px 14px}
.tt-detail .dk-name {font-size:14px;color:#fff}
.tt-detail .dk-desc {margin-top:3px;font-size:12px;color:var(--v2-grey)}
.tt-kind {margin-left:6px;padding:2px 7px;border-radius:999px;background:var(--v2-raised);color:var(--v2-grey);font:600 10px var(--font-u);vertical-align:2px}
.tt-detail .dk-row {display:flex;align-items:center;gap:12px;margin-top:8px}
.tt-detail .dk-row .dk-sub {margin-right:auto;font-size:12px;color:var(--v2-grey)}
.tt-detail.empty .dk-row {display:none}

/* Tabs carry what is going on inside them, without taking room from their
   names: a count in a small bubble at the corner; research under way as a
   line filling along the tab's foot */
#cwCommandDeck .panel-tab, .panel-tab {position:relative}
#cwCommandDeck .panel-tab .dk-badge, .panel-tab .dk-badge {position:absolute;top:4px;right:2px;min-width:15px;height:15px;padding:0 4px;border-radius:8px;background:#d9261c;color:#fff;
  font:700 9px/15px var(--font-u);letter-spacing:0;text-align:center;animation:dkPop .25s cubic-bezier(.2,.8,.2,1)}
#cwCommandDeck .panel-tab .dk-badge:empty, .panel-tab .dk-badge:empty {display:none}
#cwCommandDeck .panel-tab.dk-busy::after, .panel-tab.dk-busy::after {content:"";position:absolute;left:0;bottom:3px;height:2px;width:calc(var(--p, 0) * 1%);background:#fff;transition:width .3s ease}
@keyframes dkPop {from {opacity:0;transform:scale(.6)}}

/* What the money figures mean: an i at the top right of the figures */
#cwCommandDeck #statRail.dk-has-info {position:relative}
.dk-info-btn {position:absolute;top:8px;right:-6px;display:flex;align-items:center;justify-content:center;width:22px;height:22px;
  border:0;border-radius:50%;background:transparent;color:#b9c8e2;font-size:14px;cursor:pointer}
.dk-info-btn:hover, .dk-info-btn[aria-expanded="true"] {background:#ffffff1f;color:#fff}
.dk-info-btn:focus-visible {outline:2px solid #d6ee80;outline-offset:1px}
.dk-money {position:absolute;top:calc(100% + 12px);right:-10px;z-index:40;width:300px;padding:2px 0;border-radius:12px;
  background:#fff;border:1px solid #e4e8ef;box-shadow:0 20px 44px #0f1d3326, 0 1px 3px #0f1d3314;color:#0a0a0a;text-align:left}
.dk-money::before {content:"";position:absolute;top:-7px;right:23px;width:12px;height:12px;background:#fff;
  border-left:1px solid #e4e8ef;border-top:1px solid #e4e8ef;transform:rotate(45deg)}
.dk-money[hidden] {display:none}
.dk-mrow {display:grid;grid-template-columns:20px 1fr;gap:12px;padding:15px 18px}
.dk-mrow + .dk-mrow {border-top:1px solid #edf0f5}
.dk-mico {font-size:19px;line-height:1;color:#0a0a0a}
.dk-mbody {min-width:0}
.dk-mbody b {display:block;margin-top:2px;font:600 10.5px/1.2 var(--font-u);letter-spacing:.08em;text-transform:uppercase;color:#586981}
.dk-mbody p {margin:6px 0 0;font:400 12.5px/1.5 var(--font-u);color:#2b3950}
.dk-mbody p:empty {display:none}
.dk-note {display:flex;align-items:center;gap:6px;margin-top:10px;font:500 12px/1.3 var(--font-u);color:#0a0a0a}
.dk-note i {font-size:15px}
.dk-flow {display:grid;grid-template-columns:58px 1fr 40px;align-items:center;gap:10px;margin-top:11px;
  font:500 11.5px/1.2 var(--font-u);color:#586981}
.dk-flow + .dk-flow {margin-top:7px}
.dk-flow-t {height:4px;border-radius:2px;background:#edf0f5;overflow:hidden}
.dk-flow-t i {display:block;height:100%;width:0;border-radius:2px;transition:width .35s}
.dk-flow.in .dk-flow-t i {background:#0a0a0a}
.dk-flow.out .dk-flow-t i {background:#76839a}
.dk-flow-v {text-align:right;color:#0a0a0a;font-weight:600;font-variant-numeric:tabular-nums}
.dk-goal {position:relative;height:4px;margin-top:12px;border-radius:2px;background:#edf0f5}
.dk-goal i {position:absolute;left:0;top:0;bottom:0;width:0;border-radius:2px;background:#0a0a0a;transition:width .35s}
.dk-goal-mark {position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;border-radius:1px;background:#0a0a0a}
.dk-goal-mark[hidden] {display:none}
.dk-goal-v {margin-top:8px;font:500 11.5px/1.3 var(--font-u);color:#586981;font-variant-numeric:tabular-nums}
/* The header sits above the panel below it, so its pop-ups are not covered */
#cwCommandDeck #topBar {z-index:11}

/* The whole city at a glance: a card over the tabs, like the map */
#cwCommandDeck .dk-accounts {display:none}
#cwCommandDeck.accounts-open > .dk-accounts {display:flex;flex-direction:column;position:absolute;left:0;right:0;top:calc(var(--dk-acc-top, 140px) + 6px);bottom:0;z-index:30;
  padding:14px 12px 8px}
.acc-head {margin:0 4px 11px}
.acc-total {flex:1}
.acc-close {align-self:center;width:26px;height:26px;cursor:pointer;font-size:13px}
.acc-bar {display:flex;gap:2px;overflow:hidden}
.acc-bar i {min-width:3px}
.acc-bar i.acc-open {background:#dfe5ef}
.acc-tabs {margin:0 0 8px}
.acc-tab {
  cursor:pointer}
.acc-list {flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;margin:0 -4px;scrollbar-width:thin;scrollbar-color:#c9d3e3 transparent}
.acc-row {width:100%;
  font:inherit;cursor:pointer}
.acc-sw {grid-row:1 / span 2}
.acc-main {display:flex;flex-direction:column;min-width:0}
.acc-name {white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acc-sub {white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acc-val {grid-column:3;grid-row:1;justify-self:end}
.acc-who {grid-column:3;grid-row:2;justify-self:end;max-width:110px;white-space:nowrap}
.acc-who span {overflow:hidden;text-overflow:ellipsis}
.acc-dot {flex:0 0 7px;height:7px}
.acc-who.open .acc-dot {box-shadow:inset 0 0 0 1.4px #8a96aa}
.acc-empty {padding:22px 10px;text-align:center;font-size:12px;color:#6a7b98}
.acc-empty[hidden] {display:none}

/* The month, under the company's name: a ring filling as it goes */
.dk-month {align-items:center;gap:6px}
.dk-month-ring {--p:0;flex:0 0 11px;width:11px;height:11px;border-radius:50%;
  background:conic-gradient(#d6ee80 calc(var(--p) * 1%), #ffffff26 0);
  -webkit-mask:radial-gradient(circle, transparent 2.5px, #000 3px);mask:radial-gradient(circle, transparent 2.5px, #000 3px)}
#cwCommandDeck #companyChip {flex-direction:column;align-items:flex-start;justify-content:center}
/* Payday: what came in and went out, beside the cash, fading */
.dk-payday {margin-left:6px;opacity:0;transition:opacity .6s ease}
.dk-payday.show {opacity:1;transition:opacity .15s ease}
.dk-payday.up {color:#d6ee80}
.dk-payday.down {color:#ffb4ab}

/* ===========================================================================
   The deck on black: figures and headings in Futura Bold, labels in small
   bold capitals, lists as rows; slightly rounded, faces in circles
   =========================================================================== */
/* ---- Command deck ------------------------------------------------------- */
#cwCommandDeck{height:auto!important;max-height:calc((100dvh - 32px)/var(--cw-ui-scale,1))!important;background:var(--v2-black)!important;
  clip-path:inset(0 round var(--r-lg))}
#cwCommandDeck *{box-shadow:none!important}
@media (max-width:520px){
  #cwCommandDeck{clip-path:inset(0 round 0 0 var(--r-lg) var(--r-lg))}
  #cwCommandDeck #topBar{padding-top:calc(14px + env(safe-area-inset-top))!important}
}
#cwCommandDeck #exitGameBtn{box-shadow:inset 0 0 0 1px var(--v2-red)!important}
/* the header: logo, company and month, the few buttons, then the three figures and the race */
#cwCommandDeck #topBar{display:grid!important;grid-template-columns:minmax(0,1fr) repeat(5,auto);column-gap:2px;row-gap:14px;
  height:auto!important;padding:16px 16px 14px!important;background:var(--v2-black)!important;border:0!important;border-radius:0!important;
  backdrop-filter:none!important}
/* no logo up here: the name leads (the logo stays in the page, hidden: the headquarters board reads it) */
#cwCommandDeck #cwCompanyLogo{display:none!important}
#cwCommandDeck #companyChip{padding:0!important;margin:0!important;min-width:0}
#cwCommandDeck #companyChip::after,#cwCommandDeck #companyChip .brand-dot{display:none!important}
#cwCommandDeck #companyName{max-width:none!important;color:#fff!important;font:700 13px/1.15 var(--v2-f)!important;letter-spacing:.04em!important;text-transform:uppercase}
/* the name keeps to its column (cut short with an ellipsis) instead of running under the buttons */
#cwCommandDeck #companyName{align-self:stretch;min-width:0}
@media (max-width:520px){#cwCommandDeck #companyName{font-size:12px!important;letter-spacing:.03em!important}}
#cwCommandDeck .dk-month{margin-top:3px;color:var(--v2-grey)!important;font:600 9.5px/1 var(--v2-f)!important;letter-spacing:.1em;text-transform:uppercase}
#cwCommandDeck .dk-month i,#cwCommandDeck .dk-month svg,#cwCommandDeck .dk-month canvas{display:none}
#cwCommandDeck #topBar .hud-btn{width:28px!important;height:28px!important;flex:0 0 28px!important;padding:0!important;border-radius:var(--r-sm);background:transparent!important;color:var(--v2-grey)!important;font-size:15px!important}
#cwCommandDeck #topBar .hud-btn:hover{background:var(--v2-raised)!important;color:#fff!important}
#cwCommandDeck #topBar .hud-btn.on{color:#fff!important}
#cwCommandDeck #greyBtn #greyLabel{display:none!important}
/* the four figures under a hairline, with room between the line and the labels */
#cwCommandDeck #statRail{grid-column:1/-1;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 10px;padding:12px 0 0!important}
#cwCommandDeck #statRail .stat-group{padding:0!important;display:block!important;min-width:0}
#cwCommandDeck #statRail .stat-group::before{display:none!important}
#cwCommandDeck #statRail .stat-icon,#cwCommandDeck .dk-info-btn{display:none!important}
#cwCommandDeck #statRail .stat-group[data-c="net"],#cwCommandDeck #statRail .stat-group[data-c="won"],#cwCommandDeck #statRail .stat-group[data-c="free"]{display:none!important}
#cwCommandDeck .stat-label{display:flex;gap:6px;align-items:baseline;color:var(--v2-grey)!important;font:700 9px/1.2 var(--v2-f)!important;letter-spacing:.12em!important;text-transform:uppercase}
#cwCommandDeck .stat-value,#cwCommandDeck #statRail #winCondDisplay{margin-top:5px;color:#fff!important;font:700 18px/1 var(--v2-f)!important;letter-spacing:-.01em!important}
#cwCommandDeck #statRail .stat-group[data-c="burn"] .stat-value{color:var(--v2-red-hi)!important}
#cwCommandDeck #statRail .stat-value[style*="--bad"]{color:var(--v2-red-hi)!important}
/* payday: for a moment the Cash label reads what came in or went out, in its place,
   so four figures to a row never collide */
#cwCommandDeck #statRail .stat-label{position:relative}
#cwCommandDeck .dk-payday{position:absolute;left:0;top:0;margin:0!important;padding-right:6px;background:var(--v2-black);font:700 9px/1.2 var(--v2-f)!important;letter-spacing:.06em;white-space:nowrap;pointer-events:none}
#cwCommandDeck .dk-payday.down{color:var(--v2-red-hi)!important}
#cwCommandDeck .dk-payday.up{color:var(--v2-gain)!important}
/* the fourth figure, Share (or the race's clock), opens the scores below the figures */
#cwCommandDeck #winCondGroup{position:relative;cursor:pointer;border-radius:var(--r-sm)}
#cwCommandDeck #winCondGroup:hover .stat-label,#cwCommandDeck #winCondGroup.open .stat-label{color:#fff!important}
#cwCommandDeck #winCondGroup:focus-visible{outline:2px solid #fff;outline-offset:3px}
.v2-caret{position:absolute;top:0;right:0;font-size:10px;color:var(--v2-grey);transition:transform .2s ease}
#winCondGroup:hover .v2-caret,#winCondGroup.open .v2-caret{color:#fff}
#winCondGroup.open .v2-caret{transform:rotate(180deg)}
.v2-scores{display:grid;grid-template-rows:1fr;grid-column:1/-1;margin-top:14px;padding-top:12px;border-top:1px solid var(--v2-line);
  transition:grid-template-rows .26s cubic-bezier(.2,.8,.2,1),margin-top .26s cubic-bezier(.2,.8,.2,1),padding-top .26s cubic-bezier(.2,.8,.2,1),opacity .2s ease,border-top-color .2s ease}
.v2-scores.shut{grid-template-rows:0fr;margin-top:0;padding-top:0;opacity:0;border-top-color:transparent}
.v2-scores-in{min-height:0;overflow:hidden}
.v2-scores-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;color:var(--v2-grey);font:700 9px/1.2 var(--v2-f);letter-spacing:.12em;text-transform:uppercase}
.v2-race{display:grid;gap:8px;margin-top:10px}
.v2-lane{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(30px,auto);align-items:center;column-gap:10px}
.v2-lane.out{opacity:.45}
.v2-lane[hidden]{display:none}
.v2-who{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--v2-grey);font:700 9.5px/1 var(--v2-f);letter-spacing:.08em;text-transform:uppercase}
.v2-lane.you .v2-who{color:#fff}
.v2-track{position:relative;height:6px;border-radius:3px;background:var(--v2-raised)}
.v2-track i{position:absolute;left:0;top:0;bottom:0;max-width:100%;border-radius:3px;background:var(--c,#fff);transition:width .4s ease}
.v2-track b{position:absolute;top:-3px;bottom:-3px;width:2px;border-radius:1px;background:#fff}
.v2-pct{text-align:right;color:#fff;font:700 11px/1 var(--v2-f)}
/* tabs: an icon and a word each, in thirds over the three columns of squares below, the open one underlined in red */
#cwCommandDeck #rightPanel{background:var(--v2-panel)!important;border:0!important}
#cwCommandDeck #panelTabs{display:flex!important;background:var(--v2-black)!important;padding:0 16px!important;gap:6px!important;border-top:1px solid var(--v2-line)!important;border-bottom:1px solid var(--v2-line)!important}
#cwCommandDeck .panel-tab{flex:1 1 0!important;min-width:0;display:flex!important;align-items:center;justify-content:center;gap:7px;min-height:42px!important;padding:12px 0 9px!important;
  color:var(--v2-grey)!important;font:700 10px/1 var(--v2-f)!important;letter-spacing:.09em!important;text-transform:uppercase;border:0!important;border-bottom:3px solid transparent!important}
#cwCommandDeck .panel-tab:hover{color:#fff!important}
#cwCommandDeck .panel-tab i{display:block!important;flex:0 0 auto;font-size:14px!important;line-height:1}
#cwCommandDeck .panel-tab.active{color:#fff!important;border-bottom-color:var(--v2-red)!important}
#cwCommandDeck:not(.map-open) .panel-map{display:none!important}   /* the map has its own button, and opens over the deck */
#cwCommandDeck .panel-section{padding:0!important;border:0!important}
/* sections */
#cwCommandDeck .dk-sec{padding:14px 16px!important;border-bottom:1px solid var(--v2-line)!important}
#cwCommandDeck .dk-h{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 10px!important;color:var(--v2-grey)!important;
  font:700 9.5px/1 var(--v2-f)!important;letter-spacing:.14em;text-transform:uppercase}
#cwCommandDeck .dk-meta,#cwCommandDeck .dk-meta b{color:#fff!important;font:700 10px/1 var(--v2-f)!important;letter-spacing:.1em}
/* out of desks: the way to more, under the roles, only when it is needed */
#cwCommandDeck .dk-desks{display:grid;grid-template-rows:1fr;margin:10px 0 0;padding:10px 10px 11px 12px;border-radius:var(--r-md);background:var(--v2-raised);
  transition:grid-template-rows .26s cubic-bezier(.2,.8,.2,1),margin-top .26s cubic-bezier(.2,.8,.2,1),padding .26s cubic-bezier(.2,.8,.2,1),opacity .2s ease}
#cwCommandDeck .dk-desks.shut{grid-template-rows:0fr;margin-top:0;padding-top:0;padding-bottom:0;opacity:0}
#cwCommandDeck .dk-desks-in{min-height:0;overflow:hidden}
#cwCommandDeck .dk-desks-top{display:flex;align-items:center;gap:10px;min-height:26px;margin:0 0 9px}
#cwCommandDeck .dk-desks-msg{flex:1;min-width:0;color:#fff;font:700 10px/1 var(--v2-f);letter-spacing:.1em;text-transform:uppercase}
#cwCommandDeck .dk-h .dk-meta.full,#cwCommandDeck .dk-h .dk-meta.full b{color:var(--v2-red-hi)!important}
#cwCommandDeck .dk-seatbar{height:4px!important;margin:0!important;background:var(--v2-line)!important;border-radius:2px;overflow:hidden}
#cwCommandDeck .dk-seatbar i{background:#fff!important}
#cwCommandDeck .dk-seatbar.full i{background:var(--v2-red-hi)!important}
#cwCommandDeck .dk-ext{--p:0;position:relative;overflow:hidden;display:inline-flex!important;align-items:center;gap:6px;flex:0 0 auto;width:auto!important;margin:0!important;padding:6px 9px!important;
  background:transparent!important;border:0!important;border-radius:var(--r-sm);color:#fff!important;cursor:pointer;box-shadow:inset 0 0 0 1px var(--v2-line)!important;
  font:700 10px/1 var(--v2-f)!important;letter-spacing:.1em;text-transform:uppercase}
#cwCommandDeck .dk-ext:hover{box-shadow:inset 0 0 0 1px #fff!important}
#cwCommandDeck .dk-ext i{font-size:11px;color:inherit!important}
#cwCommandDeck .dk-ext-name{flex:0 0 auto}
#cwCommandDeck .dk-ext-meta{color:var(--v2-grey)!important;font:700 10px/1 var(--v2-f)!important;letter-spacing:.04em}
/* no free desks: more desks is the next thing to do */
#cwCommandDeck .dk-ext.full{background:#fff!important;color:#000!important;box-shadow:none!important}
#cwCommandDeck .dk-ext.full .dk-ext-meta{color:#000!important}
#cwCommandDeck .dk-ext.short{opacity:.5;cursor:default}
#cwCommandDeck .dk-ext.busy{cursor:default}
#cwCommandDeck .dk-ext.busy::before{content:'';position:absolute;inset:0 auto 0 0;width:calc(var(--p) * 1%);background:rgba(255,255,255,.16);transition:width .3s}
/* people, departments and research as squares, three to a row, each in its
   place: what you can have now is solid, what is locked an outline */
#cwCommandDeck .dk-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;gap:6px!important}
#cwCommandDeck .dk-card{position:relative;display:flex!important;flex-direction:column;align-items:center;gap:7px;min-width:0;min-height:112px!important;padding:12px 6px 10px!important;
  text-align:center!important;background:var(--v2-raised)!important;border:0!important;border-radius:var(--r-md);color:#fff!important;cursor:pointer}
#cwCommandDeck .dk-card:hover{background:var(--v2-hover)!important}
#cwCommandDeck .dk-card .dk-face{flex:0 0 auto;width:44px!important;height:44px!important}
#cwCommandDeck .dk-tile{flex:0 0 auto;width:44px;height:44px!important;border-radius:var(--r-sm);display:grid!important;place-items:center;background:var(--v2-black)!important;overflow:hidden;position:relative}
#cwCommandDeck .dk-tile i{font-size:19px!important}
#cwCommandDeck .dk-tile.pic{width:100%;height:60px!important}
#cwCommandDeck .dk-tile img{width:100%;height:100%;object-fit:contain}
#cwCommandDeck .dk-tile.pic i{display:none}
#cwCommandDeck .dk-rise{background:rgba(255,255,255,.25)!important}
#cwCommandDeck .dk-card .dk-main{display:block!important;width:100%}
#cwCommandDeck .dk-name{display:block;color:#fff!important;font:700 11.5px/1.2 var(--v2-f)!important;letter-spacing:.04em;text-transform:uppercase;text-align:left!important}
#cwCommandDeck .dk-desc{display:block;margin-top:3px;color:var(--v2-grey)!important;font:400 11px/1.3 var(--v2-f)!important;text-align:left!important}
#cwCommandDeck .dk-grid .dk-name{display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:10.5px!important;letter-spacing:.05em;text-align:center!important}
#cwCommandDeck .dk-grid .dk-desc{display:none!important}
#cwCommandDeck .dk-side{display:flex!important;flex-direction:row;align-items:baseline;justify-content:center;gap:4px;margin-top:auto;text-align:center}
#cwCommandDeck .dk-cost{font:700 13px/1 var(--v2-f)!important}
#cwCommandDeck .dk-sub{color:var(--v2-grey)!important;font:400 9.5px/1 var(--v2-f)!important}
#cwCommandDeck .dk-count{position:absolute;top:7px;right:7px;margin:0!important;color:var(--v2-grey)!important;font:700 10px/1 var(--v2-f)!important;letter-spacing:.06em}
#cwCommandDeck .dk-card.done{background:transparent!important;box-shadow:inset 0 0 0 1px var(--v2-line)!important}
#cwCommandDeck .dk-card.done .dk-side{flex-direction:column;align-items:center;gap:3px}
#cwCommandDeck .dk-card.done .dk-cost{color:var(--v2-grey)!important;font-size:10px!important;letter-spacing:.1em;text-transform:uppercase}
/* can't afford it yet: dimmed, not red (red is for the rival and for danger) */
#cwCommandDeck .dk-card.short .dk-cost{color:var(--v2-grey)!important}
#cwCommandDeck .dk-card.short .dk-name,#cwCommandDeck .dk-card.short .dk-tile,#cwCommandDeck .dk-card.short .dk-face{opacity:.55}
/* locked: an outline, the picture greyed, and what it needs in place of the price */
#cwCommandDeck .dk-card.locked{background:transparent!important;box-shadow:inset 0 0 0 1px var(--v2-line)!important;cursor:default}
#cwCommandDeck .dk-card.locked:hover{box-shadow:inset 0 0 0 1px var(--v2-grey)!important}
#cwCommandDeck .dk-card.locked .dk-face,#cwCommandDeck .dk-card.locked .dk-tile{filter:grayscale(1);opacity:.35}
#cwCommandDeck .dk-card.locked .dk-name{color:var(--v2-grey)!important}
#cwCommandDeck .dk-grid .dk-card.locked .dk-desc{display:-webkit-box!important;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:0;color:var(--v2-dim)!important;font:400 9.5px/1.3 var(--v2-f)!important;text-align:center!important}
#cwCommandDeck .dk-card.locked .dk-side,#cwCommandDeck .dk-card.locked .dk-count{display:none!important}
#cwCommandDeck .dk-card.busy,#cwCommandDeck .dk-card.on{box-shadow:inset 0 0 0 1px #fff!important}
/* faces: a crisp white ring round each, with nothing light behind to show at the edge */
#cwCommandDeck .dk-face{background:transparent!important;box-shadow:0 0 0 2px #fff!important}
#cwCommandDeck .dk-card.short .dk-face,#cwCommandDeck .dk-card.locked .dk-face{box-shadow:0 0 0 2px var(--v2-grey)!important}
/* in training: the ring fills as they learn */
#cwCommandDeck .dk-member.training .dk-mring{background:conic-gradient(#fff calc(var(--p, 0) * 1%), var(--v2-line) 0)!important}
#cwCommandDeck .dk-member.training .dk-face{position:absolute;inset:3px;width:24px!important;height:24px!important;box-shadow:none!important}
#cwCommandDeck .dk-prog,#cwCommandDeck .dk-bar{background:var(--v2-line)!important}
#cwCommandDeck .dk-prog i,#cwCommandDeck .dk-bar i{background:#fff!important}
/* what a square does, in the line under the grid: its full story while one is pointed at */
#cwCommandDeck .dk-info{min-height:calc(3 * 1.45em);margin:10px 0 0!important;color:var(--v2-grey)!important;font:400 11.5px/1.45 var(--v2-f)!important}
#cwCommandDeck .dk-info b{color:#fff}
/* the space is always there, so nothing jumps when a square is pointed at; until then, a quiet hint */
#cwCommandDeck .dk-info:not(:has(b)){color:var(--v2-dim)!important}
/* the team */
#cwCommandDeck .dk-member{display:grid!important;grid-template-columns:30px minmax(0,1fr) auto 18px;align-items:center;column-gap:10px;padding:8px 0!important;
  background:transparent!important;border-bottom:1px solid var(--v2-line)!important;cursor:pointer}
#cwCommandDeck .dk-member:last-child{border-bottom:0!important}
#cwCommandDeck .dk-member:hover .dk-name{text-decoration:underline;text-underline-offset:3px}
#cwCommandDeck .dk-mring{height:30px!important;border-radius:50%}
#cwCommandDeck .dk-member .dk-face{width:30px!important;height:30px!important;border-radius:50%}
#cwCommandDeck .dk-member .dk-name{font:700 12.5px/1.2 var(--v2-f)!important;letter-spacing:0;text-transform:none}
#cwCommandDeck .dk-member .dk-desc{margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cwCommandDeck .dk-state{padding:4px 7px!important;border-radius:999px;color:var(--v2-grey)!important;
  font:700 9px/1 var(--v2-f)!important;letter-spacing:.1em!important;text-transform:uppercase;box-shadow:inset 0 0 0 1px var(--v2-line)!important;white-space:nowrap}
#cwCommandDeck .dk-state.sell{color:var(--v2-gain)!important;box-shadow:inset 0 0 0 1px var(--v2-gain)!important}
#cwCommandDeck .dk-state.bad,#cwCommandDeck .dk-state.blocked{color:var(--v2-red-hi)!important;box-shadow:inset 0 0 0 1px var(--v2-red-hi)!important}
#cwCommandDeck .dk-state.idle{color:var(--v2-warn)!important;box-shadow:inset 0 0 0 1px var(--v2-warn)!important}
#cwCommandDeck .dk-fire{width:18px!important;height:18px!important;background:transparent!important;border:0!important;color:var(--v2-dim)!important;opacity:0;font-size:12px}
#cwCommandDeck .dk-member:hover .dk-fire,#cwCommandDeck .dk-fire:focus-visible{opacity:1}
#cwCommandDeck .dk-fire:hover{color:var(--v2-red-hi)!important}
/* anything else the tabs draw: links, gates, research */
#cwCommandDeck .dk-link{display:inline-flex;align-items:center;gap:6px;background:transparent!important;color:var(--v2-grey)!important;font:700 10px/1 var(--v2-f)!important;letter-spacing:.1em;text-transform:uppercase;border:0!important}
#cwCommandDeck .dk-link:hover{color:#fff!important}
#cwCommandDeck .dk-gate{margin:0 0 12px!important;padding:12px!important;background:var(--v2-raised)!important;border-radius:var(--r-md);color:var(--v2-grey)!important;font:400 11.5px/1.45 var(--v2-f)!important}
#cwCommandDeck .dk-gate button{display:block;margin-top:10px;padding:9px 12px!important;background:transparent!important;color:#fff!important;border:0!important;box-shadow:inset 0 0 0 1px #fff!important;border-radius:var(--r-sm);font:700 10px/1 var(--v2-f)!important;letter-spacing:.1em;text-transform:uppercase}
#cwCommandDeck .dk-gate button:hover{background:#fff!important;color:#000!important}
/* alerts under the tabs */
#cwCommandDeck #alertRail>*{background:var(--v2-black)!important;border-left:4px solid var(--v2-red)!important;border-radius:var(--r-sm)}
/* the accounts list, over the tabs */
#cwCommandDeck .dk-accounts{background:var(--v2-panel)!important}
#cwCommandDeck .acc-head{display:flex;align-items:baseline;gap:10px;padding:16px 16px 10px!important}
#cwCommandDeck .acc-title{font:700 11px/1 var(--v2-f)!important;letter-spacing:.14em;text-transform:uppercase}
#cwCommandDeck .acc-total{color:var(--v2-grey)!important;font:400 11px/1 var(--v2-f)!important}
#cwCommandDeck .acc-close{background:transparent!important;color:var(--v2-grey)!important;border:0!important}
#cwCommandDeck .acc-bar{margin:0 16px 12px!important;height:4px!important;background:var(--v2-raised)!important;border-radius:2px}
#cwCommandDeck .acc-tabs{display:grid!important;grid-template-columns:repeat(4,1fr);gap:0!important;padding:0 16px!important;border-bottom:1px solid var(--v2-line)!important}
#cwCommandDeck .acc-tab{display:flex!important;flex-direction:column;align-items:flex-start;gap:4px;padding:8px 0 10px!important;border:0!important}
#cwCommandDeck .acc-tab b{color:#fff!important;font:700 15px/1 var(--v2-f)!important}
#cwCommandDeck .acc-tab span{color:var(--v2-grey)!important;font:700 9px/1 var(--v2-f)!important;letter-spacing:.1em}
#cwCommandDeck .acc-tab.on{box-shadow:inset 0 -3px 0 var(--v2-red)!important}
#cwCommandDeck .acc-list{padding:4px 16px 16px!important}
#cwCommandDeck .acc-row{display:grid!important;grid-template-columns:22px minmax(0,1fr) auto auto;align-items:center;column-gap:10px;padding:9px 0!important;background:transparent!important;border:0!important;border-bottom:1px solid var(--v2-line)!important;text-align:left}
#cwCommandDeck .acc-row:hover .acc-name{text-decoration:underline;text-underline-offset:3px}
#cwCommandDeck .acc-sw{height:22px!important;border-radius:var(--r-sm);display:grid;place-items:center;font:700 11px var(--v2-f)!important}
#cwCommandDeck .acc-name{font:700 12.5px/1.2 var(--v2-f)!important}
#cwCommandDeck .acc-sub{color:var(--v2-grey)!important;font:400 11px/1.3 var(--v2-f)!important}
#cwCommandDeck .acc-val{font:700 13px/1 var(--v2-f)!important}
#cwCommandDeck .acc-who{display:inline-flex;align-items:center;gap:5px;color:var(--v2-grey)!important;font:700 9px/1 var(--v2-f)!important;letter-spacing:.1em;text-transform:uppercase}
#cwCommandDeck .acc-who.open .acc-dot{display:none}
/* scrollbars */
#cwCommandDeck ::-webkit-scrollbar{width:6px}#cwCommandDeck ::-webkit-scrollbar-thumb{background:var(--v2-line);border-radius:3px}#cwCommandDeck ::-webkit-scrollbar-track{background:transparent}
/* the accounts list and the map view */
.acc-panel,#accountsPanel,#accPanel{background:var(--v2-black)!important;color:#fff!important;border:0!important;box-shadow:none!important;font-family:var(--v2-f)!important}
.acc-tab{color:var(--v2-grey)!important;background:transparent!important;font:700 10px var(--v2-f)!important;letter-spacing:.1em;text-transform:uppercase}
.acc-tab.on{color:#fff!important}
.acc-row{color:#fff!important}
/* the race's lanes, still under reduced motion */
@media (prefers-reduced-motion:reduce){.v2-track i{transition:none}}

/* Motion: the accounts list and the map drop over the deck and lift away */
#cwCommandDeck .dk-accounts,#cwCommandDeck > .panel-map{transition:opacity .18s ease,transform .22s cubic-bezier(.2,.8,.2,1),display .22s allow-discrete}
#cwCommandDeck:not(.accounts-open) > .dk-accounts,#cwCommandDeck:not(.map-open) > .panel-map{opacity:0;transform:translateY(-6px)}
@starting-style{#cwCommandDeck.accounts-open > .dk-accounts,#cwCommandDeck.map-open > .panel-map{opacity:0;transform:translateY(-6px)}}