/* ===== Self-hosted fonts ===== */
@font-face {
    font-family: "Bridgeport Sans";
    src: url("/static/fonts/bridgeportsans-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Bridgeport Sans";
    src: url("/static/fonts/bridgeportsans-semibold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* ===== Design Tokens ===== */
:root {
    --font-display: "Bridgeport Sans", system-ui, sans-serif;
    --font-body: "Bridgeport Sans", system-ui, sans-serif;
    /* Display headlines previously used Instrument Serif italic. We now use
       the same body font everywhere — the variable is kept so existing rules
       still resolve, and italics are reset on the elements that opted in. */
    --font-serif: var(--font-body);

    /* Layout */
    --sidebar-width: 244px;
    --app-bg: #F4F4F2;          /* same as sidebar (paper) */
    --sidebar-bg: #F4F4F2;
    --content-bg: #FFFFFF;
    --surface: #F4F4F2;
    --surface-2: #ECECE8;

    /* Text */
    --ink: #111111;
    --ink-secondary: #4A4A48;
    --ink-tertiary: #8A8A86;

    /* Borders */
    --border: #E6E6E1;
    --border-light: #ECECE8;
    --border-strong: #D6D6D0;

    /* Priority — desaturated mono-leaning accents */
    --priority-high: #9A2B2B;
    --priority-medium: #B8651A;
    --priority-low: #1E5FB0;

    /* Area accents (desaturated, mono-leaning) */
    --area-1: #2F5F3A;
    --area-2: #5A4FCF;
    --area-3: #B8651A;
    --area-4: #2F5470;
    --area-5: #8B3A62;

    /* Interactive */
    --accent: #111111;
    --good: #2F5F3A;
    --danger: #9A2B2B;
    --hover-bg: rgba(0, 0, 0, 0.035);
    --active-bg: rgba(0, 0, 0, 0.06);

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-card: 0 1px 0 rgba(0,0,0,0.02), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-menu: 0 8px 24px rgba(0, 0, 0, 0.08);
    --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.08);

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 22px;
    --radius-pill: 999px;
}

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

body {
    font-family: var(--font-body);
    color: var(--ink);
    min-height: 100vh;

    /* Filled surfaces a theme paints: primary buttons, checked boxes, active
       pills. These live on `body`, not `:root`, because that is where
       data-theme sets --ink — on :root the fallback would resolve against the
       default ink once and every theme would paint black. A [data-theme] rule
       outranks this one, so a theme whose colour is too light to carry body
       text sets these two alone and leaves --ink dark. */
    --ink-fill: var(--ink);
    --ink-fill-text: #fff;
}

/* ===== App Layout (full-screen) ===== */
body.app-page {
    background: var(--sidebar-bg);
    display: block;
    padding: 0;
}

.app-layout {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    min-height: 100vh;
}

/* ===== Sidebar ===== */
.sidebar {
    background: var(--sidebar-bg);
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    height: 100vh;
    height: 100dvh;
    position: sticky;
    top: 0;
    overflow-y: auto;
}


.profile-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ink-fill);
    color: var(--ink-fill-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.profile-name {
    flex: 1;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--ink);
}


.sidebar-section {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-section-label {
    display: block;
    padding: 0 12px;
    margin-bottom: 4px;
    font-size: 0.83rem;
    font-weight: 700;
    color: var(--ink);
}

/* When sidebar-section-label is also a toggle button, reset block display */
button.sidebar-section-label {
    display: flex;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebar-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    border: none;
    background: transparent;
    color: var(--ink-secondary);
    font-size: 0.82rem;
    font-weight: 300;
    font-family: var(--font-body);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    width: 100%;
    text-align: left;
}

.sidebar-item:hover {
    background: var(--hover-bg);
    color: var(--ink);
}

.sidebar-item.active {
    background: var(--active-bg);
    color: var(--ink);
    font-weight: 600;
}


.sidebar-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sidebar-count {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--ink-tertiary);
    min-width: 16px;
    text-align: right;
}

/* Keep an empty count in flow so margin-left:auto still pushes the
   trailing "+" affordance to the right edge of the item. */
.sidebar-count:empty {
    min-width: 0;
}

/* ===== Area Tree (Areas → Goals → Projects) ===== */
.area-tree {
    display: flex;
    flex-direction: column;
    gap: 2px;
}


/* Color swatch for areas (inherits color via inline style) */
.area-swatch {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}


/* Inline color swatch in task chips */
.todo-area-swatch {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* ===== Main Content ===== */
.main-content {
    background: var(--content-bg);
    border-radius: 17px;
    margin: 10px 10px 10px 10px;
    overflow: hidden;
    padding: 18px 40px 32px 24px;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 40px);
    box-shadow: -6px 10px 15px -3px rgba(0, 0, 0, 0.1), -2px 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    padding-left: 24px;
    padding-right: 40px;
    margin-left: -24px;
    margin-right: -40px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
}

.content-header-left {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.content-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ink);
}

.content-task-count {
    font-size: 0.85rem;
    color: var(--ink-tertiary);
}

.content-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.content-header-actions[hidden] {
    display: none;
}

.project-complete-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--ink-secondary);
    font-size: 0.82rem;
    font-family: var(--font-body);
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.project-complete-btn[hidden] {
    display: none;
}

.project-complete-btn:hover {
    background: var(--hover-bg);
    color: var(--ink);
    border-color: var(--ink-tertiary);
}

.project-complete-btn svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}


/* ===== Status Message ===== */
.status-message {
    min-height: 0;
    font-size: 0.85rem;
    color: #a16207;
    opacity: 0;
    transition: opacity 0.2s ease;
    padding: 0;
}

.status-message.visible {
    opacity: 1;
    min-height: 22px;
    padding: 8px 0;
}

/* ===== Task List ===== */
.task-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 0;
}

.todo-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 8px;
    animation: floatIn 0.25s ease forwards;
    opacity: 0;
    transition: background 0.15s ease;
}

.todo-item:hover {
    background: var(--hover-bg);
}

.todo-item.completed {
    opacity: 0.5;
}


/* ===== Custom Checkbox ===== */
.todo-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 17px;
    height: 17px;
    border: 2px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 2px;
    transition: border-color 0.15s ease, background 0.15s ease;
    position: relative;
}

.todo-checkbox:hover {
    border-color: var(--ink-tertiary);
}

.todo-checkbox:checked {
    background: var(--accent);
    border-color: var(--accent);
}

.todo-checkbox:checked::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 4px;
    width: 4px;
    height: 7px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Priority-colored checkbox borders */
.todo-item.priority-high .todo-checkbox {
    border-color: var(--priority-high);
}

.todo-item.priority-medium .todo-checkbox {
    border-color: var(--priority-medium);
}

.todo-item.priority-low .todo-checkbox {
    border-color: var(--priority-low);
}

/* ===== Task Content ===== */
.todo-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.todo-text {
    font-size: 0.875rem;
    color: var(--ink);
    line-height: 1.4;
}

.todo-text.completed {
    text-decoration: line-through;
    color: var(--ink-tertiary);
}

.todo-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.todo-meta-chip {
    font-size: 0.6875rem;
    color: var(--ink-secondary);
    font-weight: 500;
}

.todo-meta-chip.todo-area {
    color: var(--ink-secondary);
}


.todo-meta-chip.todo-state-in_progress { color: #007aff; }
.todo-meta-chip.todo-state-waiting     { color: #ff9500; }
.todo-meta-chip.todo-state-someday     { color: #8e8e93; }
.todo-meta-chip.todo-state-done        { color: #34c759; }

.todo-meta-chip.todo-deadline {
    color: var(--priority-high);
}

.todo-meta-chip.todo-planned-date {
    color: var(--ink-secondary);
}

.todo-meta-chip.todo-planned-overdue {
    color: var(--priority-high);
}

.todo-meta-chip.todo-start-date {
    color: var(--ink-secondary);
}

.todo-meta-chip.todo-duration {
    color: var(--ink-tertiary);
}

/* ===== Task Actions / Context Menu ===== */
.todo-actions {
    position: relative;
    display: flex;
    align-items: center;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.todo-item:hover .todo-actions,
.todo-item.menu-open .todo-actions {
    opacity: 1;
}

.menu-btn {
    border: none;
    background: transparent;
    color: var(--ink-tertiary);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 1px;
    transition: background 0.15s ease, color 0.15s ease;
}

.menu-btn:hover {
    background: var(--hover-bg);
    color: var(--ink);
}

.todo-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    min-width: 220px;
    display: none;
    flex-direction: column;
    gap: 2px;
    padding: 4px;
    border-radius: var(--radius-md);
    background: var(--content-bg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-menu);
    z-index: 10;
}

.todo-item.menu-open .todo-menu {
    display: flex;
}

/* Opened by right-click: placed at the pointer instead of under the button. */
.todo-menu.at-pointer {
    right: auto;
    z-index: 1000;
    max-height: calc(100vh - 16px);
    overflow-y: auto;
}

body.menu-backdrop-active::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(17, 17, 17, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 9;
    pointer-events: none;
}

.todo-item.menu-open {
    position: relative;
    z-index: 10;
}

.project-menu-wrap.menu-open {
    z-index: 10;
}

/* ----- Task menu -----
   Two rows you can hit straight away (a date, a priority) above the rows that
   open something, and what happens to the task itself at the bottom. The
   letter on the right of a row is the key that reaches it from the list. */
.todo-menu.tm {
    min-width: 264px;
    gap: 0;
    padding: 6px;
    border-radius: 16px;
}
.tm-section { padding: 6px 8px 8px; }
.tm-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}
.tm-key {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-tertiary);
}
.tm-quick { display: flex; align-items: center; gap: 10px; }
.tm-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 9px;
    background: transparent;
    cursor: pointer;
}
.tm-icon svg { width: 20px; height: 20px; }
.tm-icon:hover { background: var(--surface); }
.tm-icon.is-today { color: var(--area-1); }
.tm-icon.is-tomorrow { color: var(--priority-low); }
.tm-icon.is-week { color: var(--priority-medium); }
.tm-icon.is-pick { color: var(--ink); }
/* A button may not hold an input, so the date field is its sibling and the
   slot around them is what carries the click. */
.tm-icon-slot { position: relative; display: inline-flex; }
.tm-slot { position: relative; display: flex; }
/* The date input is only here to hand us the browser's own picker. */
.tm-native-date {
    position: absolute;
    left: 8px;
    bottom: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    border: none;
    opacity: 0;
    pointer-events: none;
}
.tm-prio {
    min-width: 34px;
    height: 30px;
    padding: 0 8px;
    border: none;
    border-radius: 9px;
    background: transparent;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
}
.tm-prio:hover { background: var(--surface); }
.tm-prio.is-high { color: var(--priority-high); }
.tm-prio.is-medium { color: var(--priority-medium); }
.tm-prio.is-low { color: var(--priority-low); }
.tm-prio.is-on { background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-strong); }

.tm-sep {
    height: 1px;
    background: var(--border-light);
    margin: 4px -6px;
}

.tm-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 9px 8px;
    border: none;
    border-radius: 10px;
    background: transparent;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
}
.tm-item svg { width: 17px; height: 17px; flex: none; color: var(--ink-secondary); }
.tm-item .tm-label { flex: 1; white-space: nowrap; }
.tm-item:hover { background: var(--surface); }
.tm-item.is-danger, .tm-item.is-danger svg { color: var(--priority-high); }
.tm-item.is-danger:hover { background: color-mix(in srgb, var(--priority-high) 8%, transparent); }

/* ===== Task Detail Modal ===== */
.task-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.32);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 20px;
}

.task-modal-overlay[hidden] {
    display: none;
}

.task-modal {
    width: min(720px, 100%);
    max-height: 85vh;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

.task-modal-body {
    display: grid;
    grid-template-columns: 1fr 220px;
    height: 100%;
}

/* Left panel */
.task-modal-left {
    padding: 16px 24px 24px;
    border-right: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
}

.modal-left-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-close-btn,
.modal-delete-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--ink-tertiary);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.modal-close-btn:hover {
    background: var(--hover-bg);
    color: var(--ink);
}

.modal-delete-btn:hover {
    color: var(--priority-high);
    background: rgba(255, 59, 48, 0.08);
}

.modal-close-btn svg,
.modal-delete-btn svg {
    width: 15px;
    height: 15px;
}

.modal-title-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.modal-checkbox {
    margin-top: 5px;
    flex-shrink: 0;
}

.modal-title-input {
    flex: 1;
    border: none;
    font-size: 1.2rem;
    font-weight: 600;
    font-family: var(--font-body);
    color: var(--ink);
    outline: none;
    padding: 2px 0;
    line-height: 1.4;
    background: transparent;
    resize: none;
    overflow: hidden;
    min-height: 1.68em;
    word-break: break-word;
}

/* Right panel */
.task-modal-right {
    background: #f5f5f7;
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow-y: auto;
}

/* Modal field rows */
.modal-field {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    transition: background 0.15s ease;
    cursor: pointer;
}

.modal-field:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* Icon: muted when unset, normal when set */
.modal-field-icon {
    width: 15px;
    height: 15px;
    color: #c7c7cc;
    flex-shrink: 0;
    transition: color 0.15s ease;
}

.modal-field.is-set .modal-field-icon {
    color: var(--ink-tertiary);
}

/* Field body: flex container for label + input */
.modal-field-body {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    min-height: 18px;
}

/* Label: shown when unset, hidden when set/editing */
.modal-field-label {
    font-size: 0.82rem;
    color: #c7c7cc;
    pointer-events: none;
    white-space: nowrap;
    line-height: 1;
}

.modal-field.is-set .modal-field-label,
.modal-field.is-editing .modal-field-label {
    display: none;
}

/* Select inputs: invisible overlay when unset so clicking the row opens them */
select.modal-field-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    border: none;
    background: transparent;
    font-size: 0.85rem;
    font-family: var(--font-body);
    outline: none;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
}

.modal-field.is-set select.modal-field-input {
    position: static;
    height: auto;
    opacity: 1;
    color: var(--ink-secondary);
    -webkit-appearance: none;
    appearance: none;
}

/* Date/number inputs: hidden until set or editing */
input.modal-field-input {
    display: none;
    border: none;
    background: transparent;
    font-size: 0.85rem;
    font-family: var(--font-body);
    color: var(--ink-secondary);
    outline: none;
    width: 100%;
    padding: 0;
}

.modal-field.is-set input.modal-field-input,
.modal-field.is-editing input.modal-field-input {
    display: block;
}

/* ===== Entity Modal (Area / Goal create & edit) ===== */
.entity-modal-overlay[hidden] {
    display: none;
}

.entity-modal {
    width: min(460px, 100%);
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.entity-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--border-light);
}

.entity-modal-header h2 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
}

.entity-modal-body {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: 70vh;
    overflow-y: auto;
}

.entity-modal-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--ink-secondary);
}

.entity-modal-field > span {
    font-weight: 500;
    color: var(--ink);
}

.entity-modal-field input[type="text"],
.entity-modal-field input[type="date"],
.entity-modal-field select,
.entity-modal-field textarea {
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--ink);
    background: #fff;
    transition: border-color 0.15s ease;
    resize: vertical;
}

.entity-modal-field input[type="text"]:focus,
.entity-modal-field input[type="date"]:focus,
.entity-modal-field select:focus,
.entity-modal-field textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.entity-modal-field input[type="color"] {
    width: 48px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
    cursor: pointer;
    padding: 2px;
}

.entity-modal-field-row {
    display: flex;
    gap: 10px;
}

.entity-modal-field-row .entity-modal-field {
    flex: 1;
    min-width: 0;
}

.entity-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--border-light);
}

.entity-modal-cancel,
.entity-modal-save {
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.entity-modal-cancel {
    border: 1px solid var(--border);
    background: transparent;
    color: var(--ink-secondary);
}

.entity-modal-cancel:hover {
    background: var(--hover-bg);
    color: var(--ink);
    border-color: var(--ink-tertiary);
}

.entity-modal-save {
    border: none;
    background: var(--accent);
    color: var(--ink-fill-text);
    font-weight: 600;
}

.entity-modal-save:hover {
    opacity: 0.88;
}

.entity-modal-save:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== Collapsible sidebar section ===== */
.sidebar-section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border: none;
    background: transparent;
    padding: 0 12px;
    margin-bottom: 4px;
    font-size: 0.83rem;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
    font-family: var(--font-body);
}

.sidebar-section-toggle:hover {
    color: var(--ink);
}

.collapse-chevron {
    width: 12px;
    height: 12px;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.sidebar-section-toggle[aria-expanded="false"] .collapse-chevron {
    transform: rotate(-90deg);
}

.sidebar-nav.collapsed {
    display: none;
}

.sidebar-logout-form {
    margin-top: auto;
    padding: 8px 12px 4px;
}

.sidebar-logout-btn {
    border: none;
    background: transparent;
    color: #dc2626;
    font-size: 0.875rem;
    font-family: var(--font-body);
    cursor: pointer;
    padding: 10px 16px;
    text-align: left;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 8px;
    transition: background 0.15s ease;
}

.sidebar-logout-btn:hover {
    background: #fef2f2;
}

.sidebar-logout-btn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* ===== Sidebar section with add button ===== */
.sidebar-section-header {
    display: flex;
    align-items: center;
    gap: 4px;
}

.sidebar-section-header .sidebar-section-label {
    flex: 1;
    margin-bottom: 0;
    /* The header wrapper already supplies the 8px inset, so the toggle button
       must not add its own — otherwise "Te doen" sits deeper than the bare
       "Mijn leven" label. */
    padding-left: 0;
    padding-right: 0;
}

.sidebar-section-add-btn {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    color: var(--ink-tertiary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, background 0.15s ease;
}

.sidebar-section-add-btn:hover {
    color: var(--ink);
    background: var(--hover-bg);
}

.sidebar-section-add-btn svg {
    width: 14px;
    height: 14px;
}


/* ===== Project chip in task list ===== */
.todo-meta-chip.todo-project {
    color: var(--accent);
}

/* ===== Custom Date Picker ===== */
.date-picker {
    position: fixed;
    z-index: 9999;
    width: 280px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    user-select: none;
}

.dp-manual-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-light);
}

.dp-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--ink-tertiary);
}

