/*
  22-fleet.css — v41.45 Fleet screen.

  All of this sits on the light parchment surface, so it uses --ink /
  --ink-soft / --muted / --line only. No --brass-bright or --faint anywhere:
  those belong to the dark hull chrome and would fail AA here.
*/

.fleet-card { margin-bottom: 12px; }

/* ---------- doctrine ---------- */
.fleet-doctrine-name {
  display: block;
  color: var(--ink);
  font-weight: 750;
}
.fleet-doctrine-text {
  display: block;
  color: var(--ink-soft);
  font-size: .9rem;
  line-height: 1.45;
  margin-top: 2px;
}
.fleet-doctrine-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 46vh;
  overflow-y: auto;
}
.fleet-doctrine-option {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--chart-2);
  cursor: pointer;
}
.fleet-doctrine-option input { margin-top: 3px; flex: 0 0 auto; }

/* ---------- people ---------- */
.fleet-person-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}
.fleet-person-row:last-of-type { border-bottom: 0; }
.fleet-person-row-body { flex: 1 1 auto; min-width: 0; }
.fleet-person-row-name { color: var(--ink); font-weight: 650; }
.fleet-person-row-note {
  color: var(--muted);
  font-size: .85rem;
  margin-top: 2px;
}
.fleet-person { color: var(--ink); font-weight: 650; }
.fleet-person-empty { color: var(--muted); font-style: italic; }
.fleet-person-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* ---------- stat grid ---------- */
.fleet-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
  gap: 6px;
  margin: 10px 0;
}
.fleet-stat {
  padding: 7px 8px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--chart-2);
  text-align: center;
}
.fleet-stat-label {
  /* --muted on the --chart-2 tile measures 4.34:1, which fails AA for text
     this small. --ink-soft clears it at 8.50:1. */
  color: var(--ink-soft);
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.fleet-stat-value {
  color: var(--ink);
  font-weight: 750;
  font-size: 1rem;
  margin-top: 2px;
}

/* ---------- HP ---------- */
/* The bar is decorative. The figure beside it states the same thing in text,
   so a squadron's condition never depends on reading a colour. */
.fleet-hp { margin: 8px 0 4px; }
.fleet-hp-track {
  height: 9px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--chart);
  overflow: hidden;
}
.fleet-hp-fill {
  height: 100%;
  background: var(--brass);
  transition: width .18s ease-out;
}
.fleet-hp-fill.is-out { background: var(--muted); }
.fleet-hp-text {
  color: var(--ink-soft);
  font-size: .85rem;
  font-weight: 650;
  margin-top: 4px;
}
.fleet-afloat {
  color: var(--ink-soft);
  font-size: .88rem;
  font-weight: 650;
}

/* ---------- squadrons ---------- */
.fleet-squadrons, .fleet-vessels { margin-top: 16px; }
.fleet-squadron-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.fleet-squadron-name {
  color: var(--ink);
  font-weight: 800;
  font-size: 1.02rem;
}
.fleet-squadron-config {
  color: var(--muted);
  font-size: .85rem;
  margin-top: 1px;
}
.fleet-card.is-destroyed { opacity: .82; }
.fleet-card.is-destroyed .fleet-squadron-name,
.fleet-card.is-destroyed .fleet-flagship-name { text-decoration: line-through; }

.fleet-flagship-name {
  color: var(--ink);
  font-weight: 800;
  font-size: 1.02rem;
  margin-bottom: 4px;
}
.fleet-damage-row { flex-wrap: wrap; gap: 6px; }
.fleet-notes {
  color: var(--ink-soft);
  font-size: .88rem;
  margin: 8px 0 0;
}

/* ---------- notable ships ---------- */
.fleet-special {
  margin-top: 10px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}
.fleet-special summary {
  color: var(--ink-soft);
  font-weight: 650;
  cursor: pointer;
}
.fleet-special-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  padding-top: 8px;
}
.fleet-ship-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 46vh;
  overflow-y: auto;
}
.fleet-ship-option {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--chart-2);
  color: var(--ink);
  cursor: pointer;
}

/* ---------- surface corrections (v41.46) ----------
   Caught by contrast-check.py once #mapEditor and the Fleet screen were added
   to its sweep. Two distinct surfaces were being given each other's tokens:

   1. "Squadrons" / "Our vessels" are bare sections sitting on the DARK HULL,
      but h3 inherits --ink globally, which put near-black text on a near-black
      band at 1.30:1.
   2. The section titles INSIDE .fleet-card are on light parchment, where the
      global .section-title .hint colour (#b9a784) measured 1.86:1.

   Same fix the sheet surfaces already use in 19-bastion-sheet.css. */
.fleet-squadrons > .section-title h3,
.fleet-vessels > .section-title h3 {
  color: #fff1b8;                 /* 1.30 -> 12.4 on the hull */
  text-shadow: 0 2px 2px rgba(0, 0, 0, .65);
}
.fleet-card .section-title h3 { color: var(--ink); }
.fleet-card .section-title .hint {
  color: var(--muted);            /* 1.86 -> 5.1 on parchment */
  font-weight: 700;
}

