:root {
  /* True-neutral dark — no warm yellow, no cool blue cast */
  --bg: #131313;
  --paper: #191919;
  --ink: #ececec;
  --muted: #909090;
  --line: #323232;
  --accent: #c45c5c; /* errors / destructive only */
  --chrome: #a8a8a8; /* inactive UI chrome — never competes with score colors */
  --good: #5fbf7a;
  --warn: #c9a34a;
  --bad: #c43c3c;
  --chip: #272727;
  /* Trust frame: hairline around syl group + IPA */
  --trust-frame: 38%;
  --trust-outline: 1px;
  --trust-outline-offset: 2px;
  /* How far the colored frame sits outside the analysis content box */
  --trust-outset: calc(var(--trust-outline) + var(--trust-outline-offset));
  --content-inline: 0.85rem;
  --chrome-right: 0.35rem;
  --chrome-btn: 2rem;
  --chrome-gap: 0.05rem;
  /* Closed fallback; live width from JS (--chrome-cluster / --chrome-fade-ramp) */
  --chrome-cluster: 2.4rem;
  --chrome-fade-ramp: 1.75rem;
  --analysis-pair-gap: 0.72rem;
  /* Clear air between stacked trust outlines */
  --analysis-stack-gap: calc(var(--trust-outset) * 2 + 0.45rem);
  --analysis-word-gap: calc(var(--trust-outset) * 2 + 0.28rem);
  /* Optical air between: line ↔ name glyphs ↔ analysis frame ↔ line */
  --rhyme-air: 0.5rem;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.45 "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  direction: ltr;
  color-scheme: dark;
}

.page {
  max-width: 920px;
  min-height: 100dvh;
  margin: 0 auto;
  padding: 2.6rem 1.2rem 1.4rem;
  display: flex;
  flex-direction: column;
}

.lang-switch {
  display: inline-flex;
  gap: 0.15rem;
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 0.1rem;
}

.lang-btn {
  font: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  background: transparent;
  border: 0;
  padding: 0.15rem 0.45rem;
  cursor: pointer;
}

.lang-btn:hover {
  color: var(--ink);
}

.lang-btn.is-active {
  color: var(--bg);
  background: var(--ink);
}

.home-link {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  border-bottom: 1px dotted transparent;
  white-space: nowrap;
}

.home-link:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.ver {
  flex-shrink: 0;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.site-foot {
  margin-top: auto;
  padding-top: min(42vh, 18rem);
  padding-bottom: 0.2rem;
  border-top: 0;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  color: color-mix(in srgb, var(--muted) 42%, transparent);
  min-height: 0;
}

.site-foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1rem;
  justify-content: center;
  align-items: center;
}

.legal-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted transparent;
}

.legal-link:hover,
.legal-link:focus-visible {
  color: var(--muted);
  border-bottom-color: color-mix(in srgb, var(--muted) 55%, transparent);
}

.composer-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
}

.workspace {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--paper);
  overflow: hidden;
}

/* Input + optional toolbar + input-analysis share one focus frame */
.query-shell {
  position: relative;
}

/* Ring above fade/chrome so the top-right corner never greys out */
.query-shell.is-focused::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  box-shadow: inset 0 0 0 1px var(--chrome);
}

.composer {
  position: relative;
  z-index: 0;
  isolation: isolate;
  flex: 1 1 auto;
  min-width: 0;
  /* Matches input-frame.html: padding + 1.25rem type ≈ 3.35rem */
  height: 3.35rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  /* Fade/chrome must never paint into units/results below */
  overflow: hidden;
  transition: height 0.22s ease, border-color 0.15s ease;
}

.composer.is-loading {
  height: 3.35rem;
  border-color: transparent;
}

.composer.is-error {
  height: 3.35rem;
  box-shadow: inset 0 0 0 1px var(--accent);
}

.composer.is-ready {
  height: 3.35rem;
  border-color: transparent;
  background: transparent;
}

/* Focus chrome lives on .query-shell, not the input alone */
.composer.is-ready.is-focused {
  box-shadow: none;
}

.input-host {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  opacity: 1;
}

