/* Tachowacht, app-stylesheet. Wereld: congrue.ai (type, palet, dichtheid, kaartklok). */
@font-face{font-family:"Bricolage Grotesque";src:url(/static/fonts/BricolageGrotesque-variable-latin.woff2) format("woff2");font-weight:200 800;font-stretch:75% 100%;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bricolage Grotesque";src:url(/static/fonts/BricolageGrotesque-variable-latin-ext.woff2) format("woff2");font-weight:200 800;font-stretch:75% 100%;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Sans";src:url(/static/fonts/InstrumentSans-latin.woff2) format("woff2");font-weight:400 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Sans";src:url(/static/fonts/InstrumentSans-latin-ext.woff2) format("woff2");font-weight:400 700;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"DM Mono";src:url(/static/fonts/DMMono-400-latin.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:"DM Mono";src:url(/static/fonts/DMMono-500-latin.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}

:root{
  --charcoal:#282828;--charcoal-2:#2e2e2e;--off-white:#fffffa;--body-ink:#d6d6d2;--doc-ink:#9e9e9e;
  --lime:#d8ff8f;--orange:#f46d2f;--sage:#b9d5c3;--warm-gray:#f1eee7;--dark-olive:#403e34;
  --rule:rgba(255,255,250,.12);--rule-strong:#575859;
  --font-display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --font-sans:"Instrument Sans",ui-sans-serif,system-ui,sans-serif;
  --font-mono:"DM Mono",ui-monospace,"SF Mono",monospace;
  --gutter:clamp(16px,4vw,60px);--nav:48px;
  --r-xs:3px;--r-sm:5px;--r-lg:10px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--charcoal);-webkit-text-size-adjust:100%}
body{margin:0;min-height:100svh;display:flex;flex-direction:column;background:var(--charcoal);color:var(--off-white);font-family:var(--font-sans);font-weight:400;font-size:16px;line-height:1.4;font-variant-numeric:tabular-nums}
::selection{background:var(--lime);color:var(--charcoal)}
:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
a{color:inherit;text-decoration:none}
p a,td a,dd a,li a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(216,255,143,.6)}
p a:hover,td a:hover,li a:hover{color:var(--lime)}
small{font-size:13px;color:var(--body-ink)}
em{font-style:normal;color:var(--doc-ink)}
h1,h2,h3{font-family:var(--font-display);font-weight:600;letter-spacing:-.01em;line-height:1.1;margin:0;text-wrap:balance}
h1{font-size:clamp(32px,3.1vw,45px)}
h2{font-size:clamp(18px,1.667vw,24px)}
.mono,.datum,.kruimel,.statusregel,.tabs,.nav,.knop,.klok-tekst,.feiten dt,label,th,.tel,.legenda,.cijfers,.voet,.uitlog button{font-family:var(--font-mono);font-weight:400}
.num{text-align:right;font-family:var(--font-mono);white-space:nowrap}
.lime{color:var(--lime)}
.orange{color:var(--orange)}
.breek{word-break:break-all}

/* bovenbalk */
.balk{flex:none;height:var(--nav);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 var(--gutter);border-bottom:1px solid var(--rule);position:sticky;top:0;background:rgba(40,40,40,.92);backdrop-filter:blur(8px);z-index:5}
.woordmerk{font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:-.02em;color:var(--off-white)}
.woordmerk.groot{font-size:34px}
.nav{display:flex;align-items:center;gap:clamp(12px,2vw,28px);font-size:14px}
.nav a{color:var(--warm-gray);padding:6px 0;transition:color .15s}
.nav a:hover,.nav a[aria-current=page]{color:var(--lime)}
.nav a[aria-current=page]{box-shadow:0 1px 0 var(--lime)}
.uitlog{margin:0}
.uitlog button{background:none;border:0;color:var(--doc-ink);padding:6px 0;cursor:pointer;font-size:14px}
.uitlog button:hover{color:var(--off-white)}

