/* CN-beheer · de schil (ONTWERP-V2 §3): de bovenbalk met de twee tabs, de onderbalk per tab met Nieuw in het midden,
   de rail op de tablet, de offline-band, het menu en zoeken. Telefoon eerst (384 × 646 op de Galaxy S23 Ultra).
   Glas zoals de wijzer op de site: papier op 86 %, met vervaging. Alles ≥ 44 px om op te tikken. */

:root { --cn-balk-h: 68px; --cn-safe-t: env(safe-area-inset-top, 0px); }
@media (min-width: 768px) { :root { --cn-rail-w: 96px; } }
@media (min-width: 1180px) { :root { --cn-rail-w: 232px; } }

/* ------------------------------------------------------------------ glas */
.top, .balk {
  background: var(--glas);
  -webkit-backdrop-filter: saturate(1.15) blur(16px); backdrop-filter: saturate(1.15) blur(16px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .top, .balk { background: var(--cn-card); } }

/* ------------------------------------------------------------------ de bovenbalk */
.top {
  position: sticky; top: 0; z-index: 40;
  height: calc(var(--cn-top-h) + var(--cn-safe-t)); padding: var(--cn-safe-t) calc(var(--cn-gut) - 4px) 0;
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 6px;
  border-bottom: 1px solid transparent; transition: border-color .2s ease, box-shadow .2s ease;
}
.top.scrolled { border-bottom-color: var(--cn-hair); box-shadow: 0 12px 26px -24px rgb(40 28 20 / .55); }

/* het S5-monogram: als masker in de inktkleur, zoals op de site */
.mono {
  width: 44px; height: 44px; display: grid; place-items: center; border: 0; padding: 0; border-radius: 50%;
  background: transparent; color: var(--cn-text); cursor: pointer; position: relative; transition: background var(--cn-t-fast);
}
.mono:hover { background: var(--cn-accent-tint); }
.mono-teken {
  display: block; width: 30px; height: 24px; background: currentColor;
  -webkit-mask: url("../beeld/s5-monogram.57e91c547d.svg") center / contain no-repeat; mask: url("../beeld/s5-monogram.57e91c547d.svg") center / contain no-repeat;
}

/* de twee tabs: één pil met twee helften; de gekozen helft is nude met inkt, de andere papier met zachte tekst */
.tabs {
  justify-self: center; position: relative; display: inline-flex; padding: 3px; gap: 0; max-width: 100%;
  border-radius: var(--cn-pill); background: var(--cn-bg); border: 1px solid var(--cn-line);
  box-shadow: 0 1px 0 rgb(255 255 255 / .5) inset;
}
.tabs a {
  position: relative; z-index: 1; min-height: 44px; padding: 0 15px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--cn-pill); color: var(--cn-muted); text-decoration: none; white-space: nowrap;
  font: 500 15px/1 var(--cn-f-sans); letter-spacing: .005em; transition: color .2s ease;
}
.tabs a:hover { color: var(--cn-text); }
.tabs a[aria-current="page"] { color: var(--cn-text); background: var(--cn-nude); }
.tabs.meet a[aria-current="page"] { background: transparent; }
.tabs-ind {
  position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 0; width: var(--tab-w, 0px); transform: translateX(var(--tab-x, 0px));
  border-radius: var(--cn-pill); background: var(--cn-nude); box-shadow: 0 1px 2px rgb(60 40 25 / .12);
  transition: transform .24s var(--cn-silk), width .24s var(--cn-silk); view-transition-name: cn-tab;
}
.tabs:not(.meet) .tabs-ind { visibility: hidden; }
.zoekknop { justify-self: end; }
@media (max-width: 359px) { .tabs a { padding: 0 11px; font-size: 14px; } }

/* ------------------------------------------------------------------ de offline-band */
.offline-band {
  position: sticky; top: calc(var(--cn-top-h) + var(--cn-safe-t)); z-index: 39;
  margin: 0; padding: 9px var(--cn-gut); text-align: center; font-size: var(--cn-fs-xs); line-height: 1.4;
  background: var(--cn-nude); color: var(--cn-text); border-bottom: 1px solid var(--cn-line);
}
.offline-band .icon { display: inline-block; vertical-align: -4px; margin-right: 6px; }

