/* Rustig studio: warm white, Geist, hairlines instead of boxes, ink buttons and one rec-red accent
   that only means "look here" (overdue, the current step, open feedback, destructive, errors).
   Offline: the fonts are in ../fonts (Geist 1.7.2 and Geist Mono, SIL Open Font License, OFL.txt). */

@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400; font-display: block;
  src: url('../fonts/Geist-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 500; font-display: block;
  src: url('../fonts/Geist-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 600; font-display: block;
  src: url('../fonts/Geist-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 700; font-display: block;
  src: url('../fonts/Geist-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400; font-display: block;
  src: url('../fonts/GeistMono-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 500; font-display: block;
  src: url('../fonts/GeistMono-Medium.woff2') format('woff2'); }

:root {
  /* surfaces */
  --bg:            #fbfaf8;   /* main background, warm off-white */
  --bg-side:       #f4f2ee;   /* sidebar */
  --hl:            #f3f0eb;   /* hover, highlight, info banner */
  --track:         #efece7;   /* segmented control track */
  --seg-empty:     #e4dfd6;   /* an empty step segment */
  --surface:       #ffffff;   /* menus, dialogs, fields */
  --line:          #ebe7e0;   /* hairlines */
  --border:        #e3ded5;   /* control borders */
  --border-strong: #c9c2b6;   /* checkbox and ring strokes */
  /* ink: --muted passes 4.5:1 on bg, side, hl, track and every soft tint; --faint is for non-text only */
  --ink:           #1d1c1a;
  --ink-2:         #4a4741;
  --muted:         #6b665e;
  --faint:         #a8a49c;
  /* the one accent, "rec" red: fills and markers; its text shade; the time chips' tint */
  --rec:           #d24a22;
  --rec-text:      #b23f1c;
  --rec-soft:      #fbeee8;
  /* other states: a fill, its text shade, its soft tint, a banner heading */
  --ok:            #2f7d55;
  --ok-text:       #2a7350;
  --ok-soft:       #eaf3ec;
  --ok-head:       #22603f;
  --amber:         #b7791f;
  --amber-text:    #8f5d10;
  --amber-soft:    #fbf1df;
  --amber-head:    #7f4f0c;
  --bad-soft:      #fbece6;
  --bad-head:      #9c3518;
  --note-soft:     #fdf6e3;
  --note-text:     #5c4a1c;

  --radius:      10px;
  --radius-s:    8px;
  --radius-pop:  12px;
  --radius-chip: 6px;
  --shadow-pop:  0 16px 40px rgba(40, 35, 25, .16), 0 0 0 1px rgba(40, 35, 25, .07);
  --shadow-s:    0 1px 2px rgba(60, 50, 30, .08), 0 0 0 1px rgba(60, 50, 30, .05);
  --ease:        160ms ease;

  --font: 'Geist', -apple-system, system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 13.5px;
  line-height: 1.5;
  font-feature-settings: normal;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font); font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
h2, h3 { font-size: 16px; }

/* one focus ring for everything: 2px ink, outside the control; inside for menu items, colour
   swatches and camera rows (their row fills the menu) */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.dv-mi:focus-visible, .status-menu-item:focus-visible, .dv-swatch:focus-visible, .dv-camrow:focus-visible { outline-offset: -2px; }

.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #d8d2c8; border-radius: 6px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* ---------- App shell ---------- */
/* The sidebar (mock-ups 1A and 2): the mark and the name, the ink "New project" button, the projects
   and categories (the chosen one a white pill, counts muted on the right), the job card, and the two
   screens at the bottom. 220px wide: the mock-ups' 236px costs a 960px window room it needs. */
.app { display: flex; height: 100%; }
.sidebar {
  width: 220px; flex: none; display: flex; flex-direction: column; gap: 10px;
  padding: 14px 12px; background: var(--bg-side); border-right: 1px solid var(--line);
  user-select: none;
}
.main { flex: 1; min-width: 0; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; cursor: pointer; padding: 4px 8px 8px; }
/* the mark: an ink square holding a rec-red dot with a soft halo */
.brand-mark { width: 26px; height: 26px; flex: none; border-radius: 8px; display: grid; place-items: center; background: var(--ink); }
.brand-mark::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rec);
  box-shadow: 0 0 0 3px rgba(210, 74, 34, .25); }
.brand-name { min-width: 0; font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#newProjectBtn { width: auto; margin: 0 4px 6px; padding: 8px 12px; border-radius: 9px; justify-content: flex-start; gap: 8px; }
/* the list scrolls when it is long; 4px of room at the sides keeps the white pill's ring and shadow */
.side-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; overflow-y: auto;
  margin: 0 -4px; padding: 1px 4px; }
.side-foot { display: flex; flex-direction: column; gap: 2px; }
.side-label { font-size: 12px; font-weight: 400; color: var(--muted); padding: 16px 10px 4px; }
.side-item {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px;
  color: var(--ink-2); font-size: 13.5px; font-weight: 500; cursor: pointer;
  transition: background var(--ease), color var(--ease), box-shadow var(--ease);
}
.side-item:hover { background: rgba(40, 35, 25, .05); }
.side-item.is-on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-s); }
.side-item > span:not(.count) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-item .count { margin-left: auto; color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.side-icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; }
/* a category's colour: a rounded square; in the sidebar centred where the icons are */
.cdot { width: 8px; height: 8px; border-radius: 3px; flex: none; display: inline-block; }
.side-item .cdot { margin: 0 4px; }

/* ---------- Buttons ---------- */
/* primary .btn-accent (ink), secondary .btn-outline (white, a control border), tertiary .btn-ghost
   (plain text, a tint on hover), .btn-danger (red text); .btn-icon a 36px square holding an svg,
   .btn-ic a 14px svg inside a button */
.btn {
  font-family: var(--font); font-size: 13.5px; font-weight: 500; line-height: 1.5;
  padding: 7px 14px; border: 1px solid transparent; border-radius: var(--radius-s);
  cursor: pointer; transition: background var(--ease), border-color var(--ease), color var(--ease), box-shadow var(--ease);
  color: var(--ink-2); background: transparent; white-space: nowrap;
}
.btn-accent { background: var(--ink); color: #fff; }
.btn-accent:hover { background: #000; }
.btn-ghost { color: var(--ink-2); }
.btn-ghost:hover { background: var(--hl); color: var(--ink); }
.btn-outline { border-color: var(--border); background: var(--surface); }
.btn-outline:hover { border-color: var(--border-strong); background: var(--surface); color: var(--ink); }
.btn-danger, .btn-danger:hover { color: var(--rec-text); }
.btn-danger:hover { background: var(--bad-soft); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-accent[disabled]:hover { background: var(--ink); }
.btn-outline[disabled]:hover { border-color: var(--border); }
.btn-ghost[disabled]:hover, .btn-danger[disabled]:hover { background: transparent; }
.btn-lg { padding: 10px 18px; font-size: 14px; border-radius: 9px; }
.btn-block { width: 100%; }
.btn:has(> .btn-ic) { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.btn-icon { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; }
.btn-icon > svg { width: 16px; height: 16px; }
.btn-ic { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
/* a breadcrumb link: "‹ Projecten" */
.crumb { font: inherit; font-size: 13px; color: var(--muted); background: none; border: 0; padding: 0; cursor: pointer;
  border-radius: 4px; transition: color var(--ease); }
.crumb:hover { color: var(--ink); }

/* ---------- Screen container ---------- */
.screen { max-width: 1120px; margin: 0 auto; padding: 28px 32px 56px; animation: rise .22s ease-out; }
@keyframes rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (min-width: 1100px) { .screen { padding: 30px 44px 60px; } }

.screen-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 4px; }
.screen-head h1 { font-size: 26px; font-weight: 600; letter-spacing: -.03em; line-height: 1.2; }
@media (min-width: 1100px) { .screen-head h1 { font-size: 30px; } }
.head-sub { margin-top: 2px; }
.head-tools { display: flex; align-items: center; gap: 14px; }
.eyebrow { font-size: 13px; font-weight: 400; color: var(--muted); margin-bottom: 4px; }
.subtle { color: var(--muted); font-size: 13px; }
.section-gap { margin-top: 24px; }

/* ---------- Segmented control (tabs): a warm track, the chosen one white ---------- */
/* also the structure editor's tabs (.str-tabs / .str-tab, role=tab; mock-up 1A) */
.seg, .str-tabs { display: inline-flex; gap: 2px; padding: 3px; background: var(--track); border-radius: 9px; border: 0; }
.seg-btn, .str-tab { font-family: var(--font); font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--muted);
  background: transparent; border: 0; padding: 4px 12px; border-radius: 7px; cursor: pointer;
  transition: background var(--ease), color var(--ease), box-shadow var(--ease); }
.seg-btn:hover, .str-tab:hover { color: var(--ink); }
.seg-on, .str-tab.is-on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-s); }

/* ---------- Grouped project list (mock-up 2) ---------- */
/* Quiet text headings with a muted count, no bars ("Te laat" in red); rows on hairlines, with the
   step segments under the name (done in ink, the current one red) and the deadline on the right;
   the done group a quiet disclosure button. .group-head is also the structure screens' heading. */
.group-head { display: flex; align-items: baseline; gap: 8px; margin: 26px 0 4px; padding: 0;
  font-size: 13px; font-weight: 600; color: var(--ink-2); }
.group-count { color: var(--muted); font-weight: 400; }
.group-overdue .group-name { color: var(--rec-text); }
.group-toggle { display: inline-flex; align-items: center; gap: 8px; margin: 22px 0 4px; padding: 2px 6px 2px 0;
  font: inherit; font-size: 13px; color: var(--muted); background: none; border: 0; border-radius: 6px;
  cursor: pointer; transition: color var(--ease); }
.group-toggle:hover { color: var(--ink); }
.group-toggle .btn-ic { width: 12px; height: 12px; stroke-width: 2.4; transition: transform var(--ease); }
.group-toggle[aria-expanded="true"] .btn-ic { transform: rotate(90deg); }
.row {
  position: relative;
  display: grid; grid-template-columns: 22px minmax(0, 1fr) 130px 70px 170px; align-items: center; gap: 12px;
  padding: 12px; border-radius: 10px; cursor: pointer; transition: background var(--ease);
}
/* the hairline between two rows: straight from edge to edge (a shadow would follow the row's rounded
   corners), gone around the hovered row */
.row + .row::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--line); }
.row:hover { background: var(--hl); }
.row:hover::before, .row:hover + .row::before { display: none; }
/* columns: status, name, category, shoot date, deadline. A date with its year ("28 dec 2025", 75px)
   runs 5px into the gap; a deadline too long for its column shortens its date part (min 44px) and
   never runs left into the shoot date. */
/* with work steps: a second line under the name (workflow.js wfMiniHtml), across the name, category and date */
.row.has-wf { grid-template-rows: auto auto; row-gap: 5px; }
.wf-mini { grid-column: 2 / 5; grid-row: 2; display: flex; align-items: center; gap: 10px; min-width: 0;
  font-size: 12.5px; white-space: nowrap; }
