/* Public dictionary styles. Deliberately separate from
   frontend/static/css/app.css (the editor's stylesheet) -- the public
   pages never load app.css, so nothing here needs to coexist with or
   override editor-specific rules like #sidebar/#entry-list. */

/* Self-hosted Charis SIL -- see frontend/static/fonts/README.md for
   where to get the files. Deliberately NOT loaded from Google Fonts:
   their subsetted copy drops the combining-ring-below glyph (and
   other rare marks) that this dictionary's syllabic-consonant
   notation depends on. */
@font-face {
  font-family: "Charis SIL";
  src: url("/static/fonts/CharisSIL-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Charis SIL";
  src: url("/static/fonts/CharisSIL-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Charis SIL";
  src: url("/static/fonts/CharisSIL-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Charis SIL";
  src: url("/static/fonts/CharisSIL-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Charis SIL", Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  color: #1c1a17;
  background: #fdfbf7;
  line-height: 1.55;
}

#public-site-header {
  border-bottom: 1px solid #ddd4c4;
  padding: 10px 24px;
  background: #fffefb;
}
#public-site-header nav {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto;
}
#site-title {
  display: flex;
  flex: none;
  text-decoration: none;
  color: #1c1a17;
}
/* Logo lockup: 34px tall (>= 30px minimum; small-size cut is designed for this range). */
#site-title img { display: block; height: 34px; width: auto; }
#feature-nav {
  list-style: none;
  display: flex;
  gap: 18px;
  margin: 0;
  padding: 0;
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.9rem;
}
#feature-nav a { color: #6b5c3f; text-decoration: none; }
#feature-nav a[aria-current="page"] { color: #1c1a17; font-weight: 600; }

#public-main {
  max-width: 1000px;
  margin: 0 auto;
  padding: 32px 24px 80px;
}

h1 { font-size: 2.1rem; margin: 0 0 6px; }
h2 { font-size: 1.25rem; margin: 2em 0 0.6em; border-bottom: 1px solid #eae3d3; padding-bottom: 0.2em; }
h3 { font-size: 1rem; margin: 1.4em 0 0.4em; font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; }

/* --- search page ------------------------------------------------- */

#dictionary-search-form {
  margin: 18px 0 10px;
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}
/* Generic visually-hidden utility (not ID-scoped to #dictionary-search-
   form) -- Implementation Feature 3's #form-analyzer-form reuses this
   same class for its own search-input label, and a rule scoped to one
   form's ID wouldn't apply there. See the Feature 2 bug-fix history:
   a blanket `label` descendant selector previously clipped every
   nested checkbox label too, which is why this stays scoped to the
   .visually-hidden CLASS specifically rather than any bare tag
   selector. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* Two-column layout: the search box + diacritic row on the left
   (grows to fill available width), the grammatical-filter panel as a
   fixed-width sidebar on the right. align-items: flex-start is the
   important part here -- without it, a flex row's default
   align-items: stretch forces every column to match the height of the
   tallest one (the filter panel, once opened), which is what
   previously stretched the search box/button/diacritic buttons into
   tall vertical bars. */
.dictionary-search-area {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.dictionary-search-main {
  flex: 1 1 auto;
  min-width: 0;
}
.search-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
#dictionary-search-input {
  flex: 1;
  font-size: 1.05rem;
  padding: 10px 14px;
  border: 1px solid #c9bfa5;
  border-radius: 4px;
  background: #fff;
}
#dictionary-search-input:focus {
  outline: 3px solid #b89b5e;
  outline-offset: 1px;
}
/* Scoped to .search-input-row (NOT the whole #dictionary-search-form)
   so this only styles the actual Search submit button. The old
   `#dictionary-search-form button` selector was an ID selector, which
   beats a class selector on specificity regardless of source order --
   it was silently overriding both `.diacritic-btn` (making the
   diacritic buttons big here, though correctly small on the entry-page
   sidebar which uses a different, non-ID-scoped form) and
   `.grammar-filters-actions button` (the "Apply filters" button). */
