/* Pitch accent, word class and conjugation table (word-info.js). */

/* ---------------------------------------------------------------- pitch */
/* Each mora carries its own stroke (.pl): a line over it when it is high, a
   short stroke up at its left edge where the pitch rises, down at its right
   edge where it falls. Strokes are borders of a box the height of a tick, so
   corners join cleanly. */
.pitch { --pitch: var(--vermilion); --stroke: 1.6px; --tick: .46em; --lift: .1em; display: inline-flex; align-items: baseline; white-space: nowrap; }
.pitch .pm { position: relative; display: inline-block; padding-top: var(--lift); line-height: 1.15; }
.pitch .pl { position: absolute; top: 0; left: 0; right: 0; height: var(--tick); pointer-events: none; }
.pitch .pm.h .pl { border-top: var(--stroke) solid var(--pitch); }
.pitch .pm.up .pl { border-left: var(--stroke) solid var(--pitch); }
.pitch .pm.dn .pl { border-right: var(--stroke) solid var(--pitch); }
/* The particle after the word: a short dashed run when the word stays high (平板). */
.pitch .pm.ghost { width: .5em; overflow: visible; }
.pitch .pm.ghost.h .pl { border-top-style: dashed; opacity: .55; }
.pitch.plain { padding-top: var(--lift); }

/* The reading line of the detail. */
.wi-pitch { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 22px; margin-top: 8px; font-size: 20px; color: var(--ink); }
.wi-pitch .pitch { font-size: 22px; letter-spacing: .04em; }
.wi-reading { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.wi-accent { display: inline-flex; align-items: baseline; gap: 7px; font-size: 13px; font-weight: 600; color: var(--muted); }
/* The accent number in a ring, as dictionaries print it (⓪ ① ②). */
.wi-num {
  display: inline-grid;
  place-items: center;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.3px var(--vermilion);
  font-family: var(--text);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--vermilion-text);
  transform: translateY(-1px);
}
.wi-pos { font-weight: 500; }
.wi-also { display: inline-flex; align-items: baseline; gap: 5px; font-size: 13px; color: var(--muted); }
.wi-also .wi-num { min-width: 19px; height: 19px; font-size: 11px; box-shadow: inset 0 0 0 1px rgba(180, 83, 47, .55); }
.wi-sep { display: none; }

/* On a list card: the same line, lighter, no ghost. */
.material-reading.wi-card { display: block; margin-top: 2px; overflow: hidden; }
.wi-card .pitch { --stroke: 1.2px; --tick: .42em; --lift: .14em; font-size: 14px; letter-spacing: .02em; color: var(--muted); }
.wi-card .pitch { --pitch: rgba(180, 83, 47, .78); }

/* The short class tag beside the level and kind on a card. */
.tag.wi-tag { background: rgba(52, 70, 90, .08); color: var(--indigo); }
.tag.wi-tag.wi-adj-i, .tag.wi-tag.wi-adj-na { background: rgba(198, 160, 102, .16); color: var(--amber-text); }

/* The pitch line inks in, mora by mora, once the detail has arrived. */
@media (prefers-reduced-motion: no-preference) {
  .motion .wi-pitch[data-pitch-ink] .pl { opacity: 0; transform: translateY(-3px); }
  .motion .wi-pitch[data-pitch-ink].is-inked .pl {
    opacity: 1;
    transform: none;
    transition: opacity var(--t-small) var(--ease-enter), transform var(--t-enter) var(--ease-enter);
    transition-delay: calc(240ms + var(--d, 0ms));
  }
  .wi-pitch .pm:nth-child(2) .pl { --d: 40ms; }
  .wi-pitch .pm:nth-child(3) .pl { --d: 80ms; }
  .wi-pitch .pm:nth-child(4) .pl { --d: 120ms; }
  .wi-pitch .pm:nth-child(5) .pl { --d: 160ms; }
  .wi-pitch .pm:nth-child(6) .pl { --d: 200ms; }
  .wi-pitch .pm:nth-child(n+7) .pl { --d: 240ms; }
}

