/* Copyright (c) 2026 Pavel Bardukov. All rights reserved. See LICENSE. */
/* The Graphs window (graphs.js). Everything is scoped under `.gr`: this file is loaded on the
   main window too, and nothing here may touch the editor or the ship list.
   Line colours are fixed hexes set inline by graphs.js (like the damage types); the chrome
   follows the theme through the usual variables. */

.gr{flex:1 1 auto; min-height:0; display:flex; flex-direction:column; overflow:hidden}
.gr-head{display:flex; align-items:center; gap:10px; padding:8px 14px; flex:0 0 auto;
  background-color:var(--bg-panel); border-bottom:1px solid var(--accent2)}
.gr-small{font-size:11px}
.gr .warn{color:var(--red)}

.gr-body{flex:1 1 auto; min-height:0; display:flex; overflow:hidden}

/* ── the graph list on the left ── */
.gr-types{flex:0 0 220px; overflow-y:auto; padding:8px 8px 12px; border-right:1px solid var(--border);
  background-color:rgba(10,10,13,.72); scrollbar-width:thin}
.gr-group{margin-bottom:10px}
.gr-group-h{font-family:var(--font-display); letter-spacing:var(--display-tracking); color:var(--accent);
  font-size:11px; text-transform:uppercase; margin:6px 2px 4px}
button.gr-type{display:block; width:100%; text-align:left; margin:2px 0; padding:5px 8px;
  font-family:"Segoe UI",Arial,sans-serif; letter-spacing:0; font-size:12px; color:var(--text)}
button.gr-type.active{background-color:var(--primary-bg); color:var(--accent); border-color:var(--accent)}

/* ── the chart ── */
.gr-main{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; overflow:hidden; padding:8px 10px; gap:8px}
.gr-chartwrap{flex:1 1 auto; min-height:260px; display:flex; flex-direction:column;
  background-color:rgba(18,18,22,.86); border:1px solid var(--border); border-radius:4px; padding:6px 8px}
.gr-title{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:4px; font-size:11px}
.gr-title b{font-family:var(--font-display); letter-spacing:var(--display-tracking); color:var(--accent);
  font-size:13px; font-weight:normal; text-transform:uppercase}
.gr-chartrow{flex:1 1 auto; min-height:0; display:flex; gap:10px}
.gr-chart{flex:1 1 auto; min-width:0; min-height:0; position:relative; overflow:hidden}
.gr-svg{display:block; cursor:crosshair; user-select:none}
.gr-plot{fill:rgba(0,0,0,.25); stroke:var(--border)}
.gr-tick line{stroke:var(--border); stroke-width:1}
.gr-tick text{fill:var(--dim); font-size:10px}
.gr-line{fill:none; stroke-width:2; stroke-linejoin:round}
.gr-mark{stroke-width:1; stroke-dasharray:4 4; opacity:.7}
.gr-cursor{stroke:var(--text); stroke-width:1; stroke-dasharray:3 3; opacity:.6; pointer-events:none}
.gr-cursor.hidden{display:none}
.gr-empty{fill:var(--dim); font-size:12px}

/* The legend doubles as the readout: every line's value at the cursor. */
.gr-side{flex:0 0 270px; min-height:0; display:flex; flex-direction:column; gap:8px;
  border-left:1px solid var(--border); padding-left:8px; overflow-y:auto; scrollbar-width:thin}
.gr-legend{flex:0 0 auto; font-size:11px}

/* Time to kill: the verdict and its figures, above the legend. */
.gr-summary{font-size:11px; border-bottom:1px solid var(--border); padding-bottom:6px}
.gr-summary.hidden{display:none}
.gr-verdict{font-family:var(--font-display); letter-spacing:var(--display-tracking); font-size:13px;
  text-transform:uppercase; margin-bottom:4px}
