/*
 * Pagebunker design layer on vendored Bulma 1.0.4. Rules live in docs/BRAND.md (Neubrutalist).
 * - Source-of-truth tokens are --pb-* (OKLCH). Bulma builds shades from HSL, so --bulma-* are approximations.
 * - Add a token to BRAND.md before using a new value here.
 * - Hard offset shadows only (zero blur). No gradients, no blur, no soft shadows.
 */

@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("../vendor/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("../vendor/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("../vendor/fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("../vendor/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("../vendor/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 500; font-style: normal; font-display: swap; src: url("../vendor/fonts/space-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 700; font-style: normal; font-display: swap; src: url("../vendor/fonts/space-grotesk-latin-700-normal.woff2") format("woff2"); }

:root {
  /* Color (light): quiet paper, soft ink, muted tinted blocks */
  --pb-ink: oklch(0.27 0.02 260);
  --pb-ink-strong: oklch(0.20 0.02 260);
  --pb-paper: oklch(0.978 0.005 95);
  --pb-surface: oklch(1 0 0);
  --pb-line: oklch(0.89 0.008 260);
  --pb-line-strong: oklch(0.74 0.012 260);
  --pb-line-input: oklch(0.62 0.012 260);   /* form fields: >= 3:1 on paper and surface (WCAG 1.4.11) */
  --pb-embed: #fff;                          /* archived pages are usually white; this is the one allowed literal */
  --pb-muted: oklch(0.48 0.015 260);
  --pb-signal: oklch(0.86 0.15 90);
  --pb-signal-line: oklch(0.72 0.14 85);
  --pb-on-signal: oklch(0.22 0.02 260);
  --pb-alive-bg: oklch(0.93 0.06 150);   --pb-alive-fg: oklch(0.38 0.10 150);   --pb-alive-line: oklch(0.78 0.10 150);
  --pb-dead-bg: oklch(0.93 0.05 28);     --pb-dead-fg: oklch(0.45 0.16 28);     --pb-dead-line: oklch(0.78 0.10 28);
  --pb-active-bg: oklch(0.93 0.04 235);  --pb-active-fg: oklch(0.40 0.11 240);  --pb-active-line: oklch(0.78 0.08 235);
  --pb-link: oklch(0.45 0.14 255);
  --pb-bar-bg: oklch(0.27 0.02 260);
  --pb-bar-fg: oklch(0.96 0.006 95);

  /* Structure: 1px lines, hairline hard shadow */
  --pb-border: 1px solid var(--pb-line);
  --pb-border-strong: 1px solid var(--pb-line-strong);
  --pb-shadow: 2px 2px 0 var(--pb-line);
  --pb-shadow-lg: 3px 3px 0 var(--pb-line-strong);
  --pb-btn-shadow: 2px 2px 0 var(--pb-signal-line);
  --pb-btn-shadow-lg: 3px 3px 0 var(--pb-signal-line);
  --pb-surface-hover: var(--pb-surface);
  --pb-chip: var(--pb-paper);
  --pb-url: var(--pb-muted);
  --pb-r-sm: 3px; --pb-r-md: 4px; --pb-r-lg: 6px;
  --pb-t: 120ms ease-out;

  /* Space scale (4px base): 4 8 12 16 24 32 48 64 96 */
  --pb-s1: .25rem; --pb-s2: .5rem; --pb-s3: .75rem; --pb-s4: 1rem; --pb-s5: 1.5rem;
  --pb-s6: 2rem; --pb-s7: 3rem; --pb-s8: 4rem; --pb-s9: 6rem;

  /* Faces */
  --pb-display: "Space Grotesk", "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --pb-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --pb-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Bulma mapping (HSL approximations) */
  --bulma-primary-h: 50; --bulma-primary-s: 90%; --bulma-primary-l: 62%;
  --bulma-link-h: 232; --bulma-link-s: 55%; --bulma-link-l: 40%;
  --bulma-success-h: 150; --bulma-danger-h: 8;
  --bulma-scheme-h: 260; --bulma-scheme-s: 6%;
  --bulma-radius: var(--pb-r-sm); --bulma-radius-medium: var(--pb-r-sm); --bulma-radius-large: var(--pb-r-md);
  --bulma-family-primary: var(--pb-sans);
  --bulma-family-monospace: var(--pb-mono);
  --bulma-body-background-color: var(--pb-paper);
}

/* Dark theme: applied by OS preference unless the user chose light, or forced via data-theme="dark" */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Dark: neutral graphite, elevation by lightness (no offset shadows), a clear text hierarchy */
    --pb-ink: oklch(0.88 0.006 260);
    --pb-ink-strong: oklch(0.95 0.004 260);
    --pb-paper: oklch(0.155 0.006 260);
    --pb-surface: oklch(0.205 0.008 260);
    --pb-surface-hover: oklch(0.235 0.009 260);
    --pb-chip: oklch(0.265 0.01 260);
    --pb-line: oklch(0.30 0.009 260);
    --pb-line-strong: oklch(0.42 0.012 260);
    --pb-line-input: oklch(0.52 0.012 260);
    --pb-muted: oklch(0.70 0.01 260);
    --pb-url: oklch(0.80 0.008 260);
    --pb-signal: oklch(0.82 0.12 88);
    --pb-signal-line: oklch(0.82 0.12 88);
    --pb-on-signal: oklch(0.20 0.015 260);
    --pb-alive-bg: oklch(0.27 0.04 150);   --pb-alive-fg: oklch(0.84 0.11 150);   --pb-alive-line: oklch(0.42 0.07 150);
    --pb-dead-bg: oklch(0.28 0.05 28);     --pb-dead-fg: oklch(0.82 0.10 28);     --pb-dead-line: oklch(0.45 0.09 28);
    --pb-active-bg: oklch(0.27 0.04 240);  --pb-active-fg: oklch(0.83 0.08 240);  --pb-active-line: oklch(0.42 0.07 240);
    --pb-link: oklch(0.80 0.09 245);
    --pb-bar-bg: oklch(0.24 0.01 260);
    --pb-bar-fg: oklch(0.90 0.006 260);
    --pb-shadow: 0 0 0 transparent;
    --pb-shadow-lg: 0 0 0 transparent;
    --pb-btn-shadow: 0 0 0 transparent;
    --pb-btn-shadow-lg: 0 0 0 transparent;
    --bulma-link-l: 72%;
  }
  :root:not([data-theme="light"]) .button:hover { background: var(--pb-surface-hover); }
  :root:not([data-theme="light"]) .button.is-primary:hover { background: color-mix(in oklch, var(--pb-signal) 92%, white); }
  :root:not([data-theme="light"]) .pb-stamp--changed { border-color: var(--pb-line-strong); color: var(--pb-ink); }
  :root:not([data-theme="light"]) .pb-replay-frame { box-shadow: 0 0 0 10px var(--pb-bar-bg); border: 0; border-radius: var(--pb-r-sm); }
  :root:not([data-theme="light"]) .pb-replay-bar { border-bottom: 0; }
  :root:not([data-theme="light"]) .pb-replay-wrap { background: var(--pb-bar-bg); padding: 0 var(--pb-s3) var(--pb-s3); border: var(--pb-border); border-top: 0; border-radius: 0 0 var(--pb-r-md) var(--pb-r-md); }
}
:root[data-theme="dark"] {
  /* Dark: neutral graphite, elevation by lightness (no offset shadows), a clear text hierarchy */
  --pb-ink: oklch(0.88 0.006 260);
  --pb-ink-strong: oklch(0.95 0.004 260);
  --pb-paper: oklch(0.155 0.006 260);
  --pb-surface: oklch(0.205 0.008 260);
  --pb-surface-hover: oklch(0.235 0.009 260);
  --pb-chip: oklch(0.265 0.01 260);
  --pb-line: oklch(0.30 0.009 260);
  --pb-line-strong: oklch(0.42 0.012 260);
  --pb-line-input: oklch(0.52 0.012 260);
  --pb-muted: oklch(0.70 0.01 260);
  --pb-url: oklch(0.80 0.008 260);
  --pb-signal: oklch(0.82 0.12 88);
  --pb-signal-line: oklch(0.82 0.12 88);
  --pb-on-signal: oklch(0.20 0.015 260);
  --pb-alive-bg: oklch(0.27 0.04 150);   --pb-alive-fg: oklch(0.84 0.11 150);   --pb-alive-line: oklch(0.42 0.07 150);
  --pb-dead-bg: oklch(0.28 0.05 28);     --pb-dead-fg: oklch(0.82 0.10 28);     --pb-dead-line: oklch(0.45 0.09 28);
  --pb-active-bg: oklch(0.27 0.04 240);  --pb-active-fg: oklch(0.83 0.08 240);  --pb-active-line: oklch(0.42 0.07 240);
  --pb-link: oklch(0.80 0.09 245);
  --pb-bar-bg: oklch(0.24 0.01 260);
  --pb-bar-fg: oklch(0.90 0.006 260);
  --pb-shadow: 0 0 0 transparent;
  --pb-shadow-lg: 0 0 0 transparent;
  --pb-btn-shadow: 0 0 0 transparent;
  --pb-btn-shadow-lg: 0 0 0 transparent;
  --bulma-link-l: 72%;
}
:root[data-theme="dark"] .button:hover { background: var(--pb-surface-hover); }
:root[data-theme="dark"] .button.is-primary:hover { background: color-mix(in oklch, var(--pb-signal) 92%, white); }
:root[data-theme="dark"] .pb-stamp--changed { border-color: var(--pb-line-strong); color: var(--pb-ink); }
:root[data-theme="dark"] .pb-replay-frame { box-shadow: 0 0 0 10px var(--pb-bar-bg); border: 0; border-radius: var(--pb-r-sm); }
:root[data-theme="dark"] .pb-replay-bar { border-bottom: 0; }
:root[data-theme="dark"] .pb-replay-wrap { background: var(--pb-bar-bg); padding: 0 var(--pb-s3) var(--pb-s3); border: var(--pb-border); border-top: 0; border-radius: 0 0 var(--pb-r-md) var(--pb-r-md); }

