:root {
  --bg: #f7f5ef;
  --kaart: #ffffff;
  --tekst: #26241f;
  --zacht: #6b6559;
  --lijn: #e3ddce;
  --accent: #7a5c2e;
  --accent-zacht: #efe6d3;
  --latijn: #2b2620;
  --nl: #55606b;
  --nl-bg: #eef2f5;
  --schaduw: 0 1px 3px rgba(40, 34, 20, .08), 0 6px 20px rgba(40, 34, 20, .06);
  --radius: 12px;
}

* { box-sizing: border-box; }
[x-cloak] { display: none !important; }

body {
  margin: 0;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  background: var(--bg);
  color: var(--tekst);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }

.topbalk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem 1.2rem;
  background: var(--kaart);
  border-bottom: 1px solid var(--lijn);
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbalk .merk {
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: .02em;
  color: var(--accent);
  text-decoration: none;
}
.topbalk .rechts { display: flex; align-items: center; gap: 1rem; font-size: .9rem; color: var(--zacht); }

.inhoud { max-width: 760px; margin: 0 auto; padding: 1.6rem 1.2rem 5rem; }
.breed { max-width: 1040px; }

h1 { font-size: 1.6rem; margin: .2rem 0 1rem; font-weight: 600; }
h2 { font-size: 1.2rem; font-weight: 600; }
.muted { color: var(--zacht); }
.klein { font-size: .85rem; }

