/* waha-mode.css — tier 4 modes.
 * Owns: Waha mode (.waha-*).
 *
 * Order dependencies: 10 rule(s) belonging by subject to mobile.css (7),
 * buttons.css (2), army-list.css (1) stay here to keep their cascade position
 * beside a rule in this file; each has an `order:` comment naming it. */

/* Carried from the old waha-mode.css header: Waha mode: look anything up, build nothing.
 * Contract: docs/WAHA-MODE.md. Tokens only (--accent, --border, --text, …) so
 * every theme is covered by construction. Datasheets, rules and detachments
 * are the shared detail renderers' markup, rendered into `.waha-sheet-host`. */

#waha-mode { padding: 0; }

/* An author `display:flex` beats the UA's `[hidden]`; guard every toggled
 * region (the invisible-overlay bug class). */
#waha-mode [hidden] { display: none !important; }
.waha-root { height: 100%; min-height: 0; display: flex; flex-direction: column; }

/* ── Header: wordmark · search · faction · exit */
.waha-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-3) var(--sp-6);
  border-bottom: 1px solid var(--border);
  background: var(--panel-bg);
  position: sticky;
  top: 0;
  z-index: 3;
}
.waha-wordmark { flex: 0 0 auto; font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; letter-spacing: var(--tr-wider); color: var(--accent); }
.waha-q {
  flex: 1 1 auto;
  min-width: 0;
  height: 34px;
  padding: 0 var(--sp-6);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  background: var(--card-bg);
  color: var(--text);
  font-size: var(--fs-base);
}
.waha-q::placeholder { color: var(--text-muted); }
.waha-q:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.35); }
.waha-faction, .waha-enh-select {
  flex: 0 0 auto;
  width: 200px;
  max-width: 28vw;
  height: 34px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  background: var(--card-bg);
  color: var(--text);
  font-size: var(--fs-md);
  cursor: pointer;
}
.waha-faction:focus, .waha-enh-select:focus { outline: none; border-color: var(--accent); }
.waha-exit {
  flex: 0 0 auto;
  height: 34px;
  padding: var(--sp-3) var(--sp-6);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  background: var(--card-bg);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.waha-exit-short { display: none; }
.waha-exit:hover { background: var(--card-hover); border-color: var(--accent); }

/* ── Kind tabs */
.waha-tabs {
  flex: 0 0 auto;
  display: flex;
  gap: var(--sp-1);
  padding: 0 var(--sp-6);
  border-bottom: 1px solid var(--border);
  background: var(--panel-bg);
  overflow-x: auto;
  scrollbar-width: none;
}
.waha-tabs::-webkit-scrollbar { display: none; }
.waha-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-6);
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: var(--tr-normal);
  white-space: nowrap;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}
