/* Front page, document catalog, lexicon index & entry pages. */

.page-title { margin: 2.2rem 0 0.4rem; font-size: 1.9rem; text-wrap: balance; }
.page-intro {
  max-width: 62ch; color: var(--muted);
  margin: 0 0 2rem; font-size: 1.02rem;
}

.section-head {
  display: flex; align-items: baseline; gap: 1rem;
  margin: 2.4rem 0 1rem;
}
.section-head h2 {
  font-size: 1.15rem; margin: 0;
  font-family: ui-sans-serif, system-ui, sans-serif;
}
.section-head .more { font-size: 0.82rem; }

/* ---- document cards ---- */

.doc-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  padding: 0; margin: 0; list-style: none;
}
.doc-card {
  border: 1px solid var(--border); background: var(--card);
  border-radius: 12px; padding: 1rem 1.2rem;
  display: flex; flex-direction: column; gap: 0.45rem;
}
.doc-card .meta {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.75rem; color: var(--muted);
  display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap;
}
.doc-card h3 { margin: 0; font-size: 1.08rem; line-height: 1.35; }
.doc-card h3 a { text-decoration: none; }
.doc-card h3 a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.doc-card .summary { font-size: 0.9rem; color: var(--muted); margin: 0; }
.doc-card .counts {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.75rem; color: var(--muted);
  display: flex; gap: 1rem; margin-top: auto; padding-top: 0.4rem;
}
.doc-card .counts .mark-count::before {
  content: ""; display: inline-block; width: 0.6em; height: 0.6em;
  border-radius: 50%; background: var(--mark); margin-right: 0.35em;
}

/* ---- lexicon index ---- */

.term-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.term-row {
  border: 1px solid var(--border); background: var(--card);
  border-radius: 10px; padding: 0.8rem 1.1rem;
}
.term-row h3 { margin: 0 0 0.2rem; font-size: 1.05rem; }
.term-row h3 a { text-decoration: none; }
.term-row h3 a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.term-row .gloss { font-size: 0.9rem; color: var(--muted); margin: 0; }
.term-row .usage-count {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.75rem; color: var(--muted);
}

/* ---- lexicon entry page ---- */

.entry-page { max-width: 72ch; }
.entry-page .term-head h1 { margin: 2rem 0 0.3rem; font-size: 1.9rem; text-wrap: balance; }
.entry-page .aliases {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.82rem; color: var(--muted); margin-bottom: 1.4rem;
}
.entry-page .aliases .alias {
  background: var(--mark-bg); box-shadow: inset 0 -1px 0 var(--mark);
  border-radius: 2px; padding: 0 3px; margin-right: 0.35em; white-space: nowrap;
}
.entry-section { margin: 1.6rem 0; }
.entry-section h2 {
  font: 600 0.78rem ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 0.5rem;
}
.entry-body { line-height: 1.75; }
.entry-body table { border-collapse: collapse; font-size: 0.9rem; display: block; overflow-x: auto; }
.entry-body th, .entry-body td { border: 1px solid var(--border); padding: 0.4rem 0.7rem; text-align: left; }
.entry-body blockquote {
  margin: 1rem 0; padding: 0.2rem 1.1rem;
  border-left: 3px solid var(--mark); color: var(--muted);
}

/* usages */
.usage-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; }
.usage {
  border: 1px solid var(--border); background: var(--card);
  border-radius: 10px; padding: 0.75rem 1rem; font-size: 0.95rem;
}
.usage .context mark.lex {
  background: var(--mark-bg); box-shadow: inset 0 -2px 0 var(--mark); cursor: default;
}
.usage .src {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.78rem; color: var(--muted); margin-top: 0.35rem; display: block;
}

/* ---- paste-in translate form ---- */

.translate-panel { max-width: 68ch; }
.translate-panel textarea { min-height: 40vh; font-size: 15px; }
.translate-panel .controls {
  display: flex; align-items: center; gap: 1rem; margin-top: 0.9rem; flex-wrap: wrap;
  font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.85rem;
}
.hp-field { position: absolute; left: -9999px; opacity: 0; }