/* =============================================================
   WORKBENCH — Pass 15 instrument atmosphere + specimen framing
   ============================================================= */
.wb-stage {
  position: relative;
  isolation: isolate;
  min-height: calc(100vh - 4rem);
  overflow: hidden;
  --wb-bg-deep: #181210;
  --wb-bg-panel: rgba(53, 42, 36, 0.9);
  --wb-bg-well: rgba(20, 14, 12, 0.86);
  --wb-border-passive: rgba(242, 232, 220, 0.10);
  --wb-border-panel: rgba(242, 232, 220, 0.17);
  --wb-border-active: rgba(222, 111, 56, 0.74);
  --wb-border-control: rgba(248, 168, 102, 0.28);
  background: var(--wb-bg-deep);
}
.wb-stage__content {
  position: relative;
  z-index: 2;
}
.wb-noscript-fallback {
  position: relative;
  z-index: 2;
  padding: var(--hero-top-gap) clamp(1.25rem, 4vw, 3rem) 2rem;
  max-width: 42rem;
  color: var(--ink-soft);
}
.wb-noscript-fallback h1 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 5vw, 2.25rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 1rem;
}
.wb-noscript-fallback p {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.55;
  margin: 0 0 0.85rem;
}
.wb-noscript-fallback ul {
  margin: 0;
  padding: 0 0 0 1.1rem;
  font-family: var(--font-sans);
  line-height: 1.6;
}
.wb-noscript-fallback a {
  color: var(--ember);
}
.wb-shell {
  position: relative;
  z-index: 1;
  background: transparent;
  padding: var(--hero-top-gap) clamp(15px, 3.75vw, 48px);
}

/* Aurora + focal — lab bench: warmer focal (~65% of hero), grid texture */
.wb-stage > .aurora-field {
  opacity: 0.42;
}
.wb-stage > .aurora-field .aurora-field__layer {
  opacity: 0.48;
  filter: blur(58px);
}
.wb-stage > .hero__aurora-focal {
  opacity: 0.32;
  filter: blur(68px);
}
.wb-stage > .wb-stage__dust {
  opacity: 0.55;
}
.wb-stage__grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.55;
  background:
    linear-gradient(rgba(140, 176, 210, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 176, 210, 0.035) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 88% 72% at 50% 42%, black 35%, transparent 92%);
}

.wb-antenna {
  display: block;
  width: 32px;
  height: 40px;
  margin: 0 0 0.75rem;
  object-fit: contain;
  opacity: 0.72;
  transition: opacity 0.35s ease, filter 0.35s ease;
}
.wb-antenna.is-signal {
  opacity: 1;
  filter: brightness(1.06);
}

/* Specimen plate — corner tick + top rule (bridge plate pattern) */
.wb-specimen-plate {
  position: relative;
  border: 1px solid var(--wb-border-panel);
  background: var(--wb-bg-panel);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(252, 248, 236, 0.05);
}
.wb-specimen-plate::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1rem;
  right: 1rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--ember-rgb), 0.38), transparent);
  opacity: 0.85;
  pointer-events: none;
}
.wb-specimen-plate::after {
  content: "";
  position: absolute;
  top: 0.55rem;
  left: 0.55rem;
  width: 8px;
  height: 8px;
  border-top: 1px solid rgba(var(--ember-rgb), 0.42);
  border-left: 1px solid rgba(var(--ember-rgb), 0.42);
  opacity: 0.72;
  pointer-events: none;
}
.wb-specimen-plate__label {
  font-family: var(--font-mono);
  font-size: max(0.6875rem, var(--mono-min));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(240, 143, 88, 0.88);
  line-height: 1.5;
  margin-bottom: 0.65rem;
}

/* Case cards */
.wb-case-card {
  text-align: left;
  flex: 1 1 200px;
  min-width: 190px;
  min-height: 44px;
  cursor: pointer;
  border-radius: 6px;
  padding: 1rem;
  opacity: 1;
  transition: transform 0.35s ease, border-color 0.25s ease, background 0.25s ease;
}
.wb-case-card:not(.is-active):not(.is-disabled) {
  border-color: var(--wb-border-passive);
  background: rgba(42, 33, 28, 0.78);
}
.wb-case-card:not(:disabled):hover {
  transform: translateY(-2px);
  border-color: rgba(242, 232, 220, 0.14);
}
.wb-case-card.is-active {
  border-color: var(--wb-border-active);
  background: rgba(58, 44, 38, 0.94);
  box-shadow: inset 0 0 0 1px rgba(var(--ember-rgb), 0.14);
}
.wb-case-card.is-disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.wb-case-card__title {
  font-family: var(--font-display);
  font-size: 1rem;
  color: #F2E8DC;
  line-height: 1.3;
}

/* Active curated case view */
.wb-active-case {
  border-radius: 6px;
  padding: 1.35rem 1.25rem 1.25rem;
  margin-bottom: 1.75rem;
}
.wb-active-case__headline {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 4vw, 1.875rem);
  line-height: 1.3;
  color: #F2E8DC;
  margin: 0.65rem 0 0.5rem;
}
.wb-active-case__probe {
  font-family: var(--font-mono);
  font-size: max(0.6875rem, var(--mono-min));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ember);
  margin: 0 0 0.85rem;
}
.wb-result-plate {
  border-radius: 6px;
  padding: 1.5rem 1.25rem;
}

/* Instrument stage progress */
.wb-stage-progress {
  margin-bottom: 0.65rem;
}
.wb-stage-progress__track {
  height: 1px;
  background: rgba(71, 58, 51, 0.85);
  overflow: hidden;
}
.wb-stage-progress__fill {
  height: 100%;
  width: 100%;
  background: var(--ember);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.wb-stage-progress__steps {
  display: flex;
  gap: 0.65rem;
  list-style: none;
  margin: 0.45rem 0 0;
  padding: 0;
}
.wb-stage-progress__step {
  font-family: var(--font-mono);
  font-size: max(0.625rem, var(--mono-min));
  letter-spacing: 0.1em;
  color: #9A8775;
  min-width: 1.35rem;
}
.wb-stage-progress__step.is-current {
  color: var(--ember);
}
.wb-stage-progress__step.is-done {
  color: #C9B8A5;
}
.wb-stage-progress__tick {
  color: var(--ember);
}
.wb-instrument-header {
  display: flex;
  align-items: baseline;
  gap: 0.2rem;
  font-family: var(--font-mono);
  font-size: max(0.6875rem, var(--mono-min));
  letter-spacing: 0.14em;
  color: rgba(140, 124, 107, 0.95);
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}
.wb-instrument-header__num {
  color: var(--ember);
}

/* Mode toggle — instrument stages */
.wb-mode-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  border: 1px solid var(--wb-border-panel);
  border-radius: 6px;
  padding: 0.25rem;
  margin-bottom: 2rem;
  margin-top: 0.5rem;
  background: rgba(24, 18, 16, 0.88);
}
.wb-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  min-height: 44px;
  padding: 0.625rem 1rem;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  background: transparent;
  color: rgba(185, 168, 147, 0.95);
  transition: opacity 0.35s ease, transform 0.35s ease;
  flex: 1 1 auto;
}
.wb-mode-btn__num {
  font-family: var(--font-mono);
  font-size: max(0.6875rem, var(--mono-min));
  letter-spacing: 0.14em;
  opacity: 0.85;
}
.wb-mode-btn.is-active {
  background: linear-gradient(180deg, rgba(34, 22, 17, 0.96) 0%, rgba(22, 14, 11, 0.96) 100%);
  color: rgba(242, 232, 220, 0.92);
  border: 1px solid rgba(var(--ember-rgb), 0.34);
  box-shadow:
    inset 0 2px 0 rgba(var(--ember-rgb), 0.48),
    inset 2px 0 0 rgba(var(--ember-rgb), 0.22);
  font-weight: 600;
}
.wb-mode-btn.is-active .wb-mode-btn__num {
  color: rgba(240, 143, 88, 0.88);
  opacity: 1;
}
.wb-mode-btn:not(.is-active):hover {
  opacity: 0.92;
  transform: translateY(-1px);
  background: rgba(242, 232, 220, 0.04);
}

@media (prefers-reduced-motion: reduce) {
  .wb-stage > .aurora-field,
  .wb-stage > .hero__aurora-focal {
    opacity: 0.32 !important;
    animation: none !important;
  }
  .wb-stage > .aurora-field .aurora-field__layer {
    animation: none !important;
    transform: none !important;
    opacity: 0.38 !important;
  }
  .wb-stage > .wb-stage__dust,
  .wb-stage .hero__particle {
    display: none !important;
    animation: none !important;
    opacity: 0 !important;
  }
  .wb-case-card,
  .wb-mode-btn,
  .wb-stage-progress__fill {
    transition: none !important;
  }
  .wb-case-card:not(:disabled):hover,
  .wb-mode-btn:not(.is-active):hover {
    transform: none !important;
  }
}

/* =============================================================
   WORKBENCH — Pass 16 verdict reveal (animation classes only)
   ============================================================= */
.wb-token-list {
  font-family: var(--font-mono);
  font-size: max(0.6875rem, var(--mono-min));
  line-height: 1.8;
}
.wb-token-row {
  opacity: 0;
  transform: translateY(5px);
}
.wb-token-row.is-visible {
  animation: wb-token-resolve 0.32s ease forwards;
}
.wb-token-row.is-visible.is-found {
  color: #9BAE7E;
  --wb-token-lift: -1px;
}
.wb-token-row.is-visible.is-missing {
  color: rgba(140, 124, 107, 0.72);
  --wb-token-lift: 0;
}

.wb-verdict-line {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 4vw, 1.875rem);
  line-height: 1.3;
  color: #F2E8DC;
  margin: 0 0 0.25rem;
  opacity: 0;
  transform: translateY(10px);
}
.wb-verdict-line.is-key-found {
  color: #F2E8DC;
}
.wb-verdict-line.is-landed {
  animation: wb-verdict-land 0.42s ease forwards;
}

.wb-result-inner.is-verdict-pulse {
  animation: none;
}
.wb-run-plate.is-result:has(.wb-result-inner.is-verdict-pulse) {
  animation: wb-specimen-tick-pulse 0.65s ease forwards;
}
.wb-run-plate.is-result:has(.wb-result-inner.is-verdict-pulse)::after {
  animation: wb-corner-tick-pulse 0.65s ease forwards;
}

.wb-reveal-rise {
  opacity: 0;
  transform: translateY(10px);
}
.wb-reveal-rise.is-visible {
  animation: wb-rise-in 0.38s ease forwards;
}

.wb-result-inner.is-reveal-instant .wb-token-row,
.wb-result-inner.is-reveal-instant .wb-token-chip,
.wb-result-inner.is-reveal-instant .wb-verdict-line,
.wb-result-inner.is-reveal-instant .wb-verdict-rule,
.wb-result-inner.is-reveal-instant .wb-reveal-rise,
.wb-result-inner.is-reveal-instant .wb-sweep-line {
  opacity: 1;
  transform: none;
  animation: none;
}
.wb-result-inner.is-reveal-instant.wb-answer-sweep.is-sweeping .wb-sweep-line,
.wb-result-inner.is-reveal-instant .wb-answer-sweep.is-sweeping .wb-sweep-line {
  display: none;
}

@keyframes wb-token-resolve {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(var(--wb-token-lift, 0)); }
}

@keyframes wb-verdict-land {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes wb-rise-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes wb-specimen-tick-pulse {
  0%   { border-color: var(--wb-border-panel); }
  45%  { border-color: rgba(var(--ember-rgb), 0.62); }
  100% { border-color: var(--wb-border-panel); }
}

@keyframes wb-corner-tick-pulse {
  0%   { opacity: 0.72; border-color: rgba(var(--ember-rgb), 0.42); }
  45%  { opacity: 1; border-color: rgba(var(--ember-rgb), 0.78); }
  100% { opacity: 0.72; border-color: rgba(var(--ember-rgb), 0.42); }
}

@media (prefers-reduced-motion: reduce) {
  .wb-token-row,
  .wb-token-chip,
  .wb-verdict-line,
  .wb-verdict-rule,
  .wb-reveal-rise,
  .wb-sweep-line {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .wb-answer-sweep.is-sweeping .wb-sweep-line {
    display: none !important;
  }
  .wb-result-inner.is-verdict-pulse,
  .wb-run-plate.is-result:has(.wb-result-inner.is-verdict-pulse),
  .wb-run-plate.is-result:has(.wb-result-inner.is-verdict-pulse)::after {
    animation: none !important;
  }
}

/* =============================================================
   WORKBENCH — Pass 17 sweep, chips, verdict rule (animation only)
   ============================================================= */
.wb-answer-sweep {
  position: relative;
  overflow: hidden;
}
.wb-sweep-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--ember);
  opacity: 0;
  transform: translateY(0);
  pointer-events: none;
}
.wb-answer-sweep.is-sweeping .wb-sweep-line {
  opacity: 0.88;
  animation: wb-sweep-down 700ms linear forwards;
}

.wb-token-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.wb-token-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: max(0.625rem, var(--mono-min));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
  border: 1px solid rgba(71, 58, 51, 0.85);
  color: rgba(140, 124, 107, 0.85);
  opacity: 0;
  transform: translateY(4px);
}
.wb-token-chip.is-visible {
  animation: wb-chip-resolve 0.28s ease forwards;
}
.wb-token-chip.is-visible.is-found {
  border-color: rgba(var(--ember-rgb), 0.72);
  color: #EDE3D8;
}
.wb-token-chip.is-visible.is-missing {
  border-color: rgba(100, 86, 76, 0.85);
  color: #B9A893;
}

.wb-verdict-rule {
  height: 1px;
  width: 100%;
  max-width: 12rem;
  background: var(--ember);
  margin: 0.35rem 0 0.85rem;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
}
.wb-verdict-rule.is-visible {
  animation: wb-verdict-rule-in 0.35s ease forwards;
}

@keyframes wb-sweep-down {
  from { transform: translateY(0); opacity: 0.88; }
  to   { transform: translateY(var(--sweep-travel, 180px)); opacity: 0.25; }
}

@keyframes wb-chip-resolve {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes wb-verdict-rule-in {
  from { opacity: 0; transform: scaleX(0); }
  to   { opacity: 1; transform: scaleX(1); }
}

/* =============================================================
   WORKBENCH — Pass 18 in-plate state, contrast, journey ack
   ============================================================= */
.wb-run-plate {
  border-radius: 6px;
  padding: 1.35rem 1.25rem 1.25rem;
  margin-bottom: 1.75rem;
  transition: opacity 0.2s ease, border-color 0.25s ease;
}
.wb-run-plate.is-crossfade-out {
  opacity: 0;
}
.wb-run-plate.is-crossfade-in {
  opacity: 1;
}
.wb-run-plate.is-result {
  margin-bottom: 0;
  border-color: rgba(242, 232, 220, 0.18);
  background: rgba(55, 42, 36, 0.92);
}

.wb-field-label {
  font-family: var(--font-mono);
  font-size: max(0.6875rem, var(--mono-min));
  letter-spacing: 0.14em;
  color: #C9B8A5;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.wb-run-plate .wb-field-label {
  color: #D4C4B0;
}
.wb-plate-support {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: rgba(210, 196, 180, 0.88);
  margin: 0.85rem 0 0;
}
.wb-plate-caption {
  font-family: var(--font-mono);
  font-size: max(0.6875rem, var(--mono-min));
  letter-spacing: 0.04em;
  line-height: 1.55;
  color: rgba(185, 168, 147, 0.82);
  margin: 0 0 1.1rem;
}
.wb-plate-note {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: #B9A893;
  margin: 0.85rem 0;
  border-left: 2px solid rgba(71, 58, 51, 0.9);
  padding-left: 0.875rem;
}
.wb-plate-note--dashed {
  border: 1px dashed rgba(71, 58, 51, 0.85);
  border-left: 1px dashed rgba(71, 58, 51, 0.85);
  border-radius: 6px;
  padding: 1.375rem;
  font-size: 0.9375rem;
}
.wb-plate-hint {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgba(196, 182, 166, 0.84);
  margin: 0.65rem 0 0;
}
.wb-field-error {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--ember);
  line-height: 1.5;
  margin-bottom: 0.75rem;
}
.wb-active-case__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-family: var(--font-mono);
  font-size: max(0.8125rem, var(--mono-min));
  color: rgba(240, 143, 88, 0.82);
  letter-spacing: 0.05em;
  line-height: 1.5;
}
.wb-result-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.wb-confirm-block,
.wb-gate-block {
  margin-top: 0.25rem;
}

.wb-input.is-paste-received {
  animation: wb-paste-tick 0.55s ease forwards;
}
.wb-paste-ack {
  font-family: var(--font-mono);
  font-size: max(0.6875rem, var(--mono-min));
  letter-spacing: 0.08em;
  color: var(--ember);
  margin-top: 0.45rem;
}
@keyframes wb-paste-tick {
  0%   { border-color: var(--wb-border-control); }
  40%  { border-color: rgba(var(--ember-rgb), 0.78); }
  100% { border-color: var(--wb-border-control); }
}

.wb-btn.is-copied {
  color: var(--ember) !important;
  border-color: rgba(var(--ember-rgb), 0.72) !important;
  animation: wb-copy-flash 2s ease forwards;
}
@keyframes wb-copy-flash {
  0%, 18% { background: rgba(var(--ember-rgb), 0.14); }
  100%    { background: transparent; }
}

.wb-answer-row {
  margin-bottom: 1.1rem;
}
.wb-answer-sweep-measure {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: pre-wrap;
}
.wb-answer-row__bar {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--wb-border-panel);
  border-radius: 6px;
  background: var(--wb-bg-well);
}
.wb-answer-row__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 44px;
  padding: 0.65rem 0.875rem;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.wb-answer-row__label {
  font-family: var(--font-mono);
  font-size: max(0.6875rem, var(--mono-min));
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #D4C4B0;
}
.wb-answer-row__chevron {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.5px solid #B9A893;
  border-bottom: 1.5px solid #B9A893;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  margin-left: 0.75rem;
  flex-shrink: 0;
}
.wb-answer-row__chevron.is-open {
  transform: rotate(-135deg);
}
.wb-answer-row__body {
  display: none;
  padding: 0.875rem;
  border-top: 1px solid var(--wb-border-passive);
  background: rgba(16, 11, 9, 0.72);
}
.wb-answer-row__body.is-open,
.wb-answer-row.is-expanded .wb-answer-row__body {
  display: block;
}
.wb-answer-row__text {
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #F2E8DC;
  white-space: pre-wrap;
}
.wb-answer-row__bar.wb-answer-sweep.is-sweeping .wb-sweep-line {
  opacity: 0.88;
  animation: wb-sweep-down 700ms linear forwards;
}

.wb-token-chips {
  list-style: none;
  margin: 0.5rem 0 0.65rem;
  padding: 0;
}

.wb-verdict-line.is-landed {
  color: #F2E8DC;
  opacity: 1;
}

.wb-another-case {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ember);
  background: transparent;
  border: none;
  padding: 0.65rem 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.wb-result-actions {
  margin-top: 1.25rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--wb-border-passive);
}

.wb-review-value {
  white-space: pre-wrap;
}

@media (prefers-reduced-motion: reduce) {
  .wb-run-plate.is-crossfade-out,
  .wb-run-plate.is-crossfade-in {
    transition: none !important;
    opacity: 1 !important;
  }
  .wb-btn.is-copied {
    animation: none !important;
  }
  .wb-input.is-paste-received {
    animation: none !important;
    border-color: rgba(var(--ember-rgb), 0.72) !important;
  }
  .wb-stage-progress__fill {
    transition: none !important;
  }
}

/* =============================================================
   WORKBENCH — Pass 19 mobile visual hierarchy polish
   ============================================================= */
.wb-input,
.wb-input[style] {
  background: var(--wb-bg-well) !important;
  border: 1px solid var(--wb-border-control) !important;
  border-radius: 7px !important;
  padding: 18px 18px 16px !important;
  line-height: 1.5 !important;
}
.wb-input:focus-visible {
  border-color: rgba(var(--ember-rgb), 0.72) !important;
}

.wb-btn--primary:not(:disabled) {
  background: var(--ember) !important;
  border-color: var(--ember) !important;
  color: #181210 !important;
}
.wb-btn--primary:not(:disabled):hover {
  background: var(--ember-soft) !important;
  border-color: var(--ember-soft) !important;
}
.wb-btn--ghost:not(:disabled) {
  background: transparent !important;
  border-color: var(--wb-border-panel) !important;
  color: #F2E8DC !important;
}
.wb-btn--ghost:not(:disabled):hover {
  border-color: rgba(var(--ember-rgb), 0.42) !important;
  background: rgba(var(--ember-rgb), 0.06) !important;
}
.wb-btn--link:not(:disabled) {
  color: var(--ember-soft) !important;
}

.wb-btn:disabled {
  opacity: 1 !important;
  cursor: not-allowed !important;
}
.wb-btn--primary:disabled {
  background: rgba(var(--ember-rgb), 0.12) !important;
  border-color: rgba(248, 168, 102, 0.22) !important;
  color: rgba(245, 235, 221, 0.48) !important;
}
.wb-btn--ghost:disabled {
  background: rgba(8, 6, 5, 0.55) !important;
  border-color: rgba(242, 232, 220, 0.14) !important;
  color: rgba(245, 235, 221, 0.42) !important;
}
.wb-btn--link:disabled {
  background: transparent !important;
  border: none !important;
  color: rgba(245, 235, 221, 0.38) !important;
  text-decoration: none !important;
}

.wb-share-panel {
  border: 1px solid var(--wb-border-passive);
  border-radius: 4px;
  padding: 0;
  background: transparent;
  margin-top: 0;
}
.wb-share-panel__text {
  margin: 0.35rem 0 0;
  padding: 0.65rem 0.7rem;
  background: rgba(24, 18, 16, 0.72);
  border: 1px solid rgba(242, 232, 220, 0.08);
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgba(168, 154, 138, 0.88);
  white-space: pre-wrap;
  word-break: break-word;
}
.wb-share-panel__actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}
.wb-share-panel__link {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ember-soft);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.wb-result-share {
  display: grid;
  gap: 0.35rem;
}

