/* Word page: a card with the headword, its romanization and actions; then the meanings, numbered, split by hairlines,
   each with its lookup words grouped by language. */

.word-card {
  position: relative;
  padding: var(--space-6) var(--space-5);
  overflow: hidden;
  background: var(--gradient-panel);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

/* A soft glow of the accent in the top right corner: decoration only. */
.word-card::before {
  content: '';
  position: absolute;
  inset: -40% -20% auto auto;
  width: 60%;
  aspect-ratio: 1;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--color-accent) 16%, transparent),
    transparent
  );
  pointer-events: none;
}

.word-card > * {
  position: relative;
}

@media (min-width: 48rem) {
  .word-card {
    padding: var(--space-8) var(--space-10);
  }
}

.word-kicker {
  margin: 0 0 var(--space-1);
  color: var(--color-accent);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.word-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
}

.word-header h1 {
  margin: 0;
  font-size: var(--text-headword);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  overflow-wrap: anywhere;
}

/* The actions as one quiet toolbar: listen, star, share, then record and report after a divider. */
.word-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: auto;
  padding: var(--space-1);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-pill);
}

.word-header-actions .icon-button {
  width: var(--size-control-md);
  height: var(--size-control-md);
  border-radius: var(--radius-full);
}

.word-header-actions .result-actions-contribute {
  margin-left: var(--space-1);
  padding-left: var(--space-1);
}

.word-audio {
  display: flex;
  gap: var(--space-1);
}

.word-audio:empty {
  display: none;
}

.word-audio-fallback audio {
  display: block;
  width: 100%;
  max-width: 22rem;
  margin: var(--space-4) 0 0;
}

/* Meanings */

.word-meanings {
  max-width: var(--width-reading);
  margin-top: var(--space-10);
}

.word-section-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.word-count {
  padding: 0 var(--space-2);
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

#definitions {
  margin: 0 0 var(--space-8);
  padding: 0 0 0 var(--space-8);
}

#definitions li {
  padding: var(--space-5) 0 var(--space-5) var(--space-2);
}

#definitions li + li {
  border-top: var(--border-width) solid var(--color-border);
}

#definitions li::marker {
  color: var(--color-accent);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
}

.meaning-body {
  margin: 0;
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
}

/* Lookup words: a line per language, its name in a fixed column, then the words as small pills. */
.lookup-words {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.lookup-group {
  display: flex;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
}

.lookup-language {
  flex: 0 0 var(--size-label);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.lookup-terms {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
}

.lookup-word {
  min-width: 0;
  padding: var(--space-half) var(--space-3);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--text-md);
  overflow-wrap: anywhere;
}

/* Motion: the card rises in, then its label, headword, Latin spelling and toolbar follow one after another (`reveal-in`,
   base.css); then the meanings heading and the meanings themselves. Meanings that "Show more" adds come in the same way
   (an animation runs when an element is added), so they need no script. */
.word-card {
  animation: reveal-in var(--duration-reveal) var(--ease-out) backwards;
}

.word-card .word-kicker,
.word-header > * {
  animation: reveal-in var(--duration-reveal) var(--ease-out) backwards;
  animation-delay: calc(var(--step, 1) * var(--duration-reveal-step) + var(--duration-fast));
}

.word-card .word-kicker {
  --step: 0;
}

.word-header h1 {
  --step: 1;
}

.word-header .romanized {
  --step: 2;
}

.word-header-actions {
  --step: 3;
}

.word-section-title {
  animation: result-in var(--duration-enter) var(--ease-out) backwards;
  animation-delay: calc(4 * var(--duration-reveal-step));
}

#definitions > li {
  animation: result-in var(--duration-enter) var(--ease-out) backwards;
  animation-delay: calc((var(--stagger, 8) + 5) * var(--duration-reveal-step));
}

#definitions > li:nth-child(1) {
  --stagger: 0;
}

#definitions > li:nth-child(2) {
  --stagger: 1;
}

#definitions > li:nth-child(3) {
  --stagger: 2;
}

#definitions > li:nth-child(4) {
  --stagger: 3;
}

#definitions > li:nth-child(5) {
  --stagger: 4;
}

/* Lookup words and toolbar buttons answer the pointer: a soft tint and lift; a press sinks the button. */
.lookup-word {
  transition:
    border-color var(--duration-base) var(--ease-out),
    background var(--duration-base) var(--ease-out),
    translate var(--duration-base) var(--ease-out);
}

@media (hover: hover) {
  .lookup-word:hover {
    background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface));
    border-color: color-mix(in srgb, var(--color-accent) 40%, var(--color-border));
    translate: 0 calc(var(--space-half) * -1);
  }
}

.word-header-actions .icon-button {
  transition:
    color var(--duration-base),
    background var(--duration-base),
    scale var(--duration-fast) var(--ease-out);
}

.word-header-actions .icon-button:active {
  scale: 0.9;
}