/* PKE Wiki — Buildings tab
   Load before your app script:
     <link rel="stylesheet" href="buildings-tab.css">
   Fully self-contained: every selector and every custom property is
   namespaced .bt-* / --bt-*, and the token block lives on .bt-wrap
   rather than :root. Nothing here touches the rest of the wiki. */

.bt-wrap{
  /* palette and type come from :root in style.css — only the blocked
     state is local, since nothing outside this tab uses it */
  --bt-blocked:#d4674a;
}
.bt-wrap,.bt-wrap *{box-sizing:border-box}
.bt-wrap{max-width:1180px;margin:0 auto;padding:26px 18px 80px;
  background:var(--bt-void);color:var(--bt-paper);font-family:var(--bt-body);
  -webkit-font-smoothing:antialiased}

/* ---------- masthead ---------- */
.bt-head{border-bottom:2px solid var(--bt-line);padding-bottom:16px;margin-bottom:22px}
.bt-eyebrow{font-family:var(--bt-data);font-size:11px;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--bt-brass);margin:0 0 8px}
.bt-h1{font-family:var(--bt-display);font-weight:700;font-size:clamp(30px,6vw,46px);line-height:.95;
  letter-spacing:.5px;text-transform:uppercase;color:var(--bt-gold);margin:0}
.bt-lede{margin:10px 0 0;max-width:60ch;font-size:14.5px;line-height:1.55;color:var(--text-dim)}

/* ---------- building rail ---------- */
.bt-rail{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:8px;margin:0 0 26px}
.bt-pick{appearance:none;text-align:left;cursor:pointer;background:var(--bt-band);
  border:2px solid var(--bt-hair);border-radius:11px;padding:12px;color:var(--bt-paper);
  display:flex;gap:10px;align-items:center;min-height:48px;
  transition:border-color .15s,background .15s}
.bt-pick:hover{border-color:var(--bt-brass-dim);background:#16273a}
.bt-pick:focus-visible{outline:2px solid var(--bt-gold);outline-offset:2px}
.bt-pick[aria-selected="true"]{border-color:var(--bt-brass);background:#16273a}
.bt-glyph{font-size:19px;line-height:1;color:var(--bt-brass);flex:0 0 auto}
.bt-pick[aria-selected="true"] .bt-glyph{color:var(--bt-gold)}
.bt-picktext{display:flex;flex-direction:column;gap:1px;min-width:0}
.bt-pickname{font-family:var(--bt-display);font-weight:500;font-size:15px;letter-spacing:.4px;
  text-transform:uppercase;line-height:1.15}
.bt-gate{font-family:var(--bt-data);font-size:9px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--bt-blocked);opacity:.85;line-height:1}
.bt-pick.is-blocked .bt-glyph{color:var(--bt-blocked)}
.bt-pick.is-blocked .bt-pickname{color:var(--text-dim)}

/* ---------- detail ---------- */
.bt-role{font-family:var(--bt-data);font-size:11px;letter-spacing:2px;text-transform:uppercase;
  color:var(--bt-brass);margin:0 0 6px}
.bt-name{font-family:var(--bt-display);font-weight:700;font-size:clamp(26px,5vw,36px);line-height:1;
  letter-spacing:.5px;text-transform:uppercase;color:var(--bt-paper);margin:0 0 10px}
.bt-blurb{margin:0 0 18px;max-width:62ch;font-size:15px;line-height:1.6;color:var(--text)}

.bt-flag{border-left:3px solid var(--bt-brass);background:var(--bt-band);padding:11px 14px;
  border-radius:0 8px 8px 0;margin:0 0 18px;font-size:13.5px;line-height:1.5;color:var(--text-dim)}
.bt-flag.is-blocked{border-left-color:var(--bt-blocked)}
.bt-flag b{color:var(--bt-paper)}

/* ---------- cost ledger ---------- */
.bt-cost{border:2px solid var(--bt-line);border-radius:11px;background:var(--bt-panel);
  padding:14px 16px;margin:0 0 26px}
.bt-costhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--bt-hair)}
.bt-costtitle{font-family:var(--bt-display);font-weight:700;font-size:15px;letter-spacing:1px;
  text-transform:uppercase;color:var(--bt-gold)}
.bt-time{font-family:var(--bt-data);font-size:11px;letter-spacing:1px;color:var(--bt-dim);text-transform:uppercase}
.bt-ledger{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:2px 22px}
.bt-ledger li{display:flex;align-items:baseline;gap:8px;padding:4px 0;font-size:14px}
.bt-mat{color:var(--text);white-space:nowrap}
.bt-dots{flex:1;border-bottom:1px dotted var(--border);transform:translateY(-3px);min-width:14px}
.bt-qty{font-family:var(--bt-data);font-weight:600;font-size:13.5px;color:var(--bt-paper);white-space:nowrap}
.bt-qty.is-gold{color:var(--bt-gold)}