@media (max-width: 768px) {
  .wb-shell {
    padding-bottom: calc(160px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .wb-stage:has(.wb-run-plate.is-result) .wb-shell,
  .wb-stage:has(.wb-gate-block) .wb-shell,
  .wb-stage:has(.wb-action-row) .wb-shell {
    padding-bottom: calc(160px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .wb-specimen-plate__label,
  .wb-instrument-header,
  .wb-stage-progress__step,
  .wb-plate-caption,
  .wb-answer-row__label,
  .wb-paste-ack {
    font-size: max(0.8125rem, var(--mono-min));
    letter-spacing: 0.06em;
    line-height: 1.5;
  }

  .wb-active-case__meta {
    font-size: max(0.8125rem, var(--mono-min));
    gap: 0.85rem;
  }

  .wb-plate-support,
  .wb-plate-hint {
    font-size: 0.875rem;
    line-height: 1.55;
    color: rgba(185, 168, 147, 0.88);
  }

  .wb-case-card:not(.is-active):not(.is-disabled) {
    background: rgba(38, 30, 26, 0.82);
  }
}

/* =============================================================
   WORKBENCH — Pass 21 instrument console (replaces Pass 20)
   ============================================================= */

.wb-shell__frame {
  max-width: 720px;
  margin: 0 auto;
}

/* Measurement spine — active channel with terminal ticks */
.wb-case-card.wb-measure-channel.is-active {
  border-color: rgba(var(--ember-rgb), 0.44);
  background-color: rgba(52, 38, 32, 0.96);
  box-shadow: inset 3px 0 0 var(--ember);
  background-image:
    linear-gradient(rgba(var(--ember-rgb), 0.82), rgba(var(--ember-rgb), 0.82)),
    linear-gradient(rgba(var(--ember-rgb), 0.82), rgba(var(--ember-rgb), 0.82)),
    linear-gradient(rgba(var(--ember-rgb), 0.55), rgba(var(--ember-rgb), 0.55)),
    linear-gradient(rgba(var(--ember-rgb), 0.55), rgba(var(--ember-rgb), 0.55));
  background-size: 12px 2px, 12px 2px, 2px 11px, 2px 11px;
  background-position: 0 0.5rem, 0 calc(100% - 0.5rem), 0 0.5rem, 0 calc(100% - 0.5rem);
  background-repeat: no-repeat;
}

.wb-case-card.wb-measure-channel:not(.is-active) {
  box-shadow: none;
  background-image: none;
}

.wb-run-plate.wb-measure-channel {
  border-color: rgba(242, 232, 220, 0.14);
  background-color: rgba(46, 34, 28, 0.97);
  box-shadow: inset 3px 0 0 rgba(var(--ember-rgb), 0.92);
  background-image:
    linear-gradient(rgba(var(--ember-rgb), 0.58), rgba(var(--ember-rgb), 0.58)),
    linear-gradient(rgba(var(--ember-rgb), 0.58), rgba(var(--ember-rgb), 0.58));
  background-size: 14px 2px, 14px 2px;
  background-position: 0 0.65rem, 0 calc(100% - 0.65rem);
  background-repeat: no-repeat;
}

.wb-run-plate.is-result.wb-measure-channel {
  border-color: rgba(var(--ember-rgb), 0.32);
  background-color: rgba(40, 28, 24, 0.98);
  box-shadow:
    inset 3px 0 0 var(--ember),
    inset 0 0 0 1px rgba(var(--ember-rgb), 0.06);
}

.wb-case-card.wb-specimen-plate::before,
.wb-case-card.wb-specimen-plate::after {
  opacity: 0.12;
}
.wb-case-card.wb-specimen-plate:not(.is-active)::before,
.wb-case-card.wb-specimen-plate:not(.is-active)::after {
  opacity: 0.05;
}
.wb-case-card.is-active.wb-specimen-plate::before {
  opacity: 0.22;
}
.wb-case-card.is-active.wb-specimen-plate::after {
  opacity: 0.24;
}

.wb-run-plate.wb-specimen-plate::before {
  opacity: 0.38;
}
.wb-run-plate.wb-specimen-plate::after {
  opacity: 0.16;
}
.wb-run-plate.is-result.wb-specimen-plate::before {
  opacity: 0.45;
}
.wb-run-plate.is-result.wb-specimen-plate::after {
  opacity: 0.22;
}

/* Case detail — segmented readout */
.wb-run-plate:has(.wb-readout) {
  padding-top: 1.05rem;
}
.wb-readout__specimen {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.wb-readout__specimen .wb-antenna {
  margin-bottom: 0.45rem;
}
.wb-readout__specimen .wb-specimen-plate__label {
  margin-bottom: 0.35rem;
}
.wb-readout__specimen + .wb-readout__rule {
  margin-top: 0.55rem;
}
.wb-readout__rule {
  height: 1px;
  margin: 0.9rem 0;
  background: linear-gradient(90deg, rgba(var(--ember-rgb), 0.42) 0%, rgba(242, 232, 220, 0.14) 38%, transparent 100%);
}
.wb-readout__section .wb-field-label {
  color: rgba(210, 196, 180, 0.82);
  margin-bottom: 0.4rem;
}
.wb-readout__section {
  padding-top: 0.15rem;
}
.wb-readout__signal {
  margin: 0.65rem 0 0.25rem;
  padding: 0.35rem 0.5rem;
  border-left: 2px solid rgba(var(--ember-rgb), 0.38);
  background: rgba(8, 6, 5, 0.45);
  border-radius: 0 3px 3px 0;
}
.wb-readout__signal .wb-active-case__probe {
  margin: 0;
}
.wb-readout__run-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.15rem;
  margin-top: 0.85rem;
  padding: 0.6rem 0.8rem;
  font-family: var(--font-mono);
  font-size: max(0.8125rem, var(--mono-min));
  letter-spacing: 0.05em;
  line-height: 1.5;
  color: rgba(212, 168, 130, 0.92);
  background: rgba(10, 7, 6, 0.88);
  border: 1px solid rgba(var(--ember-rgb), 0.22);
  border-radius: 4px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.24);
}
.wb-readout__notes {
  margin-top: 0.25rem;
  padding-top: 0.15rem;
}

/* Input bay */
.wb-input-bay {
  margin-top: 0.65rem;
  padding: 0.55rem 0.7rem 0.7rem;
  background: rgba(8, 6, 5, 0.82);
  border: 1px solid rgba(var(--ember-rgb), 0.34);
  border-radius: 6px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.32);
}
.wb-input-bay__tag {
  display: block;
  font-family: var(--font-mono);
  font-size: max(0.6875rem, var(--mono-min));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(240, 143, 88, 0.8);
  margin-bottom: 0.4rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(var(--ember-rgb), 0.18);
}
.wb-input-bay .wb-prompt-well {
  margin: 0;
  border: 1px solid rgba(248, 168, 102, 0.22);
  background: rgba(14, 9, 8, 0.92);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.38);
  padding: 18px 16px 16px;
}

.wb-prompt-well {
  background: rgba(14, 9, 8, 0.92);
  border: 1px solid rgba(248, 168, 102, 0.26);
  border-radius: 6px;
  padding: 18px 16px 16px;
  font-family: var(--font-serif);
  font-size: 1rem;
  color: #F2E8DC;
  line-height: 1.5;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.32);
}

.wb-input,
.wb-input[style] {
  background: rgba(10, 7, 6, 0.92) !important;
  border: 1px solid rgba(var(--ember-rgb), 0.32) !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.34) !important;
}

/* A read-only field keeps its content on screen as context but must stop reading as the
   live one. It drops the two editable affordances above — the ember border and the inset
   shadow — and takes the passive border every settled surface here uses. !important is
   load-bearing: .wb-input.is-paste-received animates border-color with `forwards`, and
   that animated value persists onto the field after it goes read-only.

   The ink is the same opaque dim as .wb-reader-result__trust, and opaque for the reason
   that rule already records: an rgba value makes the ratio depend on whatever happens to
   sit behind the field. Measured in the browser at 6.46:1, against the background this
   field actually composites to on the confirm block — rgba(10,7,6,.92) over
   .wb-confirm-block rgba(14,11,9,.82) over .wb-stage rgb(24,18,16) = rgb(10, 7, 6) —
   and 6.39:1 in the lightest case the umber system can put behind it. Both clear the
   4.5:1 floor. Read-only text is still text a person reads.

   --ink-dim is deliberately NOT used: it is declared nowhere in the repo, so its 14 uses
   in this file compute to `inherit` and carry no dimming at all. */
.wb-input[readonly],
.wb-input[readonly][style] {
  border-color: var(--wb-border-passive) !important;
  box-shadow: none !important;
  color: rgb(158, 144, 131) !important;
  cursor: default;
}

.wb-input[readonly]:focus-visible {
  border-color: var(--wb-border-panel) !important;
}

/* Segmented instrument control */
.wb-mode-toggle {
  gap: 0;
  padding: 2px;
  border-radius: 4px;
  border-color: rgba(var(--ember-rgb), 0.24);
  background: rgba(8, 6, 5, 0.94);
}
.wb-mode-btn {
  border-radius: 3px;
  border: 1px solid transparent;
  flex: 1 1 50%;
}
.wb-mode-btn:not(.is-active) {
  background: rgba(16, 11, 9, 0.9);
  color: rgba(168, 154, 140, 0.82);
  border-color: rgba(242, 232, 220, 0.07);
}
.wb-mode-btn.is-active {
  font-weight: 600;
}

@media (max-width: 480px) {
  .wb-mode-btn {
    font-size: 0.875rem;
    padding: 0.5rem 0.65rem;
    min-height: 40px;
  }
  .wb-mode-btn:not(.is-active) {
    color: rgba(172, 158, 144, 0.78);
  }
}

/* Console layout + desktop readout rail */
.wb-console {
  position: relative;
}

.wb-console__measure {
  display: block;
}

.wb-readout-rail {
  display: none;
}

@media (min-width: 960px) {
  .wb-shell__frame {
    max-width: min(1040px, 94vw);
  }

  .wb-console__measure {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 200px;
    gap: clamp(1.15rem, 2.2vw, 1.85rem);
    align-items: start;
  }

  .wb-mode-btn.is-active {
    background: linear-gradient(180deg, rgba(42, 28, 22, 0.98) 0%, rgba(30, 20, 16, 0.98) 100%);
    color: #F2E8DC;
    border-color: rgba(var(--ember-rgb), 0.38);
    box-shadow:
      inset 0 2px 0 rgba(var(--ember-rgb), 0.62),
      inset 2px 0 0 rgba(var(--ember-rgb), 0.28);
  }

  .wb-mode-btn.is-active .wb-mode-btn__num {
    color: rgba(240, 143, 88, 0.92);
    opacity: 1;
  }

  .wb-readout-rail {
    display: block;
    position: sticky;
    top: calc(var(--header-offset) + var(--scroll-anchor-gap));
    padding: 0.85rem 0.95rem;
    border: 1px solid rgba(var(--ember-rgb), 0.12);
    border-left: 2px solid rgba(var(--ember-rgb), 0.48);
    background: rgba(12, 8, 7, 0.78);
    box-shadow: inset 0 1px 0 rgba(252, 248, 236, 0.03);
  }

  .wb-readout-rail__head {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(240, 143, 88, 0.65);
    margin-bottom: 0.65rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid rgba(var(--ember-rgb), 0.16);
  }

  .wb-readout-rail__grid {
    margin: 0;
    display: grid;
    gap: 0.45rem;
  }

  .wb-readout-rail__grid > div {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
    align-items: baseline;
  }

  .wb-readout-rail__grid dt {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(160, 145, 132, 0.72);
  }

  .wb-readout-rail__grid dd {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    color: rgba(230, 210, 190, 0.88);
    text-align: right;
  }
}

/* Measurement output module */
.wb-output-module__head {
  padding-bottom: 0.65rem;
  border-bottom: 1px solid rgba(var(--ember-rgb), 0.18);
  margin-bottom: 0.75rem;
}

.wb-output-module__body {
  padding: 0.85rem 0.8rem 1rem;
  background: rgba(8, 6, 5, 0.86);
  border: 1px solid rgba(var(--ember-rgb), 0.2);
  border-radius: 4px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.28);
}

.wb-output-module__body .wb-verdict-line.is-landed {
  margin-top: 0.35rem;
  padding-top: 0.25rem;
}

.wb-output-module__footer {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(242, 232, 220, 0.1);
}

.wb-run-plate.is-result .wb-answer-row__bar {
  border-color: rgba(var(--ember-rgb), 0.32);
  background: rgba(6, 4, 3, 0.92);
}

.wb-run-plate.is-result .wb-answer-row__body {
  background: rgba(4, 3, 2, 0.88);
  border-top-color: rgba(var(--ember-rgb), 0.18);
}

/* Measured markers */
.wb-token-chip {
  border-radius: 3px;
  padding: 0.28rem 0.55rem;
  background: rgba(8, 6, 5, 0.92);
  border: 1px solid rgba(var(--ember-rgb), 0.28);
  letter-spacing: 0.05em;
  font-size: max(0.625rem, var(--mono-min));
}
.wb-token-chip.is-visible.is-found {
  background: rgba(12, 8, 6, 0.96);
  border-color: rgba(var(--ember-rgb), 0.62);
  color: rgba(242, 232, 220, 0.96);
}
.wb-token-chip.is-visible.is-missing {
  background: rgba(8, 6, 5, 0.85);
  border-color: rgba(242, 232, 220, 0.14);
  color: rgba(150, 136, 122, 0.85);
}

.wb-specimen-plate__label {
  color: rgba(204, 162, 126, 0.84);
}

.wb-result-actions {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(var(--ember-rgb), 0.14);
}

@media (max-width: 768px) {
  .wb-readout__run-strip,
  .wb-specimen-plate__label,
  .wb-instrument-header {
    font-size: max(0.8125rem, var(--mono-min));
    line-height: 1.55;
  }

  .wb-readout__signal {
    border-left-width: 3px;
  }
}

/* =============================================================
   WORKBENCH — Pass 22 full parity (shared console primitives)
   ============================================================= */

/* Aliases — panel / plate / rail / strip / chip */
.wb-panel,
.wb-run-plate {
  /* shared console surface; run-plate carries layout */
}

.wb-active-rail,
.wb-measure-channel {
  /* active measurement channel — see Pass 21 spine rules */
}

.wb-readout-strip,
.wb-readout__run-strip {
  /* compact measured data row */
}

.wb-marker-chip,
.wb-token-chip {
  /* looked-for / detected / missing markers */
}

.wb-meta,
.wb-specimen-plate__label,
.wb-field-label {
  /* mono readout labels */
}

/* Form field spacing */
.wb-field {
  display: block;
  margin-bottom: 1.1rem;
}
.wb-field:last-child {
  margin-bottom: 0;
}
.wb-field--inline {
  margin-bottom: 0;
}

/* Recessed input wells — all flows */
.wb-input-bay + .wb-input-bay,
.wb-input-bay + .wb-action-row,
.wb-status-readout + .wb-input-bay {
  margin-top: 0.85rem;
}
.wb-input-bay .wb-field {
  margin-bottom: 0.9rem;
}
.wb-input-bay .wb-prompt-well {
  margin-top: 0.35rem;
}
.wb-input-bay--gate {
  margin-top: 0.75rem;
}
.wb-panel .wb-input,
.wb-panel select.wb-input,
.wb-panel textarea.wb-input {
  background: rgba(10, 7, 6, 0.92) !important;
  border-color: rgba(var(--ember-rgb), 0.28) !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.34) !important;
}

/* Status / provisional readout modules */
.wb-status-readout {
  padding: 0.85rem 0.95rem;
  background: rgba(8, 6, 5, 0.88);
  border: 1px solid rgba(var(--ember-rgb), 0.16);
  border-left: 2px solid rgba(var(--ember-rgb), 0.42);
  border-radius: 4px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.22);
}
.wb-status-readout--banner {
  margin-bottom: 1rem;
  padding: 0.55rem 0.75rem;
}
.wb-status-readout--failure {
  margin-top: 0.85rem;
}
.wb-status-readout__label {
  font-family: var(--font-mono);
  font-size: max(0.625rem, var(--mono-min));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(160, 145, 132, 0.72);
}
.wb-status-readout__value,
.wb-status-readout__title {
  font-family: var(--font-mono);
  font-size: max(0.6875rem, var(--mono-min));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(212, 168, 130, 0.9);
}
.wb-status-readout__title {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.125rem;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #F2E8DC;
  margin: 0.15rem 0 0.35rem;
}
.wb-status-readout__body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.90625rem;
  line-height: 1.55;
  color: rgba(185, 168, 147, 0.92);
}
.wb-status-readout__note {
  margin: 0.65rem 0 0;
  font-family: var(--font-mono);
  font-size: max(0.625rem, var(--mono-min));
  letter-spacing: 0.06em;
  color: rgba(140, 124, 107, 0.82);
}
.wb-status-readout__badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: max(0.625rem, var(--mono-min));
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(200, 88, 48, 0.92);
  border: 1px solid rgba(var(--ember-rgb), 0.22);
  border-radius: 3px;
  padding: 0.28rem 0.55rem;
  background: rgba(8, 6, 5, 0.72);
  white-space: nowrap;
}
.wb-status-readout__record {
  margin: 0.35rem 0 0;
  padding: 0.65rem 0.7rem;
  max-height: 12rem;
  overflow: auto;
  background: rgba(4, 3, 2, 0.82);
  border: 1px solid rgba(242, 232, 220, 0.08);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: max(0.625rem, var(--mono-min));
  line-height: 1.45;
  color: rgba(158, 146, 132, 0.82);
  white-space: pre-wrap;
  word-break: break-word;
}

.wb-email-gate .wb-status-readout__head,
.wb-email-followup .wb-status-readout__head {
  margin-bottom: 0.15rem;
}
.wb-email-followup {
  margin-top: 1rem;
}

/* Action rows */
.wb-action-row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0.85rem;
}
.wb-action-row--secondary {
  margin-top: 0.55rem;
}
.wb-action-row--record {
  margin-top: 0.85rem;
}
.wb-action-row__note {
  font-family: var(--font-mono);
  font-size: max(0.625rem, var(--mono-min));
  letter-spacing: 0.06em;
  color: rgba(140, 124, 107, 0.82);
  line-height: 1.5;
}
.wb-confirm-block .wb-action-row,
.wb-gate-block .wb-action-row {
  margin-top: 0.75rem;
}

/* BYO example plates */
.wb-example-plate {
  margin: 0.75rem 0;
  padding: 0.75rem 0.85rem;
  background: rgba(8, 6, 5, 0.82);
  border: 1px solid rgba(242, 232, 220, 0.1);
  border-radius: 4px;
}
.wb-example-plate__open {
  margin: 0.35rem 0 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: rgba(140, 124, 107, 0.88);
  line-height: 1.5;
}
.wb-example-plate__targeted {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  color: #F2E8DC;
  line-height: 1.5;
}

/* BYO review module */
.wb-review-module .wb-review-row {
  margin-bottom: 0.85rem;
}
.wb-review-module .wb-review-row:last-child {
  margin-bottom: 0;
}
.wb-review-row .wb-field-label {
  margin-bottom: 0.35rem;
}

.wb-hygiene-note {
  margin-top: 0.65rem;
}

.wb-plate-hint--mono {
  font-family: var(--font-mono);
  font-size: max(0.625rem, var(--mono-min));
  letter-spacing: 0.04em;
  line-height: 1.6;
}

/* Share panel — align with output footer spacing */
.wb-output-module__footer .wb-share-panel {
  margin-top: 0;
}
.wb-output-module__footer .wb-status-readout--failure {
  margin-top: 0.65rem;
}

/* BYO console — hide mode readout on finished step if cramped */
@media (max-width: 959px) {
  .wb-readout-rail--byo {
    display: none;
  }
}

@media (min-width: 960px) {
  .wb-shell {
    padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px));
  }

  .wb-mode-btn.is-active {
    background: linear-gradient(180deg, rgba(38, 26, 20, 0.98) 0%, rgba(26, 17, 13, 0.98) 100%);
    color: #F2E8DC;
    border-color: rgba(var(--ember-rgb), 0.32);
    box-shadow:
      inset 0 2px 0 rgba(var(--ember-rgb), 0.55),
      inset 2px 0 0 rgba(var(--ember-rgb), 0.24);
  }

  .wb-mode-btn.is-active .wb-mode-btn__num {
    color: rgba(240, 143, 88, 0.88);
    opacity: 1;
  }
}

/* =============================================================
   SITEWIDE — header offset, hero baseline, anchor scroll
   ============================================================= */

:target,
#main-content,
.wb-scroll-anchor {
  scroll-margin-top: calc(var(--header-offset) + var(--scroll-anchor-gap) + env(safe-area-inset-top, 0px));
}

/* =============================================================
   WORKBENCH — Result score readout mobile stack (≤480px)
   ============================================================= */

@media (max-width: 480px) {
  .wb-result-inner.wb-output-module .wb-output-module__head {
    padding-bottom: 0.28rem;
    margin-bottom: 0.32rem;
  }

  .wb-result-inner.wb-output-module .wb-output-module__head--compact {
    padding-bottom: 0.2rem;
    margin-bottom: 0.24rem;
  }

  .wb-result-inner.wb-output-module .wb-output-module__body {
    padding: 0.32rem 0.48rem 0.46rem;
  }

  .wb-result-inner .wb-result-score-panel {
    margin-top: 0;
  }

  .wb-result-inner .wb-result-module--answer {
    margin-top: 0.38rem;
  }

  .wb-result-inner .wb-output-module__head .wb-antenna {
    display: none;
  }
}

/* =============================================================
   FIELD NOTES — native static layer
   ============================================================= */

.page--field-notes {
  --fn-read: min(42rem, 100%);
}

.page--field-notes .fn-masthead {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid rgba(var(--ember-rgb), 0.14);
}

.page--field-notes .fn-masthead h1 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 500;
  line-height: 1.12;
  color: var(--ink);
  margin: 0 0 var(--space-2);
}

.page--field-notes .fn-masthead__thesis {
  font-family: var(--font-serif);
  font-size: clamp(1.0625rem, 2.2vw, 1.2rem);
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0 0 var(--space-2);
}

.page--field-notes .page__intro {
  max-width: var(--fn-read);
  color: var(--ink-dim);
}

.fn-prepared {
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-4);
  border: 1px solid rgba(var(--ember-rgb), 0.16);
  border-left: 2px solid rgba(var(--ember-rgb), 0.42);
  background: rgba(12, 8, 6, 0.45);
  border-radius: 0 4px 4px 0;
  max-width: var(--fn-read);
}