.dp-text-input {
    flex: 1;
    border: none;
    outline: none;
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--ink);
    background: transparent;
}

.dp-text-input::placeholder {
    color: var(--ink-tertiary);
}

.dp-quick {
    border-bottom: 1px solid var(--border-light);
    padding: 4px 0;
}

.dp-quick-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 14px;
    border: none;
    background: transparent;
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--ink);
    cursor: pointer;
    text-align: left;
}

.dp-quick-btn:hover {
    background: var(--hover-bg);
}

.dp-quick-btn .dp-icon {
    color: var(--ink-secondary);
}

.dp-cal {
    padding: 10px 12px 12px;
}

/* Emptying the field again, offered only when it holds a date. */
.dp-clear-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 14px;
    border: none;
    border-top: 1px solid var(--border-light);
    background: transparent;
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--ink-secondary);
    cursor: pointer;
    text-align: left;
}
.dp-clear-btn[hidden] { display: none; }
.dp-clear-btn:hover { background: var(--hover-bg); color: var(--ink); }

.dp-cal-header {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
}

.dp-month-label {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink);
}

.dp-nav-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 1.1rem;
    color: var(--ink-secondary);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.dp-nav-btn:hover {
    background: var(--hover-bg);
    color: var(--ink);
}

.dp-today-nav {
    font-size: 0.95rem;
}

.dp-dow-row {
    display: grid;
    grid-template-columns: 26px repeat(7, 1fr);
    margin-bottom: 4px;
}

.dp-dow {
    text-align: center;
    font-size: 0.72rem;
    color: var(--ink-tertiary);
    padding: 2px 0;
}

.dp-day-grid {
    display: grid;
    grid-template-columns: 26px repeat(7, 1fr);
    gap: 2px;
}

/* Week numbers lead each row: pick one to plan on the week itself. */
.dp-wk-head { font-variant: small-caps; }
.dp-wk {
    display: grid;
    place-items: center;
    border: none;
    background: transparent;
    font-family: var(--font-body);
    font-size: 0.7rem;
    color: var(--ink-tertiary);
    font-variant-numeric: tabular-nums;
    border-radius: 6px;
    padding: 0;
}
button.dp-wk { cursor: pointer; }
button.dp-wk:hover {
    background: var(--hover-bg);
    color: var(--ink);
}
button.dp-wk.dp-selected {
    background: var(--accent);
    color: #fff;
    font-weight: 600;
}
.dp-wk-static { cursor: default; }
/* A hairline between the week column and the days. */
.dp-day-grid .dp-wk { box-shadow: 1px 0 0 var(--border-light); }

.dp-day {
    aspect-ratio: 1;
    border: none;
    background: transparent;
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--ink);
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    width: 100%;
}

.dp-day:hover:not(:disabled) {
    background: var(--hover-bg);
}

.dp-day.dp-today {
    font-weight: 700;
    color: var(--accent);
}

.dp-day.dp-selected {
    background: var(--accent);
    color: #fff;
    font-weight: 600;
}

.dp-day.dp-selected.dp-today {
    background: var(--accent);
    color: #fff;
}

.dp-day.dp-day-other {
    color: var(--ink-tertiary);
    cursor: default;
}

/* Date display in modal fields */
.modal-date-btn {
    cursor: pointer;
}


/* ===== Week View Day Sections ===== */
.week-day-header {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ink);
    padding: 32px 8px 8px;
    margin-top: 8px;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 6px;
    cursor: pointer;
    user-select: none;
}

.week-day-header:first-child {
    padding-top: 8px;
    margin-top: 0;
}

.week-day-header:hover .week-day-chevron {
    color: var(--ink-secondary);
}

.week-day-header.is-today {
    color: var(--accent);
}

.week-day-chevron {
    color: var(--ink-tertiary);
    flex-shrink: 0;
    transition: transform 0.15s ease, color 0.15s ease;
}

.week-day-header.is-collapsed .week-day-chevron {
    transform: rotate(-90deg);
}

.week-day-empty {
    list-style: none;
    color: var(--ink-tertiary);
    font-size: 0.85rem;
    padding: 6px 8px 4px;
}

.week-day-add {
    list-style: none;
    color: var(--ink-tertiary);
    font-size: 0.82rem;
    padding: 8px 8px 16px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: color 0.15s ease, background 0.15s ease;
}

.week-day-add:hover {
    color: var(--ink-secondary);
    background: var(--hover-bg);
}

.week-day-add.is-editing {
    padding: 4px 0 16px;
    cursor: text;
    background: transparent;
}

.week-day-add-input {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    font-size: 0.9rem;
    background: transparent;
    color: var(--ink);
    font-family: var(--font-body);
    outline: none;
    transition: border-color 0.15s ease;
}

.week-day-add-input:focus {
    border-color: var(--accent);
}

.week-section-divider {
    list-style: none;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-secondary);
    padding: 24px 8px 4px;
    margin-top: 12px;
    border-top: 1px solid var(--border);
}

.week-day-event {
    margin: 4px 0;
    font-size: 11px;
    background: #ececee;
}

.week-day-event .calendar-event-location {
    font-size: 10px;
}

.week-day-event .calendar-event-source {
    font-size: 9px;
}

/* ===== Animations ===== */
@keyframes floatIn {
    from {
        transform: translateY(6px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes rise {
    from {
        transform: translateY(14px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ===== Auth Page Styles (preserved) ===== */
body.auth-page {
    background:
        radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.55), transparent 55%),
        linear-gradient(180deg, #c9d7ea 0%, #b8cbe3 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
}

.auth-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 44px 40px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.14);
    border: 1px solid #e3e7ee;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 420px;
    animation: rise 0.6s ease both;
}

.auth-brand {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.auth-brand .brand-mark {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.auth-brand .brand-tag {
    font-size: 0.85rem;
    color: #94a3b8;
}

.auth-card h1 {
    font-family: var(--font-display);
    font-size: 2.1rem;
}

.auth-subtitle {
    color: #6b7280;
    font-size: 1rem;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.95rem;
}

.field input {
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid #e3e7ee;
    font-size: 1rem;
    font-family: var(--font-body);
    background: #fff;
    transition: border 0.2s ease, box-shadow 0.2s ease;
}

.field input:focus {
    outline: none;
    border-color: #5b7bb5;
    box-shadow: 0 0 0 3px rgba(91, 123, 181, 0.18);
}

.primary-btn {
    font-family: var(--font-body);
    border: none;
    cursor: pointer;
    border-radius: 12px;
    font-weight: 600;
    background: #5b7bb5;
    color: #ffffff;
    padding: 10px 18px;
    transition: background 0.2s ease;
}

.primary-btn:hover {
    background: #4a6aa4;
}

.alert {
    background: rgba(240, 163, 92, 0.18);
    color: #a16207;
    border: 1px solid rgba(240, 163, 92, 0.45);
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 0.95rem;
}


/* ===== Mobile sidebar overlay ===== */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 99;
    -webkit-tap-highlight-color: transparent;
}

.sidebar-overlay.visible {
    display: block;
}

.mobile-menu-btn {
    display: none;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    color: var(--ink);
    flex-shrink: 0;
    padding: 0;
}

.mobile-menu-btn:hover {
    background: var(--hover-bg);
}

.mobile-menu-btn svg {
    width: 20px;
    height: 20px;
}

/* ===== Desktop sidebar collapse ===== */
.sidebar-expand-btn {
    display: none;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    align-self: center;
    border-radius: var(--radius-sm);
    color: var(--ink-secondary);
    flex-shrink: 0;
    padding: 0;
}

.sidebar-expand-btn:hover {
    background: var(--hover-bg);
    color: var(--ink);
}

@media (min-width: 769px) {
    .app-layout.sidebar-collapsed {
        grid-template-columns: 1fr;
    }

    .app-layout.sidebar-collapsed .sidebar {
        display: none;
    }

    .app-layout.sidebar-collapsed .sidebar-expand-btn {
        display: flex;
    }
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .app-layout {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: var(--sidebar-width);
        height: 100vh;
        z-index: 100;
        transform: translateX(-100%);
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
    }

    .sidebar.mobile-open {
        transform: translateX(0);
    }

    .main-content {
        border-radius: 0;
        margin: 0;
        padding: 16px 16px 32px;
        min-height: 0;
    }

    .mobile-menu-btn {
        display: flex;
    }


}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* ── Calendar (Apple Calendar via ICS) ────────────────────────────────── */

.sidebar-empty-hint {
    font-size: 12px;
    color: #888;
    padding: 6px 12px;
    margin: 0;
    line-height: 1.4;
}

.calendar-sub-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    font-size: 13px;
    color: #333;
    cursor: pointer;
}

.calendar-sub-item:hover {
    background: rgba(0, 0, 0, 0.03);
}

.calendar-sub-area {
    font-size: 11px;
    color: #666;
    background: rgba(0, 0, 0, 0.06);
    padding: 1px 6px;
    border-radius: 10px;
    flex-shrink: 0;
}

.calendar-sub-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.calendar-sub-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-sub-error {
    color: #d32f2f;
    font-weight: 700;
    font-size: 12px;
    cursor: help;
}

.calendar-sub-sync,
.calendar-sub-delete {
    background: none;
    border: none;
    padding: 2px 4px;
    color: #888;
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
}

.calendar-sub-sync:hover,
.calendar-sub-delete:hover {
    color: #333;
    background: rgba(0, 0, 0, 0.05);
}

.calendar-sub-delete:hover {
    color: #d32f2f;
}


.calendar-event-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #fafafa;
    border-left: 3px solid #0288D1;
    border-radius: 4px;
    font-size: 13px;
    color: #444;
}


.calendar-event-time {
    font-variant-numeric: tabular-nums;
    color: #555;
    min-width: 88px;
}

.calendar-event-summary {
    flex: 1;
    color: #222;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-event-location {
    color: #777;
    font-size: 12px;
}

.calendar-event-source {
    color: #999;
    font-size: 11px;
    margin-left: auto;
}


.entity-modal-help {
    font-size: 12px;
    color: #666;
    line-height: 1.5;
    margin: 0 0 8px 0;
}

.entity-modal-help code {
    background: #f0f0f0;
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 11px;
}

.entity-modal-error {
    color: #d32f2f;
    font-size: 13px;
    margin: 0;
}

/* ===== Stats view ===== */
.stats-view {
    padding: 16px 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.stats-view[hidden] { display: none; }

.stats-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.stats-week-nav {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 4px;
}
.stats-nav-btn {
    background: transparent;
    border: 0;
    padding: 4px 10px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    color: var(--ink);
    font: inherit;
    font-size: 14px;
}
.stats-nav-btn:hover { background: var(--hover-bg); }
.stats-today-btn { font-weight: 500; padding: 4px 12px; }
.stats-range-label {
    padding: 0 8px;
    font-weight: 500;
    color: var(--ink);
    font-size: 13px;
    min-width: 130px;
    text-align: center;
}
.stats-chart-wrap {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px;
}
.stats-section-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 12px 0;
    color: var(--ink);
}
.stats-chart {
    width: 100%;
    max-width: 720px;
    aspect-ratio: 700 / 200;
    height: auto;
    display: block;
    margin: 0 auto;
}
.stats-grid-line { stroke: var(--border-light); stroke-width: 1; }
.stats-axis-label { fill: var(--ink-secondary); font-size: 11px; }
/* ===== Checkbox row in entity modals ===== */
.entity-modal-checkbox {
    flex-direction: row !important;
    align-items: center;
    gap: 8px !important;
}
.entity-modal-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
}

@media (max-width: 768px) {
    .stats-header { flex-direction: column; align-items: stretch; }
}

/* =================================================================
   REDESIGN OVERLAY — Grip Redesign (Minimal Mono + Serif Italic)
   Applies the new design language on top of the existing structure.
   ================================================================= */

body {
    background: var(--app-bg);
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "ss01", "cv11";
}

body.app-page { background: var(--app-bg); }

.app-layout {
    grid-template-columns: var(--sidebar-width) 1fr;
}

/* ----- Brand logo (sidebar + login + auth) ----- */
.brand-logo {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: block;
    flex-shrink: 0;
}

/* ----- Brand mark (sidebar + login) ----- */
.brand-mark {
    width: 30px; height: 30px;
    border-radius: 10px;
    background: #111;
    color: #fff;
    display: grid; place-items: center;
    font-family: var(--font-serif);
    font-size: 22px;
    font-style: italic;
    line-height: 1;
    padding-bottom: 2px;
    flex-shrink: 0;
}
.brand-name {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 26px;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.brand-name sup {
    font-family: var(--font-body);
    font-style: normal;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--ink-tertiary);
    margin-left: 4px;
    vertical-align: super;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px 6px;
}

/* ----- Sidebar ----- */
.sidebar {
    background: var(--sidebar-bg);
    padding: 22px 0 18px 16px;
    gap: 22px;
}
.profile-avatar {
    width: 28px; height: 28px;
    background: var(--ink-fill);
    font-size: 12px;
}
.profile-name {
    font-size: 13px;
    font-weight: 600;
}

.sidebar-section { gap: 4px; }
.sidebar-section-label,
button.sidebar-section-label {
    padding: 0 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-tertiary);
    margin-bottom: 6px;
}
.sidebar-section-header { padding: 0 8px; }

.sidebar-item {
    padding: 7px 10px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-secondary);
    gap: 10px;
}
.sidebar-item:hover {
    background: var(--surface-2);
    color: var(--ink);
}
.sidebar-item.active {
    background: rgb(233, 233, 233);
    color: var(--ink-secondary);
    font-weight: 600;
}

/* Hover-reveal "+" on Te doen list items */
.sidebar-item { position: relative; }
.sidebar-item-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 0;
    height: 18px;
    margin-left: 0;
    border-radius: 6px;
    color: var(--ink-secondary);
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    cursor: pointer;
    transition: width 0.18s ease, margin-left 0.18s ease, opacity 0.18s ease, transform 0.18s ease, background 0.12s ease, color 0.12s ease;
    transform: scale(0.7);
}
.sidebar-item-add svg { width: 12px; height: 12px; }
.sidebar-item:hover .sidebar-item-add,
.sidebar-item:focus-within .sidebar-item-add {
    width: 18px;
    margin-left: 6px;
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}
.sidebar-item-add:hover {
    background: var(--surface-2);
    color: var(--ink);
}
.sidebar-icon { width: 16px; height: 16px; stroke-width: 1.8; }
.sidebar-count { font-size: 12px; font-variant-numeric: tabular-nums; }

/* Every sidebar symbol has its own hue, in the same muted register as the
   area palette. It lights up on hover and stays lit while that view is the
   active one; nothing else about the item changes. */