/* ---------- the ladder (signature) ---------- */
.bt-ladderhead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 4px}
.bt-ladderhead h3{font-family:var(--bt-display);font-weight:700;font-size:19px;letter-spacing:.8px;
  text-transform:uppercase;color:var(--bt-gold);margin:0}
.bt-laddersub{font-family:var(--bt-data);font-size:11px;letter-spacing:1px;color:var(--bt-dim);text-transform:uppercase}
.bt-laddernote{margin:6px 0 16px;font-size:13.5px;color:var(--bt-dim);max-width:60ch;line-height:1.5}

.bt-ladder{list-style:none;margin:0;padding:0 0 0 34px;position:relative}
.bt-ladder::before{content:"";position:absolute;left:13px;top:12px;bottom:12px;width:2px;
  background:linear-gradient(180deg,var(--bt-brass),var(--bt-brass-dim))}
.bt-rung{position:relative;padding:0 0 12px}
.bt-rung::before{content:attr(data-lv);position:absolute;left:-34px;top:9px;width:28px;height:28px;
  border:2px solid var(--bt-brass);border-radius:50%;background:#16273a;color:var(--bt-gold);
  font-family:var(--bt-data);font-weight:600;font-size:12px;display:flex;align-items:center;
  justify-content:center;z-index:1}
.bt-card{border:2px solid var(--bt-hair);border-radius:10px;background:var(--bt-band);padding:11px 14px;
  transition:border-color .15s}
.bt-rung:hover .bt-card{border-color:var(--bt-brass-dim)}
.bt-unlock{font-family:var(--bt-display);font-weight:500;font-size:16px;letter-spacing:.4px;
  text-transform:uppercase;color:var(--bt-paper);line-height:1.2;margin:0 0 7px}
.bt-flavour{margin:-3px 0 8px;font-size:13px;line-height:1.5;color:var(--bt-dim);max-width:56ch}
.bt-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.bt-tag{font-family:var(--bt-data);font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;
  border:1px solid var(--bt-brass-dim);border-radius:5px;padding:3px 7px;color:var(--bt-brass)}
.bt-tag.is-skill{border-color:var(--bt-brass);color:var(--bt-gold)}
.bt-mats{font-family:var(--bt-data);font-size:12px;line-height:1.75;color:var(--bt-dim);margin:0}
.bt-mats b{color:var(--text);font-weight:600}
.bt-mats .g{color:var(--bt-gold)}
.bt-mats .bt-sep{font-style:normal;color:var(--border)}
@media (max-width:560px){.bt-mats .bt-sep{display:none}}

.bt-empty{border:2px dashed var(--bt-hair);border-radius:10px;padding:18px;color:var(--bt-dim);
  font-size:14px;line-height:1.55}

@media (max-width:560px){
  .bt-wrap{padding:20px 13px 60px}
  .bt-rail{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:7px}
  .bt-pick{padding:10px}
  .bt-pickname{font-size:14px}
  /* dotted leaders need room to read as a ledger — one column, full width */
  .bt-ledger{grid-template-columns:1fr;gap:0}
  .bt-ledger li{padding:6px 0;border-bottom:1px solid var(--border)}
  .bt-ledger li:last-child{border-bottom:0}
  .bt-cost{padding:12px 14px}
  /* materials: one per line beats a 3-line wrapped run-on */
  .bt-mats{display:flex;flex-direction:column;gap:2px}
  .bt-mats span{white-space:nowrap}
  .bt-ladder{padding-left:28px}
  .bt-ladder::before{left:10px}
  .bt-rung::before{left:-28px;width:23px;height:23px;font-size:11px}
  .bt-unlock{font-size:15px}
}
@media (max-width:360px){
  .bt-rail{grid-template-columns:1fr 1fr}
  .bt-pickname{font-size:13px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ── Building artwork ── */
.bt-art{display:block;object-fit:contain;image-rendering:auto}

/* in the picker rail: sits where the glyph was */
.bt-pick .bt-art{width:30px;height:30px;flex:0 0 30px}

/* in the detail header: large enough to read as artwork */
.bt-hero{display:flex;align-items:center;gap:16px;margin:0 0 10px}
.bt-hero .bt-art{
  width:96px;height:96px;flex:0 0 96px;
  border:2px solid var(--border);border-radius:12px;
  background:var(--band);padding:4px
}
@media (max-width:560px){
  .bt-hero .bt-art{width:68px;height:68px;flex:0 0 68px}
  .bt-pick .bt-art{width:26px;height:26px;flex:0 0 26px}
}