.fn-prepared__title {
  font-family: var(--font-mono);
  font-size: max(0.6875rem, var(--mono-min));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(228, 214, 196, 0.88);
  margin: 0 0 var(--space-2);
}

.fn-prepared__body {
  font-family: var(--font-display);
  font-size: max(0.9375rem, var(--text-min));
  line-height: 1.55;
  color: var(--ink-dim);
  margin: 0;
}

.fn-section__title {
  font-family: var(--font-mono);
  font-size: max(0.6875rem, var(--mono-min));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(200, 186, 170, 0.78);
  margin: 0 0 var(--space-3);
}

.fn-related {
  margin: var(--space-5) 0 var(--space-4);
  max-width: var(--fn-read);
}

.fn-related__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.fn-related__list a {
  font-family: var(--font-mono);
  font-size: max(0.75rem, var(--mono-min));
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(228, 214, 196, 0.9);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.fn-related__list a:hover {
  color: var(--ember);
}

.fn-subscribe-cta {
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid rgba(var(--ember-rgb), 0.12);
  max-width: var(--fn-read);
}

.field-notes-signup {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(var(--ember-rgb), 0.12);
  max-width: var(--fn-read);
}

.field-notes-signup .field-notes__caption {
  margin-top: var(--space-2);
}

.field-notes-signup .field-notes__body {
  margin-top: var(--space-2);
}

.rd-field-notes.field-notes-signup .field-notes__recent {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-faint);
}

.rd-field-notes.field-notes-signup .field-notes__recent a {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 0.95rem;
  color: rgba(180, 192, 210, 0.95);
  text-decoration: none;
  border: none;
}

.rd-field-notes.field-notes-signup .field-notes__recent a:hover {
  color: var(--ink-soft);
}

.fn-subscribe-cta a {
  font-family: var(--font-mono);
  font-size: max(0.75rem, var(--mono-min));
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(210, 196, 180, 0.88);
  text-decoration: none;
}

.fn-subscribe-cta a:hover {
  color: var(--ember);
}

.fn-article__head {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid rgba(var(--ember-rgb), 0.14);
}

.fn-article__provenance {
  font-family: var(--font-mono);
  font-size: max(0.625rem, var(--mono-min));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(196, 182, 166, 0.78);
  margin: 0 0 var(--space-3);
}

.fn-article__status {
  color: rgba(240, 143, 88, 0.88);
}

.fn-article__sep {
  opacity: 0.45;
  margin: 0 0.25rem;
}

.fn-article__head h1 {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 4.5vw, 2.35rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 var(--space-3);
}

.fn-article__deck {
  font-family: var(--font-serif);
  font-size: clamp(1.0625rem, 2.2vw, 1.2rem);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  max-width: var(--fn-read);
}

.fn-article__body {
  max-width: var(--fn-read);
}

.fn-article__body h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.8vw, 1.45rem);
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink);
  margin: var(--space-5) 0 var(--space-2);
}

.fn-article__body h2:first-child {
  margin-top: 0;
}

.fn-article__body p {
  font-family: var(--font-display);
  font-size: max(0.9375rem, var(--text-min));
  line-height: 1.58;
  color: var(--ink-dim);
  margin: 0 0 var(--space-3);
}

.fn-article__related,
.fn-article__cta {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(var(--ember-rgb), 0.12);
  max-width: var(--fn-read);
}

.fn-article__cta-label {
  font-family: var(--font-mono);
  font-size: max(0.6875rem, var(--mono-min));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(200, 186, 170, 0.78);
  margin: 0 0 var(--space-2);
}

@media (max-width: 480px) {
  .page--field-notes .fn-masthead {
    margin-bottom: var(--space-4);
  }
  .fn-prepared {
    padding: var(--space-3);
  }
}

/* =============================================================
   WORKBENCH — Pass A hierarchy & compression
   ============================================================= */

.wb-case-card {
  padding: 0.75rem 0.85rem;
  min-height: 38px;
}
.wb-specimen-plate__label {
  margin-bottom: 0.45rem;
}

.wb-case-card:not(.is-active):not(.is-disabled) {
  border-color: rgba(242, 232, 220, 0.06);
  background: rgba(35, 28, 24, 0.62);
}
.wb-case-card:not(.is-active):not(.is-disabled) .wb-case-card__title {
  color: rgba(210, 196, 180, 0.78);
}
.wb-case-card:not(.is-active):not(.is-disabled) .wb-specimen-plate__label {
  color: rgba(240, 143, 88, 0.58);
}
.wb-case-card:not(.is-active):not(.is-disabled).wb-specimen-plate::before {
  opacity: 0.45;
}
.wb-case-card:not(.is-active):not(.is-disabled).wb-specimen-plate::after {
  opacity: 0.4;
}

.wb-case-card.is-active {
  border-color: rgba(var(--ember-rgb), 0.52);
  background: rgba(58, 44, 38, 0.98);
  box-shadow: inset 0 0 0 1px rgba(var(--ember-rgb), 0.22);
}
.wb-case-card.wb-measure-channel.is-active {
  border-color: rgba(var(--ember-rgb), 0.62);
  background-color: rgba(58, 42, 34, 0.99);
  box-shadow:
    inset 3px 0 0 var(--ember),
    inset 0 0 0 1px rgba(var(--ember-rgb), 0.18);
}

.wb-run-plate:not(.is-result) {
  margin-bottom: 0;
  padding: 0.9rem 1.05rem 0.85rem;
}
.wb-run-plate:has(.wb-readout) {
  padding-top: 0.65rem;
  padding-bottom: 0.7rem;
  border-radius: 4px 4px 0 0;
}
.wb-confirm-block {
  margin-top: 0;
}
.wb-console__measure-main > .wb-run-plate:has(.wb-readout) + .wb-confirm-block.wb-flow-module {
  margin-top: -1px;
  padding: 0.4rem 0.55rem 0.5rem;
  border-top-color: rgba(242, 232, 220, 0.06);
  border-radius: 0 0 4px 4px;
  background: rgba(12, 9, 7, 0.82);
}

.wb-readout .wb-active-case__headline {
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  margin: 0.35rem 0 0.3rem;
  line-height: 1.25;
}
.wb-readout .wb-plate-support {
  font-size: 0.875rem;
  line-height: 1.45;
  margin-top: 0;
}
.wb-readout__rule {
  margin: 0.45rem 0;
}
.wb-readout__signal {
  margin: 0.4rem 0 0.15rem;
  padding: 0.28rem 0.45rem;
}
.wb-readout__run-strip {
  margin-top: 0.5rem;
  padding: 0.45rem 0.65rem;
  font-size: max(0.75rem, var(--mono-min));
}
.wb-readout__specimen + .wb-readout__rule {
  margin-top: 0.3rem;
}
.wb-readout__section .wb-field-label {
  margin-bottom: 0.28rem;
}
.wb-confirm-block .wb-field-label,
.wb-confirm-block .wb-specimen-plate__label {
  margin-bottom: 0.35rem;
}
.wb-confirm-block .wb-input-bay {
  margin-bottom: 0.65rem;
}
.wb-confirm-block .wb-plate-hint {
  margin-top: 0.45rem;
}

/* =============================================================
   WORKBENCH — Pass B.1 case selector contrast
   ============================================================= */

.wb-case-card:not(.is-active):not(.is-disabled) {
  opacity: 0.87;
  border-color: rgba(242, 232, 220, 0.04);
  background: rgba(26, 20, 17, 0.8);
}
.wb-case-card:not(.is-active):not(.is-disabled) .wb-case-card__title {
  color: rgba(186, 172, 156, 0.64);
}
.wb-case-card:not(.is-active):not(.is-disabled) .wb-specimen-plate__label {
  color: rgba(240, 143, 88, 0.4);
}
.wb-case-card:not(.is-active):not(.is-disabled).wb-specimen-plate::before {
  opacity: 0.24;
}
.wb-case-card:not(.is-active):not(.is-disabled).wb-specimen-plate::after {
  opacity: 0.18;
}
.wb-case-card:not(.is-active):not(.is-disabled):not(:disabled):hover {
  opacity: 0.93;
  border-color: rgba(242, 232, 220, 0.08);
  background: rgba(30, 24, 20, 0.86);
}

.wb-case-card.is-active {
  opacity: 1;
  border-color: rgba(var(--ember-rgb), 0.74);
  background: rgba(62, 46, 38, 0.99);
  box-shadow:
    inset 0 0 0 1px rgba(var(--ember-rgb), 0.3),
    0 0 20px rgba(var(--ember-rgb), 0.16),
    0 0 0 1px rgba(var(--ember-rgb), 0.14);
}
.wb-case-card.is-active .wb-case-card__title {
  color: #FCF8EC;
  text-shadow: 0 0 14px rgba(var(--ember-rgb), 0.14);
}
.wb-case-card.is-active .wb-specimen-plate__label {
  color: rgba(248, 168, 102, 0.96);
}
.wb-case-card.wb-measure-channel.is-active {
  border-color: rgba(var(--ember-rgb), 0.82);
  background-color: rgba(64, 46, 36, 1);
  box-shadow:
    inset 3px 0 0 var(--ember),
    inset 0 0 0 1px rgba(var(--ember-rgb), 0.26),
    0 0 24px rgba(var(--ember-rgb), 0.2),
    0 0 0 1px rgba(var(--ember-rgb), 0.18);
}
.wb-case-card.is-active.wb-specimen-plate::before {
  opacity: 0.34;
}
.wb-case-card.is-active.wb-specimen-plate::after {
  opacity: 0.38;
}

@media (max-width: 768px) {
  .wb-case-card:not(.is-active):not(.is-disabled) {
    background: rgba(24, 19, 16, 0.84);
  }
}

/* =============================================================
   WORKBENCH — Reader V2 / V2A chamber (feature-flagged via ?reader=1)
   ============================================================= */

.wb-shell--reader-v2 {
  --wb-reader-amber: #de6f38;
  --wb-reader-amber-soft: #f0a060;
  --wb-reader-rust: #b85a28;
  --wb-reader-thin: #c44a28;
  --wb-reader-thin-glow: #e07050;
  --wb-reader-full: #9bae7e;
  --wb-reader-full-bone: #e8dcc8;
  --wb-reader-bone: #f2e8dc;
  --wb-reader-surface: #1a1410;
  --wb-reader-surface-deep: #12100d;
  --wb-reader-ember-edge: rgba(222, 160, 110, 0.14);
  --wb-reader-ember-soft: rgba(222, 111, 56, 0.18);
  --wb-reader-violet: rgba(100, 80, 160, 0.55);
  --wb-reader-violet-soft: rgba(100, 80, 150, 0.08);
  --wb-reader-chamber: #0a0706;
  --wb-reader-chamber-edge: rgba(100, 80, 150, 0.22);
  --wb-reader-label: rgba(210, 195, 175, 0.86);
  --wb-reader-label-quiet: rgba(175, 162, 148, 0.78);
}

.wb-shell--reader-v2 .wb-scroll-anchor,
.wb-reader-v2__panel,
.wb-reader-console,
.wb-reader-result,
.wb-reader-chamber,
.wb-reader-device {
  scroll-margin-top: calc(var(--header-offset) + var(--scroll-anchor-gap) + 0.65rem + env(safe-area-inset-top, 0px));
}

/* V2I.1 — single centered stack for mast + Reader body */
.wb-shell--reader-v2 .wb-reader-v2__flow {
  --wb-reader-flow-max: 48rem;
  max-width: var(--wb-reader-flow-max);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.wb-shell--reader-v2 .wb-reader-v2__flow .wb-reader-v2__eyebrow,
.wb-shell--reader-v2 .wb-reader-v2__flow .wb-reader-v2__headline,
.wb-shell--reader-v2 .wb-reader-v2__flow .wb-reader-v2__subcopy,
.wb-shell--reader-v2 .wb-reader-v2__flow .wb-reader-v2__context-links {
  max-width: none;
  width: 100%;
}

.wb-shell--reader-v2 .wb-reader-v2__trust {
  margin-top: 3rem;
}

.wb-shell--reader-v2 .wb-reader-v2__trust-rule {
  height: 1px;
  margin: 0 0 1rem;
  background: rgba(242, 232, 220, 0.12);
}

.wb-shell--reader-v2 .wb-reader-v2__trust-note {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: 0.03em;
  color: rgba(165, 152, 138, 0.88);
}

.wb-reader-v2__eyebrow {
  font-family: var(--font-mono);
  font-size: max(0.6875rem, var(--mono-min));
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(240, 143, 88, 0.78);
  margin: 0 0 0.65rem;
}

.wb-reader-v2__headline {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 5vw, 2.55rem);
  font-weight: 500;
  line-height: 1.12;
  margin: 0 0 0.75rem;
  color: var(--ink, #f2e8dc);
}

.wb-reader-v2__subcopy {
  font-family: var(--font-sans);
  font-size: 1.02rem;
  line-height: 1.58;
  color: rgba(200, 185, 165, 0.96);
  margin: 0 0 1.35rem;
}

.wb-reader-v2__chip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  margin-bottom: 1.1rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--wb-reader-ember-edge);
  border-left: 2px solid rgba(222, 111, 56, 0.42);
  border-radius: 5px;
  background: linear-gradient(135deg, rgba(24, 18, 14, 0.92) 0%, rgba(18, 14, 11, 0.9) 100%);
  font-family: var(--font-mono);
  font-size: max(0.625rem, var(--mono-min));
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(242, 228, 210, 0.94);
  box-shadow:
    inset 0 1px 0 rgba(252, 248, 236, 0.05),
    0 4px 18px rgba(0, 0, 0, 0.18);
}

.wb-reader-v2__chip-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #de6f38;
  box-shadow: 0 0 8px rgba(222, 111, 56, 0.55);
}

.wb-reader-v2__chip-sub {
  font-size: max(0.6rem, var(--mono-min));
  letter-spacing: 0.06em;
  text-transform: none;
  color: rgba(185, 170, 150, 0.9);
}

/* V2F stacked form — V2G surface / hierarchy polish */
.wb-reader-v2__stack {
  max-width: 100%;
  margin: 0;
  width: 100%;
}

.wb-reader-v2__mast {
  margin: 0 0 1.15rem;
  width: 100%;
}

.wb-reader-v2__mast .wb-reader-v2__chip {
  margin-bottom: 0.6rem;
}

.wb-reader-v2__mast .wb-reader-v2__promise {
  margin-bottom: 0;
  max-width: none;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(185, 170, 150, 0.9);
}

.wb-reader-v2__panel {
  padding: clamp(1.1rem, 2.2vw, 1.35rem) clamp(1.05rem, 2.4vw, 1.35rem) clamp(1.15rem, 2.4vw, 1.4rem);
  border: 1px solid var(--wb-reader-ember-edge);
  border-radius: 9px;
  background:
    radial-gradient(ellipse 95% 48% at 50% 0%, rgba(222, 111, 56, 0.04) 0%, transparent 58%),
    radial-gradient(ellipse 80% 60% at 100% 100%, var(--wb-reader-violet-soft) 0%, transparent 55%),
    linear-gradient(175deg, rgba(28, 22, 18, 0.97) 0%, rgba(20, 16, 13, 0.96) 48%, rgba(16, 13, 11, 0.98) 100%);
  box-shadow:
    inset 0 1px 0 rgba(252, 248, 236, 0.07),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 10px 36px rgba(0, 0, 0, 0.24),
    0 0 0 1px rgba(100, 80, 150, 0.04);
}

.wb-reader-v2__fields {
  display: grid;
  gap: 0.9rem;
  margin-top: 0.75rem;
}

.wb-reader-v2__field .wb-field-label {
  font-family: var(--font-mono);
  font-size: max(0.65rem, var(--mono-min));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wb-reader-label);
  margin-bottom: 0.4rem;
}

.wb-reader-v2__field .wb-prompt-well {
  margin: 0;
  padding: 0.7rem 0.8rem;
  border: 1px solid rgba(242, 232, 220, 0.1);
  border-radius: 6px;
  background: rgba(14, 11, 9, 0.72);
  box-shadow: inset 0 1px 0 rgba(252, 248, 236, 0.03);
  color: rgba(230, 218, 200, 0.94);
}

.wb-reader-v2__field .wb-input,
.wb-reader-v2__field textarea.wb-input {
  background: rgba(12, 10, 8, 0.88);
  border-color: rgba(180, 155, 130, 0.14);
  color: rgba(242, 232, 220, 0.96);
}

.wb-reader-v2__field .wb-input::placeholder,
.wb-reader-v2__field textarea.wb-input::placeholder {
  color: rgba(155, 142, 128, 0.62);
}

.wb-reader-v2__field .wb-input:focus-visible,
.wb-reader-v2__field textarea.wb-input:focus-visible {
  border-color: rgba(222, 111, 56, 0.5);
  box-shadow:
    0 0 0 1px rgba(222, 111, 56, 0.14),
    0 0 20px rgba(222, 111, 56, 0.06);
}

.wb-reader-v2__field--optional {
  opacity: 0.96;
}

.wb-reader-v2__field--optional .wb-field-label {
  color: var(--wb-reader-label-quiet);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: none;
}

.wb-reader-v2__field--answer {
  padding-top: 0.15rem;
}

.wb-reader-v2__field--answer .wb-field-label {
  color: rgba(230, 215, 195, 0.92);
}

.wb-reader-v2__field--answer textarea.wb-input {
  min-height: 10rem;
  background: rgba(10, 8, 7, 0.92);
  border-color: rgba(200, 170, 140, 0.16);
  line-height: 1.55;
}

.wb-reader-v2__status-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.95rem 0 0;
  padding: 0.55rem 0.7rem;
  border-top: 1px solid rgba(242, 232, 220, 0.07);
  border-radius: 0 0 4px 4px;
  background: linear-gradient(180deg, rgba(14, 11, 9, 0.35) 0%, rgba(10, 8, 7, 0.2) 100%);
}

.wb-reader-v2__status-dot {
  flex: 0 0 auto;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: rgba(155, 142, 128, 0.55);
}

.wb-reader-v2__status-wrap.is-ready .wb-reader-v2__status-dot {
  background: #de6f38;
  box-shadow: 0 0 8px rgba(222, 111, 56, 0.45);
}

.wb-reader-v2__status-wrap.is-inspecting .wb-reader-v2__status-dot {
  background: rgba(160, 145, 200, 0.9);
  box-shadow: 0 0 8px rgba(100, 80, 150, 0.35);
  animation: wb-reader-status-pulse 1.6s ease-in-out infinite;
}

.wb-reader-v2__status-wrap.is-result .wb-reader-v2__status-dot {
  background: rgba(155, 174, 126, 0.85);
  box-shadow: 0 0 6px rgba(155, 174, 126, 0.3);
}

.wb-reader-v2__status {
  margin: 0;
  font-family: var(--font-mono);
  font-size: max(0.6875rem, var(--mono-min));
  letter-spacing: 0.04em;
  color: rgba(175, 162, 148, 0.9);
}

.wb-reader-v2__status.is-ready {
  color: rgba(230, 190, 150, 0.95);
}

.wb-reader-v2__status.is-inspecting {
  color: rgba(195, 185, 220, 0.95);
}

.wb-reader-v2__status.is-result {
  color: rgba(175, 195, 150, 0.92);
}

@keyframes wb-reader-status-pulse {
  0%, 100% { opacity: 0.65; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}

.wb-reader-v2__follow {
  margin-top: 1rem;
  width: 100%;
}

.wb-reader-v2__follow .wb-reader-result {
  margin-bottom: 0.85rem;
}

.wb-reader-v2__follow--suggest {
  margin-top: 0.75rem;
}

.wb-shell--reader-v2 .wb-reader-v2__follow .wb-suggest-module {
  margin-top: 0;
  max-width: 100%;
  width: 100%;
  opacity: 0.72;
  margin-bottom: clamp(2.5rem, 5vh, 3.5rem);
}

.wb-shell--reader-v2 .wb-reader-v2__follow .wb-suggest-module.is-collapsed {
  padding-top: 0.65rem;
  border-top: 1px solid rgba(242, 232, 220, 0.07);
}

.wb-shell--reader-v2 .wb-reader-v2__follow .wb-suggest-module.is-collapsed .wb-flow-module--suggest {
  padding: 0.48rem 0.52rem 0.52rem;
  background: rgba(20, 16, 13, 0.55);
  border: 1px solid rgba(200, 175, 150, 0.08);
  border-radius: 6px;
}

.wb-shell--reader-v2 .wb-reader-v2__follow .wb-suggest-module__heading {
  font-size: 1.35rem;
  margin-bottom: 0.28rem;
}

.wb-shell--reader-v2 .wb-reader-v2__follow .wb-suggest-module.is-collapsed .wb-suggest-module__lead {
  font-size: 1rem;
  color: rgba(200, 185, 165, 0.88);
}

.wb-shell--reader-v2 .wb-reader-v2__follow .wb-suggest-module__eyebrow {
  font-size: max(0.625rem, var(--mono-min));
  color: rgba(200, 160, 120, 0.72);
}

.wb-shell--reader-v2 .wb-reader-v2__follow .wb-suggest-module__support {
  font-size: 0.88rem;
  color: rgba(165, 152, 138, 0.82);
}

/* Legacy console/device layout — preserved in CSS, not used in V2F primary flow */
.wb-reader-v2__system {
  --wb-console-max: 62rem;
  max-width: var(--wb-console-max);
  margin: 0 auto;
  width: 100%;
}

.wb-reader-v2__console {
  border: 1px solid rgba(100, 80, 150, 0.2);
  border-radius: 12px;
  padding: clamp(1rem, 2vw, 1.35rem) clamp(1rem, 2.2vw, 1.45rem);
  background:
    radial-gradient(ellipse 78% 58% at 18% 0%, rgba(100, 80, 150, 0.07) 0%, transparent 58%),
    radial-gradient(ellipse 68% 52% at 82% 100%, rgba(222, 111, 56, 0.05) 0%, transparent 52%),
    linear-gradient(165deg, rgba(12, 9, 8, 0.96) 0%, rgba(8, 6, 5, 0.98) 100%);
  box-shadow:
    inset 0 1px 0 rgba(252, 248, 236, 0.05),
    0 14px 42px rgba(0, 0, 0, 0.28);
}

.wb-reader-v2__modes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin-bottom: 1.15rem;
}

.wb-reader-v2__modes--inline {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.8rem;
}

.wb-reader-v2__modes--inline .wb-reader-v2__mode {
  flex: 1;
  padding: 0.62rem 0.72rem;
  text-align: center;
  border-color: rgba(200, 175, 150, 0.1);
  background: rgba(16, 13, 11, 0.55);
}

