/* ===========================================================================
   WORD PAGES and the A-Z WORD LIST (server-rendered: site/word.html,
   site/words.html; also the built-in 404 of routes_words).

   Loaded after app.css (and site.css). Everything is scoped to .wp-page (the
   <body> class of those pages), so the tool page and the other pages are
   untouched. Mobile first; theme variables only, so night mode follows.

   What lives here:
     - the soft-UI tokens of the dictionary tool (.de-page in
       _pages/de/index.html), with a NO-JS light fallback that index.html
       lacks: light is the base, dark comes from data-theme="dark" or, with no
       data-theme at all, from the OS (same rule as app.css);
     - the card, the word box (.wh) and the #wh-style rules app.js injects at
       run time, made static;
     - the raised example tiles (.de-page .ex-example...);
     - the static conjugation table (a <details>, Indikativ/Konjunktiv switch
       as radio buttons, no JS);
     - search field, intro, meta line, related words, A-Z list, 404.
   The page blocks themselves use app.css (.ex-rel, .rel-*, .ex-example) and
   inline styles copied from page2.js.
   =========================================================================== */

/* ---- soft-UI tokens -------------------------------------------------------- */
.wp-page {
  --sf-base:#e9eef4; --sf-hi:#ffffff; --sf-lo:#bfc7d2;
  --sf-grad:linear-gradient(145deg,#f4f7fb,#dde3ec);
  --sf-rim:inset 1px 1px 0 rgba(255,255,255,.9);
  --sf-out:8px 8px 18px var(--sf-lo), -7px -7px 16px var(--sf-hi);
  --sf-out-s:4px 4px 9px var(--sf-lo), -3px -3px 8px var(--sf-hi);
  --sf-out-xs:2px 2px 5px var(--sf-lo), -2px -2px 5px var(--sf-hi);
  --sf-in:inset 6px 6px 13px var(--sf-lo), inset -5px -5px 12px var(--sf-hi);
  --sf-in-s:inset 3px 3px 7px var(--sf-lo), inset -3px -3px 7px var(--sf-hi);
}
:root[data-theme="dark"] .wp-page {
  --sf-base:#141b25; --sf-hi:#1d2733; --sf-lo:#080c11;
  --sf-grad:linear-gradient(145deg,#1a2330,#10161e);
  --sf-rim:inset 1px 1px 0 rgba(255,255,255,.055);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .wp-page {
    --sf-base:#141b25; --sf-hi:#1d2733; --sf-lo:#080c11;
    --sf-grad:linear-gradient(145deg,#1a2330,#10161e);
    --sf-rim:inset 1px 1px 0 rgba(255,255,255,.055);
  }
}

/* Speakers are rendered hidden (listening needs sign-in); app.css gives
   them display:inline-flex, which would beat the hidden attribute. */
.wp-page [hidden] { display: none !important; }

/* ---- layout ---------------------------------------------------------------- */
@media (min-width: 720px) {
  .wp-page .wrap { max-width: 720px; padding-top: 32px; }
}
.wp-page header.app-bar {
  gap: 12px; padding-bottom: 16px; margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.wp-page header.app-bar .site-bar-h { font-size: 20px; letter-spacing: -0.01em; }
.wp-page header.app-bar .sub { font-size: 12px; letter-spacing: 0.02em; }
.wp-page a.back {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  border: 1px solid var(--border); background: var(--surface);
  text-decoration: none; font-size: 16px;
}

/* visually hidden, still read by screen readers */
.wp-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- heading line above the card ----------------------------------------- */
.wp-page .seo-intro { margin-block: 2px 16px; }
.wp-page .seo-intro h1 {
  margin: 0 0 6px; font-size: 25px; font-weight: 700; color: var(--text);
  letter-spacing: -.015em; line-height: 1.25; overflow-wrap: anywhere;
}
.wp-page .seo-intro p {
  margin: 0; font-size: 15px; line-height: 1.7; color: var(--muted);
}
.wp-page .seo-intro .wp-sub { font-size: 14px; }

/* ---- the card: the tool's device surface (.de-page .card.tts) ------------- */
.wp-card {
  background: color-mix(in srgb, var(--sf-base) 86%, transparent);
  border: 0; border-radius: 28px;
  padding: 18px 17px 24px;
  box-shadow: var(--sf-out);
}
:root[data-theme="light"] .wp-card { background: var(--surface); box-shadow: 0 16px 36px -28px rgba(15,23,42,.35); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .wp-card { background: var(--surface); box-shadow: 0 16px 36px -28px rgba(15,23,42,.35); }
}
@media (max-width: 400px) {
  .wp-card { padding: 16px 12px 20px; border-radius: 24px; }
}

/* ---- search field (the tool's recessed well, one line) ------------------- */
.wp-search { display: flex; gap: 8px; align-items: stretch; margin: 0; }
.wp-search input {
  flex: 1 1 auto; min-width: 0; width: 100%;
  border: 0; border-radius: 16px; padding: 12px 14px;
  background: var(--sf-base); box-shadow: var(--sf-in-s);
  color: var(--text); font: inherit; font-size: 16px; line-height: 1.4;
  -webkit-appearance: none; appearance: none;
}
.wp-search input::placeholder { color: var(--muted); opacity: 1; }
.wp-search input:focus {
  outline: none;
  box-shadow: var(--sf-in-s), 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent);
}
.lang-fa .wp-search input:placeholder-shown { direction: rtl; text-align: right; }
.wp-search button {
  flex: none; border: 0; cursor: pointer; font-family: inherit;
  border-radius: 16px; padding: 0 16px;
  font-size: 14px; font-weight: 600;
  color: var(--accent); background: var(--sf-grad);
  box-shadow: var(--sf-out-s), var(--sf-rim);
}
.wp-search button:active { box-shadow: var(--sf-in-s); }
.wp-search button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wp-search--solo { margin: 0 0 18px; }

/* ---- the word box (.de-page .wh + app.js #wh-style, made static) --------- */
.wp-page .wh {
  padding: 16px 16px 18px; margin: 16px 0 0;
  border-radius: 18px; background: var(--sf-base); box-shadow: var(--sf-out);
}
.wp-page .wh .wh-word { margin: 0; line-height: 1.6; font-family: inherit; overflow-wrap: anywhere; }
@keyframes whRing {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 45%, transparent),
                   0 0 0 0 color-mix(in srgb, var(--c) 25%, transparent); }
  30%, 100% { box-shadow: 0 0 0 10px transparent, 0 0 0 20px transparent; }
}
.wp-page .wh-conj { animation: whRing 6s ease-out infinite; }
.wp-page .wh-conj:hover { background: color-mix(in srgb, var(--c) 10%, transparent) !important; }
.wp-page .wh-facts {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 8px; margin-top: 10px;
}
.wp-page .wh-fact {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 10px;
  border: 1px solid var(--border); border-radius: 999px; font-size: 13.5px; color: var(--text);
}
.wp-page .wh-fact small { font-size: 12px; font-weight: 600; }
@media (max-width: 560px) {
  .wp-page .wh-facts {
    display: grid; grid-template-columns: max-content minmax(0, max-content);
    justify-content: center; align-items: baseline; gap: 8px 14px; text-align: left;
  }
  .wp-page .wh-fact { display: contents; }
  .wp-page .wh-fact small { text-align: right; color: var(--muted); }
}
@media (prefers-reduced-motion: reduce) { .wp-page .wh-conj { animation: none; } }

/* Konjugation / Deklination: a <details>; the summary is the app's button. */
.wp-page .wh-table { margin-top: 16px; }
.wp-page .wh-table > summary {
  display: inline-block; list-style: none; user-select: none;
}
.wp-page .wh-table > summary::-webkit-details-marker { display: none; }
.wp-page .wh-table > summary::marker { content: ""; }
.wp-page .wh-table > summary .wh-arr::after { content: "\25BE"; }
.wp-page .wh-table[open] > summary .wh-arr::after { content: "\25B4"; }
.wp-page .wh-table[open] > summary { animation: none; }
.wp-page .wh-table > summary:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; }

