/* ── Reset & Base ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  background: var(--paper);
  color: var(--ink);
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  background: var(--paper);
  color: var(--ink);
  padding: 0 var(--space-3);
  min-height: 100vh;
}

a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:hover { color: var(--accent); }

img { display: block; max-width: 100%; }

/* ── Rules ──────────────────────────────────────────────────────── */
hr {
  border: none;
  border-top: var(--rule-thin) solid var(--rule);
  margin: var(--space-4) 0;
}

hr.heavy {
  border-top-width: var(--rule-heavy);
  border-color: var(--ink);
}

hr.ornamental {
  border: none;
  margin: var(--space-5) 0;
  text-align: center;
  overflow: visible;
}
hr.ornamental::before {
  content: "❦";
  display: inline-block;
  background: var(--paper);
  padding: 0 var(--space-3);
  color: var(--ink-muted);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  position: relative;
  top: -0.65em;
}

/* ── Mono small caps utility ────────────────────────────────────── */
.meta {
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
}

.meta-accent {
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
}

/* ── Theme toggle ────────────────────────────────────────────────── */
.theme-toggle {
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.theme-toggle:hover { color: var(--accent); }

/* ── Buttons ────────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  border: var(--rule-thin) solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
  border-radius: var(--radius);
  text-decoration: none;
}
.btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  text-decoration: none;
}

/* ── Layout ─────────────────────────────────────────────────────── */
.site-wrapper {
  max-width: var(--measure-wide);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

/* ── Masthead ───────────────────────────────────────────────────── */
.masthead {
  padding: var(--space-5) 0 var(--space-3);
  text-align: center;
}

.masthead-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: 0.08em;
  color: var(--ink);
  text-decoration: none;
  display: block;
}
.masthead-title:hover { color: var(--ink); text-decoration: none; }

.masthead-tagline {
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-muted);
  margin-top: var(--space-2);
}

.masthead-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-3);
  padding-top: var(--space-2);
}

.masthead-edition {
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
}

/* ── Article list (front page) ──────────────────────────────────── */
.date-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-5) 0 var(--space-3);
}
.date-divider::after {
  content: "";
  flex: 1;
  border-top: var(--rule-heavy) solid var(--ink);
}
.date-divider-label {
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  white-space: nowrap;
}

.article-item {
  padding: var(--space-3) 0;
  border-bottom: var(--rule-thin) solid var(--rule);
}
.article-item:last-child { border-bottom: none; }

.article-item.read { opacity: 0.5; }

.article-section-label { margin-bottom: var(--space-1); }

.article-headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  margin: var(--space-1) 0;
}
.article-headline a { text-decoration: none; }
.article-headline a:hover { color: var(--accent); }

.article-headline.lead { font-size: var(--text-2xl); }

.article-deck {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--ink);
  margin: var(--space-1) 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-deck.lead { -webkit-line-clamp: 3; }

.article-byline { margin-top: var(--space-1); }

/* Long-form Spanish dateline — Newsreader serif, lowercase, newspaper feel */
.article-dateline {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--ink-muted);
  text-transform: none;   /* explicit: parent meta classes set uppercase */
  letter-spacing: normal;
  display: block;
  margin-bottom: var(--space-1);
}

/* ── Filter chips ───────────────────────────────────────────────── */
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: var(--rule-thin) solid var(--rule);
  margin-bottom: var(--space-3);
}

.filter-chip {
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.filter-chip:hover { color: var(--ink); text-decoration: none; }
.filter-chip.active { color: var(--ink); }

.status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-muted);
}
.status-dot.error { background: var(--accent); }

/* ── Article detail page ────────────────────────────────────────── */
.article-header {
  max-width: var(--measure-wide);
  margin: var(--space-5) auto var(--space-4);
}

.article-kicker { margin-bottom: var(--space-2); }

.article-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  margin: var(--space-2) 0;
}

.article-deck-detail {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--ink-muted);
  font-style: italic;
  margin: var(--space-2) 0;
}

.article-byline-detail {
  margin-top: var(--space-3);
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

/* ── Two-column reading layout ──────────────────────────────────── */
.reading-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  max-width: var(--measure-wide);
  margin: var(--space-4) auto;
  align-items: start;
}

.reading-col-label {
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: var(--rule-thin) solid var(--rule);
}

.article-body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  text-align: justify;
  hyphens: auto;
}

.article-body p + p { margin-top: var(--space-3); }

/* Drop cap on first paragraph */
.article-body p:first-child::first-letter {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3.8em;
  line-height: 0.78;
  color: var(--accent);
  float: left;
  margin-right: 0.08em;
  margin-top: 0.04em;
}

/* Contextual expansion inline */
.contexto {
  font-style: italic;
  color: var(--ink-muted);
}
.contexto-label {
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  font-style: normal;
  margin-left: 0.25em;
}

/* Responsive: stack columns on mobile */
@media (max-width: 768px) {
  .reading-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .reading-col-original { order: 2; }
  .reading-col-rewrite  { order: 1; }
  .reading-col-original::before {
    content: "";
    display: block;
    border-top: var(--rule-thin) solid var(--rule);
    margin: var(--space-5) 0 var(--space-4);
    text-align: center;
  }
}

/* ── Glossable word spans ────────────────────────────────────────── */
.glossable {
  cursor: pointer;
  position: relative;
}
.glossable.hovered {
  border-bottom: 1px dotted var(--ink-muted);
}
.glossable.saved {
  border-bottom: 1px solid var(--accent);
}

