html[data-ui-language-pending] body { visibility: hidden; }
/* Foundation: one scale owns every control, gutter and surface. */
@font-face {
  font-family: "Ysabeau";
  src: url("/assets/fonts/ysabeau-2.002-roman.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/ibm-plex-sans-variable-0.2.0-roman.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 700;
  font-stretch: 85% 100%;
  font-display: swap;
}
@font-face {
  font-family: "Gentium Book";
  src: url("/assets/fonts/gentium-book-7.000-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/fonts/source-serif-4.005-roman.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}
@property --usage-percent { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
:root {
  color-scheme: light;
  --paper: #f0ebe2;
  --surface: #fffdf7;
  --surface-raised: #fffaf0;
  --surface-tint: #edf0ef;
  --ink: #20313a;
  --muted: #5b686c;
  --line: #cbd3d2;
  --line-strong: #acbbbd;
  --action: var(--product-accent-ink);
  --action-hover: #094e6b;
  --action-pressed: #073d55;
  --action-deep: var(--ink);
  --action-soft: var(--product-accent-soft);
  --tap-highlight: rgba(17,120,165,.18);
  --footer: #1b3038;
  --footer-ink: #fff8e8;
  --terracotta: #a65645;
  --terracotta-soft: #f5e6df;
  --terracotta-ink: #793e32;
  --terracotta-line: #d6b5a7;
  --french: #1178a5;
  --esperanto: #2c7d57;
  --latin: #8a5d3d;
  --review: #7a4e6d;
  --support: #8a5a12;
  --product-accent: var(--french);
  --product-accent-ink: #0b5d7f;
  --product-accent-soft: #dceef5;
  --product-glow: rgba(17,120,165,.13);
  --focus: var(--product-accent);
  --shadow-sm: 0 1px 1px rgba(32,49,58,.035), 0 16px 42px rgba(32,49,58,.055);
  --shadow-lg: 0 34px 110px rgba(32,49,58,.22), 0 2px 8px rgba(32,49,58,.08);
  --glass-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.35), 0 3px 12px rgba(32,49,58,.045);
  --glass-fill: #f3f4ef;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --radius: 1.25rem;
  --control-radius: .625rem;
  --control-height: 44px;
  --panel-padding: clamp(.875rem, 2.5vw, 1.5rem);
  --gutter: clamp(.75rem, 3vw, 2rem);
  --space-xs: .375rem;
  --space-sm: .75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --duration-quick: 90ms;
  --duration-state: 160ms;
  --duration-focus: 280ms;
  --duration-enter: 240ms;
  --duration-close: 180ms;
  --stagger-step: 30ms;
  /* Roles, not component-specific miniature text. Supporting copy stays readable
     at every breakpoint; reading material and IPA have independent scales. */
  --type-caption: .875rem;
  --type-body: 1rem;
  --type-label: .9375rem;
  --type-prose: 1.125rem;
  --type-reading: 1.375rem;
  --type-feature: 1.625rem;
  --type-section: 1.25rem;
  --type-title: 1.75rem;
  --font-ui: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "PingFang TC", "PingFang SC", "Segoe UI", sans-serif;
  --font-wordmark: "Ysabeau", ui-sans-serif, system-ui, sans-serif;
  --font-display: var(--font-wordmark);
  --font-editorial: "Source Serif 4", "Iowan Old Style", Georgia, "Songti TC", "Songti SC", serif;
  --ipa-font: "Gentium Book", "Charis SIL", "Doulos SIL", "Noto Sans", "DejaVu Sans", serif;
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.5;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html:has(dialog[open]), body:has(dialog[open]) { overflow: hidden; }
body {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
  color: var(--ink);
  -webkit-tap-highlight-color: var(--tap-highlight);
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse 38rem 26rem at 1% -9%, color-mix(in srgb, var(--product-accent) 6%, transparent), transparent 73%),
    radial-gradient(ellipse 44rem 32rem at 102% 12%, color-mix(in srgb, var(--product-accent) 5%, transparent), transparent 72%),
    repeating-linear-gradient(0deg, rgba(32,49,58,.01) 0, rgba(32,49,58,.01) 1px, transparent 1px, transparent 5px);
}
body[data-analysis-language="eo"] {
  --product-accent: var(--esperanto);
  --product-accent-ink: #205e42;
  --product-accent-soft: #dfeee5;
  --product-glow: rgba(44,125,87,.13);
  --action: var(--product-accent-ink);
  --action-hover: #1a5037;
  --action-pressed: #143f2b;
  --action-soft: var(--product-accent-soft);
  --tap-highlight: rgba(44,125,87,.18);
  --focus: var(--product-accent);
}
body[data-analysis-language="la"] {
  --product-accent: var(--latin);
  --product-accent-ink: #70462f;
  --product-accent-soft: #f0e7dd;
  --product-glow: rgba(138,93,61,.13);
  --action: var(--product-accent-ink);
  --action-hover: #5b3826;
  --action-pressed: #482c1e;
  --action-soft: var(--product-accent-soft);
  --tap-highlight: rgba(138,93,61,.18);
  --focus: var(--product-accent);
}
h1, h2, h3, p { margin: 0; }
/* Prevent nested status text from inheriting the browser's 83% small scale. */
small { font-size: var(--type-caption); }
h1 { font: 520 clamp(2rem, 4vw, 2.75rem)/1.08 var(--font-display); letter-spacing: -.035em; }
h2 { font: 540 var(--type-section)/1.3 var(--font-display); letter-spacing: -.018em; }
h3 { font: 620 var(--type-body)/1.4 var(--font-ui); }
::selection { color: white; background: var(--action); }
a { color: var(--action); text-underline-offset: .2em; }
[hidden] { display: none !important; }
.sr-only, .account-copy { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.skip-link { position: fixed; z-index: 100; top: calc(.75rem + var(--safe-top)); left: calc(.75rem + var(--safe-left)); padding: .75rem 1rem; color: white; border-radius: var(--control-radius); background: var(--action); transform: translateY(-180%); }
.skip-link:focus { transform: none; }

/* Native controls: one hit target, font baseline and focus treatment. */
label { display: grid; min-width: 0; gap: .5rem; color: var(--muted); font: 550 var(--type-label)/1.4 var(--font-ui); }
textarea, input, select, button { min-width: 0; max-width: 100%; border: 1px solid var(--line-strong); border-radius: var(--control-radius); font: inherit; }
textarea, input, select { width: 100%; color: var(--ink); background-color: var(--surface-raised); transition: border-color var(--duration-quick), box-shadow var(--duration-quick), background-color var(--duration-quick); }
input, select { min-height: var(--control-height); padding: .625rem .75rem; font: 400 1rem/1.35 var(--font-ui); }
textarea { min-height: clamp(7rem, 12vw, 8.25rem); padding: .9rem 1rem; resize: vertical; box-shadow: inset 0 1px 3px rgba(32,49,58,.035); font: 400 var(--type-body)/1.5 var(--font-ui); transition: min-height var(--duration-enter) var(--ease), border-color var(--duration-quick), box-shadow var(--duration-quick), background-color var(--duration-quick); }
#text { font: 450 clamp(1.25rem, 2.4vw, 1.5rem)/1.5 var(--font-editorial); }
select {
  appearance: none;
  padding-inline-end: 2.125rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 1rem) 50%, calc(100% - .75rem) 50%;
  background-size: .25rem .25rem;
  background-repeat: no-repeat;
  cursor: pointer;
}
input[type="checkbox"], input[type="radio"] { width: 1.25rem; height: 1.25rem; min-height: 0; padding: 0; margin: .1rem 0 0; flex: 0 0 auto; accent-color: var(--action); }
input[type="range"] { --range-progress: 50%; min-height: var(--control-height); height: var(--control-height); padding: 0; appearance: none; -webkit-appearance: none; accent-color: var(--product-accent); border: 0; box-shadow: none; background: transparent; cursor: pointer; touch-action: pan-y; }
input[type="range"]::-webkit-slider-runnable-track { height: .3125rem; border: 0; border-radius: 999px; background: linear-gradient(to right, var(--product-accent) 0 var(--range-progress), var(--line) var(--range-progress) 100%); }
input[type="range"]::-webkit-slider-thumb { width: 1.25rem; height: 1.25rem; margin-top: -.46875rem; border: 3px solid var(--surface); border-radius: 50%; -webkit-appearance: none; background: var(--product-accent); box-shadow: 0 1px 4px rgba(32,49,58,.24); transition: box-shadow var(--duration-quick); }
input[type="range"]::-moz-range-track { height: .3125rem; border: 0; border-radius: 999px; background: var(--line); }
input[type="range"]::-moz-range-progress { height: .3125rem; border-radius: 999px; background: var(--product-accent); }
input[type="range"]::-moz-range-thumb { box-sizing: border-box; width: 1.25rem; height: 1.25rem; border: 3px solid var(--surface); border-radius: 50%; background: var(--product-accent); box-shadow: 0 1px 4px rgba(32,49,58,.24); transition: box-shadow var(--duration-quick); }
input[type="range"]:not(:disabled):hover::-webkit-slider-thumb, input[type="range"]:not(:disabled):focus-visible::-webkit-slider-thumb, input[type="range"]:not(:disabled):active::-webkit-slider-thumb { box-shadow: 0 0 0 5px var(--product-glow), 0 1px 4px rgba(32,49,58,.24); }
input[type="range"]:not(:disabled):hover::-moz-range-thumb, input[type="range"]:not(:disabled):focus-visible::-moz-range-thumb, input[type="range"]:not(:disabled):active::-moz-range-thumb { box-shadow: 0 0 0 5px var(--product-glow), 0 1px 4px rgba(32,49,58,.24); }
input[type="range"]:disabled { cursor: default; opacity: .46; }
textarea:hover, input:hover, select:hover { border-color: var(--line-strong); }
textarea:focus, input:focus, select:focus { border-color: var(--product-accent); outline: 0; box-shadow: 0 0 0 3px var(--product-glow), inset 0 1px 2px rgba(32,49,58,.025); }
input[type="range"]:focus { box-shadow: none; }
input[type="range"]:focus-visible { outline: 2px solid var(--product-accent); outline-offset: 2px; }
button, .sign-in-link, .logout-link, .api-link, .audio-download {
  display: inline-flex;
  min-height: var(--control-height);
  align-items: center;
  justify-content: center;
  gap: .4375rem;
  padding: .625rem .9375rem;
  font: 600 var(--type-label)/1.35 var(--font-ui);
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--duration-quick), border-color var(--duration-quick), box-shadow var(--duration-quick), transform var(--duration-quick) var(--ease), color var(--duration-quick);
}
button { color: #fffefa; border-color: var(--action); background: var(--action); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 2px 4px rgba(32,49,58,.07); }
button.secondary, .history-button, .admin-button, .sign-in-link, .api-link { color: var(--action-deep); border: 1px solid var(--line); border-radius: var(--control-radius); background: var(--surface-tint); box-shadow: none; }
button:active, .sign-in-link:active, .logout-link:active, .api-link:active { transform: scale(.975); box-shadow: none; }
button:disabled, input:disabled, select:disabled { cursor: not-allowed; opacity: .58; }
button:disabled { transform: none; box-shadow: none; }
button:focus-visible, a:focus-visible, summary:focus-visible, textarea:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.ui-icon { width: 1.0625rem; height: 1.0625rem; flex: 0 0 auto; pointer-events: none; }
.ui-glyph { width: 1.125rem; height: 1.125rem; pointer-events: none; }
.disclosure-icon { margin-left: auto; color: var(--muted); transition: color var(--duration-quick), transform var(--duration-enter) var(--ease); }
details[open] > summary .disclosure-icon { color: var(--action); transform: rotate(180deg); }
.button-label { position: relative; min-width: 0; overflow-wrap: anywhere; }
button.is-confirmed { color: var(--action-deep); border-color: var(--line-strong); background: var(--action-soft); box-shadow: none; }
summary { min-height: var(--control-height); color: var(--muted); cursor: pointer; font: 500 var(--type-caption)/1.45 var(--font-ui); }
pre { min-width: 0; max-width: 100%; max-height: 25rem; overflow: auto; margin: 1rem 0 0; padding: 1rem; border: 1px solid var(--line); border-radius: var(--control-radius); background: var(--surface-tint); font-size: var(--type-caption); line-height: 1.5; }
.hint, #key-status, #tts-status, #research-status { color: var(--muted); font-family: var(--font-ui); }
.hint { font-size: var(--type-caption); line-height: 1.5; }
.pill { padding: .25rem .5rem; border-radius: .375rem; font: 600 var(--type-caption)/1.3 var(--font-ui); white-space: nowrap; }
.pill.on { color: var(--action-deep); background: var(--action-soft); }
.pill.off { color: var(--terracotta-ink); background: var(--terracotta-soft); }

/* Shared compositions; domain selectors only decide placement. */
main.app-shell { position: relative; width: min(68rem, calc(100% - var(--gutter) * 2)); margin: 0 auto; padding: clamp(1.25rem, 3vw, 2.25rem) 0 4rem; }
.panel { min-width: 0; border: 1px solid rgba(174,169,157,.58); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.78); }
@supports (corner-shape: squircle) {
  .panel, .brand-mark, .edition-popover, dialog { corner-shape: squircle; }
}
.query, .hero, .section { padding: var(--panel-padding); }
.query, .hero { position: relative; }
.query { overflow: hidden; transition: border-color var(--duration-enter) var(--ease), box-shadow var(--duration-enter) var(--ease), transform var(--duration-enter) var(--ease); }
.query::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 2px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--product-accent) 18%, var(--product-accent) 82%, transparent); opacity: 0; transform: scaleX(.12); transition: opacity var(--duration-enter), transform var(--duration-enter) var(--ease); }
.query:focus-within { border-color: var(--product-accent); box-shadow: 0 18px 55px var(--product-glow); transform: translateY(-1px); }
.query[data-has-result="true"]::after { opacity: .45; transform: scaleX(1); }
.query[data-has-result="true"]:not(:focus-within) textarea { min-height: 4.75rem; }
.query-grid, .settings-shell, .history-shell, .feedback-content, .research-body { display: grid; min-width: 0; gap: var(--space-md); }
.query-grid { grid-template-columns: minmax(0, 1fr); }
.query-grid > *, #result > *, details.panel, details.panel > * { min-inline-size: 0; }
.composer-footer, .result-heading, .listen-head, .settings-head, .history-actions { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: var(--space-md); }
.result-actions, .settings-head-actions, .key-actions, .research-actions, .admin-item-actions, .history-item-actions, .created-key-actions { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.query form { min-width: 0; }
.latin-exercise-provenance { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; margin-top: -.45rem; padding: .55rem .8rem; border: 1px solid var(--line); border-left: 3px solid var(--product-accent); border-radius: .35rem; background: var(--product-accent-soft); color: var(--ink); font: var(--type-caption)/1.45 var(--font-ui); }
.latin-exercise-provenance-mark { color: var(--product-accent-ink); font: 600 1.2rem/1 var(--font-editorial); }
.latin-exercise-provenance-copy { display: flex; flex: 1 1 15rem; flex-wrap: wrap; gap: .1rem .55rem; }
.latin-exercise-provenance-copy strong { font-weight: 600; }
.latin-exercise-provenance-copy small { color: var(--muted); font-size: inherit; }
.latin-exercise-provenance > a { color: var(--action-deep); font-weight: 550; text-underline-offset: .15em; }
.latin-exercise-shelf { margin-top: 1.25rem; border-top: 1px solid var(--line); padding-top: .75rem; }
.latin-exercise-shelf > summary { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .25rem .75rem; color: var(--action-deep); font: 600 var(--type-caption)/1.5 var(--font-ui); cursor: pointer; }
.latin-exercise-shelf > summary small { color: var(--muted); font: 400 var(--type-caption)/1.5 var(--font-ui); }
.latin-exercise-shelf-body { display: grid; gap: 1rem; padding-top: .9rem; }
.latin-exercise-shelf-body > p { margin: 0; color: var(--muted); font: 400 var(--type-caption)/1.6 var(--font-ui); }
.latin-exercise-group-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .25rem .75rem; }
.latin-exercise-group-heading h3 { margin: 0; font: 600 var(--type-caption)/1.5 var(--font-ui); }
.latin-exercise-group-heading a { font: 400 var(--type-caption)/1.5 var(--font-ui); }
.latin-exercise-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 0 1rem; margin: .35rem 0 0; padding: 0; list-style: none; }
.latin-exercise-load { display: flex; align-items: baseline; justify-content: flex-start; gap: .6rem; width: 100%; padding: .45rem 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; color: var(--ink); text-align: left; font: 400 var(--type-caption)/1.5 var(--font-ui); }
.latin-exercise-load:hover { color: var(--action-deep); background: transparent; }
.latin-exercise-number { min-width: 1.4em; color: var(--muted); font-variant-numeric: tabular-nums; }
.history-actions { flex-wrap: wrap; }

