/* Route plotting tool panel (native inside index.html).
   Ported from the standalone route.html <style>, scoped under #panel-route so
   nothing leaks into the index. The results table inherits milkyway's
   .result-table styling (header glow / borders), matching the neighbors table. */
#panel-route {
  --accent:#80c4e6; --dim:#3b5059; --dim-a:#3b505966;
  /* Match the index/neighbors results palette (milkyway.css). */
  --accent-blue:#3b505966; --accent-white:#f8f8ff; --head-ink:#8fa2ab;
  --text:#e5e7eb; --muted:#8b97a7; --neutron:#1294d6; --ok:#53d08a; --err:#ff6b6b;
  --warn:#ffd36b;  /* fuel-risk amber, kept distinct from the neutron blue */
  --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.08);
  /* Match the index .glass panel: a faint translucent tint + blur, not a dark box. */
  --panel:rgba(255,255,255,.03); --head:rgba(255,255,255,.04); --field:rgba(255,255,255,.05);
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
#panel-route * { box-sizing:border-box; }

/* Swap From/To lives in the actions row; the two-way arrow nudges on hover. */
#panel-route #swapFromTo .swap-ico { flex:none; transition:transform .18s ease; }
#panel-route #swapFromTo:hover:not(:disabled) .swap-ico { transform:scale(1.12); }
#panel-route a { color:var(--accent); text-decoration:none; }
#panel-route a:hover { text-decoration:underline; }

#panel-route .pill { display:inline-block; padding:2px 11px; border-radius:999px; font-size:11px; line-height:1.35;
        text-transform:uppercase; letter-spacing:.6px; border:1px solid var(--dim);
        color:var(--muted); background:rgba(255,255,255,.03); }
#panel-route .pill.ok { color:var(--ok); border-color:#2c6b48; }
#panel-route .pill.warn { color:var(--warn); border-color:#7a5f27; }

#panel-route .banner { border:1px solid var(--line); border-radius:10px; padding:10px 14px;
          margin-bottom:16px; background:var(--panel); font-size:13px; }
/* Thin "current access" indicator (temporary, removed at full public release). */
#panel-route .access-ind { display:flex; align-items:center; justify-content:flex-end; gap:5px;
              font-size:11px; color:var(--muted); letter-spacing:.3px; margin:0 2px 8px; }
#panel-route .access-ind .dot { width:7px; height:7px; border-radius:50%; background:var(--ok); flex:none; }
#panel-route .access-ind b { color:var(--text); font-weight:600; }
#panel-route .bannerkey { margin-top:10px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
#panel-route .bannerkey label { font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--accent); font-weight:600; }
/* Buttons using the EDGIS index .tool-action styling (same colors). */
#panel-route button { font:inherit; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
         gap:.4rem; border:0; border-radius:.75rem; padding:.5rem 1rem; font-size:.875rem; white-space:nowrap;
         background:rgba(255,255,255,.04); color:#aaaaaa;
         transition:background .2s ease, color .2s ease; }
#panel-route button:hover:not(:disabled) { background:#107CB2; color:#fff; }
#panel-route button:disabled { opacity:.4; cursor:default; }
#panel-route button#go { background:var(--accent-blue); color:#fff; }
#panel-route .actions { display:flex; gap:10px; align-items:center; margin-top:16px; }
#panel-route .actions button { justify-content:center; }
/* Stack the actions (Plot / vs Neutron / vs Galaxy) on narrow screens. */
@media (max-width:560px) {
  #panel-route .actions { flex-direction:column; align-items:stretch; }
  #panel-route .actions button { width:100%; }
}
/* The author `button { display:inline-flex }` rule otherwise beats the UA
   [hidden] rule, so hidden buttons (vs Galaxy before a ship is set) still
   showed. Re-assert it. */
#panel-route button[hidden] { display:none; }
/* Actions sit on their own row above the table; wrap (never clip the compact
   switch) and keep the Export/Copy utility buttons compact. */
#panel-route .summary-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center;
                   gap:8px 12px; margin:10px 0 4px; }
#panel-route .summary-actions .switch { margin-right:auto; }   /* compact toggle stays left */
#panel-route #exportBtn, #panel-route #copyRoute, #panel-route #shareRoute { padding:.4rem .7rem; font-size:.8rem; }
#panel-route #copyRoute svg, #panel-route #exportBtn svg, #panel-route #shareRoute svg { width:14px; height:14px; vertical-align:-2px; margin-right:2px; }
/* Export format picker sits next to the Export button in the actions row. */
#panel-route .export-group { display:inline-flex; align-items:center; gap:6px; }
#panel-route #exportFmt { background:rgba(255,255,255,.04); color:var(--text);
         border:1px solid var(--line); border-radius:.5rem; padding:.34rem .5rem; font-size:.8rem; cursor:pointer; }