/* Native controls and scrollbars follow the active theme */
:root { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

html { background: var(--pb-paper); }
body { font-family: var(--pb-sans); background: var(--pb-paper); color: var(--pb-ink); }
h1, h2, h3, h4, .title { font-family: var(--pb-display); font-weight: 500; letter-spacing: -0.015em; color: var(--pb-ink-strong); }
.title.is-1, .pb-display { font-size: clamp(1.75rem, 3.6vw, 2.5rem); line-height: 1.12; text-wrap: balance; }
.title.is-4 { font-size: 1.25rem; line-height: 1.2; }
p, .pb-measure { max-width: 65ch; }
.subtitle, .help { color: var(--pb-muted); }
.subtitle { margin-top: var(--pb-s3); font-size: 1.0625rem; }
.pb-nav a { color: var(--pb-ink); text-decoration: none; font-weight: 500; }
.pb-nav a:hover { color: var(--pb-ink-strong); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; text-decoration-color: var(--pb-signal); }
a { color: var(--pb-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: background-color var(--pb-t), color var(--pb-t); }
a:hover { color: var(--pb-ink-strong); }

/* Data: URLs, hashes, timestamps, sizes, and tiny labels */
.pb-data { font-family: var(--pb-mono); font-size: .875rem; font-variant-numeric: tabular-nums; }
.pb-hash { font-family: var(--pb-mono); font-size: .8125rem; color: var(--pb-muted); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* Page structure: rail + main on a 12-col grid */
.pb-page { max-width: 74rem; margin: 0 auto; padding: var(--pb-s6) var(--pb-s4); }
.pb-rail { margin-bottom: var(--pb-s5); }
.pb-main { min-width: 0; }
@media (min-width: 900px) {
  .pb-page { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--pb-s5); }
  .pb-rail { grid-column: 1 / span 3; margin-bottom: 0; }
  .pb-main { grid-column: 4 / -1; }
}
.pb-section { border-top: var(--pb-border); padding-top: var(--pb-s5); margin-top: var(--pb-s8); }

/* Brand mark */
.pb-brand { display: inline-flex; align-items: center; gap: var(--pb-s3); font-family: var(--pb-display); font-weight: 700; font-size: 1.125rem; letter-spacing: -0.02em; color: var(--pb-ink-strong); text-decoration: none; }
.pb-brand:hover { color: var(--pb-ink-strong); }
.pb-brand__mark { width: 1.5rem; height: 1.5rem; background: var(--pb-signal); border: 1px solid var(--pb-signal-line); border-radius: var(--pb-r-sm); position: relative; flex: none; }
.pb-brand__mark::after { content: ""; position: absolute; inset: 5px; border: 1.5px solid var(--pb-on-signal); border-radius: 1px; }

/* Buttons */
.button { font-family: var(--pb-sans); font-weight: 600; border: var(--pb-border-strong); border-radius: var(--pb-r-sm); background: var(--pb-surface); color: var(--pb-ink-strong); box-shadow: var(--pb-shadow); transition: transform var(--pb-t), box-shadow var(--pb-t), background-color var(--pb-t), border-color var(--pb-t); }
.button:hover { transform: translate(-1px, -1px); box-shadow: var(--pb-shadow-lg); border-color: var(--pb-ink); color: var(--pb-ink-strong); background: var(--pb-surface); }
.button:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--pb-line); }
.button.is-primary { background: var(--pb-signal); color: var(--pb-on-signal); border: 1px solid var(--pb-signal-line); box-shadow: var(--pb-btn-shadow); }
.button.is-primary:hover, .button.is-primary:active { background: var(--pb-signal); color: var(--pb-on-signal); border-color: var(--pb-signal-line); }
.button.is-primary:hover { box-shadow: var(--pb-btn-shadow-lg); }
.button.is-danger-outline { background: var(--pb-dead-bg); color: var(--pb-dead-fg); border-color: var(--pb-dead-line); box-shadow: var(--pb-shadow); }
.button.is-small { box-shadow: var(--pb-shadow); }
.button[disabled], .button:disabled, .button.is-primary[disabled] { background: transparent; color: var(--pb-muted); border-color: var(--pb-line); opacity: 1; cursor: not-allowed; transform: none; box-shadow: none; }
.button.is-loading { color: transparent !important; }
.field.has-addons .button { box-shadow: none; }
.field.has-addons .button:hover { transform: none; }