.search-input-row button {
  font-size: 0.95rem;
  padding: 10px 18px;
  border: 1px solid #6b5c3f;
  background: #6b5c3f;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}
.search-input-row button:focus-visible,
a:focus-visible {
  outline: 3px solid #b89b5e;
  outline-offset: 1px;
}

.dictionary-result-count, .dictionary-no-results {
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.9rem;
  color: #6b5c3f;
}

/* --- grammatical filter panel (Feature 2) --------------------------- */
/* Compact, scholarly-looking controls (brief section 58) -- restrained
   to match the rest of the dictionary rather than a dashboard of
   colored badges. Lives inside #dictionary-search-form, so its
   checkboxes share that form's state with the search input (section
   34) -- no separate <form> here. */
.grammar-filters {
  flex: 0 0 240px;
  width: 240px;
  margin: 0;
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.9rem;
  border: 1px solid #ddd4c4;
  border-radius: 4px;
  background: #fffefb;
}
.grammar-filters summary {
  cursor: pointer;
  padding: 10px 14px;
  font-weight: 600;
  color: #1c1a17;
  list-style: none;
}
.grammar-filters summary::-webkit-details-marker { display: none; }
.grammar-filters summary::before {
  content: "\25B8";
  display: inline-block;
  margin-right: 6px;
  color: #6b5c3f;
  transition: transform 0.1s ease;
}
.grammar-filters[open] summary::before { transform: rotate(90deg); }
.grammar-filters summary:focus-visible {
  outline: 3px solid #b89b5e;
  outline-offset: 1px;
}

.grammar-filters fieldset {
  border: none;
  border-top: 1px solid #eee6d5;
  margin: 0;
  padding: 10px 14px;
}
.grammar-filters legend {
  padding: 0 0 6px;
  font-weight: 600;
  color: #6b5c3f;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Real two-column grid, so the right-hand column's checkboxes line up
   the way a table cell would -- an inline-flex/wrap layout can't
   guarantee that once label text lengths differ. */
.filter-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 6px;
}
.filter-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: #1c1a17;
  cursor: pointer;
  min-width: 0;
}
.filter-checkbox input[type="checkbox"] {
  cursor: pointer;
  flex: 0 0 auto;
  /* Nudge down from the top of the flex line to align with the cap
     height of the label's first line, rather than sitting above it --
     with align-items: flex-start, a 2-line label (e.g. "proper noun"
     wrapping to "proper" / "noun") keeps the box level with "proper",
     not centered against the full two-line block. */
  margin-top: 0.2em;
}

/* POS-based facet greying (grammar-filters.js) -- client-side guidance
   only, never removes an already-checked value from the submitted
   query (see that script's docstring). */
.grammar-filters fieldset.facet-inapplicable legend {
  color: #b7ab8f;
}
.filter-checkbox--disabled {
  color: #b7ab8f;
  cursor: not-allowed;
}
.filter-checkbox--disabled input[type="checkbox"] {
  cursor: not-allowed;
}