/* Per-leg fuel-risk marker in the results table: a red warning triangle on the
   system and a faint red tint + left accent on the row, so a strand / over-range
   leg is obvious at a glance. */
#panel-route .risk { color:var(--err); display:inline-flex; vertical-align:-2px; margin-left:4px; cursor:help; }
#panel-route .risk svg { width:14px; height:14px; }
#panel-route tr.risk-row > td { background:rgba(255,107,107,.09); }
#panel-route tr.risk-row > td:first-child { box-shadow:inset 3px 0 0 var(--err); }
#panel-route tr.risk-row .sys { color:var(--err); font-weight:600; }

/* Departure system shown as row #0 (like spansh): mark it as the origin. */
#panel-route tr.src-row .sys { color:var(--accent); }

/* Per-row "done" progress checkboxes (manual tracking, like spansh). */
#panel-route th.chk-head, #panel-route td.chk { width:26px; text-align:center; padding-left:6px; padding-right:2px; }
#panel-route .done-box { cursor:pointer; accent-color:var(--ok); width:15px; height:15px; vertical-align:middle; margin:0; }
#panel-route tr.done > td:not(.chk) { opacity:.45; }       /* keep the box fully usable */
#panel-route tr.done .sys { text-decoration:line-through; }

/* Native <select> popups render on the OS layer and don't inherit the glass
   panel, so the unselected option showed as near-invisible light text on the
   UA's white. Force a dark background + light text on every panel dropdown. */
#panel-route select { color:var(--text); }
#panel-route select option { background:#0c1218; color:var(--text); }
#panel-route select option:checked { background:#107CB2; color:#fff; }
#panel-route .go-logo { width:16px; height:16px; }
/* Plot button "warming up" state: the logo rotates slowly, stays visible while
   disabled. The mark's blades converge above box centre, so pivot on that hub
   (47% 38%) or it orbits. Counter-clockwise, unhurried. */
#panel-route button#go.warming { opacity:.8; cursor:progress; }
#panel-route button#go.warming .go-logo { animation:gospin 2.6s linear infinite; transform-origin:47% 38%; }
@keyframes gospin { to { transform:rotate(-360deg); } }
#panel-route .cmp-logo { width:16px; height:16px; border-radius:50%; }
/* Spin the spansh logo while a compare query is in flight, so it is obvious. */
#panel-route #cmpGalaxy.querying .cmp-logo { animation:gospin 0.8s linear infinite; }
/* Blue 60s progress line for the spansh exact (Galaxy) plotter query. */
#panel-route .spansh-bar { height:4px; margin-top:6px; border-radius:3px; background:rgba(18,148,214,0.18); overflow:hidden; }
#panel-route .spansh-bar-fill { height:100%; width:0; border-radius:3px; background:#1294d6; animation:spansh-fill 60s linear forwards; }
@keyframes spansh-fill { from { width:0; } to { width:100%; } }

#panel-route .keyrow { margin-top:12px; font-size:12px; color:var(--muted); }
#panel-route .keyrow summary { cursor:pointer; color:var(--accent); text-transform:uppercase; letter-spacing:.5px; font-size:11px; }

#panel-route .shiprow { margin-top:12px; font-size:12px; color:var(--muted); }
#panel-route .shiprow summary { cursor:pointer; color:var(--accent); text-transform:uppercase; letter-spacing:.5px; font-size:11px; }
#panel-route .shipline { margin:8px 0; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
#panel-route .cargo-field { font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted);
               display:inline-flex; align-items:center; gap:6px; }
#panel-route #shipInfo { font-family:var(--mono); }
/* Ship library: chips of stored ships; active one highlighted; x removes one. */
#panel-route .ship-library { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
#panel-route .ship-item { display:inline-flex; align-items:stretch; border:1px solid rgba(255,255,255,0.14); border-radius:8px; overflow:hidden; }
#panel-route .ship-item.active { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
#panel-route .ship-pick { background:transparent; border:0; color:var(--text); padding:5px 10px; cursor:pointer; font-size:12px; }
#panel-route .ship-item.active .ship-pick { color:var(--accent); font-weight:600; }
#panel-route .ship-pick:hover { background:rgba(255,255,255,0.06); }
#panel-route .ship-del { background:transparent; border:0; border-left:1px solid rgba(255,255,255,0.14); color:var(--muted); padding:0 8px; cursor:pointer; font-size:14px; line-height:1; }
#panel-route .ship-del:hover { color:var(--bad); background:rgba(255,255,255,0.06); }
#panel-route .fuelbar { margin:12px 0 2px; font-size:13px; }

