/* spec-library.php — page-scoped styles.
   Moved out of the page's inline <style> block, Oct 2026. */

/* =====================================================
   spec-library.php
   Dense, scannable, deliberately plain: this is a
   reference tool for specifiers, not a shop window.
   Tokens come from brand.css, so it flips with the
   customer/trade theme.
   ===================================================== */
.sl-page { max-width: 1200px; margin: 0 auto; padding: clamp(28px,4vw,52px) 24px 72px; }

.sl-head { margin-bottom: 22px; }
.sl-head__eyebrow {
    margin: 0 0 6px; font-size: .62rem; font-weight: 800;
    letter-spacing: var(--tracking-wider); text-transform: uppercase;
    color: var(--jb-blue-deep);
}
.sl-head__title {
    margin: 0 0 8px; font-size: clamp(1.6rem,3.4vw,2.4rem);
    font-weight: 900; letter-spacing: var(--tracking-tighter);
    line-height: 1.05; color: var(--ink);
}
.sl-head__lead { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--ink-2); max-width: 62ch; }

/* ---- Controls ---- */
.sl-controls {
    position: sticky; top: 0; z-index: 20;
    padding: 14px 0 12px; margin-bottom: 4px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
}
.sl-search { position: relative; margin-bottom: 12px; }
.sl-search__icon {
    position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
    color: var(--ink-3); pointer-events: none;
}
.sl-search__input {
    width: 100%; padding: 14px 16px 14px 42px;
    border: 1px solid var(--line); border-radius: var(--radius-page);
    background: var(--paper-2); color: var(--ink);
    font-family: inherit; font-size: .98rem;
}
.sl-search__input:focus {
    outline: none; border-color: var(--jb-blue);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--jb-blue) 22%, transparent);
}
.sl-search__input::placeholder { color: var(--ink-3); }

.sl-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sl-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.sl-chip {
    appearance: none; cursor: pointer;
    font-family: inherit; font-size: .76rem; font-weight: 600;
    padding: 7px 13px; border-radius: var(--radius-page);
    border: 1px solid var(--line); background: transparent; color: var(--ink-2);
}
.sl-chip:hover { color: var(--ink); border-color: var(--ink-4); }
.sl-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.sl-select {
    font-family: inherit; font-size: .76rem; padding: 7px 11px;
    border: 1px solid var(--line); border-radius: var(--radius-page);
    background: transparent; color: var(--ink-2);
}
.sl-count { margin-left: auto; font-size: .78rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ---- Rows ---- */
.sl-list { margin-top: 18px; }
.sl-row {
    display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center;
    padding: 15px 4px; border-bottom: 1px solid var(--line);
}
.sl-row.is-hidden { display: none; }
.sl-row__name {
    display: block; font-size: .95rem; font-weight: 700; color: var(--ink);
    text-decoration: none; margin-bottom: 6px;
}
.sl-row__name:hover { color: var(--jb-blue-deep); }
.sl-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sl-range {
    font-size: .68rem; font-weight: 700; letter-spacing: var(--tracking-wide);
    text-transform: uppercase; color: var(--ink-3);
}
.sl-b {
    font-size: .62rem; font-weight: 800; letter-spacing: .05em;
    padding: 3px 7px; border-radius: var(--radius-data); text-transform: uppercase;
}
.sl-b--fire { color: var(--spec-fire-text);     background: color-mix(in srgb, var(--spec-fire-text) 13%, transparent); }
.sl-b--ac   { color: var(--spec-acoustic-text); background: color-mix(in srgb, var(--spec-acoustic-text) 13%, transparent); }
.sl-b--th   { color: var(--spec-thermal-text);  background: color-mix(in srgb, var(--spec-thermal-text) 15%, transparent); }
.sl-b--app  { color: var(--ink-2);              background: var(--paper-2); }

.sl-docs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.sl-doc {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: .72rem; font-weight: 700; letter-spacing: .04em;
    padding: 8px 12px; border-radius: var(--radius-page);
    border: 1px solid var(--line); background: var(--paper-2);
    color: var(--ink); text-decoration: none; white-space: nowrap;
}
.sl-doc:hover { border-color: var(--jb-blue); color: var(--jb-blue-deep); }
.sl-doc--locked { color: var(--ink-3); }
.sl-doc--locked:hover { border-color: var(--ink-4); color: var(--ink-2); }
.sl-doc__dl {
    margin-left: 2px; padding-left: 8px; border-left: 1px solid var(--line);
    color: var(--ink-3);
}
.sl-doc__dl:hover { color: var(--jb-blue-deep); }

/* ---- Empty state ---- */
.sl-empty { display: none; padding: 52px 8px; text-align: center; color: var(--ink-3); }
.sl-empty.is-shown { display: block; }
.sl-empty__title { margin: 0 0 6px; font-size: 1.05rem; font-weight: 800; color: var(--ink); }
.sl-empty p { margin: 0; font-size: .88rem; }

.sl-note {
    margin-top: 26px; padding: 14px 16px;
    border: 1px solid var(--line); border-radius: var(--radius-page);
    background: var(--paper-2); font-size: .84rem; color: var(--ink-2);
}
.sl-note a { color: var(--jb-blue-deep); font-weight: 700; }

@media (max-width: 760px) {
    .sl-row { grid-template-columns: 1fr; }
    .sl-docs { justify-content: flex-start; }
    .sl-count { margin-left: 0; width: 100%; }
}