/* core.css: the interactive features' shared layer.
   Everything below the highlight rule is a FALLBACK copy of the designer's tokens and components (design/tokens.css,
   design/site.css), wrapped in :where() so it has no specificity: when the designer's stylesheet is in the page, its
   rules win wherever the two overlap, and these only fill the gaps while it is not. */

/* highlight() marks text or elements with .nr-hl */
mark.nr-hl, .nr-hl { background: var(--focus, #ffbf1f); color: var(--focus-ink, #121317); outline: 2px solid var(--focus, #ffbf1f); outline-offset: 1px; border-radius: 2px; scroll-margin: 96px; }
mark.nr-hl { padding: 0 1px; }

/* ---- tokens the old stylesheet does not define (the designer's values) ---- */
:where(:root) {
    --brand: #1b4597; --brand-2: #10306d; --brand-soft: #e3e9f5; --on-brand: #ffffff;
    --paper-2: #ece7db; --rule-2: #9d9580; --ok: #2b6a3c; --ok-soft: #e2efe4; --warn: #8a5200; --live: #b42318;
    --focus: #ffbf1f; --focus-ink: #121317;
    --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --radius: 3px; --radius-pill: 999px; --chat-w: 400px; --gutter: 16px;
    --shadow: 0 1px 2px rgba(18, 19, 23, .06), 0 8px 24px rgba(18, 19, 23, .10);
}
@media (prefers-color-scheme: dark) {
    :where(:root) {
        --brand: #93b1ff; --brand-2: #bccfff; --brand-soft: #1a2440; --on-brand: #0b1530;
        --paper-2: #1a1b1e; --rule-2: #5f5b51; --ok: #84cf9c; --ok-soft: #16301f; --warn: #e9b55e; --live: #ff8f7d;
        --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .5);
    }
}

/* ---- shared components, as the designer draws them ---- */
:where(.visually-hidden) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:where(.tools) { display: flex; align-items: center; gap: 6px; flex: none; margin-left: auto; }
:where(.tool) { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 9px; border: 1px solid var(--rule-2); border-radius: var(--radius-pill); background: var(--paper); color: var(--ink); font: 500 13px/1 var(--sans); text-decoration: none; cursor: pointer; }
:where(.tool:hover) { border-color: var(--ink); }
:where(.tool svg) { width: 16px; height: 16px; flex: none; }
:where(.tool .tool-label), :where(.tool kbd) { display: none; }
:where(.tool kbd) { font: 500 11px/1 var(--mono); color: var(--ink-3); border: 1px solid var(--hair); border-radius: 3px; padding: 2px 5px; }
:where(.btn) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 1px solid var(--ink); border-radius: var(--radius); background: transparent; color: var(--ink); font: 600 14px/1 var(--sans); text-decoration: none; cursor: pointer; }
:where(.btn.primary) { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
:where(.btn.quiet) { border-color: var(--rule-2); font-weight: 500; }
:where(.chip) { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 3px 11px; border: 1px solid var(--rule-2); border-radius: var(--radius-pill); background: transparent; color: var(--ink); font: 500 13px/1.2 var(--sans); cursor: pointer; white-space: nowrap; }
:where(.chip[aria-pressed="true"]) { background: var(--ink); border-color: var(--ink); color: var(--paper); }
:where(.chip .n) { font: 500 11.5px/1 var(--mono); color: var(--ink-3); }
:where(.chip[aria-pressed="true"] .n) { color: var(--paper); opacity: .75; }
:where(.tag) { display: inline-block; font: 600 10.5px/1 var(--sans); letter-spacing: .07em; text-transform: uppercase; padding: 4px 6px 3px; border: 1px solid var(--rule-2); border-radius: 2px; color: var(--ink-2); white-space: nowrap; }
:where(.filters) { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 8px 0; }
:where(.filters .label) { flex: none; align-self: center; font: 600 11px/1 var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin-right: 4px; min-width: 64px; }
:where(.notice) { margin: 18px 0; padding: 12px 14px; border-left: 3px solid var(--ink); background: var(--paper-2); font: 400 14.5px/1.5 var(--sans); color: var(--ink-2); }
:where(nav.site .row) { flex-wrap: nowrap; }
:where(nav.site .links) { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
:where(nav.site) { position: sticky; top: 0; z-index: 20; background: var(--paper); }
@media (min-width: 1000px) { :where(.tool kbd) { display: inline; } }

/* element-qualified (specificity 0,0,1): beat the old stylesheet's bare a {} rule, lose to the designer's classes */
a:where(.tool), button:where(.tool) { color: var(--ink); text-decoration: none; }
nav.site .row:has(> #nr-tools) { flex-wrap: nowrap; }   /* the tools stay on the sections line (the designer's shell does the same) */