.wb-reader-v2__modes--inline .wb-reader-v2__mode:not(.is-active) {
  opacity: 0.82;
}

.wb-reader-v2__modes--inline .wb-reader-v2__mode:not(.is-active) .wb-reader-v2__mode-name {
  color: rgba(200, 185, 165, 0.82);
}

.wb-reader-v2__modes--inline .wb-reader-v2__mode.is-active {
  opacity: 1;
  border-color: rgba(222, 111, 56, 0.42);
  background: linear-gradient(165deg, rgba(32, 24, 18, 0.96) 0%, rgba(18, 14, 11, 0.94) 100%);
  box-shadow:
    inset 0 1px 0 rgba(252, 248, 236, 0.06),
    0 0 0 1px rgba(222, 111, 56, 0.08);
}

/* Paste Your Own — equal or slightly more prominent when active */
.wb-reader-v2__modes--inline .wb-reader-v2__mode:last-child.is-active {
  border-color: rgba(222, 111, 56, 0.52);
  box-shadow:
    inset 0 1px 0 rgba(252, 248, 236, 0.07),
    0 0 0 1px rgba(222, 111, 56, 0.12),
    0 4px 16px rgba(222, 111, 56, 0.06);
}

.wb-reader-v2__modes--inline .wb-reader-v2__mode-desc {
  display: none;
}

.wb-reader-v2__modes--inline .wb-reader-v2__mode-name {
  margin-bottom: 0;
  font-size: 0.92rem;
}

@media (min-width: 901px) {
  .wb-reader-v2__modes--inline .wb-reader-v2__mode {
    padding: 0.62rem 0.72rem;
    text-align: left;
  }

  .wb-reader-v2__modes--inline .wb-reader-v2__mode-desc {
    display: block;
    font-size: 0.72rem;
    line-height: 1.35;
    margin-top: 0.12rem;
    color: rgba(150, 138, 125, 0.88);
  }

  .wb-reader-v2__modes--inline .wb-reader-v2__mode-name {
    font-size: 0.96rem;
  }
}

.wb-reader-v2__mode {
  text-align: left;
  padding: 0.85rem 0.95rem;
  border: 1px solid rgba(242, 232, 220, 0.08);
  border-radius: 6px;
  background: rgba(10, 7, 6, 0.65);
  cursor: pointer;
  transition: border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}

.wb-reader-v2__mode.is-active {
  border-color: rgba(222, 111, 56, 0.55);
  background: linear-gradient(160deg, rgba(30, 22, 18, 0.95) 0%, rgba(12, 8, 7, 0.92) 100%);
  box-shadow:
    inset 0 1px 0 rgba(252, 248, 236, 0.05),
    0 0 24px rgba(100, 80, 150, 0.08),
    0 0 18px rgba(222, 111, 56, 0.06);
}

.wb-reader-v2__mode-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink, #f2e8dc);
  margin-bottom: 0.28rem;
}

.wb-reader-v2__mode-desc {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(160, 145, 132, 0.92);
}

.wb-reader-v2__stage {
  margin-bottom: 0.85rem;
}

/* V2E.1 — balanced columns inside product console */
.wb-reader-v2__tool {
  display: grid;
  grid-template-columns: minmax(0, 39%) minmax(0, 61%);
  gap: 1.35rem 1.65rem;
  align-items: start;
  margin-bottom: 0;
}

.wb-reader-v2__device-col {
  position: static;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.wb-reader-v2__device-label {
  margin: 0 0 0.4rem;
  font-family: var(--font-mono);
  font-size: max(0.5625rem, var(--mono-min));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(160, 145, 132, 0.72);
}

.wb-reader-v2__flow-col {
  min-width: 0;
}

.wb-reader-v2__case-strip {
  margin-bottom: 0.45rem;
}

.wb-case-selector--strip {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.32rem;
  overflow-x: auto;
  padding-bottom: 0.15rem;
  margin-bottom: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.wb-case-selector--strip .wb-case-card {
  flex: 0 0 7.25rem;
  min-height: 0;
  padding: 0.32rem 0.38rem;
  border: 1px solid rgba(200, 175, 150, 0.08);
  background: rgba(16, 13, 11, 0.42);
  opacity: 0.72;
  box-shadow: none;
}

.wb-case-selector--strip .wb-case-card .wb-specimen-plate__label {
  color: rgba(200, 170, 140, 0.65);
  font-size: max(0.52rem, var(--mono-min));
}

.wb-case-selector--strip .wb-case-card .wb-case-card__title {
  color: rgba(185, 170, 150, 0.78);
}

.wb-case-selector--strip .wb-case-card.is-active {
  opacity: 1;
  border-color: rgba(222, 111, 56, 0.32);
  background: rgba(24, 18, 14, 0.68);
  box-shadow: inset 0 1px 0 rgba(252, 248, 236, 0.04);
}

.wb-case-selector--strip .wb-case-card.is-active .wb-specimen-plate__label {
  color: rgba(230, 170, 120, 0.82);
}

.wb-case-selector--strip .wb-case-card.is-active .wb-case-card__title {
  color: rgba(242, 228, 210, 0.94);
}

.wb-case-selector--strip .wb-case-card__title {
  font-size: 0.74rem;
  line-height: 1.32;
}

.wb-reader-v2__promise {
  margin: 0 0 0.65rem;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  line-height: 1.45;
  color: rgba(170, 155, 138, 0.92);
  text-align: left;
  max-width: 42rem;
}

.wb-shell--reader-v2 .wb-case-selector {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.75rem, 1fr));
  gap: 0.45rem;
  margin-bottom: 0.65rem;
}

.wb-shell--reader-v2 .wb-case-card {
  padding: 0.48rem 0.55rem;
}

.wb-shell--reader-v2 .wb-case-card__title {
  font-size: 0.78rem;
  line-height: 1.35;
}

.wb-shell--reader-v2 .wb-specimen-plate__label {
  font-size: max(0.55rem, var(--mono-min));
  margin-bottom: 0.2rem;
}

.wb-shell--reader-v2 .wb-plate-note {
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
}

.wb-flow-module--input,
.wb-flow-module--readout {
  scroll-margin-top: calc(var(--header-offset) + var(--scroll-anchor-gap) + 0.85rem + env(safe-area-inset-top, 0px));
}

/* Reader Device — V2E.1 contained instrument inside console */
.wb-reader-device.wb-reader-chamber,
.wb-reader-chamber.wb-reader-device {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: none;
  height: clamp(13.75rem, 24vw, 17.5rem);
  min-height: 0;
  margin: 0;
  padding: clamp(0.5rem, 1.3vw, 0.7rem) clamp(0.55rem, 1.5vw, 0.8rem) clamp(0.4rem, 1.1vw, 0.6rem);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(100, 70, 50, 0.32);
  border-radius: 10px;
  background:
    radial-gradient(ellipse 62% 48% at 50% 32%, rgba(160, 50, 35, 0.11) 0%, transparent 56%),
    radial-gradient(ellipse 88% 72% at 50% 50%, rgba(70, 50, 110, 0.09) 0%, transparent 68%),
    linear-gradient(180deg, rgba(6, 4, 4, 0.98) 0%, rgba(10, 7, 6, 0.96) 42%, rgba(4, 3, 3, 0.99) 100%);
  box-shadow:
    inset 0 1px 0 rgba(252, 248, 236, 0.06),
    inset 0 0 52px rgba(0, 0, 0, 0.52),
    0 8px 26px rgba(0, 0, 0, 0.34);
  overflow: hidden;
}

.wb-reader-device.is-idle {
  opacity: 0.92;
}

.wb-reader-device.is-fallback {
  opacity: 0.78;
  border-color: rgba(100, 80, 150, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(252, 248, 236, 0.03),
    inset 0 0 40px rgba(0, 0, 0, 0.5),
    0 4px 16px rgba(0, 0, 0, 0.28);
}

.wb-reader-device.is-fallback.is-result .wb-reader-sigil__lens-glow,
.wb-reader-device.is-fallback.is-result .wb-reader-sigil__tip-node {
  opacity: 0.35 !important;
  animation: none !important;
}

/* Reader Chamber — V2D compact instrument (legacy alias) */
.wb-reader-chamber:not(.wb-reader-device) {
  position: relative;
  isolation: isolate;
  margin: 0 auto 0.75rem;
  padding: clamp(0.55rem, 1.5vw, 0.85rem) clamp(0.6rem, 1.8vw, 0.9rem) clamp(0.45rem, 1.2vw, 0.7rem);
  min-height: clamp(12rem, 22vw, 15rem);
  max-width: min(34rem, 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(100, 70, 50, 0.22);
  border-radius: 8px;
  background:
    radial-gradient(ellipse 62% 48% at 50% 32%, rgba(160, 50, 35, 0.12) 0%, transparent 56%),
    radial-gradient(ellipse 88% 72% at 50% 50%, rgba(70, 50, 110, 0.1) 0%, transparent 68%),
    linear-gradient(180deg, #080605 0%, #0a0706 42%, #040303 100%);
  box-shadow:
    inset 0 1px 0 rgba(252, 248, 236, 0.04),
    inset 0 0 70px rgba(0, 0, 0, 0.6),
    0 8px 28px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.wb-reader-chamber__corner {
  position: absolute;
  width: 18px;
  height: 18px;
  pointer-events: none;
  opacity: 0.5;
  z-index: 3;
}

.wb-reader-chamber__corner--tl { top: 0.45rem; left: 0.45rem; border-top: 1px solid rgba(222, 111, 56, 0.5); border-left: 1px solid rgba(222, 111, 56, 0.5); }
.wb-reader-chamber__corner--tr { top: 0.45rem; right: 0.45rem; border-top: 1px solid rgba(100, 80, 150, 0.45); border-right: 1px solid rgba(100, 80, 150, 0.45); }
.wb-reader-chamber__corner--bl { bottom: 0.45rem; left: 0.45rem; border-bottom: 1px solid rgba(100, 80, 150, 0.3); border-left: 1px solid rgba(100, 80, 150, 0.3); }
.wb-reader-chamber__corner--br { bottom: 0.45rem; right: 0.45rem; border-bottom: 1px solid rgba(222, 111, 56, 0.35); border-right: 1px solid rgba(222, 111, 56, 0.35); }

.wb-reader-chamber__outer-aura {
  position: absolute;
  inset: -8%;
  background: radial-gradient(ellipse 80% 70% at 50% 45%, rgba(60, 45, 100, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

.wb-reader-chamber__occult-halo {
  position: absolute;
  left: 50%;
  top: 34%;
  width: min(62%, 14rem);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle, rgba(180, 60, 40, 0.14) 0%, rgba(120, 40, 28, 0.05) 42%, transparent 68%);
  border: 1px solid rgba(180, 70, 45, 0.1);
  box-shadow: 0 0 36px rgba(160, 50, 35, 0.07);
  opacity: 0.5;
}

.wb-reader-chamber.is-ready .wb-reader-chamber__occult-halo,
.wb-reader-chamber.is-inspecting .wb-reader-chamber__occult-halo,
.wb-reader-chamber.is-result .wb-reader-chamber__occult-halo {
  opacity: 0.85;
}

.wb-reader-chamber__veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 44% at 50% 42%, transparent 0%, rgba(0, 0, 0, 0.42) 100%);
  pointer-events: none;
}

.wb-reader-chamber__glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(52px);
}

.wb-reader-chamber__glow--violet {
  width: 75%;
  height: 58%;
  top: 4%;
  left: 12%;
  background: rgba(80, 60, 130, 0.16);
}

.wb-reader-chamber__glow--amber {
  width: 52%;
  height: 44%;
  top: 28%;
  left: 24%;
  background: rgba(200, 80, 40, 0.12);
}

.wb-reader-chamber__scanlines {
  position: absolute;
  inset: 0;
  opacity: 0.28;
  pointer-events: none;
  background: repeating-linear-gradient(
    180deg,
    transparent 0px,
    transparent 2px,
    rgba(0, 0, 0, 0.14) 2px,
    rgba(0, 0, 0, 0.14) 3px
  );
  mix-blend-mode: multiply;
}

.wb-reader-chamber__embers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.wb-reader-chamber__ember {
  position: absolute;
  left: var(--ex);
  top: var(--ey);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(222, 111, 56, 0.55);
  box-shadow: 0 0 6px rgba(222, 111, 56, 0.45);
  opacity: 0.35;
  animation: wb-chamber-ember-drift 4.8s ease-in-out infinite;
  animation-delay: var(--ed);
}

.wb-reader-chamber.is-inspecting .wb-reader-chamber__ember {
  opacity: 0.55;
}

.wb-reader-chamber__floor {
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 0;
  height: 22%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(222, 111, 56, 0.025) 100%);
  mask-image: linear-gradient(180deg, transparent 0%, black 80%);
}

.wb-reader-chamber__radial-sweep {
  position: absolute;
  left: 50%;
  top: 32%;
  width: min(70%, 16rem);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(222, 111, 56, 0.14) 24deg, transparent 48deg);
  mask-image: radial-gradient(circle, transparent 42%, black 48%, black 58%, transparent 64%);
}

.wb-reader-chamber.is-inspecting .wb-reader-chamber__radial-sweep {
  opacity: 1;
  animation: wb-chamber-radial-sweep 2.4s linear infinite;
}

.wb-reader-chamber__frame {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: min(22rem, 92vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}

.wb-reader-chamber.is-ready .wb-reader-chamber__glow--amber {
  background: rgba(222, 111, 56, 0.2);
}

.wb-reader-chamber.is-inspecting .wb-reader-chamber__glow--amber {
  animation: wb-chamber-amber-breathe 3.2s ease-in-out infinite;
}

.wb-reader-chamber.is-inspecting .wb-reader-chamber__glow--violet {
  animation: wb-chamber-violet-breathe 4.8s ease-in-out infinite alternate;
}

.wb-reader-chamber.is-inspecting .wb-reader-chamber__occult-halo {
  animation: wb-chamber-halo-scan 6.5s linear infinite;
}

.wb-reader-chamber.is-result.is-full {
  border-color: rgba(155, 174, 126, 0.38);
  box-shadow: inset 0 0 70px rgba(155, 174, 126, 0.08), 0 10px 40px rgba(0, 0, 0, 0.45);
}

.wb-reader-chamber.is-result.is-partial {
  border-color: rgba(222, 111, 56, 0.42);
  box-shadow: inset 0 0 70px rgba(222, 111, 56, 0.1), 0 10px 40px rgba(0, 0, 0, 0.45);
}

.wb-reader-chamber.is-result.is-thin {
  border-color: rgba(196, 74, 40, 0.48);
  box-shadow: inset 0 0 70px rgba(196, 74, 40, 0.12), 0 10px 40px rgba(0, 0, 0, 0.45);
}

@keyframes wb-chamber-radial-sweep {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes wb-chamber-amber-breathe {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

@keyframes wb-chamber-violet-breathe {
  0% { opacity: 0.55; }
  100% { opacity: 0.95; }
}

@keyframes wb-chamber-halo-scan {
  0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  50% { transform: translate(-50%, -50%) rotate(180deg) scale(1.03); }
  100% { transform: translate(-50%, -50%) rotate(360deg) scale(1); }
}

@keyframes wb-chamber-ember-drift {
  0%, 100% { transform: translateY(0); opacity: 0.25; }
  50% { transform: translateY(-6px); opacity: 0.55; }
}

.wb-reader-device .wb-reader-chamber__frame,
.wb-reader-chamber.wb-reader-device .wb-reader-chamber__frame {
  max-width: 100%;
}

.wb-reader-device .wb-reader-sigil__frame {
  width: min(11rem, 92%);
  aspect-ratio: 220 / 175;
}

.wb-reader-device .wb-reader-sigil__status {
  font-size: max(0.5625rem, var(--mono-min));
  letter-spacing: 0.08em;
}

.wb-reader-device .wb-reader-sigil__sub {
  display: none;
}

.wb-reader-device.is-inspecting .wb-reader-sigil__sub {
  display: block;
  font-size: 0.68rem;
  max-width: 14rem;
  margin-top: -0.1rem;
}

.wb-reader-device .wb-reader-diagnostic {
  max-width: 13.5rem;
}

.wb-reader-device .wb-reader-diagnostic__needle {
  width: 4.75rem;
}

/* Offering — coherent input panel inside console */
.wb-reader-v2__offering {
  position: relative;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.wb-reader-v2__flow-col .wb-reader-v2__offering::before,
.wb-reader-v2__offering::before {
  display: none;
}

.wb-reader-v2__offering-label {
  margin: 0 0 0.75rem;
  font-family: var(--font-mono);
  font-size: max(0.6rem, var(--mono-min));
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(150, 138, 125, 0.72);
  text-align: left;
}

.wb-shell--reader-v2 .wb-reader-v2__offering .wb-input-bay {
  margin-top: 0.55rem;
  padding: 0.65rem 0.7rem 0.75rem;
  background: rgba(4, 3, 3, 0.42);
  border: 1px solid rgba(242, 232, 220, 0.06);
  border-radius: 6px;
  box-shadow: none;
}

.wb-shell--reader-v2 .wb-reader-v2__offering .wb-input-bay--quiet {
  margin-top: 0.45rem;
  padding: 0;
  background: transparent;
  border: none;
}

.wb-shell--reader-v2 .wb-reader-v2__offering .wb-input-bay--quiet .wb-input-bay__tag {
  font-size: max(0.6rem, var(--mono-min));
  letter-spacing: 0.1em;
  color: rgba(155, 142, 128, 0.78);
  border-bottom: none;
  padding-bottom: 0.15rem;
  margin-bottom: 0.22rem;
}

.wb-shell--reader-v2 .wb-reader-v2__offering .wb-input-bay--quiet .wb-prompt-well {
  border-color: rgba(242, 232, 220, 0.08);
  background: rgba(6, 4, 4, 0.55);
  box-shadow: none;
}

.wb-shell--reader-v2 .wb-reader-v2__offering .wb-input-bay--optional {
  margin-top: 0.4rem;
  opacity: 0.94;
}

.wb-shell--reader-v2 .wb-reader-v2__offering .wb-input-bay--optional .wb-field-label {
  color: rgba(155, 142, 128, 0.8);
  font-size: 0.78rem;
}

.wb-shell--reader-v2 .wb-reader-v2__offering .wb-input-bay--answer {
  margin-top: 0.55rem;
}

.wb-shell--reader-v2 .wb-reader-v2__offering .wb-input,
.wb-shell--reader-v2 .wb-reader-v2__offering textarea.wb-input {
  background: rgba(4, 3, 3, 0.88);
  border-color: rgba(100, 80, 150, 0.18);
}

.wb-shell--reader-v2 .wb-reader-v2__offering .wb-input:focus-visible,
.wb-shell--reader-v2 .wb-reader-v2__offering textarea.wb-input:focus-visible {
  border-color: rgba(222, 111, 56, 0.45);
  box-shadow: 0 0 0 1px rgba(222, 111, 56, 0.12);
}

.wb-reader-v2__cta-row {
  margin-top: 0.75rem;
  justify-content: flex-start;
}

.wb-shell--reader-v2 .wb-reader-v2__panel .wb-reader-cta.wb-btn--primary {
  min-width: min(100%, 15rem);
}

.wb-shell--reader-v2 .wb-reader-cta.wb-btn--primary {
  min-width: min(100%, 16rem);
  padding: 0.72rem 1.35rem;
  border: 1px solid rgba(180, 150, 120, 0.16);
  background: rgba(22, 18, 15, 0.88);
  color: rgba(175, 160, 145, 0.62);
  letter-spacing: 0.05em;
  font-weight: 500;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.wb-shell--reader-v2 .wb-reader-cta.wb-btn--primary:disabled {
  cursor: not-allowed;
  opacity: 1;
}

.wb-shell--reader-v2 .wb-reader-cta.wb-btn--primary.is-armed {
  color: #fff8f0;
  border-color: rgba(222, 111, 56, 0.82);
  background: linear-gradient(180deg, rgba(222, 111, 56, 0.52) 0%, rgba(196, 88, 42, 0.38) 42%, rgba(32, 22, 16, 0.98) 100%);
  box-shadow:
    0 0 28px rgba(222, 111, 56, 0.22),
    0 2px 8px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 248, 236, 0.16);
}

.wb-shell--reader-v2 .wb-reader-cta.wb-btn--primary.is-armed:not(:disabled):hover {
  border-color: rgba(222, 111, 56, 0.92);
  background: linear-gradient(180deg, rgba(222, 111, 56, 0.58) 0%, rgba(210, 95, 48, 0.42) 42%, rgba(36, 24, 18, 0.98) 100%);
}

.wb-shell--reader-v2 .wb-reader-cta.wb-btn--primary.is-inspecting {
  border-color: rgba(130, 110, 170, 0.42);
  color: rgba(215, 205, 235, 0.94);
  background: linear-gradient(180deg, rgba(80, 65, 110, 0.22) 0%, rgba(24, 20, 28, 0.94) 100%);
  box-shadow: 0 0 20px rgba(100, 80, 150, 0.12);
}

/* Sigil — V2D compact mantis geometry + layered wake */
@keyframes wb-reader-halo-pulse {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.92; transform: translate(-50%, -50%) scale(1.04); }
}
@keyframes wb-reader-halo-scan {
  0% { transform: translate(-50%, -50%) rotate(0deg); opacity: 0.6; }
  50% { transform: translate(-50%, -50%) rotate(180deg); opacity: 0.95; }
  100% { transform: translate(-50%, -50%) rotate(360deg); opacity: 0.6; }
}
@keyframes wb-reader-tip-pulse {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.12); }
}
@keyframes wb-reader-lens-breathe {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.38; }
}
@keyframes wb-reader-lens-glow {
  0%, 100% { opacity: 0.62; filter: blur(0); }
  50% { opacity: 0.88; filter: blur(0.5px); }
}
@keyframes wb-reader-tip-spark {
  0%, 100% { opacity: 0; transform: scale(0.6); }
  40% { opacity: 0.85; transform: scale(1); }
  70% { opacity: 0.2; transform: scale(0.8); }
}

.wb-reader-sigil {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  margin: 0 auto;
  width: 100%;
}

.wb-reader-sigil__frame {
  position: relative;
  width: min(11.5rem, 62vw);
  margin: 0 auto;
  aspect-ratio: 220 / 185;
}

.wb-reader-sigil__halo-disc {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 72%;
  height: 58%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(200, 70, 45, 0.2) 0%, rgba(100, 50, 120, 0.08) 48%, transparent 74%);
  opacity: 0.38;
}