.gr-verdict b{font-size:16px; margin-left:4px}
.gr-verdict.dead{color:var(--red)}
.gr-verdict.alive{color:var(--green)}
.gr-sh{color:var(--accent); margin:6px 0 2px; text-transform:uppercase; font-size:10px; letter-spacing:.4px}
.gr-srow{display:flex; align-items:center; gap:6px; padding:1px 0}
.gr-srow span{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.gr-srow span.muted{flex:0 0 auto}
.gr-srow b{flex:0 0 auto; font-weight:normal; color:var(--text); white-space:nowrap}
.gr-srow i{flex:0 0 10px; height:3px; border-radius:2px}
.gr-srow.total{border-top:1px solid var(--border); margin-top:2px; padding-top:2px}
.gr-summary .pos{color:var(--green)}
.gr-summary .neg{color:var(--red)}
.gr-mark-strong{stroke-width:1.5; opacity:.9}
.gr-mark-label{font-size:10px}
.gr-at{color:var(--dim); margin-bottom:4px}
.gr-at b{color:var(--text); font-weight:normal}
.gr-leg{display:flex; align-items:center; gap:6px; padding:2px 0}
.gr-leg i{flex:0 0 14px; height:3px; border-radius:2px}
.gr-leg i.dash{background-image:linear-gradient(90deg, transparent 50%, var(--bg-panel) 50%) !important;
  background-size:6px 3px}
.gr-leg-name{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.gr-leg b{flex:0 0 auto; color:var(--text); font-weight:normal; white-space:nowrap}

/* ── the three panels under it ── */
.gr-controls{flex:0 0 auto; display:flex; gap:8px; align-items:stretch; max-height:46%; min-height:0}
.gr-panel{flex:1 1 0; min-width:0; overflow-y:auto; background-color:rgba(18,18,22,.86);
  border:1px solid var(--border); border-radius:4px; padding:6px 8px; scrollbar-width:thin}
.gr-panel.hidden{display:none}
.gr-opts{flex:1.1 1 0}
.gr-panel-h{font-family:var(--font-display); letter-spacing:var(--display-tracking); color:var(--accent);
  font-size:11px; text-transform:uppercase; margin:2px 0 6px}
.gr-list{display:flex; flex-direction:column; gap:3px}
.gr-row{display:flex; align-items:center; gap:6px; font-size:12px; min-height:33px}
.gr-row.off .gr-name, .gr-row.off .gr-ico{opacity:.45}
.gr-ico{flex:0 0 24px; width:24px; height:24px}
.gr-name{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.gr-emptyrow{font-size:12px; padding:4px 0}
button.gr-sw{flex:0 0 16px; width:16px; height:16px; padding:0; border-radius:3px; font-size:10px; line-height:1;
  border-color:var(--border-lt)}
button.gr-sw-t{background-color:var(--bg-card); color:var(--accent)}
button.gr-x{flex:0 0 auto; padding:1px 6px; font-size:11px; color:var(--dim)}
button.gr-x:hover{color:var(--red); border-color:var(--red)}
.gr-st{flex:0 0 auto; font-weight:bold; padding:0 2px}
.gr-dash{flex:0 0 26px}
.gr-dash line{stroke:var(--text); stroke-width:2}
.gr-vt{display:inline-flex; gap:8px; flex-wrap:wrap; font-size:11px; color:var(--dim)}
.gr-vt input{width:64px}
.gr-tinfo{font-size:11px; white-space:nowrap}
.gr-add{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:8px}
.gr-add select{max-width:100%}
.gr-prof{display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--dim)}
.gr-optrow{display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; margin:3px 0; font-size:12px}
.gr-opt{display:inline-flex; align-items:center; gap:5px; cursor:pointer}
.gr-range{width:90px}

/* The two velocity circles. */
.gr-circles{display:flex; gap:14px; flex-wrap:wrap; margin-top:8px; border-top:1px solid var(--border); padding-top:6px}
.gr-circles.hidden{display:none}
.gr-circle{display:flex; flex-direction:column; align-items:flex-start}
.gr-circ{cursor:grab; touch-action:none}
.gr-circ:active{cursor:grabbing}
.gr-circ-ring{fill:rgba(0,0,0,.3); stroke:var(--border-lt)}
.gr-circ-los{stroke:var(--border); stroke-dasharray:3 3}
.gr-circ-arrow{stroke:var(--accent); stroke-width:2}
.gr-circ-head{fill:var(--accent)}
.gr-circ-in{display:flex; flex-direction:column; gap:3px; font-size:11px; color:var(--dim)}
.gr-circ-in input{width:56px}

/* Time to kill: distances, the target panel, the fleet-bonus chips. */
.gr-dist{display:inline-flex; align-items:center; gap:3px; font-size:11px; color:var(--dim); flex:0 0 auto}
.gr-dist input{width:58px}
.gr-panel-h.gr-sub{margin-top:10px}
.gr-tline{margin:4px 0}
.gr-count input{width:44px}
/* Time to kill: the fleet bonuses sit in each panel's head (2026-09-28) - the editor's chips, compact. */
.gr-hrow{display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:30px}
.gr-bonus{display:inline-flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:4px;
  text-transform:none; letter-spacing:0; font-family:inherit}
.gr .bonus-chip.gr-bchip{height:30px; cursor:pointer}
.gr .bonus-chip.gr-bchip .bc-hull{width:26px; height:26px}
.gr .bonus-chip.gr-bchip .bc-fams{height:26px}
.gr .bonus-chip.gr-bchip .bc-fam{width:12px; height:12px}
.gr .bonus-chip.gr-bchip .bc-fam-txt{font-size:9px; line-height:12px}
button.seg.gr-badd{height:26px; padding:0 10px; font-size:11px}

/* Time to kill, teams: the priority crosshair on a Team A row (Team B shoots it first) and on
   Team B's picker (always set - B is one ship). */
button.gr-cross{flex:0 0 auto; padding:2px 4px; line-height:0; color:var(--dim)}
button.gr-cross.active{color:var(--red); border-color:var(--red)}
button.gr-cross:disabled{cursor:default; transform:none}
.gr-cross-ico{display:block}
.gr-focus{line-height:1.5; margin:2px 0 4px}
/* The X axis zooms on the wheel and pans on a drag (graphs.js onChartWheel / onPanStart). */
.gr-chart.panning .gr-svg, .gr-chart.panning{cursor:grabbing}
/* Time to kill, "per layer": incoming damage red, repairs in the layer's colour (the pilot's
   call, 2026-09-28). Fixed hexes like the damage types - a theme accent could clash with them. */
.gr-summary .gr-dmg{color:#ef5350}
.gr-summary .gr-rep-shield{color:#4fc3f7}
.gr-summary .gr-rep-armor{color:#66bb6a}
.gr-summary .gr-rep-hull{color:#ffa726}