/* Masthead: the product edition is a low-frequency setting, not primary navigation. */
.app-header { position: relative; z-index: 30; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .75rem 1.25rem; margin-bottom: clamp(1.125rem, 3vw, 2rem); padding: .125rem 0 .375rem; }
.brand-lockup { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; }
.brand { display: inline-flex; min-width: 0; min-height: var(--control-height); align-items: center; gap: .625rem; color: var(--ink); text-decoration: none; }
.brand h1 { font: 650 clamp(2rem, 3.6vw, 2.45rem)/1 var(--font-wordmark); letter-spacing: -.035em; font-kerning: normal; }
.edition-switcher, .edition-menu { position: relative; min-width: 0; }
.edition-summary { display: inline-flex; min-height: var(--control-height); align-items: center; gap: .4375rem; padding: .5rem .625rem; border: 1px solid transparent; border-radius: var(--control-radius); color: var(--ink); list-style: none; font: 500 var(--type-caption)/1.25 var(--font-ui); cursor: pointer; transition: color var(--duration-state), background-color var(--duration-state), border-color var(--duration-state); }
.edition-summary::-webkit-details-marker { display: none; }
.edition-summary:hover, .edition-summary[aria-expanded="true"] { color: var(--product-accent-ink); border-color: var(--line); background: var(--surface); }
.edition-summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.language-symbol { width: 1.0625rem; height: 1.0625rem; flex: 0 0 auto; color: var(--muted); }
.edition-current-code { display: none; letter-spacing: .035em; }
.edition-current-name { white-space: nowrap; }
.interface-current-name { color: var(--muted); white-space: nowrap; font-size: var(--type-caption); }
.edition-language-divider { color: var(--muted); }
.edition-chevron { display: inline-flex; width: .875rem; height: .875rem; transition: transform var(--duration-state) var(--ease); }
.edition-summary[aria-expanded="true"] .edition-chevron { transform: rotate(180deg); }
.edition-popover { position: absolute; z-index: 30; top: calc(100% + .5rem); right: 0; display: grid; width: 19rem; max-height: calc(100dvh - 8rem); overflow-y: auto; overscroll-behavior: contain; gap: .125rem; padding: .5rem; border: 1px solid var(--line); border-radius: .875rem; background: var(--surface); box-shadow: 0 12px 36px rgba(32,49,58,.12), 0 2px 5px rgba(32,49,58,.05); transform-origin: top right; }
/* Explicitly remove the positioned popup when closed, including composited layers. */
.edition-popover[hidden] { display: none; }
.language-panel-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .125rem .625rem 0; }
.language-panel-head strong { font: 600 .9375rem/1.4 var(--font-ui); }
.language-panel-close { display: inline-flex; width: var(--control-height); min-height: var(--control-height); align-items: center; justify-content: center; padding: 0; }
.language-panel-close svg { width: 1rem; height: 1rem; }
.edition-menu-label { margin-top: .375rem; padding: .875rem .625rem .35rem; border-top: 1px solid var(--line); color: var(--muted); font: 500 var(--type-caption)/1.4 var(--font-ui); }
.language-edition { --edition-ink: #305f80; --edition-soft: #e5eef3; display: grid; min-height: 4rem; grid-template-columns: 2.25rem minmax(0, 1fr) 1rem; align-items: center; gap: .75rem; padding: .625rem; border: 1px solid transparent; border-radius: .5rem; color: var(--ink); background: transparent; font: 550 1rem/1.3 var(--font-editorial); text-decoration: none; transition: color var(--duration-quick), background-color var(--duration-state); }
.edition-eo { --edition-ink: #2f684d; --edition-soft: #e4eee6; }
.edition-la { --edition-ink: #70462f; --edition-soft: #f0e7dd; }
.edition-emblem { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; color: var(--edition-ink); border: 1px solid color-mix(in srgb, var(--edition-ink) 18%, transparent); border-radius: .625rem; background: var(--edition-soft); font: 650 .7rem/1 var(--font-ui); letter-spacing: .06em; }
.edition-copy { display: grid; min-width: 0; gap: .15rem; }
.edition-copy small { color: var(--muted); font: 450 var(--type-caption)/1.4 var(--font-ui); }
.edition-check { display: inline-flex; width: 1rem; height: 1rem; visibility: hidden; }
.language-edition:not([aria-current="page"]):hover { background: var(--surface-tint); }
.language-edition[aria-current="page"] { color: var(--product-accent-ink); background: color-mix(in srgb, var(--product-accent-soft) 52%, var(--surface)); }
.language-edition[aria-current="page"] .edition-check { visibility: visible; }
.edition-interface { padding: .5rem .625rem .375rem; }
.language-switch { gap: .5rem; font-weight: 500; font-size: var(--type-caption); }
.language-switch select { min-height: var(--control-height); width: 100%; padding-block: .5rem; border-radius: .5rem; border-color: var(--line); background-color: var(--surface-raised); font-size: var(--type-caption); box-shadow: none; }
.edition-interface p { margin-top: .5rem; color: var(--muted); font: 400 var(--type-caption)/1.5 var(--font-ui); }
.brand-mark { display: grid; width: 2.375rem; height: 2.375rem; flex: 0 0 auto; place-items: center; border: 0; border-radius: .75rem; color: #fffaf0; background: var(--action-deep); transition: background-color var(--duration-state); }
.brand-signal { display: flex; height: 1.25rem; align-items: center; justify-content: center; gap: .15rem; }
.brand-signal i { display: block; width: .14rem; height: .4rem; border-radius: 999px; background: currentColor; transform-origin: center; }
.brand-signal i:nth-child(2) { height: .85rem; }
.brand-signal i:nth-child(3) { height: .6rem; }
.brand-signal i:nth-child(4) { height: 1.15rem; }
.brand-signal i:nth-child(5) { height: .5rem; }
.masthead-aside { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; justify-content: end; gap: .5rem; }
.masthead-aside button, .masthead-aside .sign-in-link { min-height: var(--control-height); border-radius: var(--control-radius); border-color: transparent; background: transparent; box-shadow: none; }
.masthead-aside .sign-in-link { padding: .5rem .75rem; white-space: nowrap; }
.masthead-aside button { color: var(--action-deep); }
.masthead-aside .account-button { position: relative; display: grid; width: var(--control-height); min-width: var(--control-height); height: var(--control-height); flex: 0 0 var(--control-height); place-items: center; padding: 1px; border-radius: 50%; }
.account-avatar-ring { --usage-percent: 100%; display: grid; width: 38px; height: 38px; place-items: center; padding: 2px; border-radius: 50%; background: conic-gradient(var(--action) var(--usage-percent), var(--surface-tint) 0); transition: --usage-percent 450ms var(--ease); }
.account-avatar { display: grid; width: 100%; height: 100%; place-items: center; overflow: hidden; border: 2px solid var(--surface); border-radius: 50%; color: #fffefa; background: var(--terracotta); font: 600 .6875rem/1 var(--font-ui); }
.account-avatar img { width: 100%; height: 100%; object-fit: cover; }
body[data-principal-subject]:not([data-principal-subject=""]) .sign-in-link,
body[data-principal-subject]:not([data-principal-subject=""]) .signed-out-intro,
body[data-principal-subject]:not([data-principal-subject=""]) .developer-access { display: none; }

/* Visitor arrival: an editorial welcome immediately followed by the tool. */
.visitor-welcome { display: grid; min-width: 0; width: 100%; max-width: none; gap: .5rem .875rem; margin: clamp(1rem, 3vw, 1.9rem) 0 clamp(1rem, 2.5vw, 1.6rem); }
.welcome-kicker { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: .625rem; color: var(--product-accent-ink); font: 550 var(--type-caption)/1.4 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; }
.welcome-kicker::before { content: ""; width: 1.75rem; height: 1px; flex: 0 0 auto; background: var(--line-strong); }
.welcome-stage { padding-left: .65rem; color: var(--muted); border-left: 1px solid var(--line-strong); font-weight: 600; letter-spacing: .04em; white-space: nowrap; }
.visitor-welcome h2 { max-width: 46rem; font: 600 clamp(2.5rem, 6vw, 4rem)/1.06 var(--font-display); letter-spacing: -.025em; text-wrap: balance; }
.welcome-deck { max-width: 37rem; color: var(--ink); font: 430 clamp(1.15rem, 2vw, 1.35rem)/1.48 var(--font-editorial); }
.visitor-welcome small { max-width: 42rem; margin-top: .25rem; color: var(--muted); font: var(--type-caption)/1.55 var(--font-ui); }
body[data-principal-subject=""] .app-footer { margin-top: 1.25rem; }

/* Composer: text is the subject; secondary controls do not compete with it. */
.composer-secondary { display: flex; min-width: 0; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; }
.input-options { min-width: 0; max-width: 28rem; align-self: center; }
.input-options > summary { display: flex; align-items: center; gap: .5rem; padding-block: .625rem; font-size: var(--type-caption); list-style: none; }
.input-options > summary::-webkit-details-marker { display: none; }
#character-count { flex: 0 0 auto; color: var(--muted); white-space: nowrap; font: 500 var(--type-caption)/1.4 var(--font-ui); font-variant-numeric: tabular-nums; }
.quote-language-control { display: grid; min-height: var(--control-height); grid-template-columns: 1.75rem minmax(0, 1fr) 1.125rem; align-items: center; gap: .5rem; max-width: 28rem; padding: .25rem .375rem; color: var(--muted); border: 1px solid transparent; border-radius: .625rem; cursor: pointer; font: 600 var(--type-caption)/1.45 var(--font-ui); transition: color var(--duration-quick), border-color var(--duration-quick), background-color var(--duration-state); }
.quote-language-glyph { display: grid; width: 1.75rem; height: 1.75rem; place-items: center; color: var(--action); border-radius: .5rem; background: var(--surface-tint); font: 600 1.25rem/1 var(--font-editorial); transition: color var(--duration-state), background-color var(--duration-state); }
.quote-language-control input { position: relative; width: 1.125rem; height: 1.125rem; grid-column: 3; margin: 0; appearance: none; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface-raised); }
.quote-language-control input::after { content: ""; position: absolute; width: .35rem; height: .6rem; top: .12rem; left: .34rem; border-right: 2px solid #fff; border-bottom: 2px solid #fff; opacity: 0; transform: rotate(42deg) scale(.6); transition: opacity var(--duration-quick), transform var(--duration-state) var(--ease); }
.quote-language-control input:checked { border-color: var(--action); background: var(--action); }
.quote-language-control input:checked::after { opacity: 1; transform: rotate(42deg) scale(1); }
.quote-language-control:has(input:checked) { color: var(--action-deep); border-color: var(--product-accent); background: var(--action-soft); }
.quote-language-control:has(input:checked) .quote-language-glyph { color: #fffefa; background: var(--action); }
.quote-language-control:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.quote-language-control input:focus-visible { outline: 0; box-shadow: none; }
.quote-language-note { display: block; max-width: 28rem; padding: .125rem .25rem .5rem 2.25rem; color: var(--muted); font: 400 var(--type-caption)/1.5 var(--font-ui); }
.language-input-tools { min-width: 0; border: 1px solid var(--line); border-radius: var(--control-radius); background: var(--surface-tint); transition: border-color var(--duration-enter), background-color var(--duration-enter); }
.language-input-tools > summary { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .75rem; min-height: var(--control-height); padding: .5rem .75rem; color: var(--action-deep); font: 550 var(--type-caption)/1.5 var(--font-ui); list-style: none; }
.language-input-tools > summary::-webkit-details-marker { display: none; }
.language-input-mode { color: var(--muted); font-weight: 400; }
.language-input-tools[data-orthography="h-system"] .language-input-mode { color: var(--action-deep); font-weight: 650; }
.language-input-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(13rem, 18rem); gap: .75rem 1rem; padding: .25rem .75rem .75rem; }
.language-input-tools[data-orthography="h-system"] { border-color: var(--product-accent); background: var(--product-accent-soft); }
.language-character-row { display: grid; min-width: 0; gap: .375rem; align-content: start; }
.language-character-row > strong { color: var(--muted); font: 550 var(--type-caption)/1.4 var(--font-ui); }
.language-character-keys { display: flex; min-width: 0; flex-wrap: wrap; gap: .25rem; }
.language-character-key { width: var(--control-height); min-width: var(--control-height); min-height: var(--control-height); padding: .35rem; color: var(--action-deep); border-color: var(--line); background: var(--surface-raised); box-shadow: none; font: 600 1rem/1 var(--font-editorial); }
.language-orthography-control { min-width: 0; padding: 0; margin: 0; align-self: start; border: 0; }
.language-orthography-control legend { margin-bottom: .375rem; padding: 0; color: var(--muted); font: 550 var(--type-caption)/1.4 var(--font-ui); }
.language-orthography-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .2rem; padding: .2rem; border: 1px solid var(--line); border-radius: .7rem; background: rgba(255,255,255,.48); box-shadow: inset 0 1px 2px rgba(32,49,58,.025); }
.language-orthography-option { min-height: var(--control-height); padding: .45rem .6rem; color: var(--muted); border-color: transparent; border-radius: .5rem; background: transparent; box-shadow: none; font-size: var(--type-caption); }
.language-orthography-option[aria-checked="true"] { color: #fffefa; border-color: var(--product-accent); background: var(--product-accent); box-shadow: 0 2px 8px var(--product-glow); }
.language-input-footer { display: flex; min-width: 0; grid-column: 1 / -1; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1rem; }
.language-orthography-note { min-width: min(100%, 24rem); flex: 1 1 30rem; color: var(--muted); font: var(--type-caption)/1.5 var(--font-ui); }
.language-guide-inline { width: fit-content; flex: 0 0 auto; color: var(--action); font: 650 var(--type-caption)/1.4 var(--font-ui); }
#analyze-button { min-width: 9rem; flex: 0 0 auto; }
#analyze-button .ui-icon { order: 2; }
#analysis-form[aria-busy="true"] #analyze-button { cursor: wait; opacity: .78; }
.developer-access { margin-top: 1.25rem; border-top: 1px solid var(--line); }
.developer-access > summary { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .75rem; padding-block: .75rem; color: var(--action); font-weight: 600; }
.developer-access > summary > span { display: grid; gap: .1rem; }
.developer-access > summary small { color: var(--muted); font-weight: 400; }
.developer-access-body { display: grid; gap: .75rem; padding-bottom: 1rem; }
.key-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: end; padding: 1rem; border: 1px solid var(--line); border-radius: var(--control-radius); background: var(--surface-tint); }
.key-actions { max-width: 20rem; }
#key-status { width: 100%; font-size: var(--type-caption); line-height: 1.5; }
#error, #feedback-status { margin-top: 1rem; padding: .875rem 1rem; border: 1px solid; border-radius: var(--control-radius); font: var(--type-caption)/1.5 var(--font-ui); overflow-wrap: anywhere; }
#error { color: var(--terracotta-ink); border-color: var(--terracotta-line); background: var(--terracotta-soft); }
#feedback-status { color: var(--action-deep); border-color: var(--line-strong); background: var(--action-soft); }
.app-footer { margin-top: clamp(1.5rem, 4vw, 3rem); padding: .25rem 0; border-top: 1px solid var(--line-strong); color: var(--muted); background: transparent; box-shadow: none; }
.app-footer .developer-access { margin: 0; border-top-color: var(--line); }
.language-scope { margin: 0; color: var(--muted); border: 0; background: transparent; font: var(--type-body)/1.55 var(--font-ui); }
.language-scope > summary { display: grid; min-height: 4.25rem; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .75rem; padding: .8rem .25rem; color: var(--muted); list-style: none; cursor: pointer; }
.language-scope > summary::-webkit-details-marker { display: none; }
.language-scope > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--control-radius); box-shadow: none; }
.language-scope > summary .disclosure-icon { margin-left: 0; }
.language-scope .disclosure-icon, .language-scope[open] > summary .disclosure-icon { color: var(--muted); }
.language-scope strong { font-weight: 650; }
.language-scope small { color: var(--muted); font: inherit; }
.about-summary-copy { display: grid; min-width: 0; gap: .125rem; }
.about-summary-copy strong { color: var(--ink); font: 650 1.2rem/1.3 var(--font-ui); letter-spacing: -.035em; }
.footer-brand-dot { color: var(--product-accent); }
.about-summary-copy small { font-size: var(--type-caption); }
.about-summary-action { display: inline-flex; flex: 0 0 auto; align-items: center; color: var(--action); font-weight: 600; }
.about-body { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(12rem, 1fr); align-items: start; gap: 1.5rem clamp(1.5rem, 4vw, 3rem); padding: clamp(1rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: .875rem; background: var(--surface); }
.language-scope p { max-width: 48rem; }
.about-column { display: grid; min-width: 0; align-content: start; gap: .875rem; }
.about-lede { color: var(--ink); font: 450 1rem/1.55 var(--font-editorial); }
.language-scope .about-access { max-width: none; grid-column: 1 / -1; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--type-caption); }
.about-scope { padding-left: .875rem; border-left: 2px solid var(--product-accent); }
.about-resources-label { color: var(--muted); font: 650 var(--type-caption)/1.4 var(--font-ui); letter-spacing: .06em; }
.about-actions { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.language-scope .about-install-status { max-width: none; grid-column: 1 / -1; margin-top: -.75rem; color: var(--muted); font-size: var(--type-caption); }
.edition-link { display: inline-flex; color: var(--action); font-weight: 600; text-decoration-thickness: 1px; }
.feedback-head { align-items: start; }
.support-link { display: inline-flex; min-height: var(--control-height); flex: 0 0 auto; align-items: center; gap: .4rem; padding: .45rem .7rem; color: var(--product-accent-ink); border: 1px solid color-mix(in srgb, var(--product-accent) 28%, var(--line)); border-radius: var(--control-radius); background: var(--product-accent-soft); font: 650 var(--type-caption)/1.3 var(--font-ui); text-decoration: none; }
.result-support { width: fit-content; margin: .875rem var(--panel-padding) .25rem auto; }
.support-symbol { font: 500 1.05rem/1 var(--font-editorial); }
.app-footer .developer-access > summary { padding: .75rem 1rem; }
.app-footer .developer-access-body { padding: 0 1rem 1rem; }
.app-footer .developer-access > summary, .app-footer .developer-link { color: var(--action); }
.app-footer .developer-access > summary small { color: var(--muted); }

/* Navigation focus: direct targets share a quiet spotlight, with readable siblings.
   Padding joins the footer hit areas; nested language links own their own group. */
.app-header .masthead-aside > :is(a, button), .app-header .edition-summary,
.app-header .edition-popover > .language-edition, .app-footer .about-actions > :is(a, button) {
  color: var(--navigation-sibling-ink, var(--navigation-idle-ink, var(--ink)));
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
  transition: color var(--duration-state) var(--ease), text-decoration-color var(--duration-state) var(--ease), background-color var(--duration-state) var(--ease);
}
.app-header .edition-popover { --navigation-sibling-ink: initial; }
.app-header .masthead-aside > .sign-in-link,
.app-header .edition-popover > .language-edition[aria-current="page"],
.app-footer .about-actions > :is(a, button) { --navigation-idle-ink: var(--product-accent-ink); }
.app-footer .about-actions { display: grid; justify-items: start; gap: .125rem; }
.app-footer .about-actions > :is(a, button) { min-height: var(--control-height); align-items: center; padding: .625rem .75rem; border-radius: .375rem; }
.app-header .masthead-aside:has(> :is(a, button):focus-visible, > .edition-switcher :focus-visible),
.app-header .edition-popover:has(> .language-edition:focus-visible),
.app-footer .about-actions:has(> :is(a, button):focus-visible) { --navigation-sibling-ink: var(--muted); }
.app-header .masthead-aside > :is(a, button):focus-visible,
.app-header .edition-switcher:has(:focus-visible) .edition-summary,
.app-header .edition-popover > .language-edition:focus-visible,
.app-footer .about-actions > :is(a, button):focus-visible {
  color: var(--product-accent-ink);
  text-decoration-line: underline;
  text-decoration-color: currentColor;
}

/* Esperanto pronunciation guide: compact reference material, not an app screen. */
.guide-shell { width: min(58rem, calc(100% - var(--gutter) * 2)); }
.guide-header { margin-bottom: clamp(1.5rem, 4vw, 3rem); }
.guide-back { font-size: var(--type-caption); font-weight: 650; }
.guide-hero { display: grid; max-width: 48rem; gap: .75rem; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.guide-kicker { color: var(--terracotta-ink); font: 650 var(--type-caption)/1.4 var(--font-ui); letter-spacing: .09em; text-transform: uppercase; }
.guide-hero h1 { font-size: clamp(2.5rem, 7vw, 4.5rem); }
.guide-lead { max-width: 43rem; color: var(--muted); font: 400 clamp(1.0625rem, 2vw, 1.25rem)/1.55 var(--font-editorial); }
.guide-section { display: grid; gap: 1rem; margin-top: 1rem; padding: var(--panel-padding); }
.guide-section > h2 { font-size: clamp(1.35rem, 3vw, 1.75rem); }
.guide-section p, .guide-section li { max-width: 48rem; line-height: 1.65; }
.guide-rule-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.guide-rule { padding: 1rem; border: 1px solid var(--line); border-radius: var(--control-radius); background: var(--surface-raised); }
.guide-rule strong { display: block; margin-bottom: .25rem; color: var(--action-deep); }
.guide-example, .guide-ipa { font-family: var(--ipa-font); font-variant-ligatures: none; }
.guide-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--control-radius); background: var(--surface-raised); }
.guide-table { width: 100%; border-collapse: collapse; font-size: var(--type-caption); }
.guide-table th, .guide-table td { padding: .625rem .75rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.guide-table tr:last-child th, .guide-table tr:last-child td { border-bottom: 0; }
.guide-table th { color: var(--action-deep); font-weight: 650; }
.guide-caution { padding: .875rem 1rem; color: var(--terracotta-ink); border-left: .2rem solid var(--terracotta); background: var(--terracotta-soft); }
.guide-references { padding-left: 1.25rem; }
.guide-references li + li { margin-top: .6rem; }
.guide-meta { color: var(--muted); font-size: var(--type-caption); }

/* Transcription is opaque and locale-independent, including its wrapping. */
#result { display: grid; min-inline-size: 0; gap: .875rem; margin-top: 1.25rem; }
#result > .hero, #result > .passage-nav { margin-bottom: 0; }
#result > .result-hero { overflow: hidden; padding: 0; background: var(--surface); }
/* The reading component owns its palette. Light paper does not fade the glyphs,
   and changing it must never recolor unrelated surfaces such as the footer. */
.reading-stage {
  --reading-surface: #faf9f5;
  --reading-ink: var(--ink);
  --reading-muted: var(--muted);
  --reading-border: var(--line);
  --reading-accent: var(--product-accent-ink);
  --reading-selection: var(--product-accent-soft);
  --reading-dim: color-mix(in srgb, var(--reading-ink) 64%, var(--reading-surface));
  --reading-focus: var(--focus);
  --reading-caution: #805311;
  --reading-warning: #8a4735;
  padding: clamp(1rem, 2.5vw, 1.5rem) var(--panel-padding) clamp(1.25rem, 3vw, 1.75rem);
  color: var(--reading-ink);
  border-bottom: 1px solid var(--reading-border);
  background: var(--reading-surface);
}
.result-heading { flex-wrap: wrap; gap: .5rem 1rem; margin-bottom: .875rem; }
#result-title { color: var(--reading-ink); font: 500 1.0625rem/1.4 var(--font-editorial); }
#result-title:focus { outline: 0; }
#result-title:focus-visible { outline: 2px solid var(--reading-focus); outline-offset: 4px; border-radius: .125rem; }
.reading-stage button:focus-visible, .reading-stage a:focus-visible { outline-color: var(--reading-focus); }
.result-actions { gap: .25rem; padding: 0; border: 0; background: transparent; box-shadow: none; }
.result-actions button { position: relative; min-height: var(--control-height); padding-inline: .75rem; color: var(--reading-muted); border-color: transparent; border-radius: var(--control-radius); background: transparent; box-shadow: none; font-size: var(--type-caption); }
.result-actions button::after { content: ""; position: absolute; height: 1px; inset: auto .75rem .42rem; background: currentColor; opacity: 0; transform: scaleX(.35); transform-origin: left; transition: opacity var(--duration-quick), transform var(--duration-enter) var(--ease); }
.reading-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
.reading-column { min-width: 0; padding: .8rem 0 0; border-top: 1px solid var(--reading-border); }
.reading-source { grid-row: 1; }
.reading-transcription { position: relative; grid-row: 2; padding: 0; border: 0; }
.reading-pair-label { color: var(--reading-muted); font: 540 var(--type-caption)/1.4 var(--font-ui); letter-spacing: .01em; }
#reading-ipa-label { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Reserve the note row so selecting a word never shifts the transcription. */
.reading-labels { display: flex; min-height: calc(var(--type-caption) * 1.4); flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1rem; }
.ipa-selection-note { margin-left: auto; color: var(--reading-accent); font: 500 var(--type-caption)/1.4 var(--font-ui); }
.ipa-display { min-width: 0; padding-block: .5rem .15rem; }
elparolo-ipa { display: block; }
.ipa-line { min-width: 0; white-space: pre-wrap; word-break: normal; overflow-wrap: anywhere; }
/* Keep normal syllables intact; only an over-wide unit uses emergency wrapping. */
.ipa-chunk, .ipa-syllable { display: inline-block; max-inline-size: 100%; white-space: normal; overflow-wrap: anywhere; break-inside: avoid; }
.ipa-line, .passage-ipa, .phonemes, .variant-ipa, .history-ipa { font-family: var(--ipa-font); font-synthesis: none; font-variant-ligatures: none; }
#ipa { max-width: 100%; padding-block: .06em .12em; overflow: visible; color: var(--reading-ink); font: 400 clamp(2.75rem, 6vw, 3.5rem)/1.3 var(--ipa-font); font-variant-ligatures: none; letter-spacing: 0; }
#ipa[data-density="balanced"] { font-size: clamp(2.75rem, 5vw, 3rem); }
#ipa[data-density="compact"] { font-size: clamp(2.125rem, 4.2vw, 2.5rem); }
.ipa-syllable { margin-inline: -.01em; padding: .01em .04em .04em; }
/* Highlight is ownership, shown as light rather than marks: with a word selected the
   line recedes to a quiet ink and the word's own sounds come up in the accent, one
   after another in reading order. No boxes, no underlines — a liaison consonant simply
   lights with its word while the vowel it leans on stays dim. */
elparolo-ipa { transition: color var(--duration-focus) var(--ease); }
#ipa[data-selected] { color: var(--reading-dim); }
.ipa-sound { transition: color var(--duration-focus) var(--ease); }
elparolo-ipa[data-layout="syllables"] .ipa-sound[data-token-id] { cursor: pointer; }
.ipa-sound.selected { color: var(--reading-accent); transition-delay: calc(var(--sound-order, 0) * 26ms); }
.ipa-sound.preview:not(.selected) { color: var(--reading-ink); }
elparolo-ipa:not([data-selected]) .ipa-sound.preview { color: var(--reading-accent); }
.word.preview:not(.selected) { background: color-mix(in srgb, var(--product-accent-soft) 40%, var(--surface-raised)); }
#result-text { margin-top: .45rem; color: var(--reading-ink); font: 500 clamp(1.25rem, 2.6vw, 1.55rem)/1.45 var(--font-editorial); overflow-wrap: anywhere; text-wrap: pretty; }
.reading-token-choice { display: inline; padding: 0 .1em; color: inherit; border: 0; border-bottom: 1px dashed var(--reading-accent); border-radius: 0; background: transparent; font: inherit; box-shadow: none; }
.reading-token-count { margin-inline-start: .3em; color: var(--reading-accent); font: 500 var(--type-caption)/1 var(--font-ui); vertical-align: super; }
.reading-token-choice { position: relative; display: inline-block; transition: color 180ms var(--ease), transform 280ms var(--ease); }
.reading-token-choice::after { content: ""; position: absolute; inset: auto 0 -1px; height: 2px; border-radius: 2px; background: var(--reading-accent); transform: scaleX(0); transform-origin: center; transition: transform 300ms var(--ease); }
.reading-token-choice:focus-visible::after { transform: scaleX(1); }
.reading-decisions { margin-top: 1.1rem; }
.reading-decision-list { display: grid; gap: .75rem; }
.reading-decision { min-width: 0; overflow: clip; border: 1px solid var(--reading-border); border-radius: var(--control-radius); background: var(--surface); transition: border-color var(--duration-state), box-shadow var(--duration-state); }
.reading-decision:focus-within { border-color: var(--reading-focus); }
.reading-decision:has(> summary:focus-visible) { outline: 2px solid var(--reading-focus); outline-offset: 3px; }
.reading-decision > summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .5rem 1.25rem; min-height: 4rem; padding: .875rem 1rem; color: var(--reading-ink); cursor: pointer; list-style: none; }
.reading-decision[open] > summary { background: color-mix(in srgb, var(--reading-surface) 65%, var(--surface)); }
.reading-decision > summary::-webkit-details-marker { display: none; }
.reading-decision-identity { display: flex; align-items: baseline; gap: .55rem; }
.reading-decision-word { font: 600 1.5rem/1.2 var(--font-editorial); }
.reading-decision-count { color: var(--reading-muted); font: var(--type-caption)/1.4 var(--font-ui); white-space: nowrap; }
.reading-decision-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; color: var(--reading-muted); font: var(--type-caption)/1.4 var(--font-ui); }
.reading-chosen-ipa { color: var(--reading-accent); font-size: 1.2rem; }
.reading-decision-affordance { display: inline-flex; align-items: center; gap: .65rem; color: var(--reading-accent); font: 500 var(--type-caption)/1.4 var(--font-ui); }
.reading-decision-affordance::after { content: ""; width: .4rem; height: .4rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform var(--duration-state); }
.reading-decision[open] > summary .reading-decision-affordance::after { transform: rotate(225deg); }
.reading-attention { display: flex; flex-wrap: wrap; gap: .35rem .8rem; margin-top: .65rem; }
.reading-attention-action { min-height: 2rem; padding: .25rem 0; color: var(--reading-accent); background: transparent; border: 0; border-bottom: 1px dashed var(--reading-accent); border-radius: 0; box-shadow: none; font: 500 var(--type-caption)/1.4 var(--font-ui); }
.reading-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border-block: 1px solid var(--reading-border); background: var(--reading-border); }
.reading-contrast-note { grid-column: 1 / -1; padding: .55rem 1rem; color: var(--reading-muted); background: var(--reading-surface); font: var(--type-caption)/1.5 var(--font-ui); }
.reading-contrast-note::before { content: ""; display: inline-block; width: 1.1rem; height: .45rem; margin-inline-end: .5rem; border-bottom: 2px solid var(--reading-accent); background: var(--reading-selection); vertical-align: .05em; }
.reading-option-group-heading { grid-column: 1 / -1; margin: 0; padding: .55rem 1rem; color: var(--reading-muted); background: var(--reading-surface); font: 550 var(--type-caption)/1.4 var(--font-ui); }
.reading-option-group-heading[data-kind="cue"] { color: var(--reading-accent); background: var(--reading-selection); }
.reading-recommendation { display: grid; gap: .35rem; padding: .8rem 1rem; border-top: 1px solid var(--reading-border); color: var(--reading-muted); background: var(--reading-surface); font: var(--type-body)/1.6 var(--font-ui); }
.reading-recommendation-title { color: var(--reading-ink); font-weight: 550; }
.reading-recommendation-context { font-style: italic; }
.reading-recommendation-explanation, .reading-recommendation-note { margin: 0; }
.reading-recommendation-note { font-size: var(--type-caption); }
.reading-unranked-note { margin: 0; padding: .65rem 1rem; border-top: 1px solid var(--reading-border); color: var(--reading-muted); background: var(--reading-surface); font: var(--type-caption)/1.55 var(--font-ui); }
.reading-option { display: grid; min-width: 0; grid-template-rows: 1fr auto auto; background: var(--surface); transition: background-color var(--duration-state), box-shadow var(--duration-state); }
.reading-option:has(.reading-option-select:focus-visible) { position: relative; z-index: 1; outline: 2px solid var(--reading-focus); outline-offset: -2px; }
.reading-option[data-active="true"] { background: color-mix(in srgb, var(--reading-selection) 45%, var(--surface)); box-shadow: inset 3px 0 var(--reading-accent); }
.reading-option-select { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr) auto; grid-template-areas: "indicator label action" ". gloss gloss" ". ipa ipa" ". condition condition"; align-content: start; align-items: baseline; width: 100%; min-height: 9.5rem; padding: 1.15rem 1.15rem .95rem; gap: .25rem .7rem; border: 0; border-radius: 0; color: var(--reading-ink); background: transparent; box-shadow: none; text-align: start; white-space: normal; }
.reading-option-select:disabled { opacity: 1; cursor: default; }
.reading-option-select:focus-visible { outline: 0; }
.reading-option-label { grid-area: label; color: var(--reading-ink); font: 600 var(--type-section)/1.25 var(--font-editorial); }
.reading-option-ipa { grid-area: ipa; margin-top: .15rem; color: var(--reading-ink); font: 400 1.85rem/1.3 var(--ipa-font); }
.reading-ipa-difference { padding-inline: .025em; border-radius: .08em; color: var(--reading-accent); background: var(--reading-selection); box-shadow: inset 0 -2px var(--reading-accent); font: inherit; }
.reading-option-condition { grid-area: condition; color: var(--reading-muted); font: 400 var(--type-caption)/1.5 var(--font-ui); }
.reading-option-source-gloss { grid-area: gloss; color: var(--reading-muted); font: 400 var(--type-body)/1.5 var(--font-ui); }
.reading-option-source-gloss > span { color: var(--reading-ink); }
.reading-choice-indicator { grid-area: indicator; display: grid; place-items: center; width: 1rem; height: 1rem; border: 1px solid var(--reading-border); border-radius: 50%; color: var(--surface); font: 600 .7rem/1 var(--font-ui); }
.reading-option[data-active="true"] .reading-choice-indicator { border-color: var(--reading-accent); background: var(--reading-accent); }
.reading-option-action { grid-area: action; color: var(--reading-accent); font: 550 var(--type-caption)/1.4 var(--font-ui); white-space: nowrap; }
.reading-option-action { position: relative; }
.reading-option-action::before { content: ""; position: absolute; inset: auto 0 -.25rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 240ms var(--ease); }
.reading-option-select:focus-visible .reading-option-action::before { transform: scaleX(1); }
.reading-choice-indicator { transition: background-color 160ms, border-color 160ms, transform 240ms var(--ease); }
.reading-option-select:focus-visible .reading-choice-indicator { border-color: var(--reading-accent); transform: scale(1.1); }
.reading-option[data-active="false"] .reading-option-action::after { content: " →"; }
.reading-option-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; padding: .55rem 1.15rem .7rem 3.1rem; border-top: 1px solid color-mix(in srgb, var(--reading-border) 60%, var(--surface)); background: transparent; }
.reading-compare, .reading-option-evidence > summary { display: block; width: fit-content; min-height: 2rem; padding: .35rem 0; border: 0; border-radius: .2rem; color: var(--reading-muted); background: transparent; box-shadow: none; font: 450 var(--type-caption)/1.4 var(--font-ui); cursor: pointer; }
.reading-compare { color: var(--reading-accent); font-weight: 600; text-underline-offset: .2em; }
.reading-compare::after { content: " ↗"; }
.reading-compare[aria-pressed="true"] { color: var(--reading-accent); text-decoration: underline; text-underline-offset: .2em; }
.reading-option-evidence { flex: 1; min-width: min(7rem, 100%); color: var(--reading-muted); font: var(--type-caption)/1.6 var(--font-ui); }
.reading-option-evidence-note { flex: 1; min-width: min(7rem, 100%); padding: .35rem 0; color: var(--reading-muted); font: var(--type-caption)/1.4 var(--font-ui); }
.reading-option-evidence > summary::after { content: " +"; }
.reading-option-evidence[open] > summary::after { content: " −"; }
.reading-option-evidence > summary::-webkit-details-marker { display: none; }
.reading-option-evidence[open] { flex-basis: 100%; }
.reading-option-evidence ul { padding-inline-start: 1.1rem; margin-block: .25rem; overflow-wrap: anywhere; }
.reading-option-evidence li + li { margin-top: .3rem; }
.reading-option-evidence a { color: inherit; text-underline-offset: .15em; }
.reading-option-evidence .reading-gloss-list { margin-block: .55rem .7rem; padding-inline-start: 1.1rem; color: var(--reading-ink); font: var(--type-caption)/1.5 var(--font-ui); }
.reading-option-evidence .reading-gloss-list li + li { margin-top: .55rem; }
.reading-gloss-source { display: block; margin-top: .1rem; color: var(--reading-muted); font: var(--type-caption)/1.4 var(--font-ui); }
.reading-option-full-gloss { margin: .35rem 0 .5rem; color: var(--reading-muted); font: var(--type-caption)/1.5 var(--font-ui); overflow-wrap: anywhere; }
.reading-comparison { min-width: 0; padding: .75rem 1rem; border-top: 1px solid var(--reading-border); }
.reading-comparison .ipa-line { color: var(--reading-ink); font-size: 1.25rem; }
.reading-comparison p { margin-top: .35rem; color: var(--reading-muted); font: var(--type-caption)/1.5 var(--font-ui); }
.reading-compare[aria-busy="true"]::after { content: ""; display: inline-block; width: .8em; height: .8em; margin-inline-start: .4em; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -.05em; }
.reading-reset { min-height: 2.25rem; margin-inline-start: 1rem; padding: .5rem .1rem 0; border: 0; border-radius: 0; color: var(--reading-muted); background: transparent; box-shadow: none; font: var(--type-caption)/1.4 var(--font-ui); text-decoration: underline; text-underline-offset: .2em; }
.reading-decision-status:empty { display: none; }
.reading-decision-status { margin-top: .5rem; color: var(--reading-muted); font: var(--type-caption)/1.5 var(--font-ui); }
.reading-report { min-height: 2.75rem; margin: .35rem .5rem .35rem 1rem; padding: .35rem 0; border: 0; color: var(--reading-muted); background: transparent; box-shadow: none; font: var(--type-caption)/1.5 var(--font-ui); text-decoration: underline; text-underline-offset: .2em; }
.reading-decisions[aria-busy="true"] .reading-decision-status::before { content: ""; display: inline-block; width: .8em; height: .8em; margin-inline-end: .45em; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; }
.reading-speech-note { margin-top: .6rem; color: var(--muted); font: var(--type-caption)/1.5 var(--font-ui); }
.speech-dock[data-state="unavailable"] .reading-speech-note { display: none; }
.word-reading-status { color: var(--muted); font: var(--type-caption)/1.5 var(--font-ui); }
.normalized-text-note { display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin-top: .6rem; padding: .5rem .7rem; color: var(--reading-muted); border-left: 2px solid var(--reading-accent); background: var(--reading-selection); font: var(--type-caption)/1.5 var(--font-ui); }
.normalized-text-note #normalized-text { color: var(--reading-ink); font: 500 .9rem/1.5 var(--font-editorial); overflow-wrap: anywhere; }
.ipa-gap { display: inline-flex; max-inline-size: 100%; align-items: baseline; gap: .35rem; margin-block: .08em; padding: .18em .3em; color: var(--terracotta-ink); border: 1px solid var(--terracotta-line); border-radius: .25rem; background: var(--terracotta-soft); font: 600 .42em/1.2 var(--font-ui); vertical-align: .18em; white-space: normal; }
.ipa-gap-surface { min-width: 0; overflow-wrap: anywhere; font-family: var(--font-editorial); font-size: 1.35em; }
.ipa-gap-label { flex: 0 0 auto; white-space: nowrap; font-size: .72em; font-weight: 600; }
.ipa-gap { min-height: 2rem; box-shadow: none; }
.ipa-gap[data-kind="choice"] { color: var(--reading-accent); border-color: var(--reading-border); background: var(--reading-selection); }
.ipa-coverage-note { margin-top: .75rem; color: var(--reading-warning); font: var(--type-caption)/1.5 var(--font-ui); }
.claim-banner { display: grid; grid-template-columns: .5rem auto minmax(0, 1fr); align-items: center; gap: .375rem .625rem; margin-top: 1rem; color: var(--reading-muted); }
.claim-glyph { width: .375rem; height: .375rem; border-radius: 50%; background: var(--reading-accent); }
.claim-banner strong { font: 550 var(--type-caption)/1.4 var(--font-ui); }
.claim-banner p { color: var(--reading-muted); font: var(--type-caption)/1.5 var(--font-ui); }
.claim-banner[data-status="supported"] { grid-template-columns: .5rem auto; justify-content: start; }
.claim-banner[data-status="supported"] #claim-description { display: none; }
.claim-banner[data-status="conditional"] { color: var(--reading-caution); }
.claim-banner[data-status="conditional"] .claim-glyph { background: var(--reading-caution); }
.claim-banner[data-status="abstained"] { color: var(--reading-warning); }
.claim-banner[data-status="abstained"] .claim-glyph { background: var(--reading-warning); }
.claim-banner[data-status="partial"] { color: var(--reading-warning); }
.claim-banner[data-status="partial"] .claim-glyph { background: var(--reading-warning); }
.result-hero > .speech-dock { margin-top: 0; padding: 1.25rem var(--panel-padding) var(--panel-padding); border-top: 0; }
.result-hero > .result-sign-in { margin-right: var(--panel-padding); margin-bottom: var(--panel-padding); margin-left: var(--panel-padding); }
.result-sign-in { display: inline-grid; justify-self: start; min-width: 0; gap: .125rem; margin-top: 1rem; padding: .7rem .875rem; color: var(--action-deep); border: 1px solid var(--line-strong); border-radius: var(--control-radius); background: var(--surface-tint); text-decoration: none; }
.result-sign-in span { font-size: var(--type-caption); font-weight: 600; }
.result-sign-in small { color: var(--muted); font-size: var(--type-caption); line-height: 1.4; }