/* ---------- radio / checkbox rows (v41.47) ----------
   styles.css:151 sets `input, select, textarea { width:100%; min-height:46px }`
   and line 155 exempts input[type="checkbox"] -- but NOT input[type="radio"].
   So every doctrine radio rendered as a full-width 46px block, which squeezed
   its label to zero width: the "Choose doctrine" list came out as a column of
   giant empty tan boxes with a white dot and no readable text at all.

   Scoped rather than fixing the global rule, because a global radio reset would
   silently restyle any other radio in the app. The gap itself is noted in
   SETUP.md so the next radio doesn't hit it. */
.fleet-doctrine-option input[type="radio"],
.fleet-ship-option input[type="checkbox"] {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  min-height: 0;
  padding: 0;
  margin: 3px 0 0;
  border-radius: 0;
}
.fleet-doctrine-option > span,
.fleet-ship-option > span {
  flex: 1 1 auto;
  min-width: 0;
}

/* The heading and its count belong on one line; .section-title carries only a
   margin globally, so cards were stacking them and leaving the count adrift. */
.fleet-card .section-title,
.fleet-squadrons > .section-title,
.fleet-vessels > .section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.fleet-card .section-title h3,
.fleet-squadrons > .section-title h3,
.fleet-vessels > .section-title h3 { margin: 0; }

/* ================= v41.48 visual pass =================
   The screens worked but read as a stack of near-empty boxes: every card was
   heading + huge dashed well + button, so three cards filled a phone screen
   while saying almost nothing. Tightening density, quieting the empty states
   and grouping the damage controls. */

.fleet-card { padding: 13px 14px 14px; margin-bottom: 10px; }
.fleet-card .button-row { margin-top: 10px; }

/* Empty wells were centred, bold and 22px-padded, which gave placeholder text
   more visual weight than real content elsewhere on the screen. */
.fleet-card .empty {
  text-align: left;
  padding: 11px 12px;
  font-size: .88rem;
  line-height: 1.45;
  border-radius: 12px;
}

/* ---------- doctrine ---------- */
.fleet-doctrine {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--brass);
  background: var(--chart-2);
}
.fleet-doctrine .fleet-doctrine-name { font-size: 1rem; }
.fleet-doctrine .fleet-doctrine-text { margin-top: 3px; }

/* ---------- stat grid ---------- */
/* minmax(76px) fitted four across and orphaned the fifth. 88px gives a clean
   3 + 2 on a 390px screen. */
.fleet-stat-grid {
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 5px;
  margin: 9px 0;
}
.fleet-stat { padding: 6px 7px; border-radius: 9px; }
.fleet-stat-label { font-size: .68rem; }
.fleet-stat-value { font-size: .95rem; }

/* ---------- condition ---------- */
.fleet-hp { margin: 9px 0 2px; }
.fleet-hp-track { height: 10px; }
.fleet-hp-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 5px;
}
.fleet-hp-text { margin-top: 0; }
.fleet-afloat { font-size: .84rem; text-align: right; white-space: nowrap; }

/* ---------- damage controls ---------- */
/* Five wrapping buttons read as a jumble. Four equal quick keys on one row,
   then the precise entry beneath it, so the common case is one tap and the
   exact case is obviously separate. */
/* v41.67: Damage | Heal, each opening the amount modal. The four fixed-step
   buttons and the full-width "Enter damage" row (.fleet-enter) are gone. */
.fleet-quick {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  margin-top: 10px;
}
.fleet-quick .button {
  width: 100%;
  padding: 10px 4px;
  font-size: .86rem;
  text-align: center;
  justify-content: center;
}

/* ---------- squadron head ---------- */
.fleet-squadron-name { font-size: 1.05rem; }
.fleet-squadron-config { font-size: .82rem; }
.fleet-person-row-name { font-size: .9rem; }
.fleet-notes { font-size: .85rem; }
.fleet-special { margin-top: 9px; padding-top: 7px; }

/* Section headings on the hull want a little air above them. */
.fleet-squadrons, .fleet-vessels { margin-top: 18px; }

/* The option rows ARE <label> elements, and the global label style is
   uppercase, bold and small — meant for field captions above an input. Inside
   an option row that turned every doctrine's rule text into shouting block
   capitals. Reset the inherited caption styling back to prose. */
.fleet-doctrine-option,
.fleet-ship-option {
  margin-bottom: 0;
  color: var(--ink);
  font-size: .9rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}
.fleet-doctrine-option .fleet-doctrine-name {
  color: var(--ink);
  font-size: .95rem;
  font-weight: 750;
  letter-spacing: normal;
  text-transform: none;
}
.fleet-doctrine-option .fleet-doctrine-text {
  color: var(--ink-soft);
  font-size: .85rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}

/* ---------- haptics toggle (v41.49, More screen, DARK HULL) ---------- */
.haptics-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.haptics-row-body { flex: 1 1 auto; min-width: 0; }
/* The More settings block sits on the DARK HULL, not parchment -- I reached for
   --ink/--muted and got 1.30:1 and 2.15:1. Hull tokens, same as the level bar. */
.haptics-row-title { color: #f4edcf; font-weight: 750; }
.haptics-row-sub { color: #d9cda9; font-size: .84rem; margin-top: 2px; }