/* Bearing v2 — layout + componenten. Maten volgen de Penpot-schermen op "Timeline concept". */

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overscroll-behavior: none; }
/* De app is een vast scherm: alleen binnenin scrollt iets (tablet: geen verschuivende pagina) */
body { overflow: hidden; }
body { background: var(--color-bg-page); color: var(--color-text-default); font: 400 13px/1.5 var(--font-body); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.muted { color: var(--color-text-muted); }
.subtle { color: var(--color-text-subtle); }
[hidden] { display: none !important; }

/* === App shell === */
.app { display: grid; grid-template-columns: 240px minmax(0, 1fr); height: 100vh; height: 100dvh; }
.sidebar { display: flex; flex-direction: column; gap: 32px; padding: 32px 16px 24px; border-right: 1px solid var(--color-border-default); background: var(--color-bg-surface); }
.brand { padding: 0 12px; }
.nav { display: flex; flex-direction: column; gap: 4px; }
.nav-bottom { margin-top: auto; }
.nav-item { display: block; padding: 8px 12px; border-radius: var(--radius-control); font: 600 13px/1.3 var(--font-body); color: var(--color-text-muted); }
.nav-item:hover { background: var(--color-bg-subtle); color: var(--color-text-default); }
.nav-item.is-active { background: var(--color-bg-muted); color: var(--color-text-default); }
.main { display: flex; flex-direction: column; min-width: 0; height: 100vh; height: 100dvh; }

/* === Top bar === */
.topbar { display: flex; flex-direction: column; gap: 14px; padding: 20px 32px 16px; border-bottom: 1px solid var(--color-border-default); }
.topbar-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; row-gap: 10px; }
.topbar-row .spacer { flex: 1; }
.crumbs { display: flex; align-items: center; gap: 8px; font: 400 13px/1.5 var(--font-body); color: var(--color-text-muted); }
.crumbs button:hover { color: var(--color-text-default); }
.crumbs .sep { color: var(--color-text-subtle); }
.crumbs .current { font: 600 13px/1.3 var(--font-body); color: var(--color-text-default); }
.scales { display: flex; gap: 2px; padding: 4px; background: var(--color-bg-muted); border-radius: var(--radius-control); }
.scale-tab { padding: 6px 14px; border-radius: 6px; font: 600 13px/1.3 var(--font-body); color: var(--color-text-muted); }
.scale-tab:hover { color: var(--color-text-default); }
.scale-tab.is-active { background: var(--color-bg-surface); color: var(--color-text-default); box-shadow: 0 1px 2px rgba(27, 25, 22, .08); }
.timenav { display: flex; gap: 4px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 28px; height: 29px; padding: 0 10px; border: 1px solid var(--color-action-secondary-border); border-radius: var(--radius-control); background: var(--color-action-secondary-bg); font: 600 13px/1 var(--font-body); }
.btn:hover { background: var(--color-action-secondary-bg-hover); }
.btn-primary { background: var(--color-action-primary-bg); color: var(--color-action-primary-text); border-color: var(--color-action-primary-bg); }
.layers { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px; border-radius: var(--radius-chip); border: 1px solid var(--color-border-strong); background: var(--color-bg-surface); font: 600 11px/1.3 var(--font-body); color: var(--color-text-muted); white-space: nowrap; }
.chip.is-on { background: var(--color-bg-inverse); border-color: var(--color-bg-inverse); color: var(--color-text-inverse); }
.chip:disabled { opacity: .5; cursor: default; }
.divider { width: 1px; height: 16px; background: var(--color-border-default); }

/* === Content: kolommen === */
.content { flex: 1; min-height: 0; overflow: auto; position: relative; }
.columns { display: flex; min-height: 100%; width: max-content; }
.col { flex: none; display: flex; flex-direction: column; gap: 18px; padding: 20px 16px 32px; border-right: 1px solid var(--color-border-default); min-height: 100%; }
.col-head { display: flex; flex-direction: column; gap: 4px; }
.col-titlerow { display: flex; align-items: baseline; gap: 8px; }
/* Ahead · Achievements (ADR 0009): de telling in Achievements, en in Ahead één regel die naar Achievements springt */
.side-switch { margin-right: 4px; }
.ach-count { font: 600 13px/1.4 var(--font-body); color: var(--color-text-default); }
.ach-line { align-self: flex-start; padding: 0; font: 600 13px/1.4 var(--font-body); color: var(--color-text-default); text-align: left; }
.ach-line:hover { text-decoration: underline; }
.col-title { font: 600 28px/1.2 var(--font-display); }
.col-title.is-current { color: var(--color-status-active-solid); }
.col-sub { font: 400 16px/1.5 var(--font-body); color: var(--color-text-muted); }
.col-sub.is-current { color: var(--color-status-active-solid); }
.col-actions { margin-left: auto; display: flex; gap: 10px; font: 600 11px/1.3 var(--font-body); color: var(--color-text-muted); }
.col-actions button:hover { color: var(--color-text-default); }
.signal { align-self: flex-start; display: inline-flex; padding: 2px 8px; border-radius: var(--radius-chip); background: var(--color-bg-muted); font: 600 11px/1.3 var(--font-body); color: var(--color-text-default); }
.signal.is-alert { background: var(--color-status-blocked-wash); color: var(--color-status-blocked-text); }
.block { display: flex; flex-direction: column; gap: 8px; }
.block-label { font: 600 11px/1.3 var(--font-body); color: var(--color-text-muted); }
.block-label .count { font: 400 11px/1.4 var(--font-data); color: var(--color-text-subtle); margin-left: 4px; }
.block-text { font: 400 13px/1.5 var(--font-body); color: var(--color-text-muted); }
.link { font: 600 13px/1.3 var(--font-body); color: var(--color-text-default); }
.link:hover { text-decoration: underline; }
.list { display: flex; flex-direction: column; gap: 12px; }
.list-cards { display: flex; flex-direction: column; gap: 8px; }

/* Overzicht: kolombreedtes uit het ontwerp */
.col-today { width: 420px; }
.col-normal { width: 280px; }
.col-life { width: 366px; }
.col-scale { width: var(--col-w, 225px); }
.col-rail { width: 48px; padding: 20px 0; align-items: center; cursor: pointer; }
/* Overview: kolommen groeien mee tot de breedte gevuld is (Today en Life iets meer), nooit smaller dan het
   ontwerp (Horizon-goalcard 248, in Life 334 → kolom 280 / 366; Today 420). Past het niet: horizontaal scrollen. */
.columns.ov-flex { width: 100%; }
.columns.ov-flex > .col-today { flex: 1.5 1 0; min-width: 420px; width: auto; }
.columns.ov-flex > .col-normal { flex: 1 1 0; min-width: 280px; width: auto; }
.columns.ov-flex > .col-life { flex: 1.4 1 0; min-width: 366px; width: auto; }

.col-rail:hover { background: var(--color-bg-subtle); }
.rail-label { writing-mode: vertical-rl; transform: rotate(180deg); font: 600 16px/1.2 var(--font-display); letter-spacing: -0.2px; white-space: nowrap; }
.rail-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-chip); background: var(--color-status-blocked-solid); color: var(--color-status-blocked-on-solid); font: 600 11px/18px var(--font-body); text-align: center; }

