/* Stylobot.Commercial.Ui — the commercial dashboard controls' styles (apply-policy bar, full policy editor).
   Extracted 2026-08-19 from the website's wwwroot/src/index.css (one source of truth; the
   website no longer carries these blocks — both hosts load this _content css).
   Depends on the FOSS theme bridge (--sb-* aliases in Mostlylucid.BotDetection.UI
   css/sb-components.css) + the host's daisyUI theme variables (--color-*). */

.sbap {
  --sbap-card: var(--color-base-100);
  --sbap-ink: var(--color-base-content);
  --sbap-muted: var(--sb-card-subtle);
  --sbap-line: var(--sb-card-border);
  --sbap-seg: color-mix(in oklab, var(--color-base-content) 16%, transparent);
  --sbap-bg: var(--color-base-200);
  --sbap-accent: var(--color-primary);
  --sbap-accent-ink: var(--color-primary-content);
  --sbap-demo: var(--color-warning);
  --sbap-demo-bg: color-mix(in oklab, var(--color-warning) 14%, transparent);
  --sbap-ring: var(--color-base-100);
  --sbap-allow: var(--color-success);
  --sbap-throttle: var(--color-warning);
  --sbap-challenge: #c2410c;
  --sbap-block: var(--color-error);
  --sbap-custom: #6d5ce7;
  --sbap-score: linear-gradient(90deg, #16a34a, #84cc16 28%, #eab308 52%, #f97316 74%, #dc2626);
  color: var(--sbap-ink);
  font-family: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--sbap-card);
  border: 1px solid var(--sbap-line);
  /* P1 envelope: one radius + shadow for every card surface (was 14px + its own shadow). */
  border-radius: var(--sb-card-radius);
  box-shadow: var(--sb-card-shadow);
  padding: 1.2rem 1.3rem;
  position: relative;
}

.sbap * { box-sizing: border-box; }
.sbap-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.sbap-title { font-size: 1.05rem; font-weight: 800; margin: 0; }
.sbap-tags { display: flex; gap: .45rem; flex-wrap: wrap; }
.sbap-chip { font-size: .7rem; font-weight: 600; padding: .18rem .5rem; border-radius: 999px; border: 1px solid var(--sbap-seg); color: var(--sbap-muted); }
.sbap-chip.sbap-demo { color: var(--sbap-demo); border-color: transparent; background: var(--sbap-demo-bg); }
/* Interactive scope selector — the scope chip is a real <select>. Chip-shaped and COMPACT
   (max-width + ellipsis) so a long domain never widens the collapsed single row. Native caret
   via a tiny inline SVG so appearance:none doesn't drop the affordance. */
.sbap-scope-select {
  max-width: 11rem;
  padding: .18rem 1.35rem .18rem .55rem;
  color: var(--sbap-ink);
  background-color: var(--sbap-bg);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  text-overflow: ellipsis;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%238ea0b5' stroke-width='1.5'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .45rem center;
  background-size: .55rem;
}
.sbap-scope-select:hover { border-color: var(--sbap-accent); }
.sbap-scope-select:focus-visible { outline: 2px solid color-mix(in oklab, var(--sbap-accent) 60%, transparent); outline-offset: 1px; }
.sbap-scope-select option { color: var(--sbap-ink); background: var(--sbap-card); }

.sbap-tabs { display: flex; gap: .35rem; flex-wrap: wrap; margin: .75rem 0 .9rem; }
.sbap-tab { display: flex; align-items: center; gap: .4rem; font: 700 .76rem 'Raleway', sans-serif; color: var(--sbap-muted); background: transparent; border: 1px solid var(--sbap-seg); border-radius: 999px; padding: .32rem .7rem; cursor: pointer; }
.sbap-tab .sbap-sw { width: .55rem; height: .55rem; border-radius: 50%; }
.sbap-tab.sbap-on { color: var(--sbap-ink); border-color: var(--sbap-accent); background: color-mix(in oklab, var(--sbap-accent) 12%, transparent); }

