/* ItaQ-platform, zoals het beheerformulier: koel grijs, een donkerblauwe balk met het logo en oranje accent.
   De kleuren alleen via deze namen. */
:root {
  --canvas:#F2F4F7; --s1:#FFFFFF; --s2:#EDF0F4;
  --line:#D9DFE7; --line-strong:#C9D1DC; --line-soft:#E8ECF1;
  --ink:#131C27; --ink-2:#3B4656; --ink-3:#556172; --ink-4:#8A95A4; --hov:rgba(19,28,39,.06);
  --rail:#1F3044; --rail-ink:#F2F5F9; --rail-mut:#A9B7C8;
  --brand:#F26522; --brand-hover:#E2581A; --brand-text:#B8470C; --brand-ink:#131C27; --brand-licht:#FFB184;
  --danger-text:#A8261E; --danger-wash:#F8DDDA;
  --ok-text:#17744A; --ok-wash:#DCF1E6;
  --shadow-surface:0 1px 2px rgba(19,28,39,.06), 0 6px 18px rgba(19,28,39,.06);
  --shadow-rij:0 0 0 1px rgba(19,28,39,.07), 0 1px 2px rgba(19,28,39,.06), 0 2px 8px rgba(19,28,39,.04);
  --r-ctl:12px; --r-panel:16px; --r-card:24px;
  --sans:"Figtree", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --serif:"Archivo", "Segoe UI", Arial, sans-serif;  /* titels en logo */
  color-scheme:light;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
::selection { background:rgba(242,101,34,.25); }
body { margin:0; background:var(--canvas); color:var(--ink); font:15px/1.55 var(--sans); font-variant-numeric:tabular-nums; }
a { color:var(--brand-text); }
:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }

/* Balk bovenin: donkerblauw zoals het menu van het platform, met het logo en wie er is ingelogd */
.topbar { position:sticky; top:0; z-index:10; height:60px; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:0 32px; background:var(--rail); color:var(--rail-ink); box-shadow:0 1px 0 rgba(0,0,0,.08); }
.logo { font:800 23px/1 var(--serif); letter-spacing:-.5px; color:var(--rail-ink); }
.logo .q { color:var(--brand); }
.wie { color:var(--rail-mut); font-size:13px; display:flex; gap:12px; align-items:center; }
.wie button.link { color:var(--brand-licht); }
main { max-width:1440px; margin:0 auto; padding:28px 32px 56px; }
h1 { font:800 34px/40px var(--serif); letter-spacing:-.5px; margin:0 0 24px; }
h2 { font:700 15px/1.4 var(--sans); margin:0 0 6px; }
h3 { font-size:14px; font-weight:600; margin:0 0 6px; }
.hint { color:var(--ink-3); font-size:13px; }
.lijst { margin:0 0 18px; padding-left:20px; }

.card { background:var(--s1); border-radius:var(--r-card); box-shadow:var(--shadow-surface); padding:24px 28px; margin-bottom:20px; }
.card.ok { background:var(--ok-wash); box-shadow:none; }
.card.ok h2 { color:var(--ok-text); }
.card p:last-child { margin-bottom:0; }
/* Meldingen en losse kaarten (inloggen, klaar, eerder, werkgever) staan op leesbreedte */
#inloggen, #niets, #klaar, #eerder, #werkgever, .melding, #laden { max-width:760px; }
.melding { padding:12px 16px; border-radius:var(--r-ctl); margin:0 0 20px; }
.melding.fout { background:var(--danger-wash); color:var(--danger-text); }

/* De contracten die op de werkgever wachten: witte rijen met een zachte schaduw in een grijze bak */
.keuzelijst { list-style:none; margin:12px 0 0; padding:6px; background:var(--s2); border-radius:20px; box-shadow:inset 0 0 0 1px var(--line-soft); }
.keuzelijst li { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 14px; margin:0;
  border-radius:14px; background:var(--s1); box-shadow:var(--shadow-rij); }
.keuzelijst li + li { margin-top:6px; }
.keuzelijst button { flex:none; white-space:nowrap; }

/* Lezen en tekenen: op een breed scherm naast elkaar, het contract zo groot mogelijk */
.contract { display:grid; grid-template-columns:minmax(0, 1fr) 400px; gap:24px; align-items:start; }
.contract .card { margin-bottom:0; }
.lezen .hint { margin-top:0; }
.document { border-radius:var(--r-panel); overflow:hidden; background:#525659; }
.document iframe { display:block; width:100%; height:calc(100vh - 290px); min-height:560px; border:0; }
.tekenen { position:sticky; top:80px; }
.tekenen h3 { margin-top:18px; }
.tekenen > :first-child h3 { margin-top:0; }
.tekenen h3 + .hint { margin-top:0; }
/* Het tekenvak blijft wit (de inkt is donker), met een dunne rand zoals de velden van het platform */
.tekenvak { position:relative; height:220px; border-radius:var(--r-panel); background:#fff; box-shadow:inset 0 0 0 1px var(--line);
  transition:box-shadow .12s; }
.tekenvak:hover { box-shadow:inset 0 0 0 1px var(--line-strong); }
.tekenvak:focus-within { box-shadow:inset 0 0 0 2px var(--brand); }
.tekenvak canvas { display:block; width:100%; height:100%; touch-action:none; cursor:crosshair; border-radius:inherit; }
.tekenvak.paraafvak { height:110px; max-width:220px; }
.tekenlijn { position:absolute; left:24px; right:24px; bottom:48px; border-bottom:1px dashed var(--line-strong); pointer-events:none; }
.check { display:flex; align-items:flex-start; gap:12px; margin:18px 0; cursor:pointer; }
.check input { width:18px; height:18px; margin:2px 0 0; flex:none; accent-color:var(--brand); }

/* Knoppen: rond; de hoofdactie oranje met donkere tekst */
.knop, button { display:inline-flex; align-items:center; justify-content:center; height:40px; padding:0 20px; border-radius:999px;
  border:0; background:var(--brand); color:var(--brand-ink); font:600 14px var(--sans); cursor:pointer; text-decoration:none;
  transition:background-color .12s, transform .12s; }
.knop:hover, button:hover { background:var(--brand-hover); }
button:active { transform:scale(.97); }
button.groot { width:100%; height:48px; font-size:15.5px; }
button:disabled { opacity:.45; cursor:default; transform:none; }
button.link { all:unset; color:var(--brand-text); font-size:13px; text-decoration:underline; cursor:pointer; }
button.link:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.status { font-weight:500; min-height:1.5em; margin:14px 0 0; }

@media (prefers-reduced-motion:reduce) { * { transition:none !important; } button:active { transform:none; } }
/* Smaller scherm (laptop staand, tablet, telefoon): onder elkaar */
@media (max-width:1100px) {
  .contract { grid-template-columns:1fr; }
  .tekenen { position:static; }
  .document iframe { height:75vh; min-height:420px; }
}
@media (max-width:600px) {
  .topbar { padding:0 16px; }
  main { padding:20px 16px 40px; }
  h1 { font-size:28px; line-height:34px; }
  .card { padding:20px; }
  .document iframe { height:65vh; }
  .tekenvak { height:180px; }
  .keuzelijst li { flex-direction:column; align-items:stretch; }
}