/* Zoomstrook rechts */
.zoom-strip { position: sticky; right: 0; top: 0; flex: none; width: 32px; min-height: 100%; display: flex; align-items: flex-start; justify-content: center; border-left: 1px solid var(--color-border-default); background: var(--color-bg-surface); cursor: pointer; }
.zoom-strip span { position: sticky; top: 38vh; writing-mode: vertical-rl; transform: rotate(180deg); font: 600 11px/1.3 var(--font-body); letter-spacing: .08em; color: var(--color-text-subtle); }
.zoom-strip:hover span { color: var(--color-text-default); }

/* Today: Body + Habits */
.body-row { display: flex; align-items: center; gap: 8px; font: 400 13px/1.5 var(--font-body); color: var(--color-text-muted); }
.pill-good { padding: 2px 8px; border-radius: var(--radius-chip); background: var(--color-status-active-solid); color: var(--color-status-active-on-solid); font: 600 11px/1.3 var(--font-body); }
.habits { display: flex; flex-wrap: wrap; gap: 6px; }
.habit { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px 0 6px; border: 1px solid var(--color-border-default); border-radius: var(--radius-chip); background: var(--color-bg-surface); font: 600 11px/1.3 var(--font-body); color: var(--color-text-muted); }
.habit .cb { width: 11px; height: 11px; border: 1.25px solid var(--color-border-control); border-radius: 3px; }
.habit.is-done { color: var(--color-text-default); border-color: var(--color-border-strong); }
.habit.is-done .cb { background: var(--color-bg-inverse); border-color: var(--color-bg-inverse); }

