/* cogitator/army-editor-columns.css v46 */
/* Shared editor column primitives (.ab-col*, .ub-card*) — used by every editor
   column and by codex-col2 */

/* MaintenanceAgent1 - 2026-09-08
   What: v46 — removed the dead .uf-btn* family (filter button bar) and the
         entire .uf-* / .ab-filter-panel inline-filter-panel section, 23 rules
         in all (per Jérôme's ruling). No emitter references either prefix
         (recursive grep, all .js/.html). The live .ab-col__filters and
         .ab-sort-select rules interleaved with the .uf-btn* set were kept.
   Why:  Debris from the Editor rebuild; the filter panel was never wired up. */

/* DevAgent39 - 2026-09-08
   What: v45 — RENAMED from army-builder-col1.css v44. No rule changed. Linked
         from index.html v10 in the same position.
   Why:  The file is not column-one CSS: it holds the .ab-col* column
         primitives every editor column uses and the .ub-card* rules shared by
         the browser and the army list (and by codex-col2). The name now says
         so. Comments elsewhere naming army-builder-col1.css are history. */

/* DevAgent4 - 2026-05-27
   What: v7 — View-mode card height and element positioning.
         - .ub-card--statblock: height 76px (+6px over base 70px)
         - .ub-card--ai: height 90px (+20px over base 70px)
         - .ub-card__stats margin: -8px → -4px (4px lower)
         - .ub-card__ai-summary: margin-top -4px (4px higher)
   Why: Each view mode needs the card to be tall enough for its content. */

/* DevAgent4 - 2026-05-27
   What: v6 — AI summary wired up.
         (actual text display, 2-line clamp) and .ub-card__ai-summary--empty
         (dim italic fallback when ai_summary is null).
   Why: AI summary is in the DB; no generation needed. */

/* DevAgent4 - 2026-05-27
   What: v5 — Four targeted fixes.
         - .ab-col__title: color set to #fff (white, readable on dark faction bg)
         - .ub-card__stats: margin-top -8px (moves stat block up 10px from 2px)
         - .ub-card__stat-value: bg → var(--bg) parchment, gray border outline
         - Faction filter fully removed in JS v3; CSS needs no change (uf-dropdown
           stays for ability filter dropdowns)
   Why: White title readable on faction colour. Stat block visual refinement. */

/* DevAgent4 - 2026-05-27
   What: v4 — Header title +15% again (now ×1.3225 total from base).
         Faction bg applied via inline style in JS (no CSS change needed).
         .ab-view-toggle and .ab-view-toggle__btn removed (Simple/Stat Block bar gone).
         Added .ab-col__view-btn — icon button right-aligned in header.
         Added .ub-card__ai-placeholder for AI mode stub.
   Why: Icon toggle replaces full-width bar; faction colour via inline style. */

/* DevAgent4 - 2026-05-27
   What: v3 — Card and header sizing tweaks.
         - .ab-col__title: font-size increased by 15% (base → *1.15)
         - .ub-card__name: font-size increased by 10%
         - .ub-card__pts: font-size increased by 10%
         - .ub-card__photo: margin-left 6px
         - .ub-card__info: padding-left reduced by 4px
   Why: Improved readability and visual balance per Jérôme review. */

/* DevAgent4 - 2026-05-27
   What: v2 — Unit card visual fixes + header centering.
         - .ub-card: fixed height 70px, no min-height expansion
         - .ub-card__photo: 70px wide × 70px tall, object-fit:cover (crops to fit,
           no distortion), border-right removed, background matches card surface
         - .ub-card__photo-img: object-fit:cover so portrait images zoom/crop
         - .ub-card__photo-placeholder: matches card background exactly
         - .ab-col__header: centered title via justify-content:center
         - .ab-view-toggle: removed (replaced by icon button in header, Chunk 2)
   Why: Cards must be uniform height regardless of image proportion. No visible
        separation between image and text areas. */

/* DevAgent4 - 2026-05-27
   What: v1 — initial implementation
         Covers: column header/filters, filter panel, view toggle,
         unit browser cards (ub-card), filter popovers (uf-*).
   Why: Column 1 is independently owned by DevAgent4. Isolating styles
        means DevAgent5/6 never touch this file. */

/* ── Column 1 header ── */

