/* Braials — Agenda. A ruled personal planner with a slim appointment rail,
 * restrained indigo ink and a burnt-orange bookmark. Dates and times come
 * from the lesson, never from decorative CSS. Standard renderer classes only.
 */
:root {
  --ink: #242940;
  --ink-mid: #454b65;
  --ink-soft: #60667c;
  --paper: #eaeaf0;
  --paper-warm: #f1f1f7;
  --white: #fffefa;
  --paper-2: #f7f6f2;
  --border: #c9cad6;
  --line: #c9cad6;
  --ocean: #4b4e94;
  --ocean-dark: #383b77;
  --ocean-light: #eeedf9;
  --gold: #a94620;
  --gold-dark: #863716;
  --gold-light: #faeee5;
  --forest: #2c684d;
  --forest-light: #eaf3eb;
  --ember: #a94620;
  --ember-light: #faeee5;
  --plum: #704764;
  --plum-light: #f5ebf2;
  --correct: #246241;
  --correct-bg: #eaf5ec;
  --incorrect: #ad3044;
  --incorrect-bg: #fff0f2;
  --radius: 6px;
  --shadow: 0 2px 3px rgba(36, 41, 64, .035);
  --shadow-md: 0 4px 14px rgba(36, 41, 64, .05);
  --shadow-lg: 0 4px 14px rgba(36, 41, 64, .05);
  --font-heading: 'Fraunces', Georgia, serif;
  --font-body: 'Work Sans', system-ui, sans-serif;
  --header-bg: #fffefa;
}
body { background: var(--paper); background-image: none; color: var(--ink); font: 1rem/1.7 var(--font-body); }
h1, h2, h3 { font-family: var(--font-heading); letter-spacing: -.025em; }
::selection { background: var(--ocean-light); color: var(--ocean-dark); }
.header {
  max-width: 800px;
  width: calc(100% - 2.4rem);
  margin: 1.8rem auto 0;
  padding: 2rem 2rem 1.8rem 3.4rem;
  background: var(--header-bg);
  color: var(--ink);
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 6px 16px 6px 6px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.header::before {
  top: 0;
  left: 1.3rem;
  right: auto;
  width: .75rem;
  height: 4.4rem;
  border-radius: 0 0 1px 1px;
  background: var(--gold);
  clip-path: polygon(0 0,100% 0,100% 100%,50% 85%,0 100%);
}
.header::after { content: ''; position: absolute; left: 2.65rem; top: 0; bottom: 0; width: 1px; background: var(--border); pointer-events: none; }
.header-tag { background: var(--ocean-light); border: 1px solid var(--border); color: var(--ocean-dark); border-radius: 3px; font-size: .8125rem; letter-spacing: .06em; padding: .2rem .6rem; margin: 0 0 .8rem; }
.header h1 { margin: 0; color: var(--ink); font-size: clamp(2rem,5vw,2.9rem); font-weight: 600; line-height: 1.12; overflow-wrap: anywhere; }
.header p { color: var(--ink-mid); font-size: 1rem; line-height: 1.65; opacity: 1; margin-top: .8rem; }
.container { max-width: 840px; padding: 1.5rem 1.2rem 4rem; }
.sec, .section { margin: 2rem 0 1rem; padding: 0 0 .75rem; border-bottom: 1px solid var(--border); border-radius: 0; background: none; text-align: left; animation: none; }
.sec-tag { font: 600 .8125rem var(--font-body); letter-spacing: .05em; background: var(--ocean); color: #fff; padding: .4rem .7rem; border: 0; border-radius: 4px 4px 0 0; box-shadow: none; }
.sec h2, .section h2 { font-size: 1.6rem; margin-top: .6rem; }
.sec-sub { color: var(--ink-mid); font-size: 1rem; }
.card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
  background: var(--white);
  box-shadow: var(--shadow);
  margin-bottom: 1rem;
  animation: none;
  transition: none;
}
.card:nth-child(n), .blok:nth-child(n) > .card { border-left-color: var(--border); }
.card:hover { box-shadow: var(--shadow); transform: none; }
.card-head { align-items: flex-start; gap: .9rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); margin-bottom: 1rem; }
.card:nth-child(n) .card-num, .blok:nth-child(n) > .card .card-num { width: 2.1rem; height: 2.1rem; border-radius: 3px; border: 1px solid var(--ocean); background: var(--ocean-light); color: var(--ocean-dark); font: 600 .9375rem var(--font-body); box-shadow: none; }
.card-title { font: 600 1.15rem/1.4 var(--font-heading); color: var(--ink); }
.card-instr { font-size: .9375rem; color: var(--ink-mid); margin: .35rem 0 0; }
.card-lijst li::before { border-radius: 3px; box-shadow: none; }
.info { background: var(--paper-2); border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: 3px; font-size: 1rem; box-shadow: none; }
.info.ocean { background: var(--ocean-light); border-left-color: var(--ocean); }
.info.forest { background: var(--forest-light); border-left-color: var(--forest); }
.info.warning { background: var(--ember-light); border-left-color: var(--ember); }
.info h3 { font-size: 1.15rem; }
.leestekst-card p { font-size: 1rem; margin: 0; padding: .7rem 0; border-bottom: 1px solid var(--border); }
.leestekst-card p:last-child { border-bottom: 0; }
.leestekst-card p + p { margin-top: 0; }
table.schema { background: var(--white); box-shadow: none; min-width: 0; }
table.schema th, table.schema td { padding: .75rem .85rem; border-color: var(--border); }
table.schema thead th { background: var(--ocean); color: #fff; font: 600 .9375rem var(--font-body); }
table.schema tbody th { background: var(--paper-warm); color: var(--ocean-dark); font-weight: 600; }
.vocab-list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .6rem; }
.vocab-item:nth-child(n) { border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: 3px; background: var(--white); box-shadow: none; }
.vocab-item:nth-child(n):hover { background: var(--paper-2); box-shadow: none; transform: none; }
.vocab-item:nth-child(n) .dutch { color: var(--ocean-dark); font-size: 1rem; }
.vocab-item .english { color: var(--ink-mid); font-size: .9375rem; }
.vocab-play-btn { background: var(--ocean); }
.vocab-play-btn:hover { transform: none; background: var(--ocean-dark); }