/* Keyboard focus: Bulma sets outline:none on .button:focus-visible; restore a real ring */
.button:focus-visible, .button.is-primary:focus-visible, .button.is-focus-demo { outline: 2px solid var(--pb-link); outline-offset: 2px; }
.button.is-hover-demo { transform: translate(-1px, -1px); box-shadow: var(--pb-shadow-lg); }
.button { min-height: 2.75rem; padding-left: var(--pb-s4); padding-right: var(--pb-s4); }
.button.is-small { min-height: 2.25rem; }
@media (pointer: coarse) { .button, .button.is-small, .pb-theme button, .pb-nav a { min-height: 2.75rem; display: inline-flex; align-items: center; } }

/* Inputs */
.input { background: var(--pb-surface); border: 1px solid var(--pb-line-input); border-radius: var(--pb-r-sm); color: var(--pb-ink-strong); box-shadow: none; height: 2.75rem; transition: border-color var(--pb-t), box-shadow var(--pb-t); }
.input:hover { border-color: var(--pb-ink); }
.input:focus { border-color: var(--pb-ink); box-shadow: 0 0 0 3px color-mix(in oklch, var(--pb-signal) 55%, transparent); }
.input.is-error { background: var(--pb-dead-bg); border-color: var(--pb-dead-line); }
.input::placeholder { color: var(--pb-muted); }
.label { font-family: var(--pb-sans); font-weight: 600; color: var(--pb-ink-strong); }