/* Speech: one transport. The native player is an implementation detail. */
.speech-dock { display: grid; gap: .75rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); transition: border-color 220ms var(--ease); }
.speech-dock[data-state="busy"], .speech-dock[data-state="playing"] { border-color: var(--product-accent); }
.speech-dock[data-state="unavailable"] { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: .5rem .875rem; }
.speech-dock[data-state="unavailable"] .tts-primary,
.speech-dock[data-state="unavailable"] .tts-advanced,
.speech-dock[data-state="unavailable"] .tts-preference-scope { display: none; }
.speech-dock[data-state="unavailable"] .listen-head { display: block; }
.speech-dock[data-state="unavailable"] .listen-head h2 { color: var(--ink); font: 650 var(--type-caption)/1.45 var(--font-ui); }
.speech-dock[data-state="unavailable"] #tts-status { grid-column: 2; }
.speech-dock[data-state="unavailable"] .audio-output { display: none; }
.listen-head { align-items: baseline; flex-wrap: wrap; gap: .25rem 1rem; }
.listen-head h2 { font: 500 1.0625rem/1.4 var(--font-editorial); }
.tts-preference-scope { color: var(--muted); font: var(--type-caption)/1.4 var(--font-ui); }
.tts-primary { display: grid; min-width: 0; grid-template-columns: auto minmax(0, 1fr) auto; gap: .45rem 1rem; align-items: center; padding: .625rem .75rem; border: 1px solid var(--line); border-radius: calc(var(--control-radius) + .125rem); background: var(--surface); box-shadow: inset 0 1px 0 rgba(255,255,255,.8); transition: border-color var(--duration-state), background-color var(--duration-state); }
.active-voice { display: grid; min-width: 0; gap: .125rem; }
.active-voice strong { overflow: hidden; font: 520 1.0625rem/1.3 var(--font-editorial); text-overflow: ellipsis; white-space: nowrap; }
.active-voice span { color: var(--muted); font: var(--type-caption)/1.4 var(--font-ui); }
.transport-button { position: relative; width: 2.875rem; min-width: 2.875rem; height: 2.875rem; padding: 0; border-radius: 50%; box-shadow: 0 5px 14px var(--product-glow); isolation: isolate; }
.transport-button::before { content: ""; position: absolute; z-index: -1; inset: -1px; border: 1px solid var(--product-accent); border-radius: inherit; opacity: 0; transform: scale(.88); transition: opacity var(--duration-enter), transform 420ms var(--ease); }
.speech-dock[data-state="playing"] .transport-button::before { opacity: 1; transform: scale(1.18); }
.transport-button .button-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.transport-button .ui-icon { width: 1.125rem; height: 1.125rem; }
.speech-dock[data-state="busy"] .transport-button .ui-icon { opacity: 0; }
.speech-dock[data-state="busy"] .transport-button::after { content: ""; position: absolute; width: 1rem; height: 1rem; inset: 0; margin: auto; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%; animation: transport-spin 700ms linear infinite; }
.playback-clock { min-width: 2.5rem; color: var(--muted); text-align: right; font: 500 var(--type-caption)/1 ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; }
.transport-progress { position: relative; display: flex; min-height: var(--control-height); grid-column: 2 / 4; align-items: center; }
#playback-seek { position: relative; z-index: 1; height: var(--control-height); min-height: var(--control-height); margin: 0; }
.speech-dock[data-access-mode="trial"] .tts-advanced,
.speech-dock[data-access-mode="trial"] .tts-preference-scope { display: none; }
.voice-description { display: -webkit-box; min-width: 0; overflow: hidden; color: var(--muted); font: var(--type-caption)/1.45 var(--font-ui); -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.tts-advanced > summary { display: flex; align-items: center; gap: .5rem; color: var(--product-accent-ink); font-size: var(--type-label); list-style: none; }
.tts-advanced > summary::-webkit-details-marker { display: none; }
.voice-tuning { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); gap: .75rem; align-items: stretch; padding: .75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.control-tile { display: grid; min-width: 0; grid-template-columns: 2.25rem minmax(0, 1fr); align-content: start; align-items: center; gap: .5rem .625rem; padding: .75rem; border: 1px solid rgba(183,183,170,.72); border-radius: var(--control-radius); background: rgba(255,253,247,.72); box-shadow: inset 0 1px 0 rgba(255,255,255,.72); }
.control-glyph { display: grid; width: 2.25rem; height: 2.25rem; grid-row: 1; place-items: center; color: var(--product-accent-ink); border-radius: .625rem; background: var(--product-accent-soft); }
.control-tile > label { grid-column: 2; grid-row: 1; color: var(--ink); }
.control-tile > .parameter-head { grid-column: 2; grid-row: 1; }
.control-tile > select, .control-tile > input, .control-tile > .voice-description { grid-column: 1 / -1; }
.control-tile > input[type="range"] { margin-top: .125rem; }
.voice-tuning select { height: var(--control-height); font-size: 1rem; }
.parameter-head { display: flex; min-width: 0; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem .625rem; }
.parameter-head label { display: block; color: var(--ink); }
.parameter-head code, .model-note code, .parameter-head output { color: var(--product-accent-ink); font: 500 var(--type-caption)/1.4 var(--font-ui); font-variant-numeric: tabular-nums; }
.voice-technical { min-width: 0; grid-column: 1 / -1; border-top: 1px solid var(--line); }
.voice-technical > summary { display: flex; align-items: center; gap: .5rem; padding: .375rem .625rem 0; color: var(--muted); font-size: var(--type-caption); list-style: none; }
.voice-technical > summary::-webkit-details-marker { display: none; }
.voice-technical-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); gap: .625rem 1rem; padding: .625rem; }
.tts-language-note { display: flex; min-height: var(--control-height); align-items: center; align-self: end; padding: .625rem .75rem; border-radius: .5rem; color: var(--muted); background: var(--surface); font: var(--type-caption)/1.5 var(--font-ui); }
.preference-note { grid-column: 1 / -1; color: var(--muted); font: var(--type-caption)/1.5 var(--font-ui); }
#tts-status { margin: 0; font-size: var(--type-caption); line-height: 1.5; }
.audio-output { display: flex; min-width: 0; justify-content: end; }
#player { display: none; }
.audio-download { color: var(--muted); font-size: var(--type-caption); text-decoration: underline; white-space: nowrap; }
@keyframes transport-spin { to { transform: rotate(1turn); } }