.ab-col__header {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ab-col__title {
  font-family: var(--font-heading);
  font-size: calc(var(--text-base) * 1.3225);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  text-transform: var(--heading-transform);
  color: #fff;
  flex: 1;
  text-align: center;
}

/* View mode icon button — right side of header */
.ab-col__view-btn {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: var(--radius);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: var(--text-base);
  flex-shrink: 0;
  transition: background var(--transition-fast);
}

.ab-col__view-btn:hover {
  background: rgba(255,255,255,0.25);
}

/* When header has no faction colour (default surface bg), use darker button */
.ab-col__header:not([style]) .ab-col__view-btn,
.ab-col__header[style=''] .ab-col__view-btn {
  background: var(--surface-lo);
  border-color: var(--border);
  color: var(--text-dim);
}

.ab-col__header:not([style]) .ab-col__view-btn:hover,
.ab-col__header[style=''] .ab-col__view-btn:hover {
  background: var(--border);
  color: var(--text);
}

/* ── Filter button bar ── */

.ab-col__filters {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}

/* Sort dropdown */
.ab-sort-select {
  flex: 0 0 120px;
  width: 120px;
  height: 34px;
  min-height: var(--touch-target);
  margin-left: auto;
  padding: 0 var(--space-6) 0 var(--space-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-dim);
  cursor: pointer;
  appearance: none;
  text-align-last: right;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b6560' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-2) center;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.ab-sort-select:focus {
  outline: none;
  border-color: var(--amber);
  color: var(--text);
}

/* ── Scrollable unit list ── */

/* DevAgent4 - 2026-05-27
   What: Plain block container — no flex, no flex-direction, no gap.
         Cards are normal block elements that stack by document flow.
         Spacing between cards via margin-bottom on .ub-card.
         The column provides the bounded height via the viewport chain;
         this list simply overflows and scrolls within it.
   Why: Using display:flex on the list made cards flex items, which caused
        flex sizing rules to compress them instead of the list scrolling. */
.ab-col__list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: var(--space-2);
}

/* Category header — shown in Categories sort mode */
.ab-category-header {
  font-family: var(--font-heading);
  font-size: calc(var(--text-base) * 1.10);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  text-transform: var(--heading-transform);
  color: var(--text-dim);
  padding: var(--space-3) var(--space-2) var(--space-1);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-2);
}

.ab-category-header:first-child {
  padding-top: var(--space-1);
}

/* Status messages (loading / error / empty) */
.ab-col__status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-10) var(--space-4);
  text-align: center;
  color: var(--text-dim);
  font-size: var(--text-sm);
}

.ab-col__status--error { color: var(--red); }

/* ── Unit browser card ── */

.ub-card {
  display: flex;
  align-items: stretch;
  height: 70px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  margin-bottom: var(--space-2);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.ub-card:last-child {
  margin-bottom: 0;
}

.ub-card:hover {
  border-color: var(--border-hi);
  box-shadow: var(--shadow-sm);
}

/* Height variants per view mode */
.ub-card--statblock { height: 86px; }
.ub-card--ai        { height: 108px; }

/* Selected state — box-shadow follows border-radius, equal visual gap all sides */
.ub-card--selected {
  box-shadow: 0 0 0 3px var(--amber);
  border-color: var(--amber);
  position: relative;
}

/* Photo slot — fixed 70×70, crops to fit, no separator, same bg as card */
/* Photo slot — background-image approach.
   background-size:cover fills the 70px width; background-position:center top
   anchors to the top so portrait images reveal more as the card grows taller. */
.ub-card__photo {
  width: 70px;
  flex-shrink: 0;
  align-self: stretch;
  overflow: hidden;
  margin-left: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--surface);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
}

.ub-card__photo-icon {
  font-size: 1.25rem;
  color: var(--border-hi);
  user-select: none;
}

/* Info section */
.ub-card__info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ub-card__name-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.ub-card__name {
  font-family: var(--font-heading);
  font-size: calc(var(--text-base) * 1.10);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  text-transform: var(--heading-transform);
  color: var(--text-hi);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.ub-card__pts {
  font-family: var(--font-heading);
  font-size: calc(var(--text-sm) * 1.10);
  font-weight: var(--heading-weight);
  color: var(--amber-dim);
  white-space: nowrap;
  flex-shrink: 0;
}

.ub-card__pts--none {
  color: var(--text-dim);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: normal;
}

/* Stat block row */
.ub-card__stats {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin: -2px 0 2px;
  align-self: center;
}

.ub-card__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.ub-card__stat-label {
  font-size: 0.6175rem;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
}

.ub-card__stat-value {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  background: var(--bg);
  border: 1px solid #b8b3aa;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: var(--heading-weight);
  color: var(--text-hi);
  line-height: 1;
}

/* Category badge */
.ub-card__category {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  align-self: flex-start;
}

.ub-card__category--character {
  background: #fdf3e0;
  color: var(--amber-dim);
  border: 1px solid rgba(200,134,10,0.3);
}

.ub-card__category--battleline {
  background: #eef5fb;
  color: #1a3a6b;
  border: 1px solid rgba(26,58,107,0.25);
}

.ub-card__category--dedicated_transport {
  background: #f0faf3;
  color: var(--green);
  border: 1px solid rgba(26,92,46,0.25);
}

.ub-card__category--other {
  background: var(--surface-lo);
  color: var(--text-dim);
  border: 1px solid var(--border);
}

/* AI summary — from unit.ai_summary in DB */
.ub-card__ai-summary {
  font-size: var(--text-xs);
  color: var(--text);
  font-style: italic;
  line-height: 1.4;
  margin-top: -2px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.ub-card__ai-summary--empty {
  color: var(--text-dim);
  font-style: italic;
}