.wf-mini-bar { flex: none; display: flex; gap: 3px; }
.wf-mini-bar > i { width: 10px; height: 4px; border-radius: 2px; background: var(--seg-empty); }
.wf-mini-bar > i.is-done { background: var(--ink-2); }
.wf-mini-bar > i.is-now { background: var(--rec); }
.wf-mini-t { min-width: 0; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.wf-mini-t b { font-weight: 500; color: var(--ink-2); }
.wf-mini-t.is-done { color: var(--ok-text); }
.wf-mini-fb { flex: none; color: var(--rec-text); }
.row-name { font-size: 13.5px; font-weight: 600; letter-spacing: -.005em; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctag { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.ctag > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.row-date { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.row-due { display: flex; justify-content: flex-end; align-items: baseline; gap: 8px; font-size: 13px;
  color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.row-due b { font-weight: 600; color: var(--ink); }
.row-due span { min-width: 44px; text-align: right; }
.due-overdue b { color: var(--rec-text); }
.due-soon b { color: var(--amber-text); }
.group-done .row-name { color: var(--muted); }

/* ---------- Status icon ---------- */
.sicon { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; cursor: pointer; flex: none;
  transition: background var(--ease); }
.sicon:hover { background: rgba(40, 35, 25, .07); }
.sicon-not_started { color: var(--faint); }
.sicon-in_progress { color: var(--ink-2); }
.sicon-done { color: var(--ink); }

/* ---------- Timeline ---------- */
/* The same tokens as the list: hairlines, the warm side colour for the head, category tints for the
   bars (never red: an overdue project is its red label and the red hatching after its deadline). */
.tl { margin-top: 22px; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.tl-inner { position: relative; }
.tl-head { display: flex; height: 44px; border-bottom: 1px solid var(--line); background: var(--bg-side); }
.tl-corner { width: 210px; flex: none; position: sticky; left: 0; z-index: 3; background: var(--bg-side);
  border-right: 1px solid var(--line); }
.tl-scale { position: relative; flex: none; height: 100%; overflow: hidden; }
.tl-month { position: absolute; top: 6px; padding-left: 6px; font-size: 12px; font-weight: 600; color: var(--ink-2);
  white-space: nowrap; border-left: 1px solid var(--line); height: 18px; line-height: 12px; }
.tl-day { position: absolute; top: 24px; padding-left: 4px; font-size: 11px; color: var(--muted);
  font-variant-numeric: tabular-nums; }
.tl-body { position: relative; }
.tl-grid { position: absolute; top: 0; bottom: 0; pointer-events: none; }
.tl-week { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); }
.tl-row { display: flex; height: 40px; cursor: pointer; }
.tl-row:hover .tl-name, .tl-row:hover .tl-track { background: var(--hl); }
.tl-name { width: 210px; flex: none; position: sticky; left: 0; z-index: 2; display: flex; align-items: center; gap: 6px;
  padding: 0 10px 0 8px; background: var(--surface); border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line); font-weight: 500; font-size: 13px; }
.tl-name > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-track { position: relative; flex: none; border-bottom: 1px solid var(--line); }
.tl-bar {
  position: absolute; top: 9px; height: 22px; border-radius: 6px; overflow: hidden;
  background: color-mix(in srgb, var(--c) 14%, white); border: 1px solid color-mix(in srgb, var(--c) 40%, white);
  display: flex; align-items: center; justify-content: flex-end; padding: 0 7px;
}
.tl-bar::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c); }
.tl-bar span { font-size: 11.5px; font-weight: 600; color: color-mix(in srgb, var(--c) 60%, black); white-space: nowrap; }
.tl-bar.tl-overdue span { color: var(--rec-text); }
.tl-bar.tl-done { background: var(--hl); border-color: var(--line); }
.tl-bar.tl-done span { color: var(--muted); }
.tl-bar.tl-clip { border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22px); }
.tl-bar.tl-clip::before { display: none; }
.tl-late { position: absolute; top: 15px; height: 10px; border-radius: 0 5px 5px 0;
  background: repeating-linear-gradient(135deg, rgba(210, 74, 34, .5) 0 4px, rgba(210, 74, 34, .15) 4px 8px); }
.tl-today { position: absolute; top: -44px; bottom: 0; width: 2px; margin-left: -1px; background: var(--ink);
  z-index: 1; pointer-events: none; }
.tl-today span { position: absolute; top: 2px; right: 5px; font-size: 10.5px; font-weight: 700; color: #fff;
  background: var(--ink); padding: 1px 6px; border-radius: 4px; }

/* ---------- Pills ---------- */
.pill { font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: var(--radius-chip); white-space: nowrap; }
.pill-ok   { background: var(--hl); color: var(--ink-2); }
.pill-muted{ background: var(--hl); color: var(--muted); }

/* ---------- Status dropdown ---------- */
.status-menu { position: fixed; z-index: 70; background: var(--surface); border: 0; border-radius: var(--radius-pop);
  box-shadow: var(--shadow-pop); padding: 6px; min-width: 176px; animation: pop var(--ease); }
.status-menu-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  border-radius: 8px; font-size: 13.5px; font-weight: 500; color: var(--ink);
  cursor: pointer; white-space: nowrap; transition: background var(--ease); }
.status-menu-item:hover, .status-menu-item:focus-visible { background: var(--hl); }
.status-menu-item .sicon { width: 18px; height: 18px; }
.status-menu-item .status-check { margin-left: auto; color: var(--muted); font-weight: 600; }

/* a section without a box (the summaries' lists of files, a missing project folder): a 16px heading,
   then its text or hairline rows */
.panel { background: none; border: 0; border-radius: 0; padding: 0; }
.panel h3 { font-size: 16px; letter-spacing: -.01em; margin-bottom: 6px; }
.panel > .subtle { margin-bottom: 4px; }
.row-list { display: flex; flex-direction: column; gap: 0; }
.row-list .ri { display: flex; justify-content: space-between; align-items: center; font-size: 13px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.row-list .ri:last-child { border-bottom: 0; }
.row-list .ri.dim, .row-list .ri .dim { color: var(--muted); }
/* import / backup summary (mock-up states 2 and 3) and the project page's problem banners */
/* A soft tint per tone (spec call 1), the tone's icon as a filled circle and its heading in the tone's
   dark shade. The icon's white mark is large bold text (19px 700: AA needs 3:1 there), so it reads on
   every tone's fill. */
.sum-banner { display: flex; gap: 14px; align-items: flex-start; border-radius: 12px; padding: 18px 20px; margin-top: 18px; }
.sum-banner.is-ok { background: var(--ok-soft); }
.sum-banner.is-bad { background: var(--bad-soft); }
.sum-banner.is-info { background: var(--hl); }
.sum-ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none;
  color: #fff; font-weight: 700; font-size: 19px; line-height: 1; background: var(--muted); }
.is-ok > .sum-ic { background: var(--ok); }
.is-bad > .sum-ic { background: var(--rec); }
.sum-body { flex: 1; min-width: 0; }
.sum-body h3 { font-size: 16px; color: var(--ink); }
.is-ok .sum-body h3 { color: var(--ok-head); }
.is-bad .sum-body h3 { color: var(--bad-head); }
.sum-body p { color: var(--ink-2); margin-top: 2px; max-width: 760px; }
/* what is still on the card: a line each, under the banner's text */
.sum-lines { margin-top: 8px; }
.sum-lines p { margin-top: 3px; }
/* the counts under the banner: rows on hairlines, no box */
.sum-list { margin-top: 14px; }
.sum-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 2px;
  border-bottom: 1px solid var(--line); }
.sum-row:last-child { border-bottom: 0; }
.sum-row b { font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.sum-row span { color: var(--muted); text-align: right; flex: 0 0 auto; max-width: 60%; font-variant-numeric: tabular-nums; }
.sum-note { color: var(--muted); font-size: 12.5px; margin-top: 10px; }
.sum-actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 22px; }
.sum-hint { color: var(--muted); font-size: 12.5px; }
.sum-btns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.proj-banner { padding: 14px 16px; align-items: center; }
.proj-banner .sum-body h3 { font-size: 14px; }
.proj-banner .sum-body p { margin-top: 1px; }
.pb-meta { color: var(--muted); font-size: 12px; margin-top: 2px; }
.pb-acts { display: flex; gap: 8px; flex: none; }
.proj-banner .btn-ghost:hover, .dv-banner .btn-ghost:hover { background: rgba(40, 35, 25, .07); }
.actions-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }

/* ---------- Project page: the header (mock-up 3 "Nieuw") ---------- */
/* "‹ Projecten", the title (shortened with an ellipsis; the path in its tooltip) over the category,
   the deadline on the right; then one ink "Media toevoegen", the DaVinci menu and •••, and a quiet
   hint line under them (how to turn DaVinci on). */
.pj-top { display: flex; align-items: flex-end; gap: 16px; margin-top: 2px; }
.pj-id { flex: 1; min-width: 0; }
.pj-title { font-size: 26px; font-weight: 600; letter-spacing: -.03em; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 1100px) { .pj-title { font-size: 30px; } }
.pj-cat { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: 4px; color: var(--ink-2); }
.pj-cat > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-cat.is-none { color: var(--muted); }
/* the deadline is a button (the deadline popover, app.js pjDeadlinePop): no box at rest, the warm tint
   on hover and while its popover is open; the padding sits outside the text, so it stays in place */
.pj-due { flex: none; font: inherit; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap;
  color: inherit; background: none; border: 0; border-radius: 8px; padding: 4px 8px; margin: 0 -8px -4px 0;
  cursor: pointer; transition: background var(--ease); }