.sidebar-item[data-list="inbox"] { --sidebar-icon: #2F5470; }
.sidebar-item[data-list="today"] { --sidebar-icon: #C07A1E; }
.sidebar-item[data-view="next-week"] { --sidebar-icon: #5A4FCF; }
.sidebar-item[data-view="all"] { --sidebar-icon: #1F6F6B; }
.sidebar-item[data-view="waiting"] { --sidebar-icon: #8B3A62; }
.sidebar-item[data-view="projects-overview"] { --sidebar-icon: #2F5F3A; }
.sidebar-item[data-view="goals-overview"] { --sidebar-icon: #9A2B2B; }
.sidebar-item[data-view="habits"] { --sidebar-icon: #6B4FA8; }
.sidebar-item[data-view="areas-overview"] { --sidebar-icon: #B8651A; }
.sidebar-item[data-view="ideas"] { --sidebar-icon: #A8871F; }
.sidebar-item[data-view="week-review"] { --sidebar-icon: #2F7A6B; }
.sidebar-item[data-view="stats"] { --sidebar-icon: #1E5FB0; }
/* User lists all share one symbol, so they share its colour. */
.sidebar-item[data-user-list-id] { --sidebar-icon: #52606D; }
.sidebar-foot-link { --sidebar-icon: #52606D; }

.sidebar-item:hover .sidebar-icon,
.sidebar-item.active .sidebar-icon {
    color: var(--sidebar-icon, inherit);
}


.area-swatch {
    width: 8px; height: 8px;
    border-radius: 3px;
    box-shadow: none;
}

.sidebar-section-add-btn {
    border-radius: 6px;
    color: var(--ink-tertiary);
}
.sidebar-section-add-btn:hover {
    background: var(--surface-2);
    color: var(--ink);
}

.sidebar-logout-form { margin-top: 0; }
.sidebar-logout-btn {
    border-radius: 10px;
    font-size: 13px;
    color: var(--ink-tertiary);
}
.sidebar-logout-btn:hover { color: var(--ink); }

/* ----- Main content ----- */
.main-content {
    background: var(--content-bg);
    border-radius: 12px;
    margin: 12px 12px 12px 16px;
    padding: 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 3px 8px rgba(0,0,0,0.06), 0 12px 24px -12px rgba(0,0,0,0.12);
    height: calc(100vh - 24px);
    height: calc(100dvh - 24px);
    min-height: 0;
    overflow: hidden;
}

/* Scroll area below the fixed content header: only this part scrolls,
   so the header and the card itself stay put on any viewport height. */
.content-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* ----- Topbar / content header ----- */
/* Fixed height so every view (Inbox, dag- & weekplanning) gets an
   identical header regardless of which tools it shows. */
.content-header {
    height: 56px;
    padding: 0 16px;
    margin: 0;
    border-bottom: 1px solid var(--border);
    gap: 16px;
    flex-shrink: 0;
}
/* Views that carry their own title card (goal detail) collapse the bar
   away entirely. The nav buttons it holds are display:none unless they're
   actually needed — mobile menu, sidebar-expand — so the row measures 0px
   on desktop yet still keeps those affordances reachable when they matter. */
.content-header.is-bare {
    height: auto;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.content-header-left {
    align-items: baseline;
    gap: 14px;
}
.content-title {
    font-family: var(--font-body);
    font-style: normal;
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.1;
    color: var(--ink);
}
.content-task-count {
    font-size: 13px;
    color: var(--ink-tertiary);
    font-weight: 500;
}

.content-header-actions { gap: 8px; }
.project-complete-btn {
    border-radius: 12px;
    border: 1px solid var(--border);
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 500;
}
.project-complete-btn:hover {
    background: var(--surface);
    border-color: var(--border-strong);
}

/* ----- Project actions menu (three-dot) ----- */
.project-menu-wrap {
    position: relative;
    display: inline-flex;
}
.project-menu-wrap[hidden] { display: none; }
.project-menu-btn {
    padding: 7px 10px;
}
.project-menu-btn svg {
    width: 16px;
    height: 16px;
}
.project-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 220px;
    display: none;
    flex-direction: column;
    gap: 2px;
    padding: 4px;
    border-radius: var(--radius-md);
    background: var(--content-bg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-menu);
    z-index: 20;
}
.project-menu-wrap.menu-open .project-menu {
    display: flex;
}
.project-menu-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: none;
    background: transparent;
    padding: 8px 10px;
    text-align: left;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 500;
    font-family: var(--font-body);
    color: var(--ink);
    cursor: pointer;
    transition: background 0.15s ease;
}
.project-menu-item svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.project-menu-item:hover {
    background: var(--hover-bg);
}
.project-menu-item.is-active {
    color: var(--ink);
}
.project-menu-item.is-active svg {
    fill: currentColor;
}
.project-menu-item.delete-btn {
    color: var(--priority-high);
}
.project-menu-item.delete-btn:hover {
    background: rgba(255, 59, 48, 0.08);
}


/* ----- Task list ----- */
.task-list {
    margin: 16px 4px 48px;
    padding: 0;
}

.todo-item {
    padding: 12px 12px;
    border-top: none;
    border-bottom: none;
    border-radius: 12px;
    gap: 12px;
}
.todo-item:hover { background: var(--surface); }

.todo-checkbox {
    width: 17px; height: 17px;
    border: 1.5px solid var(--border-strong);
    border-radius: 5px;
    background: var(--content-bg);
    margin-top: 1px;
}
.todo-checkbox:hover { border-color: var(--ink); }
.todo-checkbox:checked {
    background: var(--ink-fill);
    border-color: var(--ink);
}
.todo-checkbox:checked::after {
    top: 2.5px;
    left: 4.5px;
}

.todo-item.priority-high .todo-checkbox { border-color: var(--priority-high); border-width: 2px; }
.todo-item.priority-medium .todo-checkbox { border-color: var(--priority-medium); border-width: 2px; }
.todo-item.priority-low .todo-checkbox { border-color: var(--priority-low); border-width: 2px; }

.todo-text {
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
}
.todo-text.completed { color: var(--ink-tertiary); }

.todo-meta { gap: 10px; }
.todo-meta-chip {
    font-size: 11.5px;
    color: var(--ink-secondary);
    font-weight: 500;
    border-radius: var(--radius-pill);
}

.todo-meta-chip.todo-duration {
    background: var(--surface);
    color: var(--ink-secondary);
    border-radius: var(--radius-pill);
    padding: 3px 9px;
    font-variant-numeric: tabular-nums;
}

.todo-area-swatch {
    width: 7px; height: 7px;
    border-radius: 2px;
    box-shadow: none;
}

.task-list[hidden] { display: none !important; }

/* ----- Task detail modal (frame 08) ----- */
.task-modal-overlay {
    background: rgba(17, 17, 17, 0.45);
    backdrop-filter: blur(6px);
}
.task-modal {
    width: min(880px, 100%);
    border-radius: 24px;
    box-shadow: var(--shadow-pop);
}
.task-modal-body { grid-template-columns: 1.4fr 1fr; }
.task-modal-left {
    padding: 24px 24px 20px;
    gap: 14px;
    border-right: none;
}
.task-modal-right {
    background: var(--surface);
    padding: 20px;
    gap: 0;
}

.modal-title-input {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 30px;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--ink);
    /* Grow with content even before the JS auto-resize runs */
    field-sizing: content;
    overflow: visible;
}

/* Free-text task description, sits under the title in a smaller font.
   Aligned under the title text (past the 22px checkbox + 14px gap). */
.modal-description-input {
    display: block;
    width: calc(100% - 36px);
    margin: 6px 0 0 36px;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    resize: none;
    overflow: hidden;
    font-family: var(--font-body);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ink-secondary);
    field-sizing: content;
    word-break: break-word;
}
.modal-description-input::placeholder {
    color: var(--ink-tertiary);
}

/* Definition of Done: the explicit finish line, set apart from the free
   description so "am I done?" has a written answer. */
/* Field rows: icon | (label left, value right), separated by hairlines */
.modal-field {
    display: grid;
    grid-template-columns: 16px 1fr;
    gap: 10px;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
    cursor: default;
    font-size: 13px;
}
.modal-field:first-child { border-top: none; }
.modal-field:hover { background: transparent; }
.modal-field[hidden] { display: none; }

.modal-field-icon {
    width: 14px;
    height: 14px;
    color: var(--ink-tertiary);
}
.modal-field.is-set .modal-field-icon { color: var(--ink-tertiary); }

.modal-field-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    min-height: 22px;
    padding-right: 12px;
}
.modal-field-label {
    display: inline-block;
    font-size: 12px;
    color: var(--ink-tertiary);
    letter-spacing: 0.02em;
}
/* Labels stay visible in every state (design 08) */
.modal-field.is-set .modal-field-label,
.modal-field.is-editing .modal-field-label {
    display: inline-block;
}

/* Selects + inputs: render as right-aligned text, no native chrome */
select.modal-field-input,
input.modal-field-input {
    position: static;
    inset: auto;
    display: inline-block;
    width: auto;
    max-width: none;
    height: auto;
    opacity: 1;
    text-align: right;
    color: var(--ink);
    font-weight: 600;
    font-size: 13px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    /* Shrink form controls to their current value so they always sit flush
       against the right edge of the column (no wide native-default box). */
    field-sizing: content;
}
.modal-field.is-set select.modal-field-input,
.modal-field.is-set input.modal-field-input,
.modal-field.is-editing input.modal-field-input { display: inline-block; }

/* A field whose value is a sentence: same icon, label and hairline as the
   rows above it, but the text gets its own line to read on. */
.modal-field-stacked .modal-field-body {
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
}
textarea.modal-field-text {
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    resize: none;
    overflow: hidden;
    field-sizing: content;
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.5;
    font-weight: 600;
    color: var(--ink);
    text-align: left;
}
textarea.modal-field-text::placeholder {
    color: var(--ink-tertiary);
    font-weight: 400;
}

/* Gepland: date + time on a single right-aligned line */
.modal-planned-combo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
}
.modal-planned-combo input.modal-field-input { width: auto; max-width: none; }
.modal-planned-combo .modal-planned-time { color: var(--ink-tertiary); }
.modal-planned-combo .modal-planned-time:not([value=""]) { color: var(--ink); }
input[type="time"].modal-planned-time::-webkit-calendar-picker-indicator { display: none; }
input[type="time"].modal-planned-time { font-variant-numeric: tabular-nums; }
.modal-planned-combo .modal-planned-time[value=""] { display: none; }

/* Duration: visible "min" suffix */
.modal-duration-wrap {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}
.modal-duration-wrap input.modal-field-input {
    width: auto;
    text-align: right;
    max-width: 60px;
}
.modal-duration-suffix {
    color: var(--ink-tertiary);
    font-size: 12px;
    font-weight: 600;
}

/* Gebied: colored swatch sits immediately before the area name, both flush
   right against the value column. */
.modal-area-swatch {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--border-strong);
    flex-shrink: 0;
    display: none;
}

/* Priority value: tinted by selected option (CSS :has support) */
#modal-priority { color: var(--ink); }
#modal-priority:has(option[value="high"]:checked) { color: var(--priority-high); }
#modal-priority:has(option[value="medium"]:checked) { color: var(--priority-medium); }
#modal-priority:has(option[value="low"]:checked) { color: var(--priority-low); }

/* Title checkbox border picks up the priority colour. */
.task-modal:has(#modal-priority option[value="high"]:checked) .modal-title-row .modal-checkbox {
    border-color: var(--priority-high);
}
.task-modal:has(#modal-priority option[value="medium"]:checked) .modal-title-row .modal-checkbox {
    border-color: var(--priority-medium);
}
.task-modal:has(#modal-priority option[value="low"]:checked) .modal-title-row .modal-checkbox {
    border-color: var(--priority-low);
}

/* Title checkbox: square with rounded corners, aligned with first line */
.modal-title-row { gap: 14px; align-items: flex-start; }
.modal-title-row .modal-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border: 2px solid var(--border-strong);
    border-radius: 6px;
    background: var(--content-bg);
    cursor: pointer;
    /* Title sits inside a textarea with 2px top padding; centring the 22px
       box on the first 34.5px line needs ~8px (2 + 17 − 11). */
    margin-top: 8px;
    position: relative;
    flex-shrink: 0;
}
.modal-title-row .modal-checkbox:hover { border-color: var(--ink); }
.modal-title-row .modal-checkbox:checked {
    background: var(--ink-fill);
    border-color: var(--ink);
}
.modal-title-row .modal-checkbox:checked::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 6px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.modal-close-btn,
.modal-delete-btn {
    width: 30px; height: 30px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--content-bg);
    color: var(--ink-secondary);
}
.modal-close-btn:hover,
.modal-delete-btn:hover {
    background: var(--surface);
    color: var(--ink);
}

/* ----- Entity modals ----- */
.entity-modal {
    border-radius: 22px;
    box-shadow: var(--shadow-pop);
}
.entity-modal-header h2 {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 28px;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.entity-modal-field input,
.entity-modal-field select,
.entity-modal-field textarea {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--content-bg);
    font-family: var(--font-body);
}
.entity-modal-field input:focus,
.entity-modal-field select:focus,
.entity-modal-field textarea:focus {
    outline: none;
    border-color: var(--ink);
}
.entity-modal-cancel {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--content-bg);
    color: var(--ink-secondary);
    font-weight: 500;
}
.entity-modal-cancel:hover {
    background: var(--surface);
    color: var(--ink);
}
.entity-modal-save {
    border-radius: 12px;
    background: var(--ink-fill);
    color: var(--ink-fill-text);
    font-weight: 600;
}
.entity-modal-save:hover { background: #000; }


/* ----- Stats view ----- */
.stats-view { padding: 24px 16px 48px; }
.stats-header h2,
.stats-section-title {
    font-family: var(--font-body);
    font-weight: 700;
}
.stats-chart-wrap {
    border: 1px solid var(--border);
    border-radius: 22px;
    background: var(--content-bg);
}

/* ----- Date picker ----- */
.date-picker {
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow-pop);
}
.dp-quick-btn,
.dp-nav-btn {
    border-radius: 10px;
}

/* ----- Login page (split layout) ----- */
body.auth-page {
    background: var(--app-bg);
    padding: 0;
    display: block;
}
.login-page {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
}
.login-left {
    background: var(--ink-fill);
    color: var(--ink-fill-text);
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}
.login-left .brand {
    display: flex;
    align-items: center;
    gap: 10px;
}
.login-left .brand-name { color: var(--ink-fill-text); }
.login-quote {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 56px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    max-width: 540px;
}
.login-quote em {
    background: #fff;
    color: var(--ink);
    border-radius: 999px;
    padding: 0 16px;
    font-style: italic;
    display: inline-block;
}
.login-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
}
.login-right {
    background: var(--content-bg);
    padding: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
}
.login-right h2 {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 44px;
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--ink);
}
.login-right .lead {
    font-size: 14px;
    color: var(--ink-tertiary);
    margin-bottom: 16px;
}
.login-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 380px;
}
.login-input {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 14px;
    font-family: inherit;
    background: var(--content-bg);
    color: var(--ink);
}
.login-input:focus {
    outline: none;
    border-color: var(--ink);
}
.login-form .btn-primary {
    padding: 14px;
    justify-content: center;
    font-size: 14px;
}
.alert {
    background: rgba(154, 43, 43, 0.08);
    color: var(--danger);
    border: 1px solid rgba(154, 43, 43, 0.25);
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 13.5px;
}

/* ----- Buttons ----- */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--ink-fill);
    color: var(--ink-fill-text);
    font-weight: 600;
    font-size: 13px;
    font-family: var(--font-body);
    border: none;
    cursor: pointer;
    transition: background 0.15s ease;
}
.btn-primary:hover { background: #000; }

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 12px;
    background: transparent;
    color: var(--ink-secondary);
    font-weight: 500;
    font-size: 13px;
    font-family: var(--font-body);
    border: 1px solid var(--border);
    cursor: pointer;
}
.btn-ghost:hover {
    background: var(--surface);
    color: var(--ink);
}
.btn-ghost.is-icon { padding: 7px; border-radius: 10px; }

/* ----- Mobile / responsive tweaks ----- */
@media (max-width: 768px) {
    .login-page { grid-template-columns: 1fr; }
    .login-left { padding: 28px; min-height: 240px; }
    .login-quote { font-size: 38px; }
    .login-right { padding: 32px 24px; }
    .login-right h2 { font-size: 32px; }
    .main-content { margin: 0; border-radius: 0; box-shadow: none; height: 100vh; height: 100dvh; }
    .content-header { padding: 0 20px; }
    .content-title { font-size: 26px; }
    .task-list { margin: 16px; }
}

/* =================================================================
   REDESIGN OVERLAY — Spec details (sidebar search, topbar subtitle,
   inline pill, theme variants, focus rings, login eyebrow + pill)
   ================================================================= */

/* ----- Sidebar brand actions (search + collapse) ----- */
.sidebar-brand-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 2px;
}
.sidebar-brand-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--ink-tertiary);
    cursor: pointer;
    padding: 0;
    transition: background 0.12s ease, color 0.12s ease;
}
.sidebar-brand-icon-btn:hover {
    background: var(--hover-bg);
    color: var(--ink);
}
.kbd {
    margin-left: auto;
    font-size: 11px;
    color: var(--ink-tertiary);
    border: 1px solid var(--border);
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--content-bg);
    font-family: var(--font-body);
    font-variant-numeric: tabular-nums;
}

/* ----- Topbar subtitle (Date · Week N · Lente) ----- */
.content-title-block {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1;
}
.content-title-block[hidden] { display: none; }
.content-task-count[hidden] { display: none; }
.content-subtitle {
    font-size: 13px;
    color: var(--ink-tertiary);
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.2;
}
.content-subtitle:empty { display: none; }

/* ----- Inline pill (the brand-signature mid-headline pill) ----- */
.pill-inline {
    font-style: normal;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.64em;
    background: var(--ink-fill);
    color: var(--ink-fill-text);
    padding: 0 12px;
    border-radius: var(--radius-pill);
    display: inline-block;
    vertical-align: 0.18em;
    line-height: 1.45;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}
/* Inverted pill (white-on-ink, used inside the dark login left panel) */
.login-left .pill-inline {
    background: #fff;
    color: var(--ink);
}

/* ----- Login: eyebrow + serif headline + secondary link ----- */
.login-right-inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 380px;
    width: 100%;
}
.login-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-tertiary);
}
.login-quote em {
    /* match the .pill-inline metrics inside the dark serif quote */
    background: #fff;
    color: var(--ink);
    border-radius: 999px;
    padding: 0 16px;
    font-style: italic;
    display: inline-block;
    line-height: 1.05;
}
.login-secondary {
    font-size: 13px;
    color: var(--ink-tertiary);
}
.login-secondary a {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--ink);
    padding-bottom: 1px;
    font-weight: 500;
}
.login-secondary a:hover { opacity: 0.7; }

/* ----- Universal focus ring (a11y) ----- */
:where(button, a, input, select, textarea, [role="button"], [tabindex]):focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
    border-radius: inherit;
}
/* ----- Theme accent variants (settable via data-theme on <body>) -----
   A theme paints the filled surfaces (--ink-fill) and tints the sidebar and
   app background — the area outside the white main-content card — so the page
   colour shifts together. Body text stays --ink (#111111) in every theme:
   the accent is what changes, not the reading. */
[data-theme="forest"] {
    --ink-fill: #1F3D2A;
    --surface: #EFF1EC;
    --sidebar-bg: #EFF1EC;
    --app-bg: #EFF1EC;
}
[data-theme="plum"] {
    --ink-fill: #3A1F3D;
    --surface: #F1ECEF;
    --sidebar-bg: #F1ECEF;
    --app-bg: #F1ECEF;
}
[data-theme="ochre"] {
    --ink-fill: #4A3220;
    --surface: #F4EFE6;
    --sidebar-bg: #F4EFE6;
    --app-bg: #F4EFE6;
}
[data-theme="petrol"] {
    --ink-fill: #02474D;
    --surface: #EBF1F2;
    --sidebar-bg: #EBF1F2;
    --app-bg: #EBF1F2;
}
/* Citrus is the one theme whose colour cannot carry white either: #FF6B1C
   reads at 2.85:1 against white, so what sits on it is near-black (7.4:1). */
[data-theme="citrus"] {
    --ink-fill: #FF6B1C;
    --ink-fill-text: #111111;
    --surface: #FDF0E8;
    --sidebar-bg: #FDF0E8;
    --app-bg: #FDF0E8;
}

/* ----- Density variants (settable via data-density on <body>) ----- */
[data-density="compact"] { --radius-lg: 12px; --radius-xl: 14px; }
[data-density="cozy"]    { --radius-lg: 18px; --radius-xl: 22px; }
[data-density="roomy"]   { --radius-lg: 22px; --radius-xl: 28px; }

/* ----- Login: ensure the right panel anchors content nicely ----- */
.login-right {
    align-items: center;
}
.login-right .login-form {
    max-width: 100%;
    width: 100%;
}

@media (max-width: 768px) {
    .login-right-inner { gap: 14px; }
    .login-quote em { padding: 0 12px; }
}

/* =================================================================
   REDESIGN OVERLAY — Sidebar footer, Settings view, theme picker,
   area progress bars (per spec)
   ================================================================= */

/* Sidebar lays out as a column with the footer pinned to the bottom */
.sidebar { gap: 28px; }
.sidebar > .sidebar-section { flex-shrink: 0; }

/* ----- Sidebar foot (Instellingen → divider → name + logout) ----- */
.sidebar-foot {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 8px;
}

.sidebar-foot-divider {
    height: 1px;
    background: var(--border);
    margin: 2px 6px;
}