/* ------------------------------------------------------------------ de onderbalk (telefoon) */
.balk {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  height: calc(var(--cn-balk-h) + var(--cn-safe-b)); padding: 0 6px var(--cn-safe-b);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: stretch;
  border-top: 1px solid var(--cn-hair);
}
.balk-kop, .balk-extra, .balk-woord { display: none; }
.plek {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 44px;
  padding: 6px 2px; border: 0; background: transparent; color: var(--cn-muted); text-decoration: none; cursor: pointer;
  font: 500 12px/1.1 var(--cn-f-sans); letter-spacing: .01em; -webkit-tap-highlight-color: transparent;
}
.plek-ic { width: 56px; height: 32px; display: grid; place-items: center; border-radius: var(--cn-pill); transition: background .2s ease, transform .2s var(--cn-silk); }
.plek-lbl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plek:hover .plek-ic { background: var(--cn-accent-tint); }
.plek:active .plek-ic { transform: scale(.94); }
.plek[aria-current="page"] { color: var(--cn-text); }
.plek[aria-current="page"] .plek-ic { background: var(--cn-nude); }
.plek:focus-visible { outline: none; }
.plek:focus-visible .plek-ic { outline: 2px solid var(--cn-focus); outline-offset: 2px; }
/* Nieuw: in de balk, niet zwevend (R-33); een inktpil met een plus */
.plek.nieuw { color: var(--cn-text); }
.plek.nieuw .plek-ic { background: var(--cn-solid); color: var(--cn-on-accent); box-shadow: 0 6px 14px -8px rgb(40 28 20 / .55); }
.plek.nieuw:hover .plek-ic { background: var(--cn-solid-hover); }
.plek.later { color: var(--cn-faint); cursor: default; }

/* ------------------------------------------------------------------ de rail (tablet en breder) */
@media (min-width: 768px) {
  .top { margin-left: var(--cn-rail-w); }
  .top .mono { visibility: hidden; }
  .offline-band { margin-left: var(--cn-rail-w); }
  .balk {
    top: 0; right: auto; width: var(--cn-rail-w); height: auto; padding: calc(10px + var(--cn-safe-t)) 8px calc(16px + var(--cn-safe-b));
    display: flex; flex-direction: column; align-items: stretch; gap: 4px; overflow-y: auto; scrollbar-width: none;
    border-top: 0; border-right: 1px solid var(--cn-hair);
  }
  .balk::-webkit-scrollbar { display: none; }
  .balk-kop { display: flex; justify-content: center; margin: 0 0 6px; }
  .balk-kop .mono { width: 48px; height: 48px; }
  .balk-kop .mono-teken { width: 36px; height: 29px; }
  .balk-extra { display: contents; }
  .balk-rek { flex: 1 1 auto; min-height: 12px; }
  .plek { min-height: 60px; flex: none; }
  .plek.nieuw { order: -1; margin: 2px 0 12px; }
  .balk-kop { order: -2; }
}
@media (min-width: 1180px) {
  .balk { padding-left: 14px; padding-right: 14px; }
  .balk-kop { justify-content: flex-start; align-items: center; gap: 10px; margin: 0 0 14px; }
  .balk-woord { display: block; font: 400 21px/1.05 var(--cn-f-serif); color: var(--cn-text); letter-spacing: -.005em; }
  .balk-woord small { display: block; margin-top: 3px; font: 500 var(--cn-fs-label)/1.2 var(--cn-f-sans); letter-spacing: var(--cn-track); text-transform: uppercase; color: var(--cn-muted); }
  .plek { flex-direction: row; justify-content: flex-start; gap: 6px; min-height: 48px; padding: 2px 4px; font-size: var(--cn-fs-s); font-weight: 500; }
  .plek-ic { width: 44px; height: 36px; flex: none; }
  .plek[aria-current="page"] { background: var(--cn-nude); border-radius: var(--cn-pill); }
  .plek[aria-current="page"] .plek-ic { background: transparent; }
  .plek:hover { background: var(--cn-accent-tint); border-radius: var(--cn-pill); }
  .plek:hover .plek-ic { background: transparent; }
  .plek.nieuw { background: var(--cn-solid); color: var(--cn-on-accent); border-radius: var(--cn-pill); padding-right: 18px; box-shadow: 0 8px 18px -12px rgb(40 28 20 / .6); }
  .plek.nieuw .plek-ic { background: transparent; box-shadow: none; }
  .plek.nieuw:hover { background: var(--cn-solid-hover); }
  .plek .plek-lbl { overflow: visible; }
}
/* het scherm naast de rail: midden in de ruimte die overblijft */
@media (min-width: 768px) {
  main.view {
    max-width: none; margin: 0;
    padding-left: calc(var(--cn-rail-w) + max(var(--cn-gut), (100% - var(--cn-rail-w) - 1180px) / 2));
    padding-right: max(var(--cn-gut), (100% - var(--cn-rail-w) - 1180px) / 2);
  }
}