.sbap-stage { position: relative; margin: 1.6rem 0 .3rem; }
.sbap-axis { position: relative; height: 12px; border-radius: 999px; background: var(--sbap-score); opacity: .92; cursor: copy; }
.sbap-pin { position: absolute; top: 50%; width: 18px; height: 18px; border-radius: 50%; transform: translate(-50%, -50%); border: 3px solid var(--sbap-ring); box-shadow: 0 1px 4px rgba(0, 0, 0, .5); cursor: grab; z-index: 2; }
.sbap-pin:active { cursor: grabbing; }
.sbap-pin.sbap-sel { outline: 3px solid color-mix(in oklab, var(--sbap-accent) 70%, transparent); outline-offset: 2px; }
.sbap-pin.sbap-allow { background: var(--sbap-allow); }
.sbap-pin.sbap-throttle { background: var(--sbap-throttle); }
.sbap-pin.sbap-challenge { background: var(--sbap-challenge); }
.sbap-pin.sbap-block { background: var(--sbap-block); }
.sbap-pin.sbap-custom { background: var(--sbap-custom); }
.sbap-pintag { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: .64rem; font-weight: 800; color: var(--sbap-ink); background: var(--sbap-card); padding: 1px 5px; border-radius: 5px; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
/* On-point remove badge (operator 2026-08-05: each set point needs a visible delete, not
   just the popover's header × — the popover × stays for the threshold/policy editor).
   2026-08-12: offset was top/right -7px — HALF the 16px badge sat ON the 18px dot,
   reading as the × overlapping the point. Now offset further out + smaller, with a
   solid card-colour ring so the dot's edge never blends under the badge. */
.sbap-pin-del {
  position: absolute; top: -10px; right: -10px; width: 14px; height: 14px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--sbap-card); color: var(--sbap-muted);
  border: 1px solid var(--sbap-line); font-size: .68rem; line-height: 1; cursor: pointer;
  box-shadow: 0 0 0 2px var(--sbap-card), 0 1px 3px rgba(0, 0, 0, .35); z-index: 3;
}
.sbap-pin-del:hover { background: var(--sbap-block); color: var(--color-error-content); }
.sbap-ends { display: flex; justify-content: space-between; font-size: .66rem; color: var(--sbap-muted); margin-top: 1.5rem; font-weight: 600; }
.sbap-hint { font-size: .7rem; color: var(--sbap-muted); margin-top: .5rem; }

.sbap-pop { position: absolute; z-index: 20; width: 320px; max-width: 84vw; max-height: min(60vh, 420px); overflow-y: auto; overscroll-behavior: contain; background: var(--sbap-card); border: 1px solid var(--sbap-line); border-radius: 11px; box-shadow: 0 20px 48px -14px rgba(0, 0, 0, .55); padding: .5rem; display: none; }
.sbap-pop.sbap-show { display: block; }
.sbap-ph { display: flex; align-items: center; gap: .5rem; padding: .2rem .45rem .5rem; }
.sbap-ph .sbap-txt { font-size: .78rem; color: var(--sbap-muted); }
.sbap-ph input { width: 64px; font: 700 .82rem 'Raleway', sans-serif; color: var(--sbap-ink); background: var(--sbap-bg); border: 1px solid var(--sbap-seg); border-radius: 7px; padding: .35rem .4rem; text-align: center; }
.sbap-del { margin-left: auto; border: 0; background: transparent; color: var(--sbap-muted); cursor: pointer; font-size: 1.05rem; padding: .15rem .4rem; border-radius: 6px; }
.sbap-del:hover { background: var(--sbap-seg); color: var(--sbap-block); }
.sbap-opt { display: flex; gap: .55rem; padding: .5rem .55rem; border-radius: 8px; cursor: pointer; }
.sbap-opt:hover { background: var(--sbap-seg); }
.sbap-opt.sbap-on { background: color-mix(in oklab, var(--sbap-accent) 14%, transparent); }
.sbap-opt .sbap-sw { width: .65rem; height: .65rem; border-radius: 50%; margin-top: .25rem; flex-shrink: 0; }
.sbap-opt b { font-size: .82rem; display: block; }
.sbap-opt small { font-size: .72rem; color: var(--sbap-muted); line-height: 1.25; }
.sbap-allow-bg { background: var(--sbap-allow); }
.sbap-throttle-bg { background: var(--sbap-throttle); }
.sbap-challenge-bg { background: var(--sbap-challenge); }
.sbap-block-bg { background: var(--sbap-block); }
.sbap-custom-bg { background: var(--sbap-custom); }