.sidebar-foot-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px 6px;
}
.sidebar-foot-user {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}
.sidebar-foot-user .profile-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The logout form/button is now a small red icon-button on the right */
.sidebar-logout-form {
    display: flex;
    margin-top: 0;
}
.sidebar-logout-btn {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    border: 1px solid rgba(154, 43, 43, 0.25);
    background: rgba(154, 43, 43, 0.08);
    color: var(--danger);
    display: grid;
    place-items: center;
    cursor: pointer;
    padding: 0;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.sidebar-logout-btn:hover {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
}
.sidebar-logout-btn svg { width: 14px; height: 14px; }
.sidebar-logout-btn span { display: none; }


/* Theme picker (4 swatches) */
/* Accent colour reads as one closed field: the colour, then its name. */
.theme-select { position: relative; min-width: 200px; }
.theme-select-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--content-bg);
    cursor: pointer;
    font-family: var(--font-body);
    text-align: left;
}
.theme-select-btn:hover { border-color: var(--border-strong); }
.theme-select-name {
    flex: 1;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
}
.theme-select-caret {
    width: 14px; height: 14px;
    color: var(--ink-tertiary);
    transition: transform 0.12s ease;
}
.theme-select-btn[aria-expanded="true"] .theme-select-caret { transform: rotate(180deg); }
.theme-select-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--content-bg);
    box-shadow: var(--shadow-menu, 0 8px 24px rgba(0, 0, 0, 0.12));
}
/* `display: flex` above outranks the UA's [hidden] rule, so the closed state
   needs this to actually close. */
.theme-select-menu[hidden] { display: none; }
.theme-swatch {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    font-family: var(--font-body);
    text-align: left;
}
.theme-swatch:hover { background: var(--surface); }
.theme-swatch.is-active { background: var(--surface); }
.theme-swatch-chip {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    flex: none;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.theme-swatch-label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-secondary);
}
.theme-swatch.is-active .theme-swatch-label { color: var(--ink); }

/* Density picker (segmented) */
.density-picker {
    display: inline-flex;
    background: var(--surface);
    border-radius: 12px;
    padding: 3px;
    margin-top: 4px;
    align-self: flex-start;
}
.density-option {
    border: none;
    background: transparent;
    border-radius: 9px;
    padding: 7px 14px;
    font-size: 12.5px;
    font-weight: 600;
    font-family: var(--font-body);
    color: var(--ink-tertiary);
    cursor: pointer;
}
.density-option.is-active {
    background: var(--content-bg);
    color: var(--ink);
    box-shadow: var(--shadow-card);
}

/* Settings calendar list (replaces the old sidebar nav layout) */
.settings-calendar-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--border);
    margin-top: 4px;
}
.settings-calendar-list .calendar-sub-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 6px;
    border-bottom: 1px solid var(--border);
}
.settings-calendar-list .calendar-sub-item:last-child { border-bottom: none; }
.settings-calendar-list .calendar-sub-name { flex: 1; font-size: 13.5px; font-weight: 500; color: var(--ink); }
.settings-calendar-list .sidebar-empty-hint {
    padding: 16px 6px;
    font-size: 13px;
    color: var(--ink-tertiary);
}

@media (max-width: 768px) {
}

/* =================================================================
   REDESIGN OVERLAY — Settings modal + sidebar foot links
   ================================================================= */

/* Sidebar foot now stacks two clickable rows (Inzichten, Instellingen)
   followed by a divider and the user/logout row. */
.sidebar-foot {
    gap: 4px;
}
.sidebar-foot .sidebar-foot-link {
    width: 100%;
    text-align: left;
}

/* ===== Instellingen · two-pane dialog ===== */
.settings-overlay {
    display: grid;
    place-items: center;
    padding: 24px;
}
.settings-overlay[hidden] { display: none; }
.settings-shell {
    display: grid;
    grid-template-columns: 232px 1fr;
    width: min(860px, 100%);
    height: min(560px, 88vh);
    background: var(--content-bg);
    border-radius: 22px;
    box-shadow: var(--shadow-pop);
    overflow: hidden;
}

/* Left rail: the sections, grouped and named. */
.set-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 22px 12px 16px;
    /* A fixed translucent grey rather than the theme's surface: the rail keeps
       the same weight whichever accent is on. */
    background: rgba(244, 244, 244, 0.8);
    border-right: 1px solid var(--border);
    overflow-y: auto;
}
.set-nav-title {
    margin: 0 0 12px;
    padding: 0 10px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.set-nav-groups { display: flex; flex-direction: column; gap: 2px; }
.set-nav-group-label {
    padding: 14px 10px 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-tertiary);
}
.set-nav-group-label:first-child { padding-top: 0; }
.set-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: 10px;
    background: transparent;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--ink-secondary);
    text-align: left;
    cursor: pointer;
}
.set-nav-item svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--ink-tertiary); }
.set-nav-item:hover { background: var(--hover-bg); color: var(--ink); }
.set-nav-item.is-active {
    background: var(--content-bg);
    color: var(--ink);
    font-weight: 600;
    box-shadow: var(--shadow-card);
}
.set-nav-item.is-active svg { color: var(--ink); }

/* Right pane: one section at a time. */
.set-main { display: flex; flex-direction: column; min-width: 0; }
.set-main-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 22px 22px 14px;
    border-bottom: 1px solid var(--border);
}
.set-main-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--ink);
}
.set-main-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 22px 20px;
}
.set-pane[hidden] { display: none; }

/* A setting reads as a labelled row: what it is on the left, the control right. */
.set-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border-light);
}
.set-row:last-child { border-bottom: none; }
.set-row-stacked { border-bottom: none; padding-bottom: 8px; }
.set-row-label { min-width: 0; }
.set-row-label span {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
}
.set-row-label p {
    margin: 2px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--ink-tertiary);
}
/* Account pane fields. The username is shown, never taken. */
.set-field {
    width: 260px;
    max-width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--content-bg);
    font-family: var(--font-body);
    font-size: 13.5px;
    color: var(--ink);
}
.set-field:focus { outline: none; border-color: var(--border-strong); }
.set-field.is-readonly {
    background: var(--surface);
    color: var(--ink-tertiary);
    cursor: default;
}
.set-password-form {
    border-top: 1px solid var(--border-light);
    margin-top: 4px;
}
.set-password-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 4px;
}
.set-password-msg {
    font-size: 12px;
    color: var(--ink-tertiary);
}
.set-password-msg.is-error { color: var(--danger); }
.set-password-msg.is-ok { color: var(--priority-low, var(--ink-secondary)); }

.set-main-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 22px;
    border-top: 1px solid var(--border);
}
.set-main-body .settings-calendar-list { border-top: 1px solid var(--border); }
.set-main-body .settings-calendar-list .calendar-sub-item { padding: 10px 2px; }

@media (max-width: 720px) {
    .settings-shell {
        grid-template-columns: 1fr;
        height: min(640px, 92vh);
    }
    .set-nav {
        border-right: none;
        border-bottom: 1px solid var(--border);
        padding: 16px 12px 10px;
    }
    .set-nav-groups { flex-direction: row; flex-wrap: wrap; }
    .set-nav-group-label { display: none; }
    .set-row { flex-direction: column; align-items: stretch; }
}

/* ===== Search modal (⌘K) ===== */
.search-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(17, 17, 17, 0.32);
    display: grid;
    place-items: start center;
    padding-top: 12vh;
    z-index: 200;
    backdrop-filter: blur(2px);
}
.search-modal-overlay[hidden] { display: none; }
.search-modal {
    width: min(560px, calc(100% - 32px));
    background: var(--content-bg);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 70vh;
}
.search-modal-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    color: var(--ink-tertiary);
}
.search-modal-input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    font-size: 15px;
    color: var(--ink);
}
.search-modal-input::placeholder { color: var(--ink-tertiary); }
.search-modal-results {
    list-style: none;
    margin: 0;
    padding: 6px;
    overflow-y: auto;
    max-height: calc(70vh - 56px);
}
.search-modal-results:empty { display: none; }
.search-result-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    cursor: pointer;
    color: var(--ink);
    font-size: 14px;
}
.search-result-item:hover,
.search-result-item.is-active {
    background: var(--surface);
}
.search-result-item .sr-icon {
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    color: var(--ink-tertiary);
    flex-shrink: 0;
}
.search-result-item .sr-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}
.search-result-item .sr-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}
.search-result-item .sr-meta {
    font-size: 12px;
    color: var(--ink-tertiary);
    flex-shrink: 0;
}
.search-modal-empty {
    padding: 18px;
    text-align: center;
    color: var(--ink-tertiary);
    font-size: 13px;
}
.search-modal-empty[hidden] { display: none; }

/* ===== Today view (integrated layout) ===== */
.today-view[hidden] { display: none; }
.today-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 24px;
    /* Left gutter matches .task-list, so rows line up with the other views. */
    padding: 24px 16px 48px 4px;
}
.today-left { min-width: 0; }
.today-right-col {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}


/* Today tasks panel */
/* The day list sits straight on the page: no frame, no heading of its own —
   the page header carries the title and the count. */
.today-tasks-panel {
    padding-top: 4px;
}
.tab-pill {
    display: inline-flex;
    gap: 2px;
    background: var(--surface);
    border-radius: 10px;
    padding: 2px;
}
.tab-pill button {
    border: none;
    background: transparent;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    color: var(--ink-tertiary);
    font-family: inherit;
}
.tab-pill button.on {
    background: var(--content-bg);
    color: var(--ink);
    box-shadow: var(--shadow-card);
}
.today-tasks-panel .tasks {
    display: flex;
    flex-direction: column;
}
.today-tasks-panel .task-group-head {
    padding: 14px 12px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-tertiary);
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--content-bg);
}
.today-tasks-panel .task-group-head .line {
    flex: 1;
    height: 1px;
    background: var(--border);
}
.today-tasks-panel .task-group-head .gcount {
    color: var(--ink-tertiary);
    font-weight: 500;
}
/* Right column shared */
.today-right-col .panel {
    background: var(--content-bg);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 18px;
    overflow: hidden;
}
.today-right-col .panel-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.005em;
    margin: 0 0 8px 0;
    color: var(--ink);
}
.today-right-col .panel-title-meta {
    font-size: 11px;
    color: var(--ink-tertiary);
    font-weight: 500;
    margin-left: auto;
}

/* Header action buttons (Focus / bell / Nieuwe taak) */
.content-header-tools {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.content-header-tools[hidden] { display: none; }
.content-header-tools .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 12px;
    background: var(--ink-fill);
    color: var(--ink-fill-text);
    font-weight: 600;
    font-size: 13px;
    border: none;
    cursor: pointer;
    font-family: inherit;
}
.content-header-tools .btn-primary:hover { background: #000; }
.content-header-tools .btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 10px;
    background: transparent;
    color: var(--ink-secondary);
    font-weight: 500;
    font-size: 13px;
    border: 1px solid var(--border);
    cursor: pointer;
    font-family: inherit;
}
.content-header-tools .btn-ghost:hover {
    background: var(--surface);
    color: var(--ink);
}
/* The filter control is the icon and nothing else: no frame, no plate. It
   keeps its 36px hit area and its hover tint, so it still answers the pointer. */
.content-header-tools .icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    border: none;
    background: transparent;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: var(--ink-secondary);
}
.content-header-tools .icon-btn:hover {
    background: var(--surface);
    color: var(--ink);
}
.content-header-tools .icon-btn svg { width: 16px; height: 16px; }

.nw-week-stepper {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 2px;
    background: transparent;
}
.nw-week-stepper .btn-ghost {
    border: none;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1;
}
.nw-week-stepper .btn-ghost[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
}
.nw-step-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    padding: 0 8px;
    font-variant-numeric: tabular-nums;
}

/* Agenda */
.agenda-panel { padding: 18px 18px 14px; }
.agenda-now {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--danger);
    margin-bottom: 4px;
}
.agenda-now .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--danger);
    box-shadow: 0 0 0 4px rgba(154, 43, 43, 0.15);
}
.agenda-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.agenda-item {
    display: grid;
    grid-template-columns: 56px 4px 1fr;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px dashed var(--border);
    align-items: center;
    background: none;
    border-left: none;
}
.agenda-item:first-child { border-top: none; }
.agenda-item.is-now {
    background: linear-gradient(90deg, rgba(154, 43, 43, 0.05), transparent);
    margin: 0 -18px;
    padding: 10px 18px;
    border-top-color: transparent;
}
.agenda-item.is-now + .agenda-item { border-top-color: transparent; }
.agenda-time {
    font-size: 12px;
    color: var(--ink-tertiary);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.agenda-time b {
    color: var(--ink);
    font-weight: 600;
    display: block;
    font-size: 13px;
}
.agenda-bar {
    width: 3px;
    align-self: stretch;
    border-radius: 2px;
    background: var(--ink-tertiary);
}
.agenda-info .t {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--ink);
}
.agenda-info .s {
    font-size: 12px;
    color: var(--ink-tertiary);
    margin-top: 1px;
}
.agenda-empty {
    padding: 12px 0 4px;
    color: var(--ink-tertiary);
    font-size: 13px;
}

/* In the list view the agenda carries the same filled ground as the "Nog te
   plannen" card in the weekplanning. What sits on it is --ink-fill-text,
   faded through color-mix instead of hardcoded white: Citrus fills orange
   and writes near-black on it. */
#todayListAgendaTop .panel {
    background: var(--ink-fill);
    border-color: var(--ink-fill);
}
#todayListAgendaTop .panel-title,
#todayListAgendaTop .agenda-time b,
#todayListAgendaTop .agenda-info .t {
    color: var(--ink-fill-text);
}
#todayListAgendaTop .agenda-now {
    color: color-mix(in srgb, var(--ink-fill-text) 75%, transparent);
}
#todayListAgendaTop .agenda-now .dot {
    background: var(--ink-fill-text);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink-fill-text) 18%, transparent);
}
#todayListAgendaTop .agenda-time,
#todayListAgendaTop .agenda-info .s,
#todayListAgendaTop .agenda-empty {
    color: color-mix(in srgb, var(--ink-fill-text) 78%, transparent);
}
#todayListAgendaTop .agenda-item {
    border-top-color: color-mix(in srgb, var(--ink-fill-text) 22%, transparent);
}
#todayListAgendaTop .agenda-item.is-now {
    background: linear-gradient(90deg, color-mix(in srgb, var(--ink-fill-text) 12%, transparent), transparent);
    border-top-color: transparent;
}


/* Today task rows (mirror existing todo list look) */
.today-tasks-panel .today-task {
    display: grid;
    grid-template-columns: 22px 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    cursor: pointer;
    transition: background 0.1s;
}
.today-tasks-panel .today-task:hover { background: var(--surface); }
.today-tasks-panel .today-task.is-done .today-task-title {
    color: var(--ink-tertiary);
    text-decoration: line-through;
}
.today-tasks-panel .today-task-check {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 1.5px solid var(--border-strong);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: var(--content-bg);
    cursor: pointer;
    padding: 0;
}
.today-tasks-panel .today-task-check.is-checked {
    background: var(--ink-fill);
    border-color: var(--ink);
    color: var(--ink-fill-text);
}
.today-tasks-panel .today-task-check.is-checked svg { display: block; width: 11px; height: 11px; }
.today-tasks-panel .today-task-check svg { display: none; }
.today-tasks-panel .today-task-check.priority-high { border-color: var(--priority-high); border-width: 2px; }
.today-tasks-panel .today-task-check.priority-medium { border-color: var(--priority-medium); border-width: 2px; }
.today-tasks-panel .today-task-check.priority-low { border-color: var(--priority-low); border-width: 2px; }
.today-tasks-panel .today-task-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.today-tasks-panel .today-task-title {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ink);
}
.today-tasks-panel .today-task-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--ink-tertiary);
}
.today-tasks-panel .today-task-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--ink-secondary);
    font-weight: 500;
}
.today-tasks-panel .today-task-tag .dot {
    width: 7px;
    height: 7px;
    border-radius: 2px;
}
.today-tasks-panel .today-task-time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--ink-secondary);
    font-variant-numeric: tabular-nums;
    background: var(--surface);
    border-radius: 999px;
    padding: 3px 9px 3px 7px;
}
.today-tasks-panel .today-task-time svg { width: 10px; height: 10px; }

/* Responsive: collapse right column under main on narrow screens */
@media (max-width: 1100px) {
    .today-grid {
        grid-template-columns: 1fr;
    }
    .today-right-col { display: none; }
}

/* ==========================================================
   Project view (kanban board)
   ========================================================== */
.project-view {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
.proj-cols {
    display: grid;
    /* Three columns when the Voltooid column is hidden; the responsive rules
       below still override the whole property. */
    grid-template-columns: repeat(var(--proj-col-count, 4), 1fr);
    gap: 12px;
}
/* `display: grid` above outranks the UA's [hidden] rule, so the list-mode
   switch needs this to actually hide the board. */
.proj-cols[hidden] { display: none; }
.kanban-col {
    background: var(--surface);
    border-radius: 18px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 360px;
}
.kanban-col.is-done {
    background: transparent;
    border: 1px dashed var(--border-strong);
}
.kanban-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-height: 60px;
    border-radius: 12px;
    transition: background 0.12s, box-shadow 0.12s;
}
.kanban-cards.is-drop-target {
    background: var(--hover-bg);
    box-shadow: inset 0 0 0 2px var(--ink);
}
.kanban-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 6px 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-secondary);
}
.kanban-head .num {
    font-size: 11px;
    color: var(--ink-tertiary);
    background: var(--content-bg);
    padding: 1px 7px;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0;
}
.kanban-col.is-done .kanban-head .num { background: var(--surface); }
.kanban-empty {
    font-size: 12px;
    color: var(--ink-tertiary);
    padding: 6px;
    font-style: italic;
}
.kcard {
    background: var(--content-bg);
    border-radius: 12px;
    padding: 11px 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: transform 0.1s, border-color 0.1s;
    text-align: left;
    width: 100%;
    font-family: inherit;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.kcard:hover {
    transform: translateY(-1px);
    border-color: var(--ink);
}
.kcard:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}
.kcard.is-active { border-color: var(--ink); }
.kcard.is-dragging {
    opacity: 0.4;
    cursor: grabbing;
}
.kcard[draggable="true"] { cursor: grab; }
.kcard[draggable="true"]:active { cursor: grabbing; }
.kcard .kt {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
    margin: 0;
    word-wrap: break-word;
}
.kcard .kmeta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
    color: var(--ink-tertiary);
    align-items: center;
}
.kcard .kmeta .dot {
    width: 7px;
    height: 7px;
    border-radius: 2px;
    flex-shrink: 0;
}
.kcard .kmeta .accent { color: var(--ink); font-weight: 600; }
.kcard .kmeta .sep { color: var(--ink-tertiary); }
.kanban-col.is-done .kcard {
    background: var(--surface);
    box-shadow: none;
    border-color: transparent;
}
.kanban-col.is-done .kcard .kt {
    color: var(--ink-tertiary);
    text-decoration: line-through;
}

