/* ===== FLEET — pit-wall race-ops board (was the org-chart panel) ===== */
/* Status tokens: color reads BEFORE text. Green live, amber your-move (pulses),
   cool gray quiet/resting, red dead. */
/* .tasks-board rides the same surface — the Tasks board is the Fleet's
   sibling (one definition, two scopes, the comma-extension convention). */
.org-chart,
.tasks-board {
  /* fleet-* tokens now live in :root (shared with the Scoreboard) */
  padding: 14px 16px 96px; overflow-y: auto; height: 100%;
  /* Layered maroon surface + a faint scanline texture for pit-wall atmosphere. */
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.16) 0 1px, transparent 1px 3px),
    radial-gradient(1200px 500px at 15% -10%, rgba(120,26,26,0.55), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(60,18,18,0.6), transparent 55%),
    linear-gradient(180deg, #2a1616 0%, #1f1111 100%);
}

/* View title in the brand Black — big, uppercase, tight. */
#view-org .view-header h2,
#view-tasks .view-header h2 {
  font-family: var(--fleet-ink); font-weight: 900; text-transform: uppercase;
  letter-spacing: 0.10em; font-size: 1.35rem;
}

/* ---- NEEDS YOU strip: anything waiting on Jase, unmissable ---- */
.fleet-needs {
  margin: 0 0 18px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--fleet-hair);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.14));
  animation: fleet-rise 0.5s cubic-bezier(.2,.7,.2,1) both;
}
.fleet-needs.has-needs {
  border-color: rgba(254,202,87,0.55);
  background:
    linear-gradient(180deg, rgba(254,202,87,0.14), rgba(254,202,87,0.03)),
    linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.20));
  box-shadow: 0 0 0 1px rgba(254,202,87,0.18), 0 10px 30px -18px rgba(254,202,87,0.5);
}
.fleet-needs-title {
  font-family: var(--fleet-ink); font-weight: 900; text-transform: uppercase;
  letter-spacing: 0.16em; font-size: 0.72rem; color: var(--fleet-your-move);
  margin-bottom: 8px;
}
.fleet-needs.has-needs .fleet-needs-title::before {
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 8px; background: var(--fleet-your-move); vertical-align: middle;
  box-shadow: 0 0 8px var(--fleet-your-move); animation: fleet-pulse 1.3s ease-in-out infinite;
}
.fleet-needs-row { display: flex; flex-wrap: wrap; gap: 8px; }
.fleet-need {
  display: inline-flex; align-items: baseline; gap: 8px; cursor: pointer;
  padding: 7px 12px; border-radius: 9px; color: var(--text-primary);
  background: rgba(254,202,87,0.10); border: 1px solid rgba(254,202,87,0.45);
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
}
.fleet-need:hover { transform: translateY(-1px); background: rgba(254,202,87,0.18);
  box-shadow: 0 8px 20px -12px rgba(254,202,87,0.7); }
.fleet-need-room { font-family: var(--fleet-ink); font-weight: 500; font-size: 0.9rem; }
.fleet-need-panes { font-family: var(--fleet-text); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.06em;
  color: var(--fleet-your-move); }
.fleet-needs-empty { font-family: var(--fleet-text); font-size: 0.82rem; color: var(--text-muted); opacity: 0.7; font-style: italic; }

/* Live-poll re-renders paint FLAT: the staggered fleet-rise reveal runs on view
   entry only. Without this, the 5s poll rebuilds the board and every card/section
   re-animates — a strobe. Kills only the entry reveal on these elements; the live
   fleet-pulse status indicators (on ::before pseudos) keep animating. */
#org-chart.fleet-static .fleet-needs,
#org-chart.fleet-static .fleet-section,
#org-chart.fleet-static .fleet-card { animation: none; }

/* ---- sections: CREW / OPS / PROJECTS ---- */
.fleet-section {
  margin-bottom: 22px;
  animation: fleet-rise 0.5s cubic-bezier(.2,.7,.2,1) both;
  animation-delay: calc(0.06s * var(--s, 0) + 0.08s);
}
.fleet-section-head {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px;
  padding-bottom: 6px; border-bottom: 1px solid var(--fleet-hair);
}
.fleet-section-label {
  font-family: var(--fleet-ink); font-weight: 900; text-transform: uppercase;
  letter-spacing: 0.14em; font-size: 0.95rem; color: var(--text-primary);
}
.fleet-section-count { font-family: var(--fleet-text); font-weight: 600; font-size: 0.68rem; letter-spacing: 0.04em;
  color: var(--text-muted); text-transform: uppercase; }

.fleet-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 10px;
}

/* ---- cards: color rail first, then text ---- */
.fleet-card {
  position: relative; padding: 11px 13px 12px 16px; border-radius: 11px;
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
  border: 1px solid var(--fleet-hair); overflow: hidden;
  transition: transform .14s ease, box-shadow .18s ease, border-color .18s ease;
  cursor: pointer;
  animation: fleet-rise 0.42s cubic-bezier(.2,.7,.2,1) both;
  animation-delay: calc(0.04s * var(--i, 0) + 0.12s);
}
.fleet-card::before { /* 4px status rail down the left edge */
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--rail, var(--fleet-none));
}
.fleet-card:hover { border-color: rgba(255,255,255,0.16);
  box-shadow: 0 14px 34px -20px rgba(0,0,0,0.8); }
.fleet-rail-working   { --rail: var(--fleet-working); }
.fleet-rail-your-move { --rail: var(--fleet-your-move); }
.fleet-rail-waiting   { --rail: var(--fleet-waiting); }
.fleet-rail-resting   { --rail: var(--fleet-resting); }
.fleet-rail-dead      { --rail: var(--fleet-dead); }
.fleet-rail-none      { --rail: var(--fleet-none); }
.fleet-rail-your-move::before { animation: fleet-pulse 1.3s ease-in-out infinite; }