/* Ledger: each entry is a quiet bordered row */
.pb-ledger { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--pb-s3); }
.pb-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--pb-s1) var(--pb-s4); padding: var(--pb-s4) var(--pb-s5); background: var(--pb-surface); border: var(--pb-border); border-radius: var(--pb-r-md); box-shadow: var(--pb-shadow); transition: transform var(--pb-t), box-shadow var(--pb-t), border-color var(--pb-t); }
.pb-row:hover { transform: translate(-1px, -1px); box-shadow: var(--pb-shadow-lg); border-color: var(--pb-line-strong); background: var(--pb-surface-hover); }
.pb-row__title { font-family: var(--pb-display); font-weight: 500; font-size: 1.0625rem; line-height: 1.25; margin: 0; }
.pb-row__title a { color: var(--pb-ink-strong); text-decoration: none; }
.pb-row__title a::after { content: ""; position: absolute; inset: 0; }   /* whole row is the click target */
.pb-row__side, .pb-row__meta a { position: relative; z-index: 1; }
.pb-row__url .pb-domain { color: var(--pb-ink); }
.pb-row__title a:hover, .pb-row__title a:focus-visible { text-decoration: underline; text-underline-offset: 3px; background: none; }
.pb-row__url { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--pb-url); }
.pb-row__side { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: flex-end; gap: var(--pb-s2); }
.pb-row__meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--pb-s3); align-items: center; color: var(--pb-muted); font-family: var(--pb-sans); font-size: .8125rem; padding-top: var(--pb-s2); }
@media (max-width: 599px) {
  .pb-row { grid-template-columns: minmax(0, 1fr); }
  .pb-row__side { grid-column: 1; grid-row: 1; flex-direction: row; justify-content: space-between; align-items: center; }
  .pb-row__title { grid-row: 2; }
  .pb-row__url { grid-row: 3; }
  .pb-row__meta { grid-row: 4; }
}