@media (max-width: 1100px) {
    .proj-cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
    .proj-cols { grid-template-columns: 1fr; }
}

/* Replace the legacy italic display style with upright body type
   everywhere it was applied. Sizes are preserved on each rule. */
.brand-mark,
.brand-name,
.content-title,
.modal-title-input,
.entity-modal-header h2,
.login-quote,
.login-quote em,
.login-right h2 {
    font-style: normal;
    font-family: var(--font-body);
}

/* ============================================== */
/* VOLGENDE WEEK · Next Week                       */
/* ============================================== */
.next-week-view { padding: 0; }
.next-week-view[hidden] { display: none; }

/* Page layout */
.nw-page {
    padding: 24px 16px 48px;
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
}
.nw-main { min-width: 0; }
.nw-right { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* Agenda mode gives the calendar the full width. */
.nw-page.is-agenda { grid-template-columns: 1fr; }
.nw-page.is-agenda .nw-right { display: none; }

/* ===== Weekplanning · agenda mode ===== */
.nw-agenda-panel { padding: 0; overflow: hidden; }
.nw-agenda-panel[hidden] { display: none; }
.nwa { --nwa-gutter: 52px; }
.nwa-head-row,
.nwa-allday-row,
.nwa-grid {
    display: grid;
    grid-template-columns: var(--nwa-gutter) repeat(7, minmax(0, 1fr));
}
.nwa-head-row { border-bottom: 1px solid var(--border); }
.nwa-head {
    padding: 10px 6px;
    text-align: center;
    border-left: 1px solid var(--border-light);
}
.nwa-dow {
    display: block;
    font-size: 11px;
    color: var(--ink-tertiary);
}
.nwa-date {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.nwa-head.is-today .nwa-date {
    display: inline-block;
    min-width: 24px;
    border-radius: 8px;
    background: var(--danger);
    color: #fff;
}

/* All-day band */
.nwa-allday-row {
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}
.nwa-allday-label {
    font-size: 10.5px;
    color: var(--ink-tertiary);
    padding: 8px 6px;
    text-align: right;
}
.nwa-allday-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 6px 4px;
    border-left: 1px solid var(--border-light);
    min-height: 30px;
}
.nwa-allday-cell.is-today,
.nwa-col.is-today { background: var(--hover-bg); }
.nwa-chip {
    font-size: 10.5px;
    line-height: 1.25;
    padding: 3px 6px;
    border-radius: 6px;
    border-left: 3px solid var(--c);
    background: var(--content-bg);
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nwa-chip.is-done {
    color: var(--ink-tertiary);
    text-decoration: line-through;
}

/* Hour grid */
.nwa-grid {
    position: relative;
    height: var(--nwa-height);
    overflow: hidden;
}
.nwa-gutter { position: relative; }
.nwa-hour {
    position: absolute;
    right: 6px;
    transform: translateY(-50%);
    font-size: 10px;
    color: var(--ink-tertiary);
    font-variant-numeric: tabular-nums;
}
.nwa-col {
    position: relative;
    border-left: 1px solid var(--border-light);
}
.nwa-line {
    position: absolute;
    left: 0; right: 0;
    border-top: 1px solid var(--border-light);
}
.nwa-item {
    position: absolute;
    left: 2px; right: 2px;
    padding: 2px 5px;
    border-radius: 5px;
    border-left: 3px solid var(--c);
    background: var(--content-bg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}
.nwa-item.event { background: var(--surface); }
.nwa-item.is-done { opacity: 0.6; }
.nwa-item-title {
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nwa-item.is-done .nwa-item-title { text-decoration: line-through; }
.nwa-item-time {
    display: block;
    font-size: 9.5px;
    color: var(--ink-tertiary);
    font-variant-numeric: tabular-nums;
}
.nwa-now {
    position: absolute;
    left: 0; right: 0;
    height: 0;
    border-top: 2px solid var(--danger);
    z-index: 2;
}

/* Hero */
/* Panel (day-by-day blueprint) */
.nw-panel {
    background: var(--content-bg);
    border: 1px solid var(--border);
    border-radius: 22px;
    overflow: hidden;
}
.nw-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
}
.nw-panel-title {
    display: flex; align-items: center; gap: 10px;
    font-size: 15px; font-weight: 700; letter-spacing: -0.005em;
    color: var(--ink);
}
.nw-panel-title .num {
    font-variant-numeric: tabular-nums;
    font-size: 12px; font-weight: 600;
    background: var(--surface);
    color: var(--ink-secondary);
    padding: 2px 8px; border-radius: 999px;
}
.nw-panel-tools { display: flex; gap: 4px; }

/* Per-day rows */
.nw-day {
    display: grid;
    grid-template-columns: 132px 1fr 92px;
    gap: 16px;
    padding: 18px 20px 16px;
    border-top: 1px solid var(--border);
    align-items: start;
}
.nw-day:first-of-type { border-top: none; }
/* Divider ahead of the days of this week that have already passed. */
.nw-days-earlier {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 20px 6px;
    border-top: 1px solid var(--border);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-tertiary);
}
.nw-days-earlier::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}
.nw-days-earlier + .nw-day { border-top: none; }
.nw-day:hover { background: color-mix(in srgb, var(--surface) 50%, white); }
.nw-day-when {
    display: flex; flex-direction: column; gap: 3px;
}
.nw-day-when .nm {
    font-family: var(--font-serif);
    font-style: normal;
    font-size: 22px;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.nw-day-when .nm sup {
    font-family: var(--font-body);
    font-style: normal;
    font-size: 11px;
    color: var(--ink-tertiary);
    font-weight: 600;
    margin-left: 2px;
    vertical-align: 5px;
}
.nw-day-empty {
    font-size: 10px;
    color: var(--ink-tertiary);
    opacity: 0.75;
    padding: 4px 0;
}
.nw-day-when .pill {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px 3px 7px;
    background: var(--surface);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-secondary);
    width: fit-content;
    font-variant-numeric: tabular-nums;
}
.nw-day-when .pill.calm { background: color-mix(in srgb, var(--good) 12%, white); color: var(--good); }
.nw-day-when .pill.family {
    background: color-mix(in srgb, var(--area-3) 14%, white);
    color: var(--area-3);
}

.nw-day-lineup { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.nw-line {
    display: grid;
    grid-template-columns: 56px 4px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 6px 0;
}
.nw-line .t {
    font-size: 12px;
    color: var(--ink-tertiary);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.nw-line .t b {
    color: var(--ink); display: block; font-size: 13px; font-weight: 600;
}
.nw-line .bar {
    align-self: stretch; border-radius: 2px; background: var(--ink-tertiary);
}
.nw-line .body { min-width: 0; }
.nw-line .body .ti {
    font-size: 13.5px; font-weight: 600; line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: var(--ink);
}
.nw-line .body .sub {
    font-size: 11.5px; color: var(--ink-tertiary); margin-top: 2px;
    display: flex; gap: 8px; align-items: center;
}
.nw-line .body .sub .dot { width: 6px; height: 6px; border-radius: 2px; }
.nw-line .body .sub .sep {
    width: 3px; height: 3px; border-radius: 50%; background: var(--ink-tertiary);
}
.nw-line.task .bar { background: var(--ink-fill); }
/* A task's box is the same mark a habit's check draws — same size, same fill,
   same tick when done. It just isn't clickable here. */
.nw-line.task .ti {
    display: flex;
    align-items: center;
    gap: 8px;
}
.nw-line.task .ti .ti-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nw-check {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    padding: 0;
    border: 1.5px solid var(--border-strong);
    border-radius: 4px;
    background: var(--content-bg);
    color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.nw-check:hover { border-color: var(--ink-secondary); color: var(--border-strong); }
.nw-check svg { width: 9px; height: 9px; display: block; }
.nw-line.task.deadline .nw-check { border-color: var(--danger); border-width: 2px; }
.nw-line.task.is-done .nw-check {
    background: var(--ink-fill);
    border-color: var(--ink);
    color: var(--ink-fill-text);
}
.nw-line.event { padding: 4px 0; }
.nw-line.event .body .ti {
    font-weight: 500; color: var(--ink-secondary);
}
.nw-line.event .body .ti b { color: var(--ink); font-weight: 600; }
.nw-line .badge {
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 6px;
    background: var(--surface);
    color: var(--ink-secondary);
}
.nw-line .badge.dl { background: var(--ink-fill); color: var(--ink-fill-text); }
.nw-line .badge.dl::before { content: "•"; margin-right: 4px; color: var(--ink-fill-text); }

.nw-day-totals {
    text-align: right;
    font-size: 11px;
    color: var(--ink-tertiary);
    line-height: 1.5;
}
.nw-day-totals .focus {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 22px;
    color: var(--ink);
    line-height: 1;
    display: block;
    margin-bottom: 2px;
    letter-spacing: -0.01em;
}
.nw-day-totals .focus small {
    font-family: var(--font-body);
    font-style: normal;
    font-size: 11px;
    color: var(--ink-tertiary);
    font-weight: 600;
    margin-left: 2px;
}
.nw-day-totals .fill {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-secondary);
    font-variant-numeric: tabular-nums;
}
.nw-day-totals .fill small {
    font-size: 10px;
    font-weight: 600;
    color: var(--ink-tertiary);
    margin-left: 1px;
}
.nw-day-totals .meta { font-size: 10.5px; }
.nw-day-totals .meta b { color: var(--ink); font-weight: 600; }

.nw-panel-foot {
    padding: 14px 20px;
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--ink-tertiary);
    display: flex; align-items: center; gap: 10px;
    background: var(--surface);
    flex-wrap: wrap;
}
.nw-panel-foot b { color: var(--ink-secondary); font-weight: 600; }
.nw-panel-foot .grow { flex: 1; }
.nw-panel-foot .kbd {
    font-size: 11px;
    color: var(--ink-tertiary);
    border: 1px solid var(--border);
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--content-bg);
}

/* Right rail */
.next-week-view .rail-card {
    background: var(--content-bg);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 16px 18px;
}
.next-week-view .rail-card.dark {
    background: var(--ink-fill); color: var(--ink-fill-text); border-color: var(--ink-fill);
}
.next-week-view .rail-card h4 {
    margin: 0 0 10px;
    font-size: 12.5px;
    letter-spacing: 0.04em;
    font-weight: 700;
    color: var(--ink);
}
.next-week-view .rail-card.dark h4 { color: var(--ink-fill-text); }
.next-week-view .rail-card .rail-sub {
    font-size: 11.5px;
    color: var(--ink-tertiary);
    margin: -4px 0 8px;
    line-height: 1.5;
}
.next-week-view .rail-card.dark .rail-sub {
    color: rgba(255,255,255,0.7);
    font-size: 12px;
}

/* Deadlines */
.next-week-view .dl-row {
    display: grid;
    grid-template-columns: 38px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 10px 0;
    border-top: 1px dashed var(--border);
}
.next-week-view .dl-row:first-of-type { border-top: none; }
.next-week-view .dl-row .when {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 22px;
    line-height: 1;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    text-align: center;
    color: var(--ink);
}
.next-week-view .dl-row .when small {
    display: block;
    font-family: var(--font-body);
    font-style: normal;
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-tertiary);
    font-weight: 700;
    margin-top: 2px;
}
.next-week-view .dl-row .ti {
    font-size: 13px; font-weight: 600; line-height: 1.3;
    color: var(--ink);
}
.next-week-view .dl-row .ms {
    font-size: 11px; color: var(--ink-tertiary);
    margin-top: 2px; display: flex; gap: 6px; align-items: center;
}
.next-week-view .dl-row .ms .dot {
    width: 6px; height: 6px; border-radius: 2px;
}
.next-week-view .dl-row .tag {
    font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
    font-weight: 700; padding: 3px 7px; border-radius: 6px;
    color: var(--ink-tertiary); background: var(--surface);
}
.next-week-view .dl-row.urgent .tag { background: var(--ink-fill); color: var(--ink-fill-text); }
.next-week-view .dl-row[role="button"] { cursor: pointer; }
.next-week-view .dl-row[role="button"]:hover {
    background: color-mix(in srgb, var(--surface) 60%, white);
}
.next-week-view .dl-row[role="button"]:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
    border-radius: 6px;
}
.next-week-view .dl-status {
    font-size: 11px;
    font-weight: 600;
    margin-top: 4px;
    color: var(--ink-tertiary);
}
.next-week-view .dl-status.unscheduled { color: var(--danger); }
.next-week-view .dl-status.late { color: var(--danger); }
.next-week-view .dl-status.scheduled { color: var(--good); }

/* Time budget */
.next-week-view .budget {
    display: flex;
    height: 14px;
    border-radius: 7px;
    overflow: hidden;
    margin-top: 8px;
    background: var(--surface);
}
.next-week-view .budget i { display: block; height: 100%; }
.next-week-view .budget i.focus { background: var(--ink-fill); }
.next-week-view .budget i.meet  { background: var(--ink-tertiary); }
.next-week-view .budget i.life  { background: var(--area-3); }
.next-week-view .budget i.travel{ background: var(--area-4); }
.next-week-view .budget i.free  { background: var(--border-strong); }
.next-week-view .budget-legend {
    display: flex; flex-wrap: wrap; gap: 8px 14px;
    margin-top: 10px;
    font-size: 11.5px;
    color: var(--ink-secondary);
}
.next-week-view .budget-legend span {
    display: inline-flex; align-items: center; gap: 5px;
}
.next-week-view .budget-legend i {
    width: 9px; height: 9px; border-radius: 2px;
}
.next-week-view .budget-legend b {
    color: var(--ink); font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Nog te plannen (dark card) */
.next-week-view #nextWeekUntimedList {
    max-height: 340px;
    overflow-y: auto;
    margin-top: 4px;
}
.next-week-view .prep-item {
    border-top: 1px dashed rgba(255,255,255,0.15);
}
.next-week-view .prep-item:first-of-type { border-top: none; }
.next-week-view .prep-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
    width: 100%;
    padding: 8px 0;
    font-family: inherit;
    font-size: 12.5px;
    text-align: left;
    border: none;
    background: transparent;
    cursor: pointer;
}
.next-week-view .prep-row .t { line-height: 1.35; color: #fff; }
.next-week-view .prep-row .est {
    font-size: 10.5px; font-weight: 600;
    color: rgba(255,255,255,0.55);
}
/* Day picker that unfolds under the clicked task */
.next-week-view .prep-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    padding: 2px 0 10px;
}
.next-week-view .prep-days[hidden] { display: none; }
.next-week-view .prep-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 5px 0 4px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 8px;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.6);
    font-family: inherit;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
}
.next-week-view .prep-day span {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.next-week-view .prep-day:hover {
    background: #fff;
    border-color: #fff;
    color: var(--ink-secondary);
}
.next-week-view .prep-day:hover span { color: var(--ink); }


/* Empty state shown until calendar data is loaded */
.next-week-view .nw-days-empty {
    padding: 28px 22px;
    color: var(--ink-tertiary);
    font-size: 13px;
}


@media (max-width: 1100px) {
    .nw-page { grid-template-columns: 1fr; }
}

/* ── Plan week modal ────────────────────────────────────────────────────── */
.pw-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.32);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: 20px;
}
.pw-overlay[hidden] { display: none; }

.pw-modal {
    background: var(--content-bg);
    border-radius: 22px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.18);
    overflow: hidden;
}
.pw-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 24px 24px 0;
}
.pw-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    flex: 1;
}
.pw-sub {
    font-size: 12px;
    color: var(--ink-tertiary);
    margin: 4px 0 0;
    flex-basis: 100%;
    order: 3;
}
.pw-close {
    width: 30px; height: 30px;
    border: none; background: none; cursor: pointer;
    border-radius: 8px; color: var(--ink-tertiary);
    display: grid; place-items: center; flex-shrink: 0;
}
.pw-close svg { width: 16px; height: 16px; }
.pw-close:hover { background: var(--surface); color: var(--ink); }

.pw-body { padding: 20px 24px 24px; }

.pw-rows { display: flex; flex-direction: column; gap: 0; }
.pw-day-row {
    display: grid;
    grid-template-columns: 60px 1fr 80px;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--border);
}
.pw-day-row:first-child { border-top: none; }
.pw-day-row.weekend .pw-day-name { color: var(--ink-tertiary); }
.pw-day-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}
.pw-day-date {
    font-size: 11.5px;
    color: var(--ink-tertiary);
}
.pw-hours-input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    color: var(--ink);
    background: var(--content-bg);
    text-align: right;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
}
.pw-hours-input::-webkit-inner-spin-button,
.pw-hours-input::-webkit-outer-spin-button { opacity: 1; }
.pw-hours-input:focus {
    outline: none;
    border-color: var(--ink);
}
.pw-hours-label {
    font-size: 12px;
    color: var(--ink-tertiary);
    text-align: right;
}

.pw-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.pw-total { font-size: 13px; color: var(--ink-secondary); }
.pw-total b { color: var(--ink); font-weight: 700; }


/* Timeline card — sits straight on the page, no frame, like the day list */
.tb-timeline-card {
    overflow: hidden;
}
.tb-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px 14px 12px;
    border-bottom: 1px solid var(--border);
}
.tb-card-title-block { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tb-card-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--ink);
    margin: 0;
}
.tb-card-sub {
    font-size: 12px;
    color: var(--ink-tertiary);
    font-variant-numeric: tabular-nums;
}