.sbap-addpol { border-top: 1px solid var(--sbap-line); margin-top: .25rem; padding: .5rem .55rem; }
.sbap-lnk { color: var(--sbap-accent); font: 700 .78rem 'Raleway', sans-serif; cursor: pointer; }
.sbap-addpol form { display: none; flex-direction: column; gap: .4rem; margin-top: .5rem; }
.sbap-addpol.sbap-show form { display: flex; }
.sbap-addpol input { font: 600 .8rem 'Raleway', sans-serif; color: var(--sbap-ink); background: var(--sbap-bg); border: 1px solid var(--sbap-seg); border-radius: 7px; padding: .4rem .5rem; }
.sbap-save { align-self: flex-start; border: 1px solid var(--sbap-accent); background: var(--sbap-accent); color: var(--sbap-accent-ink); font: 700 .76rem 'Raleway', sans-serif; border-radius: 7px; padding: .35rem .7rem; cursor: pointer; }

.sbap-row { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; border-top: 1px solid var(--sbap-line); font-size: .83rem; }
.sbap-row:first-child { border-top: 0; }
.sbap-row .sbap-sw { width: .6rem; height: .6rem; border-radius: 50%; }
.sbap-row .sbap-nm { font-weight: 600; }
.sbap-row .sbap-r { margin-left: auto; color: var(--sbap-muted); }
.sbap-row .sbap-r b { color: var(--sbap-ink); }
.sbap-allow { color: var(--sbap-allow); }
.sbap-throttle { color: var(--sbap-throttle); }
.sbap-challenge { color: var(--sbap-challenge); }
.sbap-block { color: var(--sbap-block); }
.sbap-custom { color: var(--sbap-custom); }

.sbap-foot { display: flex; justify-content: flex-end; margin-top: 1.3rem; }
.sbap-apply { border: 1px solid var(--sbap-accent); background: var(--sbap-accent); color: var(--sbap-accent-ink); font: 700 .84rem/1 'Raleway', sans-serif; padding: .6rem 1.1rem; border-radius: 9px; cursor: pointer; }
.sbap-apply:disabled { opacity: .5; cursor: not-allowed; }

/* Per-type confidence dial — one value per bot type / subject. */
.sbap-conf { display: flex; align-items: center; gap: .7rem; padding: .6rem 0 .2rem; flex-wrap: wrap; }
.sbap-conf-lbl { font-size: .74rem; font-weight: 600; color: var(--sbap-muted); }
.sbap-conf input[type='range'] { flex: 1; min-width: 140px; accent-color: var(--sbap-accent); }
.sbap-conf input[type='range']:disabled { opacity: .5; cursor: not-allowed; }
.sbap-conf-val { font-size: .78rem; font-weight: 800; color: var(--sbap-ink); min-width: 3ch; text-align: right; }

/* Info affordance ("?") — carries the end-label meaning + the drag/click hint so the
   CONTRACTED row needs no verbose text. Hidden by default; shown only on the collapsed
   row (see .sbap-collapsed .sbap-info below). Tooltip opens on hover/focus. */
.sbap-info { position: relative; display: none; flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--sbap-seg); background: transparent; color: var(--sbap-muted); font: 800 .66rem/14px 'Raleway', sans-serif; text-align: center; cursor: help; align-items: center; justify-content: center; }
.sbap-info:hover, .sbap-info:focus-visible { color: var(--sbap-ink); border-color: var(--sbap-accent); outline: none; }
.sbap-info-tip { position: absolute; z-index: 30; bottom: calc(100% + 8px); right: -4px; width: 240px; max-width: 72vw; font: 600 .68rem/1.35 'Raleway', sans-serif; color: var(--sbap-ink); background: var(--sbap-card); border: 1px solid var(--sbap-line); border-radius: 9px; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .5); padding: .5rem .6rem; display: none; text-align: left; white-space: normal; }
.sbap-info:hover .sbap-info-tip, .sbap-info:focus .sbap-info-tip, .sbap-info:focus-within .sbap-info-tip { display: block; }