.input-host[hidden] {
  display: none;
}

.input-host.is-entering {
  animation: input-enter 0.42s ease both;
}

@keyframes input-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

.qframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  color-scheme: dark;
  position: relative;
  z-index: 0;
}

/*
  Fade ramp ends at the invisible chrome divider (left edge of icons).
  Solid scrim covers the icon cluster so text never shows through.
  Height is locked to the input host only — never stretch into analysis.
*/
.input-fade {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: auto;
  height: 100%;
  max-height: 100%;
  right: var(--chrome-cluster);
  width: var(--chrome-fade-ramp);
  pointer-events: none;
  background: linear-gradient(
    to right,
    transparent 0%,
    color-mix(in srgb, var(--paper) 40%, transparent) 40%,
    var(--paper) 92%
  );
  opacity: 1;
  transition:
    right 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.18s ease;
}

/* While editing, show the caret end — hide the idle fade */
.input-host.is-focused .input-fade {
  opacity: 0;
}

.input-chrome {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: auto;
  height: 100%;
  max-height: 100%;
  right: var(--chrome-right);
  left: auto;
  width: max-content;
  max-width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: var(--chrome-gap);
  pointer-events: none;
}

/* Opaque plate under icons (= invisible divider from the text lane) */
.input-chrome::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: auto;
  height: 100%;
  left: 0;
  right: calc(-1 * var(--chrome-right));
  background: var(--paper);
  pointer-events: none;
}

.input-chrome > * {
  pointer-events: auto;
}

.input-settings {
  position: relative;
  flex: 0 0 auto;
  width: var(--chrome-btn);
  height: var(--chrome-btn);
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: color-mix(in srgb, var(--muted) 70%, transparent);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

.input-settings:hover,
.input-settings:focus-visible {
  color: color-mix(in srgb, var(--muted) 88%, var(--ink));
  background: color-mix(in srgb, var(--chip) 80%, transparent);
  outline: none;
}

.input-settings:active {
  color: var(--ink);
}

.input-settings[aria-expanded="true"] {
  color: var(--ink);
}

.input-settings-icon,
.tool-icon {
  width: 1.1rem;
  height: 1.1rem;
  display: block;
}

/* Multi-reading hint while analysis is off: muted ↔ ink */
@keyframes chrome-attention {
  0%,
  100% {
    color: color-mix(in srgb, var(--muted) 62%, transparent);
  }
  50% {
    color: var(--ink);
  }
}

.input-settings.is-attention,
.tool-btn.is-attention {
  animation: chrome-attention 1.55s ease-in-out infinite;
}

.input-settings.is-attention:hover,
.input-settings.is-attention:focus-visible,
.tool-btn.is-attention:hover,
.tool-btn.is-attention:focus-visible {
  animation: none;
  color: var(--ink);
}

/*
  Tools expand left from the settings cluster (no second row / no divider).
  Closed: width 0. Open: slide out beside the gear.
*/
/*
  Tools expand left from the settings cluster (no second row / no divider).
  Width must stay auto — a fixed tray width poisons abspos shrink-to-fit
  and made the input inset far too large.
*/
.toolbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 0.22rem;
  flex: 0 0 auto;
  width: auto;
  max-width: 0;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateX(0.45rem);
  pointer-events: none;
  transition:
    max-width 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.22s ease,
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.toolbar.is-open {
  max-width: 12rem;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.tool-btn {
  flex: 0 0 auto;
  width: 1.85rem;
  height: 1.85rem;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: color-mix(in srgb, var(--muted) 62%, transparent);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}

.tool-btn:hover,
.tool-btn:focus-visible {
  color: color-mix(in srgb, var(--muted) 88%, var(--ink));
  background: color-mix(in srgb, var(--chip) 80%, transparent);
  outline: none;
}

.tool-btn.is-on {
  color: var(--ink);
}

.tool-btn.is-on:hover,
.tool-btn.is-on:focus-visible {
  color: var(--ink);
  background: color-mix(in srgb, var(--chip) 80%, transparent);
}

.tool-btn:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.prefs-toggle {
  flex: 0 0 auto;
  width: 3.35rem;
  align-self: stretch;
  min-height: 3.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--paper);
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.composer-row.is-loading .prefs-toggle,
.composer-row.is-error .prefs-toggle {
  border-color: var(--line);
}

.prefs-toggle:hover {
  color: var(--ink);
  border-color: var(--chrome);
}

.prefs-toggle[aria-expanded="true"] {
  color: var(--bg);
  background: var(--ink);
  border-color: var(--ink);
}

.prefs-toggle-icon {
  display: block;
}

.status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* Progress lives inside the composer shell (same box as the future input). */
.lex-load {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0 var(--content-inline);
  border: 0;
  background: transparent;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.38s ease;
}

.lex-load.is-exiting {
  opacity: 0;
}

.lex-load[hidden] {
  display: none;
}

.composer.is-ready .lex-load:not(.is-exiting) {
  display: none;
}

.lex-load-label {
  margin: 0;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  color: var(--muted);
  text-align: center;
}

.lex-load-label[hidden] {
  display: none;
}

.lex-load-track {
  position: relative;
  /* Integer px — rem heights blur to uneven thickness on DPR screens */
  height: 4px;
  border: 0;
  background: var(--chip);
  overflow: hidden;
  flex-shrink: 0;
  border-radius: 0;
}

.lex-load-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 4px;
  width: 100%;
  background: color-mix(in srgb, var(--ink) 55%, var(--muted));
  transform-origin: left center;
  transform: scaleX(0);
  /* scaleX from rAF — avoids subpixel width rounding vs track */
  will-change: transform;
}

.lex-load-track.is-indeterminate .lex-load-fill {
  /* Sweep via left (not translate) so height stays crisp */
  width: 28%;
  transform: none;
  animation: lex-indeterminate 1.15s ease-in-out infinite;
}

.lex-load.is-error .lex-load-track {
  display: none;
}

.lex-load.is-error .lex-load-label {
  display: block;
  color: var(--accent);
}

@keyframes lex-indeterminate {
  0% { left: -30%; }
  100% { left: 105%; }
}

.panels[hidden],
.results[hidden] {
  display: none;
}

.prefs-drawer {
  margin: 0.75rem 0 0.15rem;
}

.prefs-drawer[hidden] {
  display: none;
}

.prefs {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0;
}

.prefs-panel {
  border: 1px solid var(--line);
  background: var(--paper);
}

.prefs-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.4rem 0.65rem;
  border-bottom: 1px solid var(--line);
}

