:root {
  --bg: #f5f5f7;
  --bg-soft: #fafafc;
  --paper: #ffffff;
  --ink: #1d1d1f;
  --ink-soft: #2c2c2e;
  --muted: #6e6e73;
  --muted-2: #86868b;
  --line: rgba(0, 0, 0, 0.08);
  --line-strong: rgba(0, 0, 0, 0.14);
  --accent: #0071e3;
  --accent-hover: #0058b8;
  --accent-soft: #e8f1fc;
  --accent-ring: rgba(0, 113, 227, 0.32);
  --table-head: #f5f5f7;
  --inspector-width: 392px;
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.12);
  --dur: 160ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 14px;
  line-height: 1.5;
}
:focus-visible {
  outline: 2px solid var(--accent-ring);
  outline-offset: 2px;
  border-radius: 4px;
}
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 6px 24px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
}
.topbar > .brand { flex: 0 1 auto; min-width: 0; margin-right: auto; }
.topbar > .top-tabs { flex: 0 0 auto; }
.topbar > .approach-toggle { flex: 0 0 auto; }
.topbar > .topbar-pdf-actions { flex: 0 0 auto; display: flex; gap: 6px; align-items: center; }
.topbar > .auth-control { flex: 0 0 auto; }
body:not([data-view="rule"]) .topbar-pdf-actions { display: none; }
.view-tabs-strip {
  position: sticky;
  top: 40px;
  z-index: 18;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
  padding: 6px 24px;
}
.view-tabs-strip-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
}
.view-tabs-strip-inner > .search-box { flex: 1 1 320px; max-width: 460px; min-width: 0; }
.view-tabs-strip-inner > .top-tabs { flex: 0 0 auto; }
.view-tabs-strip-inner > .view-tabs-strip-spacer { flex: 1 1 320px; min-width: 0; }
.view-tabs-strip .top-tabs { padding: 4px; }
.view-tabs-strip .top-tab { font-size: 13px; padding: 6px 16px; height: 30px; }
.brand h1 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.brand p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.35;
  max-width: 420px;
  display: none;
}
.toolbar-note {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.55;
}
.top-tabs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: var(--radius-sm);
}
.top-tab {
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  border-radius: 7px;
  padding: 6px 14px;
  font: inherit;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 500;
  text-align: center;
  height: 30px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.top-tab:hover { color: var(--ink); }
.top-tab.is-active {
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-xs), 0 0 0 1px rgba(0, 0, 0, 0.04);
}
.workspace { margin-right: 0; min-height: 100vh; }
.view-panel { display: none; }
.view-panel.is-active { display: block; }
.rule-shell, .ted-shell, .table-toolbar, .table-wrap, .requirements-shell { max-width: 1440px; margin: 0 auto; }
.rule-shell, .requirements-shell { padding: 88px 14px 50px; }
.ted-shell { padding: 84px 14px 34px; }
.rule-shell {
  display: grid;
  grid-template-columns: 170px minmax(0, 918px) 220px;
  justify-content: center;
  gap: 14px;
  align-items: start;
  max-width: 1380px;
}
.rule-shell.has-open-inspector,
.rule-shell.has-open-comment-response {
  grid-template-columns: 170px minmax(0, 918px) minmax(360px, var(--inspector-width));
  max-width: 1680px;
}
/* When the inspector or comment-response panel is open, it occupies the
   right column previously held by Advocacy Topics; hide the rail so the
   panel can take its place without overflow. */
.rule-shell.has-open-inspector .advocacy-rail-shell,
.rule-shell.has-open-comment-response .advocacy-rail-shell {
  display: none;
}
/* Rule pages render at ~918px fixed width; with the 170px left rail,
   220px right rail, gaps and padding the layout needs ~1380px before
   the center column would start to squeeze. Hide the right rail below
   that so the rule text never falls under its readable minimum. */
@media (max-width: 1380px) {
  .rule-shell { grid-template-columns: 170px minmax(0, 918px); justify-content: center; }
  .advocacy-rail-shell { display: none; }
}
/* When only the comment-response popup is open (no field inspector),
   place the popup between the rail and the rule text so it doesn't
   cover ABA highlights that sit on the right edge of the page. Only
   apply at desktop widths; the mobile breakpoint below stacks instead. */