/* ---- Collapse / expand ------------------------------------------------------
   DEFAULT state is contracted (.sbap-collapsed on the root): the WHOLE control is a
   single compact row — the "Apply policy" label, the bot-score bar, the "?" info
   affordance, the scope + demo chips and the "Edit policy" chevron all inline. The
   tabs, per-type list, confidence dial and Apply button live in .sbap-collapsible
   wrappers that animate open via the grid 0fr→1fr row trick. */
.sbap-top { cursor: pointer; }
.sbap-top-right { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.sbap-toggle { display: inline-flex; align-items: center; gap: .35rem; font: 700 .74rem 'Raleway', sans-serif; color: var(--sbap-accent); background: transparent; border: 1px solid var(--sbap-seg); border-radius: 999px; padding: .3rem .7rem; cursor: pointer; white-space: nowrap; }
.sbap-toggle:hover { border-color: var(--sbap-accent); background: color-mix(in oklab, var(--sbap-accent) 10%, transparent); }
.sbap-chev { display: inline-block; font-size: .7rem; line-height: 1; transition: transform .3s ease; }
.sbap:not(.sbap-collapsed) .sbap-chev { transform: rotate(180deg); }

.sbap-collapsible { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .3s ease; }
.sbap-collapsible > .sbap-collapsible-inner { overflow: hidden; min-height: 0; }
.sbap-collapsed .sbap-collapsible { grid-template-rows: 0fr; }

/* Contracted single-row layout. The root becomes a flex line; .sbap-top and its
   right cluster + tags flatten (display:contents) so title / chips / toggle join the
   line, and the .sbap-stage bar is pulled up inline. Tighter padding + zeroed stage
   margin roughly halve the contracted height. align-content:center (not the default
   "pack to start") matters here: padding top/bottom is already equal, but this is a
   wrapping flex container, and align-items only centers content WITHIN its own line
   -- with one short line inside a taller container, the line itself packs to the top
   by default, dumping all the slack below it (the reported uneven padding). */
.sbap-collapsed { display: flex; flex-wrap: wrap; align-items: center; align-content: center; column-gap: .9rem; row-gap: .4rem; padding: .5rem .875rem; }
.sbap-collapsed > .sbap-top,
.sbap-collapsed .sbap-top-right,
.sbap-collapsed .sbap-tags { display: contents; }
.sbap-collapsed .sbap-title { order: 1; }
.sbap-collapsed .sbap-chip { order: 2; }
.sbap-collapsed > .sbap-stage { order: 3; flex: 1 1 140px; margin: 0; display: flex; align-items: center; gap: .5rem; }
.sbap-collapsed .sbap-axis { flex: 1 1 auto; cursor: pointer; }
.sbap-collapsed .sbap-info { display: inline-flex; }
.sbap-collapsed .sbap-toggle { order: 5; }
.sbap-collapsed > .sbap-collapsible { order: 6; flex-basis: 100%; }

/* Contracted → hide the on-bar marker labels (they overlap when types cluster) and the
   verbose end-labels; the "?" affordance carries their meaning. Keep the bar + dots. */
.sbap-collapsed .sbap-pintag { display: none; }
.sbap-collapsed .sbap-ends { display: none; }

/* Single-subject (fingerprint) variant (.sbap-simple): ONE display — the colored button IS
   the readout (operator 2026-08-04: no standalone label, no name repeats; the button shows
   the policy name + a small provenance line explaining WHY it applies — "Manual override"
   or "Effective policy"). Sized ~25% smaller than the original (padding/font/swatch all
   scaled .75x). The dropdown lists the catalogue; Apply POSTs the same ruleset payload. */
.sbap-simple { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; padding: .45rem .675rem; }
.sbap-simple-btn {
  display: inline-flex; align-items: center; gap: .375rem;
  font: 800 .63rem/1 'Raleway', sans-serif;
  padding: .41rem .75rem; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer; user-select: none;
  box-shadow: 0 2px 8px -3px rgba(0, 0, 0, .4);
}
.sbap-simple-btn-text { display: flex; flex-direction: column; align-items: flex-start; gap: .12rem; line-height: 1.15; }
.sbap-simple-btn-sub {
  font: 600 .55rem/1 'Raleway', sans-serif;
  opacity: .8; letter-spacing: .02em;
}
.sbap-simple-btn .sbap-sw { width: .49rem; height: .49rem; border-radius: 50%; background: currentColor; }
.sbap-simple-btn.sbap-allow     { background: var(--sbap-allow);     color: var(--color-success-content); }
.sbap-simple-btn.sbap-throttle  { background: var(--sbap-throttle);  color: var(--color-warning-content); }
.sbap-simple-btn.sbap-challenge { background: var(--sbap-challenge); color: #fff; }
.sbap-simple-btn.sbap-block     { background: var(--sbap-block);     color: var(--color-error-content); }
.sbap-simple-btn.sbap-custom    { background: var(--sbap-custom);    color: #fff; }
.sbap-simple-btn:hover { filter: brightness(1.1); }
.sbap-simple .sbap-opt { border-radius: 8px; padding: .35rem .4rem; }
.sbap-simple .sbap-opt:hover { background: var(--sbap-seg); }
.sbap-simple .sbap-opt b { color: var(--sbap-ink); }
.sbap-simple .sbap-opt small { color: var(--sbap-muted); }

@media (prefers-reduced-motion: reduce) {
  .sbap-collapsible { transition: none; }
  .sbap-chev { transition: none; }
}

/* ============================================================
   Full policy editor (apply-policy-editor.ts) — the graphical WHEN/THEN
   rule stack behind the Apply-policy control's "Full editor" toggle.
   `.sbpe-*`, namespaced to match `.sbap-*`'s convention so nothing collides.
   #sb-full-editor always renders INSIDE .sbap (see Default.cshtml), so this
   reuses the same --sbap-* custom properties (colour, spacing, theme) rather
   than redefining them — one palette for both surfaces of the same control.
   ============================================================ */
#sb-full-editor { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--sbap-line); }

.sbpe-rule {
  border: 1px solid var(--sbap-line);
  border-radius: 11px;
  padding: .7rem .8rem;
  margin-top: .55rem;
  background: var(--sbap-bg);
}
.sbpe-rule.sbpe-otherwise { border-style: dashed; background: transparent; }
.sbpe-rule-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.sbpe-rule-name { font: 800 .8rem 'Raleway', sans-serif; color: var(--sbap-ink); }
.sbpe-rule-tools { display: flex; gap: .3rem; }
.sbpe-rule-tools button {
  border: 1px solid var(--sbap-seg);
  background: transparent;
  color: var(--sbap-muted);
  border-radius: 6px;
  width: 1.7rem;
  height: 1.7rem;
  cursor: pointer;
  font-size: .7rem;
  line-height: 1;
}
.sbpe-rule-tools button:hover:not(:disabled) { color: var(--sbap-ink); border-color: var(--sbap-accent); }
.sbpe-rule-tools button:disabled { opacity: .4; cursor: not-allowed; }

.sbpe-clause { display: flex; align-items: flex-start; gap: .6rem; margin-top: .6rem; }
.sbpe-clause-label {
  flex: 0 0 auto;
  font: 800 .64rem 'Raleway', sans-serif;
  letter-spacing: .06em;
  color: var(--sbap-muted);
  padding-top: .3rem;
  min-width: 2.6rem;
}
.sbpe-clause-body { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.sbpe-italic { font-style: italic; color: var(--sbap-muted); font-size: .8rem; }

.sbpe-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font: 600 .78rem 'Raleway', sans-serif;
  color: var(--sbap-ink);
  background: var(--sbap-card);
  border: 1px solid var(--sbap-seg);
  border-radius: 999px;
  padding: .3rem .6rem;
}
.sbpe-chip select, .sbpe-chip input[type='number'] {
  border: 0;
  background: transparent;
  font: 700 .78rem 'Raleway', sans-serif;
  color: var(--sbap-ink);
  padding: 0;
}
.sbpe-chip input[type='number'] { width: 2.6rem; text-align: right; }
.sbpe-chip select:focus-visible, .sbpe-chip input:focus-visible { outline: none; }
.sbpe-chip-disabled {
  color: var(--sbap-muted);
  background: transparent;
  border-style: dashed;
  cursor: not-allowed;
}
.sbpe-join { font: 700 .68rem 'Raleway', sans-serif; color: var(--sbap-muted); }

/* Colour swatch dot, reusing the SAME categorical colours as the bar (.sbap-pin.sbap-allow etc). */
.sbpe-sw { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; flex-shrink: 0; }
.sbpe-sw.sbpe-allow { background: var(--sbap-allow); }
.sbpe-sw.sbpe-throttle { background: var(--sbap-throttle); }
.sbpe-sw.sbpe-challenge { background: var(--sbap-challenge); }
.sbpe-sw.sbpe-block { background: var(--sbap-block); }
.sbpe-sw.sbpe-custom { background: var(--sbap-custom); }

.sbpe-action-row { position: relative; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.sbpe-action-trigger { cursor: pointer; }
.sbpe-flag {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font: 600 .72rem 'Raleway', sans-serif;
  color: var(--sbap-muted);
  cursor: pointer;
}
.sbpe-flag.sbpe-on { color: var(--sbap-ink); }
.sbpe-flag input { accent-color: var(--sbap-accent); }

/* Searchable grouped popover for the THEN action — same card/shadow treatment as .sbap-pop. */
.sbpe-menu {
  display: none;
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  width: 280px;
  max-width: 84vw;
  max-height: min(50vh, 360px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--sbap-card);
  border: 1px solid var(--sbap-line);
  border-radius: 11px;
  box-shadow: 0 20px 48px -14px rgba(0, 0, 0, .55);
  padding: .5rem;
}
.sbpe-menu.sbpe-open { display: block; }
.sbpe-menu-search { padding: .1rem .2rem .5rem; }
.sbpe-menu-search input {
  width: 100%;
  font: 600 .8rem 'Raleway', sans-serif;
  color: var(--sbap-ink);
  background: var(--sbap-bg);
  border: 1px solid var(--sbap-seg);
  border-radius: 7px;
  padding: .4rem .55rem;
}
.sbpe-menu button[data-role='pick-action'] {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  border-radius: 8px;
  padding: .45rem .5rem;
  cursor: pointer;
}
.sbpe-menu button[data-role='pick-action']:hover { background: var(--sbap-seg); }
.sbpe-menu button[data-role='pick-action'] .sbpe-sw { margin-top: .3rem; }
/* This is the exact class the "AllowLet the visitor through untouched"-style fused-text bug
   traces to: the option name and its help text sit in one text node without this rule, so the
   description MUST be its own block, not inline, to read as two separate lines. */
.sbpe-desc { display: block; font-size: .72rem; color: var(--sbap-muted); font-weight: 500; margin-top: .1rem; }
.sbpe-empty { padding: .6rem; font-size: .78rem; color: var(--sbap-muted); text-align: center; }

.sbpe-rule-foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-top: .7rem; padding-top: .6rem; border-top: 1px solid var(--sbap-line); }
.sbpe-branch { display: flex; align-items: center; gap: .5rem; font-size: .74rem; color: var(--sbap-muted); }
.sbpe-branch-seg { display: inline-flex; border: 1px solid var(--sbap-seg); border-radius: 999px; overflow: hidden; }
.sbpe-branch-seg button {
  border: 0;
  background: transparent;
  color: var(--sbap-muted);
  font: 700 .72rem 'Raleway', sans-serif;
  padding: .3rem .65rem;
  cursor: pointer;
}
.sbpe-branch-seg button.sbpe-on { background: var(--sbap-accent); color: var(--sbap-accent-ink); }
.sbpe-branch-seg button:disabled { opacity: .5; cursor: not-allowed; }
.sbpe-branch-note { font-size: .72rem; color: var(--sbap-muted); }
.sbpe-cont { color: var(--sbap-muted); font-style: italic; }

.sbpe-add-rule {
  display: block;
  width: 100%;
  margin-top: .7rem;
  border: 1px dashed var(--sbap-seg);
  background: transparent;
  color: var(--sbap-accent);
  font: 700 .78rem 'Raleway', sans-serif;
  border-radius: 9px;
  padding: .5rem;
  cursor: pointer;
}
.sbpe-add-rule:hover { border-color: var(--sbap-accent); background: color-mix(in oklab, var(--sbap-accent) 8%, transparent); }

.sbpe-foot { display: flex; justify-content: flex-end; margin-top: 1rem; }
.sbpe-apply { border: 1px solid var(--sbap-accent); background: var(--sbap-accent); color: var(--sbap-accent-ink); font: 700 .84rem/1 'Raleway', sans-serif; padding: .6rem 1.1rem; border-radius: 9px; cursor: pointer; }
.sbpe-apply:disabled { opacity: .5; cursor: not-allowed; }

/* Minimap — the plain-language summary list under the rule cards. */
.sbpe-minimap { margin-top: .9rem; padding-top: .7rem; border-top: 1px solid var(--sbap-line); }
.sbpe-mm-item { font-size: .74rem; color: var(--sbap-muted); padding: .2rem 0; }
.sbpe-mm-item b { color: var(--sbap-ink); }

/* ------------------------------------------------------------------------
   Traffic summary bar (SbTrafficCounters) — the sibling of the Policy bar
   directly above it. P1 envelope: both consume the SAME radius + shadow
   tokens now (.sbap uses var(--sb-card-radius)/var(--sb-card-shadow); this
   bar keeps daisyUI's card default radius which IS the token value, and
   only the shadow needs the explicit match — the old patch hardcoded both
   and had to be kept in lock-step by hand). The card-body padding rhythm
   still matches the Policy bar's contracted padding (.5rem .875rem vs the
   .sbap-simple row) so the pair reads as one design language.
   ------------------------------------------------------------------------ */
.sb-traffic-summary {
  box-shadow: var(--sb-card-shadow);
}
.sb-traffic-summary > .card-body {
  padding: .5rem .875rem !important;
}

/* ============================================================
   DOCS (/docs) — long-form markdown rendering.

   Lives here, not in an inline <style> in Views/Docs/Index.cshtml.
   That block declared its own type scale (h2 1.48rem/750, h3 1.14rem,
   body 1.02rem) -- sizes used nowhere else on the site -- which is why
   docs read as a different product. It also targeted daisyUI v4 token
   names (--p, --b2, --b3) that this site does not define, so every
   accent rule in it silently did nothing: the shell gradient resolved
   to `none` and doc links computed to the body text colour, leaving
   underline as the only affordance. Measured on staging 2026-08-09.

   Rules: real --color-* tokens only, and font sizes from the shared
   scale. The one deliberate divergence is line-height, which is looser
   here than in marketing copy because these pages are read, not scanned.
   ============================================================ */
.docs-shell {
  background: radial-gradient(circle at 78% 0%, color-mix(in oklab, var(--color-primary) 12%, transparent), transparent 26rem);
}

.docs-sidebar-link {
  border: 1px solid transparent;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.docs-sidebar-link:hover {
  border-color: color-mix(in oklab, currentColor 12%, transparent);
  transform: translateX(2px);
}

.docs-article { box-shadow: var(--sb-card-shadow); }

.quickstart-path { transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.quickstart-path:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--color-primary) 55%, transparent);
  box-shadow: var(--sb-card-shadow);
}

/* Prose measure: ~72 characters. Tables, code and diagrams opt out and
   use the full column width. */