:root {
  color-scheme: light dark;
  --bg: #fafaf9;
  --fg: #1c1c1a;
  --card-bg: #ffffff;
  --border: #ddd;
  --accent: #2563eb;
  --correct: #16a34a;
  --wrong: #dc2626;
  --muted: #6b7280;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17181a;
    --fg: #eee;
    --card-bg: #232427;
    --border: #3a3b3e;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, "PingFang TC", "Noto Sans TC", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

/* Every link in this app is a plain in-app navigation link, not a citation
   to somewhere else — so none of them should ever get the browser's default
   blue/visited-purple treatment. This is the one rule that decides link
   color site-wide; anything wanting a distinct accent color (e.g. a
   clickable table cell) overrides `color` alone below, never re-adds
   :visited handling, so it can never drift back to purple after a click. */
a, a:link, a:visited, a:hover, a:active {
  color: inherit;
  text-decoration: none;
}
a:hover, a:active { text-decoration: underline; }

.topnav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 10px;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topnav a {
  padding: 10px 12px;
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--fg);
  text-decoration: none;
  border-radius: 8px;
  font-size: 14px;
}
.topnav a:hover, .topnav a:active { background: var(--bg); }

/* Desktop/Chromebook is the primary way this app gets used, so that's the
   default here — wide container, lots of room for tables. Forms and review
   cards stay capped at a readable width regardless of screen size so their
   inputs/text don't stretch edge to edge on a wide window. Phone (still
   reachable via the tunnel URL) gets a narrower single-column override. */
.container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 24px 40px;
}
form, .card { max-width: 640px; }

@media (max-width: 899px) {
  .container { max-width: 720px; padding: 16px; }
}

h1 { font-size: 1.4rem; }
h2 { font-size: 1.1rem; margin-top: 1.5rem; }

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
}
.card-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  margin-bottom: 8px;
}
.word { font-size: 1.2rem; font-weight: 600; }
.tag {
  font-size: 0.75rem;
  background: var(--accent);
  color: white;
  padding: 2px 8px;
  border-radius: 999px;
}
.meta { font-size: 0.8rem; color: var(--muted); }
.example { font-style: italic; color: var(--muted); }
.definition-zh { color: var(--fg); }
.backlink { font-size: 0.85rem; color: var(--muted); }
.warn { color: #b45309; font-weight: 600; }
.empty { color: var(--muted); }
.success { color: var(--correct); font-weight: 600; }
.hint { color: var(--muted); font-size: 0.9rem; }

textarea, input[type=text], input[type=number], input[type=date], select {
  width: 100%;
  padding: 10px;
  margin-top: 4px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--fg);
  font-size: 16px; /* prevents iOS zoom-on-focus */
}

form label {
  display: block;
  margin-bottom: 12px;
  font-size: 0.9rem;
}

fieldset {
  border: 1px dashed var(--border);
  border-radius: 8px;
  margin-bottom: 12px;
}

button {
  min-height: 44px;
  padding: 10px 18px;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
}
button[type=submit] { background: var(--accent); color: white; }

.speak-btn {
  min-height: auto;
  min-width: 32px;
  padding: 2px 6px;
  font-size: 0.95rem;
  line-height: 1;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg);
  vertical-align: middle;
}
.speak-btn:hover, .speak-btn:active { background: var(--bg); }

.review-actions { display: flex; gap: 10px; margin-top: 10px; }
.btn-correct { background: var(--correct); color: white; flex: 1; }
.btn-wrong { background: var(--wrong); color: white; flex: 1; }

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
}
.filter-bar select, .filter-bar input[type=text] { width: auto; }

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -16px;
  padding: 0 16px;
}
table {
  /* No forced width:100% — a table narrower than its (now very wide)
     container should just sit at its natural size instead of stretching
     every short column (streak, interval...) out with wasted whitespace.
     table-scroll below still kicks in on the rare row that's genuinely
     wider than the viewport. */
  border-collapse: collapse;
  font-size: 0.85rem;
}
th, td {
  border-bottom: 1px solid var(--border);
  padding: 6px 8px;
  text-align: left;
  white-space: nowrap;
}
/* Definitions are free-text and can run long — bound the column instead of
   letting it push the whole row past the edge of the screen. Widens on
   desktop (more room) but stays capped everywhere so the row's other
   columns (interval, streak, next review...) are never scrolled out of
   view just because one definition happened to be a long sentence. */
.definition-cell {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 900px) {
  .definition-cell { max-width: 600px; }
}
td a { color: var(--accent); }
.scroll-hint {
  font-size: 0.75rem;
  color: var(--muted);
  margin: 0 0 6px;
}
@media (min-width: 900px) {
  .scroll-hint { display: none; } /* rows fit without scrolling at desktop width */
}

.week-block {
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 10px;
  background: var(--card-bg);
  overflow: hidden;
}
.week-block summary {
  padding: 12px 14px;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.day-list { display: flex; flex-direction: column; }
.day-row {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  min-height: 44px;
  border-top: 1px solid var(--border);
  color: var(--fg);
  text-decoration: none;
}
.day-row:hover, .day-row:active { background: var(--bg); }
.day-label { font-weight: 600; min-width: 56px; flex-shrink: 0; }
.day-date { font-size: 0.8rem; color: var(--muted); flex-shrink: 0; }
.day-preview {
  font-size: 0.85rem;
  color: var(--muted);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.day-empty { font-style: italic; }
.has-note .day-label { color: var(--accent); }

.nav-links {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
  font-size: 0.9rem;
}