/* Islebridge proefversie
   Kleuren: diepblauw (inkt), waterblauw, nevelgrijs als achtergrond, één signaalgeel
   dat alleen "let op" betekent. Geen externe lettertypen: er wordt niets bij derden opgehaald. */

@font-face {
  font-family: Caladea;
  src: url("../fonts/Caladea-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #14304a;
  --water: #2f6f8f;
  --water-soft: #d5e4eb;
  --mist: #e8eef1;
  --sheet: #fbfcfc;
  --signal: #f2c230;
  --signal-soft: #fbefc0;
  --ok: #2e6b4b;
  --ok-soft: #d8eadf;
  --miss: #a8452f;
  --line: #b9c8d0;
  --muted: #465d6e;

  --head: Caladea, Georgia, "Times New Roman", serif;
  --body: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--mist);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.55;
}

h1, h2, h3 { font-family: var(--head); font-weight: 700; line-height: 1.2; margin: 0 0 .6rem; letter-spacing: -.005em; }
h1 { font-size: 2.15rem; max-width: 24ch; }
h2 { font-size: 1.45rem; margin-top: 2.4rem; padding-top: 1.15rem; position: relative; }
h3 { font-size: 1.15rem; margin-top: 1.4rem; }

p { margin: 0 0 .9rem; max-width: 62ch; }
ul, ol { padding-left: 1.2rem; margin: 0 0 1rem; }
li { margin-bottom: .3rem; }

a { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--water); outline-offset: 2px; }

.wrap { max-width: 54rem; margin: 0 auto; padding: 0 1rem; }

/* Balk bovenaan: wat dit is, steeds zichtbaar */
.proef {
  background: var(--signal);
  color: var(--ink);
  font-size: .9rem;
  padding: .45rem 0;
}
.proef p { margin: 0; max-width: none; }

