/* Reading aids (reading-aids.js): furigana, JLPT-level underlines, the
   settings bar and the meaning card. Tokens from design.css.

   Level colours: five woodblock pigments, quieter than the usual saturated
   green / blue / purple / yellow / red. Each line is at least 3:1 on the
   paper, and every pair stays apart (CIELAB ΔE ≥ 16) under simulated
   deuteranopia, protanopia and tritanopia (docs/redesign/reading-aids). The
   card also names the level in words, so colour is never the only cue. */
:root {
  --lv5: #5F8F74; /* 松葉 pine needle */
  --lv4: #2F4F70; /* 藍 indigo */
  --lv3: #A17FA6; /* 藤 wisteria */
  --lv2: #AA7F28; /* 黄土 ochre */
  --lv1: #A8432A; /* 朱 vermilion */
}
[data-lv="5"] { --lv: var(--lv5); }
[data-lv="4"] { --lv: var(--lv4); }
[data-lv="3"] { --lv: var(--lv3); }
[data-lv="2"] { --lv: var(--lv2); }
[data-lv="1"] { --lv: var(--lv1); }

/* ---------------------------------------------------------------- furigana */
.ra ruby { ruby-position: over; ruby-align: center; }
.ra rt {
  font-family: var(--text);
  font-size: max(10px, .46em);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--muted);
  font-feature-settings: normal;
}
/* Room for the readings above the first line. */
.ra { line-height: inherit; }
.detail-example .ja:has(.ra), .jp-prompt:has(.ra), .jp-ja:has(.ra) { line-height: 2.15; }
.detail-title:has(.ra) { line-height: 1.5; }

/* 不标, and 只标我等级以上的: a word at or below the chosen level (N5 = 5 …
   N1 = 1) keeps its reading hidden; words not in our list (data-lv 0) always
   show theirs. */
html[data-ra-furi="none"] .ra rt,
html[data-ra-furi="above"][data-ra-level="5"] .ra :is([data-lv="5"]) rt,
html[data-ra-furi="above"][data-ra-level="4"] .ra :is([data-lv="5"], [data-lv="4"]) rt,
html[data-ra-furi="above"][data-ra-level="3"] .ra :is([data-lv="5"], [data-lv="4"], [data-lv="3"]) rt,
html[data-ra-furi="above"][data-ra-level="2"] .ra :is([data-lv="5"], [data-lv="4"], [data-lv="3"], [data-lv="2"]) rt,
html[data-ra-furi="above"][data-ra-level="1"] .ra :is([data-lv="5"], [data-lv="4"], [data-lv="3"], [data-lv="2"], [data-lv="1"]) rt { display: none; }

/* ---------------------------------------------------------------- underlines */
/* A hairline under the base text only (a background, so the readings above
   are never struck through), in the level's pigment. */
.ra :is(.ra-v, .ra-u) {
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: calc(100% - .16em) 0;
  transition-property: background-size, background-color;
  transition-duration: var(--t-micro);
  transition-timing-function: var(--ease-enter);
}
html[data-ra-ul-library="on"] .ra[data-ra-ctx="library"] :is(.ra-v, .ra-u),
html[data-ra-ul-practice="on"] .ra[data-ra-ctx="practice"] :is(.ra-v, .ra-u) {
  background-image: linear-gradient(var(--lv), var(--lv));
  background-size: calc(100% - .16em) 2px;
  padding-bottom: 1px;
}
.ra .ra-v { cursor: pointer; border-radius: 4px; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) and (pointer: fine) {
  .ra .ra-v:hover { background-color: rgba(43, 76, 64, .07); }
}
.ra .ra-v[aria-expanded="true"] { background-color: rgba(43, 76, 64, .1); }
.ra .ra-v:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }
.ra mark { background: rgba(198, 160, 102, .3); color: inherit; border-radius: 3px; }

