/* Word of the day — /words, /words/<pair>, /words/<pair>/<word>. A static file,
   like story-reader.css: client/static is exposed and the vite build never
   empties it (see StoryReaderPageController). */
.words { width: 100%; max-width: 46rem; box-sizing: border-box; margin: 0 auto; padding: 1.5rem 1rem 5rem;
  overflow-wrap: break-word; }
.words__crumbs { font-size: .85rem; opacity: .7; margin: 0 0 1rem; }
.words__crumbs a { text-decoration: none; }
.words__eyebrow { margin: 0; font-size: .8rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--color-accent, #8a5a12); }
.words__lead { opacity: .75; margin: .3rem 0 1.5rem; line-height: 1.5; }

.word-card { padding: 1.5rem 0 1.25rem; border-bottom: 1px solid rgba(128,128,128,.22); }
.word-card__head { font-family: var(--font-heading, inherit); font-size: 3rem; line-height: 1.15;
  margin: .4rem 0 .2rem; overflow-wrap: anywhere; }
.word-card__alt { font-size: 1.4rem; opacity: .55; margin-left: .5rem; }
.word-card__reading { font-size: 1.2rem; margin: 0; opacity: .85; }
.word-card__reading small { font-size: .75rem; opacity: .6; margin-left: .35rem; text-transform: uppercase; letter-spacing: .04em; }
.word-card__meaning { font-size: 1.25rem; font-weight: 600; margin: .6rem 0 .2rem; }
.word-card__pos { font-size: .85rem; opacity: .6; margin: 0; }
.word-card__note { line-height: 1.6; margin: 1rem 0 0; }

.word-line { margin: 1.5rem 0; padding: 1rem 1.1rem; border-left: 3px solid var(--color-accent, #8a5a12);
  background: rgba(128,128,128,.07); border-radius: 0 .4rem .4rem 0; }
.word-line__label { margin: 0 0 .4rem; font-size: .78rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; opacity: .65; }
.word-line__text { font-size: 1.3rem; line-height: 1.7; margin: 0; }
.word-line__reading { margin: .2rem 0 0; opacity: .6; font-size: .95rem; }
.word-line__translation { margin: .5rem 0 0; opacity: .8; line-height: 1.5; }
.word-line__source { margin: .7rem 0 0; font-size: .9rem; }

.word-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0; }
.word-actions a { display: inline-block; padding: .65rem 1rem; border-radius: .5rem; font-weight: 600;
  text-decoration: none; border: 1px solid rgba(128,128,128,.35); }
.word-actions a.is-primary { background: var(--color-action, #1f5fbf); border-color: transparent; color: #fff; }

.word-nav { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; margin-top: 2rem; }
.word-nav a { text-decoration: none; }

.word-list { list-style: none; margin: 0; padding: 0; }
.word-list li { border-bottom: 1px solid rgba(128,128,128,.16); }
.word-list a { display: grid; grid-template-columns: auto 1fr; gap: .2rem 1rem; padding: .8rem 0;
  text-decoration: none; color: inherit; }
.word-list__word { font-size: 1.35rem; font-weight: 600; grid-row: span 2; min-width: 5rem; overflow-wrap: anywhere; }
.word-list__meaning { font-weight: 500; }
.word-list__meta { font-size: .82rem; opacity: .6; }
.word-list__lang { font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--color-accent, #8a5a12); }
.words__pager { display: flex; justify-content: space-between; margin-top: 1.5rem; }

/* The chooser: one card per language, today's word on it. */
.lang-grid { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1rem; }
.lang-card { display: flex; flex-direction: column; gap: .3rem; padding: 1.1rem 1.2rem; border: 1px solid rgba(128,128,128,.28);
  border-radius: .8rem; text-decoration: none; color: inherit; height: 100%; box-sizing: border-box; }
.lang-card:hover { border-color: var(--color-accent, #8a5a12); }
.lang-card__name { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-accent, #8a5a12); }
.lang-card__word { font-size: 2.2rem; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.lang-card__meaning { font-size: .9rem; opacity: .75; }
.lang-card__go { margin-top: auto; padding-top: .5rem; font-size: .85rem; font-weight: 600; }

/* A language page leads with today's word. */
.word-card--today .word-card__head a { color: inherit; text-decoration: none; }
.word-card--today .word-line { margin: 1rem 0; }
.words__h2 { font-size: 1.1rem; margin: 2rem 0 .5rem; }
.words__other { margin-top: 2.5rem; font-size: .9rem; opacity: .8; }