/* === Checkbox (Steps & tasks / Checkbox) === */
.checkbox { flex: none; width: 16px; height: 16px; border: 1.5px solid var(--color-border-control); border-radius: var(--radius-checkbox); background: var(--color-bg-surface); display: inline-flex; align-items: center; justify-content: center; }
.checkbox:hover { border-color: var(--color-text-default); }
.checkbox.is-checked { background: var(--color-bg-inverse); border-color: var(--color-bg-inverse); }
.checkbox.is-checked::after { content: ""; width: 8px; height: 4.5px; border: 2px solid var(--color-text-inverse); border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
.checkbox.is-placeholder { border-color: var(--color-border-default); background: transparent; }
.checkbox:disabled { cursor: default; }

/* === Item (Steps & tasks / Item) === */
.item { display: flex; align-items: flex-start; }
.item--card { gap: 10px; padding: 8px 10px; border: 1px solid var(--color-border-default); border-radius: var(--radius-control); background: var(--color-bg-surface); }
.item--row { gap: 8px; }
.item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.item-meta { display: flex; align-items: center; gap: 6px; min-width: 0; }
.item-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.item-source { font: 400 11px/1.4 var(--font-data); color: var(--color-text-subtle); overflow-wrap: anywhere; }
.item-title { font: 600 13px/1.3 var(--font-body); color: var(--color-text-default); overflow-wrap: anywhere; }
.item-signal { font: 600 11px/1.3 var(--font-body); color: var(--color-text-muted); }
.item.is-done .item-title { color: var(--color-text-muted); }
.item.is-done .item-signal { color: var(--color-text-subtle); }
.item.is-overdue .item-signal { color: var(--color-status-blocked-text); }
.item.is-carried_over .item-signal { color: var(--color-status-paused-solid); }
.item.is-attention .item-signal { color: var(--color-status-paused-solid); }
.item.is-busy { opacity: .5; pointer-events: none; }
/* Plannen: slepen, neerzetten, "Move to…" */
.item[draggable="true"], .gc[draggable="true"] { cursor: grab; }
.item-move { flex: none; align-self: center; width: 22px; height: 22px; border-radius: var(--radius-control); color: var(--color-text-subtle); font: 600 14px/1 var(--font-body); opacity: 0; }
.item:hover .item-move, .item-move:focus-visible { opacity: 1; }
.item-move:hover { background: var(--color-bg-subtle); color: var(--color-text-default); }
.item.is-late .item-signal { color: var(--color-status-paused-solid); }
.gc-move { position: absolute; top: 8px; right: 8px; height: 24px; min-width: 24px; padding: 0 6px; opacity: 0; }
.gc:hover .gc-move, .gc-move:focus-visible { opacity: 1; }
@media (hover: none) { .item-move, .gc-move { opacity: 1; } }
[data-drop].is-drop { background: var(--color-bg-subtle); box-shadow: inset 0 0 0 2px var(--color-border-focus); }
/* Slepen met aanraken (Horizons): opgepakt item en het spook dat je vinger volgt */
[draggable="true"].is-armed { box-shadow: 0 6px 16px rgba(27, 25, 22, .18); transform: scale(1.02); }
.h-drag-ghost { position: fixed; z-index: 60; width: 260px; margin: 0; pointer-events: none; opacity: .92; background: var(--color-bg-surface); border-radius: 10px; box-shadow: 0 10px 28px rgba(27, 25, 22, .22); }
@media (hover: none) {        /* geen eigen sleepbeeld of tekstmenu van de browser bij lang drukken */
  [draggable="true"] { -webkit-user-drag: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
}
.band-slot { flex: none; }
/* Day labels (Bullet Journal): één regel per dag; leeg = alleen de datum (Weeks, Months) of een zachte uitnodiging (Days) */
.day-labels { flex: none; display: flex; flex-direction: column; margin: 0 12px 8px; }
.dl-row { display: flex; align-items: baseline; gap: 8px; min-height: 22px; padding: 1px 6px; border-radius: 6px; cursor: text; font: 400 12px/1.6 var(--font-body); color: var(--color-text-default); }
.dl-row:hover { background: var(--color-bg-subtle); }
.dl-row.is-weekend .dl-day { color: var(--color-text-subtle); }
.dl-day { flex: none; min-width: 38px; font: 600 11px/1.6 var(--font-body); color: var(--color-text-muted); }
.dl-day i { font-style: normal; font-weight: 400; color: var(--color-text-subtle); }
.day-labels.is-month .dl-day { min-width: 40px; }
.dl-row.is-today .dl-day { color: var(--color-status-active-solid); }
.dl-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-row.is-empty .dl-text { color: var(--color-text-subtle); }
.day-labels.is-day .dl-row { min-height: 28px; padding: 3px 8px; font-size: 14px; font-weight: 500; }
.day-labels.is-day .dl-row.is-empty { font-weight: 400; font-style: italic; }
.day-labels.is-month { border-top: 1px solid var(--color-border-default); border-bottom: 1px solid var(--color-border-default); padding: 4px 0; }
.dl-toggle { display: flex; align-items: center; gap: 6px; min-height: 26px; padding: 2px 6px; border-radius: 6px; font: 600 11px/1.3 var(--font-body); color: var(--color-text-muted); text-align: left; }
.dl-toggle:hover { background: var(--color-bg-subtle); }
.dl-chev { display: inline-block; width: 12px; font-size: 14px; line-height: 1; text-align: center; transform: rotate(90deg); transition: transform .15s; }
.day-labels.is-open .dl-chev { transform: rotate(-90deg); }
/* Carried over (ADR 0006): ingeklapt onder wat echt in de periode staat */
.carried { display: flex; flex-direction: column; gap: 8px; }
.carried.is-open .dl-chev { transform: rotate(-90deg); }
.dl-text input { width: 100%; padding: 1px 6px; border: 1px solid var(--color-border-focus); border-radius: 4px; background: var(--color-bg-surface); font: inherit; color: var(--color-text-default); outline: 0; }
.band-slot:not(.has-band) { display: none; }
.band { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 3px; }
.item-bar { height: 22px; padding: 0 8px; border-radius: 6px; background: var(--area-wash, var(--color-bg-muted)); color: var(--area-on-wash, var(--color-text-default));
            font: 600 11px/22px var(--font-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.item-bar:hover { filter: brightness(.97); }
.item-bar:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 1px; }
.item-bar.is-overdue { box-shadow: inset 3px 0 0 var(--color-status-blocked-solid); }
.item-bar.is-carried_over { box-shadow: inset 3px 0 0 var(--color-status-paused-solid); }
.item-bar.is-late { box-shadow: inset 3px 0 0 var(--color-status-paused-solid); }
.move-menu { position: fixed; top: 0; left: 0; right: auto; z-index: 40; min-width: 180px; }
.menu-title { padding: 4px 10px 2px; }
.menu-date { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: default; }
.menu-date input { font: 400 12px/1.3 var(--font-body); border: 1px solid var(--color-border-strong); border-radius: var(--radius-control); padding: 2px 4px; background: var(--color-bg-surface); color: var(--color-text-default); }
.item-add { display: flex; align-items: center; gap: 8px; color: var(--color-text-subtle); font: 400 13px/1.5 var(--font-body); }
.item-add input { flex: 1; min-width: 0; border: 0; border-bottom: 1px solid var(--color-border-strong); outline: 0; background: transparent; font: 400 13px/1.5 var(--font-body); color: var(--color-text-default); padding: 0; }

/* === Goalcard / Horizon === */
.gc { --area-wash: var(--color-bg-muted); --area-on-wash: var(--color-text-muted); --area-line: var(--color-border-strong); --area-text: var(--color-text-muted); --area-glow: none;
      display: flex; flex-direction: column; border: 1px solid var(--color-border-default); border-radius: var(--radius-card); background: var(--color-bg-surface); overflow: hidden; }
.gc-art { position: relative; height: 124px; background: var(--area-wash) center / cover no-repeat; }
.gc-status { position: absolute; top: 10px; left: 10px; padding: 3px 8px; border-radius: var(--radius-chip); background: var(--color-bg-surface); font: 600 11px/1.3 var(--font-body); color: var(--color-text-default); }
.gc-status.is-blocked { background: var(--color-status-blocked-solid); color: var(--color-status-blocked-on-solid); }
.gc-art-label { position: absolute; left: 12px; bottom: 10px; font: 600 11px/1.3 var(--font-body); color: var(--area-on-wash); }
.gc-body { display: flex; flex-direction: column; gap: 4px; padding: 12px; }
.gc-id { font: 400 11px/1.4 var(--font-data); color: var(--color-text-subtle); }
.gc-titlerow { display: flex; align-items: flex-start; gap: 8px; }
.gc-titlerow .checkbox { width: 18px; height: 18px; margin-top: 1px; }
.gc-title { font: 600 16px/1.2 var(--font-display); letter-spacing: -0.2px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gc-areas { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.gc-area-chip { padding: 2px 8px; border-radius: var(--radius-chip); background: var(--area-wash); color: var(--area-on-wash); font: 600 11px/1.3 var(--font-body); white-space: nowrap; }
.gc-dot { width: 8px; height: 8px; border-radius: 50%; }
.gc-progress { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.gc-progress-row { display: flex; justify-content: space-between; font: 600 11px/1.3 var(--font-body); color: var(--color-text-muted); }
.gc-progress-row b { color: var(--color-text-default); font-weight: 600; }
.gc-bar { height: 4px; border-radius: var(--radius-chip); background: var(--color-bg-muted); overflow: hidden; }
.gc-bar i { display: block; height: 100%; background: var(--area-line); border-radius: inherit; }
.gc-achieved-line { font: 600 11px/1.3 var(--font-body); color: var(--area-text); margin-top: 4px; }
.gc.is-achieved { border-color: var(--area-line); box-shadow: var(--area-glow); }
.gc.is-achieved .gc-status { color: var(--area-text); }
.gc.is-achieved .gc-titlerow .checkbox.is-checked { background: var(--area-line); border-color: var(--area-line); }
/* Visiebord in Life: zoveel goal cards naast elkaar als de kolom toelaat — 2 op de ontwerpbreedte (334),
   3 als er ruimte vrijkomt (bv. een kolom ingeklapt), 1 als het krap is */
.visionboard { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; align-items: start; }

/* === Drawer (Unscheduled / On hold) === */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(27, 25, 22, .18); z-index: 10; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 100vw; z-index: 11; display: flex; flex-direction: column; gap: 16px; padding: 24px; background: var(--color-bg-surface); border-left: 1px solid var(--color-border-default); overflow: auto; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; }
.parked-row { align-items: center; gap: 12px; }
.parked-row .btn { flex: none; height: 30px; }
/* Lade Parked: elke regel opent het project of doel */
.parked-link { padding: 6px 8px; margin: 0 -8px; border-radius: var(--radius-control); }
.parked-link:hover { background: var(--color-bg-subtle); }

/* === Signalen (rustig, PRD §8) === */
.health { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font: 600 11px/1.3 var(--font-body); color: var(--color-text-muted); }
.health i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--color-text-subtle); }
.health.is-attention { color: var(--color-status-paused-solid); }
.health.is-attention i { background: var(--color-status-paused-solid); }
.status-pill { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--radius-chip); font: 600 11px/1.3 var(--font-body); white-space: nowrap; }
.status-pill.fam-planned { background: var(--color-status-planned-solid); color: var(--color-status-planned-on-solid); }
.status-pill.fam-active { background: var(--color-status-active-solid); color: var(--color-status-active-on-solid); }
.status-pill.fam-paused { background: var(--color-status-paused-solid); color: var(--color-status-paused-on-solid); }
.status-pill.fam-blocked { background: var(--color-status-blocked-solid); color: var(--color-status-blocked-on-solid); }
.status-pill.fam-waiting { background: var(--color-status-waiting-solid); color: var(--color-status-waiting-on-solid); }
.status-pill.fam-done { background: var(--color-status-done-solid); color: var(--color-status-done-on-solid); }
.status-pill.fam-stopped { background: var(--color-status-stopped-solid); color: var(--color-status-stopped-on-solid); }
.meter { display: flex; flex-direction: column; gap: 4px; min-width: 180px; }
.meter-head { display: flex; justify-content: space-between; gap: 12px; font: 600 11px/1.3 var(--font-body); color: var(--color-text-muted); }
.meter-head b { color: var(--color-text-default); font-weight: 600; }
.meter-bar { display: flex; gap: 3px; }
.meter-bar i { flex: 1; height: 4px; border-radius: var(--radius-chip); background: var(--color-bg-muted); }
.meter-bar i.on { background: var(--area-line, var(--color-border-strong)); }

/* === Pagina (Goals) === */
.page { display: flex; flex-direction: column; gap: 20px; padding: 28px 32px 48px; }
.page-head { display: flex; align-items: flex-start; gap: 24px; justify-content: space-between; flex-wrap: wrap; }
.capture { position: relative; display: flex; flex-direction: column; gap: 8px; width: min(440px, 100%); }
.capture-row { display: flex; gap: 8px; }
.capture-row input { flex: 1; min-width: 0; height: 34px; padding: 0 12px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-control); background: var(--color-bg-surface); font: 400 13px/1.5 var(--font-body); color: var(--color-text-default); outline: 0; }
.capture-row input:focus { border-color: var(--color-border-focus); }
.capture-row .btn { height: 34px; }
.capture-suggest { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--color-border-default); border-radius: var(--radius-card); background: var(--color-bg-subtle); }
.suggest-row { display: grid; grid-template-columns: 64px 1fr auto; align-items: baseline; gap: 8px; padding: 4px 6px; border-radius: var(--radius-control); }
.suggest-row:hover { background: var(--color-bg-subtle); }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.page > .scales { align-self: flex-start; }
.filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.filterbar .spacer { flex: 1; }
.filterbar .t-label-sm { margin-right: 2px; }
.groupby { display: inline-flex; align-items: center; gap: 6px; }
.goal-group { display: flex; flex-direction: column; gap: 12px; }
.goal-group-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.goal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--card-w, 260px), 100%), 1fr)); gap: 16px; }
.sizer { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; }
.sizer input { width: 120px; accent-color: var(--color-text-default); }
.empty-state { padding: 40px 0; max-width: 520px; }

