/* Building section (/building/, /building/comfort/ index + piece detail pages). Scoped under
   body.section-building. Reuses the wiki tokens from ../wiki.css - contract: apps/hub/wiki/DESIGN.md

   The index toolbar/tabs/cards reuse the SAME shared filter widget markup items.py's index uses
   (ids it-toolbar/it-q/it-count/it-tabs, classes it-tab/it-cat/it-card - wiki.js queries those
   literal tokens and is not modified here), so this file restyles those tokens for this section the
   same way css/sections/items.css does. Everything else (hero, chips, tables, reverse-index grids)
   uses its own bp- prefix. */

body.section-building .bp-lede { color: var(--ink-faint); max-width: 62ch; }

/* ---- index: filter toolbar (revealed by wiki.js - hidden without JS) ---- */

body.section-building .it-toolbar { margin: 6px 0 2px; }
body.section-building .it-toolbar input {
  width: 100%; max-width: 420px; padding: 10px 14px;
  border: 1px solid var(--rim); border-radius: 10px;
  background: var(--surface-1); color: var(--ink);
  font: 500 .95rem var(--font-body);
}
body.section-building .it-toolbar input:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent;
}
body.section-building .bp-countline { color: var(--ink-faint); font-size: .85rem; margin: 8px 0 0; }

/* ---- index: category tabs (anchor links without JS, filters with JS) ---- */

body.section-building .it-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
body.section-building .it-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--rim); background: var(--surface-1);
  color: var(--ink-dim); font-size: .82rem; font-weight: 500; white-space: nowrap;
}
body.section-building .it-tab:hover { background: var(--surface-2); text-decoration: none; }
body.section-building .it-tab b { font-weight: 600; font-size: .72rem; color: var(--ink-faint); }
body.section-building .it-tab.active {
  color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
body.section-building .it-tab.active b { color: inherit; }
body.section-building .it-tab--comfort {
  color: var(--ember); border-color: color-mix(in srgb, var(--ember) 45%, transparent);
}

/* ---- index: category sections + piece cards ---- */

body.section-building .it-cat { scroll-margin-top: calc(var(--header-h) + 14px); }
body.section-building .it-cat h2 { margin: 30px 0 12px; }
body.section-building .it-cat h2 span { color: var(--ink-faint); font: 500 .82rem var(--font-body); margin-left: 8px; }

body.section-building .bp-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
body.section-building .it-card {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 10px;
  border: 1px solid var(--rim); border-radius: var(--radius-sm);
  background: var(--surface-1); color: var(--ink-dim);
  font-size: .84rem; line-height: 1.3;
  transition: border-color .12s ease, background .12s ease;
}
body.section-building .it-card[hidden], body.section-building .it-cat[hidden] { display: none; }
body.section-building .it-card:hover {
  text-decoration: none; background: var(--surface-2);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
body.section-building .it-card .wk-tile, body.section-building .it-card .wk-tile-fallback { width: 40px; height: 40px; font-size: .95rem; flex: 0 0 auto; }
body.section-building .bp-name { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
body.section-building .bp-cat-tag { color: var(--ink-faint); font-weight: 400; }
body.section-building .bp-comfort-dot {
  position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ember); box-shadow: 0 0 6px color-mix(in srgb, var(--ember) 65%, transparent);
}

/* ---- detail: hero ---- */

body.section-building .bp-hero { display: flex; gap: 20px; align-items: flex-start; margin: 8px 0 6px; }
body.section-building .bp-hero-icon, body.section-building .bp-hero .wk-tile-fallback.bp-hero-icon {
  width: 96px; height: 96px; font-size: 2rem; flex: 0 0 auto; border: 1px solid var(--rim);
}
body.section-building .bp-hero-info { min-width: 0; }
body.section-building .bp-hero h1 { margin-bottom: 6px; }
body.section-building .bp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
body.section-building .bp-desc { color: var(--ink-dim); max-width: 62ch; margin-bottom: 0; }
body.section-building .bp-chip-comfort { color: var(--ember); border-color: color-mix(in srgb, var(--ember) 45%, transparent); }

/* ---- detail: build cost / structural tables ---- */

body.section-building .bp-table { max-width: 620px; }
body.section-building .bp-recipe-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
body.section-building .bp-empty-note { color: var(--ink-faint); font-size: .88rem; }

/* ---- detail: reverse "crafting station for" index ---- */

body.section-building .bp-subhead {
  margin: 14px 0 6px; font: 600 .82rem var(--font-body); color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: .04em;
}
body.section-building .bp-refgrid { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- responsive ---- */

@media (max-width: 720px) {
  body.section-building .bp-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  body.section-building .bp-hero { gap: 14px; }
  body.section-building .bp-hero-icon, body.section-building .bp-hero .wk-tile-fallback.bp-hero-icon { width: 72px; height: 72px; }
}