.prefs-panel-title {
  font-size: 0.82rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.pref {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  min-width: 0;
}

.pref.check {
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  align-items: start;
  gap: 0.45rem;
  margin: 0;
  line-height: 1.35;
}

.pref.check input[type="checkbox"] {
  margin: 0.15rem 0 0;
  accent-color: var(--ink);
}

.prefs-sliders > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  font-size: 0.82rem;
  color: var(--muted);
  padding: 0.4rem 0.65rem;
  letter-spacing: 0.02em;
}

.prefs-sliders > summary::-webkit-details-marker {
  display: none;
}

.prefs-sliders > summary::before {
  content: "▸";
  display: inline-block;
  width: 1em;
  color: var(--muted);
}

.prefs-sliders[open] > summary::before {
  content: "▾";
}

.prefs-sliders > summary:hover {
  color: var(--ink);
}

.prefs-matrix {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem 1.4rem;
  padding: 0.65rem;
}

.prefs-sliders .prefs-matrix {
  padding: 0.65rem;
  border-top: 1px solid var(--line);
}

@media (max-width: 620px) {
  .prefs-matrix {
    grid-template-columns: 1fr;
  }
}

.pref.range {
  display: grid;
  grid-template-columns: minmax(7.5rem, 9.5rem) 1fr 2.4rem;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
}

.pref.range input[type="range"] {
  width: 100%;
  min-width: 0;
  accent-color: var(--ink);
}

.pref-reset {
  border-bottom: 1px dotted transparent;
}

.pref-reset:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.pref-val {
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--ink);
  font-size: 0.8rem;
}