/* === Goalcard / Small (vierkant beeld; breedte via de schuif) === */
.gc--small { position: relative; cursor: pointer; container-type: inline-size; }
.gc--small:hover { border-color: var(--color-border-strong); }
.gc--small:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }
.gc--small .gc-art { height: auto; aspect-ratio: 1 / 1; flex: none; }
.gc--small .gc-body { flex: 1; min-height: 0; }
.gc--small .gc-title { -webkit-line-clamp: 2; font-size: clamp(16px, 6.5cqi, 24px); }
.gc--small .gc-body { padding: clamp(12px, 5cqi, 18px); }
.gc-spacer { flex: 1; }
.gc-reflect { position: absolute; top: 8px; right: 8px; height: 24px; padding: 0 8px; font-size: 11px; opacity: 0; transition: opacity .12s; }
.gc--small:hover .gc-reflect, .gc--small:focus-within .gc-reflect { opacity: 1; }

/* === Goalcard / Large (kop detailpagina) === */
.gcl { --area-wash: var(--color-bg-muted); --area-on-wash: var(--color-text-muted); --area-line: var(--color-border-strong); --area-text: var(--color-text-muted); --area-glow: none;
       display: grid; grid-template-columns: 300px 1fr; min-height: 300px; border: 1px solid var(--color-border-default); border-radius: var(--radius-card); background: var(--color-bg-surface); overflow: hidden; }
.gcl.is-achieved { border-color: var(--area-line); box-shadow: var(--area-glow); }
.gcl-art { position: relative; background: var(--area-wash) center / cover no-repeat; }
.gcl-photo { position: absolute; right: 10px; bottom: 10px; height: 26px; font-size: 11px; opacity: 0; transition: opacity .12s; }
.gcl:hover .gcl-photo, .gcl-photo:focus-visible { opacity: 1; }
.page-detail { max-width: 1680px; }
.gcl-body { display: flex; flex-direction: column; gap: 8px; padding: 20px 24px; }
.gcl-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gcl-title { margin: 0; font: 600 28px/1.2 var(--font-display); letter-spacing: -0.4px; }
.gcl-signals { display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.gcl-signals .health { margin-top: 0; }
/* Naam en type openen de bewerker "naam & type" */
.gcl-title[data-edit-field], .gcl-type { align-self: flex-start; border-radius: var(--radius-control); }
.gcl-title[data-edit-field] { cursor: text; }
.gcl-title[data-edit-field]:hover, .gcl-type:hover { background: var(--color-bg-subtle); }

/* === Doel-detail === */
.page-detail { gap: 16px; }
.detail-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.detail-top .spacer { flex: 1; }
.crumbs a:hover { color: var(--color-text-default); }
.menu-wrap { position: relative; }
.menu { position: absolute; top: 34px; right: 0; z-index: 6; min-width: 200px; display: flex; flex-direction: column; padding: 6px; border: 1px solid var(--color-border-default); border-radius: var(--radius-card); background: var(--color-bg-surface); box-shadow: 0 8px 24px rgba(27, 25, 22, .10); }
.menu-item { padding: 7px 10px; border-radius: var(--radius-control); text-align: left; font: 600 13px/1.3 var(--font-body); }
.menu-item:hover { background: var(--color-bg-subtle); }
.menu-sep { height: 1px; margin: 4px 6px; background: var(--color-border-default); }
.menu-item.is-danger { color: var(--color-status-blocked-text); }
.detail-cols { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
.detail-main, .detail-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.detail-sec { display: flex; flex-direction: column; gap: 14px; padding: 20px; border: 1px solid var(--color-border-default); border-radius: var(--radius-card); background: var(--color-bg-surface); }
.detail-sec h2 { margin: 0; }
.lookback { border-color: var(--color-status-achieved-border); }
.sub-block { display: flex; flex-direction: column; gap: 8px; }
.field-label { font: 600 11px/1.3 var(--font-body); color: var(--color-text-muted); }
.inline { display: flex; flex-direction: column; gap: 4px; }
.inline-head { display: flex; align-items: center; justify-content: space-between; }
.inline-edit { font: 600 11px/1.3 var(--font-body); color: var(--color-text-subtle); opacity: 0; }
.inline:hover .inline-edit, .detail-sec:hover > .inline-head .inline-edit, .inline-edit:focus-visible { opacity: 1; }
.inline-value { font: 400 13px/1.5 var(--font-body); color: var(--color-text-default); cursor: text; border-radius: var(--radius-control); padding: 2px 0; }
.inline-value:hover { background: var(--color-bg-subtle); }
.inline-value.is-empty { color: var(--color-text-subtle); }
.inline textarea, .field textarea, .field input[type="text"], .field input[type="search"], .field input[type="date"] { width: 100%; padding: 8px 10px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-control); background: var(--color-bg-surface); font: 400 13px/1.5 var(--font-body); color: var(--color-text-default); outline: 0; resize: vertical; }
.inline textarea:focus, .field textarea:focus, .field input[type="text"]:focus, .field input[type="search"]:focus, .field input[type="date"]:focus { border-color: var(--color-border-focus); }
.inline-actions { display: flex; justify-content: flex-end; gap: 8px; }
.is-editable { cursor: pointer; border-radius: var(--radius-control); }
.is-editable:hover { background: var(--color-bg-subtle); }
.kv-list { display: flex; flex-direction: column; gap: 14px; }
/* Gebiedkiezer: aan = gebiedskleur; ★ markeert het hoofdgebied */
.sub-block.is-editing { gap: 8px; }
.area-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.area-pick { display: inline-flex; align-items: center; height: 26px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-chip); background: var(--color-bg-surface); color: var(--color-text-muted); font: 600 11px/1.3 var(--font-body); }
.area-pick.is-on { border-color: transparent; background: var(--area-wash); color: var(--area-on-wash); }
.area-pick-toggle { display: inline-flex; align-items: center; gap: 6px; height: 100%; padding: 0 10px; }
.area-pick-toggle i { width: 8px; height: 8px; border-radius: 50%; background: var(--area-fill); }
.area-pick.is-on .area-pick-toggle { padding-right: 4px; }
.area-pick-star { height: 100%; padding: 0 9px 0 2px; font-size: 13px; opacity: .5; }
.area-pick-star.is-main, .area-pick-star:hover { opacity: 1; }
.net-row { display: grid; grid-template-columns: auto 1fr; gap: 0 8px; padding: 8px 10px; border: 1px solid var(--color-border-default); border-radius: var(--radius-control); }
.net-row:hover { border-color: var(--color-border-strong); }
.net-row .t-label-md { grid-column: 1 / -1; }
/* Network bewerken: zelfde vorm als een net-row, met impact-chips en × op de eerste regel */
.net-edit-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px 8px; padding: 8px 10px; border: 1px solid var(--color-border-default); border-radius: var(--radius-control); }
.net-edit-row .t-label-md { grid-column: 1 / -1; }
.net-remove { width: 24px; height: 24px; border-radius: 50%; font-size: 15px; line-height: 1; color: var(--color-text-subtle); }
.net-remove:hover { color: var(--color-status-blocked-text); background: var(--color-bg-subtle); }
/* Omschrijving bij een bijdrage of mijlpaal: grijs, alleen als er iets staat; in de bewerker een optioneel veld */
.link-note { font: 400 12px/1.45 var(--font-body); color: var(--color-text-muted); }
.link-note .t-label-sm { color: var(--color-text-default); }
.net-row .link-note, .net-edit-row .link-note-input { grid-column: 1 / -1; }
.link-note-input { width: 100%; min-width: 0; padding: 5px 8px; border: 1px solid var(--color-border-default); border-radius: var(--radius-control); background: var(--color-bg-surface); font: 400 12px/1.45 var(--font-body); color: var(--color-text-default); outline: 0; }
.link-note-input:focus { border-color: var(--color-border-focus); }
/* Gebieden: impact in de chip (alleen als het niet Medium is); in de bewerker één rij per gekozen gebied */
.area-impact { font-weight: 400; opacity: .8; }
.area-edit-rows { display: flex; flex-direction: column; gap: 8px; }
.area-edit-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 8px; padding: 8px 10px; border: 1px solid var(--color-border-default); border-radius: var(--radius-control); }
.area-edit-row .link-note-input { grid-column: 1 / -1; }
.area-edit-name { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1.3 var(--font-body); }
.area-edit-name i { width: 8px; height: 8px; border-radius: 50%; background: var(--area-fill); }
/* Mijlpaal of logregel bewerken: velden onder elkaar, verwijderen links */
.row-edit { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-control); background: var(--color-bg-surface); }
.row-edit-dates { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.row-edit .inline-actions .spacer { flex: 1; }
.item-add input[type="date"] { flex: 0 0 auto; width: auto; color: var(--color-text-muted); }
.log-head .spacer { flex: 1; }
.log-entry:hover .inline-edit, .log-entry .inline-edit:focus-visible { opacity: 1; }
.log { display: flex; flex-direction: column; gap: 12px; }
.log-entry { display: grid; grid-template-columns: 52px 1fr; gap: 8px; }
.log-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.log-head { display: flex; align-items: center; gap: 6px; }
.log-head i { width: 6px; height: 6px; border-radius: 50%; }
.log-img { max-width: 100%; max-height: 180px; border-radius: var(--radius-control); object-fit: cover; margin-top: 4px; }
.kv { display: grid; grid-template-columns: 96px 1fr; gap: 8px; align-items: baseline; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.photo { position: relative; margin: 0; }
.photo img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-control); background: var(--color-bg-muted); }
.photo figcaption { position: absolute; left: 6px; bottom: 6px; padding: 1px 6px; border-radius: var(--radius-chip); background: var(--color-bg-surface); font: 600 11px/1.3 var(--font-body); }
.photo-del { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; background: rgba(27, 25, 22, .55); color: #fff; font: 600 14px/22px var(--font-body); opacity: 0; }
.photo:hover .photo-del, .photo-del:focus-visible { opacity: 1; }

/* === Dialoog (desktop) / sheet (mobiel) === */
.dlg-backdrop { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(27, 25, 22, .28); }
/* Titel en knoppen blijven altijd in beeld; alleen het middenstuk scrolt. dvh = de echt zichtbare hoogte
   (op de iPad telt 100vh ook het stuk achter de Safari-balk mee, dan viel Save buiten beeld) */
.dlg { width: min(480px, 100%); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow: hidden; display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: var(--radius-card); background: var(--color-bg-surface); box-shadow: 0 16px 48px rgba(27, 25, 22, .18); }
.dlg-grip { display: none; }
.dlg-grip, .dlg-head, .dlg-error, .dlg-actions { flex-shrink: 0; }
.dlg-head { display: flex; flex-direction: column; gap: 4px; }
.dlg-head h2 { margin: 0; }
.dlg-body { display: flex; flex-direction: column; gap: 14px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: -4px; padding: 4px; }  /* marge/opvulling: focusrand niet afknippen */
.dlg-error { color: var(--color-status-blocked-text); }
.dlg-error:empty { display: none; }
.dlg-actions { display: flex; justify-content: flex-end; gap: 8px; }
.btn-quiet { border-color: transparent; background: transparent; }
.btn:disabled { opacity: .5; cursor: default; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-help { font: 400 11px/1.4 var(--font-body); color: var(--color-text-subtle); }
.ctx { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: var(--radius-control); background: var(--color-bg-subtle); }
.ctx-log { font: 400 13px/1.5 var(--font-body); }

.tabbar { display: none; }

/* === Login + meldingen === */
.login { max-width: 360px; margin: 120px auto; display: flex; flex-direction: column; gap: 12px; }
.login input { height: 36px; padding: 0 12px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-control); font: 400 13px/1.5 var(--font-body); }
.loading { padding: 32px; }
/* Melding met een actie (bv. 'Done · Add a note' na afvinken, PRD-D) */
.toast.toast-action { display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 14px; }
.toast-action button { padding: 6px 10px; border-radius: 6px; background: rgba(255, 255, 255, .16); color: inherit; font: inherit; }
.toast-action button:hover { background: rgba(255, 255, 255, .26); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); padding: 8px 14px; border-radius: var(--radius-control); background: var(--color-bg-inverse); color: var(--color-text-inverse); font: 600 13px/1.3 var(--font-body); z-index: 20; }