/* Appointment notes: aligned by speaker, with a ruled gutter. */
.dialogue { position: relative; padding: .25rem 0 .25rem 1rem; margin: 0; gap: .75rem; border-left: 2px solid var(--border); }
.dialogue-bubble { max-width: 86%; padding: .8rem 1rem; font-size: 1rem; line-height: 1.65; overflow-wrap: anywhere; border-radius: 3px; box-shadow: none; }
.dialogue-bubble.speaker-a { align-self: flex-start; background: var(--paper-warm); border: 1px solid var(--border); border-left: 3px solid var(--ocean); color: var(--ink); }
.dialogue-bubble.speaker-b { align-self: flex-end; background: var(--gold-light); border: 1px solid var(--border); border-right: 3px solid var(--gold); color: var(--ink); }
.dialogue-bubble strong { color: var(--ocean-dark); font: 600 .875rem var(--font-body); text-transform: none; letter-spacing: 0; margin-bottom: .3rem; }
.dialogue-bubble.speaker-b strong { color: var(--gold-dark); }
.scenario-box, .model-answer { border-radius: 3px; background: var(--paper-2); color: var(--ink); font-size: 1rem; border-color: var(--border); }
.model-answer { border-left: 3px solid var(--gold); }
.row { border-bottom-color: var(--border); font-size: 1rem; }
.row:nth-child(even) { background: var(--paper-2); }
.eng { color: var(--ink-soft); font-size: .875rem; }
.ww-chip { background: var(--gold-light); color: var(--gold-dark); border-color: var(--gold); }
input[type="text"], textarea, select { font-family: var(--font-body); font-size: 1rem; max-width: 100%; border: 1px solid #80859b; color: var(--ink); background: var(--white); border-radius: 3px; }
input[type="text"].inline { width: 9.5rem; }
input[type="text"].narrow { width: 7.5rem; }
input[type="text"].wide { width: 17.5rem; }
input[type="text"]:not(:placeholder-shown):not(:focus) { border-color: #80859b; }
.dialogue-bubble input { min-height: 2.25rem; }
input.input-ok { color: var(--correct); }
input.input-no { color: var(--incorrect); }
:is(button,a,input,textarea,select):focus-visible, input[type="text"]:focus-visible { outline: 3px solid var(--ocean); outline-offset: 3px; }
.btn, .btn-show { min-height: 2.75rem; border-radius: 4px; font: 600 .9375rem var(--font-body); padding: .65rem 1rem; box-shadow: none; }
.btn { background: var(--ocean); color: #fff; }
.btn:hover { background: var(--ocean-dark); transform: none; box-shadow: none; }
.btn:active { transform: none; }
.btn-show { background: var(--white); color: var(--ocean-dark); border: 1px solid var(--ocean); }
.btn-show:hover { background: var(--ocean-light); color: var(--ocean-dark); border-color: var(--ocean-dark); }
.mc-radio label, .mco { min-height: 2.75rem; padding: .8rem 1rem; border: 1px solid var(--border); background: var(--white); border-radius: 4px; font-size: 1rem; }
.mc-radio label:hover, .mco:hover, .mc-radio label:has(input:checked), .mco.sel { background: var(--ocean-light); border-color: var(--ocean); }
.mc-radio input[type="radio"] { accent-color: var(--ocean); }
.mc-radio label.ok, .mc-radio label.ok:has(input:checked), .mco.ok { background: var(--correct-bg); border-color: var(--correct); color: var(--correct); }
.mc-radio label.no, .mc-radio label.no:has(input:checked), .mco.no { background: var(--incorrect-bg); border-color: var(--incorrect); color: var(--incorrect); }
.fb { font-size: .9375rem; border-radius: 4px; }
.fb.ok { color: var(--correct); background: var(--correct-bg); border-color: var(--correct); animation: none; }
.fb.no { color: var(--incorrect); background: var(--incorrect-bg); border-color: var(--incorrect); animation: none; }
.progress-wrap { border: 1px solid var(--border); border-radius: 4px; box-shadow: none; }
.progress-fill { background: var(--ocean); }
.rol-kaart, .pov-situatie, .tb-tekst { background: var(--paper-2); border-color: var(--border); border-radius: 4px; }
button.pov-optie, button.mem-kaart, button.zin-chip, button.cat-chip, button.galg-letter { border-radius: 4px; border-color: var(--border); min-height: 2.75rem; }
@media(max-width:600px) {
  .header { width: calc(100% - 1.4rem); margin-top: .7rem; padding: 1.4rem 1.2rem 1.4rem 2.3rem; }
  .header::before { left: .65rem; width: .6rem; height: 3.6rem; }
  .header::after { left: 1.75rem; }
  .container { padding: 1rem .7rem 3rem; }
  .card { padding: 1rem; }
  .card-head { gap: .65rem; }
  .dialogue { padding-left: .6rem; }
  .dialogue-bubble { max-width: 96%; padding: .7rem .8rem; }
  .vocab-list { grid-template-columns: 1fr; }
  table.schema th, table.schema td { padding: .6rem; }
}
@media(prefers-reduced-motion:reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media print {
  body, .header, .card, .dialogue-bubble.speaker-a, .dialogue-bubble.speaker-b { background: #fff; color: #000; box-shadow: none; }
  .header { margin: 0; width: 100%; border-color: #777; }
  .header::before, .header::after { display: none; }
  .header h1, .header p, .header-tag, .dialogue-bubble strong { color: #000; }
  .dialogue-bubble { break-inside: avoid; }
  .card { break-inside: auto; }
  .card-head { break-after: avoid; }
}