.grammar-filters-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px 14px;
}
.grammar-filters-actions button {
  font-size: 0.85rem;
  padding: 6px 14px;
  border: 1px solid #6b5c3f;
  background: #6b5c3f;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}
.grammar-filters-actions a {
  font-size: 0.85rem;
  color: #6b5c3f;
}

.active-filter-summary {
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.85rem;
  color: #6b5c3f;
  margin: 0 0 10px;
}
.active-filter-summary a { color: #6b5c3f; }

.dictionary-results-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dictionary-result {
  padding: 14px 0;
  border-bottom: 1px solid #eee6d5;
}
.result-headword {
  font-size: 1.3rem;
  font-weight: 700;
  color: #1c1a17;
  text-decoration: none;
}
.result-headword:hover, .result-headword:focus-visible { text-decoration: underline; }
.result-meta {
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.85rem;
  color: #6b5c3f;
  margin-left: 10px;
}
.result-sense-preview {
  margin: 4px 0 0;
  font-size: 0.95rem;
  color: #333;
}

.descendant-path-match { margin: 8px 0 0; }
.descendant-alias-kind-label {
  display: block;
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.8rem;
  color: #6b5c3f;
  margin-bottom: 2px;
}
.descendant-path {
  margin: 0;
  padding-left: 20px;
}
.descendant-path li { margin: 2px 0; }
.descendant-path-lang {
  font-weight: 600;
  color: #6b5c3f;
}
/* Enhancement request: indent each daughter-language entry one step
   further than its parent, so a matched chain reads as a staircase
   (child under parent) instead of a flat numbered list -- while
   keeping ONE continuous 1..N numbering, which a real nested <ol> per
   level would reset at each level instead of continuing. `data-depth`
   is the node's position in its own root-to-leaf chain (see the
   template), clamped at 8 -- the deepest chain in the live corpus
   today -- so anything unusually deep just keeps the depth-8 indent
   rather than running off the page. */
.descendant-path li[data-depth="1"] { margin-left: 1.25em; }
.descendant-path li[data-depth="2"] { margin-left: 2.5em; }
.descendant-path li[data-depth="3"] { margin-left: 3.75em; }
.descendant-path li[data-depth="4"] { margin-left: 5em; }
.descendant-path li[data-depth="5"] { margin-left: 6.25em; }
.descendant-path li[data-depth="6"] { margin-left: 7.5em; }
.descendant-path li[data-depth="7"] { margin-left: 8.75em; }
.descendant-path li[data-depth="8"] { margin-left: 10em; }

.dictionary-pagination {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 24px 0;
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.9rem;
}
.dictionary-pagination a { color: #6b5c3f; }
.dictionary-page-context { color: #999; }

/* --- Implementation Feature 3: Inflected-Form Analyzer -------------- */
/* Same visual language as Dictionary Search above (brief section 55) --
   no second design system, just the analyzer's own result shape:
   lemma header, then a nested list of its matched analyses (brief
   section 38's grouping requirement made visible). */

.forms-intro {
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.95rem;
  color: #6b5c3f;
  margin: 0 0 18px;
}

.forms-instructions {
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.9rem;
  color: #4a4436;
}
.forms-example-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 8px 0 16px;
  padding: 0;
}
.forms-example-list a {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid #c9bfa5;
  border-radius: 4px;
  color: #1c1a17;
  text-decoration: none;
  font-family: "Charis SIL", Georgia, "Iowan Old Style", "Palatino Linotype", serif;
}
.forms-example-list a:hover, .forms-example-list a:focus-visible { border-color: #6b5c3f; }
.forms-instructions-note { color: #6b5c3f; font-size: 0.85rem; }

.forms-approximate-notice {
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.88rem;
  color: #7a5a2a;
  background: #fbf3e2;
  border: 1px solid #e6d3ab;
  border-radius: 4px;
  padding: 10px 14px;
  margin: 14px 0;
}

.forms-result-count, .forms-no-results {
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.9rem;
  color: #6b5c3f;
}

.forms-results-list { list-style: none; margin: 0; padding: 0; }
.forms-result-entry {
  padding: 16px 0;
  border-bottom: 1px solid #eee6d5;
}
.forms-result-lemma { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 10px; }
.forms-result-headword {
  font-size: 1.3rem;
  font-weight: 700;
  color: #1c1a17;
}
.forms-result-grammar, .forms-result-gloss {
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.85rem;
  color: #6b5c3f;
}
.forms-result-analyses {
  list-style: disc;
  margin: 8px 0 8px 1.3em;
  padding: 0;
  font-size: 0.98rem;
}
.forms-result-analyses li { margin: 3px 0; }
.forms-matched-variant { font-weight: 700; }
.forms-qualifier {
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.85rem;
  color: #6b5c3f;
  font-style: italic;
}
.forms-canonical-cell {
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.82rem;
  color: #999;
}
.forms-result-links {
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.85rem;
  margin: 4px 0 0;
}
.forms-result-links a { color: #6b5c3f; }

/* --- diacritic character palette (change-request round item 3) ---- */
/* Small buttons -- roughly the footprint of the editor's own unlink
   "x" button (frontend/static/css/etymology-editor.css's
   .xref-unlink-btn), since that was the explicit size reference. */
.diacritic-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 6px 0 14px;
}
.diacritic-btn {
  min-width: 1.4em;
  padding: 1px 1px;
  border: 1px solid #c9bfa5;
  border-radius: 3px;
  background: #fff;
  color: #1c1a17;
  font-family: "Charis SIL", Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  font-size: 0.85rem;
  line-height: 1.0;
  cursor: pointer;
}
.diacritic-btn:hover, .diacritic-btn:focus-visible {
  background: #f6f1e4;
  border-color: #6b5c3f;
}

/* --- entry detail page --------------------------------------------- */

.entry-grammar-line {
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  color: #6b5c3f;
  margin: 0 0 14px;
}

/* Headword + Runic + Pronunciation, all on one line (change-request
   items 1/2). Runic/Pronunciation keep their own smaller sans-serif
   font rather than inheriting h1's large serif size -- baseline-
   aligned via flexbox so they still read as "on the same line" as
   the headword even though their type size differs. */
.headword-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 20px;
  margin: 0;
}
.headword-line h1 { margin: 0; }
.runic-inline, .pronunciation-inline {
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 1.0rem;
  color: #6b5c3f
  /* color: #444; */
}
.runic-inline { font-size: 1.0rem; }

.sibling-nav {
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.85rem;
  background: #f6f1e4;
  border-radius: 4px;
  padding: 8px 12px;
  margin: 12px 0;
}
.sibling-nav ol { list-style: none; margin: 4px 0 0; padding: 0; display: flex; gap: 14px; flex-wrap: wrap; }
.sibling-nav [aria-current="page"] { font-weight: 700; }

.entry-senses { padding-left: 1.4em; }
.entry-single-sense { font-size: 1.05rem; }

.entry-etymology p { margin: 0 0 1em; }
.entry-etymology em { font-style: italic; }

/* Etymology cross-references (change-request item 3, italics rule
   revised by the following change-request round's item 6/7). Colors
   match the editor's own (frontend/static/css/etymology-editor.css):
   brown for headword cross-references, green for cognates/comparanda/
   etymons/reflexes, blue for bibliography citations.

   Italics follow the SCRIPT, not the mention kind: a headword
   cross-reference is always a Latin-alphabet reconstructed Proto-
   Germanic form, so always italic. A cognate/etymon/reflex mention's
   own label is italic only when .xref-italic is present -- added in
   Python only for mentions with no recorded transliteration, which is
   this app's existing signal for "already Latin script" (see
   services/etym_render.py's _render_cognate_mention). A
   transliteration itself (.xref-translit) is BY DEFINITION always
   Latin-alphabet, so it's unconditionally italic.

   Every xref type gets a pointer cursor (change-request item 7) --
   they're all hoverable/clickable in some way (tooltip at minimum,
   navigation for headwords). */
.xref { cursor: pointer; }
.xref-mention.xref-headword {
  font-style: italic;
  color: #7a3b12;
  text-decoration: none;
  border-bottom: none; /* no underline, per change-request item 3 */
}
.xref-mention-label.xref-italic { font-style: italic; }
.xref-mention.xref-cognate { color: #2b6a3f; }
.xref-translit { color: #2b6a3f; font-style: italic; }
.xref-citation { color: #2b5c8a; font-style: normal; }

/* Hover tooltip on mentions/citations (see frontend/static/js/
   public-tooltip.js) -- same look as the editor's own .xref-tooltip
   (frontend/static/css/etymology-editor.css), duplicated here rather
   than shared since the public pages never load the editor's
   stylesheet (see the file header comment above). */
.xref-tooltip {
  position: absolute;
  z-index: 1000;
  background: #2b2b2b;
  color: #f5f5f5;
  border-radius: 4px;
  padding: 8px 10px;
  max-width: 320px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  font-size: 13px;
  line-height: 1.4;
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-style: normal;
}
.xref-tooltip .hint { color: #bbb; }
.xref-tooltip-senses {
  margin: 4px 0 0 0;
  padding-left: 18px;
}
.xref-tooltip-senses li { margin-bottom: 2px; }

.paradigm-table-wrap { overflow-x: auto; margin-bottom: 1.2em; }
table.paradigm-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 420px;
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.9rem;
}
table.paradigm-table th, table.paradigm-table td {
  border: 1px solid #e5ddc9;
  padding: 6px 10px;
  text-align: left;
}
table.paradigm-table thead th { background: #f6f1e4; }
table.paradigm-table tbody th { background: #fbf8f0; font-weight: 600; }

.descendant-tree, .descendant-children {
  list-style: none;
  margin: 0;
  padding-left: 1.4em;
  border-left: 1px solid #e5ddc9;
}
.descendant-tree { padding-left: 0; border-left: none; }
.descendant-tree > li { margin-bottom: 6px; }
.descendant-orth { font-weight: 600; }
.descendant-lang {
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  color: #6b5c3f;
  font-size: 0.85rem;
}

.entry-note { background: #f6f1e4; border-radius: 4px; padding: 10px 14px; font-size: 0.95rem; }
.entry-source-link { font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 0.85rem; }

/* --- entry-page search sidebar (change-request item 4) -------------- */
/* Narrower cousin of the editor's own #sidebar (frontend/static/css/
   app.css), reusing its ~280px width convention. */
.entry-page-layout {
  display: flex;
  align-items: flex-start;
  gap: 28px;
}
.entry-page-sidebar {
  width: 200px;
  flex-shrink: 0;
  position: sticky;
  top: 20px;
}
.entry-page-sidebar form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}
.entry-page-sidebar label {
  font-size: 0.8rem;
  color: #6b5c3f;
}
.entry-page-sidebar input[type="search"] {
  font-size: 0.9rem;
  padding: 8px 10px;
  border: 1px solid #c9bfa5;
  border-radius: 4px;
  background: #fff;
  width: 100%;
}
.entry-page-sidebar .diacritic-buttons { margin: 8px 0 4px; }

/* Compact typeahead dropdown (change-request round item 4) -- flows
   in-page below the input rather than an absolute overlay, since the
   sidebar column is already narrow and this keeps the interaction
   simple (no positioning/z-index to get wrong). */
.sidebar-search-results:empty { margin: 0; }
.quicksearch-list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  border: 1px solid #e5ddc9;
  border-radius: 4px;
  background: #fff;
  max-height: 320px;
  overflow-y: auto;
}
.quicksearch-list li {
  padding: 7px 10px;
  border-bottom: 1px solid #f0e9d8;
}
.quicksearch-list li:last-child { border-bottom: none; }
.quicksearch-list a {
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-weight: 600;
  color: #1c1a17;
  text-decoration: none;
  display: block;
}
.quicksearch-list a:hover, .quicksearch-list a:focus-visible { text-decoration: underline; }
.quicksearch-meta {
  display: block;
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.78rem;
  color: #6b5c3f;
}
.quicksearch-empty {
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.85rem;
  color: #999;
  margin: 4px 0 0;
}
.entry-page-main { flex: 1; min-width: 0; }

@media (max-width: 700px) {
  .entry-page-layout { flex-direction: column; }
  .entry-page-sidebar { width: 100%; position: static; }
  .dictionary-search-area { flex-direction: column; }
  .grammar-filters { width: 100%; flex: 1 1 auto; }
}

@media (max-width: 560px) {
  #site-title img { height: 30px; }
  #public-main { padding: 20px 14px 60px; }
  h1 { font-size: 1.7rem; }
  .filter-checkbox-grid { grid-template-columns: 1fr; }
}

/* --- Implementation Feature 4: Morphological Form Finder ------------ */
/* Same visual language as Dictionary Search / Form Analyzer above --
   no second design system. Entry-search results reuse .forms-results-
   list/.forms-result-entry (Feature 3) directly; the rules below cover
   only what's genuinely new: the selected-lemma header, the
   grammatical-form <select>, and the result display. */

.forms-cross-link {
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.88rem;
  color: #6b5c3f;
  margin: 20px 0 0;
}
.forms-cross-link a { color: #6b5c3f; }

.form-finder-entry-link {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 10px;
  text-decoration: none;
  color: inherit;
}
.form-finder-entry-link:hover .forms-result-headword,
.form-finder-entry-link:focus-visible .forms-result-headword {
  text-decoration: underline;
}

.form-finder-selected-lemma {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 0 0 4px;
}
.form-finder-headword {
  font-size: 1.4rem;
  font-weight: 700;
  color: #1c1a17;
}
.form-finder-change-lemma {
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.85rem;
  margin: 0 0 20px;
}
.form-finder-change-lemma a, .entry-find-a-form-link a { color: #6b5c3f; }
.entry-find-a-form-link {
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.85rem;
  margin: 6px 0 0;
}

#form-finder-select-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 0 0 20px;
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}
#form-finder-select-form label { font-size: 0.9rem; color: #4a4436; }
#form-finder-select-form select {
  font-size: 0.95rem;
  padding: 6px 8px;
  border: 1px solid #c9bfa5;
  border-radius: 4px;
  background: #fff;
  min-width: 260px;
}
#form-finder-select-form button {
  font-size: 0.9rem;
  padding: 6px 14px;
  border: 1px solid #6b5c3f;
  border-radius: 4px;
  background: #6b5c3f;
  color: #fff;
  cursor: pointer;
}
#form-finder-select-form button:hover, #form-finder-select-form button:focus-visible {
  background: #4a4436;
}

.form-finder-result {
  border-top: 1px solid #eee6d5;
  padding-top: 16px;
  margin-top: 4px;
}
.form-finder-result h2 {
  font-size: 1rem;
  margin: 0 0 8px;
  color: #4a4436;
}
.form-finder-result-label {
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.9rem;
  color: #6b5c3f;
  margin: 0 0 6px;
}
.form-finder-result-forms {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}
.form-finder-result-forms li { margin: 4px 0; }
.form-finder-result-form {
  font-family: "Charis SIL", Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #1c1a17;
}
.form-finder-multiple-note {
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.85rem;
  color: #6b5c3f;
  font-style: italic;
  margin: 4px 0 0;
}

/* --- Implementation Feature 5: English -> Proto-Germanic Reverse
   Dictionary ------------------------------------------------------- */
/* Same visual language as Dictionary Search/Form Analyzer above --
   reuses .dictionary-search-area/.dictionary-search-main/.search-
   input-row/.dictionary-results-list/.result-headword/.result-meta/
   .dictionary-no-results/.dictionary-pagination/.active-filter-summary
   as-is (this feature's results are entry cards, same base shape as
   Dictionary Search's own), adding only the handful of classes that
   are genuinely new to this feature below. */

#reverse-dictionary-search-input {
  flex: 1;
  font-size: 1.05rem;
  padding: 10px 14px;
  border: 1px solid #c9bfa5;
  border-radius: 4px;
  background: #fff;
}
#reverse-dictionary-search-input:focus {
  outline: 3px solid #b89b5e;
  outline-offset: 1px;
}

.reverse-dictionary-intro {
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.95rem;
  color: #6b5c3f;
  margin: 0 0 18px;
}

.reverse-dictionary-hint {
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.85rem;
  color: #6b5c3f;
  margin: 8px 0 16px;
}
.reverse-dictionary-hint a { color: #6b5c3f; }

.reverse-dictionary-examples {
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  color: #4a4436;
}
.reverse-dictionary-example-links a {
  display: inline-block;
  margin-right: 4px;
  color: #6b5c3f;
}

/* Brief section 50: a subtle label distinguishing a suffix/prefix
   "word-formation function" entry from an ordinary lexical result --
   never styled to look like a normal sense gloss. */
.function-entry-label {
  font-style: italic;
  color: #9c8a5e;
}

/* Numbered matched-sense list -- uses the CSS list's own `value`
   attribute per <li> (set in the template from the stored Sense.
   number) so the visible numbering matches the original dictionary
   sense numbers even when only a subset of an entry's senses matched
   (brief section 20: never renumbered starting from 1). */
.reverse-result-senses {
  margin: 6px 0 0 1.3em;
  padding: 0;
  font-size: 0.98rem;
  color: #333;
}
.reverse-result-senses li { margin: 2px 0; }

.reverse-dictionary-crosslink {
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.85rem;
  color: #6b5c3f;
  margin-top: 24px;
}
.reverse-dictionary-crosslink a { color: #6b5c3f; }

/* Implementation Feature 7 (PIE Etymon Search) -- reuses the existing
   .dictionary-result / .result-headword / .result-meta /
   .result-sense-preview / .dictionary-result-count /
   .dictionary-pagination / .active-filter-summary / .dictionary-search-area
   styles established by earlier features; only the PIE-specific
   pieces (mode selector, structured/text tabs, matched-etymon list,
   text-match badge/snippet) are new. */

.pie-etymons-intro {
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.95rem;
  color: #4a4030;
  max-width: 60em;
}

.pie-etymons-mode {
  border: none;
  padding: 0;
  margin: 0 0 10px 0;
  display: flex;
  gap: 18px;
  align-items: center;
}
.pie-etymons-mode legend {
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.85rem;
  color: #6b5c3f;
  padding: 0;
}
.pie-etymons-mode-option {
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.pie-etymons-examples,
.pie-etymons-example-links {
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.9rem;
  color: #4a4030;
}
.pie-etymons-example-links a { color: #6b5c3f; }

.pie-etymons-source-tabs {
  display: flex;
  gap: 4px;
  margin: 14px 0 10px 0;
  border-bottom: 1px solid #d9cfb0;
}
.pie-etymons-source-tabs a {
  padding: 6px 12px;
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.9rem;
  color: #6b5c3f;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.pie-etymons-source-tab-active {
  color: #2f2a1e;
  border-bottom: 2px solid #6b5c3f;
  font-weight: 600;
}

.pie-etymons-text-warning {
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.85rem;
  color: #7a6a45;
  background: #faf6ea;
  border: 1px solid #e3d9b8;
  border-radius: 4px;
  padding: 8px 12px;
  max-width: 55em;
}

.pie-etymons-match-mode-notice,
.pie-etymons-no-results {
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.9rem;
  color: #4a4030;
}

.pie-etymons-matched {
  margin-top: 6px;
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.9rem;
}
.pie-etymons-matched-label {
  font-weight: 600;
  color: #6b5c3f;
  margin-right: 4px;
}
.pie-etymons-matched-list {
  display: inline;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pie-etymons-matched-list li {
  display: inline-block;
  margin-right: 10px;
  font-family: "Charis SIL", Georgia, serif;
}
.pie-etymons-structured-badge {
  display: inline-block;
  margin-left: 4px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #3f6b3f;
  border: 1px solid #b8d4b8;
  background: #eef6ee;
  border-radius: 3px;
  padding: 1px 6px;
}

.pie-etymons-text-match { margin-top: 6px; }
.pie-etymons-text-badge {
  display: inline-block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #7a6a45;
  border: 1px solid #e3d9b8;
  background: #faf6ea;
  border-radius: 3px;
  padding: 1px 6px;
}
.pie-etymons-snippet {
  margin: 4px 0 0 0;
  font-size: 0.9rem;
  font-style: italic;
  color: #4a4030;
}

/* Play-sound icon button (Public dictionary page, right after the
   Pronunciation/IPA text -- frontend/static/js/play-sound.js handles
   the click). */
.play-sound-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-left: 4px;
  padding: 2px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 4px;
}
.play-sound-btn:hover { background: #eee; }
.play-sound-btn img { display: block; width: 16px; height: 16px; }

/* =====================================================================
   Site chrome: fixed top menu, About dropdown, fixed bottom band
   (added with the About menu / entry tools round)
   ===================================================================== */

/* The header stays put at the top of the window while the page scrolls
   (sticky, so it also grows naturally if the menu ever wraps to two rows).
   --site-header-h is kept up to date by /static/js/site-menu.js and is
   what the sticky entry sidebar uses to sit just below the header. */
:root { --site-header-h: 52px; --site-footer-h: 38px; }

#public-site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
}
#public-site-header nav {
  max-width: 1200px;
  flex-wrap: wrap;
  row-gap: 4px;
}
#feature-nav { flex-wrap: wrap; row-gap: 4px; }
#feature-nav li { white-space: nowrap; }

/* About dropdown (right-hand end of the menu). */
.nav-about { position: relative; margin-left: auto; font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 0.9rem; }
.nav-about-toggle {
  font: inherit;
  color: #6b5c3f;
  background: none;
  border: 0;
  padding: 2px 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav-about.is-active .nav-about-toggle { color: #1c1a17; font-weight: 600; }
.nav-about-toggle:hover, .nav-about-toggle:focus-visible { color: #1c1a17; }
.nav-caret {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform 0.12s ease;
}
.nav-about.open .nav-caret, .nav-about:hover .nav-caret { transform: rotate(180deg); }

.nav-about-menu {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  min-width: 190px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: #fffefb;
  border: 1px solid #ddd4c4;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 6px 16px rgba(60, 45, 20, 0.12);
}
.nav-about:hover .nav-about-menu,
.nav-about.open .nav-about-menu { display: block; }
.nav-about-menu a {
  display: block;
  padding: 7px 16px;
  color: #6b5c3f;
  text-decoration: none;
  white-space: nowrap;
}
.nav-about-menu a:hover, .nav-about-menu a:focus-visible { background: #f4eee0; color: #1c1a17; }
.nav-about-menu a[aria-current="page"] { color: #1c1a17; font-weight: 600; }

/* Fixed bottom band: same colors as the top menu, always visible, text
   centered (FOOTER_TEXT in /site_config.py). The body reserves room for it
   so the last lines of a page are never hidden behind it. */
body { padding-bottom: var(--site-footer-h); }
#public-site-footer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 900;
  height: var(--site-footer-h);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fffefb;
  border-top: 1px solid #ddd4c4;
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.8rem;
  color: #6b5c3f;
}
#public-site-footer p { margin: 0; text-align: center; }

/* Anchors (References letter links etc.) must not hide behind the header. */
html { scroll-padding-top: calc(var(--site-header-h) + 12px); }

/* The entry page's sticky sidebar sits below the fixed header. */
.entry-page-sidebar { top: calc(var(--site-header-h) + 20px); max-height: calc(100vh - var(--site-header-h) - var(--site-footer-h) - 28px); overflow-y: auto; }
@media (max-width: 800px) {
  .entry-page-sidebar { max-height: none; overflow: visible; }
}

/* --- Entry-page tools: Cite / Download (sidebar, under the search box) --- */
.entry-tools { margin-top: 18px; padding-top: 12px; border-top: 1px solid #eae3d3; font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; }
.entry-tools ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.entry-tool {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 6px 8px;
  font: inherit; font-size: 0.88rem;
  color: #6b5c3f;
  background: none; border: 0; border-radius: 4px;
  text-align: left; text-decoration: none;
  cursor: pointer;
}
.entry-tool:hover, .entry-tool:focus-visible { background: #f4eee0; color: #1c1a17; }
.entry-tool-icon { width: 18px; height: 18px; flex: 0 0 18px; fill: currentColor; }

/* Cite popup */
.cite-dialog { max-width: min(560px, 92vw); border: 1px solid #c9bfa5; border-radius: 8px; padding: 18px 22px; background: #fffefb; color: #1c1a17; box-shadow: 0 12px 40px rgba(0,0,0,0.25); }
.cite-dialog::backdrop { background: rgba(30, 24, 12, 0.35); }
.cite-dialog h2 { margin: 0 0 10px; border: 0; font-size: 1.1rem; }
.cite-text { margin: 0 0 14px; padding: 10px 12px; background: #f7f2e6; border: 1px solid #e5ddc9; border-radius: 4px; overflow-wrap: anywhere; user-select: all; }
.cite-actions { display: flex; align-items: center; gap: 10px; font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 0.9rem; }
.cite-actions button { font: inherit; padding: 6px 14px; border: 1px solid #c9bfa5; border-radius: 4px; background: #fff; color: #1c1a17; cursor: pointer; }
.cite-actions .cite-copy { background: #6b5c3f; border-color: #6b5c3f; color: #fff; }
.cite-actions .cite-close { margin-left: auto; }
.cite-status { color: #4a6b3a; }
.cite-noscript { font-size: 0.85rem; }

/* --- Related Words --- */
.related-words-list { list-style: none; margin: 0.3em 0 0.8em; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.related-words-list .pos-tag { font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 0.75rem; color: #8a7b5c; }

/* --- About pages (Tips / Status / License) and References --- */
.content-page { max-width: 760px; }
.references-page { max-width: 860px; }
.references-intro { color: #6b5c3f; }
.reference-letters { display: flex; flex-wrap: wrap; gap: 4px; margin: 14px 0; font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 0.85rem; }
.reference-letters a { padding: 2px 8px; border: 1px solid #ddd4c4; border-radius: 3px; color: #6b5c3f; text-decoration: none; }
.reference-letters a:hover { background: #f4eee0; }
.reference-letters a.has-entries-here { background: #efe6d0; color: #1c1a17; font-weight: 600; }
.reference-pager { display: flex; align-items: center; gap: 16px; margin: 12px 0; font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 0.9rem; }
.reference-pager .disabled { color: #b5aa90; }
.reference-pager-status { color: #6b5c3f; }
.reference-letter { margin: 1.6em 0 0.5em; font-size: 1.1rem; }
/* LSA style: hanging-indented paragraphs, author names in small caps. */
.reference { margin: 0 0 0.7em; padding-left: 2em; text-indent: -2em; overflow-wrap: anywhere; }
.reference .ref-names { font-variant: small-caps; }
.reference a { overflow-wrap: anywhere; }