.wb-reader-sigil__occult-ring {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 66%;
  height: 52%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  border: 1px solid rgba(180, 70, 45, 0.12);
  background: repeating-conic-gradient(
    from 0deg,
    rgba(200, 90, 50, 0.06) 0deg 10deg,
    transparent 10deg 20deg
  );
  mask-image: radial-gradient(circle, transparent 52%, black 56%, black 66%, transparent 70%);
  opacity: 0.42;
}

.wb-reader-sigil__float {
  position: relative;
  z-index: 2;
  width: 88%;
  height: 92%;
  margin: 0 auto;
  -webkit-mask-image: radial-gradient(ellipse 74% 78% at 50% 42%, #000 36%, transparent 76%);
  mask-image: radial-gradient(ellipse 74% 78% at 50% 42%, #000 36%, transparent 76%);
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.5));
}

.wb-reader-sigil__glyph {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.wb-reader-sigil__stroke {
  fill: none;
  stroke: rgba(236, 220, 198, 0.84);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: stroke 0.5s ease;
}

.wb-reader-sigil__antenna {
  stroke-width: 1.35;
}

.wb-reader-sigil__joint {
  fill: rgba(242, 228, 210, 0.35);
  stroke: rgba(242, 228, 210, 0.75);
  stroke-width: 0.9;
}

.wb-reader-sigil__lens-glow {
  fill: url(#wb-sigil-lens-glow);
  opacity: 0;
  mix-blend-mode: screen;
  transition: opacity 0.65s ease;
}

.wb-reader-sigil__lens-lid {
  fill: #0a0706;
  opacity: 0.94;
  transition: opacity 0.65s ease;
}

.wb-reader-sigil__lens-ring {
  fill: none;
  stroke: rgba(236, 220, 198, 0.88);
  stroke-width: 1.1;
}

.wb-reader-sigil__lens-glint {
  fill: none;
  stroke: rgba(255, 245, 225, 0.75);
  stroke-width: 0.85;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity 0.55s ease;
}

.wb-reader-sigil__tip-halo {
  fill: url(#wb-sigil-tip-glow);
  opacity: 0.08;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.wb-reader-sigil__tip-node {
  fill: rgba(255, 200, 140, 0.9);
  opacity: 0.12;
  transition: opacity 0.5s ease;
}

.wb-reader-sigil__tip-spark {
  fill: rgba(255, 220, 170, 0.95);
  opacity: 0;
}

.wb-reader-sigil__reflection {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 6%;
  height: 16%;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, rgba(222, 111, 56, 0.06) 0%, transparent 72%);
  transform: scaleY(-0.4);
  opacity: 0.28;
  filter: blur(5px);
}

/* Idle — dormant lenses, dim tips */
.wb-reader-sigil.is-idle .wb-reader-sigil__stroke {
  stroke: rgba(200, 175, 150, 0.62);
}

.wb-reader-sigil.is-idle .wb-reader-sigil__lens-lid { opacity: 0.96; }
.wb-reader-sigil.is-idle .wb-reader-sigil__lens-glow { opacity: 0; }
.wb-reader-sigil.is-idle .wb-reader-sigil__tip-node { opacity: 0.14; }
.wb-reader-sigil.is-idle .wb-reader-sigil__tip-halo { opacity: 0.1; }

.wb-reader-sigil.is-ready .wb-reader-sigil__antenna {
  stroke: rgba(240, 210, 175, 0.9);
  stroke-width: 1.45;
}

.wb-reader-sigil.is-ready .wb-reader-sigil__stroke {
  stroke: rgba(230, 210, 185, 0.82);
}

.wb-reader-sigil.is-ready .wb-reader-sigil__halo-disc {
  animation: wb-reader-halo-pulse 3.8s ease-in-out infinite;
}

.wb-reader-sigil.is-ready .wb-reader-sigil__lens-lid { opacity: 0.52; }
.wb-reader-sigil.is-ready .wb-reader-sigil__lens-glow {
  opacity: 0.24;
  animation: wb-reader-lens-breathe 3.6s ease-in-out infinite;
}
.wb-reader-sigil.is-ready .wb-reader-sigil__lens-glint { opacity: 0.18; }

.wb-reader-sigil.is-ready .wb-reader-sigil__tip-node {
  opacity: 0.72;
  animation: wb-reader-tip-pulse 2.8s ease-in-out infinite;
}
.wb-reader-sigil.is-ready .wb-reader-sigil__tip-halo { opacity: 0.48; }

/* Inspecting — eyes open, tips flare, scan ring */
.wb-reader-sigil.is-inspecting .wb-reader-sigil__stroke {
  stroke: rgba(242, 228, 210, 0.92);
}

.wb-reader-sigil.is-inspecting .wb-reader-sigil__antenna {
  stroke: rgba(255, 230, 200, 0.95);
  stroke-width: 1.55;
}

.wb-reader-sigil.is-inspecting .wb-reader-sigil__halo-disc {
  animation: wb-reader-halo-scan 5.5s linear infinite;
}

.wb-reader-sigil.is-inspecting .wb-reader-sigil__occult-ring {
  animation: wb-reader-halo-scan 8s linear infinite reverse;
  opacity: 0.72;
}

.wb-reader-sigil.is-inspecting .wb-reader-sigil__lens-lid { opacity: 0.06; }
.wb-reader-sigil.is-inspecting .wb-reader-sigil__lens-glow {
  opacity: 0.68;
  animation: wb-reader-lens-glow 2s ease-in-out infinite;
}
.wb-reader-sigil.is-inspecting .wb-reader-sigil__lens-glint { opacity: 0.42; }

.wb-reader-sigil.is-inspecting .wb-reader-sigil__tip-node {
  opacity: 1;
  animation: wb-reader-tip-pulse 1.6s ease-in-out infinite;
}
.wb-reader-sigil.is-inspecting .wb-reader-sigil__tip-halo { opacity: 0.88; }
.wb-reader-sigil.is-inspecting .wb-reader-sigil__tip-spark {
  animation: wb-reader-tip-spark 2.2s ease-in-out infinite;
}

/* Result — state-locked lens glow */
.wb-reader-sigil.is-result .wb-reader-sigil__lens-lid { opacity: 0.04; }
.wb-reader-sigil.is-result .wb-reader-sigil__lens-glow { opacity: 0.7; }
.wb-reader-sigil.is-result .wb-reader-sigil__lens-glint { opacity: 0.32; }
.wb-reader-sigil.is-result .wb-reader-sigil__tip-node { opacity: 0.82; }
.wb-reader-sigil.is-result .wb-reader-sigil__tip-halo { opacity: 0.62; }

.wb-reader-sigil.is-result.is-full .wb-reader-sigil__lens-glow {
  fill: rgba(210, 228, 190, 0.82);
  opacity: 0.76;
}
.wb-reader-sigil.is-result.is-full .wb-reader-sigil__tip-node {
  fill: rgba(200, 220, 175, 0.92);
}
.wb-reader-sigil.is-result.is-full .wb-reader-sigil__halo-disc {
  background: radial-gradient(circle, rgba(155, 174, 126, 0.24) 0%, rgba(80, 100, 70, 0.1) 50%, transparent 72%);
  opacity: 0.78;
}

.wb-reader-sigil.is-result.is-partial .wb-reader-sigil__lens-glow {
  fill: rgba(255, 210, 160, 0.8);
  opacity: 0.74;
}
.wb-reader-sigil.is-result.is-partial .wb-reader-sigil__tip-node { opacity: 0.92; }

.wb-reader-sigil.is-result.is-thin .wb-reader-sigil__lens-glow {
  fill: rgba(230, 120, 80, 0.82);
  opacity: 0.78;
}
.wb-reader-sigil.is-result.is-thin .wb-reader-sigil__tip-node {
  fill: rgba(255, 150, 110, 0.95);
  opacity: 0.95;
}
.wb-reader-sigil.is-result.is-thin .wb-reader-sigil__halo-disc {
  background: radial-gradient(circle, rgba(196, 74, 40, 0.26) 0%, rgba(100, 30, 20, 0.1) 50%, transparent 72%);
}

.wb-reader-sigil.is-reduced .wb-reader-sigil__halo-disc,
.wb-reader-sigil.is-reduced .wb-reader-sigil__occult-ring,
.wb-reader-sigil.is-reduced .wb-reader-sigil__lens-glow,
.wb-reader-sigil.is-reduced .wb-reader-sigil__tip-node,
.wb-reader-sigil.is-reduced .wb-reader-sigil__tip-halo,
.wb-reader-sigil.is-reduced .wb-reader-sigil__tip-spark,
.wb-reader-chamber.is-reduced .wb-reader-chamber__glow,
.wb-reader-chamber.is-reduced .wb-reader-chamber__occult-halo,
.wb-reader-chamber.is-reduced .wb-reader-chamber__ember,
.wb-reader-chamber.is-reduced .wb-reader-chamber__radial-sweep,
.wb-reader-diagnostic.is-reduced .wb-reader-diagnostic__bar-fill,
.wb-reader-diagnostic.is-reduced .wb-reader-diagnostic__needle-arm {
  animation: none !important;
}

.wb-reader-sigil.is-reduced.is-ready .wb-reader-sigil__lens-lid { opacity: 0.5; }
.wb-reader-sigil.is-reduced.is-ready .wb-reader-sigil__lens-glow { opacity: 0.26; }
.wb-reader-sigil.is-reduced.is-inspecting .wb-reader-sigil__lens-lid,
.wb-reader-sigil.is-reduced.is-result .wb-reader-sigil__lens-lid { opacity: 0.06; }
.wb-reader-sigil.is-reduced.is-inspecting .wb-reader-sigil__lens-glow,
.wb-reader-sigil.is-reduced.is-result .wb-reader-sigil__lens-glow { opacity: 0.72; }
.wb-reader-sigil.is-reduced.is-ready .wb-reader-sigil__tip-node,
.wb-reader-sigil.is-reduced.is-inspecting .wb-reader-sigil__tip-node,
.wb-reader-sigil.is-reduced.is-result .wb-reader-sigil__tip-node { opacity: 0.8; }

.wb-reader-sigil__status {
  margin: 0;
  font-family: var(--font-mono);
  font-size: max(0.625rem, var(--mono-min));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(200, 185, 165, 0.95);
}

.wb-reader-sigil__sub {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  line-height: 1.42;
  text-align: center;
  color: rgba(140, 124, 107, 0.92);
  max-width: 20rem;
}

/* Reader diagnostic strip — V2D inspection motion */
@keyframes wb-reader-diag-bar {
  0%, 100% { transform: scaleX(0.18); opacity: 0.35; }
  50% { transform: scaleX(0.92); opacity: 0.95; }
}
@keyframes wb-reader-diag-needle {
  0%, 100% { transform: rotate(-52deg); }
  33% { transform: rotate(8deg); }
  66% { transform: rotate(-18deg); }
}
@keyframes wb-reader-diag-scanline {
  0% { top: 8%; opacity: 0; }
  12% { opacity: 0.55; }
  88% { opacity: 0.55; }
  100% { top: 72%; opacity: 0; }
}
@keyframes wb-reader-diag-halo-tick {
  0%, 100% { opacity: 0.15; transform: scale(0.8); }
  50% { opacity: 0.85; transform: scale(1.1); }
}
@keyframes wb-reader-diag-sweep {
  0% { transform: translateX(-120%); opacity: 0; }
  20% { opacity: 0.7; }
  100% { transform: translateX(120%); opacity: 0; }
}
@keyframes wb-reader-result-lock {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.wb-reader-diagnostic {
  position: relative;
  width: 100%;
  max-width: 16rem;
  margin: -0.15rem auto 0;
  padding-top: 0.15rem;
  opacity: 0.42;
  transition: opacity 0.45s ease;
}

.wb-reader-diagnostic.is-idle {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.wb-reader-diagnostic.is-ready,
.wb-reader-diagnostic.is-inspecting,
.wb-reader-diagnostic.is-result {
  max-height: 4.5rem;
  opacity: 1;
}

.wb-reader-diagnostic__scan-sweep {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
}

.wb-reader-diagnostic__scan-sweep::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(222, 111, 56, 0.12), transparent);
}

.wb-reader-diagnostic.is-inspecting .wb-reader-diagnostic__scan-sweep {
  opacity: 1;
}

.wb-reader-diagnostic.is-inspecting .wb-reader-diagnostic__scan-sweep::after {
  animation: wb-reader-diag-sweep 2.8s ease-in-out infinite;
}

.wb-reader-diagnostic__scanline {
  position: absolute;
  left: 6%;
  right: 6%;
  height: 1px;
  top: 8%;
  background: rgba(222, 111, 56, 0.45);
  box-shadow: 0 0 6px rgba(222, 111, 56, 0.35);
  opacity: 0;
  pointer-events: none;
}

.wb-reader-diagnostic.is-inspecting .wb-reader-diagnostic__scanline {
  animation: wb-reader-diag-scanline 2.2s ease-in-out infinite;
}

.wb-reader-diagnostic__halo-ticks {
  position: absolute;
  left: 50%;
  top: -0.35rem;
  width: 5.5rem;
  height: 0.5rem;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.wb-reader-diagnostic__halo-tick {
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(222, 111, 56, 0.5);
  opacity: 0.15;
}

.wb-reader-diagnostic.is-inspecting .wb-reader-diagnostic__halo-tick {
  animation: wb-reader-diag-halo-tick 1.4s ease-in-out infinite;
  animation-delay: var(--ti);
}

.wb-reader-diagnostic__channels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.35rem;
  margin-bottom: 0.2rem;
}

.wb-reader-diagnostic__label {
  display: block;
  font-family: var(--font-mono);
  font-size: max(0.5rem, var(--mono-min));
  letter-spacing: 0.08em;
  color: rgba(160, 145, 132, 0.82);
  margin-bottom: 0.18rem;
}

.wb-reader-diagnostic__bar {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: rgba(242, 232, 220, 0.06);
  overflow: hidden;
}

.wb-reader-diagnostic__bar-fill {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(0.12);
  background: rgba(222, 111, 56, 0.45);
  border-radius: 2px;
}

.wb-reader-diagnostic.is-ready .wb-reader-diagnostic__bar-fill {
  transform: scaleX(0.28);
  opacity: 0.55;
}

.wb-reader-diagnostic.is-inspecting .wb-reader-diagnostic__bar-fill {
  animation: wb-reader-diag-bar 1.8s ease-in-out infinite;
  animation-delay: calc(var(--ci) * 0.22s);
}

.wb-reader-diagnostic__needle {
  display: block;
  width: 5.5rem;
  height: auto;
  margin: 0 auto;
  opacity: 0.55;
}

.wb-reader-diagnostic__needle-arm {
  transform-origin: 60px 28px;
  transform-box: fill-box;
  transform: rotate(-38deg);
}

.wb-reader-diagnostic.is-ready .wb-reader-diagnostic__needle-arm {
  transform: rotate(-22deg);
}

.wb-reader-diagnostic.is-inspecting .wb-reader-diagnostic__needle-arm {
  animation: wb-reader-diag-needle 2.4s ease-in-out infinite;
}

.wb-reader-diagnostic.is-result .wb-reader-diagnostic__needle-arm {
  animation: none;
  transition: transform 0.65s ease;
}

.wb-reader-diagnostic.is-result.is-full .wb-reader-diagnostic__bar-fill {
  transform: scaleX(0.88);
  background: rgba(155, 174, 126, 0.72);
  animation: none;
}
.wb-reader-diagnostic.is-result.is-full .wb-reader-diagnostic__needle-arm {
  transform: rotate(28deg);
}

.wb-reader-diagnostic.is-result.is-partial .wb-reader-diagnostic__bar-fill {
  transform: scaleX(0.58);
  background: rgba(222, 111, 56, 0.68);
  animation: none;
}
.wb-reader-diagnostic.is-result.is-partial .wb-reader-diagnostic__needle-arm {
  transform: rotate(-4deg);
}

.wb-reader-diagnostic.is-result.is-thin .wb-reader-diagnostic__bar-fill {
  transform: scaleX(0.32);
  background: rgba(196, 74, 40, 0.72);
  animation: none;
}
.wb-reader-diagnostic.is-result.is-thin .wb-reader-diagnostic__needle-arm {
  transform: rotate(-42deg);
}

.wb-reader-diagnostic.is-fallback {
  opacity: 0.35;
}

.wb-reader-diagnostic.is-fallback .wb-reader-diagnostic__bar-fill {
  transform: scaleX(0.15);
  animation: none;
}

.wb-reader-diagnostic.is-reduced .wb-reader-diagnostic__bar-fill,
.wb-reader-diagnostic.is-reduced .wb-reader-diagnostic__needle-arm,
.wb-reader-diagnostic.is-reduced .wb-reader-diagnostic__scanline,
.wb-reader-diagnostic.is-reduced .wb-reader-diagnostic__halo-tick,
.wb-reader-diagnostic.is-reduced .wb-reader-diagnostic__scan-sweep::after,
.wb-reader-chamber.is-reduced .wb-reader-chamber__radial-sweep {
  animation: none !important;
}

/* Result — primary product artifact (V2F/V2G) */
.wb-reader-result {
  margin: 0 0 1.35rem;
  padding: 1.2rem 1.1rem 1.3rem;
  border: 1px solid rgba(200, 175, 150, 0.12);
  border-radius: 9px;
  background:
    radial-gradient(ellipse 90% 50% at 50% 0%, rgba(222, 111, 56, 0.03) 0%, transparent 55%),
    linear-gradient(180deg, rgba(24, 19, 15, 0.97) 0%, rgba(16, 13, 11, 0.98) 100%);
  box-shadow:
    inset 0 1px 0 rgba(252, 248, 236, 0.06),
    0 10px 32px rgba(0, 0, 0, 0.28);
}

.wb-reader-result.is-agent {
  padding: 1.55rem 1.35rem 1.65rem;
  margin-top: 0.25rem;
  border-color: rgba(200, 175, 150, 0.2);
  background:
    radial-gradient(ellipse 90% 48% at 50% 0%, rgba(222, 111, 56, 0.08) 0%, transparent 54%),
    radial-gradient(ellipse 70% 50% at 100% 100%, var(--wb-reader-violet-soft) 0%, transparent 50%),
    linear-gradient(180deg, rgba(30, 24, 19, 0.99) 0%, rgba(18, 14, 12, 0.99) 100%);
  box-shadow:
    inset 0 1px 0 rgba(252, 248, 236, 0.1),
    0 18px 48px rgba(0, 0, 0, 0.36),
    0 0 0 1px rgba(100, 80, 150, 0.06);
}

.wb-reader-result.is-agent.is-full {
  border-color: rgba(155, 174, 126, 0.32);
  box-shadow:
    inset 0 1px 0 rgba(252, 248, 236, 0.06),
    0 12px 36px rgba(0, 0, 0, 0.38),
    0 0 40px rgba(155, 174, 126, 0.08);
}

.wb-reader-result.is-agent.is-partial {
  border-color: rgba(222, 111, 56, 0.36);
  box-shadow:
    inset 0 1px 0 rgba(252, 248, 236, 0.06),
    0 12px 36px rgba(0, 0, 0, 0.38),
    0 0 40px rgba(222, 111, 56, 0.08);
}

.wb-reader-result.is-agent.is-thin {
  border-color: rgba(196, 74, 40, 0.38);
}

.wb-reader-result.is-agent .wb-reader-result__section--read {
  border-top: none;
  padding-top: 0;
}

.wb-reader-result.is-agent .wb-reader-result__read-body {
  font-size: 1.1rem;
  line-height: 1.66;
}

.wb-reader-result.is-agent .wb-reader-result__section--read .wb-reader-result__read-body p:first-child {
  font-size: clamp(1.22rem, 2.4vw, 1.36rem);
  line-height: 1.58;
  color: rgba(252, 244, 232, 0.99);
  font-weight: 500;
}

.wb-reader-result.is-agent .wb-reader-result__section-title {
  color: rgba(200, 185, 165, 0.88);
  font-size: max(0.65rem, var(--mono-min));
  letter-spacing: 0.12em;
}

.wb-reader-result.is-agent .wb-reader-result__section--read .wb-reader-result__section-title {
  color: rgba(220, 175, 130, 0.85);
}

.wb-reader-result.is-agent .wb-reader-result__list {
  color: rgba(235, 222, 205, 0.94);
  line-height: 1.58;
  font-size: 0.98rem;
}

.wb-reader-result.is-agent .wb-reader-result__shaped {
  color: rgba(215, 200, 225, 0.92);
  border-left: 2px solid rgba(130, 110, 170, 0.42);
  padding: 0.15rem 0 0.15rem 0.85rem;
  font-size: 0.98rem;
  line-height: 1.6;
}

.wb-reader-result__read-body {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 1.02rem;
  line-height: 1.62;
  color: rgba(230, 218, 200, 0.95);
}

.wb-reader-result__read-body p {
  margin: 0 0 0.85rem;
}

.wb-reader-result__read-body p:last-child {
  margin-bottom: 0;
}

.wb-reader-result.is-full { border-color: rgba(155, 174, 126, 0.28); }
.wb-reader-result.is-partial { border-color: rgba(222, 111, 56, 0.32); }
.wb-reader-result.is-thin { border-color: rgba(196, 74, 40, 0.35); }

.wb-reader-result__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem 0.85rem;
  margin-bottom: 0.65rem;
  text-align: left;
}

.wb-reader-result__head-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.75rem;
  min-width: 0;
}

.wb-reader-result__status {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.42rem;
  width: 100%;
  max-width: 36rem;
}

.wb-reader-result__badge-gloss {
  margin: 0;
  max-width: 34ch;
  font-family: var(--font-sans);
  font-size: max(0.875rem, 14px);
  line-height: 1.5;
  color: rgba(200, 185, 165, 0.82);
}

.wb-reader-result.is-agent .wb-reader-result__head {
  margin-bottom: 0.55rem;
  padding-bottom: 0;
  border-bottom: none;
}

.wb-reader-result__title--sub {
  margin: 0 0 0.35rem;
  font-size: max(0.6875rem, var(--mono-min));
  letter-spacing: 0.18em;
  color: rgba(200, 180, 155, 0.72);
}

.wb-reader-result__title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: max(0.8125rem, var(--mono-min));
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(230, 175, 130, 0.92);
}

