/* Warp Field Control. The shared console look is in ../Shared/console.css; this adds the field map, the field and
   drive panels and the dialogs only this console has. The console is used in landscape. */
:root { --left-w: 17rem; --right-w: 19rem; --advisory-h: 2.6rem; }

.title-pill { min-width: 17rem; padding: 0.5rem 1.4rem; border: 1px solid #63b4ff; border-radius: 0.7rem; background: linear-gradient(180deg, var(--blue-hi), var(--blue)); box-shadow: 0 0 0.9rem rgba(40, 130, 255, 0.5); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.16em; text-align: center; }
.ship-state { white-space: nowrap; }
.warp-state[data-level="off"] { color: var(--muted); }
.warp-state[data-level="ok"] { color: #9fd0ff; text-shadow: 0 0 0.5rem var(--blue-hi); }
.warp-state[data-level="warn"] { color: var(--amber); }
.warp-state[data-level="bad"] { color: var(--red); }

body.warpfield {
  background:
    radial-gradient(ellipse at 50% 55%, rgba(30, 90, 160, 0.18), transparent 60%),
    linear-gradient(rgba(80, 160, 235, 0.06) 1px, transparent 1px) 0 0 / 3rem 3rem,
    linear-gradient(90deg, rgba(80, 160, 235, 0.06) 1px, transparent 1px) 0 0 / 3rem 3rem,
    var(--bg);
}

/* ── Field map ──────────────────────────────────────────────────────────────────────────────── */
#field {
  position: fixed; z-index: 1;
  left: calc(var(--pad) * 2 + var(--left-w)); top: calc(var(--top-h) + 0.5rem);
  width: calc(100vw - var(--pad) * 4 - var(--left-w) - var(--right-w));
  height: calc(100dvh - var(--top-h) - 0.5rem - var(--dock-h) - var(--advisory-h) - 1rem);
  stroke: none; /* the console's default SVG stroke is for icons */
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
#field text { font-variant-numeric: tabular-nums; paint-order: stroke; stroke: rgba(2, 8, 18, 0.85); stroke-width: 4px; stroke-linejoin: round; }
.ruler { visibility: hidden; }
.g-ring { fill: none; stroke: rgba(79, 214, 255, 0.13); stroke-width: 1.5; stroke-dasharray: 6 8; }
.g-label { fill: var(--dim); font-size: 14px; letter-spacing: 1.2px; }
.g-axis { stroke: rgba(79, 214, 255, 0.12); stroke-width: 1.5; }
.r-max { fill: none; stroke: rgba(255, 182, 72, 0.7); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; }
.r-normal { fill: none; stroke: rgba(79, 214, 255, 0.75); stroke-width: 1.5; stroke-dasharray: 8 6; }
.r-fit { fill: none; stroke: rgba(79, 224, 141, 0.55); stroke-width: 1.5; stroke-dasharray: 3 5; }
.r-bubble { fill: url(#bubble); }
.r-edge { fill: none; stroke: #8fe9ff; stroke-width: 4; stroke-dasharray: 26 10 6 10; filter: drop-shadow(0 0 6px #4fd6ff); }
.at-warp .r-edge { stroke: #c8f3ff; stroke-width: 5; filter: drop-shadow(0 0 10px #4fd6ff); }
.streak { stroke: rgba(170, 220, 255, 0.55); stroke-width: 2; stroke-linecap: round; }
.l-max { fill: #ffcf87; font-size: 14px; font-weight: 600; letter-spacing: 1.6px; }
.l-field { fill: #bff1ff; font-size: 14px; font-weight: 600; letter-spacing: 1.6px; }
.l-normal { fill: var(--cyan); font-size: 13px; letter-spacing: 1.4px; }
.s-hull { fill: none; stroke-width: 1.5; }
.ship.in .s-hull { stroke: rgba(79, 224, 141, 0.85); }
.ship.cut .s-hull { stroke: #ff9a4f; stroke-dasharray: 5 4; }
.ship.out .s-hull { stroke: rgba(150, 170, 190, 0.5); stroke-dasharray: 3 5; }
.s-name { fill: var(--text); font-size: 15px; font-weight: 600; }
.s-detail { font-size: 12px; letter-spacing: 1.1px; }
.ship.in .s-detail { fill: var(--green); }
.ship.cut .s-detail { fill: #ffab6b; }
.ship.out .s-detail { fill: var(--muted); }

/* What the field needs, under the map */
.advisory {
  position: fixed; z-index: 2; margin: 0;
  left: calc(var(--pad) * 2 + var(--left-w)); right: calc(var(--pad) * 2 + var(--right-w));
  bottom: calc(var(--dock-h) + 0.5rem); min-height: var(--advisory-h);
  display: flex; align-items: center; justify-content: center; padding: 0.3rem 1rem;
  border: 1px solid var(--edge-soft); border-radius: 2rem; background: var(--panel);
  font-size: 0.82rem; line-height: 1.3; letter-spacing: 0.03em; text-align: center; color: var(--cyan);
}
.advisory[data-level="ok"] { color: #9fd0ff; }
.advisory[data-level="warn"] { color: var(--amber); border-color: rgba(255, 182, 72, 0.5); }
.advisory[data-level="bad"] { color: #ff8f9b; border-color: rgba(255, 79, 79, 0.6); box-shadow: 0 0 1rem rgba(255, 60, 60, 0.25); }

/* ── Panels ─────────────────────────────────────────────────────────────────────────────────── */
.controls { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; gap: 0.8rem; padding: 0.9rem 1rem 1rem; }
.thead { flex: none; }
.thead h2 { white-space: nowrap; font-size: 0.85rem; }
.thead small { font-size: 0.6rem; letter-spacing: 0.12em; white-space: nowrap; color: var(--cyan); }
.thead small[data-level="ok"] { color: #9fd0ff; }
.controls .rows { flex: none; }
.rows dd.warn { color: var(--amber); }
.pair { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.pair div { display: grid; gap: 0.1rem; }
.pair small { font-size: 0.6rem; }
.pair b { font-size: 1.45rem; font-weight: 500; color: var(--cyan); font-variant-numeric: tabular-nums; line-height: 1.15; }
.control { flex: 1; min-height: 0; display: grid; grid-template-rows: auto auto 1fr; justify-items: start; gap: 0.15rem; }
.control small { font-size: 0.62rem; letter-spacing: 0.12em; white-space: nowrap; }
.control b { font-size: 1.55rem; font-weight: 500; color: var(--cyan); font-variant-numeric: tabular-nums; line-height: 1.15; }
.control em { font-style: normal; font-size: 0.7rem; color: var(--muted); margin-bottom: 0.4rem; white-space: nowrap; }
.control em.bad { color: #ff8f9b; }
.control .vslider { width: 100%; height: 100%; min-height: 8rem; }
/* The green mark on the extension slider: the field that fits round the ships near us. */
.vs-target { position: absolute; left: 0; width: 2.2rem; height: 2px; margin-bottom: -1px; pointer-events: none; }
.vs-target::before { content: ''; position: absolute; left: -0.1rem; right: 0; top: 0; height: 2px; background: var(--green); box-shadow: 0 0 0.5rem var(--green); }
.vs-target::after { content: ''; position: absolute; right: -0.55rem; top: calc(1px - 0.35rem); border: 0.35rem solid transparent; border-right-color: var(--green); }

/* Drive: the Warp Limit gauge beside the core load bar */
.limit { min-height: 0; display: grid; grid-template-rows: auto auto auto 1fr; justify-items: start; gap: 0.15rem; }
.limit small { font-size: 0.62rem; letter-spacing: 0.12em; white-space: nowrap; }
.limit b { font-size: 1.55rem; font-weight: 500; color: var(--cyan); font-variant-numeric: tabular-nums; line-height: 1.15; }
.limit b.bad, .limit em.bad { color: #ff8f9b; }
.limit em { font-style: normal; font-size: 0.68rem; color: var(--muted); margin-bottom: 0.4rem; white-space: nowrap; }
.limit-bar { position: relative; width: 2.4rem; height: 100%; min-height: 6rem; margin-left: 2.3rem; border: 1px solid var(--edge); border-radius: 0.6rem; background: linear-gradient(180deg, rgba(10, 35, 66, 0.75), rgba(3, 12, 24, 0.85)); }
.limit-bar i { position: absolute; left: 0; right: 0; }
.limit-bar .avail { bottom: 0; border-radius: 0 0 0.55rem 0.55rem; background: linear-gradient(0deg, var(--blue), var(--cyan)); box-shadow: 0 0 0.6rem var(--cyan); }
.limit-bar .avail.bad { background: linear-gradient(0deg, #7a1f2a, #ff5968); box-shadow: 0 0 0.6rem #ff5968; }
.limit-bar .lost { top: 0; border-radius: 0.55rem 0.55rem 0 0; background: repeating-linear-gradient(135deg, rgba(255, 182, 72, 0.55) 0 0.35rem, rgba(120, 70, 10, 0.4) 0.35rem 0.7rem); }
.limit-scale { position: absolute; left: calc(100% + 0.5rem); top: 0; bottom: 0; width: 2rem; pointer-events: none; }
.limit-scale span { position: absolute; left: 0; transform: translateY(50%); font-size: 0.7rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.limit-scale span::before { content: ''; position: absolute; left: -0.5rem; top: 50%; width: 0.35rem; height: 1px; background: rgba(190, 220, 245, 0.6); }
.helm-mark { position: absolute; left: -0.45rem; right: -0.45rem; height: 2px; margin-bottom: -1px; background: #fff; box-shadow: 0 0 0.5rem #fff; pointer-events: none; }
.helm-mark em { position: absolute; right: calc(100% + 0.25rem); top: 50%; transform: translateY(-50%); font-style: normal; font-size: 0.5rem; letter-spacing: 0.1em; color: #fff; }
.drive-row { flex: 1; min-height: 12rem; display: grid; grid-template-columns: 1fr 6.2rem; gap: 0.6rem; }
.core { min-height: 0; display: grid; grid-template-rows: auto auto auto 1fr auto; justify-items: center; gap: 0.15rem; text-align: center; }
.core small { font-size: 0.62rem; letter-spacing: 0.12em; }
.core b { font-size: 1.55rem; font-weight: 500; color: var(--cyan); font-variant-numeric: tabular-nums; line-height: 1.15; }
.core em { font-style: normal; font-size: 0.62rem; color: var(--muted); margin-bottom: 0.4rem; }
.core-bar { position: relative; width: 2.4rem; height: 100%; min-height: 6rem; border: 1px solid var(--edge); border-radius: 0.6rem; background: linear-gradient(180deg, rgba(10, 35, 66, 0.75), rgba(3, 12, 24, 0.85)); overflow: hidden; }
.core-bar i { position: absolute; left: 0; right: 0; height: 0; }
.core-bar .base { bottom: 0; background: linear-gradient(0deg, var(--blue), var(--cyan)); box-shadow: 0 0 0.6rem var(--cyan); }
.core-bar .stretch { bottom: var(--base, 0); background: repeating-linear-gradient(135deg, #ffb648 0 0.35rem, #d98a20 0.35rem 0.7rem); }
.core-bar .supply { position: absolute; left: -2px; right: -2px; height: 2px; background: var(--red); box-shadow: 0 0 0.4rem var(--red); }
.core-key { display: flex; gap: 0.5rem; font-size: 0.5rem; letter-spacing: 0.08em; color: var(--muted); }
.core-key span::before { content: ''; display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.2rem; border-radius: 0.1rem; vertical-align: -0.05rem; }
.core-key .base::before { background: var(--cyan); }
.core-key .stretch::before { background: #ffb648; }

/* ── Dock ───────────────────────────────────────────────────────────────────────────────────── */
.dock button.blocked { opacity: 0.4; cursor: not-allowed; }
.dock button.blocked:hover .ring { border-color: var(--edge); box-shadow: 0 0 0.8rem rgba(40, 140, 255, 0.35), inset 0 0 0.8rem rgba(40, 140, 255, 0.25); }
#shipsBtn[data-alert="true"] { color: var(--amber); }
#shipsBtn[data-alert="true"] .ring { border-color: var(--amber); }

/* ── Dialogs ────────────────────────────────────────────────────────────────────────────────── */
.mhead small { font-size: 0.65rem; color: var(--cyan); }
.ship-list { display: grid; gap: 0.45rem; margin-bottom: 0.8rem; max-height: min(52dvh, 32rem); overflow-y: auto; scrollbar-width: thin; }
.ship-row { display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 0.8rem; padding: 0.6rem 0.8rem; border: 1px solid var(--edge-soft); border-radius: 0.6rem; background: rgba(9, 28, 52, 0.45); }
.ship-row b { font-size: 0.9rem; font-weight: 500; }
.ship-row small { grid-column: 1; font-size: 0.66rem; }
.ship-row em { grid-row: 1 / 3; grid-column: 2; align-self: center; max-width: 14rem; text-align: right; font-style: normal; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.08em; }
.ship-row.in em { color: var(--green); }
.ship-row.cut { border-color: rgba(255, 154, 79, 0.55); }
.ship-row.cut em { color: #ffab6b; }
.ship-row.out em { color: var(--muted); }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.field-grid .field { padding: 0.55rem 0.8rem; }
.field-grid .field b { font-size: 1.1rem; }
.field-grid .field button { min-height: 2.4rem; padding: 0.4rem 0.7rem; }
#menuDialog { width: min(42rem, 94vw); }
#diagnosticsDialog { width: min(52rem, 94vw); }
.diag-rows { grid-template-columns: 1fr 1fr; column-gap: 2rem; }
.diag-rows div { padding: 0.4rem 0; }
.diag-rows dd { max-width: 65%; }
.rule { margin-top: 0.8rem; color: var(--text); }