.knop{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 22px;border-radius:var(--r-sm);background:var(--lime);color:var(--charcoal)!important;border:1px solid var(--lime);font-size:14px;cursor:pointer;transition:background .15s,border-color .15s;box-shadow:none}
.knop:hover{background:#e6ffb0;border-color:#e6ffb0}
.knop:active{background:#c9f07c}
.knop-klein{height:30px;padding:0 12px;font-size:13px}
.nav .knop{color:var(--charcoal)}

/* pagina */
.pagina{flex:1;padding:0 var(--gutter) 72px}
.kop-blok{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;padding:clamp(32px,5vw,56px) 0 24px}
.datum{margin:10px 0 0;font-size:13px;color:var(--body-ink)}
.kruimel{font-size:13px;color:var(--doc-ink);margin:20px 0 0}
.kruimel a{color:var(--body-ink)}
.statusregel{display:flex;flex-wrap:wrap;gap:0 14px;margin:0;font-size:14px;color:var(--body-ink)}
.statusregel a{padding:6px 0;text-decoration:none}
.statusregel a:hover{text-decoration:underline;text-underline-offset:3px}
.statusregel a+a::before{content:"·";margin-right:14px;color:var(--rule-strong)}
.statusregel a:hover{color:var(--lime)}
.statusregel a.orange:hover{color:var(--orange)}

.tabs{display:flex;gap:4px;border-bottom:1px solid var(--rule);margin:0 0 0;font-size:12px;overflow-x:auto}
.tabs a{padding:8px 12px 7px;color:var(--body-ink);border-radius:var(--r-xs) var(--r-xs) 0 0;white-space:nowrap}
.tabs a:hover{color:var(--off-white)}
.tabs a[aria-current=true]{color:var(--charcoal);background:var(--lime)}

/* kaartklok (signatuur) */
.klok{display:block;min-width:168px}
.segmenten{display:grid;grid-template-columns:repeat(28,1fr);gap:2px;height:6px}
.segmenten i{display:block;background:rgba(255,255,250,.14);border-radius:1px;transform-origin:left;}
.segmenten i.vol{background:var(--lime)}
.segmenten i.vol.orange{background:var(--orange)}
.klok-tekst{display:flex;justify-content:space-between;gap:10px;margin-top:6px;font-size:12px;color:var(--body-ink)}
.klok-te_laat .klok-tekst .status{color:var(--orange);font-weight:500}
.klok-binnenkort .klok-tekst .status{color:var(--orange)}
.klok-op_tijd .klok-tekst .status{color:var(--lime)}
@media (prefers-reduced-motion:no-preference){
  .segmenten i.vol{animation:vul .12s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i,0)*5ms)}
  @keyframes vul{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}

/* bord */
.bord{border:1px solid var(--rule);border-radius:var(--r-sm);margin-top:0;overflow:hidden}
.rij{display:grid;grid-template-columns:1.5fr 1fr 1.4fr 1fr 1fr .9fr;gap:20px;align-items:center;padding:16px 20px;border-top:1px solid var(--rule);color:var(--off-white);transition:background .15s}
.rij:first-child{border-top:0}
a.rij:hover{background:rgba(255,255,250,.04)}
a.rij:focus-visible{outline-offset:-2px}
.kopregel{font-family:var(--font-mono);font-size:11px;letter-spacing:.02em;text-transform:uppercase;color:var(--doc-ink);padding:10px 20px;background:rgba(255,255,250,.03)}
.rij span{min-width:0}
.rij small{display:block;margin-top:3px;font-size:12px;color:var(--doc-ink)}
.rij .naam strong{font-weight:500}
.rij .laatste,.rij .overtr,.rij .handtek{font-family:var(--font-mono);font-size:13px}
.rij .overtr small,.rij .uitlezen small{font-family:var(--font-mono)}
.uitleg{max-width:72ch;color:var(--body-ink);font-size:14px;margin:18px 0 0}

/* lege toestand (sage-paneel) */
.leeg{background:var(--sage);color:var(--charcoal);border-radius:var(--r-lg);padding:clamp(24px,4vw,40px);max-width:720px}
.leeg h2{font-size:clamp(25px,2.5vw,35px)}
.leeg ol,.leeg p{margin:16px 0 0;padding-left:22px;line-height:1.5}
.leeg p{padding-left:0}
.leeg li+li{margin-top:8px}
.leeg a{text-decoration:underline;text-decoration-color:rgba(40,40,40,.5)}
.leeg a:hover{color:var(--dark-olive)}

/* chauffeur */
.chauffeur-kop{align-items:flex-start}
.kop-klok{min-width:260px;max-width:340px;flex:1}
.kop-klok small{display:block;margin-top:8px;font-family:var(--font-mono);font-size:12px;color:var(--doc-ink)}
.raster{display:grid;gap:0;border:1px solid var(--rule);border-radius:var(--r-sm);overflow:hidden;margin-top:24px}
.raster.twee{grid-template-columns:1fr 1fr}
.cel{padding:24px;border-left:1px solid var(--rule)}
.cel:first-child{border-left:0}
.cel h2{margin-bottom:16px}
.blok{margin-top:40px}
.blok h2{margin-bottom:14px}
.tel{font-size:13px;color:var(--doc-ink);margin-left:8px;vertical-align:middle}
.rustig{color:var(--body-ink);margin:0}
.inline-form{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.inline-form label{font-size:12px;color:var(--doc-ink);flex-basis:100%}
.inline-form input{flex:1;min-width:0}
.feiten{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0;font-size:14px}
.feiten dt{font-size:12px;color:var(--doc-ink);padding-top:2px}
.feiten dd{margin:0}

/* tabellen */
.tabel{width:100%;border-collapse:collapse;font-size:14px;border:1px solid var(--rule);border-radius:var(--r-sm)}
.tabel th{font-family:var(--font-mono);font-weight:400;font-size:11px;letter-spacing:.02em;text-transform:uppercase;color:var(--doc-ink);text-align:left;padding:10px 12px;background:rgba(255,255,250,.03);border-bottom:1px solid var(--rule)}
.tabel td{padding:11px 12px;border-top:1px solid var(--rule);vertical-align:top}
.tabel td small{display:block;color:var(--doc-ink);font-family:var(--font-mono);font-size:12px;margin-top:2px}
.tabel tfoot td{color:var(--body-ink);font-size:13px;border-top:1px solid var(--rule-strong)}
.tabel tfoot td.num{color:var(--off-white);font-weight:500}
.tabel.compact{font-size:13px}
.tabel.compact td{padding:8px 10px}
.tabel tbody tr:hover{background:rgba(255,255,250,.03)}
.opmerkingen{margin:14px 0 0;padding-left:20px;color:var(--body-ink);font-size:14px}

/* dagen */
.dagen{display:grid;gap:8px}
.dag{display:grid;grid-template-columns:96px 1fr auto;gap:14px;align-items:center;font-size:13px}
.dagbalk{height:12px;display:flex;background:rgba(255,255,250,.08);border-radius:2px;overflow:hidden}
.dagbalk i,.legenda i{display:block;height:100%}
.dagbalk .rij,.legenda .rij{background:var(--lime)}
.dagbalk .werk,.legenda .werk{background:rgba(255,255,250,.55)}
.dagbalk .besch,.legenda .besch{background:var(--sage)}
.legenda{display:flex;gap:16px;align-items:center;font-size:12px;color:var(--doc-ink);margin:12px 0 0}
.legenda i{width:14px;height:8px;border-radius:1px;margin-right:6px;display:inline-block}
.cijfers{color:var(--doc-ink);white-space:nowrap}

/* formulieren */
input{font:inherit;font-family:var(--font-sans);font-size:16px;color:var(--off-white);background:var(--charcoal-2);border:1px solid var(--rule-strong);border-radius:var(--r-sm);padding:9px 12px;caret-color:var(--lime)}
input::placeholder{color:var(--doc-ink)}
input:focus{border-color:var(--lime);outline:none;box-shadow:0 0 0 2px rgba(216,255,143,.25)}
label{font-size:12px;color:var(--body-ink)}
.inlog{max-width:420px;margin:clamp(40px,10vh,120px) auto 0;display:grid;gap:14px}
.inlog h1{margin-top:28px}
.toelichting{margin:0;color:var(--body-ink);line-height:1.5}
.formulier{display:grid;gap:10px;margin-top:12px}
.formulier .knop{margin-top:6px;justify-self:start}
.fout{margin:0;color:var(--orange);font-size:14px}

/* voet */
.voet{flex:none;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;padding:18px var(--gutter);border-top:1px solid var(--rule);font-size:11px;color:var(--doc-ink)}

/* scrollbalk */
*{scrollbar-color:var(--rule-strong) var(--charcoal)}

/* mobiel */
@media (max-width:860px){
  .raster.twee{grid-template-columns:1fr}
  .cel{border-left:0;border-top:1px solid var(--rule)}
  .cel:first-child{border-top:0}
  .kopregel{display:none}
  .rij{grid-template-columns:1fr 1fr;grid-template-areas:"naam bedrijf" "uitlezen uitlezen" "laatste overtr" "handtek handtek";gap:10px 16px}
  .rij .naam{grid-area:naam}.rij .bedrijf{grid-area:bedrijf;text-align:right;font-size:14px}
  .rij .uitlezen{grid-area:uitlezen}.rij .laatste{grid-area:laatste}.rij .overtr{grid-area:overtr;text-align:right}.rij .handtek{grid-area:handtek}
  .rij .laatste::before{content:"uitgelezen ";color:var(--doc-ink)}
  .rij .handtek::before{content:"handtekeningen ";color:var(--doc-ink)}
  .tabel:not(.stapel){display:block;overflow-x:auto;white-space:nowrap}
  .tabel.stapel,.tabel.stapel tbody,.tabel.stapel tr,.tabel.stapel td{display:block;width:100%}
  .tabel.stapel thead{display:none}
  .tabel.stapel tr{padding:10px 12px;border-top:1px solid var(--rule)}
  .tabel.stapel tr:first-child{border-top:0}
  .tabel.stapel td{padding:2px 0;border:0;text-align:left;white-space:normal}
  .tabel.stapel td.num{text-align:left}
  .tabel.stapel td[data-k]::before{content:attr(data-k) " ";color:var(--doc-ink);font-family:var(--font-mono);font-size:12px}
  .dag{grid-template-columns:84px 1fr}
  .dag .cijfers{grid-column:2;white-space:normal}
}
@media (max-width:560px){
  .balk{height:auto;min-height:var(--nav);flex-wrap:wrap;row-gap:0;padding:6px var(--gutter)}
  .nav{flex-wrap:wrap;gap:4px 14px;font-size:13px}
  .statusregel{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px}
  .statusregel a+a::before{content:none;margin:0}
  .nav .knop{height:36px;padding:0 12px;font-size:12px}
  .woordmerk{font-size:19px}
  .rij{grid-template-columns:1fr;grid-template-areas:"naam" "bedrijf" "uitlezen" "laatste" "overtr" "handtek";padding:14px 16px}
  .rij .bedrijf,.rij .overtr{text-align:left}
  .rij .overtr::before{content:"overtredingen ";color:var(--doc-ink)}
  .statusregel{font-size:13px}
  .kop-klok{min-width:0;max-width:none;width:100%}
}