#panel-route .summary { display:flex; gap:24px; flex-wrap:wrap; margin:20px 0 8px; align-items:flex-end; }
#panel-route .stat { display:flex; flex-direction:column; }
#panel-route .stat b { font-size:20px; font-family:var(--mono); color:var(--accent-white,#f8f8ff); }
#panel-route .stat span { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.5px; }
#panel-route .meta { color:var(--muted); font-size:12px; font-family:var(--mono); }
#panel-route #cmpOut { margin:12px 0 2px; font-size:13px; }
#panel-route .good { color:var(--ok); } #panel-route .bad { color:var(--err); }
#panel-route .legend { color:var(--muted); font-size:12px; margin:8px 0 2px; }
#panel-route .legend b { color:var(--neutron); }

/* Flat results table matching the index/neighbors tool results: no outer box,
   a translucent header (--head) with accent-blue text, bottom borders only.
   The table itself inherits milkyway's .result-table rules. */
#panel-route .tablewrap { overflow-x:auto; margin-top:8px; }
/* Full-width table (the own `table{width:100%}` rule is dropped in favour of
   milkyway's .result-table, which doesn't set width). */
#panel-route .tablewrap table { width:100%; font-size:12px; }
/* milkyway's .result-table gives borders + horizontal padding but not these:
   left-aligned headers (numeric + actions stay right), no-wrap cells (so the
   star icon + spectral letter sit on one line), vertical padding, row rules. */
#panel-route .tablewrap th { text-align:left; padding-top:4px; padding-bottom:4px; }
#panel-route .tablewrap th.num, #panel-route .tablewrap th.acts-head { text-align:right; }
#panel-route .tablewrap td { white-space:nowrap; padding-top:4px; padding-bottom:4px;
                             border-bottom:1px solid var(--line2); }
#panel-route .num { text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; }
#panel-route .sys { font-family:var(--mono); }
#panel-route .boost { color:var(--neutron); }
#panel-route .spec { color:var(--muted); font-family:var(--mono); }
/* Neutron class letter in neutron-blue (neutron steps are blue by convention,
   matching the button-icon blue). */
#panel-route .spec.neutron { color:var(--neutron); }
/* Spectral letter + fuel icon on one baseline-centred line (icon to the right). */
#panel-route .starcell { display:inline-flex; align-items:center; gap:5px; }
#panel-route .fuel { color:var(--ok); flex:none; }
/* In-system scoop (neutron with a scoopable companion): green fuel-pump (the
   scooping colour), help cursor shows the companion distance tooltip. */
#panel-route .inflight-scoop { display:inline-flex; cursor:help; }
/* Companion-neutron arrival distance ("@120 Ls"): muted neutron-blue, help cursor. */
#panel-route .arrls { color:var(--neutron); opacity:.8; font-size:11px; cursor:help; white-space:nowrap; }
/* In-system scoop distance reuses .arrls but in the fuel (green) colour. */
#panel-route .arrls.scoop-ls { color:var(--ok); }
/* FSD synthesis injection: violet delta icon (distinct from neutron-amber and
   fuel-green) on a jump that needs it, and
   the summary bar listing how many of each grade the route requires. */
#panel-route .inject-badge { display:inline-flex; vertical-align:-2px; margin-left:4px; cursor:help; color:#c495f6; }
#panel-route svg.inject { display:inline-block; }
#panel-route .injectbar { margin:8px 0 2px; font-size:13px; color:var(--text); display:flex; flex-direction:column; gap:4px; align-items:flex-start; }
#panel-route .injectbar svg.inject { color:#c495f6; vertical-align:-2px; margin-right:2px; }
#panel-route .injectbar .injectmats { color:var(--muted); font-size:12px; }
/* FSD-injection grade picker: a radio group so each in-game synthesis icon
   (1/2/3 bars, button-icon blue) sits inline with its label instead of looking
   bolted onto a native <select> (which can't show icons). */