/* Timeline body */
.tb-timeline {
    position: relative;
    padding: 14px 22px 22px 12px;
}
.tb-timeline-inner {
    position: relative;
    margin-left: 58px; /* 44px label gutter + 14px gap */
}
.tb-hour-row {
    position: absolute;
    left: -58px;
    right: 0;
    height: 52px;
    pointer-events: none;
}
.tb-hour-label {
    position: absolute;
    left: 0;
    top: -7px;
    width: 44px;
    text-align: right;
    font-size: 11px;
    color: var(--ink-tertiary);
    font-variant-numeric: tabular-nums;
}
.tb-hour-line {
    position: absolute;
    left: 58px;
    right: 0;
    top: 0;
    height: 1px;
    background: var(--border);
}
.tb-hour-line.half { border-top: 1px dashed var(--border-light); background: transparent; }
.tb-hour-line.midday { background: var(--border-strong); }

/* Now indicator */
.tb-nu-line {
    position: absolute;
    left: -58px;
    right: 0;
    pointer-events: none;
    z-index: 20;
}
.tb-nu-line .line {
    position: absolute;
    left: 58px;
    right: 0;
    top: 50%;
    height: 1.5px;
    background: var(--ink-fill);
    z-index: 1;
}
.tb-nu-line .dot {
    position: absolute;
    left: 58px;
    top: 50%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ink-fill);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 4px rgba(17,17,17,0.12);
    z-index: 2;
}
.tb-nu-label {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background: var(--ink-fill);
    color: var(--ink-fill-text);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 2px var(--content-bg);
    z-index: 3;
    white-space: nowrap;
}

/* Blocks */
.tb-block {
    position: absolute;
    left: 0;
    right: 0;
    border-radius: 14px;
    padding: 10px 12px 10px 14px;
    overflow: hidden;
    cursor: grab;
    box-shadow: var(--shadow-sm);
    transition: transform 120ms ease, box-shadow 120ms ease;
    border: 1px solid var(--border);
    background: var(--content-bg);
}
.tb-block:hover { box-shadow: var(--shadow-card); }
.tb-block.dragging { opacity: 0.55; cursor: grabbing; }
.tb-block .tb-rail-accent {
    position: absolute;
    top: 6px; bottom: 6px; left: 4px;
    width: 3px;
    border-radius: 2px;
    background: var(--area-1);
}
.tb-block-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}
/* One type size for every block, whatever its length: a schedule is easier to
   read down when a quarter of an hour and a whole morning speak equally loud. */
.tb-block-title {
    font-size: 11.5px;
    line-height: 1.2;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}
.tb-block-time {
    font-size: 10px;
    color: var(--ink-tertiary);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    white-space: nowrap;
}
.tb-resize {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 6px;
    cursor: ns-resize;
}

/* Variants */
.tb-block.focus {
    background: var(--ink-fill);
    color: var(--ink-fill-text);
    border-color: var(--ink);
}
.tb-block.focus .tb-block-title,
.tb-block.focus .tb-block-time { color: var(--ink-fill-text); }
.tb-block.focus .tb-block-time { color: rgba(255,255,255,0.65); }
.tb-block.meeting {
    background: var(--surface);
    border-color: var(--border-strong);
    color: var(--ink);
}
.tb-block.routine,
.tb-block.rust {
    background: var(--content-bg);
    border-color: var(--border);
    color: var(--ink);
}
.tb-block.travel {
    background: color-mix(in srgb, var(--area-4) 12%, white);
    border-color: color-mix(in srgb, var(--area-4) 35%, var(--border));
    color: var(--ink);
}
.tb-block.family {
    background: color-mix(in srgb, var(--area-3) 12%, white);
    border-color: color-mix(in srgb, var(--area-3) 35%, var(--border));
    color: var(--ink);
}
.tb-block.calendar-imported {
    background: repeating-linear-gradient(135deg,
        var(--surface) 0,
        var(--surface) 6px,
        var(--surface-2) 6px,
        var(--surface-2) 12px);
    border-style: dashed;
}

.tb-block.past { opacity: 0.5; }
.tb-block.current {
    box-shadow: 0 0 0 2px var(--ink), 0 8px 24px rgba(0,0,0,0.08);
    z-index: 4;
}
.tb-block .bezig-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #fff;
    color: var(--danger);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 999px;
    margin-left: 6px;
}
.tb-block .bezig-badge .live {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--danger);
    box-shadow: 0 0 0 2px rgba(154,43,43,0.25);
    animation: tb-blink 1.5s infinite;
}
@keyframes tb-blink {
    0%, 60% { opacity: 1; }
    80% { opacity: 0.35; }
    100% { opacity: 1; }
}
.tb-block.tiny { padding: 4px 10px; }

/* Compact layout for ≤30-min blocks so the title doesn't get clipped.
   Padding and spacing only — the type size is the same on every block. */
.tb-block.short { padding: 6px 10px 6px 12px; }
.tb-block.short .tb-block-row { gap: 6px; }
.tb-block.short .tb-rail-accent { top: 4px; bottom: 4px; }


.tb-rail-card {
    background: var(--content-bg);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 16px 18px;
}
.tb-rail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.tb-rail-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-tertiary);
}
.tb-rail-badge {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--ink-secondary);
    background: var(--surface);
    padding: 2px 8px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}
.tb-rail-help {
    font-size: 12px;
    color: var(--ink-tertiary);
    margin: 4px 0 10px;
}

/* Balans card */
.tb-balans-num {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 600;
    font-size: 38px;
    line-height: 1;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    margin-top: 6px;
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
}
.tb-balans-num em { font-style: normal; }
.tb-balans-num .u {
    font-family: var(--font-body);
    font-style: normal;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-tertiary);
    margin: 0 4px 0 1px;
}
.tb-balans-num sup {
    font-family: var(--font-body);
    font-style: normal;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-tertiary);
    vertical-align: super;
}
.tb-balans-sub {
    margin-top: 4px;
    font-size: 12px;
    color: var(--ink-tertiary);
}
.tb-capacity {
    position: relative;
    margin-top: 14px;
}
.tb-capacity-bar {
    display: flex;
    height: 26px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface);
}
.tb-capacity-bar .seg { display: block; height: 100%; }
.tb-capacity-bar .seg-focus   { background: var(--ink-fill); }
.tb-capacity-bar .seg-meet    { background: var(--ink-tertiary); }
.tb-capacity-bar .seg-family  { background: var(--area-3); }
.tb-capacity-bar .seg-travel  { background: var(--area-4); }
.tb-capacity-bar .seg-rust    { background: var(--ink-secondary); }
.tb-capacity-bar .seg-routine { background: var(--ink-tertiary); }
.tb-capacity-bar .seg-free    { background: var(--border-strong); }
.tb-capacity-legend {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 14px;
    margin-top: 12px;
}
.tb-capacity-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--ink-secondary);
    font-variant-numeric: tabular-nums;
}
.tb-capacity-legend span i {
    width: 10px; height: 10px;
    border-radius: 3px;
    display: inline-block;
    flex-shrink: 0;
}
.tb-capacity-legend b { font-weight: 700; color: var(--ink); }


/* Pool list */
.tb-pool-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tb-pool-item {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--content-bg);
    cursor: grab;
    transition: transform 120ms ease, box-shadow 120ms ease;
}
.tb-pool-item:hover {
    transform: translateX(-2px);
    box-shadow: var(--shadow-sm);
}
.tb-pool-item.dragging { opacity: 0.5; cursor: grabbing; }
.tb-pool-item .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--area-1);
}
.tb-pool-item .body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tb-pool-item .t {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tb-pool-item .m {
    font-size: 11px;
    color: var(--ink-tertiary);
}
.tb-pool-item .est {
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-secondary);
    background: var(--surface);
    padding: 2px 8px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}
.tb-pool-item .grip {
    color: var(--ink-tertiary);
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
}
.tb-pool-item .grip span {
    display: grid;
    grid-template-columns: 2px 2px;
    gap: 1.5px;
}
.tb-pool-item .grip span i {
    width: 2px; height: 2px;
    background: currentColor;
    border-radius: 50%;
    display: inline-block;
}

/* Templates */
.tb-tpl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tb-tpl-item {
    display: grid;
    grid-template-columns: 30px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1.5px dashed var(--border-strong);
    border-radius: 12px;
    background: var(--content-bg);
    cursor: grab;
}
.tb-tpl-item:hover { background: var(--surface); }
.tb-tpl-icon {
    width: 30px; height: 30px;
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 500;
    font-size: 18px;
}
.tb-tpl-icon.dark { background: var(--ink-fill); color: var(--ink-fill-text); }
.tb-tpl-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tb-tpl-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.tb-tpl-desc { font-size: 11px; color: var(--ink-tertiary); }
.tb-tpl-dur {
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-secondary);
    font-variant-numeric: tabular-nums;
}


/* Day stepper inside the schema card header */
.tb-day-stepper {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 2px 4px;
    background: var(--content-bg);
}
.tb-day-stepper .btn-ghost {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 14px;
    line-height: 1;
}
.tb-day-stepper .btn-ghost[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
}
.tb-day-stepper .tb-step-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
    padding: 0 8px;
    font-variant-numeric: tabular-nums;
    min-width: 64px;
    text-align: center;
}

/* Side-sheet */
.tb-sheet-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.32);
    z-index: 70;
    display: flex;
    justify-content: flex-end;
}
.tb-sheet-overlay[hidden] { display: none; }
.tb-sheet {
    width: 440px;
    max-width: 100%;
    background: var(--content-bg);
    height: 100%;
    box-shadow: var(--shadow-menu);
    display: flex;
    flex-direction: column;
    padding: 18px 22px 22px;
}
.tb-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.tb-sheet-head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
}
.tb-sheet-body { display: flex; flex-direction: column; gap: 12px; }

/* Hero responsive */
@media (max-width: 980px) {
}

/* Drop indicator while dragging onto the schema */
.tb-drop-indicator {
    position: absolute;
    left: 0;
    right: 0;
    border: 1.5px dashed var(--ink);
    background: color-mix(in srgb, var(--ink) 6%, transparent);
    border-radius: 14px;
    pointer-events: none;
    z-index: 5;
    transition: top 80ms ease, height 80ms ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tb-drop-indicator[hidden] { display: none; }
.tb-drop-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--ink);
    background: var(--content-bg);
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--ink);
    font-variant-numeric: tabular-nums;
}


/* Pool item: planned chip + dimmed state */
.tb-pool-item.is-planned {
    opacity: 0.62;
}
.tb-pool-item.is-planned .t {
    text-decoration: line-through;
    text-decoration-color: var(--ink-tertiary);
}
.tb-pool-planned {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--surface-2);
    border-radius: 999px;
    padding: 2px 7px;
    margin-right: 4px;
}

/* Overdue task surfaced in the schedule pool */
.tb-pool-item.is-overdue {
    border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
}
.tb-pool-overdue {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 10%, transparent);
    border-radius: 999px;
    padding: 2px 7px;
    margin-right: 4px;
}

/* Agenda/Lijst toggle on the today view */
.td-mode[hidden] { display: none; }
.td-mode { display: flex; flex-direction: column; gap: 24px; }
.td-mode-list { display: flex; flex-direction: column; gap: 24px; }
.today-right-col .td-mode { gap: 24px; }
.td-mode-pill {
    display: inline-flex; gap: 2px;
    background: var(--surface);
    border-radius: 10px;
    padding: 2px;
}
.td-mode-pill button {
    border: none; background: transparent;
    padding: 5px 12px;
    font-size: 12px; font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    color: var(--ink-tertiary);
    font-family: inherit;
}
.td-mode-pill button.on {
    background: var(--content-bg);
    color: var(--ink);
    box-shadow: var(--shadow-card);
}

/* Calendar-derived blocks cannot be moved */
.tb-block.is-locked { cursor: default; }
.tb-block.is-movable { cursor: grab; }
.tb-block.is-movable:active { cursor: grabbing; }

/* ===========================================================
   Insights: period toggle + planning consistency chart
   =========================================================== */
.stats-period-toggle {
    display: inline-flex;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 3px;
}
.stats-period-btn {
    background: transparent;
    border: 0;
    padding: 4px 12px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    color: var(--ink-secondary);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
}
.stats-period-btn.is-active {
    background: var(--accent);
    color: #fff;
}

/* Planning consistency card */
.stats-plan-wrap { display: block; }
.stats-plan-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.stats-plan-sub {
    font-size: 12px;
    color: var(--ink-tertiary);
    font-variant-numeric: tabular-nums;
}
.stats-plan-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.stats-plan-pct {
    font-size: 48px;
    font-weight: 600;
    line-height: 1;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.stats-plan-bar {
    height: 10px;
    max-width: 480px;
    background: var(--surface);
    border-radius: 999px;
    overflow: hidden;
}
.stats-plan-bar i {
    display: block;
    height: 100%;
    background: var(--ink-fill);
    border-radius: 999px;
    transition: width 240ms ease;
}
.stats-plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, 22px);
    gap: 6px;
    justify-content: start;
}
.stats-plan-cell {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    background: var(--surface);
    border: 1px solid var(--border-light);
}
.stats-plan-cell.on {
    background: var(--ink-fill);
    border-color: var(--ink);
}
.stats-plan-cell.off {
    background: var(--surface);
    border-color: var(--border-light);
}
.stats-plan-cell.future {
    background: transparent;
    border-style: dashed;
    border-color: var(--border);
}

/* Capaciteits-benutting chart */
.stats-cap-chart { margin-top: 8px; }

/* Plan-row: consistency + capacity side-by-side, smaller cards */
.stats-plan-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.stats-plan-row .stats-chart-wrap { padding: 14px; }
.stats-plan-row .stats-plan-pct { font-size: 36px; }
.stats-plan-row .stats-chart {
    max-width: 100%;
    aspect-ratio: 700 / 200;
}

/* Weekend toggle in cap card */
.stats-cap-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--ink-secondary);
    cursor: pointer;
    user-select: none;
}
.stats-cap-toggle input { accent-color: var(--ink); }

/* Stacked bar segments */
.stats-bar-seg.stats-bar-focus  { fill: var(--ink); }
.stats-bar-seg.stats-bar-meet   { fill: var(--ink-tertiary); }
.stats-bar-seg.stats-bar-family { fill: var(--area-3); }
.stats-bar-seg.stats-bar-travel { fill: var(--area-4); }
.stats-bar-seg.stats-bar-rust   { fill: var(--ink-secondary); }
.stats-bar-empty { fill: var(--border-light); }

/* Capacity chart legend */
.stats-cap-legend {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 11.5px;
    color: var(--ink-secondary);
}
.stats-cap-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.stats-cap-legend i {
    width: 10px; height: 10px;
    border-radius: 3px;
    display: inline-block;
}
.stats-cap-legend .seg-focus  { background: var(--ink-fill); }
.stats-cap-legend .seg-meet   { background: var(--ink-tertiary); }
.stats-cap-legend .seg-family { background: var(--area-3); }
.stats-cap-legend .seg-travel { background: var(--area-4); }
.stats-cap-legend .seg-rust   { background: var(--ink-secondary); }

/* Responsive collapse */
@media (max-width: 880px) {
    .stats-plan-row { grid-template-columns: 1fr; }
}

/* "Nieuwe taak" placeholder at the bottom of any non-week task list */
.todo-item.is-new-task-placeholder {
    cursor: pointer;
    border-top: 0;
    color: var(--ink-tertiary);
}
.todo-item.is-new-task-placeholder:hover {
    background: var(--surface);
    color: var(--ink-secondary);
}
.todo-item.is-new-task-placeholder .todo-checkbox.is-placeholder {
    display: inline-block;
    width: 17px;
    height: 17px;
    border: 1.5px dashed var(--border-strong);
    border-radius: 5px;
    background: transparent;
    margin-top: 1px;
    pointer-events: none;
}
.todo-item.is-new-task-placeholder .new-task-label {
    color: var(--ink-tertiary);
    font-weight: 500;
}
.todo-item.is-new-task-placeholder:hover .new-task-label {
    color: var(--ink-secondary);
}
.todo-item.is-new-task-placeholder:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: -2px;
    border-radius: 12px;
}

/* Same placeholder, shaped like a day-list row */
.today-tasks-panel .today-task.is-new-task-placeholder {
    color: var(--ink-tertiary);
}
.today-tasks-panel .today-task.is-new-task-placeholder .today-task-check.is-placeholder {
    border-style: dashed;
    background: transparent;
    cursor: inherit;
    pointer-events: none;
}
.today-tasks-panel .today-task.is-new-task-placeholder .new-task-label {
    color: var(--ink-tertiary);
    font-weight: 500;
}
.today-tasks-panel .today-task.is-new-task-placeholder:hover .new-task-label {
    color: var(--ink-secondary);
}
.today-tasks-panel .today-task.is-new-task-placeholder:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: -2px;
    border-radius: 12px;
}

/* Overdue deadlines card (Today list mode) */
.overdue-panel { display: flex; flex-direction: column; gap: 10px; }
.overdue-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.overdue-head .panel-title-meta {
    background: var(--surface);
    color: var(--ink-secondary);
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.overdue-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.overdue-empty {
    list-style: none;
    color: var(--ink-tertiary);
    font-size: 12.5px;
    padding: 6px 2px;
}
.overdue-item {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--content-bg);
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
}
.overdue-item:hover {
    border-color: var(--ink);
    background: var(--surface);
}
.overdue-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.overdue-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.overdue-sub {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
/* Which date slipped: a deadline, or the day it was planned for. */
.overdue-kind {
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-tertiary);
    white-space: nowrap;
}
.overdue-area {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--ink-tertiary);
    font-weight: 500;
    min-width: 0;
}
.overdue-area:not(:first-child)::before {
    content: "·";
    color: var(--ink-tertiary);
}
.overdue-area-swatch {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.overdue-when {
    font-size: 11px;
    font-weight: 600;
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 8%, transparent);
    border-radius: 999px;
    padding: 3px 9px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* "Nog te plannen" count badge in the weekplanning rail */
.nw-untimed-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 7px;
    margin-left: 6px;
    border-radius: 999px;
    background: rgba(255,255,255,0.15);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
}

/* Empty <input type="time"> shows Chrome's native "HH:MM" placeholder ("12:30"
   in the NL locale). Hide that placeholder and show a "—" instead — matches
   the visual treatment of other empty fields. */
