/* library.css — B66 W2: Mocca › Library (library.js). Workbook tokens only. */
.lb{ display:grid; grid-template-columns:240px minmax(0,1fr); gap:16px; align-items:start; padding-bottom:28px; }
.lb-rail{ position:sticky; top:72px; display:flex; flex-direction:column; gap:2px; padding:6px; border:1px solid var(--border); border-radius:var(--mk-radius-lg); background:var(--bg-1); }
.lb-coll{ display:flex; align-items:center; gap:10px; min-height:40px; padding:0 10px; border:0; border-radius:10px; background:none; color:var(--fg-2); cursor:pointer; text-align:start; font:600 13px var(--mk-font-ui); }
.lb-coll .mi{ font-size:19px; color:var(--fg-3); }
.lb-coll-t{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-coll small{ font:650 11px var(--mk-font-ui); color:var(--fg-3); font-variant-numeric:tabular-nums; }
.lb-coll:hover{ background:var(--bg-2); color:var(--fg-1); }
.lb-coll.on{ background:var(--accent-soft); color:var(--accent-text); }
.lb-coll.on .mi{ color:var(--accent-text); }
.lb-coll:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.lb-main{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.lb-search{ display:flex; align-items:center; gap:8px; height:var(--mk-control-h,38px); padding:0 12px; border-radius:10px; border:1px solid var(--border); background:var(--bg-input); color:var(--fg-3); }
.lb-search input{ flex:1; min-width:0; border:0; background:none; outline:0; font:500 13.5px var(--mk-font-ui); color:var(--fg-1); }
.lb-search:focus-within{ border-color:var(--accent); }
.lb-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px; }
.lb-card{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:14px; border:1px solid var(--border); border-radius:var(--mk-radius-lg); background:var(--bg-1); cursor:pointer; text-align:start; color:inherit; min-width:0; }
.lb-card:hover{ border-color:var(--accent); box-shadow:0 8px 22px -14px rgba(13,37,48,.35); }
.lb-card:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.lb-card-t{ font:700 14px var(--mk-font-ui); color:var(--fg-1); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-card-s{ font:500 12px var(--mk-font-ui); color:var(--fg-3); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* 080 · R2-26 — every face is a 1:1 tile; a logo is CONTAINED with even padding on white, never cropped */
.lb-face{ width:40px; height:40px; border-radius:12px; flex:0 0 auto; display:grid; place-items:center; overflow:hidden; background:#fff; border:1px solid var(--border); }
.lb-face img{ width:100%; height:100%; object-fit:contain; padding:14%; box-sizing:border-box; display:block; }
.lb-face.is-flag img{ object-fit:cover; padding:0; }
.lb-face.is-ic{ background:var(--bg-2); color:var(--fg-2); }
.lb-face.is-ic .mi{ font-size:20px; }
.lb-face.is-mono{ background:hsl(var(--h) 55% 92%); color:hsl(var(--h) 45% 32%); font:800 13px var(--mk-font-ui); }
.lb-face.is-lg{ width:56px; height:56px; border-radius:14px; }
.lb-face.is-lg .mi{ font-size:26px; }
.lb-face.is-xl{ width:84px; height:84px; border-radius:18px; }
.lb-face.is-xl .mi{ font-size:36px; }
.lb-face.is-sm{ width:20px; height:20px; border-radius:6px; }
.lb-face.is-sm img{ padding:8%; }
.lb-face.is-sm .mi{ font-size:13px; }
.lb-face.is-sm.is-mono{ font-size:8px; }
.lb-chips{ display:flex; flex-wrap:wrap; gap:6px; align-self:stretch; min-width:0; max-width:100%; } /* Audit A — never wider than its card (phones cropped the chips) */
.lb-chip{ display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 10px 0 4px; border-radius:999px; border:1px solid var(--border); background:var(--bg-1); color:var(--fg-2); font:600 12px var(--mk-font-ui); cursor:pointer; max-width:100%; min-width:0; overflow:hidden; }
.lb-chip span:last-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-chip:hover{ border-color:var(--accent); color:var(--fg-1); }
.lb-rec-hd{ display:flex; justify-content:center; padding:4px 0 2px; }
@media (max-width:900px){
  .lb{ grid-template-columns:1fr; }
  .lb-rail{ position:static; flex-direction:row; overflow-x:auto; scrollbar-width:none; }
  .lb-rail::-webkit-scrollbar{ display:none; }
  .lb-coll{ flex:0 0 auto; }
  .lb-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
}

/* B67 R67-014 — in Arabic a Latin name truncated at its START ("…s-Cola Company"): the box takes its direction from
   its own text, so Latin truncates at its end and Arabic still at its start; alignment stays on the right. */
html[dir="rtl"] .lb-card-t, html[dir="rtl"] .lb-chip span{ unicode-bidi:plaintext; text-align:right; }