/* Stamp: tinted block with a word (hue never works alone) */
.pb-stamp { display: inline-block; padding: 1px var(--pb-s2); border: 1px solid var(--pb-line-strong); border-radius: var(--pb-r-sm); font-family: var(--pb-mono); font-size: .75rem; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; line-height: 1.6; white-space: nowrap; color: var(--pb-ink); background: var(--pb-surface); }
.pb-stamp--alive { background: var(--pb-alive-bg); color: var(--pb-alive-fg); border-color: var(--pb-alive-line); }
.pb-stamp--dead { background: var(--pb-dead-bg); color: var(--pb-dead-fg); border-color: var(--pb-dead-line); }
.pb-stamp--changed { background: var(--pb-surface); color: var(--pb-ink-strong); border-color: var(--pb-ink); }
.pb-stamp--failed { background: transparent; color: var(--pb-ink); border-style: dashed; border-color: var(--pb-line-strong); }
.pb-stamp--archiving { background: var(--pb-active-bg); color: var(--pb-active-fg); border-color: var(--pb-active-line); animation: pb-blink 1.4s ease-out 12; }
@keyframes pb-blink { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .pb-stamp--archiving { animation: none; } }

/* Tag */
.pb-tag { display: inline-block; padding: 0 var(--pb-s2); border: var(--pb-border); border-radius: var(--pb-r-sm); font-size: .75rem; font-weight: 400; background: var(--pb-chip); color: var(--pb-ink); }