input[type="time"][data-empty="1"]:not(:focus) {
    color: transparent;
}
input[type="time"][data-empty="1"]:not(:focus)::-webkit-datetime-edit,
input[type="time"][data-empty="1"]:not(:focus)::-webkit-datetime-edit-fields-wrapper,
input[type="time"][data-empty="1"]:not(:focus)::-webkit-datetime-edit-hour-field,
input[type="time"][data-empty="1"]:not(:focus)::-webkit-datetime-edit-minute-field,
input[type="time"][data-empty="1"]:not(:focus)::-webkit-datetime-edit-ampm-field,
input[type="time"][data-empty="1"]:not(:focus)::-webkit-datetime-edit-text {
    color: transparent;
}
/* Overlay a "—" via the closest wrapper that already has positioning. */
.add-task-combo:has(input[type="time"][data-empty="1"]:not(:focus)),
.modal-planned-combo:has(input[type="time"][data-empty="1"]:not(:focus)) {
    position: relative;
}
.add-task-combo:has(input[type="time"][data-empty="1"]:not(:focus))::after,
.modal-planned-combo:has(input[type="time"][data-empty="1"]:not(:focus))::after {
    content: "—";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-tertiary);
    font-weight: 600;
    font-size: 13px;
    pointer-events: none;
}


/* ===========================================================
   Area detail view
   =========================================================== */
.area-view { padding: 0; }
.area-view[hidden] { display: none; }
.area-page {
    padding: 24px 16px 48px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.area-detail-card {
    --accent: var(--ink-tertiary);
    background: var(--content-bg);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.area-detail-card-top {
    display: grid;
    grid-template-columns: 56px 1fr auto auto;
    gap: 18px;
    align-items: center;
}
.area-detail-edit {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--content-bg);
    color: var(--ink-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.area-detail-edit:hover {
    background: var(--surface);
    color: var(--ink);
}
.area-detail-icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 22px;
}
.area-detail-name-block { min-width: 0; }
.area-detail-name {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: var(--ink);
}
.area-detail-desc {
    margin: 6px 0 0;
    font-size: 13.5px;
    color: var(--ink-secondary);
    line-height: 1.5;
    max-width: 60ch;
}
.area-detail-pct {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 28px;
    line-height: 1;
    color: var(--ink);
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    font-variant-numeric: tabular-nums;
}
.area-detail-pct small {
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-tertiary);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.area-detail-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--surface);
    overflow: hidden;
}
.area-detail-bar i {
    display: block;
    height: 100%;
    border-radius: 999px;
    transition: width 240ms ease;
}
.area-detail-stats {
    display: flex;
    gap: 24px;
    border-top: 1px solid var(--border);
    padding-top: 14px;
}
.area-detail-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.area-detail-stat b {
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.area-detail-stat span {
    font-size: 11px;
    color: var(--ink-tertiary);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 600;
}

.area-detail-section {
    background: var(--content-bg);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 18px 20px;
}
.area-detail-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.area-detail-section-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.area-detail-section-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--ink);
}
.area-detail-section-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    background: transparent;
    padding: 0;
    margin: -4px -6px;
    padding: 4px 6px;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--font-body);
    color: var(--ink);
}
.area-detail-section-toggle:hover { background: var(--hover-bg); }
.area-detail-section-toggle .collapse-chevron {
    color: var(--ink-tertiary);
    transition: transform 0.2s ease;
}
.area-detail-section-toggle[aria-expanded="false"] .collapse-chevron {
    transform: rotate(-90deg);
}
/* Collapsed: keep just the header, drop the body and the add affordance. */
.area-detail-section.is-collapsed {
    padding-top: 14px;
    padding-bottom: 14px;
}
.area-detail-section.is-collapsed .area-detail-section-head { margin-bottom: 0; }
.area-detail-section.is-collapsed > *:not(.area-detail-section-head),
.area-detail-section.is-collapsed .area-detail-section-head > .btn-ghost {
    display: none;
}

.area-detail-goals {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.area-goal-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--content-bg);
    cursor: pointer;
    text-align: left;
    transition: border-color 120ms ease, background 120ms ease;
    font: inherit;
    color: inherit;
}
.area-goal-row:hover {
    border-color: var(--ink);
    background: var(--surface);
}
.area-goal-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
}
.area-goal-due {
    font-size: 11px;
    color: var(--ink-tertiary);
    font-variant-numeric: tabular-nums;
}
.area-mini-ring {
    --p: 0;
    --c: var(--ink);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--surface) 0);
    display: grid;
    place-items: center;
    position: relative;
    flex-shrink: 0;
}
.area-mini-ring::after {
    content: "";
    position: absolute;
    inset: 3px;
    background: var(--content-bg);
    border-radius: 50%;
}
.area-mini-ring > span {
    position: relative;
    z-index: 1;
    font-size: 9.5px;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

/* ----- Goals of an area, as a table -----
   Head and rows share one grid template, so the columns line up without the
   cells knowing their own width. The name column is the only one that gives:
   it carries min-width 0 so a long goal ellipses instead of pushing the
   dates off the card. */
.goal-table { display: flex; flex-direction: column; }
.goal-table-head,
.goal-table-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92px 96px 116px 62px;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    text-align: left;
}
.goal-table-head {
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ink-tertiary);
}
.goal-table-row {
    border: none;
    border-radius: 10px;
    background: transparent;
    font: inherit;
    color: inherit;
    cursor: pointer;
    transition: background 120ms ease;
}
.goal-table-row:hover { background: var(--surface); }
.goal-table .gt-name {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.gt-icon {
    position: relative;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}
.gt-check {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--good);
    color: #fff;
    display: grid;
    place-items: center;
    border: 1.5px solid var(--content-bg);
}
.gt-check svg { width: 8px; height: 8px; }
.gt-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.goal-table-row.is-done .gt-title {
    text-decoration: line-through;
    color: var(--ink-tertiary);
}
.goal-table .gt-progress {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
.goal-table .gt-progress b { font-weight: 600; }
.goal-table-row.is-done .gt-progress b { color: var(--good); }
/* The percentage stands beside the ring here, so the ring is a plain dial. */
.goal-table .area-mini-ring { width: 16px; height: 16px; }
.goal-table .area-mini-ring::after { inset: 2.5px; }
.goal-table .gt-start,
.goal-table .gt-due,
.goal-table .gt-tasks {
    font-size: 12.5px;
    color: var(--ink-secondary);
    font-variant-numeric: tabular-nums;
}
.goal-table .gt-tasks {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-tertiary);
}
.goal-table .gt-tasks svg { width: 14px; height: 14px; flex-shrink: 0; }
.gt-empty { color: var(--ink-tertiary); }
.gt-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 8px;
    background: var(--surface);
    font-size: 12px;
    color: var(--ink-secondary);
    white-space: nowrap;
}
.gt-chip svg { width: 12px; height: 12px; flex-shrink: 0; }
.gt-chip b { font-weight: 600; color: var(--ink); }
/* Under ~720px the dates cost more than they carry; name, progress and the
   deadline are what is left. */
@media (max-width: 720px) {
    .goal-table-head,
    .goal-table-row { grid-template-columns: minmax(0, 1fr) 84px 116px; }
    .goal-table .gt-start,
    .goal-table .gt-tasks { display: none; }
}

.area-detail-tasks {
    list-style: none;
    margin: 0;
    padding: 0;
}

.area-detail-empty {
    margin: 4px 0;
    padding: 12px;
    color: var(--ink-tertiary);
    font-size: 13px;
    text-align: center;
    border: 1px dashed var(--border);
    border-radius: 12px;
    background: var(--surface);
    list-style: none;
}

/* Clickable area/goal context links in the project header */
.proj-context-link {
    border: none;
    background: transparent;
    padding: 0;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: var(--ink-tertiary);
    cursor: pointer;
}
.proj-context-link:hover { color: var(--ink); text-decoration: underline; }
.proj-context-sep { color: var(--ink-tertiary); }

/* Goal detail header: pct + edit button stacked at the right */
.area-detail-head-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}
.area-detail-edit { padding: 5px 12px; }

/* Project detail: the context line reads as one sentence, and the project
   actions sit in the header card instead of the (collapsed) top bar. */
.area-detail-desc .proj-context-link {
    font-size: inherit;
    letter-spacing: normal;
    text-transform: none;
}
#projHead .content-header-actions { flex-wrap: wrap; justify-content: flex-end; }

/* Goal modal delete button + spacer */
.entity-modal-actions-grow { flex: 1; }
.entity-modal-delete {
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 600;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--danger);
    cursor: pointer;
}
.entity-modal-delete:hover {
    background: color-mix(in srgb, var(--danger) 8%, transparent);
    border-color: var(--danger);
}
.entity-modal-delete[hidden] { display: none; }

/* ===========================================================
   "Mijn leven" overview grids (areas / projects / goals)
   =========================================================== */
.overview-view { padding: 0; }
.overview-view[hidden] { display: none; }
.overview-page { padding: 16px 16px 48px; }

.overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
    gap: 16px;
}

.overview-card {
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    background: var(--content-bg);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color 120ms ease, box-shadow 120ms ease;
    min-width: 0;
}
.overview-card:hover {
    border-color: var(--ink);
    box-shadow: var(--shadow-sm);
}
.overview-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.overview-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 17px;
}
.overview-card-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}
.overview-card-pct {
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
    font-weight: 700;
    font-size: 18px;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.overview-card-pct small {
    font-size: 10px;
    font-weight: 600;
    color: var(--ink-tertiary);
}
.overview-card-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.overview-card-desc {
    margin: 0;
    font-size: 12.5px;
    color: var(--ink-secondary);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.overview-card-ctx {
    margin: 0;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ink-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.overview-card-bar {
    height: 5px;
    border-radius: 999px;
    background: var(--surface);
    overflow: hidden;
}
.overview-card-bar i { display: block; height: 100%; border-radius: 999px; }
.overview-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: 11.5px;
    color: var(--ink-tertiary);
}
.overview-card-stats b {
    color: var(--ink);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.overview-card-due {
    margin-left: auto;
    color: var(--ink-secondary);
    font-variant-numeric: tabular-nums;
}
.overview-mini-ring {
    --p: 0;
    --c: var(--ink);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--surface) 0);
    display: grid;
    place-items: center;
    position: relative;
}
.overview-mini-ring::after {
    content: "";
    position: absolute;
    inset: 4px;
    background: var(--content-bg);
    border-radius: 50%;
}
.overview-mini-ring > span {
    position: relative;
    z-index: 1;
    font-size: 9.5px;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.goal-done-flag {
    font-weight: 600;
    color: var(--ink-secondary);
}
.area-detail-card.is-done .area-detail-name {
    text-decoration: line-through;
    color: var(--ink-secondary);
}

/* Finished work, shown only when the overview's toggle asks for it: the same
   card, dimmed and with its name struck through, so it reads as closed. */
.overview-card.is-done {
    background: var(--surface);
    opacity: 0.72;
}
.overview-card.is-done:hover {
    opacity: 1;
}
.overview-card.is-done .overview-card-name {
    text-decoration: line-through;
    color: var(--ink-secondary);
}

.overview-card-add {
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-style: dashed;
    background: transparent;
    color: var(--ink-tertiary);
    min-height: 120px;
}
.overview-card-add:hover {
    border-color: var(--ink);
    color: var(--ink);
    box-shadow: none;
}
.overview-add-plus {
    font-size: 26px;
    font-weight: 300;
    line-height: 1;
    color: var(--ink);
}
.overview-add-label { font-size: 13px; font-weight: 600; }

/* ── Recurrence: button in the Gepland row, settings modal, title icon ── */
/* Emptying the planned time again; the native input offers no way to. */
.modal-time-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--ink-tertiary);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.modal-time-clear[hidden] { display: none; }
.modal-time-clear svg { width: 12px; height: 12px; }
.modal-time-clear:hover { background: var(--hover-bg); color: var(--ink); }

.modal-recurrence-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--ink-tertiary);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.modal-recurrence-btn svg { width: 14px; height: 14px; }
.modal-recurrence-btn:hover {
    background: var(--hover-bg);
    color: var(--ink);
}
.modal-recurrence-btn.is-active { color: var(--ink); }

.todo-recurring-icon {
    display: inline-flex;
    vertical-align: middle;
    margin-left: 6px;
    color: var(--ink-tertiary);
}
.todo-recurring-icon svg { width: 12px; height: 12px; display: block; }

.recurrence-modal { max-width: 400px; }

.recurrence-modal-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 24px 20px;
}

.recurrence-modes {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.recurrence-mode {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
}
.recurrence-mode input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1.5px solid var(--border-strong);
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.12s ease;
}
.recurrence-mode input[type="radio"]:hover { border-color: var(--ink); }
.recurrence-mode input[type="radio"]:checked {
    border-width: 5.5px;
    border-color: var(--ink);
}

.recurrence-divider {
    height: 1px;
    background: var(--border);
    margin: 2px -24px;
}

.recurrence-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--ink);
}
.recurrence-num,
.recurrence-select {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--content-bg);
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--ink);
    padding: 6px 10px;
}
.recurrence-num { width: 64px; }
.recurrence-num:focus,
.recurrence-select:focus {
    outline: none;
    border-color: var(--ink);
}

.recurrence-days-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}
.recurrence-days-label { font-size: 14px; color: var(--ink); }
.recurrence-days {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.recurrence-day {
    min-width: 40px;
    padding: 8px 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--content-bg);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-secondary);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.recurrence-day:hover { border-color: var(--ink); }
.recurrence-day.is-on {
    background: var(--ink-fill);
    border-color: var(--ink);
    color: var(--ink-fill-text);
}

.recurrence-end-row { color: var(--ink-secondary); }
.recurrence-end-hint {
    font-size: 12px;
    color: var(--ink-tertiary);
}

.recurrence-modal-actions { align-items: center; }
.recurrence-clear-btn {
    margin-right: auto;
    border: none;
    background: transparent;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-tertiary);
    cursor: pointer;
    padding: 8px 0;
}
.recurrence-clear-btn:hover { color: var(--priority-high); }

/* The empty-time "—" overlay sits left of the recurrence button now. */
.modal-planned-combo:has(input[type="time"][data-empty="1"]:not(:focus))::after {
    right: 34px;
}

/* ── Goal progress block (measurable goals) ───────────────────────────── */
.goal-progress-period {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-secondary);
    font-variant-numeric: tabular-nums;
}

.goal-progress-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.goal-progress-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.goal-progress-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}
.goal-progress-kicker svg {
    width: 15px;
    height: 15px;
    color: var(--ink-secondary);
}

.goal-progress-nums {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 2px;
}
.goal-progress-nums .gp-current {
    font-size: 26px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.goal-progress-nums .gp-target-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-tertiary);
    font-variant-numeric: tabular-nums;
}
.goal-progress-chart {
    width: 100%;
    height: auto;
    margin-top: 4px;
}
.goal-progress-chart .gp-grid {
    stroke: var(--border);
    stroke-width: 1;
}
.goal-progress-chart .gp-axisline {
    stroke: var(--border-strong);
    stroke-width: 1.25;
}
.goal-progress-chart .gp-schedule {
    stroke: var(--border-strong);
    stroke-width: 1.25;
}
.goal-progress-chart .gp-nowline {
    stroke: var(--ink-secondary);
    stroke-width: 1.25;
    stroke-dasharray: 3 4;
}
.goal-progress-chart .gp-endmark {
    stroke: #e5484d;
    stroke-width: 1.5;
}

.goal-progress-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-top: 1px solid var(--border-light);
    padding-top: 14px;
    margin-top: 8px;
}
.goal-progress-panel[hidden] { display: none; }
.goal-progress-chart .gp-axis {
    font-size: 9px;
    fill: var(--ink-tertiary);
    font-variant-numeric: tabular-nums;
}
.goal-progress-chart .gp-empty {
    font-size: 13px;
    fill: var(--ink-tertiary);
}