.wb-reader-result.is-agent .wb-reader-result__title {
  color: rgba(240, 180, 130, 0.95);
  letter-spacing: 0.22em;
}

.wb-reader-result__fallback {
  margin: 0 0 0.85rem;
  font-family: var(--font-sans);
  font-size: 0.84rem;
  line-height: 1.45;
  color: rgba(160, 145, 132, 0.88);
}

.wb-reader-result.is-fallback .wb-reader-result__read-body {
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(155, 142, 128, 0.82);
}

.wb-reader-result.is-fallback {
  border-color: rgba(160, 145, 130, 0.12);
  background: linear-gradient(180deg, rgba(18, 15, 13, 0.94) 0%, rgba(14, 12, 10, 0.96) 100%);
  box-shadow:
    inset 0 1px 0 rgba(252, 248, 236, 0.03),
    0 6px 18px rgba(0, 0, 0, 0.18);
  opacity: 0.9;
}

.wb-reader-result.is-fallback .wb-reader-result__title {
  color: rgba(175, 162, 148, 0.82);
  letter-spacing: 0.16em;
}

.wb-reader-result.is-fallback .wb-reader-result__read-body,
.wb-reader-result.is-fallback .wb-reader-result__section-title,
.wb-reader-result.is-fallback .wb-reader-result__empty,
.wb-reader-result.is-fallback .wb-reader-result__shaped {
  color: rgba(165, 152, 138, 0.82);
}

.wb-reader-result .wb-reader-chamber {
  display: none;
}

.wb-reader-result__badge {
  display: inline-flex;
  margin: 0;
  width: fit-content;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: max(0.75rem, var(--mono-min));
  font-weight: 500;
  letter-spacing: 0.18em;
  padding: 0.38rem 0.72rem;
  border-radius: 3px;
  border: 1px solid;
  position: relative;
  animation: wb-reader-result-lock 0.5s ease forwards;
}

.wb-reader-result__badge.is-full {
  color: #b8c8a0;
  border-color: rgba(155, 174, 126, 0.48);
  background: rgba(155, 174, 126, 0.1);
  box-shadow: 0 0 16px rgba(155, 174, 126, 0.08);
}

.wb-reader-result__badge.is-partial {
  color: #f0a060;
  border-color: rgba(222, 111, 56, 0.48);
  background: rgba(222, 111, 56, 0.1);
  box-shadow: 0 0 16px rgba(222, 111, 56, 0.1);
}

.wb-reader-result__badge.is-thin {
  color: #e07050;
  border-color: rgba(196, 74, 40, 0.5);
  background: rgba(196, 74, 40, 0.12);
  box-shadow: 0 0 16px rgba(196, 74, 40, 0.1);
}

.wb-reader-result__sections {
  display: grid;
  gap: 1.35rem;
}

.wb-reader-result.is-agent .wb-reader-result__sections {
  gap: 1.35rem;
  margin-top: 0.15rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(242, 232, 220, 0.08);
}

.wb-reader-result__section {
  padding-top: 0.85rem;
  border-top: 1px solid rgba(242, 232, 220, 0.06);
}

.wb-reader-result.is-agent .wb-reader-result__section {
  padding-top: 0.95rem;
}

.wb-reader-result.is-agent .wb-reader-result__section--read {
  padding-top: 0;
  border-top: none;
}

.wb-reader-result__section--read {
  border-top: none;
  padding-top: 0;
}

.wb-reader-result__section-title {
  margin: 0 0 0.55rem;
  font-family: var(--font-mono);
  font-size: max(0.625rem, var(--mono-min));
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.wb-reader-result__section--read .wb-reader-result__section-title {
  color: rgba(240, 200, 160, 0.88);
}

.wb-reader-result__section:nth-child(2) .wb-reader-result__section-title,
.wb-reader-result__section--left-out .wb-reader-result__section-title {
  color: rgba(224, 112, 80, 0.88);
}

.wb-reader-result__section:nth-child(3) .wb-reader-result__section-title,
.wb-reader-result__section--shaped .wb-reader-result__section-title {
  color: rgba(160, 140, 200, 0.88);
}

.wb-reader-result__section--read .wb-reader-result__read-body p {
  margin: 0 0 0.95rem;
  font-family: var(--font-display);
  font-size: clamp(1.12rem, 2.2vw, 1.28rem);
  line-height: 1.62;
  color: #f2e8dc;
}

.wb-reader-result__section--read .wb-reader-result__read-body p:last-child {
  margin-bottom: 0;
}

.wb-reader-result__list {
  margin: 0;
  padding: 0 0 0 1.15rem;
  font-family: var(--font-sans);
  font-size: 0.96rem;
  line-height: 1.58;
  color: rgba(224, 200, 180, 0.95);
}

.wb-reader-result__list li::marker {
  color: rgba(224, 112, 80, 0.75);
}

.wb-reader-result__empty,
.wb-reader-result__shaped {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.94rem;
  line-height: 1.58;
  color: rgba(185, 168, 147, 0.92);
}

.wb-reader-result__shaped {
  padding-left: 0.65rem;
  border-left: 2px solid rgba(120, 100, 180, 0.35);
}

.wb-reader-result__trust {
  margin: 0.85rem 0 0;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(242, 232, 220, 0.07);
  font-family: var(--font-mono);
  font-size: max(0.625rem, var(--mono-min));
  letter-spacing: 0.08em;
  /* WCAG AA: ~10px mono needs 4.5:1. Opaque (not rgba) so the ratio is deterministic on
     the dark result panel. rgb(158,144,131) = 5.07:1 on #2A211E (the lightest surface the
     boundary renders on), 6.19:1 on the actual panel gradient. Was rgba(175,160,145,.68) =
     3.64:1 (failed). Do not dim below 4.5:1. Also styles the share-page boundary (same class). */
  color: rgb(158, 144, 131);
}

.wb-reader-result__inspection-note {
  margin: 0;
  font-family: var(--font-sans);
  font-size: max(0.875rem, 14px);
  line-height: 1.55;
  color: rgba(170, 158, 142, 0.78);
}

.wb-reader-result__section--inspection {
  padding-top: 0.75rem;
  border-top: 1px solid rgba(242, 232, 220, 0.05);
}

.wb-reader-result__section--inspection .wb-reader-result__section-title {
  color: rgba(165, 152, 138, 0.62);
  margin-bottom: 0.4rem;
}

.wb-reader-result__inspection-note.is-standalone {
  margin: 0.5rem 0 0;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(242, 232, 220, 0.07);
}

/* ── Reader v2 P1 — measurement panel ──────────────────────────────────────
   The professional layer beneath the inspection. Reuses the .wb-reader-result
   card chrome (.is-agent) and its inner idioms; these overrides carry only the
   measurement-specific pieces (the estimate readout, the candidate findings, the
   unvalidated + boundary lines), styled with existing umber + violet tokens. No
   new accent, no new design system. */
.wb-measure {
  margin-top: 0.35rem;
}

.wb-measure__meta {
  margin: -0.2rem 0 0.9rem;
}

.wb-measure__estimate {
  margin: 0 0 1.15rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(130, 110, 170, 0.32);
  border-left: 2px solid rgba(130, 110, 170, 0.5);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(40, 32, 52, 0.5) 0%, rgba(24, 20, 30, 0.5) 100%);
}

.wb-measure__estimate-value {
  font-family: var(--font-mono);
  font-size: clamp(0.95rem, 2.2vw, 1.08rem);
  letter-spacing: 0.05em;
  color: rgba(214, 198, 232, 0.96);
}

.wb-measure__estimate-why {
  margin: 0.5rem 0 0;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(196, 182, 205, 0.86);
}

.wb-measure__counts {
  margin: 0 0 0.85rem;
  font-family: var(--font-mono);
  font-size: max(0.68rem, var(--mono-min));
  letter-spacing: 0.04em;
  color: rgba(185, 172, 195, 0.78);
}

/* Reader v2 R1 (item 9) — Gap X-ray. A thin proportional bar rendering the delta's
   signal composition as a single-glance shape directly above the precise counts
   line. Segment widths come from flex-grow (set inline from each count); ember-ramp
   shades only, no second hue. Decorative (aria-hidden); the counts line is the
   accessible source of truth. A 3px floor keeps a tiny count from vanishing. */
.wb-xray {
  display: flex;
  align-items: stretch;
  gap: 2px;
  height: 7px;
  margin: 0 0 0.5rem;
  border-radius: 4px;
  overflow: hidden;
}

.wb-xray__seg {
  flex-basis: 0;
  min-width: 3px;
  border-radius: 2px;
}

.wb-xray__seg.is-omission {
  background: rgba(222, 111, 56, 0.92);
}

.wb-xray__seg.is-framing {
  background: rgba(200, 88, 48, 0.82);
}

.wb-xray__seg.is-deflection {
  background: rgba(240, 143, 88, 0.92);
}

/* Reader v2 R1 (item 10) — Inspection Card export row. Reuses the receipt copy-row
   layout (.wb-reader-result__copy + .wb-measure__actions); adds only a small full-width
   caption so "Copy card" reads as a shareable summary of the run, not another receipt
   button. Muted mono, no accent. */
.wb-card-export__label {
  flex: 1 1 100%;
  margin: 0;
  font-family: var(--font-mono);
  font-size: max(0.62rem, var(--mono-min));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(185, 172, 195, 0.7);
}

.wb-measure__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.95rem;
}

.wb-measure__finding {
  display: grid;
  gap: 0.3rem;
  padding-left: 0.85rem;
  border-left: 2px solid rgba(130, 110, 170, 0.32);
}

.wb-measure__finding-type {
  font-family: var(--font-mono);
  font-size: max(0.62rem, var(--mono-min));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(200, 168, 150, 0.85);
}

.wb-measure__finding-why {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(228, 216, 200, 0.92);
}

.wb-measure__anchor {
  margin: 0.15rem 0 0;
  padding: 0.35rem 0 0.35rem 0.75rem;
  border-left: 2px solid rgba(222, 111, 56, 0.3);
  font-family: var(--font-serif, Georgia, serif);
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(205, 192, 176, 0.88);
}

.wb-measure__unvalidated {
  margin: 1.1rem 0 0;
  font-family: var(--font-sans);
  font-size: max(0.8125rem, 13px);
  line-height: 1.5;
  color: rgba(190, 176, 196, 0.82);
}

.wb-measure__boundary {
  margin-top: 0.65rem;
}

.wb-measure__actions {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(242, 232, 220, 0.08);
}

/* Inspection Meaning panel (Reader v3 EXPLAIN) — one RENDER-ONLY interpretation
   surface beside the results: a heading, three labelled sections (what happened /
   why this matters / what you can do next), and the closing archive-boundary line
   with the admission link. The left accent is ember (rgba(var(--ember-rgb), 0.5)) — the
   site's single locked warm accent — matching the check-card idiom; every other hue here
   is parchment or amber-tan. Nothing here enters any record — this styles
   presentation over existing inspection state. */
.wb-explain {
  margin-top: 1.1rem;
  padding: 1rem 1.15rem 1.05rem;
  border: 1px solid rgba(242, 232, 220, 0.1);
  border-left: 2px solid rgba(var(--ember-rgb), 0.5);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(26, 20, 16, 0.42) 0%, rgba(18, 16, 13, 0.42) 100%);
}

.wb-explain__heading {
  margin: 0 0 0.85rem;
  font-family: var(--font-sans);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.4;
  color: rgba(240, 228, 212, 0.95);
}

.wb-explain__section {
  margin-top: 0.85rem;
}

.wb-explain__section:first-of-type {
  margin-top: 0;
}

.wb-explain__label {
  display: block;
  margin-bottom: 0.3rem;
  font-family: var(--font-mono);
  font-size: max(0.62rem, var(--mono-min));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(200, 168, 150, 0.85);
}

.wb-explain__body {
  margin: 0 0 0.4rem;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(228, 216, 200, 0.92);
}

.wb-explain__body:last-child {
  margin-bottom: 0;
}

.wb-explain__boundary {
  margin: 1rem 0 0;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(242, 232, 220, 0.1);
  font-family: var(--font-sans);
  font-size: max(0.8125rem, 13px);
  line-height: 1.5;
  color: rgba(205, 192, 176, 0.72);
}

.wb-explain__method {
  margin: 0.55rem 0 0;
  font-family: var(--font-sans);
  font-size: max(0.8125rem, 13px);
  line-height: 1.5;
}

.wb-explain__method-link {
  color: rgba(200, 168, 150, 0.95);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.wb-explain__method-link:hover {
  color: rgba(216, 186, 166, 1);
}

/* Check Register v1 (Reader v3 R3) — finding-derived comparative check cards.
   Reuses the .wb-reader-result.is-agent card chrome; these overrides carry the
   register note, the per-card provenance head, the both-ends quote pair, the
   copyable verification question, and the client-side status control. Umber +
   amber tokens only — no new accent. */
.wb-checks {
  margin-top: 0.35rem;
}

.wb-checks__note {
  margin: -0.1rem 0 0.9rem;
  font-family: var(--font-sans);
  font-size: 0.98rem;
  line-height: 1.55;
  color: rgba(228, 216, 200, 0.92);
}

.wb-checks__eyebrow {
  margin: 0 0 0.6rem;
  font-family: var(--font-mono);
  font-size: max(0.62rem, var(--mono-min));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(200, 168, 150, 0.85);
}

.wb-checks__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.wb-check {
  padding: 0.95rem 1.05rem;
  border: 1px solid rgba(222, 111, 56, 0.24);
  border-left: 2px solid rgba(222, 111, 56, 0.5);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(26, 20, 16, 0.5) 0%, rgba(18, 16, 13, 0.5) 100%);
}

.wb-check--resolved {
  border-left-color: rgba(150, 190, 150, 0.5);
  opacity: 0.9;
}

.wb-check--dismissed {
  opacity: 0.5;
}

.wb-check__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

.wb-check__family,
.wb-check__detector {
  font-family: var(--font-mono);
  font-size: max(0.6rem, var(--mono-min));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.12rem 0.4rem;
  border: 1px solid rgba(222, 111, 56, 0.3);
  border-radius: 3px;
  color: rgba(210, 178, 160, 0.9);
}

.wb-check__finding {
  font-family: var(--font-mono);
  font-size: max(0.62rem, var(--mono-min));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(200, 168, 150, 0.85);
}

.wb-check__provisional {
  margin-left: auto;
  font-family: var(--font-sans);
  font-size: max(0.75rem, 12px);
  font-style: italic;
  color: rgba(190, 176, 196, 0.82);
}

.wb-check__pair {
  margin: 0.4rem 0;
}

.wb-check__label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: max(0.6rem, var(--mono-min));
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(200, 168, 150, 0.8);
  margin-right: 0.4rem;
}

.wb-check__quote {
  margin: 0.2rem 0 0;
  padding: 0.35rem 0 0.35rem 0.75rem;
  border-left: 2px solid rgba(222, 111, 56, 0.3);
  font-family: var(--font-serif, Georgia, serif);
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(205, 192, 176, 0.9);
}

.wb-check__dependency {
  margin: 0.55rem 0;
  font-family: var(--font-sans);
  font-size: 0.94rem;
  line-height: 1.55;
  color: rgba(228, 216, 200, 0.92);
}

.wb-check__verify {
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(242, 232, 220, 0.08);
}

.wb-check__question {
  margin: 0.3rem 0 0.6rem;
  font-family: var(--font-sans);
  font-size: 0.98rem;
  line-height: 1.55;
  color: rgba(232, 220, 204, 0.95);
}

.wb-check__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
}

.wb-check__resolver {
  font-family: var(--font-mono);
  font-size: max(0.68rem, var(--mono-min));
  letter-spacing: 0.05em;
  color: rgba(200, 168, 150, 0.8);
}

.wb-check__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.8rem;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(242, 232, 220, 0.08);
}

.wb-check__status-opt {
  font-family: var(--font-mono);
  font-size: max(0.66rem, var(--mono-min));
  letter-spacing: 0.05em;
  padding: 0.28rem 0.6rem;
  min-height: 32px;
  border: 1px solid rgba(242, 232, 220, 0.16);
  border-radius: 4px;
  background: transparent;
  color: rgba(205, 192, 176, 0.8);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.wb-check__status-opt.is-active {
  border-color: rgba(222, 111, 56, 0.6);
  color: rgba(232, 220, 204, 0.95);
  background: rgba(222, 111, 56, 0.12);
}

.wb-checks__more {
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: max(0.72rem, var(--mono-min));
  letter-spacing: 0.06em;
  padding: 0.4rem 0.8rem;
  min-height: 38px;
  border: 1px solid rgba(242, 232, 220, 0.16);
  border-radius: 4px;
  background: transparent;
  color: rgba(210, 178, 160, 0.9);
  cursor: pointer;
}

.wb-checks__boundary {
  margin-top: 0.9rem;
}

/* Review-record export — the ghost button reuses the shared .btn chrome; this row
   only sets the separator, spacing, and the muted mono hint beside it. */
.wb-checks__export {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(242, 232, 220, 0.1);
}

.wb-checks__export-hint {
  font-family: var(--font-mono);
  font-size: max(0.68rem, var(--mono-min));
  letter-spacing: 0.03em;
  color: rgba(205, 192, 176, 0.62);
}

/* Act 2 — the two-question test offer.
   Reuses the .wb-reader-result.is-agent card chrome and the shared copy-row
   idiom; these overrides carry only the offer sentence, the constructed prompt
   readout, and the at-capacity line, styled with existing umber + amber tokens.
   No new accent, no new design system. */
.wb-act2 {
  margin-top: 0.35rem;
}

.wb-act2__offer {
  margin: -0.1rem 0 0.9rem;
  font-family: var(--font-sans);
  font-size: 0.98rem;
  line-height: 1.55;
  color: rgba(228, 216, 200, 0.92);
}

.wb-act2__prompt {
  margin: 0 0 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(222, 111, 56, 0.28);
  border-left: 2px solid rgba(222, 111, 56, 0.5);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(26, 20, 16, 0.6) 0%, rgba(18, 16, 13, 0.6) 100%);
  font-family: var(--font-mono);
  font-size: max(0.8rem, 13px);
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: rgba(228, 216, 200, 0.94);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 22rem;
  overflow-y: auto;
}

.wb-act2__actions {
  margin-top: 0.25rem;
}

.wb-act2__degraded {
  margin: -0.1rem 0 0;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(205, 192, 176, 0.86);
}

/* Act 2 — the paired test (paste box, then the delta view). Reuses the measure
   idioms (estimate readout, finding list, anchor quotes), so these overrides carry
   only the paste-step divider, the two-sided quote labels, and the status lines. No
   new accent: the "before" quote keeps the amber anchor border, the "after" quote
   takes the same violet as the estimate readout. */
.wb-act2__test {
  margin-top: 1.15rem;
  padding-top: 1.15rem;
  border-top: 1px solid rgba(242, 232, 220, 0.08);
}

.wb-act2__test-cta {
  margin-top: 0.9rem;
}

.wb-act2__delta {
  margin-top: 0.35rem;
}

.wb-act2__side {
  display: grid;
  gap: 0.2rem;
}

.wb-act2__side--targeted {
  border-left-color: rgba(130, 110, 170, 0.5);
}

.wb-act2__side-label {
  font-family: var(--font-mono);
  font-size: max(0.58rem, var(--mono-min));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-style: normal;
  color: rgba(185, 172, 195, 0.72);
}

/* The Reader's reading sits in the same mono label idiom as the two answer labels,
   so a row reads as three labelled parts — but it carries no quote-mark styling and
   no anchor rule, because it is not a quotation. */
.wb-act2__reading-label {
  display: block;
  margin-bottom: 0.15rem;
  font-family: var(--font-mono);
  font-size: max(0.58rem, var(--mono-min));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(222, 111, 56, 0.72);
}

.wb-act2__reading {
  font-style: normal;
}

.wb-act2__notice {
  margin: 0 0 0.95rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid rgba(222, 111, 56, 0.26);
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(228, 216, 200, 0.9);
}

.wb-act2__run-error {
  margin: 0.75rem 0 0;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(205, 178, 168, 0.9);
}

.wb-act2__reset-row {
  margin-top: 0.85rem;
}

/* Reader v2 R1 — the quick/cleaner choice (item 5), the item-1c small print, and
   the Confirmation Loop reveal (item 2). Umber system throughout; ember appears
   only as a mark (the active option/chip, the gap-surface panel border, the signal
   tag border, the primary CTA is the Btn's own). No new hue, no large fill. */

/* Item 5 — how the person will run the second answer. */
.wb-act2__check {
  margin: 0 0 0.95rem;
}

.wb-act2__check-copy {
  margin: 0 0 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(205, 192, 176, 0.82);
}