/* Passage navigation and progressive disclosure. */
.passage-nav { display: grid; gap: .5rem; max-height: min(34rem, 66vh); padding: 1rem; overflow-y: auto; }
.passage-summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: .5rem; color: var(--muted); font: var(--type-caption)/1.5 var(--font-ui); }
.passage-summary-copy { display: grid; gap: .125rem; }
.passage-summary strong { color: var(--ink); }
.passage-play { color: var(--action); border-color: var(--line); background: transparent; box-shadow: none; font-size: var(--type-caption); }
.passage-row { display: grid; grid-template-columns: 2rem minmax(0, 1fr) minmax(0, 1fr); gap: .875rem; padding: .875rem; color: var(--ink); border-color: var(--line); background: var(--surface); text-align: left; font: 400 1rem/1.5 var(--font-editorial); box-shadow: none; }
.passage-row.selected { border-color: var(--product-accent); background: var(--action-soft); }
.passage-index { color: var(--muted); font: var(--type-caption)/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
.passage-ipa { min-width: 0; max-width: 100%; color: var(--action-deep); font-size: 1.12rem; line-height: 1.45; }
.section-head { display: grid; gap: .375rem; margin-bottom: 1rem; }
#result > details.panel { padding: 0; border: 1px solid rgba(174,185,176,.72); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
#result > details.panel > summary { display: flex; min-height: 3.5rem; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem var(--panel-padding); color: var(--ink); list-style: none; transition: color var(--duration-quick), padding-left var(--duration-enter) var(--ease); }
#result > details.panel > summary::-webkit-details-marker { display: none; }
#result > details.panel > summary strong { font: 500 1.0625rem/1.4 var(--font-editorial); }
#result > details.panel[open] > summary { color: var(--action-deep); }
.words-content, .feedback-content, .research-body { padding: .125rem var(--panel-padding) var(--panel-padding); }
.words-content > .hint { margin-bottom: .75rem; font: var(--type-caption)/1.45 var(--font-ui); }
.summary-action { flex: 0 0 auto; color: var(--muted); font: 500 var(--type-caption)/1.4 var(--font-ui); }
.analysis-notes .summary-action { display: none; }
.analysis-notes-summary > span:first-child { display: flex; min-width: 0; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; }
.analysis-notes-summary small { color: var(--muted); font: var(--type-caption)/1.5 var(--font-ui); }
#analysis-notes-count:not(:empty) { display: inline-grid; min-width: 1.5rem; min-height: 1.5rem; place-items: center; padding-inline: .4rem; border-radius: 999px; color: var(--action-deep); background: var(--action-soft); font: 650 var(--type-caption)/1 var(--font-ui); font-variant-numeric: tabular-nums; }
.analysis-metadata { display: flex; flex-wrap: wrap; align-items: baseline; gap: .375rem 1rem; margin: .5rem var(--panel-padding) 1rem; }
.transcription-label, .confidence { color: var(--muted); font: var(--type-caption)/1.5 var(--font-ui); }
.analysis-warnings { display: grid; padding: .25rem var(--panel-padding) 1rem; font: var(--type-caption)/1.5 var(--font-ui); }
.analysis-note { display: grid; grid-template-columns: minmax(6rem, .22fr) minmax(0, 1fr); gap: .875rem; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.analysis-note:last-child { border-bottom: 0; }
.analysis-note-label { color: var(--action); font-size: var(--type-caption); }
.analysis-note p { color: var(--muted); }
.word-flow { display: grid; overflow: hidden; grid-template-columns: repeat(auto-fit, minmax(min(10.5rem, 100%), 1fr)); gap: 1px; border-block: 1px solid var(--line); background: var(--surface-raised); }
.word { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr); color: var(--ink); border: 0; border-radius: 0; background: var(--surface-raised); box-shadow: 1px 1px 0 var(--line); transition: background-color var(--duration-state); }
.word.selected { background: color-mix(in srgb, var(--product-accent-soft) 45%, var(--surface-raised)); }
.word.selected .word-target, .word.selected .word-target .phonemes { color: var(--product-accent-ink); }
.word-target { position: relative; display: grid; min-height: 7rem; grid-template-columns: minmax(0, 1fr); align-content: center; align-items: baseline; gap: .18rem; padding: .95rem 1rem 1.1rem; color: var(--ink); border: 0; border-radius: 0; background: transparent; text-align: left; box-shadow: none; transition: color var(--duration-focus) var(--ease); }
.word-target .phonemes { transition: color var(--duration-focus) var(--ease); }
.word-target:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; }
.word-target::after { content: ""; position: absolute; right: 1rem; bottom: 0; left: 1rem; height: 3px; border-radius: 2px 2px 0 0; background: var(--product-accent); opacity: 0; transform: scaleX(.35); transform-origin: left; transition: opacity var(--duration-quick), transform 210ms var(--ease); }
.word.selected .word-target::after { opacity: 1; transform: scaleX(1); }
.word-text { font: 550 1.18rem/1.35 var(--font-editorial); overflow-wrap: anywhere; }
.phonemes, .process-kind, .variant-profile { color: var(--muted); font-size: var(--type-caption); line-height: 1.5; overflow-wrap: anywhere; }
.word-target .phonemes { color: var(--action-deep); font-weight: 400; font-size: clamp(1.3rem, 2.4vw, 1.55rem); line-height: 1.35; text-align: left; }
.word-grammar { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.word-inspector { display: grid; gap: .65rem; margin-top: .875rem; padding: .875rem; color: var(--muted); border: 1px solid color-mix(in srgb, var(--product-accent) 22%, var(--line)); border-radius: var(--control-radius); background: color-mix(in srgb, var(--product-accent-soft) 48%, var(--surface)); font: var(--type-caption)/1.5 var(--font-ui); }
.word-inspector-copy > strong { color: var(--product-accent-ink); font: 600 1.2rem/1.3 var(--font-editorial); }
.word-inspector-copy { display: flex; min-width: 0; flex-wrap: wrap; gap: .25rem .875rem; }
/* Evidence next to the word: reading source, boundary behaviour, stress. */
.word-evidence { display: grid; gap: .375rem; margin: 0; padding: 0; list-style: none; }
.word-evidence-item { display: flex; min-width: 0; flex-wrap: wrap; align-items: baseline; gap: .25rem .625rem; }
.word-evidence-kind { display: inline-flex; align-items: baseline; gap: .3rem; padding: .125rem .5rem; border-radius: .375rem; color: var(--action-deep); background: var(--action-soft); font: 600 var(--type-caption)/1.4 var(--font-ui); }
.word-evidence-sound { font: 500 .9375rem/1 var(--ipa-font); }
.word-evidence-item[data-tone="inferred"] .word-evidence-kind { color: var(--support); background: color-mix(in srgb, var(--support) 14%, var(--surface)); }
.word-evidence-item[data-tone="off"] .word-evidence-kind { color: var(--muted); background: var(--surface-tint); }
.word-evidence-detail { min-width: 0; color: var(--muted); overflow-wrap: anywhere; }
.word-evidence-sources { min-width: 0; }
.word-evidence-sources > summary { color: var(--action); cursor: pointer; list-style: none; text-decoration: underline; text-underline-offset: .2em; }
.word-evidence-sources > summary::-webkit-details-marker { display: none; }
.word-evidence-sources > summary::after { content: " +"; text-decoration: none; }
.word-evidence-sources[open] > summary::after { content: " −"; }
.word-evidence-sources ul { margin: .45rem 0 0; padding-inline-start: 1.1rem; color: var(--muted); font: var(--type-caption)/1.55 var(--font-ui); }
.word-evidence-sources li + li { margin-top: .2rem; }
.word-evidence-sources a { color: inherit; text-underline-offset: .15em; }
.word-evidence-more { margin-top: .125rem; }
.word-evidence-link { min-height: var(--control-height); padding: .375rem .5rem; color: var(--action); border: 0; background: transparent; box-shadow: none; font: 600 var(--type-caption)/1.4 var(--font-ui); text-decoration: underline; text-underline-offset: .2em; }
.rule-focus { display: grid; gap: .875rem; margin: 0 var(--panel-padding) var(--panel-padding); }
.rule-focus-lead { position: relative; display: grid; gap: .35rem; min-width: 0; overflow: hidden; padding: 1rem 1.25rem 1rem 1.5rem; border: 1px solid color-mix(in srgb, var(--product-accent) 22%, var(--line)); border-radius: .75rem; background: color-mix(in srgb, var(--product-accent-soft) 50%, var(--surface)); }
.rule-focus-lead::before { position: absolute; inset: 0 auto 0 0; width: .25rem; background: var(--product-accent); content: ""; }
.rule-focus-heading { display: flex; min-width: 0; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; }
.rule-focus-heading strong { color: var(--ink); font: 600 clamp(1.25rem, 2.5vw, 1.75rem)/1.2 var(--font-editorial); }
.rule-focus-ipa { color: var(--product-accent-ink); font: 400 clamp(1.2rem, 2.4vw, 1.5rem)/1.25 var(--ipa-font); }
.rule-focus-sound { color: var(--product-accent-ink); font: 400 1.15rem/1.35 var(--ipa-font); }
.rule-focus-intro, .rule-focus-empty, .rule-focus-source-note { color: var(--muted); font: var(--type-caption)/1.55 var(--font-ui); }
.rule-focus-active { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); align-items: stretch; gap: .625rem; }
.rule-focus-item { display: grid; align-content: start; gap: .4rem; min-width: 0; padding: 1rem; border: 1px solid var(--line); border-radius: .625rem; background: var(--surface); }
.rule-focus-active .rule-focus-item { position: relative; overflow: hidden; box-shadow: 0 8px 24px -18px var(--product-accent-ink); }
.rule-focus-active .rule-focus-item::before { position: absolute; inset: 0 auto 0 0; width: .18rem; background: var(--product-accent); content: ""; }
.rule-focus-active .rule-focus-item[data-tone="inferred"]::before { background: var(--support); }
.rule-focus-item-head { display: flex; min-width: 0; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; }
.rule-focus-item-head strong { color: var(--ink); font: 600 1rem/1.3 var(--font-editorial); }
.rule-focus-meta { color: var(--product-accent-ink); font: 600 var(--type-caption)/1.4 var(--font-ui); }
.rule-focus-item[data-tone="inferred"] .rule-focus-meta { color: var(--support); }
.rule-focus-item[data-tone="off"] .rule-focus-meta { color: var(--muted); }
.rule-focus-why { color: var(--ink); font: var(--type-caption)/1.55 var(--font-ui); }
.rule-focus-bridge { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .45rem; min-width: 0; margin: .3rem 0 .2rem; }
.rule-focus-bridge::before { position: absolute; top: 50%; right: 10%; left: 10%; height: 1px; background: color-mix(in srgb, var(--product-accent) 42%, var(--line)); content: ""; }
.rule-focus-bridge-word { z-index: 1; min-width: 0; width: fit-content; max-width: 100%; padding: .2rem .4rem; overflow: hidden; background: var(--surface); color: var(--ink); font: 600 clamp(.9rem, 1.8vw, 1.15rem)/1.2 var(--font-editorial); text-overflow: ellipsis; white-space: nowrap; }
.rule-focus-bridge-word:last-child { justify-self: end; }
.rule-focus-bridge-sound { z-index: 1; display: grid; width: 3.15rem; height: 3.15rem; place-items: center; border: .25rem solid var(--surface); border-radius: 50%; background: var(--product-accent-ink); color: var(--surface); box-shadow: 0 0 0 1px var(--product-accent-ink), 0 5px 14px -7px var(--product-accent-ink); font: 400 1.15rem/1 var(--ipa-font); }
.rule-focus-quiet { border: 1px solid var(--line); border-radius: .625rem; background: color-mix(in srgb, var(--surface-tint) 40%, var(--surface)); }
.rule-focus-quiet > summary { padding: .8rem 1rem; color: var(--muted); font: 600 var(--type-caption)/1.4 var(--font-ui); }
.rule-focus-quiet .rule-focus-item { margin: 0 .65rem .65rem; padding: .75rem .9rem; background: var(--surface); }
.rule-focus-source-note { padding: 0 .25rem; }
.rule-inventory { border-top: 1px solid var(--line); }
.rule-inventory > summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .875rem var(--panel-padding); color: var(--action); font: 600 var(--type-caption)/1.4 var(--font-ui); }
.rule-inventory > summary span { color: var(--muted); font-size: var(--type-caption); }
.rule-inventory .timeline { margin-top: .25rem; }
.phoneme-reference-controls { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: .5rem; }
.word-inspector .phoneme-reference-controls { padding-top: .65rem; border-top: 1px solid color-mix(in srgb, var(--product-accent) 16%, var(--line)); }
.phoneme-units { display: flex; min-width: 0; flex-wrap: wrap; gap: .25rem; }
.phoneme-reference { min-height: var(--control-height); padding: .5rem .75rem; }
.phoneme-reference[aria-busy="true"] { cursor: progress; opacity: .66; }
.phoneme-unit { min-width: var(--control-height); color: var(--action-deep); border-color: var(--line-strong); background: rgba(255,255,255,.62); box-shadow: none; font: 500 var(--type-caption)/1.2 var(--ipa-font); }
.phoneme-reference-status { color: var(--muted); font: var(--type-caption)/1.5 var(--font-ui); }
.variants, .timeline { display: grid; gap: .75rem; }
.variant { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.variant:last-child { border-bottom: 0; }
.variant-ipa { min-width: 0; max-width: 70%; color: var(--ink); }
.timeline { margin: 1rem var(--panel-padding) var(--panel-padding); padding-left: 1rem; border-left: 1px solid var(--line-strong); }
.rule-group { display: grid; min-width: 0; gap: .75rem; }
.rule-group + .rule-group { margin-top: .75rem; }
.rule-group-title { color: var(--muted); font: 600 var(--type-caption)/1.4 var(--font-ui); }
.pill.inferred { color: #805311; border-color: #d9bf92; background: #f8efdf; }
.event { position: relative; min-width: 0; border: 1px solid var(--line); border-radius: var(--control-radius); background: var(--surface); }
.event::before { content: ""; position: absolute; width: .375rem; height: .375rem; left: -1.22rem; top: 1.25rem; border-radius: 50%; background: var(--action); box-shadow: 0 0 0 4px var(--paper); }
.event-body { padding: 1rem; }
.event-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.event-title { font-size: var(--type-caption); font-weight: 600; }
.event-scope { margin-top: .375rem; color: var(--action); font: var(--type-caption)/1.5 var(--font-ui); }
.event-scope.event-ipa { font: 400 1.2rem/1.4 var(--ipa-font); }
.event p { margin-top: .5rem; color: var(--muted); font-size: var(--type-caption); line-height: 1.55; }
.rule-technical { border-top: 1px solid var(--line); }
.rule-technical > summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .625rem 1rem; font-size: var(--type-caption); }
.rule-technical > code { display: block; margin: 0 1rem .875rem; color: var(--action); overflow-wrap: anywhere; font: var(--type-caption)/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.rule-technical > .core-explanation { margin: 0 1rem 1rem; font: var(--type-caption)/1.5 var(--font-ui); }
.ipa-actions { display: flex; justify-content: end; margin-top: .75rem; }
.ipa-actions button { color: var(--action); border-color: var(--line); background: transparent; box-shadow: none; font-size: var(--type-caption); }

/* Research and corrections remain available without competing with reading. */
.feedback-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.consent { grid-template-columns: auto minmax(0, 1fr); align-items: start; min-height: var(--control-height); }
.feedback button { justify-self: start; }
#research-status { font-size: var(--type-caption); line-height: 1.5; }
#research-result { display: grid; min-width: 0; border: 1px solid var(--line); border-radius: var(--control-radius); background: var(--surface); }
.research-block { padding: 1rem; border-bottom: 1px solid var(--line); }
.research-block:last-child { border-bottom: 0; }
.research-summary { font: 500 1.125rem/1.5 var(--font-editorial); }
.research-verdict { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.research-verdict-badge { display: inline-flex; padding: .375rem .625rem; border: 1px solid; border-radius: .375rem; font: 600 var(--type-caption)/1.4 var(--font-ui); }
.research-verdict-badge.positive { color: var(--action-deep); border-color: var(--line-strong); background: var(--action-soft); }
.research-verdict-badge.caution { color: var(--terracotta-ink); border-color: var(--terracotta-line); background: var(--terracotta-soft); }
.research-verdict-badge.neutral { color: var(--muted); border-color: var(--line); background: var(--surface-tint); }
.research-impact { color: var(--muted); font: var(--type-caption)/1.5 var(--font-ui); }
.research-label { margin-bottom: .375rem; color: var(--action); font: 600 var(--type-caption)/1.4 var(--font-ui); }
.research-list { display: grid; gap: .875rem; margin: .5rem 0 0; padding-left: 1.25rem; }
.research-meta { display: block; margin-top: .375rem; color: var(--muted); font: var(--type-caption)/1.5 var(--font-ui); }
.research-caution { color: var(--terracotta-ink); background: var(--terracotta-soft); }
.research-sources { padding: .75rem 1rem; }
.research-sources > summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.research-source-list { display: grid; gap: .5rem; margin: .75rem 0 0; padding-left: 1.25rem; color: var(--muted); font: var(--type-caption)/1.5 var(--font-ui); }

/* Native dialogs read as compact editorial sheets, not oversized toolbars. */
dialog { width: min(50rem, calc(100% - 1.5rem - var(--safe-left) - var(--safe-right))); max-width: 100%; max-height: min(54rem, calc(100vh - 1.5rem - var(--safe-top) - var(--safe-bottom))); max-height: min(54rem, calc(100dvh - 1.5rem - var(--safe-top) - var(--safe-bottom))); padding: 0; overflow: auto; overscroll-behavior: contain; color: var(--ink); border: 1px solid rgba(154,158,146,.58); border-radius: 1.0625rem; background: linear-gradient(160deg, #fdfbf6 0, var(--surface) 34%, #faf7ef 100%); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.88); }
dialog::backdrop { background: rgba(32,49,58,.34); }
.settings-shell, .history-shell { gap: 1.5rem; padding: var(--panel-padding); }
.share-dialog { width: min(42rem, calc(100% - 1.5rem - var(--safe-left) - var(--safe-right))); }
.share-shell { display: grid; min-width: 0; gap: .875rem; padding: var(--panel-padding); }
.share-head { display: flex; min-width: 0; align-items: start; justify-content: space-between; gap: 1rem; }
.share-head > div { min-width: 0; }
.share-head p { margin-top: .25rem; color: var(--muted); font: var(--type-caption)/1.5 var(--font-ui); }
.pronunciation-card { position: relative; display: grid; width: 100%; min-width: 0; aspect-ratio: 4 / 3; justify-self: center; grid-template-rows: auto minmax(0, 1fr) auto; gap: 1rem; overflow: hidden; padding: 1.5rem; color: var(--ink); border: 1px solid var(--line); border-radius: .2rem; background: var(--surface); box-shadow: 0 8px 24px rgb(53 44 29 / 8%); isolation: isolate; }
.pronunciation-card::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: .52; background: radial-gradient(circle at 15% 5%, rgba(255,255,255,.66), transparent 25%), repeating-linear-gradient(0deg, rgba(82,68,47,.018) 0, rgba(82,68,47,.018) 1px, transparent 1px, transparent 6px); }
.pronunciation-card::after { content: none; }
.pronunciation-card.is-rendered > :not(.pronunciation-card-canvas) { opacity: 0; }
.pronunciation-card-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: share-specimen-in 440ms var(--ease) both; }
.pronunciation-card-brand { position: relative; display: grid; min-width: 0; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; gap: .12rem .65rem; padding-bottom: 1rem; }
.pronunciation-card-brand::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: var(--line); }
.pronunciation-card-mark { display: grid; width: 2.45rem; height: 2.45rem; grid-row: 1 / 3; place-items: center; color: #fffaf0; border-radius: .735rem; background: var(--action-deep); }
.pronunciation-card-wordmark { display: grid; min-width: 0; grid-row: 1 / 3; gap: .08rem; }
.pronunciation-card-wordmark strong { font: 650 1.2rem/1.05 var(--font-wordmark); letter-spacing: -.035em; }
.pronunciation-card-wordmark small { overflow: hidden; color: #6d655a; font: 680 .48rem/1.2 var(--font-ui); letter-spacing: .105em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.pronunciation-card-language { display: inline-flex; max-width: 10rem; grid-column: 3; grid-row: 1 / 3; align-items: center; justify-self: end; gap: .35rem; overflow: hidden; color: var(--product-accent-ink); font: 700 .55rem/1.25 var(--font-ui); letter-spacing: .08em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.pronunciation-card-language::before { content: ""; width: .36rem; height: .36rem; flex: 0 0 auto; border-radius: 50%; background: var(--product-accent); }
.pronunciation-card-reading { display: grid; min-width: 0; min-height: 0; align-content: center; grid-template-columns: .22rem minmax(0, 1fr); gap: .5rem clamp(.75rem, 2.5vw, 1.1rem); overflow: hidden; }
.pronunciation-card-source-label, .pronunciation-card-ipa-label { grid-column: 2; color: #8b8174; font: 720 .48rem/1 var(--font-ui); letter-spacing: .22em; text-transform: uppercase; }
.pronunciation-card-text, .pronunciation-card-ipa, .pronunciation-card-note { display: -webkit-box; min-width: 0; grid-column: 2; overflow: hidden; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.pronunciation-card-text { -webkit-line-clamp: 3; font: 450 clamp(1.2rem, 4.4vw, 2rem)/1.28 var(--font-editorial); letter-spacing: -.018em; }
.pronunciation-card-ipa-label { margin-top: clamp(.35rem, 2vw, 1rem); }
.pronunciation-card-ipa { position: relative; -webkit-line-clamp: 5; color: var(--product-accent-ink); font: 400 clamp(1.35rem, 5vw, 2.35rem)/1.3 var(--ipa-font); font-synthesis: none; font-variant-ligatures: none; }
.pronunciation-card-ipa::before { content: ""; position: absolute; top: .1em; bottom: .1em; left: calc(-1 * clamp(.75rem, 2.5vw, 1.1rem)); width: .22rem; border-radius: .2rem; background: var(--product-accent); }
.pronunciation-card-note { -webkit-line-clamp: 3; margin-top: .25rem; color: #7b4035; font: 520 clamp(.64rem, 1.8vw, .78rem)/1.5 var(--font-ui); }
.pronunciation-card-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 1rem; padding-top: 1rem; border-top: 1px solid #c9bda8; }
.pronunciation-card-address { display: grid; align-self: end; gap: .2rem; color: #6d655a; }
.pronunciation-card-address strong { font: 720 .56rem/1 var(--font-ui); letter-spacing: .18em; }
.pronunciation-card-address small { font: 500 .6rem/1.2 var(--font-ui); letter-spacing: .035em; }
.pronunciation-card-qr-fallback { display: grid; width: clamp(3.25rem, 13vw, 4.4rem); aspect-ratio: 1; place-items: center; border: 1px solid var(--line); border-radius: .8rem; background: rgba(255,251,242,.58); box-shadow: inset 0 0 0 .35rem rgba(255,251,242,.38); }
.pronunciation-card-qr-fallback > span { display: grid; width: 1.55rem; height: 1.55rem; place-items: center; color: #fffaf0; border-radius: 50%; background: var(--ink); font: 500 .72rem/1 var(--font-editorial); }
.share-privacy-note, .share-status { color: var(--muted); font: var(--type-caption)/1.5 var(--font-ui); }
.share-status { min-height: 1.05rem; color: var(--action-deep); }
.share-actions { display: flex; min-width: 0; flex-wrap: wrap; justify-content: end; gap: .5rem; }
.settings-head { position: sticky; z-index: 2; top: 0; flex-wrap: nowrap; align-items: flex-start; margin: calc(-1 * var(--panel-padding)) calc(-1 * var(--panel-padding)) 0; padding: 1.125rem var(--panel-padding) 1rem; border-bottom: 1px solid var(--line); background: var(--surface); box-shadow: 0 1px 0 rgba(255,255,255,.72); }
.settings-head > div:first-child { min-width: 0; flex: 1 1 10rem; }
.settings-head h2, .share-head h2 { font: 500 clamp(1.45rem, 3vw, 1.65rem)/1.14 var(--font-editorial); letter-spacing: -.03em; }
.settings-head p { max-width: 35rem; margin-top: .3rem; color: var(--muted); font: 450 var(--type-body)/1.45 var(--font-ui); }
.settings-head-actions { flex: 0 1 auto; justify-content: end; }
button.settings-close { width: var(--control-height); min-width: var(--control-height); min-height: var(--control-height); height: var(--control-height); flex: 0 0 var(--control-height); padding: 0; color: var(--action-deep); border: 0; border-radius: 50%; background: transparent; box-shadow: none; }
.settings-close .button-label { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.settings-close:focus-visible { outline-width: 1px; outline-offset: 1px; }
.logout-link { min-height: var(--control-height); padding: .25rem .625rem; color: var(--terracotta-ink); border: 0; border-radius: .25rem; background: transparent; font-size: var(--type-caption); box-shadow: none; }
.account-overview { display: grid; min-width: 0; align-content: start; gap: 1rem; }
.account-summary { display: grid; min-width: 0; grid-template-columns: 2.75rem minmax(0, 1fr); align-items: center; gap: .75rem; color: var(--action-deep); overflow-wrap: anywhere; }
.settings-account-avatar { display: grid; width: 2.75rem; height: 2.75rem; place-items: center; overflow: hidden; color: #fffaf0; border: 1px solid var(--line); border-radius: 50%; background: var(--action); box-shadow: inset 0 0 0 2px var(--surface), 0 4px 14px var(--product-glow); font: 620 var(--type-body)/1 var(--font-ui); }
.settings-account-avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-summary-copy { display: grid; min-width: 0; gap: .125rem; }
.account-summary-copy strong { overflow: hidden; color: var(--action-deep); font: 540 1.0625rem/1.3 var(--font-editorial); text-overflow: ellipsis; white-space: nowrap; }
.account-summary-copy span { overflow: hidden; color: var(--muted); font: 450 var(--type-body)/1.45 var(--font-ui); text-overflow: ellipsis; white-space: nowrap; }
.account-overview-actions { display: flex; align-items: center; gap: .75rem; }
.account-overview-actions .admin-button { min-height: var(--control-height); padding: .25rem .625rem; font-size: var(--type-caption); }
.settings-install { display: grid; min-width: 0; align-content: start; gap: .75rem; padding-top: 1.125rem; border-top: 1px solid var(--line); }
.settings-install-copy { display: grid; min-width: 0; flex: 1 1 14rem; gap: .25rem; }
.settings-install-copy h2, .account-preferences > div:first-child h2 { color: var(--action-deep); font: 680 var(--type-label)/1.35 var(--font-ui); letter-spacing: .02em; }
.settings-install-copy p { color: var(--muted); font: 450 var(--type-body)/1.5 var(--font-ui); }
.settings-install > button { justify-self: start; }
.account-preferences, .key-manager { display: grid; align-content: start; gap: 1rem; }
.account-preferences > div:first-child { display: grid; gap: .25rem; }
.account-preferences-form { display: grid; gap: .625rem; align-items: end; }
.history-preference-group { display: grid; gap: .125rem; }
.preference-switch { display: grid; min-height: 4rem; grid-template-columns: 2.25rem minmax(0, 1fr) 3rem; align-items: center; gap: .75rem; padding: .5rem .625rem; color: var(--ink); border: 1px solid var(--line); border-radius: calc(var(--control-radius) + .125rem); background: rgba(255,253,247,.48); cursor: pointer; transition: color var(--duration-quick), border-color var(--duration-quick), background-color var(--duration-state), box-shadow var(--duration-quick); }
.preference-glyph { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; color: var(--muted); border: 1px solid var(--line); border-radius: .625rem; background: var(--surface-tint); transition: color var(--duration-state), border-color var(--duration-state), background-color var(--duration-state); }
.preference-switch strong { min-width: 0; font: 620 var(--type-label)/1.35 var(--font-ui); }
.preference-switch input[role="switch"] { position: relative; width: 3rem; height: 1.75rem; margin: 0; border: 1px solid var(--line-strong); border-radius: 999px; appearance: none; background: #d9d9d1; box-shadow: inset 0 1px 2px rgba(32,49,58,.12); transition: border-color var(--duration-quick), background-color var(--duration-state), box-shadow var(--duration-state); }
.preference-switch input[role="switch"]::after { content: ""; position: absolute; width: 1.25rem; height: 1.25rem; top: calc(50% - .625rem); left: .19rem; border-radius: 50%; background: var(--surface-raised); box-shadow: 0 1px 4px rgba(32,49,58,.26); transition: transform var(--duration-state) var(--ease), width var(--duration-quick) var(--ease); }
.preference-switch input[role="switch"]:checked { border-color: var(--product-accent); background: var(--product-accent); }
.preference-switch input[role="switch"]:checked::after { transform: translateX(1.3rem); }
.preference-switch:has(input:checked) { color: var(--ink); border-color: var(--product-accent); background: var(--product-accent-soft); }
.preference-switch:has(input:checked) .preference-glyph { color: var(--product-accent-ink); border-color: transparent; background: var(--surface); }
.preference-switch:has(input:focus-visible) { outline: 2px solid var(--product-accent); outline-offset: 2px; box-shadow: 0 0 0 4px var(--product-glow); }
.preference-switch input[role="switch"]:focus-visible { outline: 0; }
.preference-switch:not(:has(input:disabled)):active input[role="switch"]::after { width: 1.4rem; }
.preference-switch:has(input:disabled) { cursor: default; opacity: .62; }
.account-preferences-form[aria-busy="true"] .preference-switch:has(input:disabled) { cursor: progress; }
.retention-control { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(8rem, 10rem); align-items: center; gap: .75rem; margin-left: 1.75rem; padding: .375rem .625rem .375rem 1.875rem; color: var(--ink); }
.retention-control::before { content: ""; position: absolute; width: 1rem; height: 1.15rem; left: .25rem; top: -.125rem; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); border-bottom-left-radius: .5rem; }
.retention-control select { font-size: var(--type-label); }
.retention-control:has(select:disabled) { color: var(--muted); }
.preferences-explainer { border-top: 1px solid var(--line); }
.preferences-explainer > summary { display: flex; align-items: center; gap: .5rem; padding-inline: .625rem; color: var(--muted); list-style: none; }
.preferences-explainer > summary::-webkit-details-marker { display: none; }
.preferences-explainer-body { display: grid; gap: .625rem; padding: .25rem .625rem .75rem 3.625rem; color: var(--muted); font: var(--type-caption)/1.55 var(--font-ui); }
.preferences-explainer-body p { max-width: 38rem; }
.key-create button { justify-self: start; }
.account-preferences-note { color: var(--muted); font: var(--type-caption)/1.5 var(--font-ui); }
.key-manager-copy { color: var(--muted); font: var(--type-caption)/1.5 var(--font-ui); }
.settings-disclosure { margin-top: .25rem; border-top: 1px solid var(--line); }
.settings-disclosure > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem .75rem; padding-block: 1rem; color: var(--action-deep); font-weight: 600; list-style: none; }
.settings-disclosure > summary::-webkit-details-marker { display: none; }
.settings-disclosure > summary .disclosure-icon { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.settings-disclosure > summary small { grid-column: 1; color: var(--muted); font-size: var(--type-caption); font-weight: 400; }
.settings-disclosure[open] > summary { border-bottom: 1px solid var(--line); }
.settings-disclosure-body, .key-create { display: grid; min-width: 0; gap: 1rem; padding: 1rem; }
.settings-disclosure-body { padding-inline: 0; }
.key-create { border: 1px solid var(--line); border-radius: var(--control-radius); background: var(--surface-tint); }
.developer-link { justify-self: start; }
.scope-fieldset { display: grid; min-width: 0; gap: .5rem; padding: 0; border: 0; }
.scope-fieldset legend { margin-bottom: .25rem; padding: 0; color: var(--muted); font: 550 var(--type-caption)/1.4 var(--font-ui); }
.scope-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.scope-option { display: grid; min-height: 3.5rem; grid-template-columns: 1.75rem minmax(0, 1fr) 1.125rem; align-items: center; gap: .625rem; padding: .5rem .625rem; color: var(--muted); border: 1px solid var(--line); border-radius: .625rem; background: var(--surface); cursor: pointer; transition: color var(--duration-quick), border-color var(--duration-quick), background-color var(--duration-state), box-shadow var(--duration-quick); }
.scope-glyph { display: grid; width: 1.75rem; height: 1.75rem; place-items: center; border-radius: .5rem; background: var(--surface-tint); }
.scope-option input { position: relative; width: 1.125rem; height: 1.125rem; margin: 0; appearance: none; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface-raised); }
.scope-option input::after { content: ""; position: absolute; width: .35rem; height: .6rem; top: .12rem; left: .34rem; border-right: 2px solid #fff; border-bottom: 2px solid #fff; opacity: 0; transform: rotate(42deg) scale(.6); transition: opacity var(--duration-quick), transform var(--duration-state) var(--ease); }
.scope-option input:checked { border-color: var(--action); background: var(--action); }
.scope-option input:checked::after { opacity: 1; transform: rotate(42deg) scale(1); }
.scope-option:has(input:checked) { color: var(--action-deep); border-color: var(--product-accent); background: var(--action-soft); box-shadow: inset 0 1px 0 rgba(255,255,255,.65); }
.scope-option:has(input:checked) .scope-glyph { color: #fffefa; background: var(--action); }
.scope-option:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.scope-option input:focus-visible { outline: 0; box-shadow: none; }
.scope-note { color: var(--muted); font: 400 var(--type-caption)/1.5 var(--font-ui); }
.created-key { display: grid; gap: .75rem; padding: 1rem; color: var(--terracotta-ink); border: 1px solid var(--terracotta-line); border-radius: var(--control-radius); background: var(--terracotta-soft); }
.created-key textarea { min-height: 5rem; font: var(--type-caption)/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.created-key-actions { justify-content: space-between; }
.api-key-list, .history-list { display: grid; gap: .75rem; }
.api-key-item, .history-item { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--control-radius); background: var(--surface); }
.api-key-meta, .history-copy { display: grid; min-width: 0; gap: .375rem; }
.api-key-meta strong { font: 550 var(--type-caption)/1.5 var(--font-ui); }
.api-key-meta span { color: var(--muted); font: var(--type-caption)/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.api-key-item button { color: var(--terracotta-ink); border-color: var(--terracotta-line); background: var(--terracotta-soft); box-shadow: none; }
.empty-keys, .history-empty { padding: 1rem; color: var(--muted); border: 1px solid var(--line); border-radius: var(--control-radius); font: var(--type-caption)/1.5 var(--font-ui); }
.history-text { font: 400 1.0625rem/1.5 var(--font-editorial); overflow-wrap: anywhere; }
.history-ipa { min-width: 0; max-width: 100%; color: var(--action-deep); font: 400 1rem/1.5 var(--ipa-font); font-variant-ligatures: none; }
.history-meta { color: var(--muted); font: var(--type-caption)/1.5 var(--font-ui); }
.usage-panel { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .6875rem; padding-block: .9375rem; border-block: 1px solid var(--line); background: transparent; }
.usage-panel strong { font: 620 var(--type-label)/1.4 var(--font-ui); }
.usage-panel p { margin-top: .2rem; color: var(--muted); font: 430 var(--type-body)/1.5 var(--font-ui); }
.settings-head p, .settings-install-copy p, .key-manager-copy, .preference-switch small, .usage-panel p { text-wrap: pretty; }
.usage-orb { --usage-percent: 100%; display: grid; width: 2.5rem; height: 2.5rem; flex: 0 0 auto; place-items: center; border-radius: 50%; background: conic-gradient(var(--action) var(--usage-percent), var(--surface-tint) 0); transition: --usage-percent 450ms var(--ease); }
.usage-orb::before { content: "E"; display: grid; width: 2rem; height: 2rem; place-items: center; color: var(--action-deep); border-radius: 50%; background: var(--surface); font: 500 1rem/1 var(--font-editorial); }
.learning-footprint { display: grid; gap: .75rem; padding-block: 1rem 1.25rem; border-block: 1px solid var(--line); }
.learning-footprint-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .75rem; }
.learning-footprint-head > div { display: grid; gap: .25rem; }
.learning-footprint-head h3 { font: 500 1.125rem/1.4 var(--font-editorial); }
.learning-footprint-head .query-eyebrow { color: var(--muted); font: 500 var(--type-caption)/1.4 var(--font-ui); }
.learning-footprint-summary { color: var(--action-deep); font: 520 1rem/1.4 var(--font-editorial); white-space: nowrap; }
.learning-footprint-note { color: var(--muted); font: var(--type-caption)/1.5 var(--font-ui); }
.learning-footprint-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; border-top: 1px solid var(--line); }
.learning-card { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; align-content: start; gap: .25rem .75rem; padding-block: .875rem; border-bottom: 1px solid var(--line); }
.learning-card-kicker { color: var(--action); font: 600 var(--type-caption)/1.4 var(--font-ui); }
.learning-card-count { color: var(--terracotta); font: 550 var(--type-caption)/1.4 var(--font-ui); white-space: nowrap; }
.learning-card > p:not(.learning-card-kicker) { grid-column: 1 / -1; color: var(--muted); font: var(--type-caption)/1.5 var(--font-ui); }
.learning-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.learning-example { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; grid-column: 1 / -1; min-height: var(--control-height); max-height: calc(3em + .75rem); overflow: hidden; justify-content: start; padding: .375rem 0 0; color: var(--action); border: 0; border-radius: 0; background: transparent; box-shadow: none; text-align: left; text-decoration: underline; font: 400 var(--type-caption)/1.5 var(--font-editorial); overflow-wrap: anywhere; }

/* Operations share the controls and surfaces instead of a separate UI scale. */
.admin-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.admin-stat { display: grid; min-width: 0; gap: .25rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--control-radius); background: var(--surface); }
.admin-stat strong { font: 500 1.5rem/1.3 var(--font-editorial); overflow-wrap: anywhere; }
.admin-stat span { color: var(--muted); font: var(--type-caption)/1.5 var(--font-ui); }
.admin-review-note textarea { min-height: 5rem; }
.admin-accounts, .admin-queue { display: grid; gap: .75rem; }
.admin-account { display: grid; min-width: 0; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .875rem; align-items: center; padding: 1rem; border: 1px solid var(--line); border-radius: var(--control-radius); background: var(--surface); }
.admin-account-identity { display: grid; min-width: 0; grid-column: 1 / -1; gap: .25rem; }
.admin-account-identity strong, .admin-account-identity code { overflow-wrap: anywhere; }
.admin-account-identity code, .admin-account-identity time { color: var(--muted); font-size: var(--type-caption); }
.admin-account-metric { display: grid; min-width: 0; gap: .125rem; }
.admin-account-metric strong { font-size: var(--type-caption); overflow-wrap: anywhere; }
.admin-account-metric span { color: var(--muted); font-size: var(--type-caption); }
.admin-account-state { width: fit-content; padding: .25rem .5rem; color: var(--action-deep); border-radius: .375rem; background: var(--action-soft); font: 500 var(--type-caption)/1.4 var(--font-ui); }
.admin-account-state.is-suspended { color: var(--terracotta-ink); background: var(--terracotta-soft); }
.admin-account-access { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, .7fr) minmax(0, 1fr) auto; gap: .75rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.admin-account-access select, .admin-account-access input { font-size: 1rem; }
#admin-button { justify-self: start; }
.admin-item { display: grid; min-width: 0; gap: .75rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--control-radius); background: var(--surface); }
.admin-item p { color: var(--muted); font-size: var(--type-caption); line-height: 1.5; overflow-wrap: anywhere; }
.admin-item .admin-item-meta { font: var(--type-caption)/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.admin-reading-snapshot { color: var(--muted); font: var(--type-caption)/1.5 var(--font-ui); }
.admin-reading-snapshot ul { padding-inline-start: 1.2rem; }
.admin-reading-snapshot li { margin-block: .4rem; }
.admin-reading-ipa, .admin-reading-state { margin-inline-start: .5rem; }
.admin-reading-state { font-size: var(--type-caption); }
.audit-list { display: grid; gap: .5rem; max-height: 15rem; overflow: auto; }
.audit-item { display: grid; min-width: 0; gap: .25rem; padding: .875rem; border: 1px solid var(--line); border-radius: var(--control-radius); background: var(--surface); font: var(--type-caption)/1.5 var(--font-ui); }
.audit-item code { color: var(--muted); overflow-wrap: anywhere; }

/* Glass progressively enhances chrome; reading surfaces remain opaque. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass-fill: rgba(247,249,248,.7); }
  .settings-head { -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1); }
  dialog::backdrop { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
}
/* Voice tuning borrows the broad fill and soft handle response of Sloshslider.
   The native range still owns position and value; only the handle shape settles. */
@media (forced-colors: none) {
  .voice-tuning input[type="range"] { --tuning-track-height: 1.375rem; --tuning-thumb-height: 1.75rem; }
  .voice-tuning input[type="range"]::-webkit-slider-runnable-track { height: var(--tuning-track-height); background: linear-gradient(to right, var(--product-accent) 0 var(--range-progress), var(--product-accent-soft) var(--range-progress) 100%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--product-accent) 12%, transparent); }
  .voice-tuning input[type="range"]::-webkit-slider-thumb { width: .375rem; height: var(--tuning-thumb-height); margin-top: calc((var(--tuning-track-height) - var(--tuning-thumb-height)) / 2); border: 0; border-radius: 999px; background: var(--surface); box-shadow: 0 0 0 2px var(--product-accent), 0 2px 5px rgba(32,49,58,.2); transition: none; }
  .voice-tuning input[type="range"]::-moz-range-track { height: var(--tuning-track-height); background: var(--product-accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--product-accent) 12%, transparent); }
  .voice-tuning input[type="range"]::-moz-range-progress { height: var(--tuning-track-height); background: var(--product-accent); }
  .voice-tuning input[type="range"]::-moz-range-thumb { width: .375rem; height: var(--tuning-thumb-height); border: 0; border-radius: 999px; background: var(--surface); box-shadow: 0 0 0 2px var(--product-accent), 0 2px 5px rgba(32,49,58,.2); transition: none; }
  .voice-tuning input[type="range"]:not(:disabled):is(:hover, :focus-visible, :active)::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--product-accent), 0 0 0 7px var(--product-glow), 0 2px 5px rgba(32,49,58,.2); }
  .voice-tuning input[type="range"]:not(:disabled):is(:hover, :focus-visible, :active)::-moz-range-thumb { box-shadow: 0 0 0 2px var(--product-accent), 0 0 0 7px var(--product-glow), 0 2px 5px rgba(32,49,58,.2); }
}
@media (forced-colors: none) and (prefers-reduced-motion: no-preference) {
  .voice-tuning input[type="range"]::-webkit-slider-thumb { transition: transform 280ms cubic-bezier(.2,.9,.25,1.35), box-shadow var(--duration-state) var(--ease); }
  .voice-tuning input[type="range"]::-moz-range-thumb { transition: transform 280ms cubic-bezier(.2,.9,.25,1.35), box-shadow var(--duration-state) var(--ease); }
  .voice-tuning input[type="range"]:not(:disabled):focus-visible::-webkit-slider-thumb { transform: scale(1.25, 1.04); }
  .voice-tuning input[type="range"]:not(:disabled):focus-visible::-moz-range-thumb { transform: scale(1.25, 1.04); }
  .voice-tuning input[type="range"]:not(:disabled):active::-webkit-slider-thumb { transform: scale(1.6, 1.1); }
  .voice-tuning input[type="range"]:not(:disabled):active::-moz-range-thumb { transform: scale(1.6, 1.1); }
}

@media (hover: hover) and (pointer: fine) {
  .app-header .masthead-aside:not(:has(:focus-visible)):has(> :is(a, button):hover, > .edition-switcher:hover),
  .app-header .edition-popover:not(:has(:focus-visible)):has(> .language-edition:hover),
  .app-footer .about-actions:not(:has(:focus-visible)):has(> :is(a, button):hover) { --navigation-sibling-ink: var(--muted); }
  .app-header .masthead-aside:not(:has(:focus-visible)) > :is(a, button):hover,
  .app-header .masthead-aside:not(:has(:focus-visible)) > .edition-switcher:hover .edition-summary,
  .app-header .edition-popover:not(:has(:focus-visible)) > .language-edition:hover,
  .app-footer .about-actions:not(:has(:focus-visible)) > :is(a, button):hover {
    color: var(--product-accent-ink);
    text-decoration-line: underline;
    text-decoration-color: currentColor;
  }
  .app-header .masthead-aside > button:not(:disabled):hover,
  .app-footer .about-actions > button:not(:disabled):hover { transform: none; }
}

@media (pointer: coarse) {
  .ipa-gap, .reading-token-choice, .reading-attention-action, .reading-compare, .reading-reset, .reading-decision > summary, .reading-option-evidence > summary { min-height: 44px; align-content: center; }
}

@media (hover: hover) and (pointer: fine) {
  .reading-option:has(.reading-option-select:not(:disabled):hover) { background: color-mix(in srgb, var(--reading-selection) 30%, var(--surface)); box-shadow: inset 3px 0 var(--reading-accent); }
  .reading-option-select:not(:disabled):hover { background: transparent; transform: none; box-shadow: none; }
  .reading-compare:not(:disabled):hover, .reading-reset:not(:disabled):hover { color: var(--reading-accent); background: transparent; box-shadow: none; transform: none; }

  button:not(:disabled):hover { background-color: var(--action-hover); border-color: var(--action-hover); box-shadow: 0 5px 14px var(--product-glow); transform: translateY(-1px); }
  button:not(:disabled):active { transform: translateY(0) scale(.98); }
  button.secondary:not(:disabled):hover, .history-button:not(:disabled):hover, .admin-button:not(:disabled):hover, .sign-in-link:hover, .api-link:hover { color: var(--action-deep); border-color: var(--line-strong); background-color: var(--action-soft); }
  .language-orthography-option:not([aria-checked="true"]):not(:disabled):hover { color: var(--product-accent-ink); border-color: transparent; background: var(--product-accent-soft); box-shadow: none; transform: none; }
  .language-orthography-option[aria-checked="true"]:not(:disabled):hover { border-color: var(--product-accent-ink); background: var(--product-accent-ink); box-shadow: 0 2px 8px var(--product-glow); transform: none; }
  .quote-language-control:hover, .scope-option:hover { color: var(--action-deep); border-color: var(--line-strong); background-color: var(--action-soft); }
  .brand:hover .brand-mark { border-color: var(--product-accent); background: var(--action); }
  .language-edition:not([aria-current="page"]):hover { color: var(--action-deep); }
  .masthead-aside button:not(:disabled):hover { color: var(--action-deep); background-color: var(--surface-tint); box-shadow: var(--glass-shadow); }
  .result-actions button:not(:disabled):hover { color: var(--reading-accent); border-color: transparent; background-color: var(--reading-selection); box-shadow: none; }
  .word-target:not(:disabled):hover { color: var(--action-deep); background-color: color-mix(in srgb, var(--product-accent-soft) 48%, transparent); box-shadow: none; transform: none; }
  .phoneme-unit:not(:disabled):hover, .learning-example:not(:disabled):hover, .ipa-actions button:not(:disabled):hover, .passage-play:not(:disabled):hover { color: var(--action-deep); border-color: var(--line-strong); background-color: var(--action-soft); box-shadow: none; }
  .result-actions button:not(:disabled):hover::after { opacity: .8; transform: scaleX(1); }
  #result > details.panel > summary:hover { padding-left: calc(var(--panel-padding) + .125rem); }
  #result > details.panel > summary:hover .disclosure-icon { color: var(--action); transform: translateY(1px); }
  #result > details.panel[open] > summary:hover .disclosure-icon { transform: rotate(180deg) translateY(-1px); }
  .passage-row:not(:disabled):hover { color: var(--ink); border-color: var(--product-accent); background-color: var(--action-soft); box-shadow: none; }
  button.settings-close:not(:disabled):hover { color: var(--action-deep); border-color: transparent; background: var(--surface-tint); box-shadow: none; transform: none; }
  .logout-link:hover { color: var(--terracotta-ink); background: rgba(146,83,67,.08); }
  .api-key-item button:not(:disabled):hover { color: var(--terracotta-ink); border-color: #cda893; background-color: #eeddd2; }
  summary:hover { color: var(--action); }
  .app-footer summary:hover, .app-footer .edition-link:hover, .app-footer .developer-link:hover { color: var(--ink); }
  .audio-download:hover { color: var(--action-deep); }
  button.is-confirmed:not(:disabled):hover { color: var(--action-deep); border-color: var(--line-strong); background: var(--action-soft); box-shadow: none; }
  .reading-token-choice:not(:disabled):hover { color: var(--reading-accent); background: transparent; border-color: var(--reading-accent); box-shadow: none; transform: translateY(-1px); }
  .reading-token-choice:hover::after, .reading-option-select:hover .reading-option-action::before { transform: scaleX(1); }
  .reading-option-select:hover .reading-choice-indicator { border-color: var(--reading-accent); transform: scale(1.1); }
}
#analyze-button:not(:disabled):active { border-color: var(--action-pressed); background: var(--action-pressed); }
#analysis-form[aria-busy="true"] #analyze-button,
#analysis-form[aria-busy="true"] #analyze-button:hover,
#analysis-form[aria-busy="true"] #analyze-button:active { border-color: var(--action); background: var(--action); transform: none; }
#analysis-form[aria-busy="true"] #analyze-button::before { content: ""; order: 2; width: 1rem; height: 1rem; flex: 0 0 auto; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; }
#analysis-form[aria-busy="true"] #analyze-button .ui-icon { display: none; }

/* Breakpoints change composition, not individual control dimensions. */
@media (min-width: 70rem) {
  body[data-principal-subject=""] .visitor-welcome { grid-template-columns: minmax(22rem, 28rem) minmax(18rem, 27rem); grid-template-areas: "kicker kicker" "title deck" "title access"; align-items: start; justify-content: space-between; column-gap: clamp(2rem, 7vw, 7rem); }
  body[data-principal-subject=""] .visitor-welcome .welcome-kicker { grid-area: kicker; }
  body[data-principal-subject=""] .visitor-welcome h2 { grid-area: title; }
  body[data-principal-subject=""] .visitor-welcome .welcome-deck { grid-area: deck; }
  body[data-principal-subject=""] .visitor-welcome small { grid-area: access; }
}
@media (min-width: 42rem) {
  #settings-dialog .settings-shell {
    position: relative;
    grid-template-columns: minmax(14.75rem, .82fr) minmax(0, 1.32fr);
    grid-template-areas:
      "head head"
      "account preferences"
      "install preferences"
      "developer developer";
    column-gap: 2rem;
    row-gap: 1.5rem;
  }
  #settings-dialog .settings-shell::before {
    content: "";
    z-index: 0;
    grid-column: 1;
    grid-row: 2 / 4;
    margin: -1.5rem -2rem -1.5rem calc(-1 * var(--panel-padding));
    border-right: 1px solid rgba(183,183,170,.54);
    background: #f5f1e8;
  }
  #settings-dialog .settings-shell > * { position: relative; z-index: 1; }
  #settings-dialog .settings-head { grid-area: head; }
  #settings-dialog .account-overview { grid-area: account; }
  #settings-dialog .settings-install { grid-area: install; align-self: start; }
  #settings-dialog .account-preferences { grid-area: preferences; padding-left: 2rem; }
  #settings-dialog .settings-disclosure { grid-area: developer; }
}
@media (max-width: 48rem) {
  main.app-shell { padding-top: 1.125rem; padding-bottom: 3rem; }
  .app-header { gap: .65rem .875rem; margin-bottom: .875rem; padding-bottom: .25rem; }
  .edition-switcher, .edition-menu { position: static; }
  .edition-popover { right: 0; width: min(18rem, 100%); transform-origin: top right; }
  .key-row, .feedback-grid, .history-item, .api-key-item { grid-template-columns: minmax(0, 1fr); }
  .composer-footer { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .language-input-body, .guide-rule-grid, .reading-pair, .about-body { grid-template-columns: minmax(0, 1fr); }
  .reading-transcription { padding-left: 0; border-left: 0; }
  .about-column, .about-install-status { grid-column: 1; }
  #analyze-button { width: 100%; }
  #ipa { font-size: clamp(2.25rem, 9.5vw, 2.8rem); line-height: 1.3; }
  #ipa[data-density="balanced"] { font-size: clamp(2.05rem, 8.5vw, 2.45rem); }
  #ipa[data-density="compact"] { font-size: clamp(1.8rem, 7.5vw, 2.15rem); }
  .word-flow { grid-template-columns: repeat(auto-fit, minmax(min(8rem, 100%), 1fr)); }
  .word-target { min-height: 5.5rem; padding: .75rem .8rem .9rem; }
  .claim-banner { grid-template-columns: .5rem minmax(0, 1fr); align-items: start; }
  .claim-banner strong, .claim-banner p { grid-column: 2; }
  .learning-footprint-list { grid-template-columns: minmax(0, 1fr); }
  .audio-download { justify-self: end; }
  .analysis-note { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
  .passage-summary { flex-wrap: wrap; }
  .passage-row { grid-template-columns: 1.5rem minmax(0, 1fr); gap: .5rem; }
  .passage-ipa { grid-column: 2; }
  .scope-grid { grid-template-columns: minmax(0, 1fr); }
  .history-item-actions { justify-content: end; }
  .admin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-account { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-account-access { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .brand-lockup { flex-wrap: nowrap; }
  .brand h1 { font-size: 1.875rem; }
  .masthead-aside { flex-wrap: nowrap; gap: .375rem; }
  .edition-summary { padding-inline: .375rem; gap: .25rem; }
  .edition-current-code { display: inline; }
  .edition-language-divider { display: none; }
  .interface-current-name { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .edition-current-name { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .masthead-aside .sign-in-link { padding-inline: .5rem; }
}
@media (max-width: 36rem) {
  .reading-options { grid-template-columns: minmax(0, 1fr); }
  .reading-option-select { min-height: 0; }
}
@media (max-width: 28rem) {
  .reading-decision > summary { gap: .35rem .75rem; }
  .reading-decision-identity { flex-wrap: wrap; gap: .15rem .4rem; }
  .reading-decision-count { font-size: var(--type-caption); }
  .reading-decision-summary { font-size: var(--type-caption); }

  .app-header { gap: .5rem; }
  h1 { font-size: 1.75rem; }
  .brand { gap: .5rem; }
  .brand-mark { width: 2.125rem; height: 2.125rem; }
  .masthead-aside { gap: .25rem; }
  .masthead-aside .history-button { width: var(--control-height); padding: 0; }
  .history-button .button-label { display: none; }
  #character-count { margin-left: auto; }
  .result-actions { gap: .125rem; }
  .result-actions button { padding-inline: .5rem; font-size: var(--type-caption); }
  .share-actions > * { flex: 1 1 8rem; }
  .pronunciation-card-language { max-width: 7.5rem; }
  .voice-tuning { grid-template-columns: minmax(0, 1fr); }
  .preference-switch { grid-template-columns: 2.25rem minmax(0, 1fr) 3rem; gap: .2rem .625rem; }
  .preference-switch input[role="switch"] { grid-column: 3; }
  .retention-control { grid-template-columns: minmax(0, 1fr); margin-left: 1rem; padding-left: 1.25rem; }
  .preferences-explainer-body { padding-left: .625rem; }
  .settings-head { gap: .5rem; }
  .settings-head > div:first-child { flex-basis: 7rem; }
  .settings-head p { display: none; }
  .created-key-actions > *, .research-actions > button { flex: 1 1 auto; }
}
@media (max-width: 22rem) {
  .brand h1 { font-size: 1.625rem; }
  .brand-mark { width: 1.875rem; height: 1.875rem; border-radius: .625rem; }
  .brand-signal { transform: scale(.9); }
  .masthead-aside .sign-in-link { padding-inline: .375rem; }
}

/* Finite state motion follows user actions; result reveal is owned by JS. */
@media (prefers-reduced-motion: no-preference) {
  .rule-focus-lead, .rule-focus-active .rule-focus-item { animation: rule-focus-in 260ms var(--ease) both; }
  .rule-focus-active .rule-focus-item:nth-child(2) { animation-delay: 35ms; }
  .rule-focus-active .rule-focus-item:nth-child(n + 3) { animation-delay: 70ms; }
  .rule-focus-bridge-sound { animation: rule-focus-sound-in 320ms var(--ease) both; }
  @keyframes rule-focus-in { from { opacity: .55; transform: translateY(5px); } to { opacity: 1; transform: none; } }
  @keyframes rule-focus-sound-in { from { opacity: .5; transform: scale(.8); } to { opacity: 1; transform: scale(1); } }
  #analysis-form[aria-busy="true"] #analyze-button::before, .reading-compare[aria-busy="true"]::after,
  .reading-decisions[aria-busy="true"] .reading-decision-status::before { animation: transport-spin 800ms linear infinite; }
  #result[data-update="reading"] .word, #result[data-update="reading"] elparolo-ipa > :is(.ipa-syllable, .ipa-chunk, .ipa-gap, .ipa-separator),
  #result[data-update="reading"] .normalized-text-note:not([hidden]) { animation: none; }
  .reading-decision[open] > .reading-options { animation: reading-unfold 280ms var(--ease) both; }
  .reading-decision[data-selected="true"]:not([open]) .reading-decision-summary { animation: reading-chosen 300ms var(--ease) both; }
  @keyframes reading-unfold { from { opacity: .5; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
  @keyframes reading-chosen { from { opacity: .4; transform: translateY(3px); } to { opacity: 1; transform: none; } }
  .brand { animation: masthead-in 420ms var(--ease) both; }
  .edition-popover:not([hidden]) { animation: edition-menu-in 160ms var(--ease) both; }
  .visitor-welcome > * { animation: welcome-in 520ms var(--ease) both; }
  .visitor-welcome > :nth-child(2) { animation-delay: 45ms; }
  .visitor-welcome > :nth-child(3) { animation-delay: 90ms; }
  .visitor-welcome > :nth-child(4) { animation-delay: 135ms; }
  .welcome-kicker::before { animation: rule-in 620ms var(--ease) both; transform-origin: left; }
  #analyze-button .ui-icon { transition: transform var(--duration-quick) var(--ease); }
  #analyze-button:not(:disabled):hover .ui-icon { transform: translateX(2px); }
  .query:has(#analysis-form[aria-busy="true"])::after { opacity: 1; transform: scaleX(1); }
  .language-orthography-option[aria-checked="true"] { animation: convention-selected 220ms var(--ease) both; }
  .normalized-text-note:not([hidden]) { animation: normalization-in 320ms var(--ease) both; }
  .motion-enter { animation: content-in var(--duration-enter) var(--ease) both; }
  dialog[open] { animation: dialog-in var(--duration-enter) var(--ease) both; transform-origin: center; }
  dialog[open]::backdrop { animation: backdrop-in var(--duration-enter) ease-out both; }
  dialog[open][data-closing] { animation: dialog-out var(--duration-close) ease-in both; pointer-events: none; }
  dialog[open][data-closing]::backdrop { animation: backdrop-out var(--duration-close) ease-in both; }
  dialog[open] .settings-shell > :not(.settings-head), dialog[open] .history-shell > :not(.settings-head) { animation: sheet-item-in 360ms var(--ease) both; }
  dialog[open] .settings-shell > :nth-child(3), dialog[open] .history-shell > :nth-child(3) { animation-delay: 35ms; }
  dialog[open] .settings-shell > :nth-child(4), dialog[open] .history-shell > :nth-child(4) { animation-delay: 70ms; }
  dialog[open] .settings-shell > :nth-child(n + 5), dialog[open] .history-shell > :nth-child(n + 5) { animation-delay: 105ms; }
  details[open] > :not(summary), .created-key:not([hidden]) { animation: content-in 220ms var(--ease) both; }
  .speech-dock[data-state="playing"] #speak-button .ui-icon { animation: play-settle 280ms var(--ease) both; }
  body:has(.speech-dock[data-state="playing"]) .brand .brand-signal i { animation: brand-listening 680ms ease-in-out infinite alternate; }
  body:has(.speech-dock[data-state="playing"]) .brand .brand-signal i:nth-child(2) { animation-delay: -180ms; }
  body:has(.speech-dock[data-state="playing"]) .brand .brand-signal i:nth-child(3) { animation-delay: -430ms; }
  body:has(.speech-dock[data-state="playing"]) .brand .brand-signal i:nth-child(4) { animation-delay: -270ms; }
  body:has(.speech-dock[data-state="playing"]) .brand .brand-signal i:nth-child(5) { animation-delay: -540ms; }
  .is-confirmed .ui-icon { animation: confirm-in 220ms var(--ease) both; }
  /* Result choreography: syllables ink in along the line, then word cards follow.
     --enter-index is set by JS on freshly built nodes, so re-analysis replays it
     while selection and re-layout do not. */
  elparolo-ipa > .ipa-syllable, elparolo-ipa > .ipa-chunk, elparolo-ipa > .ipa-gap, elparolo-ipa > .ipa-separator { animation: syllable-in 520ms var(--ease) both; animation-delay: calc(var(--enter-index, 0) * var(--stagger-step)); }
  .word { animation: card-in 440ms var(--ease) both; animation-delay: calc(120ms + var(--enter-index, 0) * var(--stagger-step)); }
  .word-inspector:not([hidden]) { animation: inspector-in 280ms var(--ease) both; }
  .word-evidence > .word-evidence-item { animation: content-in 240ms var(--ease) both; animation-delay: calc(60ms + var(--enter-index, 0) * var(--stagger-step)); }
  .ipa-selection-note:not([hidden]) { animation: content-in 200ms var(--ease) both; }
  .phoneme-units > .phoneme-unit { animation: content-in 260ms var(--ease) both; animation-delay: calc(40ms + var(--enter-index, 0) * var(--stagger-step)); }
  .claim-banner:not([hidden]) .claim-glyph { animation: claim-settle 720ms var(--ease) both; animation-delay: 360ms; }
  .brand:hover .brand-signal i { animation: brand-listening 520ms ease-in-out 2 alternate; }
  .brand:hover .brand-signal i:nth-child(2) { animation-delay: 60ms; }
  .brand:hover .brand-signal i:nth-child(3) { animation-delay: 120ms; }
  .brand:hover .brand-signal i:nth-child(4) { animation-delay: 180ms; }
  .brand:hover .brand-signal i:nth-child(5) { animation-delay: 240ms; }
  @keyframes content-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
  @keyframes syllable-in { from { opacity: 0; transform: translateY(.12em); filter: blur(4px); } 55% { filter: blur(0); } to { opacity: 1; transform: none; filter: none; } }
  @keyframes card-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  @keyframes inspector-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
  @keyframes claim-settle { from { transform: scale(.4); opacity: 0; } 55% { transform: scale(1.35); opacity: 1; } to { transform: none; opacity: 1; } }
  @keyframes masthead-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
  @keyframes edition-menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
  @keyframes welcome-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
  @keyframes rule-in { from { opacity: 0; transform: scaleX(.2); } to { opacity: 1; transform: scaleX(1); } }
  @keyframes dialog-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
  @keyframes dialog-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(6px) scale(.99); } }
  @keyframes sheet-item-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
  @keyframes share-specimen-in { from { opacity: 0; transform: scale(.992); filter: saturate(.75); } to { opacity: 1; transform: none; filter: none; } }
  @keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes backdrop-out { from { opacity: 1; } to { opacity: 0; } }
  @keyframes play-settle { from { transform: scale(.8); } to { transform: scale(1); } }
  @keyframes brand-listening { from { transform: scaleY(.52); opacity: .72; } to { transform: scaleY(1); opacity: 1; } }
  @keyframes confirm-in { from { opacity: .4; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
  @keyframes convention-selected { from { opacity: .72; transform: scale(.97); } to { opacity: 1; transform: none; } }
  @keyframes normalization-in { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  button.language-character-key:not(:disabled):hover { color: var(--product-accent-ink); border-color: var(--product-accent); background: var(--product-accent-soft); transform: translateY(-2px); box-shadow: 0 5px 12px var(--product-glow); }
}
@media (prefers-reduced-motion: reduce) {
  :root { --duration-quick: 0ms; --duration-enter: 0ms; --duration-close: 0ms; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  button:active, .sign-in-link:active, .logout-link:active, .api-link:active { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --glass-fill: #f5f7f6; }
  .masthead-aside button, .language-switch select, .masthead-aside .sign-in-link, .settings-head, dialog::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; }
  dialog::backdrop { background: rgba(32,49,58,.65); }
}
@media (prefers-contrast: more) {
  :root { --muted: #47555d; --line: #86949a; --line-strong: #66777f; --glass-fill: #f5f7f6; }
  .panel, button, input, textarea, select { border-width: 2px; }
}
@media (forced-colors: active) {
  select { appearance: auto; background-image: none; }
  input[type="range"] { appearance: auto; -webkit-appearance: auto; accent-color: Highlight; }
  .panel, .query, .hero, .research, .reading-stage, .app-footer, .language-scope, .settings-head, .masthead-aside button, .pronunciation-card, dialog { color: CanvasText; border-color: ButtonText; background: Canvas; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  #ipa, .research-trigger, .hero label, .hero select, .account-avatar { color: CanvasText; background: Canvas; }
  #ipa[data-selected] { color: CanvasText; }
  .ipa-sound.selected { color: HighlightText; background: Highlight; }
  .claim-glyph, .event::before { background: CanvasText; box-shadow: none; }
  .account-avatar-ring, .usage-orb { border: 2px solid Highlight; background: Canvas; }
  button, .api-link, .sign-in-link, .logout-link { border: 1px solid ButtonText; box-shadow: none; }
  dialog::backdrop { background: Canvas; opacity: .65; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .ui-icon { color: ButtonText; }
  .preference-switch, .preference-glyph { color: CanvasText; border-color: ButtonText; background: Canvas; }
  .preference-switch input[role="switch"] { width: 1.25rem; height: 1.25rem; appearance: auto; accent-color: Highlight; border: 1px solid ButtonText; box-shadow: none; }
  .preference-switch input[role="switch"]::after { display: none; }
  .quote-language-control input, .scope-option input { appearance: auto; accent-color: Highlight; }
  .quote-language-control input::after, .scope-option input::after { display: none; }
  .language-scope > summary:focus-visible { outline-color: Highlight; box-shadow: none; }
}
/* Parallel analyses converge on a shared sound; inspection remains separate from adoption. */
.reading-option[data-trace="true"] .reading-option-tools { min-width: 0; padding-inline: 1rem; }
.reading-option[data-trace="true"]:has(.reading-option-evidence[open]) { grid-column: 1 / -1; }
.reading-options:has(.reading-option[data-trace="true"] .reading-option-evidence[open]) { grid-template-columns: minmax(0, 1fr); }
.reading-option-evidence:not([open]) .reading-trace { display: none; }
.reading-option[data-trace="true"]:has(.reading-option-evidence[open]) .reading-option-select { min-height: 0; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "indicator label ipa action" ". gloss gloss gloss"; gap: .35rem .75rem; padding-block: .85rem; }
.reading-option[data-trace="true"]:has(.reading-option-evidence[open]) .reading-option-ipa { font-size: var(--type-prose); }
.reading-option[data-trace="true"] .reading-option-evidence > summary, .reading-option[data-trace="true"] .reading-compare { font-size: var(--type-caption); }
.reading-trace-source-record { margin-top: .85rem; padding-top: .6rem; border-top: 1px solid var(--line); }
.reading-trace-source-record > summary { min-height: var(--control-height); font-size: var(--type-caption); }
.reading-trace { --trace-line: color-mix(in srgb, var(--reading-accent) 28%, var(--line)); min-width: 0; margin-top: .85rem; padding: 1rem 1.1rem .25rem; border: 1px solid var(--trace-line); border-radius: 1.15rem; background: linear-gradient(150deg, var(--surface-raised), var(--surface)); font-family: var(--font-ui); }
.reading-trace button { min-width: 0; color: var(--ink); background: transparent; box-shadow: none; white-space: normal; line-height: 1.4; transition: background-color 160ms, border-color 160ms, transform 160ms; }
.reading-trace button:hover { color: var(--reading-ink); background: var(--reading-selection); }
.reading-trace button:disabled { color: var(--muted); background: transparent; }
.reading-trace button:focus-visible { outline: 2px solid var(--reading-accent); outline-offset: 3px; }
.reading-trace-icon { width: 1rem; height: 1rem; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.reading-trace-toolbar, .reading-trace-tools { display: flex; align-items: center; gap: .5rem; }
.reading-trace-toolbar { justify-content: space-between; flex-wrap: wrap; }
.reading-trace-toolbar > strong { font-size: var(--type-prose); font-weight: 550; }
.reading-trace .reading-trace-reference-chip { display: flex; flex-shrink: 0; align-items: center; gap: .4rem; white-space: nowrap; min-height: var(--control-height); padding: .4rem .7rem; border: 0; border-radius: .6rem; font-size: var(--type-caption); }
.reading-trace-views { display: flex; gap: .125rem; padding: .125rem; border-radius: .7rem; background: var(--surface-tint); }
.reading-trace-views button { display: grid; place-items: center; width: var(--control-height); height: var(--control-height); padding: 0; border: 0; border-radius: .55rem; }
.reading-trace-views button[aria-pressed="true"] { color: var(--reading-ink); background: var(--surface); box-shadow: 0 1px 4px rgb(0 0 0 / .06); }
.reading-trace-caption { margin: .2rem 0 1.4rem; color: var(--muted); font-size: var(--type-caption); letter-spacing: .025em; }
.reading-trace-workspace { display: grid; gap: 1.25rem; padding-bottom: 1.2rem; align-items: start; }
.reading-trace-material { min-width: 0; }
.reading-trace-map { width: 100%; max-width: 36rem; margin-inline: auto; }
.reading-trace-alternatives { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.reading-trace-branch { position: relative; min-width: 0; border: 1px solid var(--trace-line); border-radius: .85rem; background: var(--surface); overflow: hidden; }
.reading-trace-branch:has(.reading-trace-analysis[aria-current="true"]) { border-color: var(--reading-accent); box-shadow: 0 0 0 1px var(--reading-accent); }
.reading-trace-analysis { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: .6rem; width: 100%; min-height: 6rem; padding: 1rem .85rem .75rem; border: 0; border-radius: 0; text-align: left; }
.reading-trace-analysis-index { padding-top: .3rem; color: var(--reading-muted); font-size: var(--type-caption); font-variant-numeric: tabular-nums; }
.reading-trace-analysis-copy { display: grid; gap: .3rem; min-width: 0; }
.reading-trace-analysis-copy strong { color: var(--reading-ink); font: 550 var(--type-feature)/1.2 var(--font-editorial); overflow-wrap: anywhere; }
.reading-trace-analysis-copy small { font-weight: 400; color: var(--muted); font-size: var(--type-caption); line-height: 1.5; }
.reading-trace-analysis > .reading-trace-icon { margin-top: .25rem; opacity: .45; }
.reading-trace-analysis:hover > .reading-trace-icon { opacity: 1; transform: translateX(2px); }
.reading-trace-path-references { display: flex; gap: .4rem; align-items: center; min-height: var(--control-height); width: 100%; padding: .4rem .85rem; border: 0; border-top: 1px solid var(--line); border-radius: 0; color: var(--muted); text-align: left; font-size: var(--type-caption); }
.reading-trace-path-references .reading-trace-icon { width: .875rem; height: .875rem; }
.reading-trace-junction { position: relative; height: 2.15rem; width: calc(50% + .425rem); margin-inline: auto; border-inline: 1px solid var(--trace-line); border-bottom: 1px solid var(--trace-line); border-radius: 0 0 .65rem .65rem; }
.reading-trace-junction::after { content: ""; position: absolute; left: 50%; top: 100%; height: .9rem; border-left: 1px solid var(--trace-line); }
.reading-trace-outcome { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: .25rem .8rem; width: fit-content; max-width: 100%; margin: .85rem auto 0; min-height: 3.25rem; padding: .7rem 1.25rem; border: 1px solid var(--trace-line); border-radius: .8rem; background: var(--reading-selection) !important; }
.reading-trace-form { font: 550 var(--type-reading)/1.4 var(--font-editorial); }
.reading-trace-sound { font-family: var(--ipa-font); font-size: 2rem; line-height: 1.3; color: var(--reading-ink); }
.reading-trace-standing { font-weight: 400; flex-basis: 100%; color: var(--muted); font-size: var(--type-caption); text-align: center; }
.reading-trace-list { display: grid; }
.reading-trace-list-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .25rem .75rem; width: 100%; min-height: 4.5rem; padding: .75rem; border: 0; border-bottom: 1px solid var(--trace-line); border-radius: .5rem; text-align: left; }
.reading-trace-list-item > small:first-child { grid-column: 1; color: var(--muted); font-size: var(--type-caption); }
.reading-trace-list-item > strong { grid-column: 1; font: 550 var(--type-reading)/1.4 var(--font-editorial); }
.reading-trace-list-item > .reading-trace-icon { grid-column: 2; grid-row: 1 / 3; opacity: .5; }
.reading-trace-list-grammar { grid-column: 1; color: var(--muted); font-size: var(--type-caption); font-weight: 400; }
.reading-trace-list-item .reading-trace-sound { grid-column: 1; font-size: 1.75rem; }
.reading-trace-list-item .reading-trace-standing { grid-column: 1; text-align: left; }
.reading-trace-list-item[aria-current="true"] { background: var(--reading-selection); }
.reading-trace-preference { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: .65rem; align-items: center; width: 100%; min-height: var(--control-height); padding: .75rem .25rem; border: 0; border-top: 1px solid var(--trace-line); border-radius: 0; font-size: var(--type-caption); text-align: left; }
.reading-trace-preference > .reading-trace-icon:first-child { color: var(--muted); }
.reading-trace-preference > span { font-family: var(--ipa-font); font-size: 1.25rem; }
.reading-trace-preference > small { color: var(--muted); font-size: var(--type-caption); }
.reading-trace-inspector { min-width: 0; padding: .35rem 1rem .9rem; border-left: 1px solid var(--trace-line); background: var(--surface-raised); border-radius: 0 .7rem .7rem 0; animation: trace-enter 180ms ease-out; }
.reading-trace-inspector-head { display: flex; justify-content: space-between; gap: .5rem; margin-bottom: .8rem; }
.reading-trace-inspector-head button { display: flex; align-items: center; gap: .4rem; min-height: var(--control-height); padding: .35rem .25rem; border: 0; border-radius: .5rem; font-size: var(--type-caption); }
.reading-trace-inspector-head .reading-trace-return { justify-content: center; width: var(--control-height); }
.reading-trace-kind { color: var(--muted); font-size: var(--type-caption); letter-spacing: .03em; }
.reading-trace-detail h5 { margin: .35rem 0 .4rem; color: var(--reading-ink); font: 550 var(--type-feature)/1.25 var(--font-editorial); }
.reading-trace-detail p { margin: .5rem 0; font-size: 1rem; line-height: 1.6; }
.reading-trace-detail .reading-trace-written { font: 550 var(--type-reading)/1.4 var(--font-editorial); }
.reading-trace-detail .reading-trace-grammar { color: var(--muted); font-size: var(--type-caption); }
.reading-trace-detail blockquote { margin: .85rem 0; padding: .1rem 0 .1rem .75rem; border-left: 2px solid var(--trace-line); font: 450 1.125rem/1.5 var(--font-editorial); }
.reading-trace-original { display: block; max-width: 100%; overflow-wrap: anywhere; color: var(--muted); font-size: var(--type-caption); }
.reading-trace-metadata { margin-top: .75rem; }
.reading-trace-related { display: grid; margin-top: .75rem; }
.reading-trace-follow { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; min-height: var(--control-height); padding: .5rem 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; font-size: var(--type-caption); text-align: left; }
.reading-trace-open-source, .reading-trace-source-close { display: flex; align-items: center; gap: .4rem; min-height: var(--control-height); margin-top: .6rem; padding: .4rem .65rem; border: 1px solid var(--trace-line); border-radius: .6rem; font-size: var(--type-caption); }
.reading-trace-source { margin-top: .85rem; border-top: 1px solid var(--trace-line); }
.reading-trace-reference { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .25rem .6rem; margin-top: .85rem; }
.reading-trace-reference-index { color: var(--reading-muted); font-size: var(--type-caption); padding-top: .15rem; }
.reading-trace-reference > strong { font-size: var(--type-caption); line-height: 1.5; font-weight: 500; overflow-wrap: anywhere; }
.reading-trace-reference > details { grid-column: 2; min-width: 0; }
.reading-trace-reference summary, .reading-trace-detail summary { min-height: var(--control-height); align-content: center; font-size: var(--type-caption); cursor: pointer; color: var(--muted); }
.reading-trace [hidden] { display: none; }
@keyframes trace-enter { from { opacity: 0; transform: translateX(.3rem); } to { opacity: 1; transform: none; } }
@media (min-width: 55rem) { .reading-trace[data-inspect="true"] .reading-trace-workspace { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
@media (max-width: 55rem) { .reading-trace-inspector { border-left: 0; border-top: 1px solid var(--trace-line); padding: .5rem .25rem; border-radius: 0; } }
@media (max-width: 40rem) {
  .reading-trace { padding: .75rem .7rem .2rem; border-radius: .85rem; }
  .reading-trace-toolbar > strong { flex-basis: 100%; }
  .reading-trace-tools { justify-content: space-between; width: 100%; gap: .25rem; }
  .reading-trace .reading-trace-reference-chip { padding-inline: .25rem; gap: .25rem; font-size: var(--type-caption); }
  .reading-trace-views button { width: 44px; }
  .reading-trace-caption { margin-bottom: .8rem; }
  .reading-trace-alternatives { gap: .5rem; }
  .reading-trace-analysis { grid-template-columns: minmax(0, 1fr) auto; gap: .3rem; padding: .7rem .55rem .5rem; }
  .reading-trace-analysis-index { grid-column: 1 / -1; }
  .reading-trace-analysis-copy strong { font-size: var(--type-reading); }
  .reading-trace-path-references { padding-inline: .55rem; }
  .reading-trace-preference { grid-template-columns: auto minmax(0, 1fr) auto; gap: .25rem .6rem; }
  .reading-trace-preference > small { grid-column: 2; }
  .reading-trace-preference > span { grid-column: 2; }
  .reading-trace-preference > .reading-trace-icon:first-child { grid-row: 1 / 3; }
  .reading-trace-preference > .reading-trace-icon:last-child { grid-column: 3; grid-row: 1 / 3; }
  .reading-option[data-trace="true"]:has(.reading-option-evidence[open]) .reading-option-select { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "indicator label action" ". ipa ipa" ". gloss gloss"; }
}
@media (max-width: 27rem) {
  .reading-trace-map { position: relative; padding-left: .85rem; }
  .reading-trace-map::before { content: ""; position: absolute; top: 3rem; bottom: 1.8rem; left: 0; border-left: 1px solid var(--trace-line); }
  .reading-trace-alternatives { grid-template-columns: minmax(0, 1fr); gap: .65rem; }
  .reading-trace-branch { overflow: visible; }
  .reading-trace-analysis { border-radius: .8rem .8rem 0 0; }
  .reading-trace-path-references { border-radius: 0 0 .8rem .8rem; }
  .reading-trace-branch::before, .reading-trace-outcome::before { content: ""; position: absolute; top: 50%; left: -.85rem; width: .85rem; border-top: 1px solid var(--trace-line); }
  .reading-trace-junction { display: none; }
  .reading-trace-outcome { position: relative; width: 100%; padding-inline: .5rem; }
}
@media (prefers-reduced-motion: reduce) { .reading-trace button, .reading-trace-inspector { animation: none; transition: none; } }
@media (forced-colors: active) { .reading-trace, .reading-trace-branch, .reading-trace-outcome, .reading-trace-inspector { border-color: CanvasText; background: Canvas !important; } .reading-trace button[aria-current="true"] { outline: 2px solid Highlight; } }