/* Diccionario — one stylesheet, mobile-first, one breakpoint.
   Palette via custom properties, so dark mode is a media query and not a
   second stylesheet. */
:root {
  --fg:#1a1a1a; --fg-dim:#5f5c55; --bg:#fff; --panel:#f6f5f1;
  --line:#e2e0d9; --accent:#7a1f1f; --badge:#ecebe5;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fg:#e9e7e1; --fg-dim:#a19d94; --bg:#16150f; --panel:#1f1e17;
    --line:#33312a; --accent:#e3b5a4; --badge:#2b2922;
  }
}
* { box-sizing:border-box }
html { -webkit-text-size-adjust:100% }
body {
  margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
main { max-width:44rem; margin:0 auto; padding:1rem 1rem 4rem }
a { color:var(--accent) }
a:focus-visible, input:focus-visible, a:focus {
  outline:2px solid var(--accent); outline-offset:2px;
}
.visually-hidden {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---- search (enhancement only; the form works without JS) ---- */
.search { margin:0 0 1.5rem }
.search form { position:relative }
.search input {
  width:100%; padding:.6rem .75rem; font:inherit;
  background:var(--panel); color:var(--fg);
  border:1px solid var(--line); border-radius:.4rem;
}

/* The "/" affordance. A translator who knows it saves a mouse hand; a first
   timer has to be able to see it, so it is visible rather than a secret.

   Gated on `not (pointer: coarse)` rather than `(pointer: fine)`, and the
   difference matters: a desktop with no pointing device at all reports
   `pointer: none`, and that is precisely the keyboard-only reader this
   shortcut exists for. Only a touch-primary device — a phone or tablet,
   where there is no "/" key and the field is already within reach — is
   excluded. No user-agent sniffing and no JS. */
.search-hint {
  position:absolute; top:50%; right:.5rem; transform:translateY(-50%);
  display:none; align-items:center; gap:.3rem;
  pointer-events:none;                /* clicks fall through to the input */
  font-size:.78rem; color:var(--fg-dim); user-select:none;
}
.search-hint kbd {
  font:inherit; font-size:.72rem; line-height:1;
  padding:.15rem .35rem; border-radius:.25rem;
  border:1px solid var(--line); background:var(--panel);
}
@media not (pointer: coarse) {
  .search-hint { display:flex }
  /* Room for the tag, so typed text never runs underneath it. */
  .search input#q { padding-right:5.5rem }
}
/* Hide once there is something to read back: the tag has done its job, and
   this is also where Chrome's own clear button would collide with it. */
.search input#q:not(:placeholder-shown) ~ .search-hint { display:none }
/* Shown until the module confirms it is live, then hidden. A search box
   that silently does nothing is worse than one that admits it needs JS. */
.search-note {
  margin:.5rem 0 0; font-size:.85rem; color:var(--fg-dim);
}
.search[data-state="ready"] .search-note { display:none }
.search-status { margin:.35rem 0 0; font-size:.8rem; color:var(--fg-dim) }
.search-results { list-style:none; margin:.4rem 0 0; padding:0; border-radius:.4rem }
.search-results:empty { display:none }
.search-results li { margin:0 }
.search-results a {
  display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
  padding:.45rem .6rem; border-radius:.3rem; text-decoration:none;
}
.search-results a:hover, .search-results a[aria-selected=true] { background:var(--panel) }
.search-results .kind { color:var(--fg-dim); font-size:.85em; white-space:nowrap }
/* A duplicated headword collapses to one row in the index and the dropdown,
   tagged with the number of articles behind it. */
ul.words .kind { color:var(--fg-dim); font-size:.8em; margin-left:.4rem }
/* Disambiguation: full width, single column. It inherits ul.words, which is
   a two-column masonry — right for a letter index of 900 words, wrong for two
   items that have to be read against their glosses. */
ul.homographs { columns:auto; column-gap:0; max-width:38rem }
ul.homographs li {
  break-inside:avoid; padding:.6rem 0;
  border-bottom:1px solid var(--line);
}
ul.homographs li:last-child { border-bottom:0 }
ul.homographs a { font-size:1.05rem }
.gloss { color:var(--fg-dim); font-size:.85em; display:block; margin:.1rem 0 .15rem }
ul.homographs .kind { color:var(--fg-dim); font-size:.8rem }

/* ---- article ---- */
h1 { font-size:1.7rem; line-height:1.2; margin:0 0 .2rem; font-weight:650 }
.sub { color:var(--fg-dim); font-size:.85rem; margin:0 0 1.4rem }
h2 {
  font-size:.72rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--fg-dim); margin:1.8rem 0 .6rem; font-weight:600;
}
.terms {
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:.4rem;
}
.terms li { margin:0; display:inline-flex; align-items:stretch }
.terms .term {
  display:inline-block; padding:.2rem .55rem;
  border:1px solid var(--line); border-radius:.3rem; text-decoration:none;
  font-size:.95rem; color:var(--fg);
}
.terms a.term:hover { border-color:var(--accent) }
.terms .term.known { border-color:var(--line) }
.terms .term.known:hover { color:var(--accent) }
.rae-link {
  display:inline-block; padding:.2rem .3rem; margin-left:-1px;
  border:1px solid var(--line); border-left:0; border-radius:0 .3rem .3rem 0;
  font-size:.75rem; line-height:1.9; color:var(--fg-dim); text-decoration:none;
}
.rae-link:hover { color:var(--accent) }
.badge {
  font-size:.7em; margin-left:.25rem; padding:0 .25rem;
  border-radius:.2rem; background:var(--badge); color:var(--fg-dim);
}
.sense + .sense { margin-top:.9rem }
.locution { margin:.15rem 0 0 }
footer {
  margin-top:3rem; padding-top:1rem; border-top:1px solid var(--line);
  color:var(--fg-dim); font-size:.8rem;
}

/* ---- index ---- */
nav.alphabet { display:flex; flex-wrap:wrap; gap:.4rem; margin:0 0 1.5rem }
nav.alphabet a {
  display:inline-block; min-width:2.1rem; text-align:center;
  padding:.3rem .4rem; border:1px solid var(--line);
  border-radius:.3rem; text-decoration:none;
}
nav.alphabet a.empty { opacity:.28; pointer-events:none }
.words { list-style:none; margin:0; padding:0; columns:2 14rem; column-gap:1.5rem }
.words li { break-inside:avoid; padding:.15rem 0 }