/* Library page + cards (app/libraries-page.php). Approved design: libraries-mock.html. The page sits on housing.css
   (.housing2 .hs-card, .page-head); the Guide card, home card and topic explainer don't load housing.css, so every
   .lbr-* rule here stands on its own. Colors are page-local (var(--sky) etc. are NOT site tokens). */
.libs2,.lbr-card,.lbr-home,.lbr-pin{--lb:#5b4bc4;--lbr-2:#8b7fe0;--lbr-soft:#ece9fb;--lbr-blue:#2f7fb5;--lbr-blue-soft:#e3f0f9;--lbr-gold:#d99a2b;--lbr-gold-soft:#fbf0da;--lbr-coral:#e0674a;--lbr-coral-soft:#fbe7e1;
  --lbr-m1:#d9d4f3;--lbr-m2:#b6adeb;--lbr-m3:#8b7fe0;--lbr-m4:#6a5bd0;--lbr-m5:#4a3aae}
.libs2 .hl-chip{display:inline-block;margin-top:10px;font-size:12px;color:var(--muted);background:var(--surface-2);border-radius:999px;padding:3px 10px}
.libs2 .hs-p{font-size:14.5px;color:var(--copy);max-width:68ch}
.lbr-h3{font-family:var(--display);font-size:15px;margin:18px 0 10px}
.lbr-note{background:#fff8e6;border:1px solid #efd9a0;border-radius:12px;padding:10px 14px;font-size:13.5px;color:#5b4a1d;margin-bottom:14px}

/* building hero + perks */
.lbr-top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px}
.lbr-card .lbr-top{margin-top:12px}
.lbr-hero{position:relative;border-radius:14px;padding:18px;background:linear-gradient(135deg,#5b4bc4 0%,#7a5fd6 55%,#9b6fd0 100%);color:#fff;overflow:hidden;min-width:0;scroll-margin-top:80px}
.lbr-hero::after{content:"";position:absolute;right:-30px;bottom:-40px;width:190px;height:190px;background:radial-gradient(circle,rgba(255,255,255,.18),rgba(255,255,255,0) 70%);pointer-events:none}
.lbr-bk{position:absolute;right:16px;top:14px;opacity:.9}
.lbr-tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.18);padding:3px 9px;border-radius:999px}
.lbr-hero h3{font-family:var(--display);font-size:22px;line-height:1.15;margin-top:10px;max-width:82%;color:#fff}
.lbr-addr{font-size:14px;opacity:.92;margin-top:4px}
.lbr-facts{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px}
.lbr-facts div{font-size:12px;opacity:.85}
.lbr-facts b{display:block;font:800 20px var(--display);opacity:1}
.lbr-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;position:relative;z-index:1}
.lbr-btn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:999px;font-size:13.5px;font-weight:700;text-decoration:none}
.lbr-btn.w{background:#fff;color:var(--lb)}
.lbr-btn.g{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.35)}
.lbr-perks{display:flex;flex-direction:column;gap:8px;min-width:0}
.lbr-perk{display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px;align-items:center;background:var(--surface-2);border-radius:12px;padding:10px 12px}
.lbr-perk b{font:700 14.5px var(--display);display:block;color:var(--text)}
.lbr-perk span{font-size:12.5px;color:var(--muted)}
.lbr-ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center}
.lbr-ic.t-gold{background:var(--lbr-gold-soft);color:#8a5d10}.lbr-ic.t-blue{background:var(--lbr-blue-soft);color:var(--lbr-blue)}
.lbr-ic.t-violet{background:var(--lbr-soft);color:var(--lb)}.lbr-ic.t-coral{background:var(--lbr-coral-soft);color:#c0492f}

/* state rank */
.lbr-rank{display:flex;align-items:center;gap:14px;background:linear-gradient(90deg,var(--lbr-gold-soft),#fff8ea);border:1px solid #f0dcaf;border-radius:14px;padding:12px 16px;margin-top:16px}
.lbr-medal{width:46px;height:46px;border-radius:50%;background:var(--lbr-gold);color:#fff;display:grid;place-items:center;font:800 14px var(--display);flex:none}
.lbr-rank b{font-family:var(--display);font-size:16px;display:block}
.lbr-rank span{font-size:13px;color:var(--muted)}
.lbr-rank b a{color:inherit;text-decoration:none}.lbr-rank b a:hover{text-decoration:underline}
.lbr-rmore{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:4px}
.lbr-rmore a{font-size:13px;font-weight:700;color:var(--lb);text-decoration:none}

/* a year in numbers */
.lbr-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px}
.lbr-tile{background:var(--surface-2);border-radius:12px;padding:14px}
.lbr-tile .lbr-ic{width:30px;height:30px;border-radius:9px;margin-bottom:8px}
.lbr-big{font:800 26px var(--display);letter-spacing:-.02em}
.lbr-lbl{font-size:12.5px;color:var(--muted)}
.lbr-sub{font-size:12px;color:var(--copy);margin-top:6px;font-weight:600}

/* compare meters */
.lbr-cmp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 26px;margin-top:8px}
.lbr-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}
.lbr-nm{font-size:14px;font-weight:600}
.lbr-val{font-size:13px;color:var(--muted);text-align:right}
.lbr-val b{color:var(--text)}.lbr-val span{color:var(--faint)}
.lbr-meter{grid-column:1/-1;display:grid;grid-template-columns:repeat(5,1fr);gap:3px}
.lbr-meter i{height:8px;border-radius:3px;background:var(--surface-hi)}
.lbr-meter i.s1{background:var(--lbr-m1)}.lbr-meter i.s2{background:var(--lbr-m2)}.lbr-meter i.s3{background:var(--lbr-m3)}.lbr-meter i.s4{background:var(--lbr-m4)}.lbr-meter i.s5{background:var(--lbr-m5)}
.lbr-ptag{grid-column:1/-1;font-size:12px;color:var(--muted)}
.lbr-ptag b{color:var(--lb)}

/* borrowing + programs */
.lbr-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:10px}
.lbr-panel{background:var(--surface-2);border-radius:14px;padding:16px;min-width:0}
.lbr-panel h3{font-family:var(--display);font-size:15px}
.lbr-panel p{font-size:12.5px;color:var(--muted);margin-top:2px}
.lbr-donut{display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px;align-items:center;margin-top:10px}
.lbr-donut svg{width:120px;height:120px}
.lbr-dkey{display:flex;flex-direction:column;gap:6px;font-size:13px}
.lbr-dkey span{display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:8px;align-items:center}
.lbr-dkey i{width:12px;height:12px;border-radius:3px}
.lbr-bars{display:flex;flex-direction:column;gap:9px;margin-top:12px}
.lbr-bar{display:grid;grid-template-columns:84px minmax(0,1fr) 46px;gap:8px;align-items:center;font-size:13px}
.lbr-tr{height:14px;border-radius:7px;background:var(--surface-hi);overflow:hidden}
.lbr-tr i{display:block;height:100%;border-radius:7px}
.lbr-bar b{text-align:right}

/* money */
.lbr-money{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:center;margin-top:8px}
.lbr-mbig{font:800 34px var(--display)}
.lbr-mbig small{font-size:14px;font-weight:600;color:var(--muted)}
.lbr-stack{display:flex;height:16px;border-radius:8px;overflow:hidden;margin-top:8px;background:var(--surface-hi)}
.lbr-skey{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin-top:8px}
.lbr-skey i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}