.goal-progress-form {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.goal-progress-form input {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--content-bg);
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--ink);
    padding: 7px 10px;
}
.goal-progress-form input:focus { outline: none; border-color: var(--ink); }
.goal-progress-form input[type="number"] { width: 130px; }
.goal-progress-form input[type="text"] { flex: 1; min-width: 140px; }
.goal-progress-add {
    border: none;
    border-radius: 10px;
    background: var(--ink-fill);
    color: var(--ink-fill-text);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    padding: 7px 14px;
    cursor: pointer;
}
.goal-progress-add:hover { background: #000; }

.goal-progress-entries {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.goal-progress-entry {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 2px;
    border-top: 1px solid var(--border-light);
    font-size: 13px;
}
.goal-progress-entry .gp-date {
    color: var(--ink-tertiary);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.goal-progress-entry .gp-value {
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.goal-progress-entry .gp-value.is-negative { color: var(--priority-high); }
.goal-progress-entry .gp-note {
    flex: 1;
    color: var(--ink-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.goal-progress-entry .gp-delete {
    border: none;
    background: transparent;
    color: var(--ink-tertiary);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    display: inline-flex;
}
.goal-progress-entry .gp-delete:hover {
    background: var(--hover-bg);
    color: var(--priority-high);
}
.goal-progress-entry .gp-delete svg { width: 12px; height: 12px; }

/* Unit field in the goal modal stays narrow */
.goal-target-row .goal-target-unit-field { max-width: 90px; }

/* ===== Gewoontes (weekly habit tracker) ===== */
/* ===== Week review ===== */
.wr-modal { max-width: 560px; }
/* The week stepper drops onto its own row under the title. */
.wr-modal .pw-header { flex-wrap: wrap; }
.wr-modal-nav {
    order: 3;
    flex-basis: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}
.wr-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
}
.wr-card {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--content-bg);
}
.wr-card-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-tertiary);
}
.wr-card-value {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 28px;
    line-height: 1.1;
    color: var(--ink);
}
.wr-card-sub { font-size: 11.5px; color: var(--ink-tertiary); }

/* The review grew past one screen; the body scrolls, the header stays. */
.wr-body {
    max-height: min(70vh, 640px);
    overflow-y: auto;
}
.wr-block-title {
    margin: 22px 0 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-tertiary);
}
.wr-empty { margin: 0; font-size: 13px; color: var(--ink-tertiary); }

/* Checklist: green once the thing it asks for is actually true. */
.wr-checklist { list-style: none; margin: 0; padding: 0; }
.wr-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid var(--border-light);
}
.wr-checklist .wr-check:first-child { border-top: none; }
.wr-check-mark {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 1px;
    border-radius: 50%;
    border: 1.5px solid var(--border-strong);
    display: grid;
    place-items: center;
    color: transparent;
}
.wr-check-mark svg { width: 10px; height: 10px; }
.wr-check.is-done .wr-check-mark {
    background: #1a8f3a;
    border-color: #1a8f3a;
    color: #fff;
}
.wr-check-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wr-check-label { font-size: 13.5px; color: var(--ink); }
.wr-check.is-done .wr-check-label { color: #1a8f3a; font-weight: 500; }
.wr-check-detail { font-size: 11.5px; color: var(--ink-tertiary); }

/* The week in one number: how much of what you planned actually landed. */
.wr-total {
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 10px;
}
.wr-total-head { display: flex; align-items: baseline; gap: 12px; }
.wr-total-pct {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 40px;
    line-height: 1;
    color: #1a8f3a;
    font-variant-numeric: tabular-nums;
}
.wr-total-pct small { font-size: 22px; }
.wr-total-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
    color: var(--ink-secondary);
}
.wr-total-label b {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ink-tertiary);
    font-variant-numeric: tabular-nums;
}
.wr-total-bar {
    display: block;
    height: 6px;
    margin-top: 12px;
    border-radius: 999px;
    background: var(--surface);
    overflow: hidden;
}
.wr-total-bar i { display: block; height: 100%; border-radius: 999px; background: #1a8f3a; }

/* Per day: the share of that day's planned hours that landed. */
.wr-days { display: flex; flex-direction: column; gap: 7px; }
.wr-day-row {
    display: grid;
    grid-template-columns: 38px 1fr 42px;
    align-items: center;
    gap: 10px;
}
.wr-day-label {
    font-size: 12px;
    color: var(--ink-secondary);
    font-variant-numeric: tabular-nums;
}
.wr-day-label i { font-style: normal; color: var(--ink-tertiary); margin-left: 3px; }
.wr-day-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--surface);
    overflow: hidden;
}
.wr-day-bar i { display: block; height: 100%; border-radius: 999px; background: #1a8f3a; }
.wr-day-pct {
    font-size: 11.5px;
    color: var(--ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.wr-day-row.is-full .wr-day-pct { color: #1a8f3a; }

/* What was planned into the week and is still open. */
.wr-open { display: flex; flex-direction: column; gap: 6px; }
.wr-open-row {
    display: grid;
    grid-template-columns: 42px 7px 1fr auto;
    align-items: center;
    gap: 8px;
}
.wr-open-day {
    font-size: 11px;
    color: var(--ink-tertiary);
    font-variant-numeric: tabular-nums;
}
.wr-open-dot { width: 7px; height: 7px; border-radius: 2px; }
.wr-open-title {
    font-size: 13px;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wr-open-meta {
    font-size: 11.5px;
    color: var(--ink-tertiary);
    font-variant-numeric: tabular-nums;
}

/* Per habit: how much of what this week asked for got ticked. */
.wr-habits { display: flex; flex-direction: column; gap: 8px; }
.wr-habit-row {
    display: grid;
    grid-template-columns: 1fr 90px auto;
    align-items: center;
    gap: 10px;
}
.wr-habit-name {
    font-size: 13px;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wr-habit-bar {
    height: 5px;
    border-radius: 999px;
    background: var(--surface);
    overflow: hidden;
}
.wr-habit-bar i { display: block; height: 100%; border-radius: 999px; }
.wr-habit-pct {
    font-size: 11.5px;
    color: var(--ink-tertiary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.wr-habit-pct b { color: var(--ink); font-weight: 600; }
.wr-habit-row.is-full .wr-habit-pct b { color: #1a8f3a; }

/* ===== Ooit, misschien ===== */
.ideas-view[hidden] { display: none; }
.ideas-page {
    padding: 8px 4px 48px;
    width: 100%;
    max-width: 760px;
}
.ideas-empty {
    margin: 32px 12px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-tertiary);
    max-width: 46ch;
}
.ideas-group + .ideas-group { margin-top: 26px; }
.ideas-group-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px 6px;
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-tertiary);
}
.ideas-group-head .ideas-group-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ideas-group-head .line { flex: 1; height: 1px; background: var(--border); }
.ideas-group-head .gcount { font-weight: 500; }
.ideas-list { list-style: none; margin: 0; padding: 0; }
.idea-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 12px;
    background: transparent;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.1s;
}
.idea-row:hover { background: var(--surface); }
.idea-title {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--ink);
}
.idea-note {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ink-tertiary);
    white-space: pre-wrap;
}
/* Converting lives in the idea modal, next to the gebied it will inherit. */
.idea-convert-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px solid var(--border-light);
    margin-top: 2px;
}
.idea-convert-row[hidden] { display: none; }
.idea-convert-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-secondary);
    margin-right: auto;
}
.idea-convert-hint {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ink-tertiary);
    margin: 0;
}
.idea-convert-hint[hidden] { display: none; }

.habits-page {
    padding: 8px 16px 48px;
    width: 100%;
}
.habits-empty {
    margin: 32px 0;
    text-align: center;
    font-size: 14px;
    color: var(--ink-tertiary);
}
.habit-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 8px;
    margin: 0 -8px;
    border-radius: 12px;
}
.habit-row:hover { background: var(--surface); }
.habit-icon {
    position: relative;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--surface);
    font-size: 19px;
    color: var(--ink-secondary);
}
.habit-row:hover .habit-icon { background: var(--surface-2); }
.habit-icon svg { width: 17px; height: 17px; }
.habit-name {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    text-align: left;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    padding: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.habit-days {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.habit-day {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 10px;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.habit-day:hover { background: var(--hover-bg); }
.habit-day.is-off { color: var(--ink-tertiary); font-weight: 500; }
.habit-day.is-today { background: var(--surface-2); }
.habit-day.is-done {
    background: var(--ink-fill);
    color: var(--ink-fill-text);
}
.habit-day.is-done:hover { background: #000; }
.habit-day svg { width: 15px; height: 15px; }
.habit-pct {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    min-width: 64px;
    justify-content: flex-end;
}
.habit-donut { width: 20px; height: 20px; }
.habit-pct-num {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    min-width: 34px;
}
.habit-stats-btn {
    border: none;
    background: transparent;
    color: var(--ink-tertiary);
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    display: inline-flex;
    flex-shrink: 0;
}
.habit-stats-btn:hover { background: var(--hover-bg); color: var(--ink); }
.habit-stats-btn svg { width: 16px; height: 16px; }

/* Habit modal: narrow icon field next to the name */
.habit-name-row .habit-icon-field { max-width: 84px; }
.habit-name-row { align-items: flex-end; }

/* Habit statistics modal */
.habit-stats-modal { max-width: 440px; }
.habit-stats-month-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 2px;
}
.habit-stats-month-nav .btn-ghost {
    border: none;
    background: transparent;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1;
    color: var(--ink-secondary);
    cursor: pointer;
}
.habit-stats-month-nav .btn-ghost:hover { background: var(--hover-bg); color: var(--ink); }
.habit-stats-month-label {
    flex: 1;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    text-transform: capitalize;
}
.habit-stats-section-title {
    margin: 16px 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-secondary);
}
.habit-stats-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.habit-stat-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.habit-stat-label {
    font-size: 12px;
    color: var(--ink-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.habit-stat-value {
    font-size: 19px;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.habit-stat-value small {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-tertiary);
}
.habit-stats-calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px;
}
.habit-cal-head {
    text-align: center;
    font-size: 11px;
    color: var(--ink-tertiary);
    padding: 2px 0 6px;
}
.habit-cal-day {
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.habit-cal-day.is-off { color: var(--ink-tertiary); }
.habit-cal-day.is-today { box-shadow: inset 0 0 0 1.5px var(--ink); }
.habit-cal-day.is-done {
    background: var(--ink-fill);
    color: var(--ink-fill-text);
}

@media (max-width: 640px) {
    .habit-row { flex-wrap: wrap; }
    .habit-days { order: 4; width: 100%; justify-content: space-between; }
    .habit-day { width: 32px; height: 32px; }
}

/* ── Inbox filter panel ───────────────────────────────────────────────── */
.inbox-filter-wrap { position: relative; }

.inbox-filter-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 340px;
    background: var(--content-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow-pop);
    padding: 16px 18px;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.inbox-filter-panel[hidden] { display: none; }

.inbox-filter-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-light);
    margin: 0 -18px 2px;
    padding-left: 18px;
    padding-right: 18px;
}

.inbox-filter-section-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-tertiary);
    margin-top: 2px;
}

.inbox-filter-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.inbox-filter-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink);
}
.inbox-filter-label svg {
    width: 15px;
    height: 15px;
    color: var(--ink-secondary);
}
/* ----- Filter dropdowns -----
   A closed field that says what is chosen, and a menu that unfolds under it.
   The menu is a sibling of its button, which is what the JS walks: button →
   nextElementSibling. A unit picker sits inside the Duur menu, so both nest. */
.fdrop { position: relative; width: 150px; }
.fdrop-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--content-bg);
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
}
.fdrop-btn:hover { border-color: var(--border-strong); }
.fdrop-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fdrop-caret {
    width: 13px;
    height: 13px;
    flex: none;
    color: var(--ink-tertiary);
    transition: transform 0.12s ease;
}
.fdrop-btn[aria-expanded="true"] .fdrop-caret { transform: rotate(180deg); }
.fdrop-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 100%;
    z-index: 70;
    display: flex;
    flex-direction: column;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--content-bg);
    box-shadow: var(--shadow-pop);
}
/* `display: flex` outranks the UA's [hidden] rule, so folding needs saying. */
.fdrop-menu[hidden] { display: none; }
.fdrop-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 10px;
    border: none;
    border-radius: 9px;
    background: transparent;
    font-family: var(--font-body);
    font-size: 13.5px;
    color: var(--ink-secondary);
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}
.fdrop-opt:hover { background: var(--surface); }
.fdrop-opt.is-on { color: var(--ink); font-weight: 600; }
.fdrop-check {
    width: 14px;
    height: 14px;
    flex: none;
    color: var(--ink);
    opacity: 0;
}
.fdrop-opt.is-on .fdrop-check { opacity: 1; }

/* Duur holds two questions: the modes above the line, the bounds below it. */
.fdrop-menu-duration { width: 296px; }
.fdrop-sep {
    height: 1px;
    background: var(--border-light);
    margin: 6px -6px;
}
.fdrop-bound {
    display: grid;
    grid-template-columns: 1fr 56px 94px;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
}
.fdrop-bound-label { font-size: 13.5px; color: var(--ink); }
.fdrop-num {
    width: 100%;
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--content-bg);
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--ink);
}
.fdrop-num:focus { outline: none; border-color: var(--ink); }
.fdrop-num::-webkit-outer-spin-button,
.fdrop-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fdrop-unit { width: 100%; }
.fdrop-unit .fdrop-btn {
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12.5px;
}

.inbox-filter-divider {
    height: 1px;
    background: var(--border-light);
    margin: 4px -18px 0;
}

.inbox-filter-reset {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    border: none;
    background: transparent;
    padding: 8px 10px;
    margin: 0 -10px -4px;
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink-secondary);
    cursor: pointer;
}
.inbox-filter-reset svg { width: 15px; height: 15px; }
.inbox-filter-reset:hover { background: var(--surface); color: var(--ink); }
.inbox-filter-reset:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

/* Active-filter indicator dot on the header button. Red rather than the
   theme's accent: it says the list is showing less than it holds, which is
   worth noticing whichever accent is on. */
.icon-btn.has-filters { position: relative; }
.icon-btn.has-filters::after {
    content: "";
    position: absolute;
    top: 6px;
    right: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--danger);
    border: 1.5px solid var(--content-bg);
}

/* Group headers inside the flat task list (inbox grouping) */
.task-list .task-group-head {
    list-style: none;
    padding: 16px 8px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-tertiary);
    display: flex;
    align-items: center;
    gap: 10px;
}
.task-list .task-group-head .line {
    flex: 1;
    height: 1px;
    background: var(--border);
}
.task-list .task-group-head .gcount {
    font-variant-numeric: tabular-nums;
}

/* ===== Gewoontes inside the day & week planners ===== */
/* The day list reuses the task row wholesale, so only the agenda rail and
   the week rows need their own check button. */
.plan-habit-check {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border: 1.5px solid var(--border-strong);
    border-radius: 6px;
    background: var(--content-bg);
    color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.plan-habit-check svg { width: 12px; height: 12px; }
.plan-habit-check:hover { border-color: var(--ink); }
.plan-habit-check[aria-pressed="true"] {
    background: var(--ink-fill);
    border-color: var(--ink);
    color: var(--ink-fill-text);
}
.tb-pool-habit { cursor: default; }
.tb-pool-habit.is-done .t {
    color: var(--ink-tertiary);
    text-decoration: line-through;
}

/* Week planner rows reuse the .nw-line grid, with the check as the 4th cell. */
.nw-line.habit .t b { font-weight: 600; }
/* The check leads the title, so it lines up with a task's circle. */
.nw-line.habit .ti {
    display: flex;
    align-items: center;
    gap: 8px;
}
.nw-line.habit .ti .plan-habit-check { width: 13px; height: 13px; border-radius: 4px; }
.nw-line.habit .ti .plan-habit-check svg { width: 9px; height: 9px; }
.nw-line.habit .ti .ti-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nw-line.habit.is-done .ti .ti-text,
.nw-line.task.is-done .ti .ti-text {
    color: var(--ink-tertiary);
    text-decoration: line-through;
}

/* An appointment that has already been reads as struck through too, so the
   day's remaining work is what stands out. Its own class: nobody ticked it. */
.nw-line.event.is-past .body .ti {
    color: var(--ink-tertiary);
    text-decoration: line-through;
}
.nw-line.event.is-past .t,
.nw-line.event.is-past .body .sub { color: var(--ink-tertiary); }
.nw-line.event.is-past .bar { opacity: 0.45; }

/* "Toon" toggles in the week panel head. */
.nw-show-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-tertiary);
}
.nw-panel-tools { align-items: center; gap: 8px; }


/* Finished work stays on the day planner as a record, but reads as done. */
.tb-block.is-done {
    background: var(--surface);
    cursor: default;
}
.tb-block.is-done .tb-block-title,
.tb-block.is-done .tb-block-time {
    color: var(--ink-tertiary);
    text-decoration: line-through;
}
.tb-block.is-done .tb-rail-accent { opacity: 0.4; }

/* Tick a block off where it sits on the timeline. */
.tb-block-check {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    align-self: center;
    padding: 0;
    border: 1.5px solid var(--border-strong);
    border-radius: 4px;
    background: var(--content-bg);
    color: transparent;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.tb-block-check svg { width: 9px; height: 9px; display: block; }
.tb-block-check:hover { border-color: var(--ink-secondary); color: var(--border-strong); }
.tb-block.is-done .tb-block-check {
    background: #1a8f3a;
    border-color: #1a8f3a;
    color: #fff;
}
.tb-block.tiny .tb-block-check { width: 13px; height: 13px; }
.tb-pool-item.is-done {
    background: var(--surface);
    cursor: default;
}
.tb-pool-item.is-done .t {
    color: var(--ink-tertiary);
    text-decoration: line-through;
}
.tb-pool-item.is-done .dot { opacity: 0.4; }
.tb-pool-item.is-done .grip { visibility: hidden; }

/* ===== Nieuwe taak · same field rows as the task modal ===== */
.add-task-entity-modal { width: min(520px, 100%); }
.add-task-modal-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
/* The task's name is the modal's heading: one field, no label above it. */
.add-task-header { align-items: flex-start; gap: 12px; }
.add-task-title {
    flex: 1;
    min-width: 0;
    padding: 0;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 600;
}
.add-task-title::placeholder {
    color: var(--ink-tertiary);
    font-weight: 400;
}
/* Hairlines between the rows, like the task modal's right column. */
.add-task-fields { display: flex; flex-direction: column; }
.add-task-fields .modal-field + .modal-field {
    border-top: 1px solid var(--border-light);
}
/* Two controls sharing one row's value slot (date + time, duur + "min"). */
.add-task-combo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.add-task-suffix {
    font-size: 12px;
    color: var(--ink-tertiary);
}
.add-task-suffix[hidden] { display: none; }
.add-task-fields input.modal-field-input[type="date"],
.add-task-fields input.modal-field-input[type="time"],
.add-task-fields input.modal-field-input[type="number"] {
    color: var(--ink);
    font-weight: 600;
}
.add-task-fields input.modal-field-input[type="number"] { max-width: 68px; text-align: right; }
.add-task-interval { max-width: 48px; }
/* `display: inline-block` on the shared input rule outranks the UA's
   [hidden] rule, so say it again for the fields that toggle. */
.add-task-fields .modal-field-input[hidden] { display: none; }

/* ===== Doel, gebied of project · one field, one picker ===== */
.modal-parent-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    /* The shared input rule only reaches select and input, so a button needs
       its own chrome stripped. */
    border: none;
    background: transparent;
    padding: 0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    text-align: right;
}
.modal-parent-btn > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.modal-parent-btn .modal-area-swatch[hidden] { display: none; }

.parent-picker {
    position: fixed;
    z-index: 9999;
    width: 288px;
    max-height: min(420px, 70vh);
    display: flex;
    flex-direction: column;
    background: var(--content-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-menu);
    overflow: hidden;
}
.parent-picker[hidden] { display: none; }
.pp-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-light);
}
.pp-search svg { width: 15px; height: 15px; color: var(--ink-tertiary); flex-shrink: 0; }
.pp-search input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    color: var(--ink);
}
.pp-list { overflow-y: auto; padding: 6px; }
.pp-group {
    display: block;
    padding: 10px 8px 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-tertiary);
}
.pp-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 8px;
    border: none;
    border-radius: 8px;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
}
.pp-row:hover { background: var(--hover-bg); }
.pp-none { color: var(--ink-tertiary); }
.pp-dot {
    width: 7px;
    height: 7px;
    border-radius: 2px;
    flex-shrink: 0;
}
.pp-empty {
    margin: 0;
    padding: 12px 8px;
    font-size: 13px;
    color: var(--ink-tertiary);
}