/* ---------------------------------------------------------------- class and toggle */
.wi-classes { display: flex; flex-wrap: wrap; gap: 8px; }
.wi-class {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 5px 16px 5px 5px;
  border: 0;
  border-radius: 999px;
  background: var(--paper);
  color: var(--pine);
  font-family: var(--text);
  font-size: 14px;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--ring);
  cursor: pointer;
  transition-property: background-color, color, box-shadow, transform;
  transition-duration: var(--t-small), var(--t-small), var(--t-small), var(--t-micro);
  transition-timing-function: var(--ease-enter);
}
.wi-class:disabled { cursor: default; opacity: 1; }
.wi-classes[role="group"] .wi-class[aria-pressed="false"] { background: transparent; color: var(--muted); }
.wi-classes[role="group"] .wi-class[aria-pressed="false"] .wi-seal { background: rgba(31, 42, 37, .08); color: var(--muted); }
.wi-classes[role="group"] .wi-class:active { transform: scale(.97); }
/* A small hanko with the class's character: 五 一 特 形. */
.wi-seal {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--vermilion);
  color: var(--white);
  font-family: "KT Shippori", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.02;
  text-align: center;
  writing-mode: vertical-rl;
  letter-spacing: -.02em;
  box-shadow: inset 0 0 0 2px rgba(255, 253, 248, .2);
  transition: background-color var(--t-small) var(--ease-enter), color var(--t-small) var(--ease-enter);
}
.wi-class.wi-ichidan .wi-seal { background: var(--pine); }
.wi-class.wi-kuru .wi-seal, .wi-class.wi-suru .wi-seal, .wi-class.wi-noun-suru .wi-seal { background: var(--indigo); }
.wi-class.wi-adj-i .wi-seal, .wi-class.wi-adj-na .wi-seal { background: var(--gold); color: var(--ink); }
.wi-note { position: relative; margin: 12px 0 0; padding-left: 16px; font-size: 14px; line-height: 1.65; color: #3A4640; }
.wi-note::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--vermilion); }
.wi-note[hidden] { display: none; }

.wi-toggle { margin-top: 16px; }
.wi-toggle .btn-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--t-small) var(--ease-enter); }
.btn.wi-toggle:hover .btn-icon { transform: translateY(1px) scale(1.06); }
.wi-toggle[aria-expanded="true"] .btn-icon svg { transform: rotate(180deg); }

/* ---------------------------------------------------------------- table */
/* Double bezel: a paper tray (.wi-table) holding the sheet (.wi-sheet). */
.wi-table { container-type: inline-size; margin-top: 16px; padding: 6px; border-radius: 24px; background: rgba(239, 232, 218, .7); box-shadow: inset 0 0 0 1px var(--ring); }
.wi-table[hidden] { display: none; }
.wi-sheet { padding: 6px 20px 14px; border-radius: 18px; background: var(--white); box-shadow: inset 0 1px rgba(255, 255, 255, .9), 0 1px 2px rgba(31, 42, 37, .04); }
.wi-cols, .wi-row { display: grid; grid-template-columns: minmax(118px, .85fr) 1fr 1fr; column-gap: 16px; }
.wi-cols { position: sticky; top: 0; z-index: 1; padding: 12px 0 10px; background: var(--white); font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--muted); box-shadow: inset 0 -1px var(--hairline); }
.wi-group h4 {
  display: inline-flex;
  margin: 18px 0 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(43, 76, 64, .07);
  font-family: var(--text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--pine);
}
.wi-row { align-items: start; padding: 11px 0; box-shadow: inset 0 -1px var(--hairline); }
.wi-group:last-child .wi-row:last-child { box-shadow: none; }
.wi-name { display: grid; gap: 2px; }
.wi-name b { font-size: 14px; font-weight: 600; color: var(--ink); }
.wi-name span { font-size: 12px; color: var(--muted); }
.wi-cell { display: grid; gap: 2px; min-width: 0; }
.wi-w { font-size: 18px; line-height: 1.4; color: var(--ink); word-break: keep-all; overflow-wrap: anywhere; }
.wi-w em, .wi-r em { font-style: normal; color: var(--vermilion-text); }
.wi-r { font-size: 12.5px; line-height: 1.4; color: var(--muted); word-break: keep-all; overflow-wrap: anywhere; }
.wi-r em { color: rgba(160, 71, 42, .8); }
.wi-none { color: rgba(99, 107, 100, .55); font-size: 18px; }

/* Narrow: the form's name on its own line, the two forms side by side under it. */
@container (max-width: 520px) {
  .wi-sheet { padding: 4px 14px 10px; }
  .wi-cols, .wi-row { grid-template-columns: 1fr 1fr; column-gap: 12px; }
  .wi-cols span:first-child { display: none; }
  .wi-name { grid-column: 1 / -1; grid-template-columns: auto 1fr; align-items: baseline; gap: 8px; margin-bottom: 6px; }
  .wi-w { font-size: 17px; }
}

/* Opening: the sheet rises into the tray, its groups settle 70ms apart. */
@media (prefers-reduced-motion: no-preference) {
  .motion .wi-table.is-in .wi-group { animation: wi-group var(--t-enter) var(--ease-enter) both; }
  .motion .wi-table.is-in .wi-group:nth-of-type(2) { animation-delay: 70ms; }
  .motion .wi-table.is-in .wi-group:nth-of-type(3) { animation-delay: 140ms; }
  .motion .wi-table.is-in .wi-sheet { animation: wi-sheet var(--t-enter) var(--ease-enter) both; }
}
@media (prefers-reduced-motion: reduce) {
  .motion .wi-table.is-in .wi-sheet { animation: wi-fade 160ms var(--ease-enter) both; }
}
@keyframes wi-sheet { from { opacity: 0; transform: translateY(10px) scale(.99); } }
@keyframes wi-group { from { opacity: 0; transform: translateY(8px); } }
@keyframes wi-fade { from { opacity: 0; } }