/* other locations / nearest */
.lbr-near{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.lbr-nb{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;border:1px solid var(--line-2);border-radius:12px;padding:12px;background:var(--surface);scroll-margin-top:80px}
.lbr-d{width:48px;height:48px;border-radius:12px;background:var(--lbr-soft);color:var(--lb);display:grid;place-content:center;text-align:center;font:800 15px/1 var(--display)}
.lbr-d small{display:block;font-size:10px;font-weight:700;margin-top:2px}
.lbr-nb b{font:700 14.5px var(--display);display:block}
.lbr-nb span{font-size:12.5px;color:var(--muted)}
.lbr-nb a{font-size:12.5px;font-weight:700;color:var(--lb);text-decoration:none;white-space:nowrap}
.lbr-empty{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;background:linear-gradient(135deg,var(--lbr-soft),#f5f1ff);border-radius:14px;padding:18px}
.lbr-eic{width:56px;height:56px;border-radius:14px;background:#fff;color:var(--lb);display:grid;place-items:center}
.lbr-empty h2{margin:0 0 4px}
.lbr-how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:10px}
.lbr-how div{background:var(--surface-2);border-radius:12px;padding:12px 14px;font-size:13.5px;color:var(--copy)}
.lbr-how b{display:block;font-family:var(--display);font-size:14.5px;color:var(--text);margin-bottom:4px}

/* Guide card */
.lbr-card .lbr-p{font-size:15px;color:var(--copy);margin-top:8px}
.lbr-strip{display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.lbr-strip div b{font:800 20px var(--display);display:block}
.lbr-strip div span{font-size:12.5px;color:var(--muted)}
.lbr-strip a{margin-left:auto;font-size:13.5px;font-weight:700;color:var(--lb);text-decoration:none}

/* home card (h3-card from home3.css: the card has no padding of its own) */
.lbr-hin{padding:2px 18px 16px}
.lbr-hin .lbr-htop{margin-top:0}
.lbr-htop{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;margin-top:12px}
.lbr-badge{width:64px;height:64px;border-radius:16px;background:linear-gradient(135deg,#5b4bc4,#9b6fd0);color:#fff;display:grid;place-items:center}
.lbr-htop b{font:800 17px var(--display);display:block}
.lbr-htop>div>span{font-size:13.5px;color:var(--copy)}
.lbr-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.lbr-chips span{font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--lbr-soft);color:var(--lb)}
.lbr-chips span.g{background:var(--lbr-gold-soft);color:#8a5d10}
.lbr-qs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px}
.lbr-q{background:var(--surface-2);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:3px;text-decoration:none;color:inherit}
.lbr-q:hover{background:var(--surface-hi)}
.lbr-q>span{font-size:12.5px;color:var(--muted)}
.lbr-q b{font:800 19px var(--display)}
.lbr-q small{font-size:12.5px;color:var(--muted)}
.lbr-q em{font-style:normal;font-size:13px;font-weight:700;color:var(--lb);margin-top:auto;padding-top:4px}

/* topic explainer */
.lbr-pin .exp-pin-body+.exp-pin-body{margin-top:8px}

/* the page's main column is ~620px beside the right rail: size the grids by the column, not the window */
.libs2,.lbr-card,.lbr-home{container-type:inline-size}
@container (max-width:700px){
  .lbr-split,.lbr-cmp,.lbr-how{grid-template-columns:minmax(0,1fr)}
  .lbr-cmp{gap:0}
}
@container (max-width:560px){
  .lbr-top,.lbr-near,.lbr-money{grid-template-columns:minmax(0,1fr)}
  .lbr-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lbr-qs{grid-template-columns:minmax(0,1fr)}
}