/* cint-console.css: additions to console.css (the same bytes as web/console.css)
 * for the player, where the cint core flies TF-01.
 */

/* A control or readout whose rules row has not landed (R3, R4, unit 3b) carries
 * data-rules with the row's name and stays out of the layout; when the row lands,
 * the attribute comes off. A grid that lost buttons this way lays the rest in
 * one row of equal columns. */
[data-rules] { display: none !important; }
.vg-btn-grid-2:has(> [data-rules]), .vg-btn-grid-3:has(> [data-rules]), .vg-btn-grid-4:has(> [data-rules]) {
  grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr;
}

.vg-select.vg-theater-tag { color: var(--vg-labels); font-weight: 700; letter-spacing: 0.02em; }
/* The top bar keeps one row. Under 1,600 px the mission menu narrows (the browser
 * cuts its label short; the full name is in the list), then under 1,500 px the
 * buttons' padding and the gaps and under 1,400 px the type, so every control stays
 * on screen down to 1,280 px. Below that the bar clips at the right; Tab still
 * reaches each control. */
#clock-epoch { flex-shrink: 0; }
@media (max-width: 1599px) { #select-mission { width: 170px; } }
@media (max-width: 1499px) {
  #select-mission { width: 150px; }
  .vg-topbar { gap: 3px; padding: 0 3px; }
  .vg-topbar .vg-btn, .vg-topbar .vg-select { padding: 0 3px; }
}
@media (max-width: 1399px) {
  #select-mission { width: 132px; }
  .vg-topbar .vg-btn, .vg-topbar .vg-select, .vg-topbar .vg-clock-readout, .vg-topbar .vg-badge { font-size: 9.5px; }
  .vg-topbar .vg-fixed-badge { width: 100px; }
  .vg-topbar .vg-fixed-scope { width: 70px; }
  .vg-topbar .vg-clock-readout { width: 84px; }
}

.vg-btn:disabled { opacity: 0.38; cursor: not-allowed; }
.vg-btn:disabled:hover { color: var(--vg-labels); background: var(--vg-bezel); }
/* Text the core does not drive turns gray rather than faint, so it keeps
 * 4.5:1 contrast in every theme; bars and disabled buttons are dimmed. */
.vg-nocore, .vg-nocore * { color: var(--vg-secondary); }
.vg-nocore .vg-bar-track { opacity: 0.45; }
.vg-station-strip.vg-nocore .vg-station-box { cursor: not-allowed; border-style: dashed; }
.vg-nocore-tag {
  display: inline-block; margin-left: 4px; padding: 0 3px;
  border: 1px solid var(--vg-bezel-hi); color: var(--vg-secondary);
  font-size: 8.5px; font-weight: 700; white-space: nowrap;
}

.vg-tree-row.is-nocore, .vg-tree-row.is-nocore * { color: var(--vg-secondary); }
.vg-gtk1-item.is-nocore { color: var(--vg-secondary); cursor: not-allowed; }
.vg-gtk1-item.is-nocore:hover, .vg-gtk1-item.is-nocore.is-sel { background: transparent; color: var(--vg-secondary); font-weight: 400; }
/* The cascade: each row's key, and its last choice before the ▸ of a submenu; the
 * row the keyboard is on reads as the hovered one. */
.vg-gtk1-menu.is-sub { min-width: 120px; }
.vg-gtk1-key { display: inline-block; width: 15px; color: var(--vg-secondary); font-weight: 400; }
.vg-gtk1-item > span + span { margin-left: 16px; color: var(--vg-secondary); white-space: nowrap; }
.vg-gtk1-item.is-sel:not(.is-nocore) { background: var(--vg-plots); color: #000000; font-weight: 700; }
.vg-gtk1-item:not(.is-nocore):hover *, .vg-gtk1-item.is-sel:not(.is-nocore) * { color: inherit; }

/* The drawer's NAV row, its first button the widest. */
.vg-nav-row { grid-template-columns: 1.6fr 1fr 1.1fr 1.1fr; }

/* The order line under the flight strip: the order in force, its state, the
 * order queued after it, and CANCEL. On the bridge it sits under the globe. */
.vg-flight { bottom: 38px; }
.vg-order {
  position: absolute; bottom: 10px; left: var(--vis-cx); transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; max-width: calc(100% - var(--vis-l) - var(--vis-r) - 24px);
  padding: 2px 3px 2px 9px; background: rgba(5, 8, 12, 0.86); border-left: 2px solid var(--vg-plots);
  font-size: 10.5px; color: var(--vg-values); white-space: nowrap; pointer-events: auto;
}
.vg-order-now { overflow: hidden; text-overflow: ellipsis; }
.vg-order-state { font-weight: 700; letter-spacing: 0.06em; color: var(--vg-labels); }
.vg-order-state.is-good { color: var(--vg-positive); }
.vg-order-state.is-done { color: var(--vg-secondary); }
.vg-order-state.is-warn { color: var(--vg-caution); }
.vg-order-then { color: var(--vg-secondary); overflow: hidden; text-overflow: ellipsis; }
.vg-order-state:empty, .vg-order-then:empty { display: none; }
.vg-order-cancel { padding: 1px 6px; font-size: 9.5px; }

/* The checks pill and its popover: the cint room and its checks */
.vg-checks-pill #cint-check-state { font-weight: 700; }
.vg-checks-popover {
  position: absolute; top: 6px; right: 8px; z-index: 150;
  width: min(440px, calc(100% - 16px)); max-height: calc(100% - 12px); overflow-y: auto;
  padding: 8px 10px; background: var(--vg-bezel); border: 1px solid var(--vg-plots);
}
.vg-checks-popover .vg-card-title { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
#tactical-canvas:focus-visible { outline: 1px solid var(--vg-plots); outline-offset: -2px; }
.vg-cint-text { font-size: 10.5px; margin: 3px 0; white-space: normal; user-select: text; }
.vg-cint-text a, .vg-check-list a { color: var(--vg-plots); }
.vg-check-list { margin: 3px 0; padding-left: 16px; font-size: 10px; user-select: text; }
.vg-check-list li { margin: 3px 0; overflow-wrap: anywhere; }
.vg-check-list code { font-family: inherit; color: var(--vg-values); word-break: break-all; }
.vg-check-list li.ok strong { color: var(--vg-positive); }
.vg-check-list li.fail strong { color: var(--vg-fault); }

/* The page heading and a skip link, for screen readers and keyboards */
.vg-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.vg-skip { position: absolute; left: 6px; top: -40px; z-index: 200; padding: 4px 8px; background: var(--vg-bezel); color: var(--vg-labels); border: 1px solid var(--vg-plots); }
.vg-skip:focus { top: 4px; }

/* The first skirmish: the fire solution, the magazines, lost hulls */
.vg-mags { margin: 2px 0 4px; }
.vg-fire-line { margin-top: 3px; font-size: 9.5px; white-space: normal; overflow-wrap: anywhere; }
.vg-fire-line.is-ready { color: var(--vg-positive); }
.vg-fire-line.is-hold { color: var(--vg-caution); }
.vg-tree-row.is-lost, .vg-tree-row.is-lost * { color: var(--vg-secondary); text-decoration: line-through; }

/* The squadron: a row per escort with its class, hull and dV, its task and what
 * the squadron has it doing. The task group's tree rows add the hull and the
 * order in force. */
.vg-squad-list { display: grid; gap: 3px; margin-top: 4px; }
.vg-squad-row { display: grid; gap: 2px; padding: 3px 4px; background: var(--vg-console); border: 1px solid var(--vg-bezel-hi); font-size: 10.5px; }
.vg-squad-head { display: flex; justify-content: space-between; gap: 6px; }
.vg-squad-name { color: var(--vg-plots); font-weight: 700; white-space: nowrap; }
.vg-squad-hull { color: var(--vg-values); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vg-squad-task { display: flex; align-items: center; gap: 4px; }
.vg-squad-task .vg-select { flex: 1; min-width: 0; justify-content: flex-start; }
.vg-select:disabled { opacity: 0.55; cursor: not-allowed; }
.vg-squad-phase { color: var(--vg-values); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vg-squad-row.is-lost .vg-squad-name, .vg-squad-row.is-lost .vg-squad-phase { color: var(--vg-secondary); text-decoration: line-through; }
.vg-tree-row { flex-wrap: wrap; column-gap: 4px; }
.vg-tree-row > span:first-child { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vg-tree-row > .vg-secondary { flex: none; }
.vg-tree-sub { flex-basis: 100%; padding-left: 4px; font-size: 9px; color: var(--vg-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }