/* ---------- Base theme ---------- */
:root{
  --bg:#f7f7f8;
  --bg-alt:#ededf0;
  --fg:#111111;
  --muted:#5a5a5a;
  --accent:#000000;
  --radius:14px;
  --gap:16px;
  --maxw:960px;

  /* app feedback colors (tafels) */
  --ok:#0a7d2e;
  --bad:#b00020;
}

/* ---------- Resets / base ---------- */
*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; padding:0; }
body{
  display:flex; flex-direction:column; min-height:100vh;
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--fg);
  background:linear-gradient(180deg,var(--bg),#fff);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
main{ flex:1; display:block; }
a{ color:inherit; text-decoration:none; }
a:focus{ outline:2px dashed #000; outline-offset:2px; }

/* ---------- Layout ---------- */
.container{ max-width:var(--maxw); margin:0 auto; padding:0 20px; }
.section{ padding:28px 0 64px; }
.hero{ padding:96px 0 40px; text-align:left; }
.footer{ border-top:1px solid #e6e6e9; padding:24px 0; color:#777; }
.small{ font-size:.9rem; }

/* ---------- Header ---------- */
.header{
  border-bottom:1px solid #ddd;
  background:#fff;
}
.header.sticky{
  position:sticky; top:0; z-index:10;
  backdrop-filter:saturate(180%) blur(6px);
  background:rgba(255,255,255,.9);
}
.nav{
  display:flex; gap:12px; align-items:center; justify-content:space-between;
  padding:12px 0;
}
.brand{ font-weight:700; letter-spacing:.2px; font-size:1.1rem; }

/* ---------- Cards / buttons / inputs ---------- */
.card{ border:1px solid #ddd; background:#fff; border-radius:var(--radius); padding:16px; }

.btn{
  display:inline-block; padding:10px 14px; border:1px solid var(--accent);
  border-radius:999px; text-decoration:none; background:var(--accent); color:#fff; font-weight:600;
}
.btn.ghost{ background:#fff; color:#111; }

input[type="number"]{
  width:160px; font-size:clamp(20px,5vw,28px); padding:10px 12px;
  border:1px solid #ccc; border-radius:10px; text-align:center;
}

/* ---------- Typography ---------- */
h1{ font-size:clamp(32px,6vw,56px); margin:0 0 12px; overflow:hidden; }
.lead{ color:var(--muted); font-size:1.1rem; }

/* ---------- Tafels page components ---------- */
.controls{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.chip{
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px 12px; border:1px solid #ddd; border-radius:999px; background:#fff;
  cursor:pointer; font-weight:600; user-select:none;
}
.chip[aria-pressed="true"]{ background:#111; color:#fff; border-color:#111; }

.question{ font-size:clamp(24px,6vw,48px); font-weight:700; text-align:center; margin:12px 0; }
.answer-row{ display:flex; gap:10px; justify-content:center; align-items:center; flex-wrap:wrap; }

.feedback{ text-align:center; margin-top:8px; font-weight:700; }
.feedback.ok{ color:var(--ok); }
.feedback.bad{ color:var(--bad); }

.steps{ max-width:680px; margin:8px auto 0; color:#333; font-size:.98rem; }
.steps p{ margin:4px 0; }

.stats{ text-align:center; margin-top:10px; color:#333; }

/* ---------- Responsive tweaks ---------- */
@media (max-width:480px){
  input[type="number"]{ width:100%; }
  .btn{ width:100%; }
}

/* ---------- Page-specific small helpers ---------- */
/* Make the hero on /tafels a bit tighter without affecting home */
.page-tafels .hero{ padding:48px 0 16px; }