.prefs-reset-all {
  font: inherit;
  font-size: 0.78rem;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  padding: 0.15rem 0.5rem;
  cursor: pointer;
  border-radius: 2px;
  flex-shrink: 0;
}

.prefs-reset-all:hover {
  color: var(--ink);
  border-color: var(--chrome);
}

.results {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0;
  border-top: 1px solid var(--line);
}

.panel {
  background: transparent;
  border: 0;
  padding: 0.55rem var(--content-inline);
  min-height: 0;
}

/*
  Input analysis sits under the composer like rhyme .sub under .name.
  Pull up so air ≈ --rhyme-air + --trust-outset (composer bottom pad
  already contributes; negative margin cancels the leftover box air).
*/
.panel-units {
  position: relative;
  z-index: 1;
  min-height: 0;
  margin-top: -0.55rem;
  padding-top: calc(var(--rhyme-air) + var(--trust-outset));
  padding-bottom: calc(var(--rhyme-air) + var(--trust-outset));
}

.panel-units[hidden] {
  display: none;
}

.panel-rhymes {
  position: relative;
  z-index: 1;
  min-height: 0;
  border-top: 0;
  /* Rhymes own their vertical rhythm — no extra panel air on top */
  padding-top: 0;
  padding-bottom: 0.2rem;
}

.panel-rhymes .rhymes {
  padding-top: 0;
}

.panel h2 {
  margin: 0 0 0.7rem;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.meta { letter-spacing: 0; text-transform: none; font-weight: 400; }

.analysis-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.65rem 0.9rem;
  direction: ltr;
  unicode-bidi: isolate;
}

/*
  Tab-stop alignment: JS sets --syl-col to the widest syllable lane.
  When a row is too narrow, .is-stacked places IPA under syllables.
*/
.analysis-main {
  display: grid;
  grid-template-columns: var(--syl-col, max-content) minmax(0, 1fr);
  column-gap: var(--analysis-pair-gap);
  row-gap: var(--analysis-stack-gap);
  align-items: start;
  min-width: 0;
  flex: 1 1 auto;
}

.analysis-main.is-stacked {
  grid-template-columns: minmax(0, 1fr);
}

.syl-lane,
.ipa-lane {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--analysis-word-gap) 0.5rem;
  min-width: 0;
  justify-self: start;
}

.syl-lane > .word-inline,
.ipa-lane > .ipa,
.ipa-lane > .sentence-ipa {
  flex: 0 1 auto;
  min-width: 0;
}

.ipa,
.sentence-ipa,
.reading-ipa {
  font-family: "Noto Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "kern" 1;
  color: var(--muted);
  font-size: 1.02rem;
  direction: ltr;
  unicode-bidi: isolate;
  word-break: break-word;
}

.analysis-row .sentence-ipa {
  margin: 0;
  font-size: 0.95rem;
}

.sentence-bits {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  direction: ltr;
  unicode-bidi: isolate;
}

.word-inline {
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0.22rem;
  direction: ltr;
}

.bit {
  padding: 0.1rem 0.06rem;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--muted);
  background: transparent;
}

.bit.stress {
  /* Quiet chip mark — same muted ink as other analysis text */
  background: var(--chip);
  padding: 0.1rem 0.28rem;
  color: var(--muted);
}

/*
  Trust signal: hairline outline (no padding/border box → no text indent).
  Outset is --trust-outset; rhyme-row air measures to this outer frame edge.
*/
.word-inline.q-syl-good,
.word-inline.q-syl-bad,
.ipa.q-ipa-good,
.sentence-ipa.q-ipa-good,
.ipa.q-ipa-warn,
.sentence-ipa.q-ipa-warn,
.ipa.q-ipa-bad,
.sentence-ipa.q-ipa-bad {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: var(--trust-outline) solid transparent;
  outline-offset: var(--trust-outline-offset);
}

.word-inline.q-syl-good {
  outline-color: color-mix(in srgb, var(--good) var(--trust-frame), transparent);
}

.word-inline.q-syl-bad {
  outline-color: color-mix(in srgb, var(--bad) var(--trust-frame), transparent);
}