/* === Notes (ADR 0005): paneel rechts onder de bovenbalk, op de hoogte van de kolommen; de bovenbalk blijft over de volle
   breedte. De tijdlijn wordt smaller en scrolt niet onder het paneel door. === */
.main.with-notes, .main.with-plan { display: grid; grid-template-columns: minmax(0, 1fr) var(--side-w, 400px); grid-template-rows: auto minmax(0, 1fr); }
/* Notes groeit mee met het scherm (2560 breed: ±720 px); --notes-w = de breedte die Remco zelf sleepte (per apparaat).
   Altijd tussen 320 px en 60% van het werkgebied, ook als het venster later kleiner wordt. Unscheduled blijft 400. */
.main.with-notes { --side-w: clamp(320px, var(--notes-w, clamp(400px, 28vw, 720px)), 60%); }
.main.with-notes > .topbar, .main.with-plan > .topbar { grid-column: 1 / -1; }
.main.with-notes > .content, .main.with-plan > .content { grid-column: 1; grid-row: 2; }
.main.with-notes > .notes-panel, .main.with-plan > .plan-side { grid-column: 2; grid-row: 2; }
/* Unscheduled als vast paneel: zelfde plek en vorm als Notes; de lijst scrolt, kop en uitleg blijven staan */
.plan-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; padding: 16px 20px 12px; border-left: 1px solid var(--color-border-default); background: var(--color-bg-surface); }
.plan-side[hidden] { display: none; }
.ps-head { display: flex; align-items: center; gap: 8px; }
.ps-head .spacer { flex: 1; }
.ps-count { font: 600 12px/1.3 var(--font-body); color: var(--color-text-subtle); }
.ps-list { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 16px; margin: 0 -8px; padding: 0 8px 24px; }
.notes-panel { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; padding: 16px 20px 12px; border-left: 1px solid var(--color-border-default); background: var(--color-bg-surface); }
/* Sleeprand: smal met muis (lijn bij hover), breder met een greepje op aanraakschermen */
.np-resize { position: absolute; top: 0; bottom: 0; left: -5px; width: 10px; cursor: col-resize; touch-action: none; z-index: 3; }
.np-resize::after { content: ''; position: absolute; top: 0; bottom: 0; left: 4px; width: 2px; background: transparent; transition: background .15s; }
.np-resize:hover::after, .notes-panel.is-resizing .np-resize::after { background: var(--color-border-focus); }
html.np-resizing, html.np-resizing * { cursor: col-resize !important; user-select: none !important; }
@media (pointer: coarse) {
  .np-resize { left: -12px; width: 24px; }
  .np-resize::after { left: 11px; }
  .np-resize::before { content: ''; position: absolute; top: 50%; left: 9px; width: 6px; height: 40px; margin-top: -20px; border-radius: 3px; background: var(--color-border-strong); }
}
.notes-panel[hidden] { display: none; }
.np-head { display: flex; align-items: center; gap: 6px; }
.np-head .spacer { flex: 1; }
.np-head .np-title { min-width: 0; }
.np-step { height: 28px; padding: 0 9px; }
.np-close { width: 28px; height: 28px; border-radius: 50%; font-size: 17px; color: var(--color-text-subtle); }
.np-close:hover { background: var(--color-bg-subtle); color: var(--color-text-default); }
.np-path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Tweede regel: pad + Apply template (Penpot: Notes / Panel); de kop blijft zoals hij was */
.np-sub { display: flex; align-items: center; gap: 12px; min-width: 0; }
.np-sub .np-path { flex: 1; min-width: 0; }
.np-template { flex: none; height: 28px; }
.np-menu { top: 0; right: 20px; left: auto; z-index: 8; max-height: 60vh; overflow: auto; }
.np-name { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.np-editor { flex: 1; min-height: 0; overflow: hidden; border-top: 1px solid var(--color-border-default); padding-top: 6px; }
.np-editor .cm-editor { height: 100%; }
.np-editor .cm-editor.cm-focused { outline: none; }
.np-editor .cm-scroller { font: 400 14px/1.65 var(--font-body); }
.np-editor .cm-content { padding: 4px 0 40px; caret-color: var(--color-text-default); }
.np-editor .cm-placeholder { color: var(--color-text-subtle); font-style: italic; }
.np-conflict { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 8px; background: var(--color-status-blocked-wash); color: var(--color-status-blocked-text); }
.np-conflict[hidden] { display: none; }
.np-conflict-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.np-status { min-height: 18px; }
/* Zoeken in daily notes (in het venster): treffers als lijst, de gevonden regel in volle kleur */
.ns-results { display: flex; flex-direction: column; gap: 8px; }
.ns-hit { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 10px 12px; border: 1px solid var(--color-border-default); border-radius: 8px; background: var(--color-bg-surface); text-align: left; cursor: pointer; }
.ns-hit:hover { background: var(--color-bg-subtle); }
.ns-lines { display: flex; flex-direction: column; gap: 2px; color: var(--color-text-subtle); }
.ns-line { padding-left: calc(var(--ns-depth, 0) * 6px); overflow-wrap: anywhere; }
.ns-line.is-match { color: var(--color-text-default); }
.ns-hit mark { background: var(--color-bg-muted); color: inherit; font-weight: 600; border-radius: 2px; }
.col-scale[data-start] .col-head[data-note-day] { cursor: pointer; }
.col-scale.is-noted { background: var(--color-bg-subtle); }
.notes-chip.is-on { background: var(--color-bg-inverse); border-color: var(--color-bg-inverse); color: var(--color-text-inverse); }

/* === Tablet (iPad): smallere zijbalk, zodat de inhoud de breedte krijgt === */
@media (min-width: 761px) and (max-width: 1280px) {
  .app { grid-template-columns: 184px minmax(0, 1fr); }
  .main.with-plan { --side-w: 360px; }
  .main.with-notes { --side-w: clamp(320px, var(--notes-w, 360px), 60%); }
  .sidebar { gap: 24px; padding: 24px 10px 20px; }
}

/* === Mobiel: zijbalk weg, Horizons als verticale stapel (tijdlijn scrolt omlaag/omhoog) === */
.mobile-only { display: none; }
@media (max-width: 760px) {
  .mobile-only { display: inline-flex; }
  .columns { flex-direction: column; width: 100%; min-height: 0; }
  .col, .col-today, .col-normal, .col-life, .col-scale { width: 100%; min-height: 0; border-right: 0; border-bottom: 1px solid var(--color-border-default); }
  .col-scale { gap: 12px; padding: 16px 16px 20px; }
  .col-scale .col-title { font-size: 22px; }
  .col-rail { width: 100%; flex-direction: row; justify-content: flex-start; gap: 8px; padding: 12px 16px; }
  .rail-label { writing-mode: horizontal-tb; transform: none; }
  .zoom-strip { display: none; }
  .scales { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .scale-tab { flex: none; }
  .app { grid-template-columns: 1fr; }
  .main.with-notes, .main.with-plan { display: flex; }
  .plan-side { display: none !important; }                               /* telefoon: Unscheduled blijft de lade */
  /* Telefoon: het Notes-paneel over het hele scherm (boven de tabbalk); × brengt je terug (PRD-D feature 3) */
  .main.with-notes > .notes-panel { position: fixed; inset: 0 0 56px 0; z-index: 20; border-left: 0; padding: 12px 16px; }
  .np-resize { display: none; }
  .sidebar { display: none; }
  .topbar { padding: 12px 16px; }
  .topbar-row { flex-wrap: wrap; }
  .layers { display: none; }
  .main { height: calc(100vh - 56px); height: calc(100dvh - 56px); }
  .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; display: flex; height: 56px; border-top: 1px solid var(--color-border-default); background: var(--color-bg-surface); }
  .tabbar a { flex: 1; display: flex; align-items: center; justify-content: center; font: 600 13px/1.3 var(--font-body); color: var(--color-text-muted); }
  .tabbar a.is-active { color: var(--color-text-default); box-shadow: inset 0 2px 0 var(--color-text-default); }
  .toast { bottom: 72px; }
  .page { padding: 20px 16px 40px; gap: 16px; }
  .goal-grid { gap: 12px; }
  .gc-reflect { opacity: 1; }
  .gcl-photo, .photo-del { opacity: 1; }
  .sizer input { width: 90px; }
  .filterbar { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px; scrollbar-width: none; }
  .filterbar .spacer { flex: none; width: 8px; }
  .gcl { grid-template-columns: 1fr; }
  .gcl { min-height: 0; }
  .gcl-art { aspect-ratio: 1 / 1; }
  .gcl-body { padding: 16px; }
  .gcl-title { font-size: 22px; }
  .detail-cols { grid-template-columns: 1fr; }
  .detail-sec { padding: 16px; }
  .inline-edit { opacity: 1; }
  .dlg-backdrop { align-items: flex-end; padding: 0; }
  .dlg { width: 100%; max-height: 88vh; max-height: 88dvh; border-radius: 16px 16px 0 0; padding: 12px 16px 24px; }
  .dlg-grip { display: block; align-self: center; width: 36px; height: 4px; border-radius: 2px; background: var(--color-border-strong); }
  .dlg-actions .btn { flex: 1; height: 40px; }
}

/* === Taak bewerken (FR-01) en projectnummers (FR-03) === */
.dlg-actions .spacer { flex: 1; }
.dlg-actions .is-danger { color: var(--color-status-blocked-text); }
.dlg-actions .is-armed { background: var(--color-status-blocked-wash); border-color: var(--color-status-blocked-text); }
.td-date { width: 100%; max-width: 200px; padding: 6px 10px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-control); background: var(--color-bg-surface); font: 400 13px/1.4 var(--font-body); color: var(--color-text-default); }
.td-link { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.td-link-name { font: 600 13px/1.4 var(--font-body); }
.td-suggest { margin-top: 6px; padding: 6px 10px; border: 1px dashed var(--color-border-strong); border-radius: var(--radius-control); background: transparent; font: 400 12px/1.4 var(--font-body); color: var(--color-text-muted); text-align: left; cursor: pointer; }
.chip { cursor: pointer; }
.item--row .item-body, .item--card .item-body { cursor: default; }
.item[data-kind="todoist"] .item-body { cursor: pointer; }
.dlg--numbers { width: min(560px, 100%); }
.pn-search { width: 100%; padding: 8px 10px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-control); background: var(--color-bg-surface); font: 400 14px/1.4 var(--font-body); color: var(--color-text-default); outline: 0; }
.pn-search:focus { border-color: var(--color-border-focus); }
.pn-sep { width: 1px; height: 16px; background: var(--color-border-default); margin: 0 2px; }
.pn-list { display: flex; flex-direction: column; gap: 14px; min-height: 120px; }
.pn-group { display: flex; flex-direction: column; gap: 2px; }
.pn-group-name { padding: 0 2px 4px; }
.pn-row { display: flex; align-items: stretch; gap: 4px; }
.pn-row.is-current .pn-main { background: var(--color-bg-muted); }
.pn-main { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; padding: 8px 10px; border: 0; border-radius: var(--radius-control); background: transparent; text-align: left; cursor: pointer; color: var(--color-text-default); }
.pn-main:hover, .pn-bare:hover { background: var(--color-bg-subtle); }
.pn-id { flex: none; font: 400 12px/1.4 var(--font-data); color: var(--color-text-muted); min-width: 56px; }
.pn-name { flex: 1; min-width: 0; font: 400 14px/1.4 var(--font-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-status { flex: none; font: 600 11px/1.3 var(--font-body); color: var(--color-text-subtle); }
.pn-bare { flex: none; padding: 0 10px; border: 1px solid var(--color-border-default); border-radius: var(--radius-control); background: transparent; font: 400 12px/1 var(--font-data); color: var(--color-text-muted); cursor: pointer; }
.nav-numbers { width: 100%; text-align: left; border: 0; background: transparent; cursor: pointer; }
.tabbar .tab-numbers { flex: 0 0 52px; border: 0; background: transparent; font: 600 15px/1 var(--font-data); color: var(--color-text-muted); }
.linked-tasks .item { margin: 0; }
@media (pointer: coarse) { .pn-main { padding: 11px 10px; } .pn-bare { padding: 0 12px; } }
@media (max-width: 760px) {
  .dlg--task .dlg-actions { flex-wrap: wrap; }
  .dlg--task .dlg-actions [data-delete], .dlg--task .dlg-actions [data-complete] { flex: 1 1 40%; }
  .dlg--task .dlg-actions .spacer { flex-basis: 100%; height: 0; }
}
.td-link .spacer { flex: 1; }
.dlg-actions { flex-wrap: wrap; } .dlg-actions .btn { white-space: nowrap; }
@media (pointer: coarse) { .dlg--task .chip, .dlg--numbers .chip { height: 32px; padding: 0 14px; font-size: 13px; } }

/* === Inbox (FR-05) === */
.nav-count { margin-left: 4px; font: 400 11px/1 var(--font-data); color: var(--color-status-paused-solid); }
.inbox-chip { border-color: var(--color-status-paused-solid); color: var(--color-status-paused-solid); text-decoration: none; }
.page-inbox { max-width: 760px; }
.ib-capture { display: flex; gap: 8px; align-items: flex-start; }
.ib-capture textarea { flex: 1; padding: 8px 10px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-control); background: var(--color-bg-surface); font: 400 14px/1.5 var(--font-body); color: var(--color-text-default); resize: vertical; outline: 0; }
.ib-capture textarea:focus { border-color: var(--color-border-focus); }
.ib-list { display: flex; flex-direction: column; gap: 12px; }
.ib-item { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border: 1px solid var(--color-border-default); border-radius: var(--radius-card); background: var(--color-bg-surface); }
.ib-item.is-processed { background: var(--color-bg-subtle); }
.ib-text { font: 400 15px/1.5 var(--font-body); white-space: pre-wrap; overflow-wrap: anywhere; }
.ib-files { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ib-img { max-width: 220px; max-height: 160px; border-radius: 6px; display: block; }
.ib-audio { max-width: 100%; }
.ib-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.ib-actions .btn { height: 34px; padding: 0 14px; }
.ib-done { display: flex; align-items: center; gap: 8px; color: var(--color-text-muted); }
.ib-done span { flex: 1; }
.ib-when { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; }
.ib-when input, .ib-select { width: 100%; padding: 7px 10px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-control); background: var(--color-bg-surface); font: 400 13px/1.4 var(--font-body); color: var(--color-text-default); }
.ib-check { display: flex; align-items: center; gap: 8px; font: 400 13px/1.4 var(--font-body); }
.ib-preview { padding: 10px 12px; border-radius: 6px; background: var(--color-bg-subtle); font-family: var(--font-data); font-size: 12px; }
.toast-undo { display: flex; align-items: center; gap: 12px; }
.toast-undo .btn { color: inherit; }
@media (max-width: 760px) { .ib-actions .btn { flex: 1 1 28%; height: 40px; } .ib-when { grid-template-columns: 1fr 1fr; } .ib-when .field:first-child { grid-column: 1 / -1; } }

/* === Catch up (ADR 0006 stap 4) === */
.cu-backdrop { position: fixed; inset: 0; z-index: 30; display: flex; justify-content: flex-end; background: rgba(27, 25, 22, .28); }
.cu { width: min(480px, 100%); height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 20px 20px 12px; background: var(--color-bg-surface); box-shadow: -16px 0 48px rgba(27, 25, 22, .16); }
.cu .dlg-grip { display: none; }
.cu-head { display: flex; align-items: flex-start; gap: 10px; }
.cu-head h2 { margin: 2px 0 0; }
.cu-left { padding-top: 22px; color: var(--color-text-muted); }
.cu-bar { height: 4px; border-radius: 2px; background: var(--color-bg-muted); overflow: hidden; flex-shrink: 0; }
.cu-bar i { display: block; height: 100%; width: 0; background: var(--color-status-active-solid); transition: width .3s; }
.cu-hint { margin: 0; }
.cu-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 4px; margin: 0 -8px; padding: 0 8px; }
.cu-row { display: flex; flex-direction: column; gap: 8px; padding: 10px 10px 12px; border-radius: var(--radius-control); border: 1px solid transparent; }
.cu-row.is-focus { border-color: var(--color-border-strong); }
.cu-row.is-selected { background: var(--color-bg-muted); }
.cu-row .item { padding: 0; background: none; border: 0; }
.cu-row .item-body { cursor: pointer; }
.cu-actions { display: flex; gap: 6px; padding-left: 26px; flex-wrap: wrap; }
.cu-actions .btn { height: 30px; }
.cu-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 32px 4px; }
.cu-bulk { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 10px; border-radius: var(--radius-control); background: var(--color-bg-subtle); }
.cu-keys { flex-shrink: 0; }
.cu-toast { z-index: 40; }
.catchup-chip { border-color: var(--color-status-paused-solid); color: var(--color-status-paused-solid); }
@media (pointer: coarse) { .cu-actions .btn, .cu-bulk .btn { height: 44px; padding: 0 16px; } .cu-keys { display: none; } .cu-row .checkbox { width: 22px; height: 22px; } }
@media (max-width: 760px) {
  .cu-backdrop { align-items: flex-end; }
  .cu { width: 100%; height: 92vh; height: 92dvh; border-radius: 16px 16px 0 0; padding: 12px 16px 16px; box-shadow: 0 -16px 48px rgba(27, 25, 22, .16); }
  .cu .dlg-grip { display: block; align-self: center; width: 36px; height: 4px; border-radius: 2px; background: var(--color-border-strong); }
  .cu-actions { padding-left: 0; }
  .cu-actions .btn { flex: 1; }
}
.carried-head { display: flex; align-items: center; gap: 8px; } .carried-head .dl-toggle { flex: 1; } .carried-catch { height: 26px; padding: 0 8px; font-size: 12px; color: var(--color-status-paused-solid); }
.cu-head .spacer, .cu-bulk .spacer { flex: 1; }