.wb-act2__check-opts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.wb-act2__check-opt {
  display: grid;
  gap: 0.2rem;
  padding: 0.6rem 0.75rem;
  text-align: left;
  border: 1px solid rgba(242, 232, 220, 0.14);
  border-radius: 6px;
  background: rgba(26, 20, 16, 0.4);
  color: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.wb-act2__check-opt:hover {
  border-color: rgba(242, 232, 220, 0.26);
}

.wb-act2__check-opt.is-active {
  border-color: rgba(222, 111, 56, 0.6);
  background: rgba(222, 111, 56, 0.08);
}

.wb-act2__check-label {
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 600;
  color: rgba(242, 232, 220, 0.95);
}

.wb-act2__check-hint {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(205, 192, 176, 0.78);
}

/* Run-the-pair v1 — capture discipline at paste-back. Marks how the person ran the
   two answers (same model? which one? edited?). Loose voice, never a gate. Same umber
   idiom as the quick/cleaner choice above: ember appears only on the active option. */
.wb-act2__capture {
  margin: 1rem 0 0.95rem;
  padding: 0.9rem 0.95rem 0.95rem;
  border: 1px solid rgba(242, 232, 220, 0.1);
  border-radius: 8px;
  background: rgba(24, 19, 15, 0.4);
}

.wb-act2__capture-heading {
  margin: 0 0 0.25rem;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(242, 232, 220, 0.94);
}

.wb-act2__capture-intro {
  margin: 0 0 0.85rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(190, 178, 164, 0.72);
}

.wb-act2__capture-q {
  margin: 0 0 0.85rem;
  padding: 0;
  border: 0;
}

.wb-act2__capture-q:last-of-type {
  margin-bottom: 0;
}

.wb-act2__capture-label {
  display: block;
  margin: 0 0 0.45rem;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  line-height: 1.45;
  color: rgba(228, 216, 200, 0.9);
}

.wb-act2__capture-hint {
  display: block;
  margin: -0.3rem 0 0.4rem;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  line-height: 1.45;
  color: rgba(185, 172, 155, 0.68);
}

.wb-act2__capture-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.wb-act2__capture-opt {
  padding: 0.5rem 0.8rem;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  text-align: left;
  border: 1px solid rgba(242, 232, 220, 0.14);
  border-radius: 6px;
  background: rgba(26, 20, 16, 0.4);
  color: rgba(205, 192, 176, 0.85);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.wb-act2__capture-opt:hover {
  border-color: rgba(242, 232, 220, 0.26);
  color: rgba(228, 216, 200, 0.95);
}

.wb-act2__capture-opt.is-active {
  border-color: rgba(222, 111, 56, 0.6);
  background: rgba(222, 111, 56, 0.1);
  color: #f2e8dc;
}

.wb-act2__capture-input {
  width: 100%;
  padding: 0.5rem 0.7rem;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: #f2e8dc;
  border: 1px solid rgba(242, 232, 220, 0.16);
  border-radius: 6px;
  background: rgba(18, 16, 13, 0.5);
}

.wb-act2__capture-input:focus {
  outline: none;
  border-color: rgba(222, 111, 56, 0.55);
}

.wb-act2__capture-input::placeholder {
  color: rgba(180, 168, 154, 0.5);
}

.wb-act2__capture-disclosure {
  margin: 0.85rem 0 0;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(185, 172, 155, 0.66);
}

/* Item 1c — small print under the prompt, sub under the CTA. */
.wb-act2__prompt-note {
  margin: -0.55rem 0 1rem;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(190, 178, 164, 0.7);
}

.wb-act2__sub {
  margin: 0.55rem 0 0;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(205, 192, 176, 0.8);
}

/* Item 2 — the reveal (the hero: two answers, the state headline, the signal tag,
   a one-tap correction row, then the small print and the boundary sentence). */
.wb-loop__reveal {
  margin: 0 0 1.5rem;
  padding: 1.15rem 1.15rem 1.25rem;
  border: 1px solid rgba(242, 232, 220, 0.1);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(30, 23, 18, 0.55) 0%, rgba(20, 17, 14, 0.55) 100%);
}

.wb-loop__headline {
  margin: 0 0 0.9rem;
  font-family: var(--font-sans);
  font-size: 1.22rem;
  line-height: 1.32;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #f2e8dc;
}

.wb-loop__panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin: 0 0 0.9rem;
}

.wb-loop__panel {
  display: grid;
  gap: 0.3rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid rgba(242, 232, 220, 0.1);
  border-radius: 6px;
  background: rgba(18, 16, 13, 0.45);
}

.wb-loop__panel--second {
  border-left: 2px solid rgba(222, 111, 56, 0.55);
}

.wb-loop__panel-label {
  font-family: var(--font-mono);
  font-size: max(0.58rem, var(--mono-min));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(185, 172, 155, 0.72);
}

.wb-loop__panel-body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.94rem;
  line-height: 1.5;
  color: rgba(228, 216, 200, 0.92);
}

.wb-loop__tag {
  margin: 0 0 0.9rem;
  padding: 0.5rem 0 0.5rem 0.75rem;
  border-left: 2px solid rgba(222, 111, 56, 0.55);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(235, 222, 205, 0.94);
}

/* Run-the-pair v1 — the unmatched-conditions warning. Fires on the side-by-side
   whenever conditions_matched != true (a different model, a disclosed edit, or an
   unsure setup). Points at HOW to read the pair; never a verdict on either answer.
   Ember left-rule, same idiom as the return strip — a mark, not a fill. */
.wb-loop__unmatched {
  margin: 0 0 0.9rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid rgba(242, 232, 220, 0.1);
  border-left: 2px solid rgba(222, 111, 56, 0.55);
  border-radius: 6px;
  background: rgba(26, 20, 16, 0.42);
}

.wb-loop__unmatched-badge {
  display: inline-block;
  margin: 0 0 0.35rem;
  font-family: var(--font-mono);
  font-size: max(0.58rem, var(--mono-min));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(222, 150, 120, 0.9);
}

.wb-loop__unmatched-warning {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(220, 208, 192, 0.9);
}

.wb-loop__cta-row {
  margin: 0 0 0.9rem;
}

.wb-loop__correct {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(242, 232, 220, 0.08);
}

.wb-loop__correct-label {
  margin-right: 0.15rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: rgba(190, 178, 164, 0.75);
}

.wb-loop__chip {
  padding: 0.32rem 0.6rem;
  font-family: var(--font-mono);
  font-size: max(0.62rem, var(--mono-min));
  letter-spacing: 0.04em;
  border: 1px solid rgba(242, 232, 220, 0.16);
  border-radius: 999px;
  background: rgba(26, 20, 16, 0.4);
  color: rgba(205, 192, 176, 0.8);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.wb-loop__chip:hover {
  border-color: rgba(242, 232, 220, 0.3);
  color: rgba(228, 216, 200, 0.95);
}

.wb-loop__chip.is-active {
  border-color: rgba(222, 111, 56, 0.6);
  background: rgba(222, 111, 56, 0.12);
  color: #f2e8dc;
}

.wb-loop__smallprint {
  margin: 0 0 0.6rem;
  font-family: var(--font-mono);
  font-size: max(0.6rem, var(--mono-min));
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: rgba(180, 168, 154, 0.66);
}

.wb-loop__reveal .wb-measure__boundary {
  margin: 0.2rem 0 0;
}

/* User-diagnosis chips (Reader v2, user-chip lane). A self-contained follow-up flow
   below the inspection card: pick the follow-up that bothered you, copy its exact
   instruction, bring back the second answer, read what visibly changed. Reuses the
   .wb-act2 / .wb-loop / .wb-reader-result card chrome; these overrides carry only the
   full-sentence pick chips (which can't wear the mono pill), the instruction divider,
   the selected-follow-up line, the descriptive register note, and the professional
   cue. Umber + amber tokens only — no new accent. */
.wb-chip {
  margin-top: 0.35rem;
}

.wb-chip__choose {
  margin-top: 0.9rem;
}

.wb-chip__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.2rem;
}

/* Override the mono pill (.wb-loop__chip) for a full sentence: sans face, normal
   tracking, left-aligned, wraps to auto height, gentle radius instead of 999px. Keeps
   the umber-rest / ember-active states inherited from .wb-loop__chip. On a narrow
   screen the 14rem basis lets each choice take its own row; wider, they pair up. */
.wb-chip__pick {
  flex: 1 1 14rem;
  max-width: 100%;
  padding: 0.55rem 0.75rem;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  letter-spacing: normal;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
  border-radius: 8px;
}

/* The instruction card appears once a follow-up is picked. Top-rule divider, same
   idiom as .wb-act2__test. */
.wb-chip__instruction {
  margin-top: 1.15rem;
  padding-top: 1.15rem;
  border-top: 1px solid rgba(242, 232, 220, 0.08);
}

/* "Follow-up selected by you: <label>" — a quiet provenance line under the reveal
   headline, so the person always sees which instruction produced the comparison. */
.wb-chip__reason {
  margin: 0 0 0.85rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(190, 178, 164, 0.78);
}

/* The descriptive register note. Body-readable like .wb-explain__boundary; no top rule
   of its own — the boundary line directly beneath it carries the divider. */
.wb-chip__meaning {
  margin: 1rem 0 0;
  font-family: var(--font-sans);
  font-size: max(0.8125rem, 13px);
  line-height: 1.55;
  color: rgba(205, 192, 176, 0.8);
}

/* Compact boundary treatment for the chip reveal. The locked Reader boundary sentence
   and the chip lane's user-attribution line share ONE toned block under a single top
   rule (inherited from .wb-reader-result__trust) — one treatment, never two stacked
   warning panels. Both lines inherit the mono boundary tone and stay opaque so neither
   drops below the 4.5:1 AA ratio that color guarantees; line-height relaxes slightly so
   the full sentences read as prose rather than a mono label. */
.wb-chip__boundary-lock {
  margin: 0;
  line-height: 1.5;
}

.wb-chip__boundary-attr {
  margin: 0.4rem 0 0;
  line-height: 1.5;
}

/* Professional cue — one quiet line pointing a professional user at the receipt, set
   off by a subtle top rule. Rendered as plain text (no link target ships in this lane). */
.wb-chip__pro-cue {
  display: block;
  margin-top: 0.85rem;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(242, 232, 220, 0.08);
}

.wb-chip__pro-line {
  font-family: var(--font-sans);
  font-size: max(0.8125rem, 13px);
  line-height: 1.5;
  color: rgba(205, 192, 176, 0.72);
}

.wb-chip__pro-link {
  margin-left: 0.35rem;
  font-family: var(--font-sans);
  font-size: max(0.8125rem, 13px);
  color: rgba(200, 168, 150, 0.95);
}

/* Return flow (Reader v2 R1, item 3). A slim re-entry strip for a visitor whose own
   browser log shows a copied question with no completed loop. Resumes nothing; it
   only points back at the input. Ember left-rule, same idiom as the paste prompt. */
.wb-return {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(242, 232, 220, 0.1);
  border-left: 2px solid rgba(var(--ember-rgb), 0.5);
  border-radius: 6px;
  background: rgba(26, 20, 16, 0.42);
}

.wb-return__body {
  flex: 1 1 auto;
  min-width: 0;
}

.wb-return__headline {
  margin: 0 0 0.2rem;
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.3;
  color: var(--ink);
}

.wb-return__text {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.wb-return__dismiss {
  flex: 0 0 auto;
  margin: -0.15rem -0.2rem 0 0;
  padding: 0.1rem 0.35rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  line-height: 1;
  color: var(--ink-dim);
  transition: color 0.15s ease;
}

.wb-return__dismiss:hover {
  color: var(--ink);
}

/* First-use clarity strip (Reader v2 R1, item 6). Slim instrument card naming the three
   moves of the Confirmation Loop for a first-time visitor; hidden once a run completes.
   Same ember-left-rule idiom as the return nudge. Ember lands only on the step numbers
   (marks) — never on the body text. */
.wb-clarity {
  position: relative;
  margin-bottom: 1rem;
  padding: 0.9rem 1.05rem 1rem;
  border: 1px solid rgba(242, 232, 220, 0.1);
  border-left: 2px solid rgba(var(--ember-rgb), 0.5);
  border-radius: 6px;
  background: rgba(26, 20, 16, 0.42);
}

.wb-clarity__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: max(0.6rem, var(--mono-min));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 0.7rem;
  padding-right: 1.4rem;
}

.wb-clarity__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.wb-clarity__step {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

.wb-clarity__num {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--ember);
  font-variant-numeric: tabular-nums;
}

.wb-clarity__text {
  font-family: var(--font-sans);
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

.wb-clarity__dismiss {
  position: absolute;
  top: 0.5rem;
  right: 0.55rem;
  padding: 0.1rem 0.35rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  line-height: 1;
  color: var(--ink-dim);
  transition: color 0.15s ease;
}

.wb-clarity__dismiss:hover {
  color: var(--ink);
}

/* ?funnel=1 diagnostic panel (Reader v2 R1, item 3). Read-only view of THIS browser's
   own content-minimal event log. Never shipped by default; a local instrument. */
.wb-funnel {
  margin-top: 1.5rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(242, 232, 220, 0.12);
  border-radius: 6px;
  background: rgba(18, 16, 13, 0.5);
}

.wb-funnel__head {
  margin-bottom: 0.85rem;
}

.wb-funnel__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: max(0.6rem, var(--mono-min));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 0.5rem;
}

.wb-funnel__northstar {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
}

.wb-funnel__northstar-num {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 5vw, 2.1rem);
  line-height: 1;
  color: var(--ember);
}

.wb-funnel__northstar-label {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--ink-soft);
}

.wb-funnel__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.3rem 1.5rem;
  margin: 0 0 0.85rem;
}

.wb-funnel__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.28rem 0;
  border-bottom: 1px solid rgba(242, 232, 220, 0.06);
}

.wb-funnel__label {
  font-family: var(--font-mono);
  font-size: max(0.68rem, var(--mono-min));
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}

.wb-funnel__val {
  margin: 0;
  font-family: var(--font-mono);
  font-size: max(0.72rem, 13px);
  color: var(--ink);
}

.wb-funnel__states {
  margin-bottom: 0.75rem;
}

.wb-funnel__states-label {
  display: block;
  font-family: var(--font-mono);
  font-size: max(0.6rem, var(--mono-min));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 0.35rem;
}

.wb-funnel__states-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
}

.wb-funnel__states-item {
  font-family: var(--font-mono);
  font-size: max(0.66rem, var(--mono-min));
  padding: 0.2rem 0.45rem;
  border: 1px solid rgba(var(--ember-rgb), 0.28);
  border-radius: 3px;
  color: var(--ink-soft);
}

.wb-funnel__note {
  margin: 0;
  font-family: var(--font-mono);
  font-size: max(0.58rem, var(--mono-min));
  line-height: 1.5;
  color: var(--ink-dim);
}

@media (max-width: 640px) {
  .wb-funnel__grid {
    grid-template-columns: 1fr;
    gap: 0 0;
  }
}

/* Instant demo (Reader v2, item 4). A first-timer opens a canned, deterministic
   walkthrough of the whole loop on one public example. Trigger is understated; the
   panel reuses the paste-prompt and loop-reveal idioms so the demo looks like the
   real thing it previews. No new accent — ember only on the flagged omission. */
.wb-demo-trigger-row {
  margin-bottom: 1rem;
}

.wb-demo-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  background: none;
  border: 1px solid rgba(var(--ember-rgb), 0.34);
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: max(0.7rem, var(--mono-min));
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  transition: border-color 0.15s ease, color 0.15s ease;
}

.wb-demo-trigger:hover {
  border-color: rgba(var(--ember-rgb), 0.7);
  color: var(--ink);
}

.wb-demo {
  margin-bottom: 1.25rem;
  padding: 1.1rem 1.15rem 1rem;
  border: 1px solid rgba(242, 232, 220, 0.12);
  border-top: 2px solid rgba(var(--ember-rgb), 0.5);
  border-radius: 6px;
  background: rgba(26, 20, 16, 0.5);
}

.wb-demo__head {
  margin-bottom: 1rem;
}

.wb-demo__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: max(0.6rem, var(--mono-min));
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 0.4rem;
}

.wb-demo__title {
  margin: 0 0 0.3rem;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 3.6vw, 1.4rem);
  line-height: 1.25;
  color: var(--ink);
}

.wb-demo__context {
  margin: 0;
  font-family: var(--font-mono);
  font-size: max(0.62rem, var(--mono-min));
  letter-spacing: 0.06em;
  color: var(--ink-dim);
}

.wb-demo__beat {
  padding: 0.75rem 0;
  border-top: 1px solid rgba(242, 232, 220, 0.07);
}

.wb-demo__label {
  display: block;
  font-family: var(--font-mono);
  font-size: max(0.6rem, var(--mono-min));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 0.4rem;
}

.wb-demo__q {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.02rem;
  line-height: 1.4;
  color: var(--ink);
}

