/* ══════════════════════════════════════════════════════════════════════════════════════════════════
   Dilot design system — U1.
   Rules and reasoning: docs/DESIGN_RULES.md. Source of truth for values: docs/design/screens/01-stijlgids.
   Blade + vanilla only, no build step.

   READ THIS BEFORE EDITING
   1. Tokens first. A screen must never hardcode a hex that a token already names.
   2. The LEGACY ALIASES block near the top keeps ~30 existing views working while they are migrated
      one batch at a time. Do not delete an alias until no view uses it — check with a grep, not a guess.
   3. Page-local <style> blocks load AFTER this file. That is the debt this system exists to pay off:
      ~900 lines of per-view CSS against 206 lines of shared CSS was the mechanical cause of "every
      screen looks like a different product". New work puts shared things HERE.
   ══════════════════════════════════════════════════════════════════════════════════════════════════ */

/* Instrument Sans + JetBrains Mono, self-hosted (npm @fontsource, latin subset).
   NOT Google's CDN: that sends every visitor's IP to a US service. */
@font-face{font-family:'Instrument Sans';src:url('fonts/instrument-sans-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap;font-style:normal}
@font-face{font-family:'Instrument Sans';src:url('fonts/instrument-sans-latin-500-normal.woff2') format('woff2');font-weight:500 550;font-display:swap;font-style:normal}
@font-face{font-family:'Instrument Sans';src:url('fonts/instrument-sans-latin-600-normal.woff2') format('woff2');font-weight:600 650;font-display:swap;font-style:normal}
@font-face{font-family:'Instrument Sans';src:url('fonts/instrument-sans-latin-700-normal.woff2') format('woff2');font-weight:700 900;font-display:swap;font-style:normal}
@font-face{font-family:'JetBrains Mono';src:url('fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap;font-style:normal}
@font-face{font-family:'JetBrains Mono';src:url('fonts/jetbrains-mono-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap;font-style:normal}

/* Self-hosted, from @fontsource — NOT Google's CDN, which would send every visitor's IP to a US
   service. Latin subset only; 132 KB total. Without these the platform silently fell back to system
   fonts, which is why every screen looked subtly unlike the design. */
@font-face{font-family:'Instrument Sans';src:url('fonts/instrument-sans-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap;font-style:normal}
@font-face{font-family:'Instrument Sans';src:url('fonts/instrument-sans-latin-500-normal.woff2') format('woff2');font-weight:500 550;font-display:swap;font-style:normal}
@font-face{font-family:'Instrument Sans';src:url('fonts/instrument-sans-latin-600-normal.woff2') format('woff2');font-weight:600 650;font-display:swap;font-style:normal}
@font-face{font-family:'Instrument Sans';src:url('fonts/instrument-sans-latin-700-normal.woff2') format('woff2');font-weight:700 900;font-display:swap;font-style:normal}
@font-face{font-family:'JetBrains Mono';src:url('fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap;font-style:normal}
@font-face{font-family:'JetBrains Mono';src:url('fonts/jetbrains-mono-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap;font-style:normal}

:root{
  /* ── Colour, and what each one MEANS (docs/DESIGN_RULES.md §2) ─────────────────────── */
  --blue:#2D5BE3;          /* the action you can take now. One primary per block. Never decorative */
  --blue-deep:#1E43AE;     /* hover/active on blue */
  --blue-soft:#EAF1FE;     /* badges, informative blocks */
  --blue-faint:#F3F7FE;    /* the quietest blue wash */
  --ink:#14171C;           /* headings; dark panels holding numbers; heavy actions */
  --navy:#1B2C4F;          /* the one card that asks for attention first */
  --green:#1E9C67;         /* healthy, live, saved */
  --green-soft:#E7F5EE;
  --amber:#D08B2A;         /* this needs you: conflict, orphan, failed sync */
  --amber-soft:#FEF6E9;
  --red:#C7443C;           /* broken or deleting. Sparingly. Never as an accent */
  --red-soft:#FDECEA;

  /* Text ramp: heading → body → meta → faint */
  --t1:#14171C; --t2:#41454C; --t3:#787E88; --t4:#9096A0; --t-meta:#8E949D;

  /* Lines: card border → row divider → section divider */
  --line-card:#E4E7EC; --line-row:#F1F2F5; --line-sec:#EDEFF2;

  /* Surfaces */
  --surface:#ffffff;       /* what the client manages. The default */
  --surface-head:#F6F7F9;  /* table heads, quiet strips */
  --canvas:#EDEFF4;        /* the shell the white sheet floats in */

  /* ── Size. These are the design's real numbers, not a mathematical scale ──────────── */
  --sp-1:4px; --sp-2:6px; --sp-3:8px; --sp-4:10px; --sp-5:12px;
  --sp-6:14px; --sp-7:18px; --sp-8:20px; --sp-9:26px; --sp-10:32px;

  --r-sheet:18px; --r-card:14px; --r-card-sm:12px; --r-btn:9px; --r-input:10px; --r-pill:999px;

  --sidebar:clamp(280px,19vw,340px);   /* design 226 at ~1620px; grows with the viewport */
  --rail:312px;            /* right-hand column on a ticket */
  --canvas-pad:clamp(8px,0.9vw,18px);  /* margin around the white sheet */
  /* Page padding scales with the viewport rather than sitting at one fixed value. */
  --pad-page:1.8vw 2vw 2.3vw;

  /* ── Type ─────────────────────────────────────────────────────────────────────────── */
  --font:'Instrument Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Responsive type: a couple of px larger on a big screen, never smaller than the design's value. */
  --fs-h1:clamp(30px, 1.6vw + 21px, 38px);
  --fs-h2:clamp(19px, 0.55vw + 15.5px, 23px);
  --fs-h3:clamp(17px, 0.4vw + 14px, 20px);
  --fs-body:clamp(14px, 0.3vw + 13.5px, 15px);
  /* The small end of the scale, named so nothing invents its own 11.5px again.
     NOTHING in Dilot is smaller than --fs-micro. */
  --fs-lead:15px;    /* tabs, section leads — one step above body */
  --fs-body-2:15px;  /* normal text: rows, fields, list items, buttons */
  --fs-meta:14px;    /* breadcrumbs, secondary lines, counts */
  --fs-micro:11.5px;   /* uppercase labels, tags, the genuinely incidental */
  --fs-num:30px;       /* the one big figure on a screen */
  --fs-num-sm:26px;    /* a figure in a row of cards */
  --fs-tag:13px;       /* row tags — Denis's size, fixed on purpose */

  /* ── Elevation. Two only: a hairline for managed things, a lift for clickable things ── */
  --lift:0 1px 2px rgba(20,23,28,.04);
  --lift-2:0 4px 14px rgba(20,23,28,.08);

  /* ══ LEGACY ALIASES — old names, new values ════════════════════════════════════════
     Existing views keep working AND pick up the new palette without being touched.
     Remove an alias only when nothing references it. */
  --accent:var(--blue); --accent-soft:var(--blue-soft); --accent-2:#4F6BD8;
  --bg:var(--canvas); --panel:var(--surface); --line:var(--line-card);
  --text:var(--t1); --muted:var(--t3); --muted2:var(--t4);
  --radius:var(--r-card); --radius-sm:var(--r-input);
}

*{box-sizing:border-box}
/* Every hover in Dilot eases rather than snaps. Platform rule (docs/DESIGN_RULES.md §14) — do not
   add a :hover anywhere without a transition on the properties it changes. */
a,button,.btn,.chip,.card,.card-click,.row-item,.side-link,.kb-r,.kb-src,.kb-q-btn,.tbl tr.link,
.theme-pick button,.modal-x,.logout-btn,.kb-pager .nav a,.side-soon,.kb-split a,.cv-row,.m-x,.ctag,
.kb-src .mini,.kb-web-foot button,.kb-q-btn,.kb-select,.kb-state-btn,.tag,.kb-live,.badge,
.kb-search,input,select,textarea,.empty,.side-link .ic,.kb-src-bot .note{
  transition:background-color .18s ease,background-image .18s ease,border-color .18s ease,
             color .18s ease,box-shadow .18s ease,transform .18s ease}
/* EVERY hover in Dilot eases rather than snaps. Platform-wide rule (docs/DESIGN_RULES.md §6a):
   an interface that changes instantly feels like a document; one that eases feels like an app.
   Only the properties hovers actually touch, so nothing else animates by accident. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:var(--fs-body);color:var(--t1);background:var(--canvas);
     line-height:1.5;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--blue-deep)}

/* ── Type scale ─────────────────────────────────────────────────────────────── */
h1{font-size:clamp(24px,1.85vw,34px);font-weight:700;letter-spacing:-.035em;margin:0 0 4px;color:var(--t1)}
h2{font-size:clamp(16px,1.05vw,19px);font-weight:700;letter-spacing:-.015em;margin:0 0 var(--sp-6);color:var(--t1)}
h3{font-size:clamp(15px,0.95vw,17.5px);font-weight:700;letter-spacing:-.01em;margin:0 0 var(--sp-4);color:var(--t1)}
.t-body{font-size:14.5px;font-weight:550}
.t-meta{font-size:var(--fs-meta);font-weight:600;color:var(--t-meta)}
.t-label{font-size:var(--fs-micro);font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--t4)}
.t-num{font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1.05}
.t-num-sm{font-size:26px;font-weight:700;letter-spacing:-.025em;line-height:1.1}
.mono{font-family:var(--font-mono);font-size:.92em}
.muted{color:var(--t3)}
.muted2{color:var(--t4)}

/* ── Buttons. Width follows the text; fixed width ONLY inside table columns ───
      One primary per block. If two things look primary, neither is.              */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--blue);
     color:#fff;border:none;border-radius:var(--r-btn);padding:11px 18px;font:inherit;font-weight:650;
     font-size:var(--fs-body-2);line-height:1.2;cursor:pointer;transition:background .15s,box-shadow .15s,color .15s}
.btn:hover{background:var(--blue-deep);color:#fff}
.btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.btn[disabled],.btn.is-off{background:#C9CDD4;color:#fff;cursor:not-allowed;box-shadow:none}

.btn-2{background:#fff;color:var(--t1);border:1px solid #D7DBE2}      /* secondary */
.btn-2:hover{background:var(--surface-head);border-color:#C6CCD5;color:var(--t1)}
.btn-ink{background:var(--ink);color:#fff}                             /* heavy: replace, bulk */
.btn-ink:hover{background:#22262E;color:#fff}
.btn-text{background:none;color:var(--blue);padding:6px 2px;font-weight:650}  /* text action */
.btn-text:hover{background:none;color:var(--blue-deep);text-decoration:underline}
.btn-mini{padding:8px 13px;font-size:var(--fs-meta);border-radius:8px}
.btn-danger{background:var(--red)}
.btn-danger:hover{background:#A93A33}
.btn-block{width:100%}
.btn-sm{padding:10px 15px;font-size:var(--fs-body-2)}                             /* legacy, still used */
.btn-ghost{background:#fff;color:var(--t1);border:1px solid #D7DBE2;box-shadow:none}  /* legacy → btn-2 */
.btn-ghost:hover{background:var(--surface-head);box-shadow:none;color:var(--t1)}

/* A destructive action never looks like the primary path: it is a text button or an
   outlined red one, and it sits away from the confirm button. See DESIGN_RULES §6. */
/* From the style guide (01-stijlgids): white, #EDCFCC border, #B3261E text, radius 8. It had no
   radius of its own and inherited none, which is how a square button appeared — Dilot has none. */
.btn-destroy{background:#fff;color:#B3261E;border:1px solid #EDCFCC;padding:8px 14px;
             border-radius:8px;font-weight:650}
.btn-destroy:hover{background:var(--red-soft);color:#A93A33;border-color:#E0B6B1}

.chip{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid #D7DBE2;
      border-radius:var(--r-pill);padding:8px 14px;font-size:var(--fs-body-2);font-weight:600;color:var(--t2);cursor:pointer}
.chip:hover{border-color:var(--blue);color:var(--blue)}
.chip.on{background:var(--blue-soft);border-color:#BFD3FA;color:var(--blue-deep)}

/* ── Surfaces. Four kinds, and each says something (DESIGN_RULES §4) ─────────── */
.card{background:var(--surface);border:1px solid var(--line-card);border-radius:var(--r-card);
      padding:clamp(16px,1.25vw,26px);box-shadow:var(--lift)}
.card-click{box-shadow:var(--lift-2);border-color:transparent;cursor:pointer;transition:transform .12s,box-shadow .12s}
.card-click:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(20,23,28,.10)}
.card-ink{background:var(--ink);border:none;border-radius:var(--r-card);padding:var(--sp-8);color:#fff}
.card-ink .t-meta,.card-ink .muted{color:#9BA3AF}
.card-navy{background:var(--navy);border:none;border-radius:var(--r-card);padding:var(--sp-8);color:#fff}
.card-navy .t-meta,.card-navy .muted{color:#A9B6CE}
.tint-grey{background:var(--surface-head);border:1px solid var(--line-sec);border-radius:var(--r-card-sm);padding:var(--sp-7)}
.tint-green{background:var(--green-soft);border:1px solid #C6E7D6;border-radius:var(--r-card-sm);padding:var(--sp-7)}
.tint-amber{background:var(--amber-soft);border:1px solid #F2DDB4;border-radius:var(--r-card-sm);padding:var(--sp-7)}
.tint-red{background:var(--red-soft);border:1px solid #F3CBC5;border-radius:var(--r-card-sm);padding:var(--sp-7)}
.tint-blue{background:var(--blue-faint);border:1px solid #D9E5FC;border-radius:var(--r-card-sm);padding:var(--sp-7)}
.dotted{border:1px dashed #D2D7DF;border-radius:var(--r-card-sm);padding:var(--sp-7);color:var(--t3)}
.grad-blue{background:linear-gradient(93deg,#F3F7FE,#EAF1FE);border:1px solid #D9E5FC;
           border-left:3px solid var(--blue);border-radius:var(--r-card-sm);padding:var(--sp-7)}

/* Legacy: .panel was the only surface there was. Maps to a card. */
.panel{background:var(--surface);border:1px solid var(--line-card);border-radius:var(--r-card);
       padding:clamp(18px,1.5vw,32px);box-shadow:var(--lift);margin-bottom:var(--sp-6)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--sp-6);margin-bottom:var(--sp-8)}

/* ── Lists. Long lists are grouped ROWS with dividers, never one card per row ── */
.rows{background:var(--surface);border:1px solid var(--line-card);border-radius:var(--r-card);overflow:hidden}
.row-item{display:flex;align-items:center;gap:var(--sp-5);padding:var(--sp-5) var(--sp-7);
          border-bottom:1px solid var(--line-row);color:var(--t1);text-decoration:none}
.row-item:last-child{border-bottom:none}
.row-item{border-left:3px solid transparent}
.row-item:hover{border-left-color:var(--blue);color:var(--t1);
      background-image:linear-gradient(90deg,var(--blue-soft),#fff 62%)}
.row-item.needs{background:linear-gradient(90deg,var(--amber-soft),#fff 60%)}
.group-head{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-6) var(--sp-7) var(--sp-3);
            background:var(--surface-head);border-bottom:1px solid var(--line-row);
            font-size:12.5px;font-weight:700;color:var(--t2)}
.group-head .n{color:var(--t4);font-weight:600}

.tbl{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line-card);
     border-radius:var(--r-card);overflow:hidden}
.tbl th,.tbl td{text-align:left;padding:var(--sp-6) var(--sp-7);border-bottom:1px solid var(--line-row);font-size:var(--fs-body-2)}
.tbl th{background:var(--surface-head);font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.09em;
        font-weight:700;color:var(--t4)}
.tbl tr:last-child td{border-bottom:none}
.tbl tr.link:hover{background:var(--blue-faint);cursor:pointer}

/* ── Status. Colour carries the meaning; the label repeats it in words ───────── */
.badge{display:inline-block;font-size:var(--fs-micro);padding:4px 11px;border-radius:var(--r-pill);font-weight:650}
.badge.ok,.badge.active{background:var(--green-soft);color:#12744B}
.badge.warn{background:var(--amber-soft);color:#8A5A00}
.badge.bad,.badge.suspended{background:var(--red-soft);color:#9E332B}
.badge.info{background:var(--blue-soft);color:var(--blue-deep)}
.badge.off{background:var(--line-row);color:var(--t3)}
.tag{display:inline-block;padding:4px 11px;border-radius:var(--r-pill);font-size:var(--fs-micro);
     font-weight:600;line-height:1.35;white-space:nowrap}
/* Category colours are the training bot's own dot colours (.tc-prop-dot) — kennis, instructie,
   toon, instelling. One concept, one colour, everywhere. */
.tag.t-kennis{background:#E8EFFC;color:#1a56db}
.tag.t-website{background:#EDF0F4;color:#5b6472}
.tag.t-instructie{background:#E2F4EF;color:#0f8a72}
.tag.t-toon{background:#F0EAFB;color:#6d28d9}
.tag.t-instelling{background:#EDF0F4;color:#5b6472}
.tag.t-vraag{background:#FBF2DC;color:#8a6200}
.tag.t-plain{background:var(--surface-head);color:var(--t3);border:0}
.tag.t-warn{background:#FDF3E2;color:#A96B12}
.tag.t-ok{background:var(--green-soft);color:#12744B}
.tag.t-bad{background:var(--red-soft);color:#9E332B}
.pill{display:inline-block;padding:3px 10px;border-radius:var(--r-pill);background:var(--blue-soft);
      color:var(--blue-deep);font-size:var(--fs-micro);font-weight:650}
.dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto;display:inline-block}
.dot.ok{background:var(--green)} .dot.warn{background:var(--amber)}
.dot.bad{background:var(--red)}  .dot.idle{background:var(--t4)}

/* ── Notices ────────────────────────────────────────────────────────────────── */
.notice{border:1px solid var(--line-card);border-radius:var(--r-card-sm);padding:var(--sp-6) var(--sp-8);
        font-size:14px;margin-bottom:var(--sp-7)}
.notice-ok{background:var(--green-soft);color:#12744B;border-color:#C6E7D6}
.notice-error,.notice-err{background:var(--red-soft);color:#9E332B;border-color:#F3CBC5}
.notice-warn{background:var(--amber-soft);color:#8A5A00;border-color:#F2DDB4}
.error{background:var(--red-soft);color:#9E332B;border:1px solid #F3CBC5;border-radius:var(--r-input);
       padding:11px 13px;font-size:13.5px;line-height:1.45;margin-bottom:var(--sp-6);
       word-break:normal;overflow-wrap:anywhere}

/* ── Forms. Label above, field below, help under the field (DESIGN_RULES §5) ── */
.field{margin-bottom:var(--sp-7)}
.field label{display:block;font-size:var(--fs-body-2);font-weight:650;margin-bottom:6px;color:var(--t1)}
.field input,.field select,.field textarea{width:100%;border:1px solid #D7DBE2;border-radius:var(--r-input);
       padding:11px 13px;font:inherit;font-size:var(--fs-body-2);outline:none;background:#fff;
       transition:border-color .15s,box-shadow .15s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);
       box-shadow:0 0 0 3px var(--blue-soft)}
.field textarea{min-height:90px;resize:vertical}
.field .help{display:block;font-size:var(--fs-meta);color:var(--t3);margin-top:5px}
.field-row{display:flex;gap:var(--sp-6);flex-wrap:wrap}
.field-row > .field{flex:1;min-width:180px}
.row-between{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-4)}

/* On/off switch. Denis's default over a checkbox everywhere except genuine multi-choice. */
.sw{display:flex;align-items:flex-start;gap:var(--sp-5);margin-bottom:var(--sp-6);cursor:pointer}
.sw input{position:absolute;opacity:0;width:0;height:0}
.sw .track{flex:0 0 auto;width:40px;height:23px;margin-top:1px;border-radius:var(--r-pill);
           background:#CBD2DD;position:relative;transition:background .15s}
.sw .track::after{content:"";position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;
           background:#fff;box-shadow:0 1px 2px rgba(20,23,28,.22);transition:transform .15s}
.sw input:checked + .track{background:var(--blue)}
.sw input:checked + .track::after{transform:translateX(17px)}
.sw input:disabled + .track{background:#E1E5EA}
.sw input:focus-visible + .track{outline:2px solid var(--blue);outline-offset:2px}
.sw .lbl{font-weight:650}
.sw .lbl + .hint{display:block;font-size:13px;color:var(--t3);font-weight:400}

/* Checkbox: kept for real multi-select, and for the login "remember me". */
.checkbox{display:flex;align-items:center;gap:var(--sp-3);font-size:14px;color:var(--t3);cursor:pointer}
.checkbox input[type=checkbox]{appearance:none;-webkit-appearance:none;width:20px;height:20px;margin:0;
       border:1.5px solid #CBD2DD;border-radius:6px;background:#fff;cursor:pointer;position:relative;
       flex:0 0 auto;transition:background .15s,border-color .15s}
.checkbox input[type=checkbox]:hover{border-color:var(--blue)}
.checkbox input[type=checkbox]:checked{background:var(--blue);border-color:var(--blue)}
.checkbox input[type=checkbox]:checked::after{content:"";position:absolute;left:6px;top:2px;width:5px;
       height:10px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.checkbox input[type=checkbox]:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* ── Empty states. Every screen that can be empty has one (partials/empty-state) ── */
.empty{border:1px dashed #D2D7DF;border-radius:var(--r-card);padding:var(--sp-10) var(--sp-9);
       text-align:center;background:#fff}
.empty h3{margin:0 0 6px;font-size:15.5px}
.empty p{margin:0 auto var(--sp-7);max-width:44ch;font-size:13.5px;color:var(--t3);line-height:1.55}
.empty p:last-child{margin-bottom:0}

/* ══ App shell ═══════════════════════════════════════════════════════════════════════
   Lifted from docs/design/screens/11-ca-inbox.html. The shape that matters and that an
   earlier version of this file got wrong:

   - The sidebar is TRANSPARENT and has no border. It is a rail sitting on the canvas,
     not a white panel. Making it white removes the whole point of the floating sheet.
   - The ACTIVE item is a white raised pill (#fff + a soft shadow), not a blue tint. Only
     its ICON turns blue.
   - Group labels carry a hairline that fills the rest of the row.
   - Our own logo is small and at 34% opacity; the CLIENT's logo is the larger one. Their
     workspace, not ours.

   Positioning note: the design mock is a static frame, so its sidebar is a flex child.
   Here it is fixed, because a real page scrolls and the nav has to stay put. That is the
   one intentional difference.
   ══════════════════════════════════════════════════════════════════════════════════════ */
.shell{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar);position:fixed;top:0;bottom:0;left:0;z-index:20;
         padding:8px 6px 6px;display:flex;flex-direction:column;background:transparent}

/* Top: our mark, quiet, then a hairline, then the client's own logo. */
.side-top{padding:2px 10px 18px}
.side-top .dilot{display:block;height:15px;width:auto;opacity:.34}
.side-top .rule{display:block;height:1px;background:#DCDFE5;margin:11px 0 12px}
.side-top .client{display:block;height:26px;width:auto}
.side-top .client-txt{display:block;font:700 15px var(--font);letter-spacing:-.02em;color:var(--t2)}

/* overflow-x:hidden is deliberate. With only overflow-y set, the x-axis computes to auto, so a
   single pixel of overflow anywhere in the nav produces the horizontal scrollbar Denis screenshotted.
   The cause is fixed below (labels shrink, badges do not) — this is the guard so it cannot come back. */
.side-nav{flex:1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:2px;padding:0 12px}

/* Label + a hairline filling the row. The line is a pseudo-element so the markup stays text. */
.side-group{display:flex;align-items:center;gap:10px;padding:16px 11px 6px;
            font:700 var(--fs-micro) var(--font);letter-spacing:.1em;text-transform:uppercase;
            color:var(--t4);white-space:nowrap}
.side-group::after{content:"";flex:1;height:1px;background:#DCDFE5}

.side-link{display:flex;align-items:center;gap:12px;padding:9px 11px;border-radius:9px;
           color:var(--t2);font:600 15px var(--font);line-height:1.25;transition:background .12s}
.side-link .ic{width:18px;height:18px;flex:0 0 auto;display:inline-flex;align-items:center;
               justify-content:center;color:var(--t-meta)}
.side-link .ic .ic-svg{width:18px;height:18px}
.side-link:hover{background:rgba(255,255,255,.66);color:var(--t1)}
.side-link.active{background:#fff;color:var(--t1);font-weight:700;padding:12px 14px}
.side-link.active .ic{color:var(--blue)}

.side-link .lbl,.side-soon .lbl{min-width:0;flex:1 1 auto;overflow-wrap:anywhere}
.side-link .n{margin-left:auto;flex:0 0 auto;font:700 12px var(--font);padding:2px 8px;border-radius:var(--r-pill)}
.side-link .n.hot{background:var(--blue);color:#fff}                    /* waiting on you */
.side-link .n.calm{background:var(--blue-soft);color:var(--blue-deep)}   /* open, not urgent */
.side-dot{margin-left:auto;width:7px;height:7px;border-radius:50%;background:var(--red);flex:0 0 auto}

/* A page that is not built yet: visible, disabled, honest. Not in the design — the design
   only shows finished screens — so it is styled to recede rather than to compete. */
/* flex-wrap so a two-word label pushes the tag onto its own line instead of overflowing. */
.side-soon{display:flex;align-items:center;gap:6px 12px;padding:9px 11px;font:600 14.5px var(--font);
           color:#AEB4BE;cursor:default;flex-wrap:wrap}
.side-soon .ic{width:18px;height:18px;flex:0 0 auto;display:inline-flex;align-items:center;
               justify-content:center;color:#C2C7CF}
.side-soon .ic .ic-svg{width:18px;height:18px}
.side-soon .tag{margin-left:auto;flex:0 0 auto;font:700 12px var(--font);text-transform:none;
           letter-spacing:.01em;background:#E4E7EC;color:var(--t4);border-radius:var(--r-pill);padding:3px 9px}

.side-sub{margin:2px 0 2px 30px;padding-left:12px;border-left:1px solid #DCDFE5;
          display:flex;flex-direction:column;gap:2px}
.side-sub .side-link{font-size:13.5px;padding:7px 10px}

/* Set-once entries sit at the foot of the rail, pushed down rather than fenced off by a
   divider — the design uses margin-top:auto and no line. */
.side-bottom{margin-top:auto;display:flex;flex-direction:column;gap:2px;padding-top:16px}

/* Bottom: theme, then who you are. */
.side-tail{padding:14px 10px 4px}
.theme-pick{display:flex;align-items:center;gap:2px;background:#E4E7EC;border-radius:8px;padding:2px;
            width:fit-content;margin-bottom:14px}
.theme-pick button{width:26px;height:24px;border-radius:6px;border:none;background:none;cursor:pointer;
            display:flex;align-items:center;justify-content:center;color:var(--t-meta);padding:0}
.theme-pick button:hover{color:var(--t2)}
.theme-pick button.on{background:#fff;box-shadow:0 1px 2px rgba(20,23,28,.14);color:var(--t2)}
.theme-pick svg{width:13px;height:13px}

.side-who{display:flex;align-items:center;gap:10px}
.avatar{width:30px;height:30px;border-radius:9px;background:var(--blue);color:#fff;display:flex;
        align-items:center;justify-content:center;font:700 12.5px var(--font);flex:0 0 auto}
.side-who .who{min-width:0}
.side-who .who b{display:block;font:650 13.5px var(--font);color:var(--t1);white-space:nowrap;
        overflow:hidden;text-overflow:ellipsis}
.side-who .who span{display:block;font-size:12px;color:var(--t-meta);white-space:nowrap;
        overflow:hidden;text-overflow:ellipsis}
.logout-btn{margin-left:auto;background:none;border:none;color:var(--t4);cursor:pointer;display:flex;
        padding:6px;border-radius:8px}
.logout-btn:hover{color:var(--red);background:var(--red-soft)}

/* Superadmin wears its own label so you always know which side you are on. */
.side-role{display:inline-block;margin:0 10px 14px;background:var(--ink);color:#fff;
           font:700 12px var(--font);letter-spacing:.09em;text-transform:uppercase;
           padding:4px 9px;border-radius:6px}

/* ── Dark: the SIDEBAR only. The work sheet stays light (design 20). ──────────── */
html[data-theme="dark"] body{background:var(--ink)}
html[data-theme="dark"] .side-top .rule{background:#2A3038}
html[data-theme="dark"] .side-top .dilot{filter:invert(1);opacity:.42}
html[data-theme="dark"] .side-top .client{filter:invert(1) brightness(1.7)}
html[data-theme="dark"] .side-top .client-txt{color:#C9CED7}
html[data-theme="dark"] .side-group{color:#767D89}
html[data-theme="dark"] .side-group::after{background:#2A3038}
html[data-theme="dark"] .side-link{color:#C9CED7}
html[data-theme="dark"] .side-link .ic{color:#767D89}
html[data-theme="dark"] .side-link:hover{background:#1E232B;color:#fff}
html[data-theme="dark"] .side-link.active{background:#262C35;box-shadow:none;color:#fff}
html[data-theme="dark"] .side-link.active .ic{color:#7FA3FF}
html[data-theme="dark"] .side-soon{color:#5F6672}
html[data-theme="dark"] .side-soon .ic{color:#4A505A}
html[data-theme="dark"] .side-soon .tag{background:#1E232B;color:#6B7280}
html[data-theme="dark"] .side-sub{border-left-color:#2A3038}
html[data-theme="dark"] .theme-pick{background:#1E232B}
html[data-theme="dark"] .theme-pick button.on{background:#2C333E;box-shadow:none;color:#fff}
html[data-theme="dark"] .side-who .who b{color:#fff}
html[data-theme="dark"] .side-who .who span{color:#8A919C}
html[data-theme="dark"] .side-role{background:#fff;color:var(--ink)}

/* ── Main column: one white sheet, floating. ──────────────────────────────────── */
.main{margin-left:var(--sidebar);flex:1;min-width:0;display:flex;flex-direction:column;
      padding:8px 8px 8px 0}
/* The design has no top bar — each page owns its title inside the sheet. This strip is
   TRANSITIONAL: unmigrated views still supply @section('heading') and would otherwise
   render untitled. As each screen is rebuilt it drops that and puts a real h1 in the
   sheet; when the last one has, delete this. */
.topbar{display:flex;align-items:center;gap:10px;padding:4px 18px 8px;min-height:30px}
.topbar strong{font:600 13px var(--font);color:var(--t-meta);letter-spacing:.01em}
.content{flex:1;background:var(--surface);border-radius:var(--r-sheet);
         box-shadow:0 4px 24px rgba(20,23,28,.06);padding:var(--pad-page);
         max-width:2180px;min-width:0}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
           flex-wrap:wrap;margin-bottom:var(--sp-9)}
.page-head .muted{font-size:14px;color:#5C616A;margin-top:3px}
.crumb{font-size:12.5px;font-weight:600;color:var(--t4);margin-bottom:var(--sp-2)}
.crumb a{color:var(--t3)}
.crumb a:hover{color:var(--blue)}

/* ── Modal. A detail view is a modal over the list, not a second page (design 02a-3). ── */
/* z-index above the sidebar (20) and its drawer (30): at 50 the scrim covered them, but a
   transitioning sidebar item could still paint through during the close. isolation + its own
   stacking context stops that. */
.modal-back{position:fixed;inset:0;background:rgba(13,18,28,.42);z-index:120;isolation:isolate;
            display:flex;align-items:flex-start;justify-content:center;padding:2vh var(--sp-6);
            overflow:auto;-webkit-backdrop-filter:saturate(115%) blur(1px);backdrop-filter:saturate(115%) blur(1px)}
.modal-back > *{position:relative;z-index:1}
/* Fade the CONTENT while a swap runs, never the region itself: opacity on the region creates a
   stacking context, which drops any modal inside it below the fixed sidebar — that is what made
   sidebar pills and dividers flash through the scrim on close. */
[data-live].is-loading > *:not(.modal-back){opacity:.55;transition:opacity .12s ease}
/* overflow:HIDDEN, not auto. With auto the panel scrolls as one block, so a flex child inside it
   never receives a bounded height and cannot scroll on its own — which is why the transcript did not.
   The body is the only scrolling element. docs/UI_PATTERNS.md §2. */
.modal{background:#fff;border-radius:14px;width:100%;max-width:720px;max-height:96vh;
       display:flex;flex-direction:column;overflow:hidden;box-shadow:0 26px 64px rgba(13,18,28,.24)}
.modal-head{display:flex;align-items:flex-start;gap:var(--sp-6);justify-content:space-between;
            padding:var(--sp-8) var(--sp-9) var(--sp-6);border-bottom:1px solid var(--line-row)}
.modal-body{padding:var(--sp-8) var(--sp-9)}
.modal-foot{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-6) var(--sp-9) var(--sp-8);
            border-top:1px solid var(--line-row);flex-wrap:wrap}
.modal-x{background:none;border:none;cursor:pointer;color:var(--t4);font-size:20px;line-height:1;padding:4px}
.modal-x:hover{color:var(--t1)}

/* ── Auth ───────────────────────────────────────────────────────────────────── */
.auth-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px}
.auth-card{background:#fff;border:1px solid var(--line-card);border-radius:16px;width:100%;max-width:400px;
           padding:34px;box-shadow:0 10px 40px rgba(20,23,28,.07)}
.auth-logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:23px;letter-spacing:-.04em;margin-bottom:5px}
.auth-sub{color:var(--t3);margin-bottom:24px}
.auth-lang{margin-top:20px;display:inline-flex;gap:2px;padding:3px;background:var(--surface-head);border-radius:var(--r-pill)}
.auth-lang a{font-size:12px;font-weight:650;letter-spacing:.02em;color:var(--t4);padding:5px 14px;
             border-radius:var(--r-pill);transition:background .15s,color .15s}
.auth-lang a:hover{color:var(--t1)}
.auth-lang a.is-active{background:#fff;color:var(--t1);box-shadow:0 1px 3px rgba(20,23,28,.12)}
.small-link{font-size:14px}

.nav-backdrop{display:none}
.nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;background:none;
            border:none;cursor:pointer;padding:0;margin:0 4px 0 -8px;color:var(--t1)}
.nav-toggle svg{width:24px;height:24px;display:block}

/* ══ Mobile ═════════════════════════════════════════════════════════════════════════
   Half of all use is a phone, mostly the Contact Assistant. Tap targets 44–48 px. */
@media (max-width:820px){
  /* The drawer needs its own surface — the desktop rail is transparent. */
  .sidebar{width:min(84vw,300px);transform:translateX(-100%);transition:transform .22s ease;z-index:30;
           background:var(--canvas);padding:10px 8px env(safe-area-inset-bottom)}
  .sidebar.open{transform:none;box-shadow:0 0 40px rgba(0,0,0,.22)}
  html[data-theme="dark"] .sidebar{background:var(--ink)}
  .main{margin-left:0;padding:0}
  .topbar{padding:8px 12px;min-height:44px}
  .topbar strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nav-toggle{display:inline-flex}
  .content{padding:var(--sp-7) var(--sp-6) 26px;border-radius:var(--r-card);box-shadow:none;
           margin:0 6px 6px}
  .side-link,.side-soon{padding:12px 11px}
  h1{font-size:23px}
  h2{font-size:16px}
  .panel{padding:var(--sp-7);border-radius:var(--r-card-sm)}
  .page-head{margin-bottom:var(--sp-7)}
  .page-head .muted{font-size:13.5px}
  .btn{padding:12px 17px}
  .cards{grid-template-columns:1fr 1fr;gap:var(--sp-4)}
  .card{padding:var(--sp-7)}
  .auth-card{padding:24px 20px}

  .nav-backdrop{display:block;position:fixed;inset:0;background:rgba(15,20,35,.4);opacity:0;
                pointer-events:none;transition:opacity .22s ease;z-index:25}
  body.nav-open .nav-backdrop{opacity:1;pointer-events:auto}
  body.nav-open{overflow:hidden}

  /* iOS zooms into any focused control under 16px. */
  input,select,textarea,.field input,.field select,.field textarea{font-size:16px}

  /* Tables scroll sideways inside their own box instead of widening the page. */
  .tbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  .tbl th,.tbl td{padding:12px 13px;white-space:nowrap}

  .modal-back{padding:8px}
  .modal{max-width:100%}
}
@media (max-width:440px){ .cards{grid-template-columns:1fr} }

/* ── Gesprekken + Doorgestuurde chats (10 / 22) — values from the markup ────── */
/* ── THE page header shell. docs/UI_PATTERNS.md §1. Title + tools only; the divider is this
      block's own border-bottom. Cards, tabs and filters go in .pg-body BELOW it — putting them in
      here pushes the rule down the page, which reads as a missing divider. ── */
.pg-head,.cv-head,.kb-head,.pr-head{padding:1.6vw 1.8vw 1.6vw;border-bottom:1px solid var(--line-sec)}
.pg-head-row,.cv-head-row,.pr-head-row,.kb-head{display:flex;align-items:flex-end;justify-content:space-between;
        gap:24px;flex-wrap:wrap}
.pg-head h1,.cv-head h1,.kb-head h1,.pr-head h1{margin:0;font-size:var(--fs-h1);font-weight:700;
        letter-spacing:-.035em}
.pg-sub,.cv-head-sub,.kb-head-sub,.pr-sub{font-size:var(--fs-lead);color:#5C616A;margin-top:6px;max-width:70ch}
.pg-body,.cv-top{padding:1.4vw 1.8vw 0}
.cv-updated{font-size:var(--fs-meta);color:var(--t-meta);font-weight:600}
/* Header and body are separated by a rule, on BOTH screens. */

.cv-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cv-search{display:inline-flex;align-items:center;gap:9px;background:#F4F5F7;border-radius:9px;
           padding:0 13px;height:38px;width:220px}
.cv-search input{flex:1;min-width:0;border:0;outline:0;background:none;font-family:var(--font);
           font-weight:400;font-size:var(--fs-body-2);color:var(--t1)}
.cv-search svg{width:17px;height:17px;flex:0 0 auto}
.cv-range{display:inline-flex;gap:2px;background:var(--surface-head);border-radius:9px;padding:3px}
.cv-range a{padding:8px 14px;border-radius:7px;font:650 var(--fs-body-2) var(--font);color:var(--t3)}
.cv-range a:hover{color:var(--t1)}
.cv-range a.on{background:#fff;color:var(--t1);box-shadow:0 1px 3px rgba(20,23,28,.12)}

.cv-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.cv-kpi{background:#F7F8FA;border:1px solid var(--line-card);border-radius:13px;padding:13px 15px}
.cv-kpi .k{display:flex;align-items:center;gap:6px;font-size:var(--fs-meta);font-weight:650;color:#5C616A}
.cv-kpi .i{width:15px;height:15px;border-radius:50%;border:1px solid #D5D8DE;display:inline-flex;
           align-items:center;justify-content:center;font:700 var(--fs-micro) var(--font);color:var(--t4);cursor:help}
.cv-kpi .n{font-size:var(--fs-num-sm);font-weight:700;letter-spacing:-.03em;color:var(--t1);line-height:1;margin-top:9px}
.cv-kpi .s{font-size:var(--fs-meta);color:var(--t-meta);font-weight:600;margin-top:5px}
.cv-kpi.is-amber .n{color:#A96B12}
/* Gesprekken: bigger figure, and the meta sits BESIDE it on the baseline — not underneath. */
.cv-kpis.is-big .cv-kpi{background:#fff}
.cv-kpis.is-big .cv-kpi.is-dark{background:var(--ink);border-color:var(--ink)}
.cv-kpis.is-big .cv-num{display:flex;align-items:baseline;gap:7px;margin-top:8px}
.cv-kpis.is-big .cv-num .n{font-size:var(--fs-num);margin-top:0}
.cv-kpis.is-big .cv-num .s{margin-top:0}
.cv-kpi.is-dark .k,.cv-kpi.is-dark .s{color:#8A919C}
.cv-kpi.is-dark .n{color:#fff}
.cv-kpi.is-dark .i{border-color:#3A414C;color:#8A919C}
.cv-note{display:flex;align-items:flex-start;gap:7px;font-size:var(--fs-meta);color:var(--t-meta);
         font-weight:600;line-height:1.5;margin:14px 0 0}
.cv-note b{color:var(--t1)}

.cv-tabs{display:flex;align-items:center;gap:22px;margin-top:20px;border-bottom:1px solid var(--line-sec)}
.cv-tabs a{padding:0 3px 13px;font:600 var(--fs-lead) var(--font);color:var(--t3);border-bottom:2px solid transparent}
.cv-tabs a.on{border-bottom-color:var(--ink);color:var(--t1);font-weight:700}
.cv-tabs .n{font:700 var(--fs-meta) var(--font);color:#A8AEB8;margin-left:6px}

.cv-body{padding:0 0 26px}
.cv-thead,.cv-row{display:grid;grid-template-columns:118px minmax(0,1fr) 168px 84px;gap:14px;align-items:center}
.cv-thead{padding:11px 26px;font:700 var(--fs-micro) var(--font);letter-spacing:.09em;text-transform:uppercase;color:var(--t4)}
/* Full-width day band, exactly as drawn. */
.cv-day{padding:9px 26px;background:#F7F8FA;border-top:1px solid var(--line-sec);
        border-bottom:1px solid var(--line-sec);font:700 var(--fs-meta) var(--font);color:#5C616A}
/* The platform row treatment: 3px transparent left border reserved so nothing shifts, blue edge and
   the blue→white gradient on hover, eased. Same as .kb-r and .row-item. */
.cv-row{padding:13px 26px;border-top:1px solid var(--line-row);color:var(--t1);
        border-left:3px solid transparent;margin-left:-3px}
.cv-row:hover{border-left-color:var(--blue);
              background-image:linear-gradient(90deg,var(--blue-soft),transparent 72%)}
.cv-when .d{display:block;font-size:var(--fs-body-2);font-weight:650}
.cv-when .a{display:block;font-size:var(--fs-meta);color:var(--t4);font-weight:400;margin-top:2px}
.cv-sum{min-width:0}
.cv-sum .t{display:block;font-size:var(--fs-body-2);color:#22262C;font-weight:550;line-height:1.4}
.cv-sum .tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
.cv-sum .who{display:block;font-size:var(--fs-meta);color:var(--t4);font-weight:600;margin-top:4px}
.cv-open{justify-self:end;font-size:var(--fs-meta);color:var(--t-meta);font-weight:600;white-space:nowrap}
.cv-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 26px 26px;flex-wrap:wrap}
.cv-foot .l{font-size:var(--fs-meta);color:var(--t-meta);font-weight:600}
.cv-foot .l a{color:var(--blue);font-weight:700}
.cv-foot .r{font-size:var(--fs-meta);color:var(--t-meta);font-weight:600}
.cv-foot .r b{color:var(--t1)}
.cv-foot .r a{color:var(--blue);font-weight:700}
.cv-pager{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 26px 26px;
          font-size:var(--fs-meta);color:var(--t-meta);font-weight:600}
.cv-pager .nav{display:flex;gap:6px}
.cv-pager .nav a,.cv-pager .nav span{display:inline-flex;align-items:center;justify-content:center;
          min-width:32px;height:32px;padding:0 10px;border:1px solid #D7DBE2;border-radius:8px;
          color:var(--t2);font-size:var(--fs-body-2)}
.cv-pager .nav a:hover{border-color:var(--blue);color:var(--blue)}
.cv-pager .nav span{color:#C6CAD1;border-color:#EDEFF2}
/* Row tags: the design's own sizes. */
/* 13px / 4px 9px is Denis's explicit size for row tags — kept as a token so it is a decision,
   not a literal someone re-rounds later. */
.ctag{display:inline-flex;align-items:center;gap:6px;font:650 var(--fs-tag) var(--font);padding:4px 9px;border-radius:6px}
.ctag .d{width:6px;height:6px;border-radius:50%;background:currentColor}
.ctag.grey{background:#F2F3F6;color:#5C616A}
.ctag.blue{background:var(--blue-soft);color:var(--blue-deep)}
.ctag.green{background:#EAF6F3;color:#0E6B57}
.ctag.amber{background:var(--amber-soft);color:#8A5A00}
.ctag.red{background:#FDECEA;color:#A93A31}

/* ── Conversation modal (10) — values ported from the reference ─────────────── */
.cv-modal{width:740px;max-width:100%;max-height:96vh;border-radius:18px;
          box-shadow:0 30px 80px rgba(13,18,28,.35);display:flex;flex-direction:column;
          overflow:hidden;padding:0}
.cvm-head{flex:0 0 auto;padding:20px 24px 16px;border-bottom:1px solid var(--line-sec);display:flex;
          align-items:flex-start;justify-content:space-between;gap:16px}
.cvm-head h2{margin:0;font-size:var(--fs-h2);font-weight:700;letter-spacing:-.025em;color:var(--t1)}
.cvm-head .tags{display:flex;align-items:center;gap:8px;margin-top:7px;flex-wrap:wrap}
.cvm-head .lang{font-size:12.5px;color:var(--t4);font-weight:600}
.cvm-head .acts{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.cvm-translate{background:#fff;border:1px solid #D5D8DE;color:var(--t1);font:650 var(--fs-meta) var(--font);
          padding:8px 13px;border-radius:8px;cursor:pointer}
.cvm-translate:hover{border-color:var(--blue);color:var(--blue)}
.cvm-sum{flex:0 0 auto;padding:14px 24px 12px;background:#181818;border-bottom:1px solid var(--line-sec)}
.cvm-sum .lbl{font:700 var(--fs-micro) var(--font);color:#9e9e9e;margin-bottom:6px}
.cvm-sum .txt{font-size:var(--fs-body-2);line-height:1.55;color:#fff}
/* Default for every screen that shows this modal. Gesprekken overrides it below — Denis asked for
   the tighter block THERE only, so it is scoped by the page rather than changed for everyone. */
.cvm-who{flex:0 0 auto;padding:16px 24px 14px;border-bottom:1px solid var(--line-sec)}
#cvList .cvm-who{padding:2px 24px 8px}
.cvm-who .top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:2px}
.cvm-who .id{display:flex;align-items:center;gap:11px;min-width:0}
.cvm-who .av{width:34px;height:34px;flex:0 0 auto;border-radius:11px;background:#EDEFF2;color:var(--t2);
          display:flex;align-items:center;justify-content:center;font:700 13px var(--font)}
.cvm-who .nm{display:block;font:700 var(--fs-body-2) var(--font);color:var(--t1)}
.cvm-who .sub{display:block;font-size:var(--fs-meta);color:var(--t-meta);font-weight:600}
.cvm-who .grid{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;margin-top:8px}
.cvm-who .f{display:flex;justify-content:space-between;gap:12px;padding:7px 0;
          border-top:1px solid #EEF0F3;font-size:var(--fs-meta);color:#5C616A;font-weight:550}
/* The first row of EACH column has no rule above it — with two columns that is rows 1 and 2. */
.cvm-who .grid .f:nth-child(1),.cvm-who .grid .f:nth-child(2){border-top:0}
.cvm-who .f b{color:var(--t1);font-weight:700;text-align:right}
.cvm-who .f b.warn{color:#A96B12}
.cvm-form{display:flex;align-items:center;gap:7px;margin-top:5px;font-size:12px;color:#5C4BC0;font-weight:650}
.cvm-foot{flex:0 0 auto;border-top:1px solid var(--line-sec);padding:14px 24px;display:flex;align-items:center;gap:9px}
.cvm-foot .t{flex:1;font-size:13px;color:var(--t-meta);font-weight:600}
/* min-height:0 is load-bearing: without it a flex child refuses to shrink below its
   content and the transcript simply does not scroll. */
/* .cv-body wraps the partial (the translate script scopes to it), so the SCROLLER has to be that
   wrapper — .cv-thread is inside it and was never the constrained box. Both get min-height:0 or a
   flex child refuses to shrink below its content. */
.cv-thread{padding:16px 24px 14px;min-height:0}
.cv-modal .cv-body{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column}
.cv-modal .cv-body .chatlog{min-height:0}
.cv-empty{padding:34px 26px 38px;text-align:center;border-top:1px solid var(--line-row)}
.cv-empty h3{margin:0 0 6px;font-size:16px}
.cv-empty p{margin:0 auto 18px;max-width:52ch;font-size:14px;color:var(--t3);line-height:1.55}

/* The shared transcript partial carries its own .cl-* styles; skinned here to the reference's
   values so the logic stays in one place and the look comes from the design. */
.cv-thread .cl-row{max-width:82%}
.cv-thread .cl-bubble{font-size:14.5px;line-height:1.55;padding:11px 15px;border-radius:14px}
.cv-thread .cl-b-bot{background:#F6F8FD;color:#22262C;border-radius:14px 14px 14px 4px}
.cv-thread .cl-b-user{background:#EDEFF2;color:var(--t1);border-radius:14px 14px 4px 14px}
.cv-thread .cl-note{align-self:center;background:#EEF1F4;color:#6B7280;border-radius:12px;
          padding:3px 12px;font-size:12px;font-weight:600;width:fit-content;margin:0 auto}
.cv-thread .cl-time{font-size:11.5px;color:var(--t4);font-weight:600}

/* ── Knowledge item modal (02a-3), ported ───────────────────────────────────── */
.ki-modal{max-width:640px;padding:0}
.ki-head{flex:0 0 auto;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:22px 26px 0}
.ki-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ki-meta .upd{font-size:13px;color:var(--t-meta);font-weight:550}
/* The close control is a real bordered button, not a faint glyph. */
/* THE close control for every modal in Dilot. Black circle, white ✕. One control, one place. */
.m-x,.ki-x{width:36px;height:36px;flex:0 0 auto;border:0;border-radius:50%;background:var(--ink);
      color:#fff;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:700;
      line-height:1;cursor:pointer}
.m-x:hover,.ki-x:hover{background:#000;color:#fff}
.ki-title{flex:0 0 auto;margin:12px 26px 0;font-size:24px;font-weight:700;letter-spacing:-.03em;color:var(--t1)}
.ki-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:10px 26px 18px}
.ki-stored{background:#F6F8FC;border-radius:10px;padding:14px 16px;margin-top:8px;
      font-size:var(--fs-body-2);color:var(--t2);font-weight:550;line-height:1.6;white-space:pre-wrap}
.ki-scope{display:flex;flex-direction:column;gap:2px;margin-top:10px}
.ki-scope .sw{margin-bottom:0;padding:9px 0;justify-content:space-between;flex-direction:row-reverse}
.ki-scope .sw .lbl{flex:1;font-weight:600;font-size:var(--fs-body-2)}
.ki-foot{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:20px 26px 24px;flex-wrap:wrap}
.ki-foot .ki-right{margin-left:auto}

/* ── Dropdown. Replaces a native select, because its open list is drawn by the OS and no CSS
      reaches it. The <select> stays in the DOM and still submits; JS hides it. ── */
.dd{position:relative;display:inline-flex}
.dd-native{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.dd-btn{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid #D5D8DE;
        border-radius:10px;padding:0 14px;height:42px;font:650 var(--fs-body-2) var(--font);
        color:var(--t1);cursor:pointer;white-space:nowrap}
.dd-btn:hover{border-color:var(--blue);color:var(--blue)}
.dd.is-open .dd-btn{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.dd-caret{width:8px;height:8px;flex:0 0 auto;border-right:2.2px solid var(--t3);
          border-bottom:2.2px solid var(--t3);border-radius:1px;transform:translateY(-2px) rotate(45deg)}
.dd-btn:hover .dd-caret,.dd.is-open .dd-caret{border-color:var(--blue)}
.dd-menu{display:none;position:absolute;top:calc(100% + 6px);left:0;min-width:100%;z-index:40;
         background:#fff;border:1px solid var(--line-card);border-radius:12px;padding:6px;
         box-shadow:0 12px 32px rgba(20,23,28,.14)}
.dd.is-open .dd-menu{display:block}
.dd-item{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
         padding:9px 12px;border-radius:8px;font:600 var(--fs-body-2) var(--font);color:var(--t2);
         white-space:nowrap}
.dd-item:hover{background:var(--surface-head);color:var(--t1)}
.dd-item.on{background:var(--blue-soft);color:var(--blue-deep);font-weight:700}

/* ── Kennisbank (U4) — values ported from docs/design/screens/02-kennisbank.html ──
   The page manages its own padding, so it cancels the sheet's. Keep in sync with .content. */
.kb-page{margin:-1.8vw -2vw -2.3vw}
.kb-split{display:inline-flex;align-items:stretch;border-radius:10px;overflow:hidden;flex:0 0 auto}
.kb-split a{background:var(--blue);color:#fff;font:650 15.5px var(--font);padding:13px 20px}
.kb-split a:hover{background:var(--blue-deep);color:#fff}
.kb-split a:last-child{font-size:13px;padding:12px}
.kb-split .div{width:1px;background:rgba(255,255,255,.28)}

.kb-body{display:grid;grid-template-columns:minmax(0,1fr) clamp(340px,20vw,400px);align-items:start}
.kb-work{padding:1.6vw 2vw 0;min-width:0}
.kb-block{margin-bottom:1.8vw}
.kb-block-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.kb-block-head h2{margin:0;font-size:var(--fs-h2);font-weight:700;letter-spacing:-.015em}
.kb-period{font-size:12.5px;color:var(--t-meta);font-weight:600}
.kb-block-hint{font-size:var(--fs-body-2);color:var(--t3);margin:5px 0 10px}
.kb-q{display:flex;align-items:center;gap:14px;padding:11px 0;border-top:1px solid #EEF0F3}
.kb-q-text{flex:1;min-width:0;font-size:var(--fs-body-2);color:#2E3138;font-weight:550;overflow:hidden;
           text-overflow:ellipsis;white-space:nowrap}
.kb-q-n{font-size:var(--fs-meta);color:var(--t-meta);font-weight:700;width:38px;text-align:right;flex:0 0 auto}
.kb-q-btn{background:#fff;border:1px solid #D5D8DE;color:var(--t1);font:650 var(--fs-body-2) var(--font);
          padding:8px 14px;border-radius:8px;flex:0 0 auto}
.kb-q-btn:hover{border-color:var(--blue);color:var(--blue)}
.kb-q-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:13px;
           padding-top:12px;border-top:1px solid #EEF0F3;font-size:14px;color:var(--t-meta);font-weight:600}

/* position:relative — .kb-state-label .per is absolutely positioned against THIS, and without it
   the pill escapes to the top-right of the page. */
.kb-state{background:var(--ink);border-radius:14px;padding:1.4vw 1.5vw;margin-bottom:1.8vw;color:#fff;
          position:relative;display:grid;grid-template-columns:minmax(0,215px) minmax(0,1fr);
          gap:26px;align-items:center}
.kb-state-label{font:700 12px var(--font);letter-spacing:.1em;text-transform:uppercase;color:#8A919C;
                display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* The period belongs ON the figure, not in a footnote — a percentage without its window is a claim. */
/* Level with the label, hard right of the panel. A percentage without its window is a claim. */
.kb-state-label .per{position:absolute;top:18px;right:20px;background:rgba(255,255,255,.12);
                color:#C3C8D0;border-radius:var(--r-pill);padding:4px 11px;font:700 12px var(--font);
                letter-spacing:.02em;text-transform:none;border:0}
.kb-state-num{display:flex;align-items:baseline;gap:9px;margin-top:9px;flex-wrap:wrap}
.kb-state-num .n{font-size:40px;font-weight:700;letter-spacing:-.035em;line-height:1;color:#5FD8A4}
.kb-state-num .of{flex:1 1 auto;min-width:0;text-align:left;line-height:1.3;
                  font-size:14.5px;color:#B3BAC6;font-weight:600}
.kb-state-none{font-size:13.5px;color:#9AA2AE;margin-top:9px;line-height:1.5}
.kb-bar{height:6px;border-radius:3px;background:rgba(255,255,255,.14);margin-top:11px;overflow:hidden}
.kb-bar span{display:block;height:100%;background:var(--green)}
.kb-state-btn{display:inline-block;margin-top:16px;background:rgba(255,255,255,.12);color:#fff;
              font:650 14px var(--font);padding:10px 16px;border-radius:8px}
.kb-state-btn:hover{background:rgba(255,255,255,.2);color:#fff}
.kb-state-rows{display:flex;flex-direction:column;min-width:0}
.kb-state-rows > span{display:flex;justify-content:space-between;gap:10px;padding:8px 0;
      border-top:1px solid rgba(255,255,255,.1);font-size:15px;color:#fff;font-weight:550}
.kb-state-rows b{color:#5FD8A4;font-weight:700}
.kb-state-rows b.amber{color:#E8B463}

.kb-sources{padding:1.4vw 1.4vw 1vw;background:#FAFBFD;border-left:1px solid var(--line-sec);align-self:stretch}
.kb-sources-head{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.kb-sources-head h2{margin:0;font:700 12px var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--t3)}
.kb-sources-head .rule{flex:1;height:1px;background:#E1E4EA}
.kb-web{background:#20345E;border-radius:14px;padding:1.15vw 1.2vw;color:#fff;margin:10px 0 16px}
.kb-web-head{display:flex;align-items:center;gap:9px}
.kb-web-head h3{margin:0;font-size:17px;font-weight:700;letter-spacing:-.015em;color:#fff}
.kb-live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font:700 12px var(--font);
         padding:4px 10px;border-radius:var(--r-pill);white-space:nowrap}
.kb-live .d{width:6px;height:6px;border-radius:50%;flex:0 0 auto}
.kb-live.is-live{background:rgba(63,211,158,.16);color:#7FE3C1}
.kb-live.is-live .d{background:#3FD39E}
.kb-live.is-broken{background:rgba(232,180,99,.18);color:#F0C07C}
.kb-live.is-broken .d{background:#E8B463}
.kb-live.is-unknown{background:rgba(255,255,255,.12);color:#A9BCE0}
.kb-live.is-unknown .d{background:#A9BCE0}
.kb-web-num{display:flex;align-items:baseline;gap:7px;margin-top:11px}
.kb-web-num .n{font-size:32px;font-weight:700;letter-spacing:-.035em;line-height:1}
.kb-web-num .sub{font-size:14px;color:#C7D6EF;font-weight:600}
.kb-web-foot{display:flex;align-items:center;gap:10px;margin-top:12px;padding-top:11px;
             border-top:1px solid rgba(255,255,255,.13);font-size:13.5px;color:#C7D6EF;font-weight:550}
.kb-web-foot > span{flex:1;min-width:0}
.kb-web-foot button,.kb-src-bot .mini{font:650 13.5px var(--font);padding:8px 14px;border-radius:8px;
             cursor:pointer;flex:0 0 auto;line-height:1.2}
.kb-web-foot button{background:#fff;border:0;color:#20345E}
.kb-web-foot button:hover{background:#EAF1FE}
.kb-web-foot button[disabled]{background:rgba(255,255,255,.35);color:#20345E;cursor:not-allowed}
/* No rule above the first one: the navy card already separates it. */
.kb-web + .kb-src{border-top:0}
.kb-src{display:block;padding:10px 9px 14px;border-top:1px solid #E1E4EA;color:var(--t1);
        border-left:3px solid transparent;border-radius:0 10px 10px 0;margin-left:-3px}
.kb-src:hover{border-left-color:var(--blue);
              background-image:linear-gradient(90deg,var(--blue-soft),transparent 72%)}
.kb-src:hover .mini{border-color:var(--blue);color:var(--blue);background:#fff}
.kb-src-top{display:flex;align-items:baseline;gap:9px}
.kb-src-top .nm{flex:1;min-width:0;font-size:16px;font-weight:700;letter-spacing:-.01em}
.kb-src-bot .via{font-size:13.5px;font-weight:550;color:var(--t3);white-space:nowrap}
.kb-src-top .n{font-size:26px;font-weight:700;letter-spacing:-.025em;line-height:1.1}
.kb-src-top .u{font-size:var(--fs-meta);color:var(--t4);font-weight:600}
.kb-src-bot{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.kb-src-bot .note{flex:1;min-width:0;font-size:var(--fs-meta);color:var(--t3);font-weight:550}
.kb-src-bot .note.warn{color:#A96B12}
.kb-src-bot .mini{background:#fff;border:1px solid #D5D8DE;color:var(--t1);font-size:var(--fs-meta)}

.kb-list{padding:1.8vw 2vw 2vw;border-top:1px solid var(--line-sec)}
.kb-list-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:6px;flex-wrap:wrap}
.kb-list-head h2{margin:0;font-size:var(--fs-h2);font-weight:700;letter-spacing:-.015em}
.kb-list-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* Every control in a toolbar row shares one look — same height, border, radius, type. Two
   neighbouring controls that differ is the kind of thing that reads as broken. */
.kb-search,.kb-select,.kb-list-tools .ctl{display:inline-flex;align-items:center;gap:9px;
           background:#fff;border:1px solid #D5D8DE;border-radius:10px;padding:9px 14px;
           font:650 var(--fs-body-2) var(--font);color:var(--t1);line-height:1.25;height:42px}
.kb-search{width:250px}
.kb-list-tools .ctl:hover{border-color:var(--blue);color:var(--blue)}
.kb-list-tools .ctl.on{background:var(--blue-soft);border-color:#BFD3FA;color:var(--blue-deep)}

.kb-select{position:relative;gap:8px;padding-right:11px}
.kb-select select{max-width:150px;text-overflow:ellipsis}
.kb-select::after{content:"";width:8px;height:8px;flex:0 0 auto;pointer-events:none;
           border-right:2.2px solid var(--t2);border-bottom:2.2px solid var(--t2);border-radius:1px;
           transform:translateY(-2px) rotate(45deg)}
.kb-select:hover{border-color:var(--blue)}
.kb-select:hover::after{border-color:var(--blue)}
.kb-select select{border:0;outline:0;background:none;font:inherit;color:inherit;
           cursor:pointer;appearance:none;-webkit-appearance:none;padding:0}
.kb-r{display:grid;grid-template-columns:1fr 132px 170px 118px;gap:16px;padding:12px;
      border-top:1px solid var(--line-row);border-left:3px solid transparent;
      align-items:center;color:var(--t1)}
/* The hover treatment for every list of this shape in Dilot — a blue left edge and a
   blue→white gradient, never a flat tint. Reuse .list-hover rather than redefining it. */
.kb-r:hover,.list-hover:hover{border-left-color:var(--blue);
      background-image:linear-gradient(90deg,var(--blue-soft),#fff 62%)}
.kb-r-main{min-width:0}
.kb-r-main .t{display:block;font-size:16px;font-weight:650}
.kb-r-main .s{display:block;font-size:14px;color:var(--t3);margin-top:3px;overflow:hidden;
              text-overflow:ellipsis;white-space:nowrap}
.kb-r-src{min-width:0}
.kb-r-aud{font-size:var(--fs-body-2);color:#2E3138;font-weight:550;min-width:0}
.kb-r-aud .warn{color:#A96B12;font-weight:650}
.kb-r-when{font-size:var(--fs-meta);color:var(--t4);font-weight:600;text-align:right;white-space:nowrap}
.kb-pager{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0 0;
          font-size:var(--fs-meta);color:var(--t4);font-weight:600}
.kb-pager .nav{display:flex;gap:6px}
.kb-pager .nav a{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
          border:1px solid #D7DBE2;border-radius:8px;color:var(--t2);font-size:15px}

/* ── Producten (U4f) — values ported from 02c / 02d ─────────────────────────── */
.crumb{display:flex;align-items:center;gap:9px;font:650 var(--fs-meta) var(--font);color:var(--t-meta);margin-bottom:18px}
.crumb .sep{color:#C6CAD1}
.crumb .cur{color:var(--t1);font-weight:700}
.pr-tools{display:flex;align-items:center;gap:8px;flex:0 0 auto;white-space:nowrap}
/* The search field and the sync button sit side by side, so they share height and radius.
   Two neighbouring controls of different heights is the thing that reads as broken. */
.pr-search,.pr-sync{height:42px;border-radius:9px;font:650 var(--fs-body-2) var(--font);line-height:1.2}
.pr-search{display:inline-flex;align-items:center;gap:9px;background:#F4F5F7;padding:0 13px;width:210px;border:0}
/* Search fields across Dilot: normal weight, 15px, and an icon you can see. A search box in a
   heavy 13px is the thing that made every toolbar look cramped. */
.pr-search input,.kb-search input{border:0;outline:0;background:none;font-family:var(--font);
           font-weight:400;font-size:15px;width:100%;min-width:0;color:var(--t1)}
.pr-search svg,.kb-search svg{width:19px;height:19px;flex:0 0 auto}
.pr-sync{background:#fff;border:1px solid #D5D8DE;color:var(--t1);padding:0 16px;cursor:pointer}
.pr-sync:hover{border-color:var(--blue);color:var(--blue)}
/* Underlined tabs, not pills — the design uses a 2px rule under the active one. */
.pr-tabs{display:flex;align-items:center;gap:22px;margin-top:20px;border-bottom:1px solid var(--line-sec)}
.pr-tabs a{padding:0 3px 13px;font:600 var(--fs-lead) var(--font);color:var(--t3);border-bottom:2px solid transparent}
.pr-tabs a.on{border-bottom-color:var(--ink);color:var(--t1);font-weight:700}
.pr-tabs .n{font:700 var(--fs-meta) var(--font);color:#A8AEB8;margin-left:6px}

.pr-thead,.pr-row{display:grid;grid-template-columns:44px minmax(0,1fr) 128px 180px 150px 84px;gap:14px;
                  align-items:center;padding:11px 1.8vw}
.pr-thead{font:700 var(--fs-micro) var(--font);letter-spacing:.09em;text-transform:uppercase;color:var(--t4);
          background:var(--surface-head);border-bottom:1px solid var(--line-row)}
.pr-row{border-bottom:1px solid var(--line-row);color:var(--t1);border-left:3px solid transparent;
        margin-left:-3px}
.pr-row:hover{border-left-color:var(--blue);background-image:linear-gradient(90deg,var(--blue-soft),transparent 72%)}
/* A variation belongs to the row above it: indented, quieter, no repeat of the parent's Kennis state.
   It still gets its own price and stock, which is the whole reason it has a row. */
/* A variation hangs off the row above it: a short connector line, a smaller image, and no repeat of
   the parent's Kennis state. It still shows its own price and stock — the reason it has a row. */
.pr-row.is-variant{border-bottom-color:var(--line-row);background:#FCFCFD}
/* The tree line. A vertical rule runs down the whole variant group and a short stub reaches each
   row, so it reads as belonging to the product above rather than as a list that happens to follow.
   The rule is drawn per row and cut at the halfway point on the LAST one, which is what makes the
   corner. `.is-last` comes from the controller — :last-child cannot know where the group ends. */
.pr-row.is-variant{position:relative}
.pr-row.is-variant::before{content:"";position:absolute;left:31px;top:0;bottom:0;width:1px;
                           background:#DCDFE5;border-radius:1px}
.pr-row.is-variant.is-last::before{bottom:50%}
.pr-row.is-variant::after{content:"";position:absolute;left:31px;top:50%;width:13px;height:1px;
                          background:#DCDFE5;border-radius:1px}
.pr-row.is-variant .pr-thumb{width:28px;height:28px;border-radius:7px;margin-left:26px}
.pr-row.is-variant .pr-name{margin-left:10px}
.pr-row.is-variant .pr-name .t{font-size:14px;color:var(--t2);font-weight:600}
.pr-row.is-variant .pr-price{color:var(--t2)}
.pr-stock.is-out{color:var(--red);font-weight:650}
.pr-follows{font-size:var(--fs-meta);color:var(--t4);font-weight:550}
.pr-cat{margin-left:auto;padding-bottom:9px}
.pr-cat select{border:0;background:none;font:600 var(--fs-body-2) var(--font);color:var(--t2);cursor:pointer;outline:0}
.pr-label-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:4px}
.pr-applies{display:inline-flex;align-items:center;gap:8px;font:500 var(--fs-meta) var(--font);
            color:var(--t4);text-transform:none;letter-spacing:0}
.pr-applies::before{content:"";width:6px;height:6px;border-radius:50%;background:#2D5BE3;flex:0 0 auto}
.pr-vartable{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line-card);
             border-radius:10px;overflow:hidden;margin-top:10px}
.pr-vartable .h,.pr-vartable .r{display:grid;grid-template-columns:minmax(0,1fr) 60px 92px;gap:10px;
             padding:9px 12px;align-items:center}
.pr-vartable .h{background:var(--surface-head);font:700 var(--fs-micro) var(--font);
             letter-spacing:.09em;text-transform:uppercase;color:var(--t4)}
.pr-vartable .r{border-top:1px solid var(--line-row);font-size:var(--fs-meta)}
.pr-vartable .r .nm{min-width:0;font-weight:650;color:var(--t1)}
.pr-vartable .r .nm .sku{display:block;margin-top:2px}
.pr-vartable .r .st{text-align:right;font-weight:650}
.pr-vartable .r.is-out{color:var(--t4)}
.pr-vartable .r.is-out .nm{color:var(--t3)}
.pr-vartable .r.is-out .st{color:var(--red)}
.pr-thumb{width:36px;height:36px;flex:0 0 auto;border-radius:9px;background:#fff;border:1px solid var(--line-card);
          overflow:hidden;display:flex;align-items:center;justify-content:center}
.pr-thumb.empty{background:var(--surface-head)}
.pr-thumb img{width:100%;height:100%;object-fit:cover}
.pr-name{min-width:0}
.pr-name .t{display:block;font-size:var(--fs-body-2);font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The sku is monospace on purpose: it gets read out and typed in. */
.pr-name .sku,.sku{font:600 var(--fs-micro) var(--font-mono);color:var(--t4)}
.pr-name .sku{display:block;margin-top:0}
.pr-price{font-size:var(--fs-body-2);color:var(--t1);font-weight:650}
.pr-stock{font-size:var(--fs-body-2);color:var(--t2);font-weight:600}
.pr-open{justify-self:end;font-size:var(--fs-meta);color:var(--t-meta);font-weight:600;white-space:nowrap}
.tag.ks-compleet{background:var(--green-soft);color:#0F6242}
.tag.ks-dun{background:#FDF3E2;color:#A96B12}
.tag.ks-niets{background:var(--red-soft);color:#9E332B}
.tag .d{width:6px;height:6px;border-radius:50%;display:inline-block;margin-right:6px;background:currentColor}
.pr-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 1.8vw 1.6vw;
         font-size:var(--fs-meta);color:var(--t4);font-weight:600}

.pr-dhead{padding:1.6vw 1.9vw 1.2vw;border-bottom:1px solid var(--line-sec)}
.pr-dtop{display:flex;align-items:flex-start;gap:14px}
.pr-dthumb{width:66px;height:66px;flex:0 0 auto;border-radius:13px;background:#fff;
           border:1px solid var(--line-card);overflow:hidden}
.pr-dthumb.empty{background:var(--surface-head)}
.pr-dthumb img{width:100%;height:100%;object-fit:cover}
.pr-dhead h1{margin:0;font-size:26px;letter-spacing:-.035em}
.pr-dmeta{display:flex;align-items:center;gap:9px;margin-top:0;font-size:var(--fs-body-2);color:#5C616A;font-weight:600;flex-wrap:wrap}
.pr-shop{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid #D5D8DE;
         color:var(--t1);font:650 var(--fs-body-2) var(--font);padding:10px 16px;border-radius:8px;flex:0 0 auto}
.pr-shop:hover{border-color:var(--blue);color:var(--blue)}
.pr-shop svg{width:14px;height:14px;flex:0 0 auto}
.pr-dmeta .dot3{width:3px;height:3px;border-radius:50%;background:#C6CAD1;flex:0 0 auto}
.pr-dbody{display:grid;grid-template-columns:minmax(0,1fr) 440px;align-items:start}
.pr-dleft{padding:1.4vw 1.9vw 2vw;border-right:1px solid var(--line-sec);min-width:0}
.pr-dright{padding:20px 24px 30px;background:#FAFBFD;align-self:stretch;min-width:0;
           display:flex;flex-direction:column}
.pr-k{display:block;padding:13px 9px;margin:0 -9px;border-top:1px solid var(--line-row);
      border-radius:8px;color:var(--t1)}
.pr-k:hover{background:var(--blue-faint);color:var(--t1)}
.pr-k-head{display:flex;align-items:baseline;gap:9px}
.pr-k-head .t{flex:1;min-width:0;font-size:15px;font-weight:650;color:var(--t1)}
.pr-k-head .src{font:650 var(--fs-micro) var(--font);background:#F2F3F6;color:var(--t3);border-radius:4px;
                padding:2px 7px;flex:0 0 auto}
.pr-k-body{display:block;font-size:var(--fs-body-2);color:#5C616A;font-weight:550;line-height:1.55;margin-top:6px}
.pr-period{display:inline-block;margin-left:12px;margin-bottom:2px;background:var(--surface-head);
           color:var(--t3);border:0;border-radius:var(--r-pill);padding:4px 11px;
           font:700 12px var(--font);letter-spacing:.02em;text-transform:none;vertical-align:middle}
.pr-q{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-top:1px solid var(--line-row)}
/* Wrap rather than truncate: a question you cannot finish reading is no use. The text itself is
   capped at 38 words in the controller, so a pasted essay still cannot take over the column. */
.pr-q .t{flex:1;min-width:0;font-size:var(--fs-body-2);color:#2E3138;font-weight:550;line-height:1.5;
         overflow-wrap:anywhere}
.pr-q .n{font-size:var(--fs-meta);color:var(--t-meta);font-weight:700;white-space:nowrap;flex:0 0 auto;padding-top:2px}
.pr-q .n.bad{color:var(--red)}
.pr-q-btn{background:#fff;border:1px solid #D5D8DE;color:var(--t1);font:650 var(--fs-meta) var(--font);
          padding:7px 13px;border-radius:8px;flex:0 0 auto}
.pr-q-btn:hover{border-color:var(--blue);color:var(--blue)}
.pr-fields{display:flex;flex-direction:column;margin-top:8px}
.pr-fields > span{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:9px 0;
                  border-top:1px solid var(--line-row)}
.pr-fields .k{font-size:var(--fs-meta);color:var(--t3);font-weight:600}
.pr-fields .v{font-size:var(--fs-body-2);color:var(--t1);font-weight:650;text-align:right;min-width:0}
.pr-note{font-size:var(--fs-meta);color:var(--t4);line-height:1.5;margin:12px 0 0}

/* ── Video's (02b) — ported from the markup: a grid of vertical cards ────────── */
.vd-wrap{padding:1.6vw 2vw 2vw}
.vd-warn{display:flex;align-items:center;gap:10px;background:var(--amber-soft);border:1px solid #F2DDB4;
         border-radius:var(--r-card-sm);padding:12px 14px;margin-bottom:18px}
.vd-warn .dot{width:7px;height:7px;flex:0 0 auto;border-radius:50%;background:#E0A33A}
.vd-warn .txt{flex:1;font-size:var(--fs-body-2);color:#5C4A28;font-weight:550}
.vd-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.vd-head h2{margin:0;font-size:var(--fs-h2);font-weight:700;letter-spacing:-.015em}
.vd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start}
@media (max-width:1400px){.vd-grid{grid-template-columns:repeat(2,1fr)}}
/* overflow:visible — the card used to clip the section menu the moment it was taller than the
   thumbnail. The thumbnail keeps its own rounding instead. */
.vd-card{background:#fff;border:1px solid var(--line-card);border-radius:14px;
         display:flex;flex-direction:column}
.vd-thumb{border-radius:13px 13px 0 0;overflow:hidden}
.vd-thumb{position:relative;display:block;aspect-ratio:16/9;background:#20252E center/cover no-repeat}
.vd-thumb .play{position:absolute;inset:0;margin:auto;width:42px;height:42px;border-radius:50%;
         background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;
         color:#fff;font-size:14px}
.vd-thumb:hover .play{background:var(--blue)}
.vd-thumb .dur{position:absolute;right:9px;bottom:9px;background:rgba(0,0,0,.62);color:#fff;
         font:650 11.5px var(--font-mono);padding:2px 7px;border-radius:5px}
.vd-body{display:block;padding:14px 16px 15px}
.vd-top{display:flex;align-items:flex-start;gap:10px}
.vd-top .t{display:block;font-size:15px;font-weight:650;color:var(--t1);letter-spacing:-.012em}
.vd-top .st{display:block;font-size:12.5px;color:var(--t-meta);font-weight:550;margin-top:3px}
.vd-seclabel{display:flex;align-items:center;gap:8px;margin:14px 0 8px}
.vd-seclabel .lbl{font:700 10.5px var(--font);letter-spacing:.09em;text-transform:uppercase;color:var(--t4)}
.vd-seclabel .rule{flex:1;height:1px;background:#EEF0F3}
.vd-seclabel .how{display:inline-flex;align-items:center;gap:5px;font:650 11.5px var(--font);color:#127048}
.vd-seclabel .how.bad{color:#A93A33}
.vd-chips{display:flex;flex-wrap:wrap;gap:6px}
.vd-chip{display:inline-flex;align-items:center;gap:6px;background:#F1F3F7;color:var(--t2);
         font:600 12.5px var(--font);padding:4px 8px 4px 10px;border-radius:7px}
.vd-chip form{margin:0;display:flex}
.vd-chip .x{background:none;border:0;color:#A8AEB8;font-size:13px;line-height:1;cursor:pointer;padding:0}
.vd-chip .x:hover{color:var(--red)}
/* "+ Sectie" is a dashed chip that opens the page's headings — the design's control, made to work. */
.vd-add{margin:0;display:inline-flex}
.vd-add select{border:1px dashed #C6CAD1;color:var(--t2);font:650 12.5px var(--font);padding:4px 10px;
         border-radius:7px;cursor:pointer;background:#fff;outline:0;appearance:none;-webkit-appearance:none}
.vd-add select:hover{border-color:var(--blue);color:var(--blue)}
/* Enhanced: the dashed chip IS the button, and it never shows a chosen value — it is an add control. */
.vd-add .dd-btn{height:auto;padding:4px 10px;border:1px dashed #C6CAD1;border-radius:7px;
         font:650 12.5px var(--font);color:var(--t2);gap:5px}
.vd-add .dd-btn:hover{border-color:var(--blue);color:var(--blue)}
.vd-add .dd-caret{width:6px;height:6px;border-width:2px}
.vd-orphan{display:block;font-size:13px;color:#A96B12;font-weight:500;line-height:1.45;margin-top:5px}
.vd-guide-add{display:inline-block;margin-top:11px;font:650 12.5px var(--font);color:var(--t2)}
.vd-guide-add:hover{color:var(--blue)}
.vd-guide-add .opt{color:#A8AEB8;font-weight:600;margin-left:4px}
.vd-guide-set{display:flex;align-items:flex-start;gap:8px;background:#F6F8FC;border-radius:9px;
          padding:9px 11px;margin-top:11px}
.vd-guide-set svg{flex:0 0 auto;margin-top:2px}
.vd-guide-set .txt{flex:1;min-width:0;font-size:13px;color:var(--t2);font-weight:550;line-height:1.45}
.vd-guide-set .edit{flex:0 0 auto;font:650 12.5px var(--font);color:var(--blue)}
.vd-addsec{display:inline-flex;align-items:center;border:1px dashed #C6CAD1;color:var(--t2);
          font:650 12.5px var(--font);padding:4px 10px;border-radius:7px}
.vd-addsec:hover{border-color:var(--blue);color:var(--blue)}
.vd-pagepick{margin-bottom:14px}
.vd-seccards{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:2px}
.vd-seccard{position:relative;display:block;cursor:pointer}
.vd-seccard input{position:absolute;opacity:0;width:0;height:0}
.vd-seccard .box{display:block;border:1px solid var(--line-card);border-radius:11px;padding:12px 34px 12px 13px;
        background:#fff;height:100%;transition:border-color .18s ease,background-color .18s ease}
.vd-seccard:hover .box{border-color:#BFD3FA}
/* Selected: Dilot blue border, light blue fill, and a check floating top-right. */
.vd-seccard input:checked + .box{border-color:#2D5BE3;background:var(--blue-faint)}
/* Inside the card, not overhanging it: at -7px it pushed past the grid and produced a
   horizontal scrollbar in the modal body. */
.vd-seccard .check{position:absolute;top:5px;right:5px;width:22px;height:22px;border-radius:50%;
        background:#2D5BE3;color:#fff;display:none;align-items:center;justify-content:center;
        font-size:12px;font-weight:700;box-shadow:0 2px 6px rgba(45,91,227,.35)}
.vd-seccard input:checked + .box .check{display:flex}
.vd-seccard .h{display:block;font-size:var(--fs-body-2);font-weight:650;color:var(--t1)}
.vd-seccard .p{display:block;font-size:13px;color:var(--t3);font-weight:550;line-height:1.45;margin-top:5px}
.vd-seclist{display:flex;flex-direction:column;gap:2px;max-height:44vh;overflow:auto}
.vd-secopt{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;cursor:pointer;
          font-size:var(--fs-body-2);color:var(--t2)}
.vd-secopt:hover{background:var(--surface-head);color:var(--t1)}
.vd-secopt input{accent-color:var(--blue);width:17px;height:17px}
.vd-guide{margin-top:11px}
.vd-guide summary{cursor:pointer;list-style:none;display:block}
.vd-guide summary::-webkit-details-marker{display:none}
/* Empty state: the design's inline text control, not a button. */
.vd-guide .add{font:650 12.5px var(--font);color:var(--t2)}
.vd-guide .opt{font:600 12.5px var(--font);color:#A8AEB8;margin-left:6px}
.vd-guide summary:hover .add{color:var(--blue)}
/* Set state: the #F6F8FC block, lightbulb, FULL text (it wraps), and Wijzigen on the right. */
.vd-guide .set{display:flex;align-items:flex-start;gap:8px;background:#F6F8FC;border-radius:9px;
          padding:9px 11px}
.vd-guide .set svg{flex:0 0 auto;margin-top:2px}
.vd-guide .set .txt{flex:1;min-width:0;font-size:13px;color:var(--t2);font-weight:550;line-height:1.45}
.vd-guide .set .edit{flex:0 0 auto;font:650 12.5px var(--font);color:var(--blue)}
.vd-guide summary:hover .set .edit{color:var(--blue-deep)}
/* The form only exists while the disclosure is open — nothing is "saved" that already was. */
.vd-guide[open] summary{margin-bottom:8px}
.vd-guide form{display:flex;align-items:flex-end;gap:8px;background:#F6F8FC;border-radius:9px;padding:9px 11px}
.vd-guide textarea{flex:1;min-width:0;border:0;background:none;outline:0;resize:vertical;
          font-family:var(--font);font-weight:550;font-size:13px;color:var(--t2);line-height:1.45}
.vd-guide textarea::placeholder{color:#9096A0;font-weight:500}
.vd-guide-btn{flex:0 0 auto;background:none;border:0;cursor:pointer;font:650 12.5px var(--font);
          color:var(--blue);padding:0}
.vd-guide-btn:hover{color:var(--blue-deep)}

/* ── Chatbot trainen (03) — ported from the design ──────────────────────────── */
.tr-page{margin:-1.8vw -2vw -2.3vw}
.tr-memory{display:inline-flex;align-items:center;gap:7px;font:650 var(--fs-meta) var(--font);color:#127048}
.tr-memory .d{width:6px;height:6px;border-radius:50%;background:var(--green)}
.tr-body{display:grid;grid-template-columns:minmax(0,1fr) 380px;align-items:start}
.tr-chat{min-width:0;display:flex;flex-direction:column;padding:24px 28px 22px;
         position:relative;background:#fff}
.tr-turn{display:flex;gap:12px;align-items:flex-start}
.tr-turn .av{width:20px;height:20px;flex:0 0 auto;margin-top:3px;border-radius:7px;background:var(--blue)}
.tr-turn .bod{max-width:640px;min-width:0}
.tr-turn .tc-bot,.tr-turn .tr-say{padding-left:0}
.tr-turn .tc-bot::before{display:none}
.tr-say{font-size:15.5px;line-height:1.6;color:#22262C}
.tr-say .soft{color:#616160}
/* The existing chat machinery renders .tc-msg bubbles; skinned to the design here. */
.tc-msg{max-width:640px;font-size:15.5px;line-height:1.55;overflow-wrap:anywhere}
.tc-bot{align-self:flex-start;color:#22262C}
.tc-admin{align-self:flex-end;max-width:540px;background:#EDEFF2;color:var(--t1);
          border-radius:14px 4px 14px 14px;padding:13px 17px}
.tr-starts{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}
.tr-start{background:#fff;border:1px solid var(--line-card);border-radius:11px;padding:13px 15px;
          text-align:left;cursor:pointer;font-family:var(--font)}
.tr-start:hover{border-color:#BFD3FA;background:var(--blue-faint)}
.tr-start.on{background:#EEF3FD;border-color:var(--blue)}
.tr-start[disabled]{opacity:.55;cursor:not-allowed}
.tr-start .t{display:block;font:650 var(--fs-body-2) var(--font);color:var(--t1)}
.tr-start .s{display:block;font-size:12.5px;color:var(--t-meta);margin-top:2px}
/* The composer is the drop target now. */
.tr-compose.is-over{border-color:var(--blue);background:#F7FAFF}
/* One rounded field, attachment inside it — the design's composer, not a textarea plus a separate
   drop zone stacked above it. */
.tr-compose{display:flex;gap:9px;align-items:center;margin-top:16px;border:1px solid #D9DCE2;
        border-radius:16px;padding:7px 8px 7px 18px;background:#fff}
.tr-compose:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.tr-compose textarea{flex:1;border:0;outline:0;padding:10px 0;font:inherit;font-size:var(--fs-body-2);
        resize:none;max-height:160px;line-height:1.45;background:none}
.tr-compose .clip{width:40px;height:40px;flex:0 0 auto;border:1px solid #D9DCE2;border-radius:11px;
        background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.tr-compose .clip:hover{border-color:var(--blue)}
.tr-compose .btn{flex:0 0 auto;height:40px;padding:0 22px;border-radius:11px}
.tr-foot{display:flex;align-items:center;gap:10px;margin-top:9px}
.tr-foot .l{flex:1;min-width:0;font-size:12px;color:var(--t4);font-weight:550}
.tr-foot .r{display:inline-flex;align-items:center;gap:6px;font:650 12px var(--font);color:var(--t2);
         background:none;border:0;cursor:pointer;flex:0 0 auto}
.tr-foot .r:hover{color:var(--blue)}
/* Open-question slider: one at a time, arrows to skip without answering. */
.tr-q{border:1px solid var(--line-card);border-radius:12px;padding:14px 16px;margin-top:12px;background:#fff}
.tr-q-top{display:flex;align-items:center;gap:10px}
.tr-q-txt{flex:1;min-width:0;font-size:var(--fs-body-2);color:var(--t1);font-weight:600;line-height:1.45}
.tr-q-n{font-size:12.5px;color:var(--t-meta);font-weight:700;white-space:nowrap}
.tr-q-bot{display:flex;align-items:center;gap:8px;margin-top:11px}
.tr-q-bot .nav{margin-left:auto;display:flex;gap:6px}
.tr-q-bot .nav button{width:30px;height:30px;border:1px solid #D7DBE2;border-radius:8px;background:#fff;
         color:var(--t2);cursor:pointer;font-size:14px;line-height:1}
.tr-q-bot .nav button:hover:not([disabled]){border-color:var(--blue);color:var(--blue)}
.tr-q-bot .nav button[disabled]{opacity:.4;cursor:not-allowed}

/* Right column */
.tr-side{background:#FAFBFC;border-left:1px solid var(--line-sec);padding:22px 20px;min-width:0;
         display:flex;flex-direction:column}
.tr-side h2{margin:0 0 11px;font-size:15.5px;font-weight:700;letter-spacing:-.015em}
.chlog-tabs{display:flex}
/* The proposal preview + the green "maak het aan" bar, both driven by training.js. */
.tc-preview{margin-top:16px;border:1px solid var(--blue);background:var(--blue-faint);border-radius:12px;
            padding:18px;display:none}
.tc-ready{margin-top:12px;display:none}
.tc-ready .btn{width:100%;background:var(--green);font-size:15px;padding:13px}
.tr-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line-card);margin-bottom:2px}
.tr-tabs .chlog-tab{background:none;border:0;cursor:pointer;padding:8px 9px;font:600 14px var(--font);
         color:var(--t-meta);border-bottom:2px solid transparent;margin-bottom:-1px}
.tr-tabs .chlog-tab.active{color:var(--blue);border-bottom-color:var(--blue);font-weight:700}
.tr-list{display:flex;flex-direction:column}
.tr-item{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line-sec);
         color:var(--t1)}
.tr-item:hover .go{color:var(--blue)}
.tr-item.is-undone{opacity:.45}
.tr-item .tx{flex:1;min-width:0}
.tr-item .t{display:block;font-size:14px;font-weight:650;line-height:1.4}
.tr-item .s{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;
         color:var(--t-meta);font-weight:550;margin-top:4px}
.tr-item .s .tag{font-size:11px;padding:2px 8px}
.tr-item .go{color:#C6CAD1;font-size:15px;flex:0 0 auto}
.tr-more{display:inline-block;margin-top:11px;font:650 12.5px var(--font);color:var(--blue)}
.tr-empty{font-size:13px;color:var(--t4);padding:12px 0}
/* "Waar wacht de Chatbot op?" is a CARD with a full-width dark button, as drawn — not a bare block. */
.tr-card{background:#fff;border:1px solid var(--line-card);border-radius:13px;padding:14px 16px;margin-top:20px}
.tr-card-cta{margin-top:12px;width:100%;border:0;background:var(--ink);color:#fff;
         font:650 13px var(--font);padding:9px;border-radius:9px;cursor:pointer}
.tr-card-cta:hover{background:#22262E}
/* Tone sits at the FOOT of the column. */
.tr-tone-foot{margin-top:auto;padding-top:18px}
.tr-tone-foot .lbl{font:650 13px var(--font);color:#5C616A}
.tr-tone-foot .per{background:none;border:0;padding:0;cursor:pointer;font:650 12.5px var(--font);color:var(--t-meta)}
.tr-tone-foot .per:hover{color:var(--blue)}
.tr-block{margin-top:24px;padding-top:18px;border-top:1px solid var(--line-card)}
.tr-block-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px}
.tr-block-h h3{margin:0;font-size:14px;font-weight:700;letter-spacing:-.01em}
.tr-block-h .per{font:600 12px var(--font);color:var(--t-meta)}
.tr-wait{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line-sec)}
.tr-wait .t{flex:1;min-width:0;font-size:13.5px;color:#2E3138;font-weight:550}
.tr-wait .n{font-size:12.5px;color:var(--t-meta);font-weight:700}
.tr-block-cta{margin-top:11px;background:none;border:0;padding:0;cursor:pointer;
         font:650 12.5px var(--font);color:var(--blue)}
.tr-tone{font-size:12px;color:var(--t-meta);font-weight:550;line-height:1.5;margin-top:5px}

@media (max-width:1000px){
  .tr-body{grid-template-columns:1fr}
  .tr-side{border-left:0;border-top:1px solid var(--line-sec)}
}
@media (max-width:820px){
  .tr-page{margin:-18px -14px -26px}
  .tr-chat{padding:16px}
  .tr-starts{grid-template-columns:1fr}
      .tc-msgs{max-height:46vh}
}

/* Tone controls — same look as the panel they came from. */
.cc-row{margin-bottom:16px}
.cc-label{font:650 var(--fs-body-2) var(--font);color:var(--t1);margin-bottom:7px}
.cc-seg{display:inline-flex;flex-wrap:wrap;gap:4px;background:#F1F3F6;border-radius:10px;padding:3px}
.cc-opt{background:none;border:0;cursor:pointer;padding:7px 13px;border-radius:8px;
        font:650 13px var(--font);color:var(--t3)}
.cc-opt:hover{color:var(--t1)}
.cc-opt.active{background:#fff;color:var(--t1);box-shadow:0 1px 3px rgba(20,23,28,.12)}
.cc-desc{font-size:12.5px;color:var(--t-meta);margin-top:6px;line-height:1.5}
.cc-status{font:650 12.5px var(--font);color:var(--green);min-height:18px}

/* A settings entry opens its own :target modal — no JS needed, and the URL says which one. */
.tr-logmodal{display:none}
.tr-logmodal:target{display:flex}
.tr-log-diff{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.tr-log-diff .old{color:var(--t3);text-decoration:line-through;text-decoration-color:#DDD9D0;
        font-size:var(--fs-body-2)}
.tr-log-diff .arrow{color:var(--t4)}
.tr-log-diff .new{color:var(--t1);font-weight:650;font-size:var(--fs-body-2)}

/* ── The chat itself: bot avatar, typing dots, proposal cards ────────────────
   Recovered from the view's old <style> block when it was deleted, and restyled to the design. The
   engine renders these classes; without them the whole proposal card is unstyled text. */
.tc-msgs{display:flex;flex-direction:column;gap:20px;min-height:54vh;max-height:600px;overflow-y:auto}
/* Every bot turn gets the 20px blue square, whether it came from Blade or from the engine — the
   avatar is drawn by CSS so the JS does not have to know about it. */
.tc-bot{position:relative;padding-left:32px}
.tc-bot::before{content:"";position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:7px;
        background:var(--blue)}
.tc-typing{display:flex;gap:4px;align-items:center;padding:4px 0 4px 32px;position:relative}
.tc-typing::before{content:"";position:absolute;left:0;top:0;width:20px;height:20px;border-radius:7px;
        background:var(--blue)}
.tc-typing span{width:7px;height:7px;border-radius:50%;background:#C6CAD1;
        animation:tc-wave 1.2s infinite ease-in-out}
.tc-typing span:nth-child(2){animation-delay:.15s}
.tc-typing span:nth-child(3){animation-delay:.3s}
@keyframes tc-wave{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}

/* Proposal card — the design's white block with its own actions. */
.tc-prop{align-self:stretch;margin-left:32px;border:1px solid var(--line-card);background:#fff;
        border-radius:13px;padding:15px 17px;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.tc-prop.applied{border-color:#BFE6C9;background:#F6FBF7}
.tc-prop.rejected,.tc-prop.superseded{opacity:.5}
.tc-prop.clarify{background:#FFFDF6;border-color:#F0E4BF}
.tc-prop-meta2{display:flex;align-items:center;gap:7px;font-size:12px;margin-bottom:9px}
.tc-prop-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:#5b6472}
.tc-prop-dot.k{background:#1a56db}.tc-prop-dot.t,.tc-prop-dot.b{background:#6d28d9}
.tc-prop-dot.s{background:#5b6472}.tc-prop-dot.nav{background:#b45309}
.tc-prop-dot.q{background:#c08a00}.tc-prop-dot.i{background:#0f8a72}
.tc-prop-cat{font-weight:700;color:var(--t1);letter-spacing:.01em}
.tc-prop-conf-inline{color:var(--t-meta)}
.tc-prop-main{font-size:var(--fs-body-2);line-height:1.55;color:var(--t1);white-space:pre-wrap;
        overflow-wrap:anywhere}
.tc-prop-ref{display:inline-block;font-size:12.5px;color:var(--blue);margin-top:9px}
.tc-prop-ref::before{content:"↻ "}
.tc-prop-actions{display:flex;gap:10px;margin-top:14px;align-items:center;flex-wrap:wrap}
.tc-prop-link{background:none;border:0;padding:0;font:inherit;font-size:12.5px;font-weight:600;
        color:var(--t-meta);cursor:pointer}
.tc-prop-link:hover{color:var(--blue)}
.tc-prop-det-toggle{margin-left:auto}
.tc-prop-det-toggle::after{content:" ▸"}
.tc-prop-det-toggle.open::after{content:" ▾"}
.tc-prop-detbox{margin-top:11px;font-size:13px;border-top:1px solid var(--line-row);padding-top:9px}
.tc-prop-dk{font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
        color:var(--t4);margin:9px 0 2px}
.tc-prop-dk:first-child{margin-top:0}
.tc-prop-dv{color:var(--t3);line-height:1.5;white-space:pre-wrap}
/* #31: the "other pages" hedge on a website-conflict card — a quiet aside, not a data value. */
.tc-prop-hint{margin-top:9px;color:var(--t4);font-style:italic}
.tc-prop-clarify{display:flex;gap:8px;margin-top:11px;align-items:flex-end}
.tc-prop-clarify textarea{flex:1;box-sizing:border-box;border:1px solid #D5D8DE;border-radius:9px;
        padding:9px 11px;font:inherit;font-size:14px;resize:none;line-height:1.4;outline:none;max-height:120px}
.tc-prop-clarify textarea:focus{border-color:var(--blue)}
.tc-prop-status{margin-top:11px;font-size:13px;line-height:1.45;padding:9px 11px;border-radius:8px;display:none}
.tc-prop-status.err{background:#FEF2F2;border:1px solid #F5C6C4;color:#8A1C16}
.tc-prop-status.ok{background:#EAFAF0;border:1px solid #BFE6C9;color:#1A7F37}
.tc-prop-status.warn{background:#FFF8E9;border:1px solid #F5C86B;color:#7A5C00}
.tc-prop-done{font-size:13.5px;font-weight:600;color:#1A7F37}
.tc-prop-done.rej{color:var(--t3)}
.tc-prop-gated{margin-top:10px;font-size:12.5px;color:#8A5A00;background:#FFF8E9;
        border:1px solid #F0E0B0;border-radius:8px;padding:7px 10px}

/* ── Readiness on the card (03, mock) ───────────────────────────────────────── */
/* Plain, not a second amber band: the conflict block above is the only tinted thing on the card. The
   question is a normal line with a muted "needed to save" beside it — no yellow, no heavy weight. */
.tc-ask{margin-top:15px}
.tc-ask-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.tc-ask-q{font:600 var(--fs-body-2) var(--font);color:var(--t1);line-height:1.45}
.tc-ask-need{font:600 12.5px var(--font);color:var(--t-meta)}
.tc-ask-opts{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
.tc-ask-opt{background:#fff;border:1px solid #D5D8DE;border-radius:999px;padding:9px 16px;cursor:pointer;
        font:650 13.5px var(--font);color:var(--t1)}
.tc-ask-opt:hover{border-color:var(--blue);color:var(--blue)}
/* Chosen (select mode): picked, not sent yet — the card's Toepassen submits the answers together. */
.tc-ask-opt.on{background:var(--blue);border-color:var(--blue);color:#fff}
/* "Anders…" is dashed: an option, visibly not one of the suggestions. */
.tc-ask-opt.is-other{border-style:dashed;color:var(--t3)}
.tc-ask-opt.is-other:hover,.tc-ask-opt.is-other.on{border-style:solid;background:var(--blue);
        border-color:var(--blue);color:#fff}
.tc-ask-own{display:none;margin-top:10px}
.tc-ask-own.open{display:block}
.tc-ask-own textarea{width:100%;box-sizing:border-box;border:1px solid var(--blue);border-radius:11px;
        padding:11px 13px;font:inherit;font-size:var(--fs-body-2);line-height:1.5;resize:vertical;outline:0}
.tc-ask-own-foot{display:flex;align-items:center;gap:10px;margin-top:7px}
.tc-ask-hint{flex:1;min-width:0;font-size:12.5px;color:var(--t-meta);line-height:1.45}
.tc-ask-count{font-size:12px;color:var(--t4);white-space:nowrap}
/* Quiet, and on its own line: available without competing with the real answers. */
.tc-ask-dunno{display:inline-block;margin-top:10px;background:none;border:0;padding:0;cursor:pointer;
        font:650 13px var(--font);color:var(--t4)}
.tc-ask-dunno:hover{color:var(--t2)}
.tc-ask-dunno.on{color:var(--blue)}
.tc-blocked-why{font-size:13px;color:var(--t-meta);font-weight:550}
.btn[disabled]{opacity:.45;cursor:not-allowed}
/* The escape hatch is a text action, never a button competing with Apply. */
.tc-apply-raw{margin-left:auto;color:var(--t-meta)}
.tc-apply-raw:hover{color:var(--blue)}

/* ── The conflict block (03 mock) ────────────────────────────────────────────
   Amber head, the old line, the new line under an arrow. One block, nothing collapsed: seeing both
   lines together is the decision the client is being asked to make. */
.tc-diff{border:1px solid #F0E0B0;border-radius:11px;margin-top:12px;overflow:hidden;background:#fff}
.tc-diff-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;background:#FFF8E9;
        padding:9px 13px;border-bottom:1px solid #F5EAD3}
.tc-diff-lbl{font:700 13px var(--font);color:#8A5A00}
.tc-diff-title{font-size:12.5px;color:#A98A55;font-weight:600}
.tc-diff-date{font-size:12.5px;color:#A98A55;font-weight:600}
.tc-diff-arrow{color:var(--blue);font-weight:700}
/* Conflict card, redesigned (screenshot 3): current-knowledge box → arrow → proposal box. */
.tc-conflict{margin-top:12px;padding:12px 14px;background:#FFFBEF;border:1px solid #EBD9A8;border-radius:12px}
.tc-conflict-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px}
.tc-conflict-lbl{font-weight:700;font-size:13px;color:#8A6D1F}
.tc-conflict-meta{font-size:12px;color:#A98A55;font-weight:600;text-align:right;white-space:nowrap}
.tc-kbox{padding:11px 13px;border-radius:10px}
.tc-kbox-old{background:#FBFCFD;border:1px solid #EEF1F4}
.tc-kbox-new{background:#F5F8FF;border:1px solid #C9DBFF}
.tc-kbox-lbl{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#98A0AE;margin-bottom:4px}
.tc-kbox-new .tc-kbox-lbl{color:var(--blue,#3B5BFF)}
.tc-kbox-tag{display:inline-block;background:#E7EEFF;color:var(--blue,#3B5BFF);border-radius:5px;padding:1px 6px;margin-right:6px;text-transform:none;letter-spacing:0;font-size:10.5px}
.tc-kbox-text{font-size:13.5px;color:#6B7280;line-height:1.5}
.tc-kbox-text-b{color:#1F2733;font-weight:600}
/* A real gap between the boxes, with the arrow centred in it (screenshots 3/4). */
.tc-conflict-arrow{display:flex;justify-content:center;margin:7px 0}
.tc-conflict-arrow-i{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#fff;border:1px solid #E4E7EC;color:#6B7280;font-size:15px;box-shadow:0 1px 2px rgba(15,23,42,.08)}
/* Duplicate: the site already says this at the SAME value — a quiet grey note, never the amber clash block. */
.tc-prop-dupnote{margin-top:12px;padding:11px 14px;background:#F5F7FA;border:1px solid #E2E6EC;border-radius:10px}
.tc-prop-dupnote-lbl{font-weight:600;font-size:12.5px;color:#5B6472}
.tc-prop-dupnote-text{margin-top:5px;font-size:13.5px;color:#6B7280;line-height:1.5}
.tc-diff-oldtext{font-size:var(--fs-body-2);line-height:1.55;color:var(--t3);padding:11px 13px;
        border-bottom:1px solid #F2F3F6}
.tc-diff-new{font-size:var(--fs-body-2);line-height:1.55;color:var(--t1);font-weight:650;padding:11px 13px}
.tc-diff-note{font-size:12.5px;color:var(--t-meta);line-height:1.5;padding:0 13px 11px}
.tc-diff .tc-prop-ref{display:inline-block;margin-top:8px;font:650 12.5px var(--font);color:var(--blue)}

/* ══════════════════════════════════════════════════════════════════════════════════════
   MOBILE APP LAYER — targets page-local classes in views not yet migrated.
   Page <style> blocks load AFTER this file, so overrides of properties those blocks also
   set use !important. Deliberate, and contained to this section. Each block dies when its
   view is rebuilt on the system above.
   ══════════════════════════════════════════════════════════════════════════════════════ */
@media (max-width:820px){
  body{overflow-x:hidden}
  .content > *, .panel, .card{min-width:0}
  .content img,.content video,.content iframe{max-width:100%;height:auto}
  .page-head h1{min-width:0;overflow-wrap:anywhere}
  .content table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}

  /* Kennisbank (U4). Half of all use is a phone, so the 320px sources column moves BELOW the
     work rather than squeezing it, and the four-column list row becomes a stacked block. */
  .kb-page{margin:-1.8vw -2vw -2.3vw}
  .kb-head{padding:18px 16px 14px}
  .kb-page{margin:-18px -14px -26px}
  .kb-body{grid-template-columns:1fr}
  .kb-work{padding:18px 16px 24px}
  .kb-sources{padding:18px 16px 24px;border-left:0;border-top:1px solid var(--line-sec)}
  .kb-state{grid-template-columns:1fr;gap:14px;padding:16px}
    .kb-list{padding:18px 16px 26px}
  .kb-list-head{align-items:flex-start;flex-direction:column;gap:10px}
  .kb-list-tools{width:100%}
  .kb-search{width:100%}
  .kb-list-tools .ctl,.kb-select{height:auto;padding:11px 13px}
  .kb-r{grid-template-columns:1fr auto;gap:6px 12px;padding:14px 0}
  .kb-r-main{grid-column:1/-1}
  .kb-r-main .s{white-space:normal}
  /* Producten on a phone: the grid collapses, the 360px column goes under the knowledge. */
  .pr-head{padding:18px 16px 0}
  .pr-thead{display:none}
  .pr-row{grid-template-columns:44px minmax(0,1fr) auto;gap:10px 12px;padding:12px 16px}
  /* Same tree on a phone, just tighter — the rows are narrower but the relationship still has to read. */
  .pr-row.is-variant::before,.pr-row.is-variant::after{left:24px}
  .pr-row.is-variant::after{width:10px}
  .pr-row.is-variant .pr-thumb{margin-left:18px}
  .pr-row .pr-price,.pr-row .pr-stock{grid-column:2/3;font-size:13px}
  .pr-open{display:none}
  .pr-foot{flex-direction:column;align-items:flex-start;gap:4px;padding:14px 16px 20px}
  .pr-tools{width:100%}
  .pr-search{flex:1;width:auto}
  .pr-dhead{padding:18px 16px 14px}
  .pr-dbody{grid-template-columns:1fr}
  .pr-dleft{padding:16px;border-right:0;border-bottom:1px solid var(--line-sec)}
  .pr-dright{padding:16px}
  .vd-wrap{padding:16px}
  .vd-grid{grid-template-columns:1fr}
  .cv-wrap{padding:16px}
  .cv-kpis{grid-template-columns:1fr 1fr}
  .cv-thead{display:none}
  .cv-row,.es-row{grid-template-columns:1fr auto;gap:8px 12px;padding:14px 12px}
  .cv-sum{grid-column:1/-1}
  .cv-open{display:none}
  .cv-tools{gap:8px}
  .cv-spam{margin-left:0}
  .pr-q{flex-wrap:wrap}
  .pr-q .t{flex:1 1 100%;white-space:normal}
  .kb-r-when{text-align:right}
  .kb-q{flex-wrap:wrap;gap:8px 12px}
  .kb-q-text{white-space:normal;flex:1 1 100%}

  /* Kennisbank list (pre-U4 views still using these) */
  .k-item{flex-direction:column !important;gap:10px !important}
  .k-item > *{min-width:0}
  .k-actions{width:100%;justify-content:flex-start}
  .k-actions .btn-sm{padding:9px 13px;font-size:13px}
  .kv-tabs{flex-wrap:wrap}
  /* Kennisitem detail */
  .ver .vh{flex-wrap:wrap}
  /* Video's */
  .vd-vid{flex-direction:column !important}
  .vd-thumb{flex:0 0 auto !important;width:100% !important;height:170px !important}
  .vd-body{min-width:0}
  .vd-row{flex-wrap:wrap}
  .vd-guide-form{max-width:none !important}
  /* Trainen */
  .tc-msgs{min-height:200px !important;max-height:46vh !important}
  .sb-modal{padding:10px !important}
  .sb-modal-card{max-height:92dvh !important;padding:16px !important}
  /* Chat transcript modal */
  .cm-overlay{padding:10px 2vw !important}
  .cm-dialog{width:96% !important;max-width:96% !important;padding:12px 10px !important}
  .cm-close{position:sticky !important;top:8px !important;right:auto !important;
            margin:0 0 -36px auto !important;z-index:3}
  .cl-row{max-width:88% !important}
  .chatlog{padding:2px 0 !important}
  /* Inbox (CA5) */
  .ib{flex-direction:column !important}
  .ib-rail{flex:0 0 auto !important;width:100% !important}
  .ib-who{flex:0 0 auto !important;width:100% !important}
  .ib-row{flex-wrap:wrap}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}
.tc-underbtn-note{margin-top:8px;font-size:12px;color:#98A0AE;font-style:italic;line-height:1.4}
.tc-conflict-update{background:#F7F9FC;border-color:#E4E9F2}
.tc-conflict-update .tc-conflict-lbl,.tc-conflict-update .tc-conflict-meta{color:#5B6472}
.tc-diff-added{background:#E7F6EC;border-radius:3px;padding:0 2px}
.tc-diff-removed{background:#FDECEC;color:#98A0AE;text-decoration:line-through;border-radius:3px;padding:0 2px}
.tc-conflict-link{text-decoration:underline;cursor:pointer}
.train-usage{display:inline-block;margin-top:6px;font-size:12px;color:#98A0AE;cursor:help;border-bottom:1px dotted #C7CDD6}

/* "Toegevoegd" panel — expanded detail of a logged change + revert. */
.tr-item.is-open{background:var(--surface-2,#f6f7fb)}
.tr-detail{padding:8px 12px 12px;border-left:2px solid var(--border,#e6e8f0);margin:0 0 8px 10px}
.tr-diff{list-style:none;margin:0 0 8px;padding:0;font-size:12px}
.tr-diff li{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;padding:2px 0}
.tr-diff .k{font-weight:600}
.tr-diff .v-old{color:var(--muted,#6b7280);text-decoration:line-through}
.tr-diff .arr{color:var(--muted,#6b7280)}
.tr-diff .v-new{font-weight:600}
.tr-revert{font-size:12px;padding:4px 10px;border:1px solid var(--border,#e6e8f0);border-radius:6px;background:#fff;cursor:pointer}
.tr-revert:hover:not(:disabled){background:var(--surface-2,#f6f7fb)}
.tr-revert:disabled{opacity:.6;cursor:default}

/* Added-panel pager. */
.chlog-pager{display:flex;align-items:center;justify-content:center;gap:14px;padding:6px 0 2px}
.chlog-pager button{border:1px solid var(--border,#e6e8f0);background:#fff;border-radius:6px;width:28px;height:28px;cursor:pointer;font-size:15px;line-height:1}
.chlog-pager button:disabled{opacity:.4;cursor:default}
.chlog-pager .cp-info{font-size:12px;color:var(--muted,#6b7280);min-width:44px;text-align:center}

/* Training chat — inline video: our own sized poster facade (max 500px), click-to-load. */
.tc-video{max-width:500px;margin:8px 0}
.tc-video-facade{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:10px;cursor:pointer;background:#0b1020 center/cover no-repeat;overflow:hidden;padding:0}
.tc-video-facade.no-poster{background:linear-gradient(135deg,#2a3350 0%,#3a4a6b 50%,#4a3a6b 100%)}
.tc-video-facade.no-poster::before{content:"\1F3AC";position:absolute;top:10px;right:12px;font-size:18px;opacity:.55}
.tc-video-facade.has-poster::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.28)}
.tc-video-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.92);color:#111;display:flex;align-items:center;justify-content:center;font-size:20px;padding-left:3px}
.tc-video-title{position:absolute;left:10px;top:10px;z-index:1;max-width:80%;color:#fff;font-size:12px;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.6);text-align:left}
.tc-video-player{width:100%;aspect-ratio:16/9;border:0;border-radius:10px;display:block}
.tc-video-link{display:inline-block;margin-top:6px;font-size:12px;color:#0066cc}

/* Training chat — video richtlijn confirmation card. */
.tc-vcard{max-width:520px;margin:10px 0;border:1px solid var(--border,#e6e8f0);border-radius:12px;background:var(--surface,#fff)}
.tc-vcard-head{border-top-left-radius:12px;border-top-right-radius:12px}
.tc-vcard-head{padding:10px 14px;font-weight:600;color:#0a7d33;background:#eafaf0;border-bottom:1px solid #d4f1de}
.tc-vcard-meta{padding:10px 14px;font-size:13px;color:#333;display:flex;flex-direction:column;gap:4px}
.tc-vcard-meta .k{color:var(--muted,#6b7280);font-weight:600}
.tc-vcard-video{padding:0 14px}
.tc-vcard-video .tc-video{max-width:100%;margin:4px 0 12px}
.tc-vcard-link{display:inline-block;margin:0 14px 12px;font-size:13px;color:#0066cc}

/* Batch 3 — structured page section list + correction controls in the KB modal */
.ki-sec{border:1px solid var(--border,#e5e7eb);border-radius:8px;margin:6px 0}
.ki-sec>summary{cursor:pointer;padding:10px 12px;list-style:none;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ki-sec>summary::-webkit-details-marker{display:none}
.ki-sec-h{font-weight:600}
.ki-sec-prev{color:#6b7280;font-size:.9em;flex:1 1 100%;margin-top:2px}
.ki-sec-body{padding:0 12px 12px}
.ki-edit{margin:8px 0}
.ki-edit>summary{display:inline-block;cursor:pointer;margin-bottom:6px}
.ki-ta{width:100%;box-sizing:border-box;margin:6px 0;font:inherit;padding:8px;border:1px solid var(--border,#e5e7eb);border-radius:6px}

/* Batch (b) — "Te beoordelen" review evidence list */
.ki-ev{margin:6px 0 0;padding-left:18px}
.ki-ev li{margin:3px 0;font-size:.92em}
.ki-ev code{background:var(--code-bg,#f3f4f6);padding:1px 5px;border-radius:4px;font-size:.9em;word-break:break-all}

/* Live sync banner spinner */
.kb-sync-spin{display:inline-block;width:12px;height:12px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;vertical-align:middle;margin-right:8px;animation:kb-spin .8s linear infinite}
@keyframes kb-spin{to{transform:rotate(360deg)}}

/* "Te beoordelen" attention dot — yellow, only when there are items waiting */
.ctl.kb-review-attention::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:#f5a623;margin-right:7px;vertical-align:middle;box-shadow:0 0 0 3px rgba(245,166,35,.18)}