.pj-due:hover, .pj-due[aria-expanded="true"] { background: var(--hl); }
.pj-due b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.pj-due.is-overdue b { color: var(--rec-text); }
.pj-due.is-soon b { color: var(--amber-text); }
.pj-due-d { display: block; font-size: 12.5px; color: var(--muted); }
.pj-due.is-none .pj-due-d { font-size: 13px; }
.pj-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 36px; margin-top: 20px; }
.pj-dv-ic { width: 15px; height: 15px; stroke-width: 1.8; }
.pj-chev { width: 12px; height: 12px; stroke-width: 2.2; }
.pj-hint { margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.pj-hint:empty { display: none; }
.pj-missing { margin-top: 22px; }
.pj-missing .subtle { margin: 8px 0 14px; }

/* ---------- Project page: the step bar, Work steps and Log and notes (workflow.js) ---------- */
/* Mock-up 2, no boxes: a thin step bar between two hairlines (done segments in ink, the current one
   red), then two columns: Work steps on the left; the client feedback, then the log and notes on the
   right. Ink ticks, a red "nu" badge, red time chips and a small red diamond before "in DaVinci"; the
   log quiet, own notes on a soft yellow block. Focus: the one ink ring (:focus-visible above). */
.wf-bar { margin-top: 22px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.wf-bar-top { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.wf-bar-t { min-width: 0; font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wf-bar-n { flex: none; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.wf-segs { display: flex; gap: 4px; margin-top: 10px; }
.wf-segs > i { flex: 1; min-width: 0; height: 5px; border-radius: 3px; background: var(--seg-empty); }
.wf-segs > i.is-done { background: var(--ink-2); }
.wf-segs > i.is-now { background: var(--rec); }
.wf-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; margin-top: 22px; align-items: start; }
@media (min-width: 1100px) { .wf-grid { gap: 44px; } }
.wf-side { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
#wfFeedback:empty { display: none; }
/* a column part, without a box; the log's narrow layout asks for its width (@container below) */
.wf-card { min-width: 0; container-type: inline-size; }
/* the title with its quiet note beside it ("van de structuur …"), which goes under the title as one
   line when it does not fit beside it; "＋ Notitie" on the right */
.wf-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.wf-head h3 { flex: none; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.wf-h-r { display: flex; gap: .3em; min-width: 0; max-width: 100%; white-space: nowrap; font-size: 12.5px; color: var(--muted); }
.wf-h-s { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wf-h-sep, .wf-h-r .wf-a { flex: none; }
.wf-a { border: 0; background: none; padding: 0; font: inherit; color: var(--ink-2); cursor: pointer; border-radius: 4px;
  text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; transition: color var(--ease); }
.wf-a:hover { color: var(--ink); }
.wf-empty { padding: 6px 4px; font-size: 13px; color: var(--muted); }
/* Work steps: an ink checkbox, the name with its tags, the line under a ticked step; rows drag (rows.js) */
.wf-list { margin-top: 6px; }
.wf-step { position: relative; display: flex; align-items: flex-start; gap: 11px; padding: 8px 4px;
  border-bottom: 1px solid var(--line); cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; }
.wf-step:last-child { border-bottom: 0; }
.wf-step.is-dragging { opacity: .4; }
.wf-step.dv-drop-before::before { top: -1px; }
.wf-step.dv-drop-after::after { bottom: -1px; }
.wf-ck { flex: none; width: 18px; height: 18px; margin-top: 1px; padding: 0; display: grid; place-items: center;
  border: 1.5px solid var(--border-strong); border-radius: 6px; background: transparent; color: #fff;
  font-size: 11px; font-weight: 700; line-height: 1; cursor: pointer; transition: background var(--ease), border-color var(--ease); }
.wf-ck:hover { border-color: var(--ink-2); }
.wf-ck[aria-checked="true"] { background: var(--ink); border-color: var(--ink); }
.is-cur > .wf-ck { border-color: var(--ink-2); }
.wf-st { flex: 1; min-width: 0; }
.wf-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.wf-nm { min-width: 0; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.is-done .wf-nm { color: var(--muted); }
/* "automatisch" quiet green text; "nu" white on red; what a step waits for, a muted line under it */
.wf-tag { min-width: 0; max-width: 100%; font-size: 11.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wf-tag.is-auto { color: var(--ok-text); }
.wf-tag.is-now { padding: 1px 7px; border-radius: 5px; background: var(--rec-text); color: #fff; line-height: 16px; }
.wf-tag.is-wait { flex-basis: 100%; font-size: 12.5px; font-weight: 400; color: var(--muted); white-space: normal; overflow-wrap: anywhere; }
.wf-sub { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.wf-x { flex: none; width: 22px; height: 22px; margin: -1px -2px -2px 0; padding: 0; display: grid; place-items: center;
  border: 0; border-radius: 5px; background: transparent; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; }
.wf-x:hover { background: var(--bad-soft); color: var(--rec-text); }
/* the own task: a dashed slot, solid and white while typing */
.wf-own { display: flex; gap: 8px; margin-top: 8px; }
.wf-own .input { flex: 1; min-width: 0; padding: 7px 12px; font-size: 13px; text-overflow: ellipsis;
  border: 1px dashed var(--border-strong); border-radius: 9px; background: transparent; }
.wf-own .input:focus { border-style: solid; background: var(--surface); }
.wf-own .btn { padding: 6px 12px; }
/* Client feedback: a dashed white paste box, one row per point (checkbox, a red time chip, the text,
   "in DaVinci" after a red diamond or why DaVinci did not take it, ×), and the row that puts them
   into DaVinci (a secondary button, the timeline beside it) */
.wf-card .wf-fb-in { display: block; margin-top: 8px; min-height: 60px; padding: 10px 13px; resize: none; line-height: 1.45;
  font-size: 13px; border: 1px dashed var(--border-strong); border-radius: 10px; background: var(--surface); }
.wf-card .wf-fb-in::placeholder { color: var(--muted); }
.wf-card .wf-fb-in:focus { border-style: solid; }
.wf-fbl { margin-top: 6px; }
.wf-fbl:empty { display: none; }
.wf-fb { display: flex; align-items: flex-start; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--line); }
.wf-fb:last-child { border-bottom: 0; }
.wf-fb.is-ed { align-items: center; padding-top: 4px; padding-bottom: 4px; }
.wf-fb.is-ed > .wf-ck { margin-top: 0; }
.wf-tc { flex: none; padding: 1px 7px; border-radius: 6px; background: var(--rec-soft); color: var(--rec-text);
  font-family: var(--mono); font-size: 12.5px; font-weight: 500; line-height: 18px; font-variant-numeric: tabular-nums; }
.wf-fb-body { flex: 1; min-width: 0; }
.wf-fb-txt { min-height: 20px; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; cursor: text; border-radius: 4px; }
.is-done .wf-fb-txt { color: var(--muted); text-decoration: line-through; }
.wf-fb-why { margin-top: 2px; line-height: 20px; }
.wf-fb-warn { padding: 1px 6px; border-radius: 5px; background: var(--amber-soft); color: var(--amber-text); font-size: 11.5px; font-weight: 500;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.wf-mk { flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; line-height: 20px; color: var(--muted); white-space: nowrap; }
.wf-dia { flex: none; width: 7px; height: 7px; border-radius: 1px; background: var(--rec); transform: rotate(45deg); }
.wf-fb > .wf-x { margin-top: -1px; }
.wf-fb .wf-fb-ed { flex: 1; min-width: 0; padding: 4px 9px; }
.wf-fb-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 10px; }
.wf-fb-foot[hidden] { display: none; }
.wf-fb-foot .btn { padding: 6px 12px; font-size: 13px; }
.wf-fb-on { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; font-size: 13px; color: var(--muted); }
.wf-fb-on label { flex: none; }
.wf-fb-on .select { width: auto; min-width: 0; max-width: 100%; padding: 5px 10px; font-size: 13px; color: var(--ink-2); text-overflow: ellipsis; }
/* Log and notes: the date, a muted icon, the text; automatic entries quiet, own notes on a soft yellow
   block that a click edits (its editor the same colours) */
.wf-add-note { flex: none; margin-left: auto; }
.wf-fil { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.wf-chip { border: 0; border-radius: 6px; padding: 1px 8px; background: var(--hl); color: var(--muted);
  font-family: var(--font); font-size: 12px; font-weight: 500; line-height: 18px; cursor: pointer;
  transition: background var(--ease), color var(--ease); }
.wf-chip:hover { color: var(--ink); }
.wf-chip.is-on { background: var(--ink); color: #fff; }
.wf-log { margin-top: 8px; }
.wf-le { display: flex; align-items: flex-start; gap: 10px; padding: 6px 4px; font-size: 13px; }
.wf-when { flex: none; width: 92px; font-size: 12.5px; line-height: 19.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.wf-ic { flex: none; width: 14px; height: 19.5px; display: grid; place-items: center; color: var(--muted); }
.is-mine > .wf-when, .is-mine > .wf-ic { margin-top: 3px; }
.wf-txt { flex: 1; min-width: 0; line-height: 19.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.is-sys .wf-txt { color: var(--ink-2); }
.wf-names { color: var(--muted); }
.is-mine .wf-txt { flex: 0 1 auto; padding: 3px 9px; border-radius: 7px; background: var(--note-soft); color: var(--note-text); cursor: text; }
.is-mine > .wf-x { margin: 2px -2px 0 auto; }
.input.wf-ed { flex: 1; min-width: 0; min-height: 64px; padding: 2px 8px; resize: vertical; font-family: var(--font); font-size: 13px;
  line-height: 19.5px; color: var(--note-text); background: var(--note-soft); border-color: transparent; border-radius: 7px; }
/* a narrow column (the right one in a 960 px window): the date on its own line above the entry */
@container (max-width: 400px) {
  .wf-le { flex-wrap: wrap; row-gap: 1px; }
  .wf-le > .wf-when, .wf-le.is-mine > .wf-when { flex: 0 0 100%; width: auto; margin-top: 0; line-height: 16px; }
}
/* DaVinci results (davinci.js): orange when not everything worked (the footage itself is safe),
   a smaller banner than the import's own, with steps, a short list and the buttons below the text */
.sum-banner.is-warn { background: var(--amber-soft); }
.is-warn > .sum-ic { background: var(--amber); }
.is-warn .sum-body h3 { color: var(--amber-head); }
.dv-banner { padding: 14px 16px; gap: 12px; }
/* a smaller circle, the same large bold mark (19px 700, AA's large text: 3:1 on every tone's fill) */
.dv-banner > .sum-ic { width: 26px; height: 26px; }
.dv-banner .sum-body h3 { font-size: 14px; }
.dv-banner .sum-body p { margin-top: 2px; }
.dv-banner > .dv-spin { background: transparent; }
.dv-slot .dv-banner { margin-top: 14px; }
.dv-steps { margin: 6px 0 0 20px; color: var(--ink-2); }
.dv-steps li { padding: 1px 0 1px 2px; }
.dv-rows { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 16px; margin-top: 8px; max-width: 760px; }
.dv-rows > span { min-width: 0; overflow-wrap: anywhere; color: var(--ink-2); }
.dv-rows > .dv-k { color: var(--muted); }
.dv-detail { margin-top: 6px; font: 12px/1.45 var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.dv-quiet { color: var(--muted); font-size: 12.5px; }
.dv-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.dv-close { flex: none; margin: -5px -8px 0 0; padding: 4px 9px; font-size: 12.5px; color: var(--muted); }
.dv-hint { font-size: 12.5px; }
.dv-hint .link { margin-left: 2px; }
/* the add-media dialog's "Then also put it into DaVinci", under a hairline */
.as-dv { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.as-dv .check { padding: 4px 0 2px; }
.as-dv .check b { font-weight: 600; }
.as-dv-hint { margin: 0 0 0 23px; }

/* ---------- Forms ---------- */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.input, .select {
  width: 100%; font-family: var(--font); font-size: 13.5px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-s);
  padding: 8px 11px; transition: border-color var(--ease), box-shadow var(--ease);
}
.input::placeholder { color: var(--muted); }
.input:hover, .select:hover { border-color: var(--border-strong); }
/* focused: a darker border; the ring is the :focus-visible one */
.input:focus, .select:focus { border-color: var(--ink-2); }
.pathpick { display: flex; gap: 8px; }
.pathpick .input { flex: 1; }
.field-hint { font-size: 12px; color: var(--muted); margin-top: 6px; }
.field-error { color: var(--rec-text); }
.check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink);
  padding: 6px 0; cursor: pointer; }
.field .check { display: flex; font-size: 13px; font-weight: 400; color: var(--ink); margin: 0; }
.check input { width: 15px; height: 15px; accent-color: var(--ink); cursor: pointer; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--ink); }
.check-sm { font-size: 12.5px; color: var(--ink-2); padding: 0; user-select: none; }

/* ---------- New-project wizard ---------- */
/* The stepper: 22px dots on hairlines; the current one ink with a white number, a done one the warm
   tint with an ink tick, the rest the tint with a muted number. The step itself has no box (the page
   is its card); the buttons under it as before: Back (tertiary) left, Continue (primary) right. */
.steps { display: flex; align-items: center; gap: 8px; margin: 12px 0 26px; }
.steps .st { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; font-weight: 400;
  white-space: nowrap; }
.steps .dot { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--hl); color: var(--muted); font-size: 11.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.steps .st.done .dot { color: var(--ink); }
.steps .st.active .dot { background: var(--ink); color: #fff; }
.steps .st.active { color: var(--ink); font-weight: 500; }
.steps .line { flex: 1; height: 1px; background: var(--line); min-width: 14px; }
/* the dialogs' cards (.ov-card, .as-card) keep their own look; on a screen there is no box */
.wizard-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow-s); }
.screen .wizard-card { background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
.wizard-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 18px; }
/* the date step's deadline (app.js wizDlPaint): a quiet line with "Eigen datum kiezen", or a date field
   of its own in a row with "Geen deadline" and "Standaard gebruiken" */
.wiz-dl-line { font-size: 12.5px; color: var(--muted); }
.link.wiz-dl-own { margin-left: 8px; font: inherit; font-weight: 500; background: none; border: 0; padding: 0; }
.wiz-dl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.input.wiz-dl-date { width: 200px; }

/* ---------- Dialogs ---------- */
/* One overlay and one card for every dialog: a warm dim that fades in over the app, and a white card
   with the pop shadow that pops in. The add-media dialog (.as-ov / .as-card) and the DaVinci edit
   windows (.dv-ov / .dv-win) share them. The small dialogs (askText, confirmBox, askCategory,
   askNewCategory) keep .wizard-card beside .ov-card; .ov-card wins (it comes later). */
.ov, .as-ov, .dv-ov { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  background: rgba(29, 28, 26, .32); animation: fade var(--ease); }
.ov-card, .as-card, .dv-win { background: var(--surface); border: 0; border-radius: var(--radius-pop);
  box-shadow: var(--shadow-pop); padding: 20px 22px; animation: pop var(--ease); }
.ov-card { width: 380px; max-width: calc(100% - 32px); }
.ov-card.ov-cat { width: 400px; }
.ov-card.new-cat { width: 420px; }
.ov-h { font-size: 18px; letter-spacing: -.01em; margin-bottom: 14px; }
.ov-msg { font-size: 14px; color: var(--ink); margin-bottom: 18px; }
/* the buttons on the right: Cancel (tertiary), then the main one */
.ov-card .wizard-foot, .as-card .wizard-foot { justify-content: flex-end; gap: 8px; margin-top: 18px; }

/* ---------- Progress ---------- */
.progress-wrap { margin-top: 18px; }
.bar { height: 6px; border-radius: 4px; background: var(--line); overflow: hidden; }
.bar > i { display: block; height: 100%; width: 0; border-radius: 4px;
  background: var(--ink); transition: width .25s ease; }
.progress-label { font-size: 13px; color: var(--ink-2); margin-top: 9px; }
.bar.thin { height: 4px; }

/* import / backup / DaVinci progress screen (jobs.js, davinci.js): the steps (done in green, the
   current one ink), then no box but two hairlines around the big number, an 8px ink bar, three plain
   counts and the file being copied in mono */
.job-src { color: var(--muted); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.job-src b { color: var(--ink-2); font-weight: 600; }
.job-steps { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 22px; font-size: 12.5px; font-weight: 500;
  color: var(--muted); font-variant-numeric: tabular-nums; }
.job-steps .is-done { color: var(--ok-text); }
.job-steps .is-now { color: var(--ink); font-weight: 600; }
.job-big { margin-top: 18px; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.job-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.job-pct { font-family: var(--font); font-size: 40px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1;
  font-variant-numeric: tabular-nums; }
.job-gb { color: var(--ink-2); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.job-bar { height: 8px; margin-top: 14px; border-radius: 4px; }
.job-bar > i { border-radius: 4px; }
.job-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.job-tile { min-width: 0; }
.job-tile b { display: block; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.job-tile span { color: var(--muted); font-size: 12px; }
.job-now { display: flex; align-items: center; gap: 12px; margin-top: 16px; min-height: 19px; }
.job-file { font: 500 12.5px var(--mono); color: var(--ink); min-width: 0; max-width: 55%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.job-size { color: var(--muted); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.job-now .bar { flex: 1; min-width: 60px; }
.job-actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 22px; }
.job-hint { color: var(--muted); font-size: 12.5px; }

/* sidebar card: the running or latest import / backup / DaVinci step, on every screen. A white card
   with the soft shadow; its tone keeps green and red as strong as the banners (spec call 1): done
   green, attention red, DaVinci not (all) done amber, an import not safe to format calm grey. */
.job-card { flex: none; border: 0; background: var(--surface); border-radius: 10px; box-shadow: var(--shadow-s);
  padding: 10px 11px; cursor: pointer; transition: box-shadow var(--ease); }
.job-card:hover { box-shadow: 0 2px 8px rgba(60, 50, 30, .12), 0 0 0 1px rgba(60, 50, 30, .08); }
.jc-top { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.jc-right { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.jc-sub { display: flex; min-width: 0; color: var(--muted); font-size: 11.5px; margin-top: 2px; white-space: nowrap; }
/* The name gives way first (down to a few letters); a detail too long for the line (a reason
   such as "schijf kan geen grote bestanden opslaan") then wraps in its own column. */
.jc-name { flex: 0 1000 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.jc-name:not(:empty) { min-width: 4.5em; }
.jc-detail { flex: 0 1 auto; min-width: 0; white-space: pre-wrap; }
.jc-extra { color: var(--ink-2); font-size: 11.5px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.job-card .bar { margin-top: 7px; }
.job-card.is-ok .jc-right { color: var(--ok-text); font-weight: 600; }
.job-card.is-ok .bar > i { background: var(--ok); }
.job-card.is-bad .jc-top, .job-card.is-bad .jc-right { color: var(--rec-text); font-weight: 600; }
.job-card.is-bad .bar > i { background: var(--rec); }
/* an import that is not safe to format (something stays on the card): calm, no green */
.job-card.is-info .bar > i { background: var(--faint); }
/* a DaVinci step that did not (all) work: amber, as its banner (the footage itself is safe) */
.job-card.is-warn .jc-top, .job-card.is-warn .jc-right { color: var(--amber-text); font-weight: 600; }
.job-card.is-warn .bar > i { background: var(--amber); }

/* ---------- Small text actions (settings rows) ---------- */
.ticon { color: var(--ink-2); font-weight: 500; cursor: pointer; font-size: 12.5px; padding: 2px 6px; border-radius: 5px;
  transition: background var(--ease), color var(--ease); }
.ticon:hover { background: var(--hl); color: var(--ink); }
.ticon.del:hover { background: var(--bad-soft); color: var(--rec-text); }
button.ticon { border: 0; background: transparent; font-family: var(--font); line-height: inherit; }

/* ---------- Folder structures screen (mock-up 1A) ---------- */
/* The structures beside the editor (the only way to switch between them; mock-up 1A shows one), as
   sidebar items: the open one a white pill. The editor: the name as its title, the categories that
   use it, three segmented tabs (.str-tabs: see "Segmented control"), the tab, the Save bar. */
.str-layout { display: grid; grid-template-columns: 184px minmax(0, 1fr); gap: 28px; margin-top: 22px; align-items: start; }
.str-list { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.str-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px;
  color: var(--ink-2); font-size: 13.5px; font-weight: 500; cursor: pointer; user-select: none;
  transition: background var(--ease), color var(--ease), box-shadow var(--ease); }
.str-item > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.str-item:hover { background: var(--hl); }
.str-item.is-on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-s); }
.str-item .ficon { color: var(--muted); }
.str-add { color: var(--muted); margin-top: 6px; }
.str-add:hover { color: var(--ink); }
.str-add.is-on { color: var(--ink); }
.str-none { font-size: 13px; color: var(--muted); padding: 7px 10px; }
.str-main { min-width: 0; }
.str-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.str-intro .subtle { margin-top: 2px; }
/* the name is the title: no box until hover or focus (its label is for screen readers) */
.str-top { margin-bottom: 18px; }
.input.str-name { font-size: 22px; font-weight: 600; letter-spacing: -.02em; line-height: 1.3; padding: 2px 8px;
  margin-left: -9px; width: calc(100% + 9px); max-width: 520px; background: transparent; border-color: transparent;
  text-overflow: ellipsis; }
.input.str-name:hover { border-color: var(--border); background: var(--surface); }
.input.str-name:focus { border-color: var(--ink-2); background: var(--surface); }
.str-meta { font-size: 13px; color: var(--muted); margin-top: 2px; min-height: 19px; }
.str-tabs { margin-bottom: 24px; }
.str-pane[hidden] { display: none; }
.str-group { justify-content: space-between; margin-bottom: 4px; }
.str-pane > .str-group:first-child { margin-top: 0; }
.str-hint { font-weight: 400; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the Save bar stays in view while the page (.main) scrolls: what a change does, then the buttons
   (Save last); the note goes above the buttons when the bar is too narrow for both */
.str-foot { position: sticky; bottom: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  margin-top: 26px; padding: 14px 0; background: var(--bg); border-top: 1px solid var(--line); }
.str-note { flex: 1 1 200px; min-width: 0; font-size: 12.5px; color: var(--muted); text-wrap: pretty; }
.str-btns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-left: auto; }

/* starter cards: white, a control border; "Begin hiermee" fills in ink on hover */
.starter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 12px; margin-top: 16px; }
.starter-card { display: flex; flex-direction: column; gap: 10px; text-align: left; font-family: var(--font);
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 14px 13px;
  cursor: pointer; transition: background var(--ease), border-color var(--ease); }
.starter-card:hover { background: var(--hl); }
.starter-name { font-family: var(--font); font-size: 13.5px; font-weight: 600; color: var(--ink); }
.starter-tree { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.starter-tree .sf { display: flex; align-items: flex-start; gap: 7px; min-width: 0; font-size: 12px; line-height: 17px;
  color: var(--ink-2); }
.starter-tree .sf .ficon { width: 13px; height: 13px; margin-top: 2px; color: var(--faint); }
.starter-tree .sf-name { flex: none; }
.starter-tree .sf-none { color: var(--muted); }
.starter-tree .sf-subs { min-width: 0; color: var(--muted); }
/* the card is the button; this shows it (and lines up at the foot of each card) */
.starter-go { align-self: flex-start; margin-top: 2px; padding: 4px 11px; border-radius: 7px; font-size: 12.5px; font-weight: 500;
  line-height: 18px; color: var(--ink-2); background: var(--hl); transition: background var(--ease), color var(--ease); }
.starter-card:hover .starter-go { background: var(--ink); color: #fff; }
/* "＋ New structure" clicked again on this screen: the cards light up briefly in ink */
.starter-grid.is-flash .starter-card { animation: starter-flash .9s ease-out; }
@keyframes starter-flash {
  0%, 100% { border-color: var(--border); box-shadow: 0 0 0 0 rgba(29, 28, 26, 0); }
  25% { border-color: var(--ink); background: var(--hl); box-shadow: 0 0 0 1px var(--ink); }
}
@media (prefers-reduced-motion: reduce) {
  .starter-grid.is-flash .starter-card { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
}

/* folder tree (editor + read-only preview): rows fill on hover, subfolders on a guide line under
   their parent's icon; the focus ring is the global one */
.ficon { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.35;
  stroke-linejoin: round; color: var(--muted); }
.ftree { padding: 2px 0; }
.fnode { position: relative; }
.frow { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 6px 0 2px; border-radius: 8px;
  transition: background var(--ease); }
.ftree:not(.is-static) .frow:hover { background: var(--hl); }
.fnode-top > .frow .ficon { color: var(--ink-2); }
.fsubs { margin-left: 30px; padding-left: 3px; border-left: 1px solid var(--line); }
.fgrip { display: grid; place-items: center; width: 14px; height: 22px; flex: none; color: var(--faint);
  opacity: 0; cursor: grab; }
.fgrip svg { width: 14px; height: 14px; fill: currentColor; }
.frow:hover .fgrip { opacity: 1; }
.fname { font-size: 13px; font-weight: 500; color: var(--ink); padding: 2px 6px; margin-left: -6px; border-radius: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: text; }
.fname:hover { box-shadow: inset 0 0 0 1px var(--border); background: var(--surface); }
.fsubs .fname { font-weight: 400; color: var(--ink-2); }
.finput { font-family: var(--font); font-size: 13px; font-weight: 500; color: var(--ink); height: 26px; width: 260px;
  max-width: 100%; padding: 0 7px; margin-left: -8px; border: 1px solid var(--ink-2); border-radius: 6px;
  background: var(--surface); }
.fact { display: flex; align-items: center; gap: 2px; margin-left: auto; opacity: 0; transition: opacity .1s; }
.frow:hover .fact, .frow:focus-within .fact { opacity: 1; }
.frow.is-editing .fact, .frow.is-editing .fgrip { visibility: hidden; }
.fbtn { font-family: var(--font); font-size: 12px; font-weight: 500; color: var(--muted); background: transparent;
  border: 0; border-radius: 6px; height: 24px; padding: 0 8px; cursor: pointer; white-space: nowrap; }
.fbtn:hover { background: rgba(40, 35, 25, .07); color: var(--ink); }
.fbtn-icon { display: grid; place-items: center; width: 26px; padding: 0; }
.fbtn-icon svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.35;
  stroke-linecap: round; stroke-linejoin: round; }
.fbtn.del:hover { background: var(--bad-soft); color: var(--rec-text); }
.fadd { display: flex; align-items: center; height: 32px; padding: 0 8px 0 24px; margin-top: 2px; border-radius: 8px;
  font-size: 13px; color: var(--muted); cursor: pointer; user-select: none; transition: background var(--ease), color var(--ease); }
.fadd:hover { color: var(--ink); background: var(--hl); }
.fnode.is-dragging { opacity: .4; }
.fnode.drop-before::before, .fnode.drop-after::before { content: ""; position: absolute; left: 8px; right: 4px; height: 2px;
  background: var(--ink); border-radius: 1px; pointer-events: none; z-index: 2; }
.fnode.drop-before::after, .fnode.drop-after::after { content: ""; position: absolute; left: 2px; width: 6px; height: 6px;
  border: 2px solid var(--ink); border-radius: 50%; background: var(--surface); pointer-events: none; z-index: 2; }
.fnode.drop-before::before { top: -1px; }
.fnode.drop-before::after { top: -4px; }
.fnode.drop-after::before { bottom: -1px; }
.fnode.drop-after::after { bottom: -4px; }
.ftree.is-static .frow { height: 28px; padding-left: 4px; }
.ftree.is-static .fname { cursor: default; }
.ftree.is-static .fname:hover { box-shadow: none; background: none; }
.ftree.is-static .fsubs { margin-left: 11px; }

/* faded entries the app creates on import (per camera / per day folders, missing targets): muted, in italics */
.frow.fph { cursor: default; }
.ftree:not(.is-static) .frow.fph:hover { background: none; }
.fph-sp { width: 14px; flex: none; }
.fph .ficon { color: var(--faint); stroke-dasharray: 2.2 1.6; }
.fph .fname, .fsubs .fph .fname { color: var(--muted); font-weight: 400; font-style: italic; cursor: default; }
.fph .fname:hover { box-shadow: none; background: none; }
.fph-note { font-size: 12px; color: var(--muted); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ftree.is-static .frow.fph { height: 24px; }

/* rules panel ("Where files go") + the example under it, without a box */
.str-group.rules-head { margin-top: 28px; }
.rules { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; max-width: 600px; }
.rule { display: grid; grid-template-columns: 88px minmax(0, 1.7fr) minmax(142px, 1fr); gap: 8px; align-items: center; }
.rule-kind { font-size: 13px; font-weight: 500; color: var(--ink); padding-left: 8px; }
.rule .select { padding: 6px 9px; min-width: 0; }
.rule-sort.is-off { visibility: hidden; }
.rpreview { margin-top: 14px; }
.rpreview-label { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.rp-line { font-size: 12.5px; line-height: 21px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-line b { font-weight: 600; color: var(--ink); }
.rp-file { font-family: var(--mono); font-size: 11.5px; color: var(--ink); }
.rp-none { color: var(--muted); }

/* DaVinci tab (mock-up 1A), drawn like DaVinci's media pool and its own preview: the facts row (the
   place as a "/" breadcrumb ending in the project in red, the format; each with a muted "wijzig");
   "Je project in DaVinci" as a tree on guide lines (a bin's sub-bins and timelines hang on a 1px line
   under its icon; timelines have a red icon), the folders that do not come along under it; colour
   per camera and "What the app does" beside it, below it when narrow. */
.dv-head { margin-bottom: 18px; }
.dv-switch { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font); font-size: 12.5px;
  font-weight: 500; color: var(--ink-2); background: none; border: 0; padding: 0; border-radius: 6px; cursor: pointer; }
.dv-sw { position: relative; display: inline-block; width: 28px; height: 16px; flex: none; border: 0; padding: 0;
  border-radius: 9px; background: var(--border-strong); cursor: pointer; transition: background var(--ease); }
.dv-sw::after { content: ""; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(40, 35, 25, .25); transition: transform var(--ease); }
.dv-sw[aria-checked="true"], [aria-checked="true"] > .dv-sw { background: var(--ink); }
.dv-sw[aria-checked="true"]::after, [aria-checked="true"] > .dv-sw::after { transform: translateX(12px); }
.dv-off { padding: 2px 0; }
.dv-off p + p { margin-top: 4px; max-width: 560px; }
.dv-off b { font-weight: 500; }
.dv-off .link { margin-left: 4px; }
.dv-body { container: dvtab / inline-size; }
.dv-sep { color: var(--muted); }
.dv-ph { color: var(--muted); font-style: italic; }
.dv-ico { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--ink-2); stroke-width: 1.2; stroke-linejoin: round; }
.dv-ico-tl { stroke-width: 1.8; stroke-linecap: round; }
.dv-lbl { font-size: 12px; font-weight: 400; color: var(--muted); }
/* small secondary buttons ("＋ Map", "＋ Tijdlijn", "＋ Stap", "Voeg toe") and quiet text buttons */
.dv-btn { flex: none; font-family: var(--font); font-size: 13px; font-weight: 500; line-height: 18px; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 4px 11px; cursor: pointer;
  white-space: nowrap; transition: border-color var(--ease), color var(--ease); }
.dv-btn:hover { border-color: var(--border-strong); color: var(--ink); }
.dv-ghost { max-width: 100%; font-family: var(--font); font-size: 13px; font-weight: 400; line-height: 18px;
  color: var(--muted); background: transparent; border: 0; border-radius: 8px; padding: 6px 12px;
  cursor: pointer; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color var(--ease); }
.dv-ghost:hover { color: var(--ink); }

/* the facts row: place in DaVinci and format, two columns over a hairline. The place gets the room
   (the format keeps to one line in a narrow tab); its parts and "wijzig" wrap as one line of words. */
.dv-where { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; padding-bottom: 24px;
  border-bottom: 1px solid var(--line); }
@container dvtab (min-width: 600px) {
  .dv-where { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}
.dv-fact { min-width: 0; }
.dv-fact > .dv-lbl { margin-bottom: 6px; }
.dv-val { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0;
  font-size: 15px; font-weight: 500; line-height: 1.45; color: var(--ink); }
.dv-val > .dv-crumbs { display: contents; }
.dv-crumb { min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-crumb.is-ph, .dv-crumb-ph { color: var(--ink-2); font-style: italic; }
.dv-crumb.is-proj { color: var(--rec-text); font-weight: 500; }
.dv-crumb-top { color: var(--muted); }
.dv-cstep { display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; max-width: 100%; }
.dv-csep { flex: none; color: var(--muted); font-weight: 400; }
.dv-fmtv { font-variant-numeric: tabular-nums; }
.dv-edit { flex: none; margin-left: 6px; font-family: var(--font); font-size: 13px; font-weight: 400; line-height: inherit; color: var(--muted);
  background: none; border: 0; border-radius: 4px; padding: 0; cursor: pointer; text-decoration: underline;
  text-decoration-color: var(--border-strong); text-underline-offset: 3px; transition: color var(--ease); }
.dv-edit:hover { color: var(--ink); text-decoration-color: currentColor; }

/* the media pool: the heading row with its two buttons, then the tree */
.dv-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 26px; align-items: start; }
.dv-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
@container dvtab (min-width: 540px) {
  .dv-side { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
}
@container dvtab (min-width: 680px) {
  .dv-cols { grid-template-columns: minmax(0, 1fr) 220px; gap: 32px; }
  .dv-side { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .dv-side > .dv-card:first-child { padding-top: 0; border-top: 0; }
}
.dv-pool { min-width: 0; }
.dv-pool-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dv-pool-h b { min-width: 0; font-size: 16px; font-weight: 600; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-pool-acts { display: flex; gap: 8px; flex: none; }
.dv-tree { margin-top: 12px; }
.dv-mrow { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px;
  font-weight: 500; color: var(--ink); transition: background var(--ease), box-shadow var(--ease); }
.dv-mrow .dv-ico { stroke: var(--muted); }
/* the guide line: Master's bins and timelines, and a bin's sub-bins, timelines and "＋ Tijdlijn in …",
   hang on a 1px line under the icon of the row above them (icons 18px at 12px: the line at 21px) */
.dv-bins, .dv-mtls, .dv-mfoot, .dv-binbox .dv-tls { margin-left: 21px; padding-left: 16px; border-left: 1px solid var(--line); }
.dv-bins { display: flex; flex-direction: column; }
.dv-binbox { position: relative; border-radius: 10px; transition: background var(--ease), box-shadow var(--ease); }
/* a bin or timeline row: its main button (name, what it holds; the drag handle shows on hover) and "···"
   on its first line (the second may hold what it holds, wrapped) */
.dv-node { position: relative; display: flex; align-items: stretch; min-width: 0; padding-right: 4px;
  border-radius: 9px; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: none;
  transition: background var(--ease); }
.dv-node:hover { background: var(--hl); }
.dv-main { position: relative; flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 6px 9px 12px; border-radius: 9px; }
.dv-main:focus-visible { outline: none; }
.dv-node:has(> .dv-main:focus-visible) { outline: 2px solid var(--ink); outline-offset: -2px; }
.dv-main > .dv-ico { margin-top: 1px; }
.dv-txt { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.dv-grip { display: grid; place-items: center; width: 12px; flex: none; color: var(--faint); cursor: grab; }
.dv-grip svg { width: 12px; height: 12px; fill: currentColor; }
.dv-main > .dv-grip, .wst-main > .wst-grip { position: absolute; left: 0; top: 0; bottom: 0; opacity: 0;
  transition: opacity var(--ease); }
.dv-node:hover > .dv-main > .dv-grip, .dv-main:focus-visible > .dv-grip,
.wst-row:hover > .wst-main > .wst-grip, .wst-main:focus-visible > .wst-grip { opacity: 1; }
.dv-nm { min-width: 0; max-width: 100%; flex: 0 1 auto; font-weight: 500; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-src, .dv-tldesc { min-width: 0; max-width: 100%; flex: 0 1 auto; font-size: 13px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-src b { font-weight: 500; color: var(--ink-2); }
.dv-empty { flex: 0 0 auto; font-size: 13px; color: var(--muted); }
.dv-more { flex: none; display: grid; place-items: center; width: 28px; height: 26px; margin-top: 6px; padding: 0;
  border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer;
  transition: background var(--ease), color var(--ease); }
.dv-more svg { width: 16px; height: 16px; fill: currentColor; }
.dv-more:hover, .dv-more[aria-expanded="true"] { background: rgba(40, 35, 25, .07); color: var(--ink); }
/* the sub-bins the import makes by itself (a bin's subfolders, per camera / per day): quiet rows */
.dv-sub { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 32px;
  margin-left: 21px; border-left: 1px solid var(--line); padding: 0 12px 0 calc(28px + var(--depth, 0) * 18px);
  font-size: 12.5px; }
.dv-sub .dv-ico { width: 14px; height: 14px; margin: 0 2px; stroke: var(--faint); }
.dv-subnm { min-width: 0; flex: 0 1 auto; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-subnm.is-sort { font-style: italic; color: var(--muted); }
.dv-subnote { min-width: 0; flex: 0 3 auto; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-tls { display: flex; flex-direction: column; }
/* timelines: ink names with a red icon (mock-up 1A), what they hold muted */
.dv-tlrow .dv-ico { stroke: var(--rec); }
.dv-addtl { display: block; margin-left: 21px; max-width: calc(100% - 21px); padding-left: 28px;
  border-left: 1px solid var(--line); border-radius: 0 8px 8px 0; }
.dv-mfoot > .dv-ghost { display: block; }
/* dragging: the item fades, a white copy follows the pointer, the bin it would land in fills, an ink line */
.dv-node.is-dragging, .dv-binbox.is-dragging { opacity: .4; }
.dv-binbox.is-drop, .dv-mrow.is-drop { background: var(--hl); box-shadow: inset 0 0 0 1px var(--ink-2); }
.dv-drop-before::before, .dv-drop-after::after { content: ""; position: absolute; left: 6px; right: 6px; height: 2px;
  border-radius: 1px; background: var(--ink); pointer-events: none; z-index: 2; }
.dv-tlrow.dv-drop-before::before, .dv-binbox.dv-drop-before::before { top: -1px; }
.dv-tlrow.dv-drop-after::after, .dv-binbox.dv-drop-after::after { bottom: -1px; }
.dv-dragghost { position: fixed; left: 0; top: 0; z-index: 70; max-width: 240px; padding: 5px 11px; border-radius: 8px;
  background: var(--surface); box-shadow: var(--shadow-pop); font-size: 13px; font-weight: 500;
  color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
body.dv-dragging, body.dv-dragging * { cursor: grabbing !important; }

/* no timelines yet: a one-click suggestion above the tree, a plain row with the red timeline icon */
.dv-suggest { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 7px 4px 7px 12px; }
.dv-suggest .dv-ico { stroke: var(--rec); }
.dv-suggest-txt { flex: 1; min-width: 0; color: var(--ink-2); font-size: 13px; }

/* folders that do not come along: under a hairline, white chips */
.dv-notin { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.dv-notin-h { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; }
.dv-notin-hint { font-size: 12px; color: var(--muted); }
.dv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.dv-chip { display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%; padding: 3px 4px 3px 10px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--ink-2); }
.dv-chip .ficon { width: 14px; height: 14px; }
.dv-chip-nm { min-width: 0; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-chip-add { flex: none; font-family: var(--font); font-size: 12.5px; font-weight: 500; line-height: 18px; color: var(--ink-2);
  background: none; border: 0; border-radius: 6px; padding: 2px 8px; cursor: pointer; white-space: nowrap;
  transition: background var(--ease), color var(--ease); }
.dv-chip-add:hover { background: var(--hl); color: var(--ink); }

/* colour per camera + what the app does: no boxes, a hairline above each when stacked */
.dv-card { min-width: 0; padding-top: 14px; border-top: 1px solid var(--line); }
.dv-camlist { display: flex; flex-direction: column; margin: 6px -6px 0; }
.dv-camrow { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 5px 6px; border: 0; border-radius: 7px;
  background: none; font-family: var(--font); font-size: 13px; color: var(--ink); text-align: left; cursor: pointer;
  transition: background var(--ease); }
.dv-camrow:hover { background: var(--hl); }
.dv-camrow b { min-width: 0; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-sq { width: 14px; height: 14px; flex: none; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.dv-ex { min-width: 0; margin-left: auto; padding-left: 8px; font-size: 12px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-exf { font-family: var(--mono); }
.dv-camadd { margin: 4px 0 0 -12px; }
.dv-cardnote { margin-top: 6px; font-size: 12px; color: var(--muted); }
.dv-tiptext { margin-top: 4px; font-size: 12.5px; color: var(--muted); }

/* the "···" menu (rows.js rowMenu): white, the soft warm shadow, no border; items fill on hover and focus */
.dv-menu { position: fixed; z-index: 64; min-width: 180px; max-width: 280px; max-height: calc(100% - 16px); overflow-y: auto;
  padding: 6px; background: var(--surface); border: 0; border-radius: var(--radius-pop); box-shadow: var(--shadow-pop);
  animation: pop var(--ease); }
.dv-mi { display: flex; align-items: center; gap: 6px; width: 100%; padding: 7px 10px; border: 0; border-radius: 8px;
  background: none; font-family: var(--font); font-size: 13.5px; font-weight: 500; line-height: 1.5; color: var(--ink);
  text-align: left; cursor: pointer; white-space: nowrap; transition: background var(--ease); }
.dv-mi > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dv-mi:hover, .dv-mi:focus-visible { background: var(--hl); }
.dv-mi[data-danger] { color: var(--rec-text); }
.dv-mi[data-danger]:hover, .dv-mi[data-danger]:focus-visible { background: var(--bad-soft); }
.dv-mi-to { padding-left: 8px; }
.dv-mi-to[aria-checked="true"] { font-weight: 600; }
.dv-mcheck { width: 14px; flex: none; color: var(--ink); font-weight: 600; text-align: center; }
.dv-mhead { padding: 6px 10px 2px; font-size: 12px; font-weight: 500; color: var(--muted); }
.dv-msep { height: 1px; margin: 5px 6px; background: var(--line); }
/* rich items (the project header's DaVinci and ••• menus): a muted value on the right (.dv-mi-aside),
   an explanation under the label (.dv-mi-sub); a note that is not an item (.dv-mnote: the numbers) */
.dv-menu-rich { min-width: 260px; max-width: 320px; }
.dv-mi:has(> .dv-mi-l) { flex-direction: column; align-items: stretch; gap: 1px; white-space: normal; }
.dv-mi-l { display: flex; align-items: baseline; gap: 12px; min-width: 0; white-space: nowrap; }
.dv-mi-t { flex: none; }
.dv-mi-aside { min-width: 0; margin-left: auto; overflow: hidden; text-overflow: ellipsis;
  font-size: 12px; font-weight: 400; color: var(--muted); }
.dv-mi-sub { display: block; max-width: 300px; font-size: 12px; font-weight: 400; line-height: 1.4;
  color: var(--muted); white-space: normal; }
.dv-mnote { padding: 6px 10px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; cursor: default; }
/* an item that cannot be used now ("Uit de lijst halen" while the project's job runs: "Bezig" on the right) */
.dv-mi[disabled] { cursor: default; }
.dv-mi[disabled] .dv-mi-t { color: var(--muted); }
.dv-mi[disabled]:hover { background: none; }
/* DaVinci edit windows (the overlay and card of the Dialogs section) and the colour popover */
.dv-win { width: 500px; max-width: calc(100% - 32px); max-height: calc(100% - 32px); overflow-y: auto; }
.dv-win h3 { font-size: 16px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 14px; }
.dv-win .field { margin-bottom: 14px; }
.dv-win .field[hidden], .dv-tog[hidden] { display: none; }
.dv-win .field-hint { margin-top: 6px; }
.dv-win-foot { display: flex; align-items: center; gap: 8px; margin-top: 18px; }
.dv-sp { flex: 1; }
.dv-err { color: var(--rec-text); font-size: 12.5px; margin-top: 10px; }
.dv-inss { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
/* "＋ jaar", "＋ categorie", …: white chips with a control border that fill on hover */
.dv-ins { font-family: var(--font); font-size: 12px; font-weight: 500; color: var(--ink-2); background: var(--surface);
  border: 1px solid var(--border); border-radius: 6px; padding: 2px 9px; cursor: pointer;
  transition: background var(--ease), color var(--ease); }
.dv-ins:hover { color: var(--ink); background: var(--hl); }
/* the example of where the project lands: a warm well, no border */
.dv-example { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 8px;
  background: var(--bg-side); border: 0; }
.dv-example-label { font-size: 12px; font-weight: 400; color: var(--muted); }
.dv-example-path { color: var(--ink-2); font-weight: 500; overflow-wrap: anywhere; }
.dv-example-path b { color: var(--ink); font-weight: 600; }
.dv-two { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; }
.dv-two .field { margin-bottom: 0; }
.dv-seg { flex-wrap: wrap; }
.dv-seg .seg-btn { padding: 4px 11px; white-space: nowrap; }
.dv-pair { display: flex; gap: 8px; }
.dv-pair > * { flex: 1; min-width: 0; }
.dv-pair > [hidden] { display: none; }
.dv-tog { display: flex; align-items: center; gap: 9px; margin-top: 2px; }
.dv-tog label { font-size: 13px; color: var(--ink); cursor: pointer; user-select: none; }
/* the colour popover: white with the pop shadow (as the menus); the chosen colour the tint with an ink ring */
.dv-pop { position: fixed; z-index: 63; width: 468px; max-width: calc(100% - 16px); padding: 14px 14px 12px;
  background: var(--surface); border: 0; border-radius: var(--radius-pop); box-shadow: var(--shadow-pop);
  animation: pop var(--ease); }
.dv-pop-head { display: flex; align-items: baseline; gap: 8px; padding: 0 4px 8px; }
.dv-pop-head b { font-size: 14px; font-weight: 600; }
.dv-pop-head span { font-size: 12px; color: var(--muted); }
.dv-pop-name { margin-bottom: 10px; }
.dv-swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; }
.dv-swatch { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 5px 6px; border: 0; border-radius: 6px;
  background: none; font-family: var(--font); font-size: 12.5px; color: var(--ink-2); cursor: pointer; text-align: left; }
.dv-swatch span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-swatch i { width: 14px; height: 14px; flex: none; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.dv-swatch:hover { background: var(--hl); color: var(--ink); }
.dv-swatch.is-on { background: var(--hl); color: var(--ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--ink); }
.dv-pop-foot { display: flex; justify-content: flex-start; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.dv-pop-foot .btn { padding: 5px 9px; font-size: 12.5px; }
/* the deadline popover (app.js pjDeadlinePop): the colour popover's card, narrower; under the date the
   note and two quiet actions, then Annuleren and Opslaan on a hairline */
.dv-pop.dl-pop { width: 300px; padding: 14px 16px; }
.dl-pop > .h-help { margin-bottom: 10px; }
.dl-pop-t { font-size: 14px; font-weight: 600; }
.dl-pop-note { margin-top: 8px; font-size: 12px; line-height: 1.45; color: var(--muted); }
.dl-pop .field-error { margin-top: 8px; }
.dl-pop-acts { display: flex; flex-wrap: wrap; gap: 2px 4px; margin: 8px 0 0 -6px; }
.dl-pop-acts:empty { display: none; }
.dl-pop-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--line); }

/* structure editor: Work steps tab. Rows on hairlines (no boxes): the name, on the right what ticks
   it ("vinkt vanzelf af" in green, or a muted "zelf afvinken"), "···"; the drag handle shows on hover
   (see the DaVinci tab). The drag copy, the drop line and the menu are the DaVinci tab's (rows.js). */
.wst-hint { margin: 2px 0 10px; font-size: 12.5px; color: var(--muted); text-wrap: pretty; }
.wst-list { display: flex; flex-direction: column; }
/* square at rest, so the hairline between two rows runs straight to its ends; rounded once it fills */
.wst-row { position: relative; display: flex; align-items: stretch; min-width: 0; min-height: 40px; padding-right: 4px;
  cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: none;
  transition: background var(--ease); }
.wst-row + .wst-row { box-shadow: 0 -1px 0 var(--line); }
.wst-row:hover { background: var(--hl); }
.wst-row:hover, .wst-row:hover + .wst-row { box-shadow: none; }
.wst-row:hover, .wst-row:has(> .wst-main:focus-visible) { border-radius: 9px; }
.wst-main { position: relative; flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 6px 9px 12px; border-radius: 9px; }
.wst-main:focus-visible { outline: none; }
.wst-row:has(> .wst-main:focus-visible) { outline: 2px solid var(--ink); outline-offset: -2px; }
/* the name and what ticks it share a line; when the row is too narrow for both, the second wraps */
.wst-txt { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 14px; }
.wst-nm { min-width: 0; max-width: 100%; flex: 0 1 auto; font-weight: 500; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wst-when { min-width: 0; max-width: 100%; margin-left: auto; font-size: 12.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wst-when b { font-weight: 500; color: var(--ok-text); }
.wst-row.is-dragging { opacity: .4; }
.wst-row.dv-drop-before::before { top: -1px; }
.wst-row.dv-drop-after::after { bottom: -1px; }
.wst-none { padding: 4px 0; font-size: 13px; color: var(--muted); }
.wst-add { margin-top: 12px; }

/* new-project wizard: structure step; what it will create in a warm well (the read-only folder tree) */
.wiz-starters { margin-top: 10px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.wiz-struct { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.wiz-struct .field:last-child { margin-bottom: 0; }
.wiz-tree { max-height: 340px; overflow-y: auto; padding: 8px 14px; background: var(--bg-side); border-radius: 10px; }
.wiz-tree-empty { padding: 6px 0; }

/* ---------- Settings ---------- */
/* Sections without boxes, one after the other: a top hairline, a 16px heading (with an action on its
   right, if any), then its fields. A new section is one more .set-section with a .set-head. */
.set-section { max-width: 720px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.set-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.set-head h2 { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.set-head + .set-intro { margin: -8px 0 12px; }
.set-section .field label { font-size: 12px; font-weight: 500; color: var(--muted); }
.set-section .field:last-child { margin-bottom: 0; }
.select.set-lang { max-width: 220px; }
.set-pair { display: flex; gap: 10px; }
.input.set-num { width: 90px; }
.select.set-unit { width: 140px; }
/* the categories: rows on hairlines under a muted header row; rename and remove as quiet text actions */
.row-list .ri.cat-row { display: grid; grid-template-columns: minmax(0, 1fr) 170px 158px 136px; gap: 10px; padding: 8px 0; }
.cat-row > span:first-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-row .select { padding: 6px 9px; }
.row-list .ri.cat-head { font-size: 12px; font-weight: 500; color: var(--muted); padding: 0 0 6px; }
.dl-edit { display: flex; align-items: center; gap: 6px; }
.dl-edit .dl-val { width: 60px; }
.dl-edit .dl-unit { width: 92px; }
.cat-acts { display: flex; gap: 2px; justify-content: flex-end; }
/* "Help and tour": one row per control (the help switch, the tour, the practice project), each as wide
   as what it holds; a row with nothing in it takes no room */
.set-rows { display: grid; gap: 12px; justify-items: start; }
.set-row { display: flex; align-items: center; gap: 12px; max-width: 100%; min-width: 0; }
.set-row:empty { display: none; }
/* the three short tours under "Rondleiding starten" (tour.js), on a second line when the window is narrow */
.set-row.set-minis { flex-wrap: wrap; gap: 8px; }

/* add media dialog (spec 4e): the overlay and card of the Dialogs section */
.as-off { margin-top: 2px; }
/* "Where does the video go?": three options, each with the folders it gives for this card */
.as-ov { padding: 16px; }
.as-card { width: 640px; max-width: 100%; max-height: calc(100vh - 32px); overflow-y: auto; }
.as-h { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.as-sub { margin-top: 3px; font-size: 13px; color: var(--muted); }
/* where the chosen folder is: a folder on a card (calm, with "Take the whole card") or refused (red) */
.as-notice { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; margin-top: 12px; padding: 9px 10px 9px 12px;
  border: 0; border-radius: 10px; background: var(--hl); color: var(--ink-2); }
.as-notice[hidden] { display: none; }
.as-notice-t { flex: 1 1 260px; min-width: 0; font-size: 13px; }
.as-notice-t b { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.as-notice .btn { flex: none; padding: 6px 12px; }
.as-notice.is-bad { background: var(--bad-soft); }
.as-notice.is-bad .as-notice-t { color: var(--bad-head); font-weight: 500; }
/* a refused source: only the red notice and Cancel stay active; the dimmed parts say aria-disabled
   (disabled content: the contrast check exempts it, spec call 4) */
.as-card.is-refused :is(.as-sub, .as-off, .as-opts, .as-cam, .as-dv) { opacity: .42; }
.as-card.is-refused :is(.as-opts, .as-cam, .as-dv) { pointer-events: none; }
.as-found { margin-top: 12px; padding: 8px 12px; border-radius: 10px; background: var(--hl); color: var(--ink-2); }
.as-found[hidden] { display: none; }
.as-found b { font-weight: 600; color: var(--ink); }
/* the options: white cards with a control border; the chosen one an ink border and ring (never red) */
.as-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; align-items: start; }
@media (max-width: 640px) { .as-opts { grid-template-columns: minmax(0, 1fr); } }
.as-opt { min-width: 0; padding: 10px 11px 11px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  cursor: pointer; transition: border-color var(--ease), box-shadow var(--ease); }
.as-opt:hover { border-color: var(--border-strong); }
.as-opt.is-on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.as-opt-t { display: flex; align-items: center; gap: 7px; font-weight: 600; color: var(--ink); cursor: pointer; }
.as-opt-t input { width: 15px; height: 15px; margin: 0; flex: none; accent-color: var(--ink); cursor: pointer; }
.as-opt-d { margin: 1px 0 8px 22px; font-size: 12px; color: var(--muted); }
.as-tree { padding-top: 7px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); }
.as-tr { display: flex; align-items: center; gap: 6px; min-width: 0; height: 20px; padding-left: calc(var(--d, 0) * 14px); }
.as-tr .ficon { width: 13px; height: 13px; color: var(--faint); }
.as-tn { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-tr.is-gen .as-tn { font-style: italic; color: var(--muted); }
.as-tr.is-pick .as-tn { font-weight: 600; color: var(--ink); }
.as-n { flex: none; margin-left: auto; padding-left: 6px; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.as-more { padding-left: calc(var(--d, 0) * 14px + 19px); color: var(--muted); font-size: 12px; }
.as-tnote { margin-top: 3px; font-size: 11px; color: var(--muted); }
.input.as-name { margin-top: 8px; padding: 4px 7px; font-size: 12px; }
.as-note { margin-top: 4px; font-size: 11.5px; color: var(--muted); }
/* "Which camera is this card from?": a full-width row under the options while the video goes per camera
   (the approved mock-up), under a hairline: one chip per camera, the chosen one filled in ink, a dashed
   "Other name" that turns into a text field, and a hint saying which choice applies. The chosen camera
   is the per-camera leaf. */
.as-cam { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.as-cam[hidden] { display: none; }
.as-cam-q { margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.as-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.as-chip { max-width: 100%; padding: 3px 11px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  font: 500 13px/1.5 var(--font); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
  transition: border-color var(--ease), background var(--ease), color var(--ease); }
.as-chip:hover { border-color: var(--border-strong); }
.as-chip[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }
.as-chip[aria-pressed="true"]:hover { border-color: #000; background: #000; }
.as-chip.is-add { border-style: dashed; border-color: var(--border-strong); color: var(--muted); }
.as-chip.is-add:hover { color: var(--ink); }
.as-chip[hidden], .as-cam-in[hidden] { display: none; }
.input.as-cam-in { width: 170px; max-width: 100%; padding: 3px 9px; border-radius: 7px; font-size: 13px; }
.as-cam-hint { margin-top: 8px; font-size: 11.5px; color: var(--muted); overflow-wrap: anywhere; }
.as-cam-hint.is-bad { color: var(--rec-text); }
.as-card .wizard-foot { margin-top: 16px; }

/* ---------- The "?" beside a function (help.js) ---------- */
/* A small round button with a muted "?" drawn here (it adds no text to what it sits beside), ink on
   hover, the one focus ring; dimmed when disabled (the refused add-media dialog). .h-help keeps it
   right beside its heading or label where the row would push it away. In a row with a wider gap it
   sits 6px from what it explains. Its popover has the menu look and lies above dialogs, never over a
   button or form control when there is room (help.js helpPlace). */
.help-q { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex: none;
  margin-left: 6px; padding: 0; vertical-align: middle; border: 1px solid var(--border-strong); border-radius: 50%;
  background: transparent; color: var(--muted); font-family: var(--font); cursor: pointer;
  transition: color var(--ease), border-color var(--ease); }
.help-q::before { content: "?"; font-size: 10.5px; font-weight: 600; line-height: 1; }
.help-q:hover { color: var(--ink); border-color: var(--ink-2); }
.help-q:disabled { opacity: .42; cursor: default; }
.help-q:disabled:hover { color: var(--muted); border-color: var(--border-strong); }
.h-help { display: flex; align-items: center; gap: 6px; min-width: 0; }
.h-help > .help-q, #sideCatsHelp > .help-q, #strTabHelp > .help-q { margin-left: 0; }
.head-tools > .help-q { margin-left: -8px; }
.pj-acts > .help-q { margin: 0 6px 0 -2px; }
.wf-bar-top > .help-q { margin-left: -4px; align-self: center; }
.wf-head > .help-q { margin-left: -4px; align-self: center; }
.field > .h-help { margin-bottom: 6px; }
.field > .h-help > label { margin-bottom: 0; }
.side-label { display: flex; align-items: center; gap: 6px; }
#sideCatsHelp, #strTabHelp { display: inline-flex; }
/* the tabs, their "?" and "Laat zien hoe" (tour.js: the tab's short tour), quiet at the right; it goes
   under them, at the right, when the bar has no room for it (the tabs keep their width) */
.str-tabbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; margin-bottom: 24px; }
.str-tabbar > .str-tabs { margin-bottom: 0; flex: none; }
.str-tabbar > .tour-howto { margin-left: auto; }
.tour-howto[hidden] { display: none; }  /* gone while a tour runs */
/* a short tour's step on the folder rows: each row's ＋ Submap and bin show, not only on hover */
body[data-tour-mark="facts"] #strTree .frow .fact { opacity: 1; }
.as-cam > .h-help { margin-bottom: 8px; }
.as-cam > .h-help > .as-cam-q { margin-bottom: 0; }
.help-pop { position: fixed; z-index: 65; width: 280px; max-width: calc(100% - 16px); padding: 12px 14px;
  background: var(--surface); border-radius: var(--radius-pop); box-shadow: var(--shadow-pop); animation: pop var(--ease); }
.help-pop:focus { outline: none; }
.help-pop.is-through { pointer-events: none; }  /* placed over a control: every click goes through */
.help-pop-t { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.help-pop-x { margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }

/* ---------- The tour, the welcome and the notice (tour.js) ---------- */
/* Layers, bottom up: a dialog 60; the tour's dim and shield 61 (over a dialog, so a step can light up
   part of one); the colour popover 63, a menu 64 and a "?" popover 65 (over the dim); the bubble 66; the
   status menu 70; the toast 80; the welcome 85 (it covers everything). The dim is the dialogs' warm ink
   with a 10px round cut-out round the step's target (and its allowed elements); the shield is clear and
   takes every click except where it has a gap (a doing step's target and allowed elements, an open menu
   or popover), so a click elsewhere outside the bubble does nothing. */
.tour-dim, .tour-shield { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 61; pointer-events: none; }
.tour-shield path { pointer-events: visiblePainted; }
/* the bubble: a dialog card of the new look, 320px; "3 / 17" and Stoppen, the title, the text, the buttons */
.tour-bubble { position: fixed; z-index: 66; left: 12px; top: 12px; width: 320px; max-width: calc(100% - 24px);
  padding: 14px 18px 16px; background: var(--surface); border-radius: var(--radius-pop); box-shadow: var(--shadow-pop);
  animation: pop var(--ease); }
.tour-bubble:empty { display: none; }
.tour-bubble.is-through { pointer-events: none; }  /* docked over a control: only its own buttons take a click */
.tour-bubble.is-through button { pointer-events: auto; }
.tour-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.tour-n { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tour-stop { font: inherit; font-size: 12.5px; color: var(--muted); background: none; border: 0; padding: 0; cursor: pointer;
  border-radius: 4px; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px;
  transition: color var(--ease); }
.tour-stop:hover { color: var(--ink); text-decoration-color: currentColor; }
.tour-t { font-size: 16px; font-weight: 600; line-height: 1.35; }
.tour-x { margin-top: 6px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
/* the hint under the text (the dialog still open on step 8, Volgende waiting for the import on step 9):
   a short line on the soft fill of the info banners */
.tour-hint { margin-top: 10px; padding: 7px 10px; background: var(--hl); border-radius: 8px; font-size: 13px; line-height: 1.45;
  color: var(--ink); }
.tour-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.tour-foot [hidden] { display: none; }
/* a question under the text with its own button (step 17: "Mappen maken") */
.tour-ask { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 10px; }
.tour-ask p { font-size: 13.5px; line-height: 1.5; font-weight: 500; color: var(--ink); }
/* the welcome: the whole window, calm and centred: the mark, the name, the line in both languages, two
   large buttons; then the question with its main button and "Zelf beginnen" under it */
.welcome { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center; padding: 24px 16px; overflow-y: auto;
  background: var(--bg); animation: fade var(--ease); }
.welcome-in { width: 100%; max-width: 520px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.welcome-mark { width: 44px; height: 44px; border-radius: 12px; }
.welcome-mark::after { width: 13px; height: 13px; box-shadow: 0 0 0 5px rgba(210, 74, 34, .25); }
.welcome-name { margin-top: 18px; font-size: 30px; font-weight: 600; letter-spacing: -.03em; line-height: 1.2; }
.welcome-line { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.welcome-name + .welcome-line { margin-top: 10px; }
.welcome-langs { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.welcome-langs .btn { min-width: 168px; }
.welcome-q { margin-top: 12px; max-width: 420px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.welcome-acts { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 28px; }
.welcome-acts .btn-lg { min-width: 220px; }
/* the licence (license.js): the activation and locked screens in the welcome's layer (the mark, the
   title, its line), then the field, the red line under it (room for one line kept, so nothing jumps),
   Activeren (and Annuleren from Settings) and the quiet "Waar vind ik mijn code?" with its text under it */
.lic-title { font-size: 26px; }
.lic-form { width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center; margin-top: 24px; }
.input.lic-key { width: 100%; max-width: 360px; padding: 10px 12px; font-size: 14px; font-family: var(--mono); text-align: center; }
.input.lic-key::placeholder { font-family: var(--font); }
.lic-err { width: 100%; min-height: 20px; margin-top: 8px; font-size: 13px; line-height: 1.5; text-align: center; }
.lic-acts { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 10px; }
.lic-acts .btn-lg { min-width: 220px; }
.lic-help-q { margin-top: 18px; font: inherit; font-size: 13px; color: var(--muted); background: none; border: 0; padding: 2px 4px;
  cursor: pointer; border-radius: 4px; text-decoration: underline; text-decoration-color: var(--border-strong);
  text-underline-offset: 3px; transition: color var(--ease); }
.lic-help-q:hover { color: var(--ink); text-decoration-color: currentColor; }
.lic-help { margin-top: 6px; max-width: 360px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
/* Settings › Licentie: who it is licensed to, the key's last 4 in mono, and the quiet button lined up with
   the text above it */
.set-row.lic-who { flex-wrap: wrap; gap: 4px 12px; overflow-wrap: anywhere; }
.lic-mask { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.btn.lic-other { margin-left: -14px; }

/* the notice under the overview's head (existing users, once): a soft fill, the text, two buttons */
.tour-notice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 16px 0 4px; padding: 10px 12px 10px 16px;
  background: var(--hl); border-radius: var(--radius); font-size: 13.5px; color: var(--ink-2); }
.tour-notice p { flex: 1 1 240px; min-width: 0; }
.tour-notice .btn-ghost:hover { background: var(--track); }

/* ---------- Projects taken off the list (removed.js; the approved mock-up of 23 Oct 2026) ---------- */
/* the overview's quiet "Opruimen" (tertiary), before Lijst / Tijdlijn */
.ov-clean { padding: 6px 10px; }
.ov-clean .btn-ic { stroke-width: 1.8; }
/* the sidebar's "Uit de lijst gehaald" under the categories: quiet (muted, regular weight); only while there is one */
.side-item[hidden] { display: none; }
.side-removed { margin-top: 12px; color: var(--muted); font-weight: 400; }
.side-removed:hover { color: var(--ink-2); }
.side-removed.is-on { color: var(--ink); font-weight: 500; }
/* the question "<naam> uit de lijst halen?": a title over the text */
.ov-card.rm-card { width: 420px; }
.rm-card .ov-h { margin-bottom: 6px; }
.rm-card .ov-msg { color: var(--ink-2); margin-bottom: 0; }
/* "Projecten opruimen": the quick choices, the checklist by year (its year sticks while it scrolls), the
   promise on the soft fill, the count in the foot */
.ov-card.cl-card { width: 580px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; }
.cl-card .ov-h { margin-bottom: 2px; }
.cl-intro { margin-bottom: 14px; }
.cl-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 12px; }
.cl-q { font-size: 12.5px; color: var(--muted); }
.cl-list { flex: 1 1 auto; min-height: 120px; max-height: 340px; overflow-y: auto; border: 1px solid var(--line);
  border-radius: var(--radius); }
.cl-year { position: sticky; top: 0; z-index: 1; display: flex; align-items: baseline; gap: 8px; padding: 6px 12px 5px;
  background: var(--bg-side); border-bottom: 1px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.cl-row { display: grid; grid-template-columns: 16px minmax(0, 1fr) 128px 76px; align-items: center; gap: 10px;
  padding: 7px 12px; border-bottom: 1px solid var(--line); font-size: 13px; cursor: pointer; transition: background var(--ease); }
.cl-row:last-child { border-bottom: 0; }
.cl-row:hover { background: var(--hl); }
.cl-row input { width: 15px; height: 15px; margin: 0; accent-color: var(--ink); cursor: pointer; }
.cl-name { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; color: var(--ink); }
.cl-name > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-row .row-date { text-align: right; }
/* a project whose job runs: greyed (muted text, never faded below AA), "Bezig", its box disabled */
.cl-row.is-busy, .cl-row.is-busy input { cursor: default; }
.cl-row.is-busy:hover { background: none; }
.cl-row.is-busy .cl-name, .cl-row.is-busy .ctag { color: var(--muted); }
.cl-safe { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; padding: 9px 12px; background: var(--hl);
  border-radius: var(--radius-s); font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.cl-safe svg { width: 16px; height: 16px; flex: none; margin-top: 1px; fill: none; stroke: var(--ink-2); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; }
.cl-card .wizard-foot { align-items: center; margin-top: 16px; }
.cl-count { margin-right: auto; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* "Klaar" and "Bezig" beside a name */
.tag-done, .tag-busy { flex: none; font-size: 11.5px; font-weight: 500; padding: 1px 7px; border-radius: 6px; background: var(--track);
  color: var(--muted); }
/* "Uit de lijst gehaald": a row is the name over its category and shoot date, the two actions on the right;
   never a link (no hover fill, the hairlines stay) */
.ar-row { grid-template-columns: minmax(0, 1fr) auto; padding: 10px 12px; cursor: default; }
.ar-row:hover { background: transparent; }
.ar-row:hover::before, .ar-row:hover + .ar-row::before { display: block; }
.ar-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ar-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ar-name .row-name { min-width: 0; }
.ar-meta { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12.5px; color: var(--muted); white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.ar-cat { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ar-acts { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.ar-acts .btn { padding: 5px 12px; font-size: 13px; }
.ar-acts .ar-finder { color: var(--muted); padding: 5px 10px; }
.ar-acts .ar-finder:hover { color: var(--ink); }
/* a toast that holds a button ("Ongedaan maken"): it takes clicks while it shows */
.toast.has-act { display: flex; align-items: center; gap: 14px; padding: 7px 8px 7px 16px; }
.toast.has-act.show { pointer-events: auto; }
.toast-act { flex: none; font-family: var(--font); font-size: 13px; font-weight: 600; color: #fff;
  background: rgba(255, 255, 255, .16); border: 0; border-radius: 7px; padding: 4px 10px; cursor: pointer; }
.toast-act:hover { background: rgba(255, 255, 255, .26); }
.toast-act:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

/* ---------- Empty state ---------- */
/* centred and quiet: an ink 20px line, muted text under it, the one primary button ("＋ Nieuw project") */
.empty { text-align: center; padding: 70px 20px; font-size: 13.5px; color: var(--muted); }
.empty .big { font-family: var(--font); font-size: 20px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); margin: 0 0 6px; }
.empty .btn { margin-top: 18px; }

/* ---------- Toast ---------- */
/* an ink pill at the bottom (an error on the red text shade); above dialogs and menus, so a toast a
   dialog shows (a folder name refused) is not dimmed by its overlay; it never takes a click */
.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(16px);
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--radius);
  font-size: 13.5px; font-weight: 500; box-shadow: var(--shadow-pop); opacity: 0; pointer-events: none;
  transition: opacity var(--ease), transform var(--ease); z-index: 80; max-width: 80%;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { background: var(--rec-text); }

/* ---------- misc ---------- */
.spinner { width: 16px; height: 16px; border: 2px solid var(--line); border-top-color: var(--ink-2);
  border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; vertical-align: -3px; }
@keyframes spin { to { transform: rotate(360deg); } }
.link { color: var(--ink-2); cursor: pointer; font-weight: 500; text-decoration: underline;
  text-decoration-color: var(--border-strong); text-underline-offset: 3px; transition: color var(--ease); }
.link:hover { color: var(--ink); text-decoration-color: currentColor; }
.badge-missing { background: var(--bad-soft); color: var(--rec-text); font-size: 11.5px; font-weight: 500;
  padding: 1px 7px; border-radius: 6px; margin-left: 8px; letter-spacing: 0; }
/* the error of a short job that failed (creating a project, runJob): red, it is an error */
.run-error { margin-top: 8px; color: var(--rec-text); }

/* ---------- Motion: off for people who ask for less ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}