.wb-demo__answer {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.wb-demo__leftout {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  line-height: 1.6;
}

.wb-demo__mark {
  background: rgba(var(--ember-rgb), 0.16);
  color: var(--ink);
  padding: 0.05rem 0.2rem;
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.wb-demo__prompt.wb-act2__prompt {
  margin-bottom: 0;
}

.wb-demo__reveal.wb-loop__reveal {
  margin-top: 1rem;
}

.wb-loop__panel-body--muted {
  color: var(--ink-dim);
  font-style: italic;
}

.wb-demo__smallprint {
  margin: 0.55rem 0 0;
  font-family: var(--font-mono);
  font-size: max(0.58rem, var(--mono-min));
  line-height: 1.5;
  color: var(--ink-dim);
}

.wb-demo__cta-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}

.wb-demo__close {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: max(0.66rem, var(--mono-min));
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  transition: color 0.15s ease;
}

.wb-demo__close:hover {
  color: var(--ink);
}

.wb-reader-archive {
  margin-bottom: 1.5rem;
  opacity: 0.88;
}

.wb-reader-archive-terms {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.65rem 0;
}

.wb-reader-archive-term {
  font-family: var(--font-mono);
  font-size: max(0.6rem, var(--mono-min));
  letter-spacing: 0.06em;
  padding: 0.22rem 0.45rem;
  border-radius: 3px;
  border: 1px solid rgba(242, 232, 220, 0.14);
}

.wb-reader-archive-term.is-found {
  color: #9bae7e;
  border-color: rgba(155, 174, 126, 0.35);
}

.wb-reader-archive-term.is-missing {
  color: rgba(196, 74, 40, 0.92);
  border-color: rgba(196, 74, 40, 0.35);
}

.wb-shell--reader-v2 .wb-suggest-module {
  opacity: 0.88;
}

/* V2H — refined V1 shell + V2 Reader agent */
.wb-shell--reader-v2 .wb-reader-v2__context-links {
  margin-top: 0;
  margin-bottom: 1rem;
  padding-top: 0;
  border-top: none;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  max-width: 100%;
}

.wb-shell--reader-v2 .wb-reader-v2__context-links a {
  max-width: 100%;
  word-break: break-word;
}

.wb-shell--reader-v2 .wb-reader-v2__agent-bar {
  margin-bottom: 1rem;
}

.wb-shell--reader-v2 .wb-reader-v2__agent-bar .wb-reader-v2__chip {
  margin-bottom: 0.55rem;
}

.wb-shell--reader-v2 .wb-reader-v2__agent-bar .wb-reader-v2__promise {
  margin-bottom: 0;
}

.wb-shell--reader-v2 .wb-reader-console {
  margin-top: 0;
}

.wb-shell--reader-v2 .wb-reader-console .wb-console__main {
  margin-top: 0;
}

.wb-shell--reader-v2 .wb-reader-console .wb-plate-note {
  margin: 0.35rem 0 0.65rem;
  font-size: 0.82rem;
  color: rgba(200, 186, 170, 0.78);
}

.wb-shell--reader-v2 .wb-reader-case-grid {
  margin-bottom: 0.5rem;
}

.wb-shell--reader-v2 .wb-reader-case-grid .wb-case-card {
  padding: 0.65rem 0.8rem;
  min-height: 0;
}

.wb-shell--reader-v2 .wb-reader-case-grid .wb-case-card__title {
  font-size: 0.92rem;
  line-height: 1.32;
}

.wb-shell--reader-v2 .wb-reader-evidence {
  margin: 0.1rem 0 0.65rem;
}

.wb-shell--reader-v2 .wb-reader-evidence .wb-readout {
  padding: 0.1rem 0.1rem 0;
}

.wb-shell--reader-v2 .wb-reader-evidence .wb-active-case__headline {
  font-family: var(--font-display);
  font-size: 1.12rem;
  line-height: 1.42;
  color: rgba(242, 232, 220, 0.96);
}

.wb-shell--reader-v2 .wb-reader-evidence .wb-readout__signal .wb-prompt-well {
  margin-top: 0.45rem;
  border-color: rgba(242, 232, 220, 0.1);
  background: rgba(12, 9, 8, 0.65);
}

.wb-shell--reader-v2 .wb-reader-v2__own-header {
  margin: 0.55rem 0 0.7rem;
}

.wb-shell--reader-v2 .wb-reader-v2__own-eyebrow {
  margin: 0 0 0.35rem;
  font-family: var(--font-mono);
  font-size: max(0.6875rem, var(--mono-min));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(195, 175, 148, 0.78);
}

.wb-shell--reader-v2 .wb-reader-v2__own-intro {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.02rem;
  line-height: 1.46;
  color: rgba(230, 218, 200, 0.92);
}

.wb-shell--reader-v2 .wb-reader-confirm {
  margin-top: 0.35rem;
  padding: 0.6rem 0.7rem 0.7rem;
  background: rgba(14, 11, 9, 0.82);
  border: 1px solid rgba(242, 232, 220, 0.1);
  border-radius: 4px;
}

.wb-shell--reader-v2 .wb-reader-confirm--own {
  margin-top: 0.35rem;
}

.wb-shell--reader-v2 .wb-reader-confirm > .wb-field-label {
  margin-bottom: 0.55rem;
  font-family: var(--font-mono);
  font-size: max(0.6875rem, var(--mono-min));
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(240, 180, 130, 0.88);
}

.wb-shell--reader-v2 .wb-reader-confirm .wb-reader-v2__fields {
  margin-top: 0.35rem;
  gap: 0.8rem;
}

.wb-shell--reader-v2 .wb-reader-confirm .wb-reader-v2__status-wrap {
  margin-top: 0.85rem;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(242, 232, 220, 0.07);
  background: transparent;
}

.wb-shell--reader-v2 .wb-reader-confirm .wb-reader-v2__cta-row {
  margin-top: 0.75rem;
}

.wb-shell--reader-v2 .wb-reader-v2__subcopy {
  margin-bottom: 0.85rem;
}

.wb-shell--reader-v2 .wb-reader-v2__agent-bar--compact {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem 0.85rem;
  margin-bottom: 0.65rem;
}

.wb-shell--reader-v2 .wb-reader-v2__chip--compact {
  margin-bottom: 0;
}

.wb-shell--reader-v2 .wb-reader-v2__agent-bar--compact .wb-reader-v2__promise {
  margin: 0;
  flex: 1 1 14rem;
  min-width: 0;
  font-size: 0.84rem;
  line-height: 1.42;
  color: rgba(200, 186, 170, 0.78);
}

.wb-shell--reader-v2 .wb-reader-confirm .wb-reader-v2__field--optional {
  opacity: 0.9;
}

.wb-shell--reader-v2 .wb-reader-confirm .wb-reader-v2__field--optional .wb-field-label {
  color: rgba(155, 142, 128, 0.62);
  font-size: 0.76rem;
  letter-spacing: 0.03em;
}

.wb-shell--reader-v2 .wb-reader-confirm .wb-reader-v2__field--optional .wb-input,
.wb-shell--reader-v2 .wb-reader-confirm .wb-reader-v2__field--optional textarea.wb-input,
.wb-shell--reader-v2 .wb-reader-confirm .wb-reader-v2__field--optional select.wb-input {
  border-color: rgba(242, 232, 220, 0.07);
  background: rgba(12, 10, 9, 0.55);
  color: rgba(185, 172, 158, 0.88);
}

.wb-shell--reader-v2 .wb-reader-confirm .wb-reader-v2__field--optional .wb-input::placeholder,
.wb-shell--reader-v2 .wb-reader-confirm .wb-reader-v2__field--optional textarea.wb-input::placeholder {
  color: rgba(140, 128, 115, 0.55);
}

.wb-shell--reader-v2 .wb-reader-v2__input-note {
  margin: 0.45rem 0 0;
  max-width: 38rem;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(165, 152, 138, 0.72);
}

.wb-shell--reader-v2 .wb-reader-v2__modes--inline .wb-reader-v2__mode-desc {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.76rem;
  line-height: 1.3;
  color: rgba(185, 170, 155, 0.72);
}

.wb-shell--reader-v2 .wb-reader-v2__modes--inline .wb-reader-v2__mode.is-active .wb-reader-v2__mode-desc {
  color: rgba(215, 195, 170, 0.82);
}

.wb-shell--reader-v2 .wb-reader-confirm__lead {
  margin: 0 0 0.65rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: rgba(200, 186, 170, 0.82);
}

.wb-shell--reader-v2 .wb-reader-case-grid .wb-case-card:not(.is-active) {
  opacity: 0.62;
  border-color: rgba(242, 232, 220, 0.06);
  background: rgba(12, 10, 9, 0.55);
}

.wb-shell--reader-v2 .wb-reader-case-grid .wb-case-card.is-active {
  opacity: 1;
  border-color: rgba(222, 111, 56, 0.42);
  box-shadow: 0 0 0 1px rgba(222, 111, 56, 0.08);
}

.wb-shell--reader-v2 .wb-reader-case-grid .wb-reader-case-card__label {
  font-size: max(0.625rem, var(--mono-min));
  letter-spacing: 0.14em;
  color: rgba(200, 186, 170, 0.72);
}

.wb-shell--reader-v2 .wb-reader-case-grid .wb-case-card.is-active .wb-reader-case-card__label {
  color: rgba(240, 180, 130, 0.9);
}

.wb-shell--reader-v2 .wb-reader-case-grid .wb-case-card__title {
  font-size: 0.88rem;
  line-height: 1.3;
  color: rgba(220, 208, 192, 0.88);
}

.wb-shell--reader-v2 .wb-reader-case-grid .wb-case-card.is-active .wb-case-card__title {
  color: rgba(248, 238, 225, 0.96);
}

.wb-shell--reader-v2 .wb-reader-evidence__meta {
  margin: 0 0 0.55rem;
  font-family: var(--font-mono);
  font-size: max(0.625rem, var(--mono-min));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(190, 175, 158, 0.72);
}

.wb-shell--reader-v2 .wb-reader-evidence .wb-active-case__headline {
  font-size: 1.18rem;
  line-height: 1.44;
}

.wb-shell--reader-v2 .wb-reader-confirm .wb-reader-v2__field--answer textarea.wb-input {
  min-height: 9.5rem;
}

.wb-shell--reader-v2 .wb-reader-v2__action-row {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 0.65rem;
}

.wb-shell--reader-v2 .wb-reader-confirm .wb-reader-v2__status-wrap {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.wb-shell--reader-v2 .wb-reader-v2__status-wrap .wb-reader-v2__status {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: rgba(185, 170, 155, 0.72);
}

.wb-shell--reader-v2 .wb-reader-v2__status-wrap.is-ready .wb-reader-v2__status {
  color: rgba(230, 200, 165, 0.88);
}

.wb-shell--reader-v2 .wb-reader-v2__cta-row {
  margin-top: 0;
}

.wb-reader-result__provenance {
  margin: -0.35rem 0 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.03em;
  color: rgba(175, 162, 148, 0.78);
}

.wb-reader-result__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(242, 232, 220, 0.08);
}

.wb-reader-result__footer.is-fallback {
  justify-content: flex-start;
}

.wb-reader-result__rerun.wb-btn--ghost {
  margin-left: auto;
  min-height: 2.35rem;
  padding: 0.45rem 0.85rem;
  font-size: 0.8rem;
  color: rgba(185, 170, 155, 0.82);
  border-color: rgba(242, 232, 220, 0.1);
}

.wb-reader-result__rerun.wb-btn--ghost:hover {
  color: rgba(230, 215, 195, 0.92);
  border-color: rgba(222, 111, 56, 0.22);
}

.wb-reader-result__copy {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.55rem;
  align-items: center;
}

.wb-reader-result__copy-fail {
  font-size: 0.78rem;
  color: rgba(190, 175, 158, 0.78);
  letter-spacing: 0.02em;
}

/* Reader v2 P4 — share affordance (receipt-gated publish) + pre-publish consent modal.
   width:100% keeps the affordance on its own footer row so the success/URL state has room. */
.wb-reader-share {
  width: 100%;
  margin-top: 0.35rem;
}

.wb-reader-share__btn.wb-btn--ghost {
  min-height: 2rem;
}

.wb-reader-share__success {
  margin-top: 0.15rem;
  padding: 0.65rem 0.72rem;
  border: 1px solid rgba(155, 174, 126, 0.22);
  border-radius: 5px;
  background: rgba(155, 174, 126, 0.06);
}

.wb-reader-share__success-title {
  margin: 0 0 0.35rem;
  font-family: var(--font-mono);
  font-size: max(0.6875rem, 11px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(184, 200, 160, 0.95);
}

.wb-reader-share__url {
  margin: 0 0 0.55rem;
  font-family: var(--font-mono);
  font-size: max(0.75rem, 12px);
  line-height: 1.4;
  word-break: break-all;
}

.wb-reader-share__url a {
  color: rgba(215, 195, 170, 0.92);
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.wb-reader-share__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.55rem;
  align-items: center;
}

/* The "Open share record" control is a plain anchor (not a <Btn>), so it carries no
   inline geometry — the ghost color/border come from .wb-btn--ghost, box metrics here. */
.wb-reader-share__open.wb-btn--ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 0.35rem 0.7rem;
  border-width: 1px;
  border-style: solid;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: max(0.8125rem, 13px);
  font-weight: 500;
  text-decoration: none;
}

.wb-share-consent {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(12, 9, 8, 0.74);
}

.wb-share-consent__panel {
  width: 100%;
  max-width: 33rem;
  max-height: calc(100vh - 2.5rem);
  overflow-y: auto;
  padding: 1.5rem 1.55rem 1.35rem;
  background: rgba(30, 24, 20, 0.98);
  border: 1px solid rgba(248, 168, 102, 0.22);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.wb-share-consent__title {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.25;
  color: #F2E8DC;
}

.wb-share-consent__line {
  margin: 0 0 0.7rem;
  font-family: var(--font-body);
  font-size: max(0.9375rem, 15px);
  line-height: 1.6;
  color: rgba(224, 210, 190, 0.92);
}

.wb-share-consent__error {
  margin: 0.5rem 0 0;
  font-family: var(--font-body);
  font-size: max(0.875rem, 14px);
  line-height: 1.5;
  color: rgba(224, 150, 120, 0.95);
}

.wb-share-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.1rem;
}

.wb-share-consent__confirm.wb-btn--ghost:not(:disabled) {
  border-color: rgba(248, 168, 102, 0.55) !important;
  background: rgba(222, 111, 56, 0.16) !important;
  color: rgba(242, 232, 220, 0.98) !important;
}

.wb-shell--reader-v2 .wb-reader-v2__input-note--compact {
  display: none;
}

.wb-shell--reader-v2 .wb-reader-v2__field .wb-field-error {
  margin-top: 0.45rem;
  font-size: 0.84rem;
  color: rgba(210, 185, 155, 0.88);
}

.wb-shell--reader-v2 .wb-reader-v2__field .wb-field-error--hint {
  color: rgba(190, 178, 162, 0.82);
}

.wb-shell--reader-v2 .wb-reader-v2 {
  max-width: 100%;
  overflow-x: clip;
}

.wb-reader-result.is-agent .wb-reader-result__copy .wb-btn--ghost {
  min-height: 2rem;
  padding: 0.35rem 0.65rem;
  font-size: max(0.875rem, 14px);
  color: rgba(190, 175, 158, 0.88);
  border-color: rgba(242, 232, 220, 0.1);
}

.wb-reader-result.is-agent .wb-reader-result__copy .wb-btn--ghost:hover {
  color: rgba(235, 220, 200, 0.95);
  border-color: rgba(222, 111, 56, 0.28);
}

.wb-reader-result.is-agent .wb-reader-result__copy .wb-btn--ghost.is-copied {
  color: rgba(184, 200, 160, 0.95);
  border-color: rgba(155, 174, 126, 0.42);
  background: rgba(155, 174, 126, 0.08);
}

.wb-shell--reader-v2 .wb-suggest-module.is-reader-secondary {
  padding: 0.55rem 0.65rem;
  background: rgba(12, 10, 9, 0.45);
  border-color: rgba(242, 232, 220, 0.06);
}

.wb-shell--reader-v2 .wb-suggest-module.is-reader-secondary .wb-suggest-module__heading {
  font-size: 0.95rem;
  margin-bottom: 0.25rem;
}

.wb-shell--reader-v2 .wb-suggest-module.is-reader-secondary .wb-suggest-module__lead {
  font-size: 0.84rem;
  margin-bottom: 0.45rem;
  color: rgba(190, 178, 162, 0.78);
}

.wb-shell--reader-v2 .wb-reader-v2__follow--suggest {
  margin-top: 1.35rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(242, 232, 220, 0.06);
}

.wb-reader-chamber.is-inspecting .wb-reader-chamber__scanlines {
  opacity: 0.42;
}

@media (max-width: 900px) {
  .wb-reader-v2__stack {
    max-width: 100%;
  }

  .wb-reader-v2__panel {
    padding: 0.9rem 0.95rem 1rem;
  }

  .wb-reader-v2__field--answer textarea.wb-input {
    min-height: 8.5rem;
  }

  .wb-reader-v2__tool {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .wb-reader-v2__console {
    padding: 0.9rem 0.95rem 1rem;
  }

  .wb-reader-device.wb-reader-chamber,
  .wb-reader-chamber.wb-reader-device {
    max-width: 100%;
    height: clamp(10.625rem, 42vw, 13.75rem);
  }
}

@media (max-width: 640px) {
  .wb-reader-v2__modes {
    grid-template-columns: 1fr;
  }

  .wb-act2__check-opts,
  .wb-loop__panels {
    grid-template-columns: 1fr;
  }

  .wb-reader-v2__modes--inline {
    flex-direction: row;
  }

  .wb-reader-chamber:not(.wb-reader-device) {
    min-height: clamp(11rem, 38vw, 13.5rem);
    padding: 0.5rem 0.55rem 0.45rem;
    max-width: 100%;
  }

  .wb-reader-device .wb-reader-sigil__frame {
    width: min(11rem, 72vw);
  }

  .wb-reader-diagnostic {
    max-width: 14rem;
  }

  .wb-reader-v2__promise {
    font-size: 0.82rem;
  }

  .wb-shell--reader-v2 .wb-reader-case-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
  }

  .wb-shell--reader-v2 .wb-reader-case-grid .wb-case-card {
    padding: 0.62rem 0.7rem;
  }

  .wb-shell--reader-v2 .wb-reader-evidence .wb-active-case__headline {
    font-size: 1.02rem;
  }

  .wb-reader-v2__follow {
    margin-top: 0.85rem;
  }

  .wb-reader-result.is-agent {
    padding: 1.15rem 0.72rem 1.3rem;
  }

  .wb-reader-result.is-agent .wb-reader-result__head {
    margin-bottom: 0.68rem;
    flex-direction: column;
    align-items: flex-start;
  }

  .wb-reader-result__title--sub {
    margin-top: 0.52rem;
    margin-bottom: 0.42rem;
  }

  .wb-reader-result__provenance {
    margin-top: 0.1rem;
    margin-bottom: 0.82rem;
  }

  .wb-reader-result__badge-gloss {
    font-size: max(0.8125rem, 13px);
    line-height: 1.48;
    max-width: none;
  }

  .wb-reader-result.is-agent .wb-reader-result__list,
  .wb-reader-result.is-agent .wb-reader-result__shaped,
  .wb-reader-result__empty {
    font-size: max(0.875rem, 13px);
    line-height: 1.56;
  }

  .wb-reader-result.is-agent .wb-reader-result__list {
    padding-left: 1rem;
  }

  .wb-reader-result.is-agent .wb-reader-result__shaped {
    padding-left: 0.7rem;
  }

  .wb-reader-result.is-agent .wb-reader-result__trust {
    margin-top: 1rem;
    padding-top: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.1em;
  }

  .wb-reader-result__footer {
    flex-direction: column;
    align-items: stretch;
    margin-top: 1.08rem;
    padding-top: 0.92rem;
    gap: 0.5rem;
  }

  .wb-reader-result__copy {
    width: 100%;
  }

  .wb-reader-result.is-agent .wb-reader-result__copy .wb-btn--ghost {
    flex: 1 1 auto;
    min-width: calc(50% - 0.3rem);
    min-height: 2.75rem;
    font-size: max(0.8125rem, 13px);
    justify-content: center;
  }

  .wb-reader-result__rerun.wb-btn--ghost {
    margin-left: 0;
    order: 4;
    width: 100%;
    min-height: 2.75rem;
    justify-content: center;
  }

  .wb-reader-share {
    order: 3;
    margin-top: 0.35rem;
  }

  .wb-reader-share__btn.wb-btn--ghost {
    width: 100%;
    min-height: 2.75rem;
    justify-content: center;
    font-size: max(0.8125rem, 13px);
  }

  .wb-reader-result.is-agent .wb-reader-result__section--read .wb-reader-result__read-body p:first-child {
    font-size: max(1.0625rem, 17px);
    line-height: 1.56;
  }
}

/* MOBILE PRODUCT UX — header flow, form density, suggest subordination, share + result polish */
@media (max-width: 680px) {
  .wb-shell--reader-v2 .wb-shell__frame > div:first-child {
    margin-bottom: 4px !important;
  }

  .wb-shell--reader-v2 .wb-shell__frame > div:nth-child(2) {
    margin-bottom: 14px !important;
  }

  .wb-shell--reader-v2 .wb-reader-v2__eyebrow {
    margin-bottom: 0.42rem;
    font-size: max(0.625rem, 10px);
  }

  .wb-shell--reader-v2 .wb-reader-v2__headline {
    margin-bottom: 0.48rem;
    font-size: clamp(1.62rem, 7.2vw, 1.95rem);
    line-height: 1.14;
  }

  .wb-shell--reader-v2 .wb-reader-v2__subcopy {
    margin-bottom: 0.72rem;
    font-size: 0.92rem;
    line-height: 1.5;
    color: rgba(190, 178, 162, 0.9);
  }

  .wb-shell--reader-v2 .wb-reader-v2__context-links {
    margin-bottom: 0.55rem;
    gap: 0.35rem 0.65rem;
  }

  .wb-shell--reader-v2 .wb-reader-v2__context-links a:not(:first-child) {
    font-size: 0.82rem;
    color: rgba(165, 152, 138, 0.78);
    font-weight: 400;
  }

  .wb-shell--reader-v2 .wb-reader-v2__context-links a:first-child {
    font-weight: 500;
  }

  .wb-shell--reader-v2 .wb-reader-v2__agent-bar--compact {
    margin-bottom: 0.55rem;
  }

  .wb-shell--reader-v2 .wb-reader-v2__chip--compact {
    margin-bottom: 0.35rem;
    padding: 0.38rem 0.55rem;
    font-size: max(0.5625rem, 9px);
  }

  .wb-shell--reader-v2 .wb-reader-v2__promise {
    font-size: 0.78rem;
    line-height: 1.42;
    color: rgba(175, 162, 148, 0.82);
  }

  .wb-shell--reader-v2 .wb-reader-v2__modes--inline {
    margin-bottom: 0.55rem;
    gap: 0.35rem;
  }

  .wb-shell--reader-v2 .wb-reader-v2__modes--inline .wb-reader-v2__mode {
    padding: 0.52rem 0.62rem;
  }

  .wb-shell--reader-v2 .wb-reader-v2__modes--inline .wb-reader-v2__mode-name {
    font-size: 0.88rem;
  }

  .wb-shell--reader-v2 .wb-reader-v2__modes--inline .wb-reader-v2__mode-desc {
    font-size: 0.72rem;
    margin-top: 0.12rem;
  }

  .wb-shell--reader-v2 .wb-reader-v2__own-header {
    margin-bottom: 0.35rem;
  }

  .wb-shell--reader-v2 .wb-reader-v2__own-eyebrow {
    margin-bottom: 0.2rem;
    font-size: 0.68rem;
  }

  .wb-shell--reader-v2 .wb-reader-v2__own-intro {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.42;
    color: rgba(185, 172, 158, 0.82);
  }

  .wb-shell--reader-v2 .wb-reader-confirm.wb-flow-module {
    padding: 0.78rem 0.72rem 0.82rem;
  }

  .wb-shell--reader-v2 .wb-reader-v2__fields {
    gap: 0.55rem;
  }

  .wb-shell--reader-v2 .wb-reader-v2__field .wb-field-label {
    margin-bottom: 0.28rem;
    font-size: 0.78rem;
  }

  .wb-shell--reader-v2 .wb-reader-v2__field .wb-input,
  .wb-shell--reader-v2 .wb-reader-v2__field textarea.wb-input {
    min-height: 2.35rem;
    padding: 0.48rem 0.58rem;
    font-size: max(0.875rem, 14px);
  }

  .wb-shell--reader-v2 .wb-reader-v2__field--answer textarea.wb-input {
    min-height: 6.75rem;
  }

  .wb-shell--reader-v2 .wb-reader-v2__field .wb-field-error {
    margin-top: 0.32rem;
    font-size: 0.8rem;
  }

  .wb-shell--reader-v2 .wb-reader-v2__input-note--full {
    display: none;
  }

  .wb-shell--reader-v2 .wb-reader-v2__input-note--compact {
    display: block;
    margin-top: 0.38rem;
    font-size: 0.72rem;
    line-height: 1.4;
    color: rgba(155, 142, 128, 0.78);
  }

  .wb-shell--reader-v2 .wb-reader-v2__cta-row {
    margin-top: 0.55rem;
  }

  .wb-shell--reader-v2 .wb-reader-v2__follow--suggest {
    margin-top: 2rem;
    padding-top: 0.65rem;
    opacity: 0.72;
  }

  .wb-shell--reader-v2 .wb-suggest-module.is-reader-secondary {
    padding: 0.45rem 0.52rem;
    background: rgba(12, 10, 9, 0.32);
    border-color: rgba(242, 232, 220, 0.04);
  }

  .wb-shell--reader-v2 .wb-suggest-module.is-reader-secondary .wb-suggest-module__heading {
    font-size: 0.88rem;
    margin-bottom: 0.18rem;
  }

  .wb-shell--reader-v2 .wb-suggest-module.is-reader-secondary .wb-suggest-module__lead {
    font-size: 0.78rem;
    margin-bottom: 0.35rem;
  }

  .wb-reader-result.is-agent {
    padding: 1rem 0.68rem calc(1.35rem + env(safe-area-inset-bottom, 0px));
  }

  .wb-reader-result.is-agent .wb-reader-result__sections {
    gap: 0.85rem;
  }

  .wb-reader-result.is-agent .wb-reader-result__section--inspection {
    margin-top: 0.15rem;
  }

  .wb-reader-result.is-agent .wb-reader-result__inspection-note {
    font-size: max(0.8125rem, 13px);
    line-height: 1.48;
  }

  .wb-reader-result__footer {
    padding-bottom: max(0.35rem, env(safe-area-inset-bottom, 0px) * 0.35);
  }

  .wb-reader-share__success {
    padding: 0.58rem 0.62rem;
  }

  .wb-reader-share__actions,
  .wb-share-consent__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .wb-reader-share__actions .wb-btn {
    width: 100%;
    min-height: 2.65rem;
    justify-content: center;
  }

  .wb-share-consent__panel {
    padding: 1.15rem 1.05rem 1.1rem;
  }

  .wb-shell--reader-v2 .wb-reader-v2__trust {
    margin-top: 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wb-reader-sigil__halo-disc,
  .wb-reader-sigil__occult-ring,
  .wb-reader-sigil__lens-glow,
  .wb-reader-sigil__tip-node,
  .wb-reader-sigil__tip-halo,
  .wb-reader-sigil__tip-spark,
  .wb-reader-diagnostic__bar-fill,
  .wb-reader-diagnostic__needle-arm,
  .wb-reader-diagnostic__scanline,
  .wb-reader-diagnostic__halo-tick,
  .wb-reader-diagnostic__scan-sweep::after,
  .wb-reader-chamber__radial-sweep,
  .wb-reader-chamber__glow,
  .wb-reader-chamber__occult-halo,
  .wb-reader-chamber__ember,
  .wb-reader-result__badge,
  .wb-reader-v2__status-wrap.is-inspecting .wb-reader-v2__status-dot {
    animation: none !important;
  }
}

/* Reader v2 P3 — the perception tap. A quiet, optional telemetry question after a
   result: a mono-caps prompt over a row of small pill options. TELEMETRY, NEVER
   VALIDATION — nothing here reads as a score or a confirmation of accuracy. Reuses
   the existing umber ground + ember accent; a selected pill borrows the is-armed
   ember so a choice reads as "logged", not "correct". No new design system. */
.wb-perception {
  margin-top: 1.1rem;
  padding-top: 0.95rem;
  border-top: 1px solid rgba(242, 232, 220, 0.08);
}

.wb-perception__prompt {
  margin: 0 0 0.6rem;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(228, 216, 200, 0.9);
}

.wb-perception__options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.wb-perception__option {
  min-height: 40px;
  padding: 0.5rem 1.05rem;
  border-radius: 999px;
  border: 1px solid rgba(242, 232, 220, 0.2);
  background: rgba(242, 232, 220, 0.03);
  font-family: var(--font-mono);
  font-size: max(0.72rem, var(--mono-min));
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(228, 216, 200, 0.82);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.wb-perception__option:hover {
  border-color: rgba(222, 111, 56, 0.5);
  color: rgba(242, 232, 220, 0.96);
}

.wb-perception__option.is-selected {
  border-color: rgba(222, 111, 56, 0.82);
  background: linear-gradient(180deg, rgba(222, 111, 56, 0.32) 0%, rgba(196, 88, 42, 0.2) 60%, rgba(32, 22, 16, 0.9) 100%);
  color: #fff8f0;
}