/* Replay */
.pb-replay-bar { display: flex; flex-wrap: wrap; gap: var(--pb-s3); align-items: center; padding: var(--pb-s3) var(--pb-s4); background: var(--pb-bar-bg); color: var(--pb-bar-fg); border: var(--pb-border); border-bottom: 0; border-radius: var(--pb-r-md) var(--pb-r-md) 0 0; font-size: .875rem; }
.pb-replay-bar .pb-data { flex: 1 1 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-replay-bar .pb-hash { color: inherit; opacity: .8; }
.pb-replay-bar .button { box-shadow: none; }
.pb-replay-frame { width: 100%; height: 20rem; border: var(--pb-border); border-top: 0; border-radius: 0 0 var(--pb-r-md) var(--pb-r-md); background: var(--pb-embed); }

/* Overlays */
.pb-popover { background: var(--pb-surface); border: var(--pb-border-strong); border-radius: var(--pb-r-md); box-shadow: var(--pb-shadow-lg); padding: var(--pb-s3); }

/* Focus: always visible */
:focus-visible { outline: 2px solid var(--pb-link); outline-offset: 2px; }
.input:focus-visible { outline: 2px solid var(--pb-link); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { * { transition-duration: 0.01ms !important; } }

/* Theme toggle: a two-state segmented control */
.pb-theme { display: inline-flex; border: var(--pb-border-strong); border-radius: var(--pb-r-sm); overflow: hidden; background: var(--pb-surface); }
.pb-theme button { appearance: none; border: 0; background: transparent; color: var(--pb-muted); font: inherit; font-size: .8125rem; font-weight: 600; padding: var(--pb-s1) var(--pb-s3); min-height: 2.25rem; min-width: 2.75rem; cursor: pointer; transition: background-color var(--pb-t), color var(--pb-t); }
.pb-theme button + button { border-left: var(--pb-border); }
.pb-theme button:hover { color: var(--pb-ink-strong); background: var(--pb-surface-hover); }
.pb-theme button[aria-pressed="true"] { background: var(--pb-chip); color: var(--pb-ink-strong); box-shadow: inset 0 -2px 0 var(--pb-signal-line); }
.pb-theme button:focus-visible { outline-offset: -2px; }

/* Empty state: left-aligned, one primary action, one quiet link */
.pb-empty { border: 1px dashed var(--pb-line-strong); border-radius: var(--pb-r-md); padding: var(--pb-s6) var(--pb-s5); background: var(--pb-surface); }
.pb-empty h3 { font-size: 1.125rem; margin: 0 0 var(--pb-s2); }
.pb-empty p { margin: 0 0 var(--pb-s4); color: var(--pb-muted); }
.pb-empty__actions { display: flex; flex-wrap: wrap; gap: var(--pb-s4); align-items: center; }

/* Search / filter bar and rail filters */
.pb-toolbar { display: flex; flex-wrap: wrap; gap: var(--pb-s3); align-items: center; margin-bottom: var(--pb-s4); }
.pb-toolbar .control { flex: 1 1 14rem; }
.pb-toolbar select { min-height: 2.75rem; }
.pb-filter { list-style: none; margin: 0 0 var(--pb-s5); padding: 0; }
.pb-filter__title { font-family: var(--pb-sans); font-size: .875rem; font-weight: 600; color: var(--pb-ink-strong); margin: 0 0 var(--pb-s2); }
.pb-filter a { display: flex; justify-content: space-between; gap: var(--pb-s3); padding: var(--pb-s1) var(--pb-s2); border-radius: var(--pb-r-sm); color: var(--pb-ink); text-decoration: none; min-height: 1.75rem; }
.pb-filter a:hover { background: var(--pb-chip); color: var(--pb-ink-strong); }
.pb-filter a[aria-current="page"] { background: var(--pb-chip); color: var(--pb-ink-strong); font-weight: 600; box-shadow: inset 2px 0 0 var(--pb-signal-line); }
.pb-filter .pb-data { color: var(--pb-muted); }

/* Replay: reason text, placeholder */
.pb-replay-note { flex: 1 1 100%; margin: 0; font-size: .8125rem; opacity: .85; max-width: none; }
.pb-embed-note { display: grid; place-items: center; padding: var(--pb-s4); text-align: center; color: oklch(0.40 0.02 260); }

/* Select: match inputs (Bulma's default tints it from the scheme hue) */
.select select { background: var(--pb-surface); border: 1px solid var(--pb-line-input); border-radius: var(--pb-r-sm); color: var(--pb-ink-strong); height: 2.75rem; box-shadow: none; }
.select select:hover { border-color: var(--pb-ink); }
.select:not(.is-multiple):not(.is-loading)::after { border-color: var(--pb-muted); }