/* the table pressed into the box (.de-page .wh .conj-wrap) */
.wp-page .wh .conj-wrap {
  position: relative; text-align: start;
  margin: 14px -8px 0; padding: 12px 8px 10px;
  border-radius: 14px; background: var(--sf-base); box-shadow: var(--sf-in-s);
  --conj-fs: 15px;
}
.wp-page .wh .conj-table th { font-size: 13px; border-bottom-color: color-mix(in srgb, var(--muted) 30%, transparent); }
/* No fitConj() here: a word too long for its column breaks at the stem
   (&shy;) rather than pushing the table past the box. */
.wp-page .wp-conj .conj-table td:not(.conj-pron) { overflow-wrap: anywhere; hyphens: manual; }
.wp-page .wp-form { display: block; }

/* Indikativ / Konjunktiv switch without JS: two radio buttons before the
   switch and the table; the labels are the app's switch keys. */
.wp-page .wp-mood-in {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;
}
.wp-page .wh .conj-mood { background: transparent; gap: 4px; padding: 0; margin-bottom: 10px; }
.wp-page .conj-mood label {
  border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 600; color: var(--muted);
  padding: 7px 18px; border-radius: 999px;
}
#wp-mood-ind:checked ~ .conj-mood label[for="wp-mood-ind"],
#wp-mood-konj:checked ~ .conj-mood label[for="wp-mood-konj"] {
  color: var(--text); background: var(--sf-grad); box-shadow: var(--sf-out-s), var(--sf-rim);
}
#wp-mood-ind:focus-visible ~ .conj-mood label[for="wp-mood-ind"],
#wp-mood-konj:focus-visible ~ .conj-mood label[for="wp-mood-konj"] {
  outline: 2px solid var(--c); outline-offset: 1px;
}
@container (max-width: 520px) {
  #wp-mood-ind:checked ~ .conj-table .m-konj,
  #wp-mood-konj:checked ~ .conj-table .m-ind { display: none; }
}