@media (min-width: 1101px) {
  .rule-shell.has-open-comment-response:not(.has-open-inspector) {
    grid-template-columns: 170px minmax(360px, var(--inspector-width)) minmax(0, 1fr);
  }
  .rule-shell.has-open-comment-response:not(.has-open-inspector) .rule-rail-shell { grid-column: 1; grid-row: 1; }
  .rule-shell.has-open-comment-response:not(.has-open-inspector) .comment-response-shell { grid-column: 2; grid-row: 1; }
  .rule-shell.has-open-comment-response:not(.has-open-inspector) .rule-document-shell,
  .rule-shell.has-open-comment-response:not(.has-open-inspector) .rule-text-toolbar { grid-column: 3; }
}
.rule-rail-shell {
  position: sticky;
  top: 88px;
  align-self: start;
}
.rule-rail-card {
  padding: 14px 6px 14px 4px;
  border: 0;
  background: transparent;
  box-shadow: none;
  max-height: calc(100vh - 112px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.rule-rail-nav {
  display: grid;
  gap: 8px;
}
.rule-rail-link {
  color: var(--ink-soft);
  text-decoration: none;
  line-height: 1.32;
  font-size: 12.5px;
  padding: 6px 10px;
  margin: 0 -2px;
  border-radius: var(--radius-xs);
  display: block;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.rule-rail-link:hover { color: var(--accent); background: var(--accent-soft); }
.rule-rail-sublist {
  display: grid;
  gap: 2px;
  margin: 2px 0 4px 14px;
  padding-left: 8px;
  border-left: 1px solid var(--line);
}
.rule-rail-group { display: contents; }
.rule-rail-group-nested { display: block; }
.rule-rail-sublist-nested {
  margin: 2px 0 4px 8px;
  padding-left: 8px;
}
.rule-rail-sublink-2 {
  font-size: 10.5px;
  color: rgba(95, 82, 60, 0.78);
  padding-left: 4px;
}
.rule-rail-group-label-sub { font-size: 11.5px; font-weight: 500; }
.rule-rail-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  appearance: none;
  background: transparent;
  border: 0;
  padding: 6px 10px;
  margin: 0 -2px;
  cursor: pointer;
  color: var(--ink-soft);
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.32;
  text-align: left;
  border-radius: var(--radius-xs);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.rule-rail-group-head:hover,
.rule-rail-group-head:focus {
  background: var(--accent-soft);
  color: var(--accent);
  outline: 0;
}
.rule-rail-chevron {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  transform: rotate(-90deg);
  transition: transform var(--dur) var(--ease);
  color: var(--muted-2);
}
.rule-rail-group-head[aria-expanded="true"] .rule-rail-chevron {
  transform: rotate(0deg);
  color: var(--accent);
}
.rule-rail-group-head[aria-expanded="true"] {
  color: var(--accent);
  font-weight: 600;
}
.rule-rail-group-label { flex: 1 1 auto; }
.rule-rail-sublist.is-collapsed { display: none; }
.rule-rail-sublink {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  font-size: 11px;
  color: rgba(95, 82, 60, 0.85);
}
.rule-rail-sublink-page {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  color: rgba(120, 104, 78, 0.78);
}
.advocacy-rail-shell {
  position: sticky;
  top: 88px;
  align-self: start;
  min-width: 0;
  /* Push content down so the "Advocacy Topics" heading lines up with
     the "ERBA Rule Sections" heading on the left rail. The left rail
     has the Capital approach toggle stacked above its TOC card; this
     offset matches that toggle's outer height (padding + label + gap
     + button block + bottom margin ≈ 110px). Kept as padding (not
     margin) so the sticky box's top still anchors at top:88px and the
     two rails stay aligned while scrolling. */
  padding-top: 110px;
}
.advocacy-rail-card {
  max-height: calc(100vh - 282px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 80px;
}
.advocacy-rail-nav {
  display: grid;
  gap: 4px;
}
.advocacy-rail-nav .rule-rail-group { display: block; }
.advocacy-rail-nav .rule-rail-sublist { display: grid; gap: 2px; }
.advocacy-rail-nav .rule-rail-sublist.is-collapsed { display: none; }
.advocacy-rail-nav .advocacy-leaf-list {
  display: grid;
  gap: 2px;
  margin: 2px 0 4px 14px;
  padding-left: 8px;
  border-left: 1px solid var(--line);
}
.advocacy-rail-nav .advocacy-leaf-list.is-collapsed { display: none; }
.advocacy-topic-link {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 6px;
  padding: 5px 10px;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--ink-soft);
  text-decoration: none;
  line-height: 1.3;
  font-size: 11.5px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.advocacy-topic-link:hover,
.advocacy-topic-link:focus {
  color: var(--accent);
  background: var(--accent-soft);
  outline: 0;
}
.advocacy-topic-link small {
  color: var(--muted-2);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
  white-space: nowrap;
}
.advocacy-topic-link.is-conformed small { color: #2e7d32; }
.advocacy-topic-link.is-not-conformed small { color: #b15a00; }
.aba-layer-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 10px 0;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.3;
  font-weight: 500;
}
.aba-layer-toggle input {
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
}
.aba-topic-list {
  display: none;
  gap: 5px;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid rgba(174, 159, 135, 0.18);
  padding-bottom: 2px;
}
.rule-shell:not(.show-aba-response-layer) .aba-topic-list {
  display: none !important;
}
.show-aba-response-layer .aba-topic-list {
  display: grid;
}
.aba-topic-link {
  display: grid;
  gap: 2px;
  padding: 6px 10px;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--ink-soft);
  text-decoration: none;
  line-height: 1.25;
  font-size: 12px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.aba-topic-link:hover,
.aba-topic-link:focus {
  color: var(--accent);
  background: var(--accent-soft);
  outline: 0;
}
.aba-topic-link small {
  color: var(--muted-2);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}
.ted-layout-shell {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  max-width: 1680px;
  margin: 0 auto;
  padding: 0 18px;
}
.ted-layout-shell .ted-shell {
  width: 100%;
  max-width: 1440px;
  padding-left: 0;
  padding-right: 0;
}
.ted-rail-shell {
  position: sticky;
  top: 88px;
  align-self: start;
  margin-top: 88px;
}
.ted-rail-card {
  padding: 14px 6px 14px 4px;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.ted-rail-nav {
  display: grid;
  gap: 2px;
}
.ted-rail-link {
  color: var(--ink-soft);
  text-decoration: none;
  line-height: 1.32;
  font-size: 12.5px;
  padding: 6px 10px;
  margin: 0 -2px;
  border-radius: var(--radius-xs);
  display: block;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.ted-rail-link:hover { color: var(--accent); background: var(--accent-soft); }
.rule-main-column {
  min-width: 0;
}
.table-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
  flex-wrap: wrap;
  padding: 104px 18px 0;
}
.rule-document-shell {
  max-width: 960px;
  margin: 0 auto;
}
.rule-text-toolbar {
  max-width: 960px;
  margin: 0 auto 14px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
}
.rule-shell.has-open-inspector .rule-text-toolbar {
  max-width: 100%;
  margin: 0 0 10px;
}
.rule-text-toolbar-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.rule-text-toolbar-actions {
  display: flex;
  gap: 6px;
}
.rule-text-toolbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.rule-text-toolbar-btn:hover {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent);
}
@media print {
  .rule-text-toolbar { display: none; }
}
.rule-shell.has-open-inspector .rule-document-shell {
  max-width: 100%;
  margin: 0;
}
.rule-text {
  display: grid;
  gap: 20px;
}
.fr-document {
  justify-items: center;
}
.rule-shell.has-open-inspector .fr-document {
  justify-items: start;
}
.fr-page {
  width: 918px;
  max-width: 918px;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  position: relative;
  /* Skip render work for pages off-screen. Safe to apply at the page
     level because .notes-pin-layer is rendered INSIDE the page (in the
     right-margin whitespace), so paint containment never clips it. */
  content-visibility: auto;
  contain-intrinsic-size: 918px 1188px;
}
.rule-document-shell .fr-document {
  display: grid;
  gap: 28px;
}
.fr-page-frame {
  position: relative;
  width: 918px;
  height: 1188px;
  overflow: hidden;
  background: #fff;
  color: #000;
  font-family: "Times New Roman", Times, serif;
}
/* Subtle skeleton shown until the PDF canvas paints. The shimmer is gated on
   :has(.fr-page-canvas) so it disappears automatically the moment hydratePage
   appends the canvas, with a quiet crossfade. Kept neutral on purpose so it
   never competes with the rule text once it's loaded. */
.fr-page-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.025) 0%, rgba(0,0,0,0) 18%, rgba(0,0,0,0) 100%),
    linear-gradient(90deg, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0.08) 50%, rgba(0,0,0,0.04) 100%);
  background-size: 100% 100%, 200% 100%;
  background-repeat: no-repeat;
  background-position: 0 0, 0 0;
  animation: frPageSkeleton 1.6s ease-in-out infinite;
  opacity: 1;
  transition: opacity 240ms ease;
  pointer-events: none;
}
.fr-page-frame:has(.fr-page-canvas)::before {
  opacity: 0;
  animation: none;
}
.fr-page-frame .fr-page-canvas {
  position: relative;
  z-index: 1;
  animation: frPageCanvasIn 220ms ease both;
}
@keyframes frPageSkeleton {
  0%   { background-position: 0 0, -50% 0; }
  100% { background-position: 0 0, 150% 0; }
}
@keyframes frPageCanvasIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .fr-page-frame::before { animation: none; }
  .fr-page-frame .fr-page-canvas { animation: none; }
}
.fr-page-image {
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
  pointer-events: none;
}
.fr-gpo-mark {
  position: absolute;
  left: 68px;
  top: 14px;
  z-index: 4;
  width: 54px;
  color: #2e3f96;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 5px;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-align: center;
  pointer-events: none;
}
.fr-gpo-mark span,
.fr-gpo-mark strong {
  display: block;
}
.fr-gpo-mark strong {
  margin-top: -1px;
  font-size: 11px;
  font-style: italic;
  letter-spacing: 0;
}
.fr-text-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: auto;
  user-select: text;
}
.fr-hotspot-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.fr-token {
  position: absolute;
  white-space: pre;
  line-height: 1;
  color: transparent;
  font-family: "Times New Roman", Times, serif;
  font-weight: 400;
  cursor: text;
  pointer-events: auto;
  user-select: text;
}
.fr-token::selection {
  color: transparent;
  background: rgba(39, 101, 177, 0.28);
}
.wiki-link,
.output-inspect, .inline-inspect, .dictionary-open, .req-nav-chip, .ted-field-link {
  border: 0;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: rgba(0, 113, 227, 0.42);
  transition: text-decoration-color var(--dur) var(--ease);
}
.wiki-link:hover,
.output-inspect:hover, .inline-inspect:hover, .dictionary-open:hover, .req-nav-chip:hover, .ted-field-link:hover {
  text-decoration-color: var(--accent);
}
.wiki-link {
  font-size: inherit;
  line-height: inherit;
}
.fr-hotspot {
  position: absolute;
  display: block;
  z-index: 3;
  border-radius: 0;
  text-decoration: none;
  color: transparent;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(82, 157, 213, 0.46);
  cursor: pointer;
  pointer-events: auto;
}
.fr-hotspot:hover {
  border-bottom-color: rgba(53, 139, 201, 0.68);
}
.fr-hotspot:focus {
  outline: 1px solid rgba(53, 139, 201, 0.68);
  outline-offset: 1px;
}
.aba-response-hotspot {
  position: absolute;
  display: none;
  z-index: 4;
  border: 0;
  background: rgba(255, 214, 102, 0.18);
  color: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: inset 0 -0.16em 0 rgba(232, 168, 36, 0.22);
  border-radius: 2px;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.aba-topic-anchor {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}
.show-aba-response-layer .aba-response-hotspot {
  display: block;
}
.aba-response-hotspot:hover,
.aba-response-hotspot:focus {
  outline: 0;
  background: rgba(255, 200, 70, 0.32);
  box-shadow: inset 0 -0.18em 0 rgba(220, 152, 24, 0.38);
}
/* In-flow comment-letter highlight wrapped directly inside the PDF.js text
   layer for ERBA pages, where there is no static hotspot HTML in page JSON.
   Invisible until the user toggles "Show ABA/BPI response layer" on. */
mark.aba-response-mark {
  background: transparent;
  color: inherit;
  cursor: default;
  pointer-events: none;
  padding: 0;
  border-radius: 0;
}
.show-aba-response-layer mark.aba-response-mark {
  background: rgba(255, 214, 102, 0.18);
  box-shadow: inset 0 -0.16em 0 rgba(232, 168, 36, 0.22);
  cursor: pointer;
  pointer-events: auto;
}
.show-aba-response-layer mark.aba-response-mark:hover,
.show-aba-response-layer mark.aba-response-mark:focus {
  outline: 0;
  background: rgba(255, 200, 70, 0.32);
  box-shadow: inset 0 -0.18em 0 rgba(220, 152, 24, 0.38);
}
/* Build-time-computed comment-letter anchor overlay. Sits in its own
   absolutely-positioned layer above the PDF.js text layer so we never
   mutate text-layer DOM. */
.fr-aba-overlay-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}
.fr-aba-overlay {
  position: absolute;
  display: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: rgba(255, 214, 102, 0.18);
  box-shadow: inset 0 -0.16em 0 rgba(232, 168, 36, 0.22);
  cursor: pointer;
  pointer-events: auto;
  border-radius: 2px;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.show-aba-response-layer .fr-aba-overlay {
  display: block;
}
.show-aba-response-layer .fr-aba-overlay:hover,
.show-aba-response-layer .fr-aba-overlay:focus {
  outline: 0;
  background: rgba(255, 200, 70, 0.32);
  box-shadow: inset 0 -0.18em 0 rgba(220, 152, 24, 0.38);
}
/* Brief flash on every highlight rect of the just-activated comment, so the
   reader's eye connects the (sticky) Comment Response panel to the marked
   passage instead of the panel feeling like an island. Applied via JS class
   .aba-response-pulse for ~2s; respects reduced-motion. */
@keyframes abaResponsePulse {
  0%   { background: rgba(255, 214, 102, 0.18); box-shadow: inset 0 -0.16em 0 rgba(232, 168, 36, 0.22); }
  20%  { background: rgba(255, 188, 60, 0.55); box-shadow: 0 0 0 2px rgba(232, 152, 24, 0.55), inset 0 -0.18em 0 rgba(220, 152, 24, 0.55); }
  60%  { background: rgba(255, 200, 70, 0.42); box-shadow: 0 0 0 1px rgba(232, 152, 24, 0.32), inset 0 -0.18em 0 rgba(220, 152, 24, 0.42); }
  100% { background: rgba(255, 214, 102, 0.18); box-shadow: inset 0 -0.16em 0 rgba(232, 168, 36, 0.22); }
}
.show-aba-response-layer .fr-aba-overlay.aba-response-pulse,
.show-aba-response-layer mark.aba-response-mark.aba-response-pulse {
  animation: abaResponsePulse 1.6s var(--ease) 1;
}
@media (prefers-reduced-motion: reduce) {
  .show-aba-response-layer .fr-aba-overlay.aba-response-pulse,
  .show-aba-response-layer mark.aba-response-mark.aba-response-pulse {
    animation: none;
    background: rgba(255, 188, 60, 0.42);
    box-shadow: 0 0 0 1px rgba(232, 152, 24, 0.42), inset 0 -0.18em 0 rgba(220, 152, 24, 0.42);
  }
}
.comment-response-anchor-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  margin: 6px 0 4px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.comment-response-anchor-chips[hidden] { display: none; }
.comment-response-anchor-chips-label {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-right: 4px;
}
.comment-response-anchor-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
  color: var(--ink-soft);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.comment-response-anchor-chip:hover,
.comment-response-anchor-chip:focus {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent);
  outline: 0;
}
.comment-response-anchor-chip .chip-term {
  font-weight: 500;
  font-style: italic;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.comment-response-anchor-chip .chip-page {
  font-size: 10.5px;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
}
.inspector-shell {
  display: none;
  position: sticky;
  top: 88px;
  width: 100%;
  max-height: calc(100vh - 106px);
  padding: 16px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: auto;
  z-index: 16;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.inspector-shell.is-open {
  display: block;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.comment-response-shell {
  display: none;
  position: sticky;
  top: 88px;
  align-self: start;
  width: 100%;
  max-height: calc(100vh - 106px);
  padding: 16px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: auto;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  /* Sticky needs its own stacking context above the page canvas/text layer
     so pulses on the highlights below don't accidentally repaint over it. */
  z-index: 5;
}
.comment-response-shell.is-open {
  display: block;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.comment-response-card,
.comment-response-sections {
  display: grid;
  gap: 7px;
}
.comment-disposition-card strong {
  text-transform: capitalize;
}
.comment-conformed { border-color: rgba(6, 95, 70, 0.18); background: #f3fbf6; }
.comment-partially-conformed { border-color: rgba(146, 64, 14, 0.18); background: #fff8ec; }
.comment-did-not-conform { border-color: rgba(153, 27, 27, 0.16); background: #fff5f3; }
.comment-unclear { border-color: rgba(92, 126, 145, 0.18); background: #f5fafb; }
.inspector-card { display: grid; gap: 7px; }
.inspector-head { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.inspector-head h2 { margin: 0; font-size: 16px; line-height: 1.08; }
.inspector-close {
  border: 1px solid var(--line);
  background: #fffdfa;
  border-radius: 4px;
  padding: 4px 7px;
  font: inherit;
  cursor: pointer;
  font-size: 11px;
}
.inspector-close-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  color: var(--muted);
  line-height: 0;
}
.inspector-close-icon:hover,
.inspector-close-icon:focus {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft, #fff7ed);
  outline: 0;
}
.inspector-close-icon svg { width: 12px; height: 12px; }
.inspector-meta { display: flex; gap: 4px 6px; flex-wrap: wrap; }
.inspector-sections { display: grid; gap: 6px; }
.inspector-section {
  padding: 7px 8px;
  border: 1px solid rgba(174, 159, 135, 0.28);
  background: rgba(255, 252, 246, 0.8);
}
.inspector-section-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  margin-bottom: 6px;
}
.inspector-section-head h3 {
  margin: 0;
  font-size: 12px;
}
.inspector-section-head span {
  color: var(--muted);
  font-size: 9px;
}
.inspector-grid-tight {
  margin: 0;
  display: grid;
  gap: 6px;
}
.inspector-grid-tight div {
  padding: 7px 8px;
  border: 1px solid rgba(174, 159, 135, 0.18);
  background: rgba(255, 252, 246, 0.72);
}
.inspector-grid-tight dt {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.inspector-grid-tight dd { margin: 0; font-size: 11px; line-height: 1.3; }
.inspector-stack {
  display: grid;
  gap: 6px;
}
.inspector-note-card {
  padding: 7px 8px;
  border: 1px solid rgba(174, 159, 135, 0.22);
  background: #fffdfa;
}
.inspector-note-card strong {
  display: block;
  font-size: 11px;
}
.inspector-note-win {
  border-color: rgba(6, 95, 70, 0.28);
  background: #f4fff8;
}
.inspector-note-card p {
  margin: 4px 0 0;
  line-height: 1.28;
  font-size: 11px;
}
.inspector-note-card .card-meta {
  margin-top: 4px;
}
.inspector-detail-drawer {
  border-top: 1px solid rgba(174, 159, 135, 0.24);
  padding-top: 6px;
}
.inspector-detail-drawer summary {
  cursor: pointer;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
}
.inspector-detail-grid {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}
.inspector-quiet-label {
  margin: 0;
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.inspector-quiet-line {
  color: var(--muted);
}
.inspector-empty {
  color: var(--muted);
}
.rule-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin: 0 auto 28px;
  max-width: 1160px;
  padding: 8px 4px 20px;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.rule-hero.rule-hero-compact {
  margin: 0 auto 8px;
  padding: 4px 4px 6px;
  gap: 0;
}
.rule-hero h1 {
  margin: 0;
  max-width: 820px;
  font-size: 38px;
  line-height: 1.06;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: var(--ink);
}
.rule-hero.rule-hero-compact h1 {
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: 600;
  max-width: none;
}
.rule-hero-summary {
  max-width: 720px;
  margin: 14px 0 0;
  color: var(--ink-soft);
  line-height: 1.55;
  font-size: 15.5px;
  font-weight: 400;
}
.rule-hero-note {
  max-width: 720px;
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.5;
  font-size: 13.5px;
}
.rule-hero-utility {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 900px;
  margin-top: 4px;
}
.rule-hero-utility span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 10px;
  border: 0;
  background: rgba(0, 0, 0, 0.04);
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: none;
  border-radius: var(--radius-pill);
  font-weight: 500;
}
.ted-hero {
  margin: 0 auto 28px;
  max-width: 1160px;
  padding: 8px 4px 20px;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.eyebrow {
  margin: 0 0 10px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11.5px;
  font-weight: 600;
}
.ted-hero h1 {
  margin: 0;
  font-size: 40px;
  letter-spacing: -0.025em;
  line-height: 1.06;
  font-weight: 700;
}
.ted-summary {
  max-width: 720px;
  margin: 14px 0 0;
  color: var(--ink-soft);
  line-height: 1.55;
  font-size: 15.5px;
}
.ted-step-shell {
  margin-top: 14px;
  scroll-margin-top: 106px;
}
.ted-step-banner {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 7px 11px;
  border-radius: 4px;
  background: #20364a;
  color: #f5f0e8;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ted-step-banner strong {
  font-size: 13px;
  letter-spacing: 0.04em;
}
.classification-prelude {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid #eadfd3;
  background: rgba(255, 252, 246, 0.9);
}
.step-math-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.step-panel {
  padding: 11px;
  border: 1px solid #e8dfd2;
  background: #fffdfa;
}
.step-panel h2 {
  margin: 0 0 8px;
  font-size: 15px;
}
.step-line {
  display: grid;
  gap: 3px;
  margin-top: 7px;
}
.step-line strong {
  font-size: 12px;
}
.step-line span {
  color: var(--ink);
  line-height: 1.32;
  font-size: 12px;
}
.step-line em {
  font-style: normal;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.input-family-group {
  margin-top: 8px;
  border: 1px solid #e8dfd2;
  background: #fbf6ec;
  border-radius: 4px;
}
.input-family-group + .input-family-group {
  margin-top: 6px;
}
.input-family-group > summary {
  list-style: none;
  cursor: pointer;
  padding: 6px 9px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  color: #4a3a23;
}
.input-family-group > summary::-webkit-details-marker { display: none; }
.input-family-group > summary::before {
  content: "\25B8";
  display: inline-block;
  margin-right: 6px;
  transition: transform 0.15s ease;
  color: #8a7553;
}
.input-family-group[open] > summary::before {
  transform: rotate(90deg);
}
.input-family-name { flex: 1; }
.input-family-count {
  font-weight: 500;
  font-size: 11px;
  color: #6a5a3d;
  background: #f1e6cf;
  padding: 1px 7px;
  border-radius: 9px;
}
.input-family-body {
  padding: 4px 9px 9px;
  border-top: 1px solid #efe6d4;
}
.input-family-body .step-line:first-child { margin-top: 5px; }

/* === ERBA Step 03 — per-asset-class breakout === */
.asset-class-breakout {
  margin: 6px 0 18px;
  display: grid;
  gap: 16px;
}
.asset-class-breakout-head {
  display: grid;
  gap: 4px;
}
.ac-breakout-eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.ac-breakout-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.asset-class-step-summary {
  margin-bottom: var(--space-6);
}
.ac-external-ref {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0.25rem 0 0.5rem;
}
.ac-section-label-inline {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.asset-class-list {
  display: grid;
  gap: 10px;
}
.workflow-asset-class {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  scroll-margin-top: 110px;
  overflow: hidden;
}
.workflow-asset-class > .ac-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
  background: var(--bg-soft);
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.workflow-asset-class > .ac-summary::-webkit-details-marker { display: none; }
.workflow-asset-class[open] > .ac-summary {
  border-bottom-color: var(--line);
}
.workflow-asset-class > .ac-summary:hover { background: var(--accent-soft); }
.ac-summary-name {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.ac-summary-name strong {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.ac-rule-band {
  font-size: 11.5px;
  color: var(--muted);
}
.ac-summary-metrics {
  display: flex;
  gap: 18px;
  align-items: baseline;
  flex-wrap: wrap;
  font-variant-numeric: tabular-nums;
}
.ac-summary-metric {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.ac-summary-metric em {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.ac-summary-metric strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.ac-summary-metric-rwa strong {
  font-size: 15px;
  color: var(--accent);
}
.ac-detail-body {
  padding: 14px 16px 16px;
  display: grid;
  gap: 14px;
}
.ac-rw-note {
  margin: 0;
  font-size: 12px;
  color: var(--muted-2);
  line-height: 1.4;
}
.ac-section {
  display: grid;
  gap: 6px;
}
.ac-section-label {
  margin: 0;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.ac-section-label-inline {
  display: inline;
  margin-right: 6px;
}
.ac-section-sub {
  display: inline;
  margin-left: 6px;
  font-size: 11px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted-2);
}
.ac-input-list {
  display: grid;
  gap: 4px;
}
.ac-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 12px;
  font-size: 12.5px;
  line-height: 1.4;
  padding: 4px 0;
  border-bottom: 1px dashed var(--line);
}
.ac-input-row:last-child { border-bottom: 0; }
.ac-input-key { color: var(--ink-soft); font-weight: 500; }
.ac-input-val {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.ac-lookup-grid,
.ac-math-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.ac-lookup-grid th,
.ac-lookup-grid td,
.ac-math-grid th,
.ac-math-grid td {
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.ac-lookup-grid thead th,
.ac-math-grid thead th {
  background: var(--bg-soft);
  font-weight: 600;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ac-math-grid td:nth-child(2),
.ac-math-grid td:nth-child(3),
.ac-math-grid td:nth-child(4),
.ac-lookup-grid td:nth-child(2) {
  text-align: right;
}
.ac-math-total th,
.ac-math-total td {
  background: var(--bg-soft);
  font-weight: 600;
  border-top: 1px solid var(--line-strong);
}
.ac-math-total td:last-child strong { color: var(--accent); }
.ac-table-note {
  margin: 4px 0 0;
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.4;
}
.ac-refs {
  margin: 0;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}
.ac-formula {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--ink-soft);
}
.ac-formula-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.ac-formula code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 12px;
  background: var(--bg-soft);
  border-radius: var(--radius-xs);
  padding: 2px 6px;
  color: var(--ink);
}
.ac-drivers {
  display: grid;
  gap: 4px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}
.ac-drivers-head {
  margin: 0 0 2px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.ac-driver-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 10px;
  font-size: 12px;
  line-height: 1.4;
}
.ac-driver-key { color: var(--ink-soft); }
.ac-driver-val {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.asset-class-sum {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}
.ac-sum-headline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.ac-sum-head {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.ac-sum-head-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.ac-sum-body { display: grid; gap: 4px; }
.ac-sum-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.ac-sum-row strong { color: var(--ink); font-weight: 500; }
.ac-sum-row-total {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.ac-sum-row-total span { font-weight: 600; color: var(--ink); }
.ac-sum-row-total strong { font-weight: 700; color: var(--accent); }
.ac-sum-note {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}
@media (max-width: 720px) {
  .ac-body { grid-template-columns: 1fr; }
}
.step-outcome-win {
  color: #0d6b45;
}
.step-outcome-no {
  color: #8f5130;
}
.step-output-row {
  display: grid;
  gap: 5px;
}
.step-output-row strong {
  font-size: 18px;
}
.step-reference-links,
.step-source-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.reference-drawer {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #eadfd3;
}
.reference-drawer summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 600;
}
.workflow-stat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.compact-metric {
  padding: 8px 10px;
  border: 1px solid #eadfd3;
  background: #fffdfa;
}
.compact-metric span {
  display: block;
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.compact-metric strong {
  display: block;
  margin-top: 4px;
  font-size: 16px;
}
.ted-workflow-note {
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.32;
  font-size: 13px;
}
.ted-shell > .workflow-group {
  max-width: 1100px;
  margin: 0 auto 10px;
}
.ted-shell .requirements-shell {
  padding: 0 0 50px;
}
.ted-block {
  max-width: 1100px;
  margin: 0 auto 22px;
  padding: 26px 28px;
  border: 1px solid rgba(160, 138, 109, 0.24);
  background: var(--paper);
  box-shadow: 0 18px 46px rgba(58, 48, 30, 0.08);
}
.ted-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.ted-table-card, .formula-card {
  padding: 16px;
  border: 1px solid #e8dfd2;
  background: #fffdfa;
}
.formula-card { margin-top: 16px; }
.formula-card ul { margin: 0; padding-left: 18px; }
.output-card-grid { display: grid; gap: 12px; }
.output-card {
  padding: 14px;
  border: 1px solid #e8dfd2;
  background: #fff7ee;
}
.output-label {
  display: block;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.output-card strong { display: block; margin-top: 6px; font-size: 26px; }
.output-card p { margin: 8px 0 0; color: var(--muted); line-height: 1.5; }
.output-inspect { margin-top: 10px; }
.mini-grid, .data-grid { width: 100%; border-collapse: collapse; }
.mini-grid th, .mini-grid td, .data-grid th, .data-grid td {
  text-align: left;
  vertical-align: top;
  padding: 7px 8px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.mini-grid th, .data-grid th { background: var(--table-head); }
.filters {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: end;
}
.filters label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}
.filters select, .filters input {
  min-width: 160px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fffdfa;
  font: inherit;
  color: var(--ink);
}
.search-label input { min-width: 260px; }
.table-wrap { padding: 18px; }
.data-grid { background: var(--paper); }
.data-grid th { position: sticky; top: 0; }
.alias-chip {
  display: inline-flex;
  align-items: center;
  margin: 2px 6px 2px 0;
  padding: 4px 8px;
  border-radius: 999px;
  background: #efe6d7;
  color: #6d5840;
  font-size: 12px;
}
.requirements-hero {
  display: grid;
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto 18px;
}
.requirements-summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 12px;
}
.requirement-summary-card {
  padding: 14px;
  border: 1px solid rgba(174, 159, 135, 0.28);
  background: rgba(255, 252, 246, 0.82);
}
.requirement-summary-card span {
  display: block;
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.requirement-summary-card strong { display: block; margin-top: 6px; font-size: 26px; }
.requirement-summary-card em {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-style: normal;
  font-size: 13px;
}
.requirements-nav { display: none; }
.requirements-scenario-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.formula-list {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
}
.req-nav-chip {
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  text-decoration: underline;
}
.requirements-groups {
  display: grid;
  gap: 10px;
  max-width: 1100px;
  margin: 0 auto;
}
.requirement-group {
  border: 1px solid rgba(174, 159, 135, 0.28);
  background: #fffdfa;
  scroll-margin-top: 106px;
}
.requirement-group summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
}
.requirement-group summary::-webkit-details-marker { display: none; }
.requirement-group-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: start;
}
.requirement-group-head h2 {
  margin: 0;
  font-size: 19px;
  line-height: 1.15;
}
.requirement-group-meta,
.workflow-summary-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: end;
}
.workflow-summary-meta span {
  padding: 6px 10px;
  border: 1px solid rgba(174, 159, 135, 0.28);
  background: rgba(255, 252, 246, 0.82);
  color: var(--muted);
  font-size: 12px;
}
.requirement-group-body {
  padding: 0 14px 14px;
  display: grid;
  gap: 10px;
}
.requirement-category-block {
  padding-top: 10px;
  border-top: 1px solid #e6ddcf;
}
.playbook-paths {
  display: grid;
  gap: 16px;
}
.playbook-path-card {
  padding: 14px 16px;
  border: 1px solid rgba(160, 138, 109, 0.24);
  background: #fffdfa;
}
.requirement-category-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
  margin-bottom: 7px;
}
.requirement-category-head h3 {
  margin: 0;
  font-size: 14px;
}
.requirement-category-head span {
  color: var(--muted);
  font-size: 11px;
}
.workflow-card-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: baseline;
  margin-bottom: 10px;
}
.workflow-card-head h3 {
  margin: 0;
  font-size: 20px;
}
.workflow-card-head span {
  color: var(--muted);
  font-size: 13px;
}
.workflow-branch-summary {
  margin: 0 0 10px;
  color: var(--muted);
  line-height: 1.45;
}
.workflow-compact-note {
  margin: 0 0 7px;
  color: var(--muted);
  line-height: 1.28;
  font-size: 11px;
}
.workflow-reference-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 12px;
}
.workflow-example-block {
  padding: 8px 0;
  border-top: 1px solid #e6ddcf;
}
.workflow-example-block:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.workflow-example-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
  margin-bottom: 7px;
}
.workflow-example-head strong {
  font-size: 14px;
}
.workflow-math-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.workflow-math-panel {
  padding: 8px;
  border: 1px solid rgba(160, 138, 109, 0.18);
  background: var(--paper);
}
.workflow-math-panel h4 {
  margin: 0 0 6px;
  font-size: 12px;
}
.workflow-schedule-table {
  margin-top: 8px;
}
.workflow-coverage-block {
  margin: 8px 0 14px;
}
.workflow-table-head h4 {
  margin: 0 0 5px;
  font-size: 12px;
}
.workflow-table-head span {
  color: var(--muted);
  font-size: 12px;
}
.workflow-table-grid {
  margin-top: 0;
}
.workflow-table-grid th,
.workflow-table-grid td {
  font-size: 11px;
}
.coverage-grid .coverage-row.is-covered td:last-child {
  color: #2d5a32;
}
.coverage-grid .coverage-row.is-missing td:last-child {
  color: #8f3d2e;
}
.workflow-table-note {
  margin: 5px 0 0;
  color: var(--muted);
  line-height: 1.25;
  font-size: 11px;
}
.workflow-value-row {
  display: grid;
  gap: 2px;
  margin-top: 5px;
}
.workflow-value-row strong {
  font-size: 11px;
}
.workflow-value-row span {
  line-height: 1.25;
  font-size: 11px;
}
.workflow-value-row em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
}
.workflow-formula-list {
  margin: 0;
  padding-left: 15px;
  display: grid;
  gap: 5px;
  line-height: 1.3;
  font-size: 11px;
}
.workflow-empty {
  color: var(--muted);
  line-height: 1.45;
}
.workflow-path-footer {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
}
.workflow-mini-card p {
  margin: 8px 0 0;
  line-height: 1.5;
}
.compact-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.requirement-card-list {
  display: grid;
  gap: 12px;
}
.requirement-card {
  padding: 16px 18px;
  border: 1px solid rgba(160, 138, 109, 0.24);
  background: var(--paper);
}
.requirement-card p { margin: 10px 0 0; line-height: 1.64; }
.card-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.badge {
  display: inline;
  padding: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: transparent;
  border-radius: 0;
}
.badge-rule { color: #654321; }
.badge-input { color: #37620f; }
.badge-calculation { color: #9a5b00; }
.badge-validation { color: #9f1d1d; }
.badge-output { color: #1d4ed8; }
.badge-high { color: #065f46; }
.badge-medium { color: #92400e; }
.badge-low { color: #991b1b; }
.meta-link { color: var(--muted); text-decoration: none; }
.row-hit { animation: rowFlash 1.8s ease; }
@keyframes rowFlash {
  0% { background: #fff3c8; }
  100% { background: transparent; }
}
.fr-page.row-hit {
  animation: pageFlash 1.8s ease;
}
@keyframes pageFlash {
  0%   { box-shadow: 0 0 0 4px rgba(242, 196, 64, 0.85), 0 8px 22px rgba(31, 28, 23, 0.18); }
  100% { box-shadow: 0 8px 22px rgba(31, 28, 23, 0.18); }
}
.fr-page-canvas {
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
  pointer-events: none;
}
.fr-page-frame .textLayer {
  position: absolute;
  inset: 0;
  z-index: 2;
  user-select: text;
  pointer-events: auto;
}
/* Field-jump anchor highlight. Distinct from saved annotations (which are
 * yellow): a saturated orange wash with a clear ring so the cited phrase
 * unambiguously reads as "the thing the field you just opened points at".
 * Carries a "Cited by: <field>" tooltip set by linkInspectorToRulePage. */
.fr-page-frame .textLayer mark.erba-anchor-hit {
  background: rgba(255, 122, 24, 0.55);
  color: transparent;
  padding: 0;
  border-radius: 2px;
  box-shadow: 0 0 0 2px rgba(255, 122, 24, 0.95), 0 0 0 4px rgba(255, 255, 255, 0.85);
  cursor: help;
  animation: anchorPulse 1.6s ease 2;
}
@keyframes anchorPulse {
  0%, 100% { background: rgba(255, 122, 24, 0.55); box-shadow: 0 0 0 2px rgba(255, 122, 24, 0.95), 0 0 0 4px rgba(255, 255, 255, 0.85); }
  50%      { background: rgba(230, 88, 0, 0.9);    box-shadow: 0 0 0 3px rgba(230, 88, 0, 1),    0 0 0 5px rgba(255, 255, 255, 0.9); }
}
.fr-page-frame .fr-hotspot-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
@media (max-width: 1100px) {
  :root { --inspector-width: 0px; }
  .topbar {
    position: relative;
    flex-direction: column;
    align-items: start;
    top: auto;
    left: auto;
    right: auto;
    margin: 10px;
    max-width: none;
    display: grid;
    grid-template-columns: 1fr;
    padding: 12px;
    border: 1px solid rgba(215, 208, 194, 0.85);
    border-radius: 14px;
  }
  .top-tabs { grid-template-columns: 1fr; width: 100%; }
  .workspace { margin-right: 0; }
  .rule-shell,
  .rule-shell.has-open-inspector,
  .rule-shell.has-open-comment-response {
    grid-template-columns: 1fr;
  }
  .ted-layout-shell {
    display: block;
    padding: 0 12px;
  }
  .ted-layout-shell .ted-shell {
    padding-left: 0;
    padding-right: 0;
  }
  .rule-rail-shell,
  .ted-rail-shell {
    display: none;
  }
  .inspector-shell,
  .comment-response-shell {
    position: fixed;
    right: 12px;
    left: 12px;
    top: auto;
    bottom: 12px;
    width: auto;
    height: auto;
    max-height: 55vh;
    z-index: 30;
    transform: translateY(calc(100% + 16px));
    transition: transform 180ms ease;
    border: 1px solid rgba(173, 161, 143, 0.6);
    opacity: 1;
    pointer-events: auto;
  }
  .inspector-shell.is-open,
  .comment-response-shell.is-open { transform: translateY(0); }
  .rule-document-shell {
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 12px;
  }
  .rule-hero {
    grid-template-columns: 1fr;
    margin-left: 0;
    margin-right: 0;
  }
  .metrics-row, .ted-grid, .ted-visual-grid, .requirements-summary-grid, .classification-grid, .classification-detail-grid, .step-math-grid, .workflow-stat-row, .workflow-math-grid {
    grid-template-columns: 1fr;
  }
  .capital-row, .mix-row, .requirement-group-head {
    grid-template-columns: 1fr;
    display: grid;
  }
  .requirement-group-meta { justify-content: start; }
}

/* === Global search === */
.search-box { position: relative; }
.search-box input {
  width: 100%;
  padding: 8px 14px;
  height: 34px;
  border: 1px solid transparent;
  background: rgba(0, 0, 0, 0.05);
  color: var(--ink);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 13px;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.search-box input::placeholder { color: var(--muted-2); }
.search-box input:hover { background: rgba(0, 0, 0, 0.07); }
.search-box input:focus {
  outline: 0;
  background: var(--paper);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.search-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: min(720px, 92vw);
  max-height: 78vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 30;
  font-size: 12px;
  overflow: hidden;
}
.search-panel[hidden] { display: none; }
.search-header {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  background: rgba(0,0,0,0.02);
}
.search-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.search-chips-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-right: 4px;
}
.search-chip {
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.search-chip:hover { color: var(--ink); border-color: var(--accent); }
.search-chip.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.search-body {
  overflow-y: auto;
  padding: 4px;
}
.search-group {
  margin-bottom: 4px;
}
.search-group:last-child { margin-bottom: 0; }
.search-group-head {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px 4px;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.search-group-head:hover { color: var(--ink); }
.search-group-caret { font-size: 10px; transition: transform var(--dur) var(--ease); }
.search-group.is-collapsed .search-group-caret { transform: rotate(-90deg); }
.search-group-name { flex: 1; }
.search-group-count {
  background: rgba(0,0,0,0.06);
  color: var(--muted);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 10px;
}
.search-result-row {
  display: flex;
  align-items: flex-start;
  gap: 4px;
}
.search-result-row > .search-result { flex: 1; }
.search-result-citation {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.02em;
}
.search-result-copy {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 6px 8px;
  font-size: 13px;
  border-radius: var(--radius-xs);
}
.search-result-copy:hover { background: var(--accent-soft); color: var(--ink); }
.search-result-copy.is-copied { color: var(--accent); }
.search-suggest-block { padding: 10px 12px; }
.search-suggest-head {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 6px;
  font-weight: 600;
}
.search-suggest-row { display: flex; flex-wrap: wrap; gap: 6px; }
.search-suggest-chip {
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
}
.search-suggest-chip:hover { background: var(--accent-soft); border-color: var(--accent); }
.search-result {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  cursor: pointer;
  color: var(--ink);
  border-radius: var(--radius-xs);
  transition: background var(--dur) var(--ease);
}
.search-result:hover, .search-result.is-active {
  background: var(--accent-soft);
}
.search-result-title {
  display: block;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.25;
}
.search-result-subtitle {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.2;
}
.search-result-snippet {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 11px;
  line-height: 1.32;
}
.search-result-snippet mark,
.search-result-title mark {
  background: rgba(255, 214, 102, 0.45);
  color: inherit;
  padding: 0 2px;
  border-radius: 2px;
}
.search-empty,
.search-status {
  padding: 10px 12px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}
.search-empty strong { color: var(--ink); }
@media (max-width: 980px) {
  .topbar > .brand { flex: 1 0 100%; margin-right: 0; }
  .view-tabs-strip-inner { flex-wrap: wrap; }
  .view-tabs-strip-inner > .search-box { flex: 1 1 100%; max-width: 100%; order: 2; }
  .view-tabs-strip-inner > .top-tabs { order: 1; }
  .view-tabs-strip-inner > .view-tabs-strip-spacer { display: none; }
}

/* ===== User features (auth, scenarios, annotations) ===== */
.auth-control { display: flex; gap: 8px; align-items: center; font-size: 12px; }
.auth-btn {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  border: none;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.auth-btn:hover { opacity: 0.9; }
.auth-btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.auth-btn-ghost:hover { background: rgba(0, 0, 0, 0.04); opacity: 1; }
.auth-btn-linkedin { background: #0a66c2; color: #fff; }
.auth-btn-linkedin:hover { background: #0958a8; opacity: 1; }
.auth-user { font-weight: 500; color: var(--ink); font-size: 12.5px; }

.panel-empty { color: var(--muted); margin: 0; font-size: 12px; }
.panel-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 8px;
  background: var(--paper);
}
.panel-item-link {
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
  display: grid;
  gap: 2px;
  padding: 0;
}
.panel-item-link strong { font-size: 12px; }
.panel-item-link small { color: var(--muted); font-size: 11px; }
.panel-item-x {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
}
.rule-page-tools {
  display: flex;
  gap: 8px;
  margin: 0 0 10px;
}
.rule-page-tools[hidden] { display: none; }
.rule-page-tools button,
.rule-page-tool-btn {
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid #b8a98c;
  background: #fffaf0;
  color: #2a2418;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.rule-page-tools button:hover,
.rule-page-tool-btn:hover {
  background: #fff;
  border-color: #6b5e44;
}
.rule-page-tools button.is-on,
.rule-page-tool-btn.is-on {
  background: #fde58a;
  border-color: #b88a00;
  color: #5a3f00;
}
.ted-actions { display: flex; justify-content: flex-end; padding: 4px 0 12px; }
.user-highlight {
  background: rgba(255, 214, 102, 0.55);
  padding: 0 2px;
  border-radius: 2px;
  cursor: help;
}
/* Inside a PDF.js text layer the surrounding <span>s have
   color: transparent so only the canvas glyphs underneath are visible.
   Without forcing the same here, the wrapped text inside <mark> would
   render its own glyphs on top of the canvas — producing the doubled,
   "blurry" look. Same trick used by .erba-anchor-hit above. */
.fr-page-frame .textLayer .user-highlight,
.fr-page-frame .textLayer .user-highlight * {
  color: transparent;
}
.user-highlight-flash {
  animation: highlight-flash 1.6s ease-out;
}
@keyframes highlight-flash {
  0%   { box-shadow: 0 0 0 4px rgba(255, 184, 0, 0.85); background-color: rgba(255, 214, 102, 0.95); }
  60%  { box-shadow: 0 0 0 6px rgba(255, 184, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 184, 0, 0); }
}
.selection-toolbar {
  position: absolute;
  z-index: 40;
  background: var(--ink);
  border-radius: 8px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.25);
}
.selection-toolbar button {
  background: none;
  color: #fff;
  border: none;
  padding: 6px 12px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

/* ===== Notes filter strip + indicator ===== */
.notes-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.notes-indicator[hidden] { display: none; }
.notes-indicator:hover { border-color: var(--ink); }

.notes-filter-strip {
  position: sticky;
  top: 64px;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 8px 14px;
  margin: 8px 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--paper, #fff) 92%, transparent);
  backdrop-filter: blur(6px);
}
.notes-filter-strip[hidden] { display: none; }
.notes-filter-strip-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.notes-filter-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}
.notes-filter-chip {
  font: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.notes-filter-chip-count {
  font-size: 10px;
  font-weight: 600;
  opacity: 0.7;
  margin-left: 2px;
}
.notes-filter-chip.is-off {
  background: transparent;
  color: var(--muted);
  border-color: var(--line);
  border-style: dashed;
  opacity: 0.55;
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--muted) 70%, transparent);
  text-decoration-thickness: 1px;
}
.notes-filter-chip.is-off .type-chip-icon { opacity: 0.55; }
.notes-filter-chip.is-off:hover {
  opacity: 0.85;
  color: var(--ink-soft);
}
.notes-filter-chip.is-active {
  box-shadow: inset 0 0 0 1px currentColor;
  border-style: solid;
}
.notes-filter-chip-state {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-left: 2px;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.04);
  text-decoration: none;
}
.notes-filter-chip-state:empty { display: none; }

/* ===== Save-confirmation toast ===== */
.workbench-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 12px);
  z-index: 200;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.92);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.22s ease;
}
.workbench-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
/* Master "All on / All off" toggle sits at the head of the filter strip so
   a single click can mute every pin, highlight, and minimap mark without
   wiping the user's per-chip selection. Toggling it back ON restores the
   previously visible chips (or, if nothing was visible, restores defaults). */
.notes-filter-master {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.notes-filter-master:hover { border-color: rgba(0,0,0,0.18); }
.notes-filter-master[aria-pressed="false"] {
  background: #f5f5f7;
  color: var(--muted);
}
.notes-filter-master-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34c759;
  box-shadow: 0 0 0 2px rgba(52, 199, 89, 0.18);
  transition: background 120ms ease, box-shadow 120ms ease;
}
.notes-filter-master[aria-pressed="false"] .notes-filter-master-dot {
  background: #c7c7cc;
  box-shadow: 0 0 0 2px rgba(199, 199, 204, 0.25);
}

.notes-filter-reset {
  font: inherit;
  font-size: 11px;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
}
.notes-filter-reset[hidden] { display: none; }
.notes-filter-reset:hover { color: var(--ink); }

/* ===== Margin pins anchored to highlights / page headers =====
   The pin layer sits INSIDE the page (right:6px, in the FR right-margin
   whitespace) so it lives within the same paint-containment box as the
   page itself. Earlier attempts to overhang the gutter (right:-30px)
   were silently clipped by `content-visibility: auto`. */
.notes-pin-layer {
  position: absolute;
  top: 0;
  right: 6px;
  width: 26px;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}
.notes-margin-pin {
  position: absolute;
  right: 0;
  pointer-events: auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--type-color, #6b7280);
  background: color-mix(in srgb, var(--type-color, #6b7280) 18%, #fff);
  color: var(--type-color, #374151);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.12);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.notes-margin-pin:hover { transform: scale(1.1); box-shadow: 0 2px 6px rgba(0,0,0,0.2); }
.notes-margin-pin.is-dimmed { opacity: 0.25; }
.notes-margin-pin.notes-pin-flash {
  animation: pin-flash 1.6s ease-out;
}
@keyframes pin-flash {
  0%   { box-shadow: 0 0 0 6px color-mix(in srgb, var(--type-color, #6b7280) 60%, transparent); }
  100% { box-shadow: 0 1px 2px rgba(0,0,0,0.12); }
}

.notes-pin-popover {
  position: absolute;
  z-index: 50;
  width: 320px;
}
.notes-pin-popover[hidden] { display: none; }
.notes-pin-popover-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  padding: 12px 14px;
  display: grid;
  gap: 8px;
}
.notes-pin-popover-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
}
.notes-pin-popover-close {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}
.notes-pin-popover-quote {
  margin: 0;
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
  border-left: 2px solid var(--line);
  padding-left: 8px;
}
.notes-pin-popover-text {
  margin: 0;
  font-size: 13px;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
}
.notes-pin-popover-empty { color: var(--muted); font-style: italic; }
.notes-pin-popover-ctx { margin: 0; font-size: 10.5px; color: var(--muted-2); }
.notes-pin-popover-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.notes-pin-popover-actions .auth-btn { height: 26px; padding: 0 10px; font-size: 12px; }

/* ===== Scrollbar minimap ===== */
.notes-minimap {
  position: fixed;
  top: 88px;
  bottom: 24px;
  right: 6px;
  width: 12px;
  z-index: 25;
  pointer-events: none;
}
.notes-minimap[hidden] { display: none; }
.notes-minimap-track {
  position: relative;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.04);
  border-radius: 6px;
}
.notes-minimap-tick {
  position: absolute;
  right: 1px;
  width: 10px;
  height: 4px;
  border-radius: 2px;
  background: var(--type-color, #6b7280);
  border: none;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
  transform: translateY(-50%);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.notes-minimap-tick:hover { transform: translateY(-50%) scaleX(1.3); }
.notes-minimap-tick.is-dimmed { opacity: 0.25; }

/* Make sure rule pages allow margin pins to render outside the page box. */
.fr-page { position: relative; }

/* ===== Typed annotations ===== */
.note-row-owner, .note-row-due {
  font-size: 10.5px;
  color: var(--muted);
}
.note-row-due.is-overdue { color: #b91c1c; font-weight: 600; }

.type-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--type-color, #4b5563);
  background: color-mix(in srgb, var(--type-color, #6b7280) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--type-color, #6b7280) 35%, transparent);
  white-space: nowrap;
}
.type-chip-icon { font-weight: 700; }
.type-chip-sm { font-size: 10px; padding: 1px 6px; }

.status-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  color: var(--muted);
  background: var(--paper);
}
.status-chip-open { color: #1e40af; border-color: rgba(30,64,175,0.3); background: rgba(30,64,175,0.08); }
.status-chip-in-review { color: #b45309; border-color: rgba(180,83,9,0.3); background: rgba(180,83,9,0.08); }
.status-chip-resolved { color: #047857; border-color: rgba(4,120,87,0.3); background: rgba(4,120,87,0.08); }
.status-chip-wontdo { color: #6b7280; border-color: rgba(107,114,128,0.3); background: rgba(107,114,128,0.08); text-decoration: line-through; }

.note-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  align-items: center;
  margin-bottom: 2px;
}
.note-row-owner, .note-row-due {
  font-size: 10.5px;
  color: var(--muted);
}
.note-row-due.is-overdue { color: #b91c1c; font-weight: 600; }

.note-row-edit-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 6px;
}
.note-row-edit-field {
  display: grid;
  gap: 2px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.note-row-edit-field select,
.note-row-edit-field input {
  font: inherit;
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--paper);
  color: var(--ink);
}

.note-modal-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}
.note-modal-field { display: grid; gap: 4px; font-size: 11px; color: var(--muted); }
.note-modal-field span { font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; font-size: 10px; }
.note-modal-field select,
.note-modal-field input {
  font: inherit;
  font-size: 13px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
}

.inspector-note-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin-bottom: 4px;
  align-items: center;
}
.comment-note-add-btn { align-self: flex-start; font-size: 12px; }

/* Inline highlight color tinted by type */
.user-highlight[data-annotation-type] {
  background: color-mix(in srgb, var(--type-color, #ffe27a) 38%, transparent);
  border-bottom: 2px solid var(--type-color, #ffe27a);
}
.user-highlight-status-resolved { opacity: 0.55; }
.user-highlight-status-wontdo { opacity: 0.4; text-decoration: line-through; }
.user-highlight.is-filtered-out {
  background: transparent !important;
  border-bottom: 1px dashed rgba(0,0,0,0.18);
  opacity: 0.35;
}
/* Field-jump mode: while a Field Inspector citation is active, mute every
 * saved annotation on the rule page so the orange anchor-hit reads as the
 * one and only "this is what you clicked" mark. Marks stay clickable but
 * recede visually. Cleared by closeInspector → clearActiveFieldJump. */
.rule-shell.has-field-jump .user-highlight,
.rule-shell.has-field-jump .user-highlight[data-annotation-type] {
  background: transparent !important;
  border-bottom: 1px dashed rgba(0,0,0,0.22);
  opacity: 0.32;
}
body.has-field-jump .notes-margin-pin,
body.has-field-jump .notes-minimap-tick {
  opacity: 0.28;
  filter: grayscale(0.85);
}
body.has-field-jump .notes-margin-pin:hover,
body.has-field-jump .notes-minimap-tick:hover {
  opacity: 0.9;
  filter: none;
}

/* ===== Note modal (in-app, replaces native prompt) ===== */
.note-modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.note-modal[hidden] { display: none; }
.note-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(24, 34, 46, 0.42);
}
.note-modal-card {
  position: relative;
  background: #fffdfa;
  border: 1px solid var(--line);
  border-radius: 12px;
  width: min(520px, 100%);
  box-shadow: 0 20px 48px rgba(0,0,0,0.28);
  display: flex;
  flex-direction: column;
}
.note-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.note-modal-head h2 { margin: 0; font-size: 15px; }
.note-modal-close {
  background: none; border: none; cursor: pointer; font-size: 22px; color: var(--muted);
}
.note-modal-body { padding: 14px 18px; display: grid; gap: 10px; }
.note-modal-context {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}
.note-modal-context:empty { display: none; }
#noteModalText {
  font: inherit;
  font-size: 13px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  resize: vertical;
  min-height: 110px;
  background: #fff;
  color: var(--ink);
  box-sizing: border-box;
}
#noteModalText:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-ring); }
.note-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 12px 18px 14px;
  border-top: 1px solid var(--line);
}
/* ===== Portfolio upload sandbox ===== */
.ted-actions { gap: 8px; }
.portfolio-modal {
  position: fixed;
  inset: 0;
  background: rgba(24, 34, 46, 0.42);
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.portfolio-modal[hidden] { display: none; }
.portfolio-modal-card {
  background: #fffdfa;
  border: 1px solid var(--line);
  border-radius: 12px;
  width: min(720px, 100%);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 48px rgba(0,0,0,0.28);
}
.portfolio-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.portfolio-modal-head h2 { margin: 0; font-size: 16px; }
.portfolio-modal-close {
  background: none; border: none; cursor: pointer; font-size: 22px; color: var(--muted);
}
.portfolio-modal-body {
  padding: 14px 18px;
  overflow-y: auto;
  display: grid;
  gap: 12px;
  font-size: 13px;
  line-height: 1.45;
}
.portfolio-modal-intro code {
  background: var(--paper);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 12px;
}
.portfolio-modal-actions-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.portfolio-file-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}
.portfolio-modal-field {
  display: grid;
  gap: 4px;
  font-size: 12px;
}
.portfolio-modal-field span { color: var(--muted); }
.portfolio-modal-field input,
.portfolio-modal-field textarea {
  font: inherit;
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  resize: vertical;
}
.portfolio-modal-field input { font-family: inherit; }
.portfolio-preview {
  background: var(--paper);
  border: 1px solid rgba(160, 138, 109, 0.24);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 12px;
}
.portfolio-preview h4 { margin: 0 0 4px; font-size: 12px; }
.portfolio-preview-hint { margin: 0 0 8px; color: var(--muted); font-size: 11px; }
.portfolio-mapping-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 10px;
}
.portfolio-mapping-table th,
.portfolio-mapping-table td {
  padding: 4px 6px;
  border-bottom: 1px solid rgba(160, 138, 109, 0.18);
  text-align: left;
  font-size: 11px;
}
.portfolio-mapping-table select {
  font: inherit;
  font-size: 11px;
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  min-width: 180px;
}
.portfolio-req {
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  color: #7d2616;
  background: #fdecea;
  padding: 1px 5px;
  border-radius: 3px;
}
.portfolio-preview-sample h4 { margin: 8px 0 4px; }
.portfolio-preview-sample .portfolio-table { margin-top: 0; }

.portfolio-errors {
  background: #fff6f4;
  border: 1px solid rgba(153, 27, 27, 0.32);
  color: #7d2616;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 12px;
}
.portfolio-errors ul { margin: 6px 0 0; padding-left: 18px; }
.portfolio-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
}
.portfolio-results { display: grid; gap: 12px; margin-bottom: 18px; }
.portfolio-card {
  background: #fffdfa;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  box-shadow: 0 6px 18px rgba(58, 48, 30, 0.08);
}
.portfolio-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}
.portfolio-card-head h2 { margin: 2px 0 4px; font-size: 18px; }
.portfolio-card-meta { margin: 0; color: var(--muted); font-size: 12px; }
.portfolio-groups { display: grid; gap: 10px; margin-top: 12px; }
.portfolio-group {
  border: 1px solid rgba(160, 138, 109, 0.24);
  border-radius: 6px;
  background: var(--paper);
  padding: 8px 10px;
}
.portfolio-group > summary {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
}
.portfolio-group > summary span { color: var(--muted); font-size: 12px; }
.portfolio-table {
  width: 100%;
  margin-top: 8px;
  border-collapse: collapse;
  font-size: 11px;
}
.portfolio-table th,
.portfolio-table td {
  padding: 5px 6px;
  border-bottom: 1px solid rgba(160, 138, 109, 0.18);
  text-align: left;
}
.portfolio-table th { color: var(--muted); font-weight: 600; }
.portfolio-table tr.portfolio-subtotal td { background: #f6efe1; font-weight: 600; }
.portfolio-table em { color: var(--muted); font-style: normal; font-size: 10px; }

.comment-notes { display: grid; gap: 8px; }
.comment-note-form { display: grid; gap: 6px; }
.comment-note-form textarea {
  font: inherit;
  font-size: 12px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  resize: vertical;
}

/* Capital approach toggle (RSA vs ERBA) — segmented control */
.approach-toggle {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 2px;
  background: rgba(0, 0, 0, 0.05);
  border: 0;
  border-radius: var(--radius-sm);
  padding: 3px;
  margin-left: 4px;
  align-self: center;
  width: max-content;
  height: 36px;
}
.approach-toggle-btn {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0 14px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  border-radius: 7px;
  height: 30px;
  min-width: 56px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.approach-toggle-btn:not(.is-active):hover { color: var(--ink); }
.approach-toggle-btn.is-active {
  background: var(--paper);
  color: var(--ink);
  cursor: default;
  box-shadow: var(--shadow-xs), 0 0 0 1px rgba(0, 0, 0, 0.04);
}

/* Larger, more prominent variant placed at the top of the side rail. */
.approach-toggle.approach-toggle-rail {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  height: auto;
  margin: 0 0 14px;
  padding: 12px 12px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}
.approach-toggle-rail .approach-toggle-label {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.approach-toggle-rail .approach-toggle-buttons {
  display: flex;
  gap: 4px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: var(--radius-sm);
  padding: 4px;
}
.approach-toggle-rail .approach-toggle-btn {
  flex: 1 1 0;
  height: 38px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  min-width: 0;
}
.approach-toggle-rail .approach-toggle-btn.is-active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Sign-in modal — centered overlay shown once per session for signed-out visitors. */
.signin-modal[hidden] { display: none !important; }
.signin-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.signin-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 17, 21, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.signin-modal-card {
  position: relative;
  width: min(440px, 100%);
  background: var(--paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 32px 32px 28px;
  text-align: center;
  animation: signinModalIn 180ms var(--ease);
}
@keyframes signinModalIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.signin-modal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #eaf2fb;
  margin: 0 auto 14px;
}
.signin-modal-card h2 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.signin-modal-card p {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
}
.signin-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.signin-modal-cta {
  width: 100%;
  height: 44px;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-sm);
  text-decoration: none;
}
/* When signed out, blur and lock the workbench behind the modal so the
   underlying rule pages, advocacy rail, and dictionary are not readable
   or interactive through the backdrop. */
body.signin-required > :not(.signin-modal):not(script):not(style) {
  filter: blur(6px);
  pointer-events: none;
  user-select: none;
}

/* Welcome tour modal — auto-plays the onboarding video on every page load. */
.welcome-tour-modal[hidden] { display: none !important; }
/* Hide the floating "Give feedback" widget while the tour is open so its
   button outline doesn't bleed through the semi-transparent backdrop and
   flicker during iframe repaints. Driven by a body class toggled from JS
   instead of `body:has(...)` — the :has() form forced a full-document
   selector re-evaluation on every DOM mutation (incl. textarea input
   events), which made typing in modals visibly laggy (Task #147). */
body.welcome-tour-open #crw-feedback-widget { display: none !important; }
.welcome-tour-modal {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.welcome-tour-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 17, 21, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.welcome-tour-card {
  position: relative;
  width: min(960px, 100%);
  background: #0f1115;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 0;
  overflow: hidden;
  animation: signinModalIn 220ms var(--ease);
}
.welcome-tour-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  background: rgba(255, 255, 255, 0.12);
  font-size: 22px;
  line-height: 1;
  color: #fff;
  cursor: pointer;
  border-radius: 50%;
  z-index: 2;
}
.welcome-tour-close:hover { background: rgba(255, 255, 255, 0.22); }
.welcome-tour-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.welcome-tour-video-wrap {
  position: relative;
  width: 100%;
  background: #000;
  aspect-ratio: 16 / 9;
}
.welcome-tour-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.welcome-tour-actions {
  display: flex;
  justify-content: center;
  padding: 18px 20px 22px;
  background: #0f1115;
}
.welcome-tour-skip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  height: 48px;
  padding: 0 32px;
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  color: #0f1115;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset,
    0 2px 12px rgba(0, 0, 0, 0.35);
  transition: transform var(--dur) var(--ease),
    background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.welcome-tour-skip:hover {
  background: #f3f4f6;
  transform: translateY(-1px);
}
.welcome-tour-skip:active { transform: translateY(0); }
.welcome-tour-skip:focus-visible {
  outline: 3px solid #4f8cff;
  outline-offset: 3px;
}
@media (max-width: 540px) {
  .welcome-tour-skip { width: 100%; min-width: 0; }
  .welcome-tour-actions { padding: 14px 14px 18px; }
}

/* Per-approach gating: show only the matching subtree. */
body[data-approach="standardized"] [data-approach-only="erba"] { display: none !important; }
body[data-approach="erba"] [data-approach-only="standardized"] { display: none !important; }

.erba-empty {
  padding: 28px 24px;
  margin: 16px 0;
  border: 1px dashed var(--line, #d8cfc1);
  border-radius: 8px;
  background: #fbf9f4;
  color: #4a4032;
}
.erba-empty h2 { margin: 0 0 6px; font-size: 16px; }
.erba-empty p { margin: 0; font-size: 13px; line-height: 1.5; }