.fleet-card-head { display: flex; align-items: center; gap: 6px; min-height: 20px; }
.fleet-room { font-family: var(--fleet-ink); font-weight: 500; font-size: 0.95rem;
  letter-spacing: 0.01em; color: var(--text-primary); }
.fleet-badge {
  font-family: var(--fleet-text); margin-left: auto; padding: 1px 7px; border-radius: 7px; font-size: 0.62rem;
  letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap;
  background: rgba(255,255,255,0.05); border: 1px solid var(--fleet-hair); color: var(--text-muted);
}
.fleet-badge + .fleet-badge { margin-left: 5px; }
.fleet-badge-local { color: var(--accent-yellow); border-color: rgba(254,202,87,0.35); }
.fleet-badge-tier { font-size: 0.8rem; padding: 0 6px; color: #d9a7ff; border-color: rgba(217,167,255,0.3); }

.fleet-card-meta { display: flex; align-items: center; gap: 8px; margin-top: 7px; min-height: 16px; }
.fleet-status {
  font-family: var(--fleet-text); font-weight: 600; font-size: 0.62rem;
  letter-spacing: 0.06em; text-transform: uppercase; padding: 1px 7px; border-radius: 5px;
  color: #120c0c;
}
.fleet-status-working   { background: var(--fleet-working); }
.fleet-status-your-move { background: var(--fleet-your-move); }
.fleet-status-waiting   { background: var(--fleet-waiting); color: #efeaea; }
.fleet-status-resting   { background: var(--fleet-resting); color: #efeaea; }
.fleet-status-dead      { background: var(--fleet-dead); }
.fleet-status-unknown   { background: var(--fleet-none); color: var(--text-muted); }

.fleet-lamps { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; }
.fleet-lamp { display: inline-flex; align-items: center; gap: 3px; }
.fleet-lamp-tag { font-family: var(--fleet-text); font-size: 0.56rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--text-muted); }

/* Self-declared activity line — sits between the lamps and the goal, styled to
   read quietly: smaller + dimmer than the goal. Populated by the rotation
   controller (org.js); an empty container collapses so idle rooms stay clean.
   Pit Wall tokens only — no new colors. */
.fleet-activity {
  font-family: var(--fleet-text); margin-top: 7px; font-size: 0.72rem; line-height: 1.3;
  color: var(--text-muted); letter-spacing: 0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: opacity 0.18s ease;
}
.fleet-activity:empty { display: none; }
.fleet-activity-dim { opacity: 0; }   /* rotation swap: dip → repaint → restore */

.fleet-goal {
  font-family: var(--fleet-text); margin-top: 9px; font-size: 0.82rem; color: var(--text-secondary); line-height: 1.36;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.fleet-goal-unset { font-style: normal; color: var(--text-muted); opacity: 0.55; }
.fleet-goal-editable { cursor: text; }
.fleet-goal-editable:hover { color: var(--text-primary); }
.fleet-goal-editable.fleet-goal-unset:hover { opacity: 0.85; }
.fleet-goal-error { color: var(--accent-red); }
.fleet-goal-input {
  width: 100%; font: inherit; font-family: var(--fleet-text); color: var(--text-primary);
  resize: none; background: rgba(0,0,0,0.3); border: 1px solid rgba(254,202,87,0.4);
  border-radius: 6px; padding: 5px 7px; margin-top: 7px;
}

/* ---- garage: dormant rooms as slim chips ---- */
/* Garage = collapsed-by-default <details> dropdown: dead/sleeping rooms out of
   sight until tapped. Native, no JS. */
.fleet-garage {
  margin-top: 10px; border-radius: 9px; overflow: hidden;
  background: rgba(0,0,0,0.22); border: 1px dashed var(--fleet-hair);
}
.fleet-garage-toggle {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 7px; padding: 7px 11px;
  font-family: var(--fleet-text); font-weight: 600; font-size: 0.62rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted);
  transition: color .15s ease, background .15s ease;
}
.fleet-garage-toggle::-webkit-details-marker { display: none; }
.fleet-garage-toggle::before { content: '▸'; font-size: 0.7rem; opacity: 0.8; transition: transform .15s ease; }
.fleet-garage[open] .fleet-garage-toggle::before { transform: rotate(90deg); }
.fleet-garage-toggle:hover { color: var(--text-secondary); background: rgba(255,255,255,0.03); }
.fleet-garage-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 11px 10px; }
.fleet-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px;
  border-radius: 999px; font-size: 0.74rem; color: var(--text-muted); cursor: pointer;
  background: rgba(255,255,255,0.03); border: 1px solid var(--fleet-hair);
}
.fleet-chip-name { font-family: var(--fleet-text); font-weight: 500; color: var(--text-secondary); }
.fleet-chip-tag { font-family: var(--fleet-text); font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.7; }
.fleet-chip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--fleet-none); }
.fleet-chip-dead .fleet-chip-dot { background: var(--fleet-dead); opacity: 0.7; }
.fleet-chip-asleep .fleet-chip-dot { background: var(--fleet-waiting); }

.fleet-empty { padding: 28px; text-align: center; color: var(--text-muted); }

@keyframes fleet-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fleet-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) {
  .fleet-needs, .fleet-section, .fleet-card { animation: none; }
  .fleet-rail-your-move::before, .fleet-needs.has-needs .fleet-needs-title::before { animation: none; }
}

/* ---- mobile: single column, NEEDS YOU stays first ---- */
@media (max-width: 640px) {
  .org-chart { padding: 12px 12px 96px; }
  .fleet-grid { grid-template-columns: 1fr; }
  #view-org .view-header h2 { font-size: 1.15rem; }
}