/* Fleet Home card (js/fleet-card.js). Shared by V1, V2 and V3: the host card
 * chrome (.bento-card / .card) comes from each dashboard, so this only lays
 * out the inside and reads each dashboard's own colour tokens with fallbacks. */
.fleet-card[hidden] { display: none !important; }
.fleet-card {
  --fc-muted: var(--text-3, var(--text-muted, #9196a5));
  --fc-soft: var(--text-2, var(--text-muted, #a3acb3));
  --fc-line: var(--line, var(--border, rgba(255, 255, 255, .1)));
  --fc-accent: var(--cyan, var(--accent, #67e8f9));
}
.fleet-card-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.fleet-card-note, .fleet-card-empty p, .fleet-card-fine, .fleet-card-where { color: var(--fc-soft); font-size: 13px; line-height: 1.5; margin: 0; }
.fleet-card-note { margin: 6px 0 4px; }
.fleet-card-empty { display: flex; align-items: center; gap: 12px; }
.fleet-card-glyph { width: 38px; height: 38px; flex: 0 0 38px; color: var(--fc-muted); }
.fleet-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.fleet-card-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 8px;
  border: 1px solid var(--fc-line); background: transparent; color: inherit;
  font: inherit; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.fleet-card-btn:hover { border-color: var(--fc-accent); }
.fleet-card-btn.primary { border-color: var(--fc-accent); color: var(--fc-accent); }
.fleet-card-btn.danger { border-color: #f87171; color: #f87171; }
.fleet-card-btn:disabled { opacity: .6; cursor: default; }
.fleet-card-btn:focus-visible, .fleet-card-link:focus-visible, .fleet-card-form input:focus-visible { outline: 2px solid var(--fc-accent); outline-offset: 2px; }
.fleet-card-foot, .fleet-card-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--fc-line); font-size: 12px; color: var(--fc-muted); }
.fleet-card-confirm span { flex: 1 1 220px; }
.fleet-card-link { background: none; border: 0; padding: 0; color: var(--fc-muted); font: inherit; font-size: 12px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.fleet-card-link:hover { color: inherit; }
.fleet-card-pilot { display: flex; align-items: center; gap: 14px; }
.fleet-card-art { position: relative; flex: 0 0 120px; height: 72px; display: grid; place-items: center; }
.fleet-card-art .fleet-card-ship { max-width: 120px; max-height: 72px; object-fit: contain; }
.fleet-card-art.has-ship .fleet-card-glyph { display: none; }
.fleet-card-art .fleet-card-ship + .fleet-card-glyph { position: absolute; }
.fleet-card-who { min-width: 0; }
.fleet-card-name { font-size: 17px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.fleet-card-sub { color: var(--fc-soft); font-size: 12.5px; margin-top: 2px; }
.fleet-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; font-size: 11.5px; }
.fleet-card-tag { border: 1px solid var(--fc-line); border-radius: 999px; padding: 1px 8px; color: var(--fc-soft); }
.fleet-card-live, .fleet-card-seen { display: inline-flex; align-items: center; gap: 5px; color: var(--fc-muted); }
.fleet-card-dot { width: 7px; height: 7px; border-radius: 50%; background: #34d399; }
.fleet-card-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.fleet-card-stat { display: flex; flex-direction: column; min-width: 0; }
.fleet-card-stat-v { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fleet-card-stat-l { font-size: 11px; color: var(--fc-muted); }
.fleet-card-where { margin-top: 8px; font-size: 12px; }
.fleet-card-form ol { margin: 0 0 8px; padding-left: 18px; font-size: 13px; line-height: 1.55; color: var(--fc-soft); }
.fleet-card-form a { color: var(--fc-accent); }
.fleet-card-row { display: flex; flex-wrap: wrap; gap: 8px; }
.fleet-card-form input { flex: 1 1 200px; min-width: 0; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--fc-line); background: transparent; color: inherit; font: 13px ui-monospace, Menlo, monospace; }
.fleet-card-error { color: #f87171; font-size: 12.5px; margin-top: 8px; }
.fleet-card-fine { margin-top: 8px; font-size: 11.5px; color: var(--fc-muted); }
/* V1 hangs the card full-width under the grid: one row of six stats reads better. */
.fleet-card-v1 .fleet-card-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 760px) { .fleet-card-v1 .fleet-card-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .fleet-card-pilot { align-items: flex-start; }
  .fleet-card-art { flex-basis: 84px; height: 54px; }
  .fleet-card-art .fleet-card-ship { max-width: 84px; max-height: 54px; }
}