header.site { background: var(--ink); color: #fff; }
header.site :focus-visible { outline-color: #fff; }
.bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; padding: .8rem 0; }
.brand { display: block; line-height: 0; }
.brand img { display: block; height: 2.3rem; width: auto; }

.viewer { display: flex; align-items: center; gap: .5rem; font-size: .9rem; }
.viewer select { max-width: 15rem; }

nav.main { padding-bottom: .6rem; }
nav.main ul { list-style: none; display: flex; flex-wrap: wrap; gap: .1rem 1.2rem; margin: 0; padding: 0; }
nav.main li { margin: 0; }
nav.main a { display: inline-block; padding: .3rem 0; text-decoration: none; color: #d6e4ec; border-bottom: 3px solid transparent; }
nav.main a:hover { color: #fff; border-bottom-color: var(--water); }
nav.main a[aria-current="page"] { color: #fff; border-bottom-color: var(--signal); font-weight: 600; }

main { padding: 2rem 0 4rem; }

footer.site { border-top: 1px solid var(--line); padding: 1.2rem 0 2rem; color: var(--muted); font-size: .9rem; }
footer.site p { max-width: none; margin: 0 0 .3rem; }

/* Knoppen */
.btn {
  display: inline-block;
  font: inherit;
  font-weight: 600;
  min-height: 44px;
  padding: .6rem 1.1rem;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: #fff;
  border-radius: 3px;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: #0c2237; border-color: #0c2237; text-decoration: none; }
.btn.secondary { background: transparent; color: var(--ink); }
.btn.secondary:hover { background: var(--water-soft); }
.btn.small { min-height: 36px; padding: .3rem .8rem; font-size: .95rem; }
.btn.danger { background: transparent; color: var(--miss); border-color: var(--miss); }
.btn.danger:hover { background: #f4dcd5; }
.actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0; }

/* Formulieren */
form.stack > * + * { margin-top: 1.4rem; }
fieldset { border: 0; border-top: 2px solid var(--water); padding: .8rem 0 0; margin: 0; min-width: 0; }
legend { font-family: var(--head); font-weight: 700; font-size: 1.1rem; padding: 0 .6rem 0 0; }
.hint { color: var(--muted); font-size: .92rem; margin: .1rem 0 .6rem; max-width: 62ch; }
.opt { display: flex; gap: .65rem; align-items: flex-start; padding: .35rem 0; }
.opt input { margin-top: .32rem; width: 1.15rem; height: 1.15rem; flex: 0 0 auto; accent-color: var(--ink); }
.opt .opt-text small { display: block; color: var(--muted); font-size: .9rem; }
label.field { display: block; font-weight: 600; margin-bottom: .3rem; }
input[type="text"], input[type="number"], select, textarea {
  font: inherit;
  color: var(--ink);
  background: var(--sheet);
  border: 2px solid var(--line);
  border-radius: 3px;
  padding: .55rem .7rem;
  min-height: 44px;
  width: 100%;
  max-width: 34rem;
}
textarea { min-height: 7rem; }
input:focus, select:focus, textarea:focus { border-color: var(--ink); }
.pair { display: flex; flex-wrap: wrap; gap: .8rem; }
.pair > div { flex: 1 1 8rem; max-width: 12rem; }
.budget-fields[hidden] { display: none; }

.errors { border-left: 6px solid var(--miss); background: #f6e3dd; padding: .8rem 1rem; margin-bottom: 1.4rem; }
.errors p { margin: 0 0 .3rem; max-width: none; font-weight: 600; }
.errors ul { margin: 0; }

.note { border-left: 6px solid var(--water); background: var(--water-soft); padding: .7rem 1rem; margin: 1rem 0; max-width: 62ch; }
.note p { margin: 0; }
.note.signal { border-left-color: var(--signal); background: var(--signal-soft); }

/* Labels */
.tag {
  display: inline-block;
  font-size: .8rem;
  line-height: 1.3;
  padding: .05rem .45rem;
  border: 1px solid var(--muted);
  border-radius: 2px;
  color: var(--muted);
  white-space: nowrap;
  vertical-align: .08em;
}
.tag.ok { border-color: var(--ok); color: var(--ok); background: var(--ok-soft); }
.tag.bad { border-color: var(--miss); color: var(--miss); }
.tag.test { border-color: var(--ink); background: var(--signal-soft); color: var(--ink); }

/* Startpagina */
.lead { font-size: 1.2rem; max-width: 48ch; }
.choices { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin: 1.6rem 0 0; }
.choice { background: var(--sheet); padding: 1rem 1rem 1.2rem; }
.choice h2 { margin: 0 0 .4rem; font-size: 1.3rem; }
.choice p { margin-bottom: 1rem; }
.list-plain { list-style: none; padding: 0; }
.list-plain li { padding: .5rem 0; border-top: 1px solid var(--line); margin: 0; }
.list-plain li:last-child { border-bottom: 1px solid var(--line); }
.soon { color: var(--muted); }

/* De brug: het onderdeel dat laat zien waarom iets een match is.
   Een gevulde plank is vergeleken en past. Een open plank is niet vergeleken.
   Een gele plank past minder, maar is geen reden om af te vallen. */
.bridge { margin: .9rem 0 .4rem; }
.bridge-ends { display: flex; justify-content: space-between; gap: 1rem; font-size: .85rem; font-weight: 600; margin-bottom: .3rem; }
.bridge-ends span:last-child { text-align: right; }
.bridge-span { display: flex; align-items: flex-end; }
.pillar { flex: 0 0 .55rem; height: 3rem; background: var(--ink); }
.planks { flex: 1; display: flex; align-items: flex-end; gap: 3px; list-style: none; margin: 0; padding: 0 3px; }
.plank { flex: 1 1 0; min-width: 0; text-align: center; margin: 0; }
.plank-board { display: block; height: 1rem; border: 2px solid var(--water); background: var(--water); }
.plank.open .plank-board {
  background: repeating-linear-gradient(135deg, transparent 0 4px, var(--water-soft) 4px 8px);
  border-style: dashed;
}
.plank.soft .plank-board { background: linear-gradient(to bottom, transparent 50%, var(--water) 50%); }
.plank-label { display: block; font-size: .72rem; line-height: 1.2; margin-top: .3rem; color: var(--muted); overflow-wrap: anywhere; }
.bridge.big .pillar { height: 4.2rem; flex-basis: .7rem; }
.bridge.big .plank-board { height: 1.4rem; }
.bridge.big .plank-label { font-size: .85rem; }
.legend { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; font-size: .85rem; color: var(--muted); margin: .4rem 0 1rem; }
.legend span::before { content: ""; display: inline-block; width: 1.1rem; height: .7rem; margin-right: .4rem; border: 2px solid var(--water); background: var(--water); vertical-align: -.05rem; }
.legend .l-open::before { background: repeating-linear-gradient(135deg, transparent 0 3px, var(--water-soft) 3px 6px); border-style: dashed; }
.legend .l-soft::before { background: linear-gradient(to bottom, transparent 50%, var(--water) 50%); }

/* Lijsten met matches */
.match-row { border-top: 1px solid var(--line); padding: 1.1rem 0; display: grid; gap: .3rem 1.5rem; grid-template-columns: 1fr; }
.match-row:last-child { border-bottom: 1px solid var(--line); }
.match-row h3 { margin: 0 0 .2rem; font-size: 1.1rem; }
.match-row p { margin: 0 0 .4rem; }
.kind { font-weight: 600; }
.topic-line { margin: 0 0 .25rem; }

.checks { list-style: none; padding: 0; margin: 0 0 1rem; }
.checks li { padding: .55rem 0; border-top: 1px solid var(--line); margin: 0; display: grid; grid-template-columns: 8rem 1fr; gap: .2rem 1rem; }
.checks li:last-child { border-bottom: 1px solid var(--line); }
.checks .what { font-weight: 600; }
.checks .status { font-weight: 400; color: var(--muted); display: block; font-size: .85rem; }

.sheet { background: var(--sheet); padding: 1rem 1.1rem 1.2rem; margin: 1.2rem 0; }
.sheet h2, .sheet h3 { margin-top: 0; }

.profile-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 1.5rem; border-top: 1px solid var(--line); padding: 1rem 0; }
.profile-row:last-child { border-bottom: 1px solid var(--line); }
.profile-row > div:first-child { flex: 1 1 18rem; }
.profile-row h3 { margin: 0 0 .2rem; font-size: 1.1rem; }

.tabs { display: flex; gap: 1.2rem; margin: 1rem 0 1.4rem; border-bottom: 2px solid var(--line); }
.tabs a { padding: .4rem 0; text-decoration: none; border-bottom: 4px solid transparent; margin-bottom: -2px; }
.tabs a[aria-current="page"] { border-bottom-color: var(--ink); font-weight: 600; }

/* Gesprek */
.chat { list-style: none; padding: 0; margin: 0 0 1rem; max-width: 40rem; }
.chat li { margin: 0 0 .6rem; padding: .5rem .8rem; background: var(--sheet); border-left: 4px solid var(--line); }
.chat li.mine { border-left-color: var(--ink); }
.chat .who { font-size: .8rem; color: var(--muted); display: block; }
.chat-form { display: flex; gap: .6rem; max-width: 40rem; flex-wrap: wrap; }
.chat-form input { flex: 1 1 14rem; }

.choice-set { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }

.empty { border: 2px dashed var(--line); padding: 1.2rem; max-width: 62ch; }
.empty p:last-child { margin-bottom: 0; }

@media (min-width: 46rem) {
  .match-row { grid-template-columns: 1fr 22rem; align-items: start; }
  .match-row .bridge { margin-top: 0; }
}

@media (max-width: 34rem) {
  h1 { font-size: 1.7rem; }
  .checks li { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Feitenlijsten, verborgen labels */
.facts { display: grid; grid-template-columns: 9.5rem 1fr; gap: .45rem 1rem; margin: 0 0 .8rem; }
.facts dt { font-weight: 600; }
.facts dd { margin: 0; }
.inline-list { list-style: none; padding: 0; margin: 0; }
.inline-list li { margin: 0 0 .35rem; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 34rem) { .facts { grid-template-columns: 1fr; gap: 0; } .facts dd { margin-bottom: .5rem; } }

/* Gesprekken: lijst links, het hele gesprek rechts (op smalle schermen onder elkaar) */
.convo { display: grid; gap: 1.5rem; }
.convo-list { margin: 0; }
.convo-list li { padding: 0; }
.convo-list a { display: block; padding: .6rem .8rem; text-decoration: none; border-left: 4px solid transparent; }
.convo-list a:hover { background: var(--water-soft); }
.convo-list li.on a { border-left-color: var(--ink); background: var(--sheet); }
.convo-panel h2 { margin-top: 0; }
.chat-scroll { max-height: 26rem; overflow-y: auto; padding: .2rem; margin-bottom: 1rem; max-width: 40rem; }
.chat-scroll .chat { margin-bottom: 0; }
@media (min-width: 46rem) { .convo { grid-template-columns: 16rem 1fr; align-items: start; } }

/* Het merk: planken. Drie planken met een gele derde onder elke kop,
   en een strook planken onder de kop van de pagina. */
h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 7.4rem;
  height: .45rem;
  background: linear-gradient(90deg,
    var(--water) 0 2.2rem, transparent 2.2rem 2.6rem,
    var(--water) 2.6rem 4.8rem, transparent 4.8rem 5.2rem,
    var(--signal) 5.2rem 7.4rem);
}
.deck { position: relative; height: .6rem; background: var(--mist); overflow: hidden; }
.deck::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, var(--water) 0 2.2rem, transparent 2.2rem 2.6rem);
}
.deck::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 5.2rem;
  width: 2.2rem;
  background: var(--signal);
}
.viewer label { color: #d6e4ec; }

@media print {
  .proef, header.site, .deck, footer.site, .actions, .viewer { display: none; }
  body { background: #fff; }
  .sheet { break-inside: avoid; border: 1px solid #999; }
}

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.steps { list-style: none; padding: 0; margin: 1rem 0 1.5rem; max-width: 62ch; counter-reset: st; }
.steps li { counter-increment: st; position: relative; padding: .1rem 0 1rem 3.1rem; min-height: 2.3rem; }
.steps li::before { content: counter(st); position: absolute; left: 0; top: 0; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; background: var(--ink); color: #fff; font-family: Caladea, Georgia, serif; font-weight: bold; font-size: 1.15rem; }
.steps li:nth-child(3)::before { background: var(--signal); color: var(--ink); }
.note h2 { margin-top: 0; }