.ipa.q-ipa-good,
.sentence-ipa.q-ipa-good,
.ipa.q-ipa-warn,
.sentence-ipa.q-ipa-warn,
.ipa.q-ipa-bad,
.sentence-ipa.q-ipa-bad {
  color: var(--muted);
  display: inline-block;
}

.ipa.q-ipa-good,
.sentence-ipa.q-ipa-good {
  outline-color: color-mix(in srgb, var(--good) var(--trust-frame), transparent);
}

.ipa.q-ipa-warn,
.sentence-ipa.q-ipa-warn {
  outline-color: color-mix(in srgb, var(--warn) var(--trust-frame), transparent);
}

.ipa.q-ipa-bad,
.sentence-ipa.q-ipa-bad {
  outline-color: color-mix(in srgb, var(--bad) var(--trust-frame), transparent);
}

.units {
  display: flex;
  flex-direction: column;
  /* Slightly more air between alternate readings */
  gap: calc(var(--rhyme-air) + var(--trust-outset) + 0.22rem);
}

/* Reading picker: opacity only — no fill/border fighting trust outlines */
.unit-choice {
  appearance: none;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.unit-choice.is-solo {
  cursor: default;
}

.unit-choice:not(.is-solo):not(.is-active) {
  opacity: 0.55;
}

.unit-choice:not(.is-solo):not(.is-active):hover,
.unit-choice:not(.is-solo):not(.is-active):focus-visible {
  opacity: 0.88;
  outline: none;
}

.unit-choice.is-active {
  opacity: 1;
  background: transparent;
}

.rhyme {
  /*
    Optical equal air to visible edges:
    line → name glyph top
    name glyph bottom → analysis frame top
    analysis frame bottom → line

    Name uses line-height: 1 so padding-top hits glyph caps, not half-leading.
    Gap/padding-bottom add --trust-outset so we measure to the frame, not the box.
  */
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 0.55rem;
  align-items: center;
  padding-top: var(--rhyme-air);
  padding-bottom: calc(var(--rhyme-air) + var(--trust-outset));
  border-bottom: 1px solid var(--line);
}

.rhyme:last-child { border-bottom: 0; }

.rhyme-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--rhyme-air) + var(--trust-outset));
}

.rhyme-meta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  flex: 0 0 auto;
  align-self: center;
}

.score-bar {
  --p: 0;
  --score-fill: var(--bad);
  width: 2.35rem;
  height: 0.3rem;
  border-radius: 1px;
  display: inline-block;
  flex: 0 0 auto;
  vertical-align: middle;
  background: linear-gradient(
    to right,
    var(--score-fill) calc(var(--p) * 1%),
    color-mix(in srgb, var(--line) 60%, transparent) 0
  );
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 70%, transparent);
}

.score-pct {
  font-family: "Noto Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  line-height: 1;
  flex: 0 0 auto;
  white-space: nowrap;
  color: var(--score-fill, var(--muted));
}

.rhyme-combo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  color: var(--muted);
  flex: 0 0 auto;
}

.rhyme-combo svg {
  width: 100%;
  height: 100%;
  display: block;
}

.rhyme .name {
  font-size: 1.05rem;
  /* Tight line box → padding-top measures to letter tops, not half-leading */
  line-height: 1;
}

.rhyme .sub {
  direction: ltr;
  unicode-bidi: isolate;
  margin-top: 0;
}

.rhyme .sub .analysis-row {
  gap: 0.3rem var(--analysis-pair-gap);
}

.rhyme .sub .analysis-main {
  column-gap: var(--analysis-pair-gap);
  row-gap: var(--analysis-stack-gap);
}

.rhyme .sub .bit {
  font-size: 0.72rem;
  padding: 0.06rem 0.04rem;
  color: var(--muted);
}

.rhyme .sub .bit.stress {
  padding: 0.06rem 0.22rem;
  background: var(--chip);
  color: var(--muted);
  font-weight: 400;
}

.rhyme .sub .sentence-ipa,
.rhyme .sub .ipa {
  font-size: 0.78rem;
  color: var(--muted);
}

.empty { color: var(--muted); }

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}