/* Only the two existing reader-panel documents opt into this visual layer.
   Their markup, runtime, request flow, source formatting and resize messages stay intact. */
html[data-beforeword-panel-ui="v2"] {
  color-scheme: light;
  --paper: #f8f9f6;
  --white: #fff;
  --ink: #202923;
  --muted: #59645d;
  --line: #dce2da;
  --soft: #eef1ed;
  --control: #819084;
  --accent: #315b45;
  --on-accent: #fff;
  --focus: #246a47;
  --highlight: #dcebdd;
  --shadow: 0 18px 80px #162e2014;
  --panel-reading-size: var(--reading-size, 18px);
}
html[data-beforeword-panel-ui="v2"][data-theme="dark"] {
  color-scheme: dark;
  --paper: #171c19;
  --white: #202722;
  --ink: #e7eee6;
  --muted: #b0beb2;
  --line: #38463b;
  --soft: #29322c;
  --control: #879c8c;
  --accent: #b7d9be;
  --on-accent: #14251a;
  --focus: #b7e2c1;
  --highlight: #344c3b;
  --shadow: 0 18px 80px #0005;
}
@media (prefers-color-scheme: dark) {
  html[data-beforeword-panel-ui="v2"]:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
    --paper: #171c19; --white: #202722; --ink: #e7eee6;
    --muted: #b0beb2; --line: #38463b; --soft: #29322c;
    --control: #879c8c; --accent: #b7d9be; --on-accent: #14251a;
    --focus: #b7e2c1; --highlight: #344c3b; --shadow: 0 18px 80px #0005;
  }
}
html[data-beforeword-panel-ui="v2"][data-size="20"] { --panel-reading-size: 20px; }
html[data-beforeword-panel-ui="v2"][data-size="22"] { --panel-reading-size: 22px; }
html[data-beforeword-panel-ui="v2"] .site-reader {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  font-size: 16px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}
html[data-beforeword-panel-ui="v2"] .site-reader .shell { padding-inline: 0; }
html[data-beforeword-panel-ui="v2"] .site-reader .hero h1 {
  font-family: inherit;
  font-size: clamp(28px, 5.5vw, 38px);
  font-weight: 620;
  line-height: 1.22;
  letter-spacing: -.035em;
  text-wrap: balance;
}
html[data-beforeword-panel-ui="v2"] .site-reader .purpose {
  font-size: 16px;
  line-height: 1.65;
  text-wrap: pretty;
}
html[data-beforeword-panel-ui="v2"] .site-reader :is(.source-column, .with-report .source-column) {
  border-color: var(--control);
  border-radius: 14px;
  box-shadow: none;
}
html[data-beforeword-panel-ui="v2"] .site-reader .source-column:focus-within {
  border-color: var(--focus);
  box-shadow: 0 0 0 1px var(--focus);
}
html[data-beforeword-panel-ui="v2"] .site-reader .analysis-column {
  border-radius: 14px;
  box-shadow: none;
}
html[data-beforeword-panel-ui="v2"] .site-reader .editor textarea {
  font-size: var(--panel-reading-size);
  line-height: 1.7;
}
html[data-beforeword-panel-ui="v2"] .site-reader :is(.record-output, .with-report .source-column .record-output) {
  /* The original exact-source rules use !important for these two properties. */
  font-size: var(--panel-reading-size) !important;
  line-height: 1.7 !important;
}
html[data-beforeword-panel-ui="v2"] .site-reader :is(
  .report-text, .note-card .reading-step .report-text,
  .with-report .note-card .reading-step .report-text,
  .note-card .report-detail-body .report-text, .analysis-card .limit-field .report-text,
  .quote-button, .with-report .note-card .quote-button,
  .dictionary-sense > .dictionary-writing, .dictionary-source > .dictionary-writing
) {
  font-size: var(--panel-reading-size);
  line-height: 1.72;
}
html[data-beforeword-panel-ui="v2"] .site-reader :is(
  .small-note, .field-footer .small-note, .field-footer .count, .count,
  .send-notice, .analysis-actions > .send-notice, .analysis-status, #analysis-status,
  .trial-count, .analysis-connection-row .trial-count, #allowance-note,
  .origin, .source-location .origin, .source-location .section-label,
  .analysis-origin, .analysis-boundary, .field-label, .note-card .field-label,
  .model-label, .analysis-method p, .analysis-method-meta .model-label,
  .copy-status, .prepared-examples > .small-note, .reader-boundary,
  .status, .demo-note, .menu-group, .keyboard-hint,
  .note p, .note .own-scope, .note .note-label,
  .connection-entry, .analysis-connection-row .connection-entry, .connection-state,
  .settings-form .small-note, .settings-form .privacy-check, .privacy-policy-links,
  .dictionary-send-notice, .dictionary-about .disclosure-body p,
  .dictionary-position, .dictionary-from, .dictionary-pos, .dictionary-sense-source,
  .dictionary-form-of, .dictionary-provenance, .dictionary-lookup-change,
  .dictionary-transformations, .dictionary-term-label, .dictionary-edition-label,
  .reading-sections > .small-note, .reading-sections .disclosure > .small-note,
  .report-scope, .section-progress, .report-selection-tools .small-note,
  .grounds-kind, .citation-label, .item-number, footer,
  .bw-guide-label, .bw-guide-prepared, .bw-guide-boundary,
  .bw-guide .bw-guide-path-item, .bw-guide-note .bw-guide-field-label,
  .bw-guide-direction, .bw-guide--compact .bw-guide-note .bw-guide-boundary
) {
  font-size: 14px;
  line-height: 1.6;
}
html[data-beforeword-panel-ui="v2"] .site-reader :is(
  .dictionary-choose, .dictionary-all-senses, .dictionary-scope, .bw-guide-control
) { font-size: 14px !important; line-height: 1.6 !important; }
html[data-beforeword-panel-ui="v2"] .site-reader :is(
  .text-button, .record-heading button, .source-controls button,
  .analysis-title-row .text-button, .analysis-export button, .example-choice,
  .record-details > summary, .analysis-method > summary,
  .input-tools .capture, .languages button, footer button,
  .dictionary-mode, .dictionary-navigation .text-button, .dictionary-path .text-button
) {
  font-size: 14px;
  min-height: 44px;
}
html[data-beforeword-panel-ui="v2"] .site-reader :is(
  .languages button, .reader-menu > summary, .reader-menu-heading button
) { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
html[data-beforeword-panel-ui="v2"] .site-reader .connection-entry { min-height: 44px; max-width: 100%; }
html[data-beforeword-panel-ui="v2"] .site-reader .menu-group { letter-spacing: 0; text-transform: none; }
html[data-beforeword-panel-ui="v2"] .site-reader .field-label { letter-spacing: 0; }
html[data-beforeword-panel-ui="v2"] .site-reader .prepared-examples h2 { font-size: 16px; }
html[data-beforeword-panel-ui="v2"] .site-reader :is(.settings-form input, .settings-form select) {
  font-size: 16px;
  border-color: var(--control);
  border-radius: 9px;
}
html[data-beforeword-panel-ui="v2"] .site-reader .secondary { border-color: var(--control); }
/* The older media-query rules use literal paper colours in these local controls. */
html[data-beforeword-panel-ui="v2"] .site-reader .record-output { background: var(--white); }
html[data-beforeword-panel-ui="v2"] .site-reader .primary {
  color: var(--on-accent);
  background: var(--accent);
  border-color: transparent;
}
html[data-beforeword-panel-ui="v2"] .site-reader .primary[aria-busy="true"] {
  color: var(--ink);
  background: var(--soft);
  border-color: var(--control);
}
html[data-beforeword-panel-ui="v2"] .site-reader .bw-guide-open {
  color: var(--ink);
  background: var(--white);
  border-color: var(--control);
  box-shadow: none;
}
html[data-beforeword-panel-ui="v2"] .site-reader .bw-guide-open:hover { background: var(--soft); }
html[data-beforeword-panel-ui="v2"] .site-reader #analyze,
html[data-beforeword-panel-ui="v2"] .site-reader .with-report .source-column #analyze {
  font-size: 15px;
  color: var(--on-accent);
  background: var(--accent);
  border-color: transparent;
}
html[data-beforeword-panel-ui="v2"] .site-reader #analyze[aria-busy="true"],
html[data-beforeword-panel-ui="v2"] .site-reader .with-report .source-column #analyze[aria-busy="true"] {
  color: var(--ink);
  background: var(--soft);
  border-color: var(--control);
}
html[data-beforeword-panel-ui="v2"] .site-reader :is(.field-footer, .analysis-connection-row, .record-heading, .source-context) { flex-wrap: wrap; }
html[data-beforeword-panel-ui="v2"] .site-reader .character-tiles { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
html[data-beforeword-panel-ui="v2"] .site-reader .character-tiles .token-label { font-size: 14px; line-height: 1.4; }
html[data-beforeword-panel-ui="v2"] .site-reader :is(.bw-guide-phrase, .bw-guide-quote) { font-family: inherit; }
html[data-beforeword-panel-ui="v2"] .site-reader :is(.bw-guide-reading, .bw-guide--compact .bw-guide-note .bw-guide-reading) {
  font-size: var(--panel-reading-size);
  line-height: 1.7;
}
/* Contain scroll at the edge of the modal iframe; inline panels still grow with their parent. */
html[data-beforeword-panel-ui="v2"].web-panel:not(.web-inline),
html[data-beforeword-panel-ui="v2"].web-panel:not(.web-inline) body { overscroll-behavior-y: contain; }
html[data-beforeword-panel-ui="v2"] .site-reader :is(dialog, .reader-menu nav, .record-output, .incoming-text, #section-preview) { overscroll-behavior: contain; }
html[data-beforeword-panel-ui="v2"]:has(dialog[open]),
html[data-beforeword-panel-ui="v2"]:has(dialog[open]) body { overflow: hidden; }
@media (max-width: 420px) {
  html[data-beforeword-panel-ui="v2"] .site-reader .header { gap: 8px; }
  html[data-beforeword-panel-ui="v2"] .site-reader .header-actions { gap: 4px; }
  html[data-beforeword-panel-ui="v2"] .site-reader .hero h1 { font-size: 29px; }
  html[data-beforeword-panel-ui="v2"] .site-reader .purpose { max-width: none; }
  html[data-beforeword-panel-ui="v2"] .site-reader .analysis-connection-row { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-beforeword-panel-ui="v2"] { scroll-behavior: auto; }
}
@media (forced-colors: active) {
  html[data-beforeword-panel-ui="v2"] .site-reader .primary,
  html[data-beforeword-panel-ui="v2"] .site-reader .primary[aria-busy="true"],
  html[data-beforeword-panel-ui="v2"] .site-reader .bw-guide-open,
  html[data-beforeword-panel-ui="v2"] .site-reader .bw-guide-open:hover,
  html[data-beforeword-panel-ui="v2"] .site-reader #analyze,
  html[data-beforeword-panel-ui="v2"] .site-reader .with-report .source-column #analyze {
    color: ButtonText; background: ButtonFace; border: 1px solid ButtonText;
  }
}