.waha-tab-n { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.waha-tab:hover { color: var(--text); }
.waha-tab.is-on { color: var(--accent); border-bottom-color: var(--accent); }
.waha-tab.is-on .waha-tab-n { color: var(--accent); }

/* ── Two columns: results · reader */
.waha-layout { flex: 1 1 auto; display: flex; min-height: 0; }
.waha-results { flex: 0 0 45%; min-width: 0; overflow-y: auto; padding: var(--sp-6); border-right: 1px solid var(--border); }
.waha-reader { flex: 1 1 auto; min-width: 0; overflow-y: auto; padding: var(--sp-7) var(--sp-8); }
.waha-reader-bar { display: flex; align-items: center; gap: var(--sp-5); margin-bottom: var(--sp-4); }
.waha-reader-body { max-width: 820px; }
.waha-reader-empty { padding: var(--sp-13) var(--sp-8); text-align: center; color: var(--text-muted); font-size: var(--fs-base); }
.waha-reader-from { margin-bottom: var(--sp-4); font-size: var(--fs-sm); color: var(--text-muted); }
body.reduce-motion .waha-reader { animation: none !important; }
.waha-back { display: none; }
.waha-crumb { min-width: 0; font-size: var(--fs-sm); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.waha-sheet-host { background: var(--panel-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-4) var(--sp-5); overflow: hidden; }
.waha-from-btn, .waha-btn, .waha-more {
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  background: var(--card-bg);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.waha-from-btn { padding: var(--sp-1) var(--sp-4); margin: 0 var(--sp-1); }
.waha-from-btn:hover, .waha-btn:hover, .waha-more:hover { background: var(--card-hover); border-color: var(--accent); }
.waha-btn { padding: var(--sp-3) var(--sp-6); margin-left: auto; }
.waha-enh-for { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.waha-faction-head { display: flex; align-items: center; gap: var(--sp-5); margin-bottom: var(--sp-7); }
.waha-enh-label { flex: 0 0 auto; font-size: var(--fs-sm); color: var(--text-muted); }
.waha-faction-name { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; color: var(--text); }
.waha-enh-select { flex: 1 1 auto; min-width: 0; max-width: 360px; }

/* ── Result groups + rows */
.waha-group { margin-bottom: var(--sp-8); }
.waha-group-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  margin: 0 0 var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--text);
}
.waha-group-n { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 600; }
.waha-group-body { display: flex; flex-direction: column; gap: var(--sp-3); }
.waha-subhead { margin: var(--sp-6) 0 var(--sp-3); font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tr-wider); text-transform: uppercase; color: var(--text-muted); }
.waha-row {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  width: 100%;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--border);
  border-left: 3px solid transparent;
  border-radius: var(--radius);
  background: var(--card-bg);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.waha-row-glyph { flex: 0 0 auto; width: 18px; text-align: center; color: var(--accent); }
.waha-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.waha-row-name { font-size: var(--fs-md); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.waha-row-sub { font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.waha-row-line {
  flex: 0 1 auto;
  max-width: 40%;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.waha-row:hover { background: var(--card-hover); }
.waha-row.is-sel, .waha-row.is-hi, .waha-unit-card.is-hi { border-color: var(--accent); background: var(--card-hover); }
.waha-more { align-self: flex-start; padding: var(--sp-3) var(--sp-6); }

/* Datasheet cards: the roster card, compacted. */
.waha-unit-card { cursor: pointer; margin: 0; }
#waha-mode .waha-unit-card { padding-top: var(--sp-3); padding-bottom: var(--sp-3); }

/* ── Directory + faction view */
.waha-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-4); }
.waha-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.waha-tile-glyph { display: inline-flex; width: 26px; height: 26px; color: var(--accent); }
.waha-tile-glyph svg { width: 100%; height: 100%; }
.waha-tile-name { font-size: var(--fs-md); font-weight: 600; line-height: 1.2; }
.waha-tile-n { font-size: var(--fs-xs); color: var(--text-muted); }
.waha-tile:hover { background: var(--card-hover); border-color: var(--accent); }
.waha-loading, .waha-empty { padding: var(--sp-13) var(--sp-8); text-align: center; color: var(--text-muted); }
.waha-empty-title { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--text); margin: 0 0 var(--sp-3); }

/* ── Build Details-pane hint */
.waha-hint-btn {
  margin-top: var(--sp-7);
  padding: var(--sp-4) var(--sp-7);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  background: var(--card-bg);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.waha-hint-btn:hover { background: var(--card-hover); border-color: var(--accent); }

@media (max-width: 820px) {
  /* order: lives here, not in mobile.css: must precede `.mobile-tabbar .mtab-icon svg` {width} below (equal specificity, same element, width). */
  .mobile-tabbar .mtab-icon svg { width: 22px; height: 22px; fill: currentColor; display: block; }

  /* ── Buttons */
  /* order: lives here, not in mobile.css: must precede `.btn-sm` {font-size} below (equal specificity, same element, font-size). */
  .btn { font-size: var(--fs-base); padding: var(--sp-5) var(--sp-7); min-height: 44px; }

  /* order: lives here, not in mobile.css: must precede `.army-toolbar .btn.btn-icon` {height} below (equal specificity, same element, height). */
  .army-toolbar .btn.btn-sm { height: 26px; padding: 0 var(--sp-4); }

  /* order: lives here, not in mobile.css: must precede `.modal-footer .btn.btn-sm` {height} below (equal specificity, same element, height). */
  .army-toolbar .btn.btn-icon { width: 26px; height: 26px; min-width: 26px; }
}

.modal-footer .btn.btn-sm { height: 28px; }

@media (max-width: 820px) {
  /* order: lives here, not in mobile.css: must precede `.btn` {padding} below (equal specificity, same element, padding). */
  .btn-sm { min-height: 40px; padding: var(--sp-4) var(--sp-6); font-size: var(--fs-md); }
}

/* 1. BUTTON CONSISTENCY
 * One canonical baseline height per tier so that buttons sitting next
 * to each other in any toolbar / dropdown / footer / drawer never look
 * mismatched.
 *   .btn               default → 32px tall
 *   .btn.btn-sm        small   → 28px tall
 *   .btn.btn-large     large   → 38px tall
 *   .btn.btn-icon      icon    → square 32×32
 *   .btn.btn-icon.btn-sm icon-sm → square 28×28
 * box-sizing: border-box keeps height stable when padding shifts.
 * line-height set explicitly so vertical centering is independent of
 * the user's display-font line metrics. */
/* order: lives here, not in buttons.css: must follow `.btn` {padding} above (equal specificity, same element, padding). */
.btn { padding: 0 var(--sp-7); }

@media (max-width: 380px) {
  /* order: lives here, not in mobile.css: must precede `.army-entry-attached .army-entry-action svg` {width} below (equal specificity, same element, width). */
  .mobile-tabbar .mtab-icon svg { width: 20px; height: 20px; }
}

/* order: lives here, not in army-list.css: must follow `.mobile-tabbar .mtab-icon svg` {width} above (equal specificity, same element, width). */
.army-entry-attached .army-entry-action svg { width: 11px; height: 11px; }

@media (prefers-reduced-motion: reduce) {
  .waha-reader { animation: none !important; }
}