/* ---------------------------------------------------------------- the settings bar */
.ra-bar { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 12px; font-size: 13px; }
.ra-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 32px; padding: 4px 12px 4px 9px;
  border: 0; border-radius: 999px;
  background: var(--tint); box-shadow: inset 0 0 0 1px var(--ring);
  color: var(--pine); font: inherit; font-weight: 600; cursor: pointer;
  transition-property: background-color, transform; transition-duration: var(--t-micro); transition-timing-function: var(--ease-enter);
}
.ra-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.ra-toggle:hover, .ra-toggle[aria-expanded="true"] { background: rgba(43, 76, 64, .1); }
.ra-toggle:active { transform: scale(.97); }
.ra-legend { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ra-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.ra-legend i { width: 14px; height: 2px; border-radius: 2px; background: var(--lv); }
/* The legend beside the button shows only while its underlines do. */
.ra-bar > .ra-legend { opacity: 0; visibility: hidden; transition-property: opacity, visibility; transition-duration: var(--t-micro); transition-timing-function: var(--ease-enter); }
html[data-ra-ul-library="on"] .ra-bar[data-ra-ctx="library"] > .ra-legend,
html[data-ra-ul-practice="on"] .ra-bar[data-ra-ctx="practice"] > .ra-legend { opacity: 1; visibility: visible; }

.ra-panel {
  position: absolute; z-index: 5; top: calc(100% + 8px); left: 0;
  width: min(360px, 100%);
  padding: 6px; border-radius: 22px;
  background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--ring), var(--shadow-lift);
}
.ra-panel > .ra-row:first-child { border-radius: 16px 16px 0 0; }
.ra-panel > .ra-row:last-child { border-radius: 0 0 16px 16px; }
.ra-row { display: grid; gap: 8px; padding: 12px 14px; background: var(--white); }
.ra-row + .ra-row { box-shadow: inset 0 1px 0 var(--hairline); }
.ra-label { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.ra-seg { display: flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--paper-2); }
.ra-seg button {
  flex: 1 1 auto; min-height: 32px; padding: 4px 10px;
  border: 0; border-radius: 999px; background: transparent;
  color: var(--ink); font: inherit; font-size: 13px; white-space: nowrap; cursor: pointer;
  transition-property: background-color, color, box-shadow; transition-duration: var(--t-micro); transition-timing-function: var(--ease-enter);
}
.ra-seg button[aria-checked="true"] { background: var(--white); color: var(--pine); font-weight: 600; box-shadow: 0 1px 2px rgba(31, 42, 37, .08), inset 0 0 0 1px var(--ring); }
.ra-levels.ra-dim .ra-seg { opacity: .5; }
.ra-switch { display: inline-flex; align-items: center; gap: 10px; width: fit-content; padding: 2px 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
.ra-switch i { position: relative; width: 38px; height: 22px; border-radius: 999px; background: #D8D0BF; transition-property: background-color; transition-duration: var(--t-micro); transition-timing-function: var(--ease-enter); }
.ra-switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 2px rgba(31, 42, 37, .2); transition-property: transform; transition-duration: var(--t-small); transition-timing-function: var(--ease-enter); }
.ra-switch[aria-checked="true"] i { background: var(--pine); }
.ra-switch[aria-checked="true"] i::after { transform: translateX(16px); }
.ra-legend-row .ra-legend { font-size: 13px; color: var(--ink); }
.ra-legend-row .ra-legend i { width: 18px; height: 3px; }

/* ---------------------------------------------------------------- the meaning card */
/* A popover (top layer): positioned by reading-aids.js beside the word,
   above it when there is room, never over it. */
.ra-card {
  position: fixed; inset: auto; margin: 0; z-index: var(--z-menu);
  max-width: calc(100vw - 16px); padding: 5px; border: 0; border-radius: 22px; overflow: visible;
  background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--ring), 0 2px 4px rgba(31, 42, 37, .05), 0 22px 44px -18px rgba(31, 42, 37, .28);
  color: var(--ink); font-family: var(--text); font-size: 14px; line-height: 1.55;
  transform-origin: var(--caret, 50%) 100%;
}
.ra-card[data-side="below"] { transform-origin: var(--caret, 50%) 0; }
.ra-card-core { padding: 14px 16px 12px; border-radius: 17px; background: var(--white); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7); }
.ra-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ra-card-word { font-family: var(--display); font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: .02em; overflow-wrap: anywhere; }
.ra-card-level { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 3px 9px 3px 8px; border-radius: 999px; background: var(--tint); box-shadow: inset 0 0 0 1px var(--ring); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.ra-card-level i { width: 8px; height: 8px; border-radius: 50%; background: var(--lv); }
.ra-card-reading { margin: 2px 0 0; color: var(--muted); font-size: 15px; letter-spacing: .04em; }
.ra-card-senses { margin: 10px 0 0; padding: 0 0 0 1.3em; display: grid; gap: 2px; }
.ra-card-senses li::marker { color: var(--muted); font-variant-numeric: tabular-nums; }
.ra-card-senses:has(li:only-child) { padding-left: 0; list-style: none; }
.ra-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ra-card-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 14px 4px 5px;
  border: 0; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--ring);
  color: var(--pine); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  transition-property: background-color, transform; transition-duration: var(--t-micro); transition-timing-function: var(--ease-enter);
}
.ra-card-btn:hover { background: #F3EEE2; }
.ra-card-btn:active { transform: scale(.97); }
.ra-card-open { padding: 4px 5px 4px 14px; background: var(--pine); color: var(--white); box-shadow: none; }
.ra-card-open:hover { background: var(--pine-deep); }
.ra-card-ico { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(43, 76, 64, .1); }
.ra-card-open .ra-card-ico { background: rgba(255, 253, 248, .16); transition-property: transform; transition-duration: var(--t-small); transition-timing-function: var(--ease-enter); }
.ra-card-open:hover .ra-card-ico { transform: translate(2px, -2px); }
.ra-card-caret { position: absolute; left: calc(var(--caret, 50%) - 7px); bottom: -6px; width: 14px; height: 14px; border-radius: 3px; background: var(--paper-2); transform: rotate(45deg); box-shadow: inset -1px -1px 0 var(--ring); }
.ra-card[data-side="below"] .ra-card-caret { top: -6px; bottom: auto; box-shadow: inset 1px 1px 0 var(--ring); }
.ra-card::backdrop { background: transparent; }

/* In JLPT practice the bar sits under the question counter. */
.jp-aids { margin: -6px 0 16px; }
.jp-aids .ra-bar { margin-top: 0; }
.jp-choice .ra { overflow-wrap: anywhere; line-height: 2; }