/* Knoppen */
.knop {
  display: inline-flex; align-items: center; gap: .4rem;
  font: inherit; font-size: .95rem;
  padding: .55rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--lijn);
  background: var(--kaart);
  color: var(--tekst);
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}
.knop:hover { background: var(--accent-zacht); border-color: var(--accent-zacht); }
.knop.primair { background: var(--accent); color: #fff; border-color: var(--accent); }
.knop.primair:hover { background: #64491f; }
.knop.klein { padding: .3rem .7rem; font-size: .85rem; }
.knop:disabled { opacity: .5; cursor: default; }

/* Kaarten (overzicht/dashboard) */
.kaartlijst { display: grid; gap: .9rem; }
.kaart {
  background: var(--kaart);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  box-shadow: var(--schaduw);
  text-decoration: none;
  color: inherit;
  display: block;
}
.kaart:hover { border-color: var(--accent-zacht); }
.kaart .titel { font-size: 1.15rem; font-weight: 600; }
.kaart .bron { color: var(--zacht); font-size: .9rem; margin-top: .1rem; }

.balk { height: 7px; background: var(--lijn); border-radius: 99px; margin-top: .7rem; overflow: hidden; }
.balk > span { display: block; height: 100%; background: var(--accent); }

.badge { font-size: .72rem; padding: .15rem .55rem; border-radius: 99px; border: 1px solid var(--lijn); color: var(--zacht); }
.badge.concept { background: #fbf3e2; border-color: #ecd9a8; color: #8a6d24; }
.badge.gepubliceerd { background: #e7f2e9; border-color: #b9ddc0; color: #35703f; }

/* Leesweergave */
.leeskop { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1.2rem; gap: 1rem; }
.leeskop .teller { color: var(--zacht); font-size: .9rem; white-space: nowrap; }

.zin { margin: 0 0 1.4rem; }
.zin .latijn {
  font-size: 1.5rem;
  line-height: 1.75;
  color: var(--latijn);
}
.woord {
  cursor: pointer;
  transition: background .1s, border-color .1s;
  border-radius: 3px;
  border-bottom: 2px solid transparent;
}
.woord:hover, .woord:focus { outline: none; filter: brightness(0.96); }
/* nieuw = blauw, aan het leren = geel, gekend = geen markering */
.woord.status-nieuw  { background: rgba(70, 130, 200, .14); border-bottom-color: #4a83c8; }
.woord.status-lerend { background: rgba(230, 190, 60, .28); border-bottom-color: #e0b53c; }
.woord.status-gekend { background: transparent; border-bottom-color: transparent; }
.woord.status-gekend:hover, .woord.status-gekend:focus { background: rgba(0,0,0,.05); }

.vertaling {
  margin-top: .5rem;
  font-size: 1.05rem;
  color: var(--nl);
  background: var(--nl-bg);
  border-radius: 8px;
  padding: .5rem .8rem;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.zin .acties { margin-top: .5rem; }

.besturing { display: flex; justify-content: center; margin-top: 1.5rem; }
.einde { text-align: center; color: var(--zacht); margin-top: 1.5rem; }

/* Woord-popover */
.popover {
  position: fixed;
  z-index: 50;
  min-width: 190px;
  max-width: min(300px, calc(100vw - 16px));
  background: #2b2620;
  color: #f6f1e6;
  border-radius: 10px;
  padding: .6rem .8rem;
  box-shadow: 0 8px 30px rgba(0,0,0,.28);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .95rem;
  transform: translate(-50%, calc(-100% - 12px));
}
/* Onder het woord (als er bovenaan geen ruimte is). */
.popover.beneden { transform: translate(-50%, 12px); }
.popover::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -6px;
  width: 12px; height: 12px;
  background: #2b2620;
  transform: translateX(-50%) rotate(45deg);
}
.popover.beneden::after { bottom: auto; top: -6px; }
.popover .kop { font-weight: 600; }
.popover .lemma { color: #d8c39a; font-style: italic; }
.popover .betekenis { margin-top: .25rem; }
.popover .leeg { color: #c9c2b4; }

.statusknoppen { display: flex; gap: .3rem; margin-top: .6rem; padding-top: .5rem; border-top: 1px solid rgba(255,255,255,.15); }
.statusknop {
  flex: 1;
  font: inherit;
  font-size: .72rem;
  padding: .28rem .3rem;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.2);
  background: transparent;
  color: #e9e2d3;
  cursor: pointer;
  line-height: 1.1;
}
.statusknop:hover { border-color: rgba(255,255,255,.5); }
.statusknop.actief.status-nieuw  { background: #4a83c8; border-color: #4a83c8; color: #fff; }
.statusknop.actief.status-lerend { background: #e0b53c; border-color: #e0b53c; color: #2b2620; }
.statusknop.actief.status-gekend { background: #4c8a57; border-color: #4c8a57; color: #fff; }

/* Formulieren / wizard */
.veld { margin-bottom: 1.1rem; }
.veld label { display: block; font-weight: 600; margin-bottom: .35rem; font-size: .95rem; }
.veld .hint { color: var(--zacht); font-size: .82rem; margin-bottom: .35rem; }
input[type=text], input[type=email], input[type=password], textarea, select {
  width: 100%;
  font: inherit;
  padding: .6rem .7rem;
  border: 1px solid var(--lijn);
  border-radius: 8px;
  background: #fff;
  color: var(--tekst);
}
textarea { min-height: 150px; resize: vertical; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .9rem; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent-zacht); border-color: var(--accent); }

.fout { background: #fbe9e7; border: 1px solid #f1b0a8; color: #a3372a; padding: .6rem .8rem; border-radius: 8px; margin-bottom: 1rem; }
.melding { background: var(--accent-zacht); border: 1px solid #ddc9a2; padding: .6rem .8rem; border-radius: 8px; margin-bottom: 1rem; }

.stappen { display: flex; gap: .5rem; margin-bottom: 1.5rem; font-size: .85rem; }
.stappen .stap { padding: .3rem .7rem; border-radius: 99px; border: 1px solid var(--lijn); color: var(--zacht); }
.stappen .stap.actief { background: var(--accent); color: #fff; border-color: var(--accent); }
.stappen .stap.klaar { border-color: var(--accent); color: var(--accent); }

/* Uitlijntabel (wizard stap 2) */
.rij {
  display: grid;
  grid-template-columns: 2.2rem 1fr 1fr auto;
  gap: .6rem;
  align-items: start;
  background: var(--kaart);
  border: 1px solid var(--lijn);
  border-radius: 10px;
  padding: .6rem .7rem;
  margin-bottom: .6rem;
}
.rij .nr { color: var(--zacht); font-size: .8rem; padding-top: .4rem; }
.rij textarea { min-height: 60px; font-family: inherit; font-size: 1rem; }
.rij .rij-lat { font-size: 1.05rem; }
.rij-acties { display: flex; flex-direction: column; gap: .3rem; }
.rij-acties button { font-size: .75rem; padding: .2rem .45rem; }

.ontbrekend { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0 1rem; }
.ontbrekend .w { background: #fbf3e2; border: 1px solid #ecd9a8; color: #8a6d24; padding: .2rem .55rem; border-radius: 99px; font-size: .85rem; }

.balkacties { display: flex; gap: .6rem; margin-top: 1.5rem; flex-wrap: wrap; }

table.mini { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.mini th, table.mini td { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid var(--lijn); }
table.mini th { color: var(--zacht); font-weight: 600; }

.login-wrap { max-width: 380px; margin: 8vh auto 0; }
.center { text-align: center; }

/* Honeypot-veld: onzichtbaar voor mensen, maar in de DOM zodat bots het invullen. */
.honeypot { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Wachtwoordveld met toon/verberg-oogje */
.ww-wrap { position: relative; }
.ww-wrap input { padding-right: 2.9rem; }
/* Native browser-oogje (Edge) onderdrukken: we hebben een eigen knop. */
.ww-wrap input::-ms-reveal, .ww-wrap input::-ms-clear { display: none; }
.ww-toon {
  position: absolute;
  right: .35rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--zacht);
  cursor: pointer;
  padding: .3rem;
  border-radius: 6px;
}
.ww-toon:hover, .ww-toon:focus-visible { color: var(--accent); background: var(--accent-zacht); outline: none; }

.beheerblokken { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .9rem; margin-top: 1rem; }
.blokkop { font-weight: 600; font-size: .95rem; margin-bottom: .6rem; }

/* Balkenweergave voortgang per klas */
.staafgroep { display: flex; flex-direction: column; gap: .7rem; }
.staafrij {
  display: grid;
  grid-template-columns: minmax(9rem, 15rem) 1fr 3rem auto;
  align-items: center;
  gap: .8rem;
}
.staafwoorden { white-space: nowrap; text-align: right; }
.staaflabel {
  font-size: .92rem;
  color: var(--tekst);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.staaflabel:hover { color: var(--accent); text-decoration: underline; }
.staafspoor {
  position: relative;
  height: 20px;
  background: var(--lijn);
  border-radius: 99px;
  overflow: hidden;
}
.staafspoor > .staaf {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 99px;
  transition: width .3s ease;
  min-width: 2px;
}
.staafspoor > .staaf.vol { background: #35703f; }
.staafwaarde { text-align: right; font-variant-numeric: tabular-nums; font-size: .9rem; color: var(--zacht); }