/* The skills library, direction B. Written Wed 4 Nov 2026 by Claude (builder B). Prefix bl-; list, rail and drawer keep
   builder M's m- classes (b/library-base.css). The old --aw tokens are mapped to B here, so that copy works unchanged. */
body.bl {
  --aw-bg: var(--b-bg); --aw-bg-2: var(--b-card); --aw-bg-3: var(--b-bg2);
  --aw-ink: var(--b-fg); --aw-ink-2: rgba(23, 20, 15, .78); --aw-ink-3: rgba(23, 20, 15, .6);
  --aw-line: var(--b-line); --aw-line-2: rgba(23, 20, 15, .3);
  --aw-sand: var(--b-acc); --aw-thread: var(--b-fg);
  --aw-green: #2f8a52; --aw-amber: #b8730a; --aw-red: #c2381f; --aw-own: #17140f;
  --aw-serif: var(--b-disp); --aw-sans: var(--b-sans); --aw-mono: var(--b-mono);
  --aw-fs-2: 40px; --aw-fs-3: 20px; --aw-fs-4: 16px; --aw-fs-5: 12px;
  --aw-r: 4px; --aw-r-sm: 4px; --aw-gutter: var(--b-gut); --aw-bar-h: 0px;
  --aw-ease: ease; --aw-ease-out: cubic-bezier(.16, 1, .3, 1); --aw-shadow: 0 30px 80px -30px rgba(23, 20, 15, .35);
}
.bl .aw-wrap { width: min(var(--b-max), 100% - 2 * var(--b-gut)); margin: 0 auto; }

/* hero: the picker */
.bl-hero { padding: clamp(36px, 5vw, 72px) 0 clamp(48px, 6vw, 88px); }
.bl-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 20px 56px; align-items: end; }
.bl-head .b-lead { margin: 0; }
.bl-hero .b-h1 { font-size: clamp(56px, 7vw, 124px); }
.bl-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); margin-top: clamp(30px, 4vw, 52px); padding-top: 26px; border-top: 3px solid var(--b-fg); align-items: start; }
.bl-q label { display: block; margin-bottom: 10px; font: 400 var(--b-fs-5)/1 var(--b-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--b-mute); }
.bl-q input { width: 100%; min-height: 72px; padding: 0 18px; border: 3px solid var(--b-fg); border-radius: 4px; background: var(--b-card); color: var(--b-fg); font: 600 clamp(18px, 1.8vw, 26px)/1.2 var(--b-sans); }
.bl-q input:focus { outline: none; border-color: var(--b-acc); }
.bl-try { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 10px; }
.bl-art { position: relative; height: clamp(260px, 28vw, 400px); margin-top: 18px; background: var(--b-bg2); border: 2px solid var(--b-fg); cursor: pointer; }
.bl-art canvas { display: block; width: 100%; height: 100%; }
.bl-cap { margin: 10px 0 0; }
.bl-pk { margin: 6px 0 0; font: 900 clamp(40px, 4.6vw, 76px)/.9 var(--b-disp); text-transform: uppercase; color: var(--b-fg); }
.bl-also { margin: 18px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; font-size: 14px; color: var(--b-mute); }
.bl-nums { margin-top: 30px; }
.bl-nums p.b-date { flex-basis: 100%; margin: 0; }

/* catalogue in B type */
.bl .m-cat, .bl .m-no-sect { padding-top: clamp(64px, 8vw, 120px); border-top: 2px solid var(--b-fg); }
.bl .m-head .b-h2 em { font-style: normal; color: var(--b-acc); }
.bl .m-gh span { font: 900 30px/1 var(--b-disp); text-transform: uppercase; }
.bl .m-row { grid-template-columns: minmax(0, 1fr) auto; border-bottom: 1px solid var(--b-line); border-radius: 0; }
.bl .m-name { font-weight: 600; font-size: 18px; }
.bl .m-mk { border: 0; padding: 0 0 0 12px; background: none; font: 400 12px/1.3 var(--b-mono); letter-spacing: .04em; color: var(--b-mute); }
.bl .m-mk[data-v] { color: var(--b-fg); font-weight: 400; }
.bl .m-mk[data-v=own] { color: var(--b-acc); }
.bl .m-mk[data-v=amber] { color: var(--aw-amber); }
.bl .m-mk[data-v=red] { color: var(--aw-red); }
.bl .m-mk + .m-mk::before { content: '/'; margin-right: 12px; color: var(--b-line); }
.bl .m-views button, .bl .m-filterbtn { border-radius: 0; }
.bl .m-views button[aria-pressed=true] { background: var(--b-fg); color: var(--b-bg); }
.bl .m-d-name { font: 900 48px/.9 var(--b-disp); text-transform: uppercase; }
.bl .m-drawer { background: var(--b-bg); border-left: 3px solid var(--b-fg); }
.bl .m-stamp { border-color: var(--aw-red); color: var(--aw-red); }
.bl .aw-quiet { color: var(--b-fg); font-weight: 600; text-decoration: underline; text-decoration-color: var(--b-acc); text-underline-offset: 5px; }
.bl .m-facet button[aria-pressed=true] { background: var(--b-fg); color: var(--b-bg); }
.bl .m-facet button[aria-pressed=true] b { color: var(--b-bg); }
.bl .m-search input { border-radius: 0; border: 2px solid var(--b-fg); background: var(--b-card); }

@media (max-width: 900px) { .bl-grid, .bl-head { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  .bl .m-row { grid-template-columns: minmax(0, 1fr); }
  .bl .m-mk { padding-left: 0; }
  .bl .m-marks { flex-wrap: wrap; }
  .bl-art { height: 200px; }
  .bl-hero { padding-top: 24px; }
  .bl-grid { margin-top: 24px; padding-top: 20px; }
}