#panel-route .inject-radios { display:flex; flex-direction:column; gap:4px; }
#panel-route .inj-opt { display:flex; align-items:center; gap:7px; cursor:pointer;
  padding:5px 9px; border:1px solid rgba(255,255,255,.1); border-radius:8px;
  font-size:13px; color:var(--text); }
#panel-route .inj-opt:hover { background:rgba(255,255,255,.04); }
#panel-route .inj-opt input { accent-color:#1294d6; margin:0; width:14px; height:14px; flex:none; }
#panel-route .inj-opt img { height:15px; width:auto; }
#panel-route .inj-opt .inj-txt { white-space:nowrap; }
#panel-route .inj-opt .inj-txt small { color:var(--muted); font-size:11px; }
#panel-route .inj-opt:has(input:checked) { border-color:#1294d6; background:rgba(18,148,214,.12); }
/* Options layout: the three short controls stack in one column, the taller FSD
   radio group sits beside them, so the row stays balanced and wraps on narrow. */
#panel-route .route-opts { display:flex; flex-wrap:wrap; gap:16px 24px; align-items:flex-start; }
#panel-route .opts-short { display:flex; flex-direction:column; gap:12px; flex:1 1 220px; min-width:200px; }
#panel-route .opt-field { display:flex; flex-direction:column; gap:6px; }
#panel-route .opts-inject { flex:1 1 220px; min-width:200px; }
/* Fuel-safe toggle + an (i) info bubble; the long explainer lives in its hover/
   focus tooltip instead of a wall of text under the row. */
#panel-route .fuelsafe-row { display:flex; align-items:center; gap:8px; }
#panel-route .help-tip { position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; border-radius:50%; border:1px solid var(--accent); color:var(--accent);
  font:italic 700 11px/1 Georgia, serif; cursor:help; user-select:none; }
#panel-route .help-tip .tip { position:absolute; top:calc(100% + 8px); left:0; z-index:30; width:340px; max-width:72vw;
  padding:10px 12px; border-radius:8px; background:#0c1218; border:1px solid rgba(255,255,255,.12);
  color:var(--muted); font-style:normal; font-weight:400; font-size:12px; line-height:1.5;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
  opacity:0; visibility:hidden; transition:opacity .12s; pointer-events:none; }
#panel-route .help-tip:hover .tip, #panel-route .help-tip:focus .tip, #panel-route .help-tip:focus-within .tip {
  opacity:1; visibility:visible; }
#panel-route .help-tip .tip b { color:var(--text); font-weight:600; }

/* Icons inherit gray-100 (#f3f4f6); .55 at rest, full on row/icon hover. */
#panel-route .copy-btn { all:unset; cursor:pointer; color:#f3f4f6; opacity:.55; margin-left:8px;
            vertical-align:-2px; transition:opacity .15s; }
#panel-route tr:hover .copy-btn, #panel-route .copy-btn:hover, #panel-route .copy-btn:focus { opacity:1; }

/* Trailing per-row actions, same set as the neighbors search results.
   Full brightness (no dimming) -- the icons read too faint otherwise. */
#panel-route td.acts { white-space:nowrap; text-align:right; }
#panel-route .act-btn { all:unset; cursor:pointer; color:#f3f4f6; padding:2px 4px; vertical-align:-2px; }

/* Small toggle switch (compact <-> all jumps). */
#panel-route .switch { display:inline-flex; align-items:center; gap:7px; cursor:pointer; color:var(--muted);
          font-size:11px; text-transform:uppercase; letter-spacing:.5px; user-select:none; }
#panel-route .switch input { position:absolute; opacity:0; pointer-events:none; }
#panel-route .switch .track { width:30px; height:16px; border-radius:999px; background:rgba(255,255,255,.08);
                 border:1px solid var(--dim); position:relative; transition:all .15s; }
#panel-route .switch .track::after { content:""; position:absolute; top:1px; left:1px; width:12px; height:12px;
                        border-radius:50%; background:var(--muted); transition:all .15s; }
#panel-route .switch input:checked + .track { background:rgba(128,196,230,.25); border-color:var(--accent); }
#panel-route .switch input:checked + .track::after { left:15px; background:var(--accent); }

#panel-route .msg { margin-top:16px; padding:12px 14px; border-radius:10px; border:1px solid var(--line); background:var(--panel); }
#panel-route .msg.err { border-color:#7a2f33; } #panel-route .msg.warn { border-color:#7a5f27; }
#panel-route .tiny { color:var(--muted); font-size:12px; }