/* === Plan panel (ADR 0006 stap 4): Horizons rechts / lade, Calendar rechts — één paneel === */
.plan-panel { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.cal-panel.plan-panel { padding: 14px 12px 0; gap: 6px; }
.drawer.plan-panel { overflow: hidden; }
.pl-head { display: flex; align-items: flex-start; gap: 8px; }
.pl-head .spacer { flex: 1; }
.pl-search { width: 100%; padding: 7px 10px; border: 1px solid var(--color-border-default); border-radius: var(--radius-control); background: var(--color-bg-surface); font: 400 13px/1.3 var(--font-body); color: var(--color-text-default); outline: 0; }
.pl-search:focus { border-color: var(--color-border-focus); }
.pl-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 10px; padding-bottom: 24px; margin: 0 -6px; padding-left: 6px; padding-right: 6px; }
.pl-group-head { display: flex; align-items: center; gap: 6px; }
.pl-toggle { flex: 1; display: flex; align-items: center; gap: 6px; padding: 6px 2px; border: 0; background: none; font: 600 11px/1 var(--font-body); text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-subtle); cursor: pointer; text-align: left; }
.pl-caret { width: 10px; }
.pl-count { margin-left: 4px; font: 400 11px/1 var(--font-data); color: var(--color-text-subtle); text-transform: none; }
.pl-action { height: 24px; padding: 0 8px; font-size: 12px; color: var(--color-status-paused-solid); }
.pl-body { display: flex; flex-direction: column; gap: 4px; }
.pl-row.is-nested { margin-left: 22px; }
.pl-project { display: flex; align-items: flex-start; gap: 2px; }
.pl-project .pl-row { flex: 1; min-width: 0; }
.pl-ptoggle { flex: none; width: 22px; padding: 4px 0 0; border: 0; background: none; font: 400 10px/1.4 var(--font-data); color: var(--color-text-subtle); cursor: pointer; text-align: left; }
.pl-ptoggle.is-empty { cursor: default; text-align: center; }
.pl-sub { padding: 6px 2px 2px; }
.pl-filter { flex: none; height: 20px; padding: 0 8px; border-radius: var(--radius-chip); border: 1px solid var(--color-border-strong); background: none; font: 600 10.5px/1 var(--font-body); color: var(--color-text-muted); cursor: pointer; }
.pl-filter.is-on { background: var(--color-bg-inverse); border-color: var(--color-bg-inverse); color: var(--color-text-inverse); }
.pl-tprojects { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 8px; padding: 6px 8px; border-radius: 6px; background: var(--color-bg-subtle); }
.pl-tproj { display: flex; align-items: center; gap: 8px; font: 400 12px/1.4 var(--font-body); cursor: pointer; }
.pl-tproj span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-empty { padding: 2px 4px 6px; }
.cal-panel .pl-row[data-plan-kind] { cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: pan-y; border-radius: 8px; }
.cal-panel .pl-row.is-armed { box-shadow: 0 6px 16px rgba(27, 25, 22, .18); transform: scale(1.02); background: var(--color-bg-surface); }
.cal-panel .item-title { font-size: 12.5px; }