/* Chronicle — SISKIN Labs huisstijl v1 (Caprasimo + Rubik, palet van Lisette) */
@font-face { font-family: "Caprasimo"; src: url("fonts/caprasimo.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Rubik"; src: url("fonts/rubik.ttf") format("truetype"); font-weight: 300 900; font-display: swap; }

:root {
  --geel: #F0E51B; --aubergine: #260815; --olijf: #8E8E6B; --rood: #800A01; --steen: #EFEBE3;
  --bg: var(--steen); --vlak: #FFFFFF; --inkt: #231F20; --inkt-2: #5b5450; --inkt-3: #8a827c;
  --lijn: #e2ddd3; --mark: var(--aubergine); --mark-zacht: #d9d2c6; --accent: var(--geel);
  --kop: "Caprasimo", Georgia, serif; --tekst: "Rubik", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1a0610; --vlak: #2a0d1b; --inkt: #f3efe8; --inkt-2: #c9c0b8; --inkt-3: #9a8f88;
    --lijn: #43202f; --mark: #e8dcc8; --mark-zacht: #4a2738; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1a0610; --vlak: #2a0d1b; --inkt: #f3efe8; --inkt-2: #c9c0b8; --inkt-3: #9a8f88;
  --lijn: #43202f; --mark: #e8dcc8; --mark-zacht: #4a2738; color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--inkt); font: 400 1rem/1.5 var(--tekst); }
h1, h2 { font-family: var(--kop); font-weight: 400; margin: 0; }
h2 { font-size: 1.5rem; margin-bottom: 1rem; }
a { color: inherit; }
button, select, input { font: inherit; color: inherit; }

.kop { background: var(--aubergine); color: var(--geel); padding: 1rem 1.5rem; display: flex; align-items: center; gap: 1.25rem; }
.kop h1 { font-size: 1.9rem; }
.kop .woordmerk { height: 18px; opacity: .9; }
.kop form { margin-left: auto; }
.kop button { background: transparent; border: 1px solid #6b4a58; color: #f3efe8; border-radius: 999px; padding: .3rem .9rem; cursor: pointer; }
.kop button:hover { border-color: var(--geel); color: var(--geel); }

main { max-width: 1180px; margin: 0 auto; padding: 1.5rem 1rem 4rem; }
.filters { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-bottom: 1.5rem; }
.filters select, .filters input { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 8px; padding: .5rem .75rem; }
.filters input[type=search] { flex: 1 1 260px; min-width: 0; }
.filters .wis { background: none; border: none; color: var(--inkt-2); text-decoration: underline; cursor: pointer; }

.tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.tegel { background: var(--vlak); border-radius: 12px; padding: 1rem 1.25rem; }
.tegel .getal { font-family: var(--kop); font-size: 2.2rem; line-height: 1.1; }
.tegel .label { color: var(--inkt-2); font-size: .875rem; }

.kaart { background: var(--vlak); border-radius: 12px; padding: 1.25rem 1.5rem 1.5rem; margin-bottom: 1.5rem; }
.kaart .sub { color: var(--inkt-2); font-size: .875rem; margin: -.6rem 0 1rem; }
.twee { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 860px) { .twee { grid-template-columns: 1fr; } }

/* small multiples: één rij per categorie */
.sm-rij { display: grid; grid-template-columns: 130px 1fr 48px; gap: .75rem; align-items: end; padding: .35rem 0; border-bottom: 1px solid var(--lijn); cursor: pointer; }
.sm-rij:last-child { border-bottom: none; }
.sm-rij:hover .sm-naam, .sm-rij.actief .sm-naam { text-decoration: underline; }
.sm-naam { font-size: .9rem; align-self: center; }
.sm-n { text-align: right; font-variant-numeric: tabular-nums; color: var(--inkt-2); align-self: center; font-size: .9rem; }
.sm-rij svg { width: 100%; height: 36px; display: block; overflow: visible; }
.as-weken { display: grid; grid-template-columns: 130px 1fr 48px; gap: .75rem; color: var(--inkt-3); font-size: .75rem; margin-top: .35rem; }
.as-weken div:nth-child(2) { display: flex; justify-content: space-between; }

/* projectbalken */
.pb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: .75rem; align-items: center; padding: .25rem 0; cursor: pointer; }
.pb .naam { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb .naam small { color: var(--inkt-3); margin-left: .35rem; }
.pb .balk { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--inkt-2); font-variant-numeric: tabular-nums; }
.pb .balk span.b { display: block; height: 14px; background: var(--mark); border-radius: 0 4px 4px 0; min-width: 2px; }
.pb:hover .balk span.b, .pb.actief .balk span.b { background: var(--accent); }
.pb:hover .naam { text-decoration: underline; }

/* dagenraster */
.dagen { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 13px); gap: 3px; overflow-x: auto; padding-bottom: .25rem; }
.dagen div { width: 13px; height: 13px; border-radius: 3px; background: var(--mark-zacht); }
.legenda { display: flex; gap: .4rem; align-items: center; color: var(--inkt-3); font-size: .75rem; margin-top: .6rem; }
.legenda i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* werkblokken */
.blok { border-top: 1px solid var(--lijn); padding: .75rem 0; }
.blok:first-child { border-top: none; }
.blok .meta { display: flex; flex-wrap: wrap; gap: .5rem .9rem; color: var(--inkt-2); font-size: .85rem; }
.blok .cat { background: var(--steen); color: var(--aubergine); border-radius: 999px; padding: 0 .55rem; font-size: .78rem; }
.blok .titel { font-weight: 500; margin: .2rem 0; cursor: pointer; }
.blok .titel:hover { text-decoration: underline; }
.blok .codes { color: var(--rood); font-size: .8rem; }
.blok .tekst { white-space: pre-wrap; font-size: .92rem; color: var(--inkt); background: var(--bg); border-radius: 8px; padding: .75rem 1rem; margin-top: .5rem; display: none; overflow-wrap: anywhere; }
.blok.open .tekst { display: block; }
.leeg { color: var(--inkt-3); }

#tip { position: fixed; pointer-events: none; background: var(--aubergine); color: #f3efe8; font-size: .8rem; padding: .35rem .6rem; border-radius: 6px; display: none; z-index: 10; white-space: nowrap; }

/* login */
.login { min-height: 100vh; display: grid; place-items: center; background: var(--aubergine); padding: 1rem; }
.login form { background: var(--vlak); border-radius: 14px; padding: 2rem; width: min(360px, 100%); display: grid; gap: 1rem; }
.login h1 { color: var(--aubergine); font-size: 2rem; }
.login input { border: 1px solid var(--lijn); border-radius: 8px; padding: .6rem .8rem; background: var(--vlak); }
.login button { background: var(--geel); color: var(--aubergine); border: none; border-radius: 999px; padding: .6rem; font-weight: 600; cursor: pointer; }
.login .fout { color: var(--rood); font-size: .9rem; display: none; }
.login .fout.zichtbaar { display: block; }

@media (max-width: 560px) {
  .kop { padding: .8rem 1rem; gap: .75rem; }
  .kop h1 { font-size: 1.5rem; }
  .kop .woordmerk { display: none; }
  .sm-rij, .as-weken { grid-template-columns: 100px 1fr 36px; }
  .kaart { padding: 1rem; }
}
.meer { margin-top: 1rem; background: none; border: 1px solid var(--lijn); border-radius: 999px; padding: .45rem 1.1rem; cursor: pointer; color: var(--inkt); }
.meer:hover { border-color: var(--inkt-2); }
@media print { .kop form, .filters { display: none; } body { background: #fff; } .kaart, .tegel { break-inside: avoid; } }