/* ── Hover-translate popover ────────────────────────────────────── */
.popover {
  position: absolute;
  z-index: 100;
  /* top: 100% — zero gap so the cursor passes directly from word into popover.
     The 3px accent border-top provides visual separation. */
  top: 100%;
  left: 0;
  pointer-events: auto;
  min-width: 160px;
  max-width: 260px;
  background: var(--paper);
  border-top: 3px solid var(--accent);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent);
  padding: var(--space-2) var(--space-3);
}

.popover-label {
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
  display: block;
  margin-bottom: var(--space-1);
}

.popover-gloss {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--ink);
  display: block;
  margin-bottom: var(--space-2);
}

.popover-actions { display: flex; gap: var(--space-2); }

/* ── Vocab list page ────────────────────────────────────────────── */
.vocab-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: var(--space-5) 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: var(--rule-heavy) solid var(--ink);
}

.vocab-toggle a {
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
  text-decoration: none;
}
.vocab-toggle a.active { color: var(--ink); }
.vocab-toggle a:hover { color: var(--accent); }
.vocab-toggle .sep { color: var(--rule); margin: 0 var(--space-1); }

/* Journal view (newest-first) */
.vocab-journal .date-divider { margin-top: var(--space-4); }

.vocab-entry {
  padding: var(--space-2) 0;
  border-bottom: var(--rule-thin) solid var(--highlight);
}
.vocab-entry:last-child { border-bottom: none; }

.vocab-word {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--ink);
}

.vocab-gloss {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ink-muted);
  margin-left: var(--space-2);
}

.vocab-sentence {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--ink-muted);
  margin-top: var(--space-1);
  line-height: var(--leading-normal);
}

.vocab-source-link {
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  margin-top: var(--space-1);
  display: block;
}

/* Index view (A-Z) */
.vocab-index {
  columns: 2;
  column-gap: var(--space-6);
  margin-top: var(--space-4);
}

.vocab-index-entry {
  break-inside: avoid;
  padding: var(--space-1) 0;
  border-bottom: var(--rule-thin) solid var(--highlight);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

/* ── Vocab selection mode ────────────────────────────────────────── */

/* SELECCIONAR button in vocab header (matches vocab-toggle link style) */
.vocab-select-btn {
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.vocab-select-btn:hover { color: var(--accent); }

/* Square custom checkboxes — hidden by default, revealed in selection mode */
.vocab-checkbox {
  display: none;
  width: 14px;
  height: 14px;
  min-width: 14px;
  border: 1px solid var(--ink-muted);
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  flex-shrink: 0;
}
.vocab-checkbox:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.vocab-checkbox:indeterminate {
  border-color: var(--accent);
}
.vocab-checkbox:indeterminate::before {
  content: "";
  display: block;
  width: 8px;
  height: 2px;
  background: var(--accent);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#vocab-content.selection-active .vocab-checkbox { display: inline-block; }

/* Bulk action row — hidden by default; flexed in selection mode */
.bulk-action-row {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: var(--rule-thin) solid var(--rule);
  margin-bottom: var(--space-2);
}
#vocab-content.selection-active .bulk-action-row { display: flex; }

.bulk-select-all-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}

.bulk-action-right {
  display: flex;
  align-items: center;
}

.bulk-action-quitar {
  background: none;
  border: none;
  padding: 0;
  cursor: not-allowed;
  color: var(--ink-muted);
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.bulk-action-quitar.enabled { color: var(--accent); cursor: pointer; }
.bulk-action-quitar.enabled:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Inline confirmation row — hidden by default; shown via JS .active + .selection-active */
.bulk-confirm-row {
  display: none;
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: var(--rule-thin) solid var(--rule);
  margin-bottom: var(--space-2);
}
#vocab-content.selection-active .bulk-confirm-row.active { display: flex; }

.bulk-confirm-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
}
.bulk-confirm-btn:hover { text-decoration: underline; text-underline-offset: 2px; }
.bulk-confirm-si-btn { color: var(--accent); }
.bulk-confirm-si-btn:hover { color: var(--accent); }

/* Word entry layout — checkbox + text side by side in selection mode */
.vocab-entry-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}
.vocab-entry-text { flex: 1; }

/* /status page ────────────────────────────────────────────────── */
.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
  margin: var(--space-5) 0;
}

.status-section { border-top: var(--rule-heavy) solid var(--ink); padding-top: var(--space-3); }

.status-section-title {
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: var(--space-3);
}

.log-tail {
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  color: var(--ink-muted);
  white-space: pre-wrap;
  word-break: break-all;
  border-top: var(--rule-thin) solid var(--rule);
  padding-top: var(--space-3);
  margin-top: var(--space-4);
}

/* ── Back-link (Volver al artículo) ─────────────────────────────── */
.back-link {
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  display: inline-block;
  margin-bottom: var(--space-4);
}
.back-link:hover { color: var(--accent); opacity: 0.75; text-decoration: underline; }

/* ── Footer / Colophon ───────────────────────────────────────────── */
.colophon {
  margin: var(--space-7) 0 var(--space-5);
  padding-top: var(--space-3);
  border-top: var(--rule-thin) solid var(--rule);
  text-align: center;
}

/* ── Notices / Banners ───────────────────────────────────────────── */
.notice-soft {
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  border-top: var(--rule-thin) solid var(--rule);
  padding: var(--space-2) 0;
  margin-top: var(--space-3);
}

.banner-hard {
  background: var(--accent);
  color: var(--paper);
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: var(--space-2) var(--space-4);
  text-align: center;
}

/* ── Rewrite loading placeholder ─────────────────────────────────── */
.rewrite-placeholder {
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
  padding: var(--space-4) 0;
}