/* "Also:" chips (.de-page .alt-reading), here links to the other spelling */
.wp-alt { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.wp-page .alt-reading {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  border: 0; font-family: inherit; text-decoration: none;
  border-radius: 999px; padding: 7px 14px;
  background: var(--sf-base); color: var(--muted);
  box-shadow: var(--sf-in-s);
  font-size: 12.5px; overflow-wrap: anywhere;
}
.wp-page a.alt-reading:hover { box-shadow: var(--sf-out-xs), var(--sf-rim); }
.wp-page a.alt-reading:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.wp-page .alt-reading .alt-lbl { font-size: 14px; font-weight: 700; color: var(--text); }
.wp-page .alt-reading .alt-w { font-size: 14px; color: var(--text); }
.wp-page a.alt-reading .alt-w { text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--muted) 45%, transparent); }
.wp-page .alt-reading .alt-pos { color: var(--c); font-weight: 700; }

/* ---- the page blocks ------------------------------------------------------- */
.wp-page .wp-card .ex-body { margin-top: 16px; }
.wp-page .wp-cls { margin: 0; line-height: inherit; font-family: inherit; }
/* rows that link to another word page look like the app's rows */
.wp-page a.ex-rel-row { text-decoration: none; color: var(--text); }
.wp-page a.ex-rel-row .rel-de { color: var(--text); text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--muted) 45%, transparent);
  text-underline-offset: 3px; }
.wp-page a.ex-rel-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.wp-page div.ex-rel-row { cursor: default; }
.wp-page div.ex-rel-row:hover { background: var(--surface); }

/* examples: the tool's raised tiles (.de-page .ex-example) */
.wp-page .ex-examples { border-top: 0; padding-top: 0; margin-top: 12px; }
.wp-page .ex-example {
  position: relative;
  background: var(--sf-grad); border-radius: 16px;
  box-shadow: var(--sf-out-xs), var(--sf-rim);
  padding: 12px 16px; margin-bottom: 9px;
}
.wp-page.wp-say .ex-example { padding-inline-end: 58px; }   /* room for the speaker key */
.wp-page.wp-say .wp-form[data-say] { cursor: pointer; }      /* conjugation cells play when signed in */
.wp-page .ex-example-de { font-size: 14.5px; line-height: 1.6; }
.wp-page .ex-example-tr { font-size: 13px; line-height: 1.8; margin-top: 4px; }
.wp-page .ex-hear {
  position: absolute; top: 50%; inset-inline-end: 14px; transform: translateY(-50%);
  border-radius: 999px; padding: 8px; margin: 0; width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sf-base); box-shadow: var(--sf-out-xs);
  color: var(--muted); opacity: 1;
}
.wp-page .ex-hear svg { width: 100%; height: 100%; display: block; }

