/* Fleet Command widget — a floating status panel in the RIGHT gutter beside the centered hero,
   mirroring the scale widget in the left gutter ("one widget on each side"). The hero/logo are
   never touched or pushed. Engineering styling built entirely from the app's theme tokens
   (var(--panel/--text/--accent/--good/--warn/--bad …)) so it re-skins with every theme.
   position:fixed + JS-set `left`; hidden on narrow screens / when the gutter can't hold it.
   Minimizable (collapsed state persisted). */

.fleetCmd{ display:none; }                        /* base off; shown by the desktop query below */
.fleetCmd[hidden]{ display:none !important; }      /* JS relevance gate */
.fleetCmd.fcwOffscreen{ display:none !important; } /* JS: gutter too small to float without overlap */

/* The old floating .fleetCmdFab was replaced by the hero lower-right corner launcher (#heroFleetCorner,
   styled inline in index.html), which is now the single Fleet Command entry point on every viewport. */

@media (min-width:1024px){
  .fleetCmd{
    --fcw-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
    display:flex; flex-direction:column; gap:16px;
    position:fixed; top:96px; left:22px; z-index:50; width:470px;   /* a touch wider than the scale widget */
    isolation:isolate;
    padding:21px 18px 20px;
    text-align:left;
    color:var(--text);
    border:1px solid var(--line);
    border-radius:15px;
    background:
      linear-gradient(163deg, color-mix(in srgb, var(--panel) 90%, var(--accent) 4%), var(--panel2));
    box-shadow:0 14px 34px rgba(0,0,0,.20), inset 0 1px 0 color-mix(in srgb, var(--text) 8%, transparent);
    overflow:hidden;
  }
  /* faint engineering grid texture */
  .fleetCmd::before{
    content:""; position:absolute; inset:0; z-index:-1; opacity:.5; pointer-events:none;
    background-image:
      linear-gradient(color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1px),
      linear-gradient(90deg, color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1px);
    background-size:22px 22px; mask-image:linear-gradient(180deg, #000, transparent 78%);
  }
  /* accent hairline across the very top */
  .fleetCmd::after{
    content:""; position:absolute; left:0; right:0; top:0; height:2px; z-index:1;
    background:linear-gradient(90deg, transparent, var(--accent), var(--accent2), transparent);
    opacity:.85;
  }

  /* corner registration ticks */
  .fcwEdge{ position:absolute; width:9px; height:9px; z-index:2; border:1.5px solid color-mix(in srgb, var(--accent) 60%, var(--line)); opacity:.75; }
  .fcwEdge--tl{ top:6px; left:6px; border-right:0; border-bottom:0; }
  .fcwEdge--tr{ top:6px; right:6px; border-left:0; border-bottom:0; }
  .fcwEdge--bl{ bottom:6px; left:6px; border-right:0; border-top:0; }
  .fcwEdge--br{ bottom:6px; right:6px; border-left:0; border-top:0; }

  .fcwScan{ position:absolute; left:0; right:0; top:0; height:36%; z-index:0; pointer-events:none;
    background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent);
    opacity:.5; animation:fcwScan 5.5s ease-in-out infinite; }

  /* header */
  .fcwHead{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .fcwHeadRight{ display:inline-flex; align-items:center; gap:7px; }
  .fcwMinBtn{ appearance:none; cursor:pointer; width:22px; height:22px; flex:none; display:grid; place-items:center;
    padding:0; border-radius:6px; border:1px solid var(--line); background:color-mix(in srgb, var(--panel) 60%, transparent);
    color:var(--muted); transition:color .14s ease, border-color .14s ease, background .14s ease; }
  .fcwMinBtn svg{ width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .18s ease; }
  .fcwMinBtn:hover{ color:var(--text); border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); }
  .fcwMinBtn:focus-visible{ outline:2px solid color-mix(in srgb, var(--accent) 40%, transparent); outline-offset:2px; }
  .fleetCmd.fcwMin .fcwMinBtn svg{ transform:rotate(-90deg); }   /* chevron points right when collapsed */
  /* collapsed: header-only bar (status still visible); Fleet View button stays the way in */
  .fleetCmd.fcwMin{ gap:0; }
  .fleetCmd.fcwMin .fcwScan{ display:none; }
  .fleetCmd.fcwMin > .fcwMeta,
  .fleetCmd.fcwMin > .fcwStats,
  .fleetCmd.fcwMin > .fcwJob,
  .fleetCmd.fcwMin > .fcwTelem,
  .fleetCmd.fcwMin > .fcwConns,
  .fleetCmd.fcwMin > .fcwCta{ display:none !important; }
  .fcwId{ display:inline-flex; align-items:center; gap:8px; }
  .fcwId b{ font-size:.72rem; font-weight:800; letter-spacing:.19em; color:var(--text); }
  .fcwMark{ width:27px; height:27px; overflow:hidden; border-radius:7px;
    border:1px solid color-mix(in srgb, var(--accent) 32%, var(--line)); background:#0d1117; }
  .fcwMark img{ width:100%; height:100%; object-fit:cover; display:block; }

  .fcwState{ display:inline-flex; align-items:center; gap:6px; font-family:var(--fcw-mono);
    font-size:.56rem; font-weight:700; letter-spacing:.16em; color:var(--muted);
    padding:3px 8px; border-radius:999px; border:1px solid var(--line); background:color-mix(in srgb, var(--panel) 70%, transparent); }
  .fcwLed{ width:7px; height:7px; border-radius:50%; background:var(--muted); box-shadow:0 0 7px currentColor; }
  .fcwState--run{ color:var(--good); border-color:color-mix(in srgb, var(--good) 40%, var(--line)); }
  .fcwState--run .fcwLed{ background:var(--good); animation:fcwPulse 1.6s ease-in-out infinite; }
  .fcwState--bad{ color:var(--bad); border-color:color-mix(in srgb, var(--bad) 45%, var(--line)); }
  .fcwState--bad .fcwLed{ background:var(--bad); animation:fcwPulse 1s ease-in-out infinite; }
  .fcwState--idle .fcwLed{ background:var(--accent2); }

  .fcwMeta{ display:flex; align-items:center; justify-content:space-between; gap:8px;
    font-family:var(--fcw-mono); font-size:.58rem; letter-spacing:.08em; color:var(--muted); }
  .fcwMeta span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .fcwClock{ color:var(--accent2); font-variant-numeric:tabular-nums; letter-spacing:.1em; flex:none; }

  /* status counts */
  .fcwStats{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
  .fcwStat{ position:relative; padding:16px 6px 14px; text-align:center; border-radius:9px;
    border:1px solid var(--line); background:color-mix(in srgb, var(--panel) 55%, transparent); overflow:hidden; }
  .fcwStat b{ display:block; font-family:var(--fcw-mono); font-size:1.32rem; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; color:var(--text); }
  .fcwStat span{ display:block; margin-top:4px; font-size:.5rem; font-weight:700; letter-spacing:.12em; color:var(--muted); }
  .fcwStat::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--line); }
  .fcwStat--run.is-hot::before{ background:var(--good); box-shadow:0 0 9px var(--good); }
  .fcwStat--run.is-hot b{ color:var(--good); }
  .fcwStat--attn.is-hot::before{ background:var(--bad); box-shadow:0 0 9px var(--bad); }
  .fcwStat--attn.is-hot b{ color:var(--bad); }

  /* active job */
  .fcwJob{ padding:16px 13px; border-radius:10px; border:1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
    background:color-mix(in srgb, var(--accent) 7%, var(--panel)); display:flex; flex-direction:column; gap:6px; }
  .fcwJobTop{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .fcwJobTag{ font-family:var(--fcw-mono); font-size:.54rem; font-weight:700; letter-spacing:.14em; color:var(--good); }
  .fcwJobPct{ font-family:var(--fcw-mono); font-size:.82rem; font-weight:800; color:var(--text); font-variant-numeric:tabular-nums; }
  .fcwJobName{ font-size:.82rem; font-weight:700; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .fcwBar{ height:6px; border-radius:999px; overflow:hidden; background:color-mix(in srgb, var(--text) 12%, transparent); }
  .fcwBar i{ display:block; height:100%; width:0; border-radius:999px;
    background:linear-gradient(90deg, var(--accent), var(--accent2)); transition:width .6s cubic-bezier(.4,0,.2,1); }
  .fcwBar--indet{ position:relative; }
  .fcwBar--indet::after{ content:""; position:absolute; inset:0;
    background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--panel) 70%, transparent), transparent);
    animation:fcwSweep 1.3s linear infinite; }
  .fcwJobFoot{ display:flex; align-items:center; justify-content:space-between; gap:8px;
    font-family:var(--fcw-mono); font-size:.56rem; letter-spacing:.06em; color:var(--muted); }
  .fcwJobMore{ color:var(--accent2); }

  /* telemetry */
  .fcwTelem{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; padding-top:2px; }
  .fcwTel{ display:flex; flex-direction:column; gap:4px; padding:14px 9px 13px; border-radius:9px;
    border:1px solid var(--line); background:color-mix(in srgb, var(--panel) 45%, transparent); }
  .fcwTel span{ font-size:.48rem; font-weight:700; letter-spacing:.11em; color:var(--muted); }
  .fcwTel b{ font-family:var(--fcw-mono); font-size:.82rem; font-weight:800; color:var(--text); font-variant-numeric:tabular-nums; }
  .fcwTel b i{ font-style:normal; font-size:.62em; color:var(--muted); font-weight:700; }

  /* linked integrations */
  .fcwConns{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
  .fcwConnLabel{ font-family:var(--fcw-mono); font-size:.5rem; font-weight:700; letter-spacing:.13em; color:var(--muted); }
  .fcwChip{ display:inline-flex; align-items:center; gap:5px; padding:3px 8px; border-radius:999px;
    font-family:var(--fcw-mono); font-size:.54rem; font-weight:700; letter-spacing:.09em; color:var(--text);
    border:1px solid color-mix(in srgb, var(--good) 34%, var(--line)); background:color-mix(in srgb, var(--good) 8%, transparent); }
  .fcwChipDot{ width:6px; height:6px; border-radius:50%; background:var(--good); box-shadow:0 0 6px var(--good); }

  /* CTA — sinks to the bottom (margin-top:auto) so when the panel is stretched to match the scale
     widget's height, the extra room opens above the button rather than leaving a gap below it. */
  .fcwCta{ appearance:none; cursor:pointer; margin-top:auto; width:100%;
    padding:10px 12px; border:0; border-radius:11px;
    font-family:var(--fcw-mono); font-size:.66rem; font-weight:800; letter-spacing:.14em;
    color:var(--button-text, #06121f);
    background:linear-gradient(135deg, var(--accent), var(--accent2));
    box-shadow:0 8px 20px color-mix(in srgb, var(--accent) 32%, transparent);
    transition:transform .14s ease, box-shadow .14s ease, filter .14s ease; }
  .fcwCta span{ display:inline-block; transition:transform .14s ease; }
  .fcwCta:hover{ transform:translateY(-1px); box-shadow:0 12px 26px color-mix(in srgb, var(--accent) 44%, transparent); filter:brightness(1.04); }
  .fcwCta:hover span{ transform:translateX(3px); }
  .fcwCta:focus-visible{ outline:3px solid color-mix(in srgb, var(--accent) 40%, transparent); outline-offset:2px; }
}

@keyframes fcwScan{ 0%,100%{ transform:translateY(-8%); opacity:.28; } 50%{ transform:translateY(210%); opacity:.5; } }
@keyframes fcwPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
@keyframes fcwSweep{ 0%{ transform:translateX(-100%); } 100%{ transform:translateX(100%); } }

@media (prefers-reduced-motion: reduce){
  .fcwScan, .fcwState .fcwLed, .fcwBar--indet::after{ animation:none !important; }
  .fcwCta, .fcwBar i, .fcwCta span{ transition:none !important; }
}