/* ------------------------------------------------------------------ het menu (blad) */
.menu-hand {
  display: block; width: 168px; height: 44px; margin: 0 0 10px; background: var(--cn-text); opacity: .9;
  -webkit-mask: url("../beeld/s5-handtekening.76a98168b6.svg") left center / contain no-repeat; mask: url("../beeld/s5-handtekening.76a98168b6.svg") left center / contain no-repeat;
}
.menu-groep + .menu-groep { margin-top: 18px; }
.menu-groep .group-label { margin-top: 0; }
.menu-groep .list .item { min-height: 54px; }
.item.later { color: var(--cn-faint); cursor: default; }
.item.later .t { color: var(--cn-muted); }
.menu-thema { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; }
.menu-thema .seg { align-self: flex-start; }
.menu-voet { margin: 18px 0 6px; font-size: var(--cn-fs-xs); color: var(--cn-muted); }

/* ------------------------------------------------------------------ Nieuw (blad) */
.nieuw-lijst .item .lead { background: var(--cn-nude); color: var(--cn-text); }
.nieuw-lijst .item.later .lead { background: var(--cn-bg-2); color: var(--cn-faint); }

/* ------------------------------------------------------------------ zoeken (blad) */
.zoek-veld { position: relative; }
.zoek-veld .icon { position: absolute; left: 14px; top: 50%; margin-top: -10px; color: var(--cn-muted); pointer-events: none; }
.zoek-veld .input { padding-left: 44px; min-height: 52px; font-size: 17px; }
.zoek-recent { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.zoek-uit { margin-top: 16px; min-height: 40vh; }
.zoek-uit .group-label { display: flex; justify-content: space-between; align-items: baseline; }
.zoek-uit .list + .group-label { margin-top: 18px; }
.zoek-uit .item .t mark { background: var(--cn-nude); color: inherit; border-radius: 3px; padding: 0 1px; }
.zoek-leeg { color: var(--cn-muted); padding: 16px 4px; }
/* de plek van een zoekresultaat (een rit, een regel van het logboek, een veld in Instellingen) licht even op; zoeken.js haalt hem weer weg */
.zoek-doel { outline: 2px solid var(--cn-accent); outline-offset: 3px; box-shadow: 0 0 0 7px var(--cn-accent-tint-2); animation: cn-zoek-doel 2.6s ease both; }
@keyframes cn-zoek-doel { 0% { outline-color: transparent; box-shadow: 0 0 0 0 transparent; } 12%, 75% { outline-color: var(--cn-accent); box-shadow: 0 0 0 7px var(--cn-accent-tint-2); } 100% { outline-color: transparent; box-shadow: 0 0 0 7px transparent; } }
@media (prefers-reduced-motion: reduce) { .zoek-doel { animation: none; } }

/* ------------------------------------------------------------------ laden en de fout bij het starten */
.start-staat { min-height: 60vh; display: grid; place-items: center; text-align: center; padding: 40px 0; }
.start-staat .mono-teken { width: 64px; height: 52px; margin: 0 auto 18px; color: var(--cn-text); opacity: .85; }
.start-staat.laden .mono-teken { animation: cn-adem 1.6s ease-in-out infinite; }
.start-staat h1 { font-size: 28px; margin-bottom: 8px; }
.start-staat p { color: var(--cn-muted); max-width: 36ch; margin: 0 auto 18px; }
@keyframes cn-adem { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .start-staat.laden .mono-teken { animation: none; } .tabs-ind { transition: none; } }
/* met View Transitions verschuift de browser de nude helft zelf (240 ms); de css-overgang zou de nieuwe stand anders halverwege vastleggen */
@supports (view-transition-name: none) { .tabs-ind { transition: none; } }
::view-transition-group(cn-tab) { animation-duration: .24s; animation-timing-function: cubic-bezier(.19, .8, .12, 1); }