/* the owner's intro above the blocks, and other prose */
.wp-intro { margin: 16px 2px 0; font-size: 15.5px; line-height: 1.75; color: var(--text); overflow-wrap: anywhere; }
.wp-intro > :first-child { margin-top: 0; }
.wp-intro > :last-child { margin-bottom: 0; }
.wp-intro p { margin: 0 0 12px; }
.wp-intro h2 { font-size: 20px; line-height: 1.3; margin: 24px 0 8px; }
.wp-intro h3 { font-size: 17px; line-height: 1.35; margin: 20px 0 6px; }
.wp-intro ul, .wp-intro ol { margin: 0 0 12px; padding-inline-start: 22px; }
.wp-intro a { color: var(--accent); }
.wp-intro img { max-width: 100%; height: auto; }
.wp-intro table { border-collapse: collapse; width: 100%; display: block; overflow-x: auto; }
.wp-intro th, .wp-intro td { border: 1px solid var(--border); padding: 6px 10px; text-align: start; }

/* ---- under the card -------------------------------------------------------- */
.wp-meta { margin: 18px 4px 0; font-size: 13px; color: var(--muted); }
.wp-meta p { margin: 0 0 6px; }
.wp-meta a { color: var(--accent); }
.wp-langs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.wp-langs a { color: var(--accent); }

.wp-related { margin: 26px 0 0; }
.wp-related h2, .wl-section h2, .wl-faq h2 {
  font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); margin: 0 4px 10px;
}
.wl-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.wl-chips a {
  display: inline-block; padding: 6px 12px; border-radius: 999px;
  text-decoration: none; color: var(--text); font-size: 14px;
  background: var(--sf-base); box-shadow: var(--sf-out-xs);
  max-width: 100%; overflow-wrap: anywhere;
}
.wl-chips a:hover { color: var(--accent); }
.wl-art { font-size: .86em; font-weight: 600; }
.wl-g-m { color: var(--gen-m); }
.wl-g-f { color: var(--gen-f); }
.wl-g-n { color: var(--gen-n); }
.wl-g-p { color: var(--pos-other); }
.wl-g-x { color: var(--muted); }

/* ---- A-Z list ---------------------------------------------------------------- */
.wl-letters { margin: 0 0 18px; }
.wl-letters ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
}
.wl-letters a, .wl-letters .is-empty {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 6px; border-radius: 10px;
  font-size: 15px; font-weight: 600; text-decoration: none;
}
.wl-letters a { color: var(--text); background: var(--sf-base); box-shadow: var(--sf-out-xs); }
.wl-letters a:hover { color: var(--accent); }
.wl-letters a[aria-current="page"] { color: var(--accent); box-shadow: var(--sf-in-s); }
.wl-letters .is-empty { color: var(--muted); opacity: .45; }

.wl-section { margin: 0 0 22px; }
.wl-list {
  list-style: none; margin: 0 0 18px; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px;
}
@media (min-width: 600px) { .wl-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wl-list a {
  display: flex; flex-direction: column; gap: 2px; height: 100%;
  padding: 10px 14px; border-radius: 14px; text-decoration: none; color: var(--text);
  background: var(--sf-grad); box-shadow: var(--sf-out-xs), var(--sf-rim);
  min-width: 0;
}
.wl-list a:hover .wl-word { color: var(--accent); }
.wl-list a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wl-word { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; text-align: left; }
.wl-gloss { font-size: 13.5px; color: var(--muted); overflow-wrap: anywhere; unicode-bidi: plaintext; text-align: start; }
.wl-empty { color: var(--muted); font-size: 14px; margin: 0 4px 18px; }
.wl-body { margin: 8px 2px 18px; }

.wl-pages { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 8px 0 0; }
.wl-pages ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.wl-pages a, .wl-pages span[aria-current] {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 10px; border-radius: 10px;
  font-size: 14px; text-decoration: none;
}
.wl-pages a { color: var(--text); background: var(--sf-base); box-shadow: var(--sf-out-xs); }
.wl-pages span[aria-current] { color: var(--accent); font-weight: 700; box-shadow: var(--sf-in-s); }

.wl-faq { margin: 22px 0 0; }
.wl-faq details {
  margin: 0 0 8px; padding: 10px 14px; border-radius: 14px;
  background: var(--sf-base); box-shadow: var(--sf-out-xs);
}
.wl-faq summary { cursor: pointer; font-weight: 600; }
.wl-faq .wp-intro { margin-top: 8px; font-size: 14.5px; }

/* ---- built-in 404 (until site/404.html exists) ------------------------------ */
.wp-404-links { margin: 0 4px; font-size: 14px; color: var(--muted); }
.wp-404-links a { color: var(--accent); }