:root {
    /* ---- Brand marks (fixed identity, never tinted) ---- */
    --brand-orange:      #EB6927;
    --brand-navy:        #262F37;
    --brand-light-gray:  #D5DDDE;

    /* ---- Orange ramp - primary brand hue (Base, 1100 … 100) ---- */
    --orange-base: #5B2A1C; --orange-1100:#DC3B00; --orange-1000:#F24905; --orange-900:#FF5924;
    --orange-800: #F98868; --orange-700: #FFA286; --orange-600: #FFB8A0; --orange-500: #FFC8B5;
    --orange-400: #FFD6C7; --orange-300: #FFE8DE; --orange-200: #FFF4F0; --orange-100: #FEFCFB;

    /* ---- Neutral ramp - cool grays, grounds & text ---- */
    --neutral-base: #1C2024; --neutral-1100:#60646C; --neutral-1000:#80838D; --neutral-900:#8B8D98;
    --neutral-800: #B9BBC6; --neutral-700: #CDCED6; --neutral-600: #D9D9E0; --neutral-500: #E0E1E6;
    --neutral-400: #E8E8EC; --neutral-300: #F0F0F3; --neutral-200: #F9F9FB; --neutral-100: #FCFCFD;

    /* ---- Green - success & active journey ---- */
    --green-base: #203C25; --green-1100:#2A7E3B; --green-1000:#3E9B4F; --green-900:#46A758;
    --green-800: #65BA74; --green-700: #94CE9A; --green-600: #B2DDB5; --green-500: #C9E8CA;
    --green-400: #DAF1DB; --green-300: #E9F6E9; --green-200: #F5FBF5; --green-100: #FBFEFB;

    /* ---- Blue - information ---- */
    --blue-base: #113264; --blue-1100:#0D74CE; --blue-1000:#0588F0; --blue-900:#0090FF;
    --blue-800: #5EB1EF; --blue-700: #8EC8F6; --blue-600: #ACD8FC; --blue-500: #C2E5FF;
    --blue-400: #D5EFFF; --blue-300: #E6F4FE; --blue-200: #F4FAFF; --blue-100: #FBFDFF;

    /* ---- Purple - accent references ---- */
    --purple-base: #402060; --purple-1100:#8145B5; --purple-1000:#8347B9; --purple-900:#8E4EC6;
    --purple-800: #BE93E4; --purple-700: #D1AFEC; --purple-600: #E0C4F4; --purple-500: #EAD5F9;
    --purple-400: #F2E2FC; --purple-300: #F7EDFE; --purple-200: #FBF7FE; --purple-100: #FEFCFE;

    /* ---- Red - error, blocked & violations ---- */
    --red-base: #641723; --red-1100:#CE2C31; --red-1000:#DC3E42; --red-900:#E5484D;
    --red-800: #EB8E90; --red-700: #F4A9AA; --red-600: #FDBDBE; --red-500: #FFCDCE;
    --red-400: #FFDBDC; --red-300: #FEEBEC; --red-200: #FFF7F7; --red-100: #FFFCFC;

    /* ---- Yellow - warning & attention ---- */
    --yellow-base: #4F3422; --yellow-1100:#AB6400; --yellow-1000:#FFBA18; --yellow-900:#FFC53D;
    --yellow-800: #E2A336; --yellow-700: #E9C162; --yellow-600: #F3D673; --yellow-500: #FBE577;
    --yellow-400: #FFEE9C; --yellow-300: #FFF7C2; --yellow-200: #FEFBE9; --yellow-100: #FEFDFB;

    /* ======================================================================
       Semantic aliases - reference THESE from component CSS.
       ====================================================================== */

    /* Grounds & surfaces */
    --c-bg:            var(--neutral-200);
    --c-surface:       #FFFFFF;
    --c-surface-2:     var(--neutral-300);
    --c-surface-3:     var(--neutral-400);
    --c-hairline:      var(--neutral-400);
    --c-border:        var(--neutral-500);
    --c-border-strong: var(--neutral-700);

    /* Text (on light) */
    --c-text:        var(--neutral-base);
    --c-text-dim:    var(--neutral-1100);
    --c-text-muted:  var(--neutral-1000);
    --c-text-faint:  var(--neutral-900);

    /* Primary / accent - orange-led */
    --c-primary:        var(--brand-orange);
    --c-primary-hover:  var(--orange-1100);
    --c-primary-ink:    #994700;               /* PrimaryBrand - orange text on light */
    --c-primary-tint:   var(--orange-300);
    --c-primary-tint-2: var(--orange-200);
    --c-on-primary:     #FFFFFF;
    --c-accent:         var(--brand-orange);
    --c-accent-glow:    rgba(235,105,39,.18);

    /* Dark chrome (nav rail) */
    --c-nav-bg:       var(--brand-navy);
    --c-nav-text:     var(--brand-light-gray);
    --c-on-dark:      #FFFFFF;
    --c-on-dark-dim:  var(--neutral-800);

    /* Success (green) */
    --c-success:        var(--green-900);
    --c-success-ink:    var(--green-1100);
    --c-success-tint:   var(--green-300);
    --c-success-border: var(--green-700);

    /* Information (blue) */
    --c-info:        var(--blue-1100);
    --c-info-ink:    var(--blue-base);
    --c-info-tint:   var(--blue-300);
    --c-info-border: var(--blue-700);

    /* Warning (yellow / amber) */
    --c-warning:        var(--yellow-1100);
    --c-warning-tint:   var(--yellow-200);
    --c-warning-border: var(--yellow-500);

    /* Danger (red) */
    --c-danger:        var(--red-900);
    --c-danger-ink:    var(--red-1100);
    --c-danger-tint:   var(--red-300);
    --c-danger-border: var(--red-700);

    /* Accent references (purple) */
    --c-purple: var(--purple-900);

    /* Layout - shared so every module screen lines up on the same content width */
    --content-max: 1240px;

    /* ======================================================================
       Component tokens - effects, tints, radii, control sizing.
       These back the unified component layer below. Every value here equals a
       literal the module stylesheets were already hard-coding, so swapping a
       module's raw rgba()/px for one of these tokens is a zero-visual-change
       refactor.
       ====================================================================== */

    /* Alpha tints - semantic fills that sit under text (chips, callouts, hovers) */
    --c-primary-wash:   rgba(235, 105, 39, .08);   /* faint accent fill (chip hover, client chip) */
    --c-primary-soft:   rgba(235, 105, 39, .12);   /* accent tint (open chip, count badges, seg count) */
    --c-success-wash:   rgba(70, 167, 88, .12);
    --c-warning-wash:   rgba(171, 100, 0, .12);
    --c-danger-wash:    rgba(229, 72, 77, .12);
    --c-purple-wash:    rgba(142, 78, 198, .12);
    --c-danger-outline: rgba(229, 72, 77, .35);    /* ghost-danger button border */

    /* Focus ring - repeated on every input / select / picker / toggle */
    --c-focus-ring: 0 0 0 2px rgba(235, 105, 39, .15);

    /* Elevation */
    --c-scrim:      rgba(28, 32, 36, .55);          /* modal backdrop (= --neutral-base @ 55%) */
    --shadow-sm:    0 2px 8px rgba(0, 0, 0, .08);   /* card / row hover lift */
    --shadow-pop:   0 8px 22px rgba(0, 0, 0, .14);  /* dropdowns, popovers, combo lists */
    --shadow-toast: 0 6px 18px rgba(0, 0, 0, .22);  /* toast stack */
    --shadow-modal: 0 20px 60px rgba(0, 0, 0, .25); /* dialog card */

    /* Radii */
    --radius-xs:   4px;
    --radius-sm:   6px;
    --radius-md:   8px;
    --radius-lg:   10px;
    --radius-xl:   14px;
    --radius-pill: 999px;

    /* Control sizing - toolbar buttons, inputs, selects share one height */
    --control-h:    32px;
    --control-h-sm: 28px;
    /* Top-toolbar row height - one control tall. Every screen's toolbar uses this
       so switching modules never changes the toolbar height (smooth transition). */
    --toolbar-h:    32px;
}

/* ==========================================================================
   COMPONENT LAYER
   --------------------------------------------------------------------------
   One canonical version of every UI primitive the module stylesheets were
   each re-declaring (buttons, tables, chips, badges, shimmer, spinners,
   toasts, dialogs, …). See the block comment at the very bottom of this file
   for the module-by-module dedupe map and adoption notes.

   Naming:
     • `.btn*`, `.dialog-*`, `::-webkit-scrollbar` keep their existing names —
       module JS already emits them, so this file is now their single source
       of truth (and fixes a latent gap: those base rules only lived in the
       lazy-loaded builder-checklist.css before, so a session that opened
       Funcionários / Veículos / RH before Checklists rendered them unstyled).
     • Everything else uses a `ds-` prefix so it is additive and collision-free;
       modules can migrate their `.kX-*` classes onto these incrementally.
   ========================================================================== */

/* ---- Shared animations (replace 6× shimmer, 5× spin, 5× entrance keyframes) */
@keyframes ds-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@keyframes ds-spin    { to { transform: rotate(360deg); } }
@keyframes ds-in      { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes ds-pop     { from { opacity: .6; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
@keyframes ds-holdon {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.015); box-shadow: 0 0 0 4px var(--c-accent-glow); }
    100% { transform: scale(1); }
}
@keyframes ds-holdon-still { 35% { box-shadow: 0 0 0 4px var(--c-accent-glow); } }

/* ---- Custom scrollbar (was duplicated verbatim in builder + kanban) -------- */
::-webkit-scrollbar        { width: 8px; height: 8px; }
::-webkit-scrollbar-track  { background-color: var(--c-bg); }
::-webkit-scrollbar-thumb  { background-color: var(--c-hairline); }
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active { background-color: var(--c-border-strong); }

/* ---- Buttons -------------------------------------------------------------- */
/* Canonical system (was builder-checklist-only; the .kX-add/-export/-danger
   modifiers in the module files layer size/colour on top of this base). */
.btn {
    height: var(--control-h);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 12px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--c-text-dim);
    background-color: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    white-space: nowrap;
    transition: color .12s, border-color .12s, background-color .12s, filter .12s;
}
    .btn:not(:disabled):hover  { color: var(--c-accent); border-color: var(--c-accent); }
    .btn:not(:disabled):active { transform: translateY(1px); }
    .btn:disabled,
    .btn.is-disabled { opacity: .5; cursor: not-allowed; }
    .btn.is-disabled { pointer-events: none; }
    .btn.is-loading  { cursor: progress; pointer-events: none; }

    /* Filled variants - solid fill, white label, darker shade on hover */
    .btn-primary { background-color: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-primary); }
    .btn-primary:not(:disabled):hover { background-color: var(--c-primary-hover); border-color: var(--c-primary-hover); color: var(--c-on-primary); }
    .btn-success { background-color: var(--c-success); border-color: var(--c-success); color: var(--c-on-primary); }
    .btn-success:not(:disabled):hover { background-color: var(--c-success-ink); border-color: var(--c-success-ink); color: var(--c-on-primary); }
    .btn-danger  { background-color: var(--c-danger); border-color: var(--c-danger); color: var(--c-on-primary); }
    .btn-danger:not(:disabled):hover  { background-color: var(--c-danger-ink); border-color: var(--c-danger-ink); color: var(--c-on-primary); }

    /* Ghost = the default outline look, spelled out for clarity */
    .btn-ghost { background-color: var(--c-surface); color: var(--c-text-dim); border-color: var(--c-border); }
    .btn-ghost:not(:disabled):hover { color: var(--c-accent); border-color: var(--c-accent); background-color: var(--c-surface); }

    /* Canonical danger-ghost - supersedes per-module .kdev/.kemp/.khr/.kveh-danger */
    .btn-ghost.is-danger { color: var(--c-danger); border-color: var(--c-danger-outline); }
    .btn-ghost.is-danger:not(:disabled):hover { background-color: var(--c-danger-tint); border-color: var(--c-danger); color: var(--c-danger-ink); }

    /* Sizes (module files spot-override .btn height to 26/28px in dense rows) */
    .btn-sm { height: var(--control-h-sm); padding: 0 10px; font-size: 11.5px; }
    .btn-xs { height: 26px; padding: 0 10px; font-size: 11px; }
    .btn-block { width: 100%; }

/* ---- Icon buttons (square, was re-invented per module: .kjr-iconbtn,
        .khr-tl-btn, .kanban-*-close, .btn-icon-remove, …) ------------------- */
.ds-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--control-h);
    height: var(--control-h);
    flex-shrink: 0;
    color: var(--c-text-dim);
    background-color: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: color .12s, border-color .12s, background-color .12s;
}
    .ds-icon-btn:hover { color: var(--c-accent); border-color: var(--c-accent); }
    .ds-icon-btn--sm { width: 26px; height: 26px; }
    .ds-icon-btn--plain { border-color: transparent; background: transparent; }
    .ds-icon-btn--plain:hover { background-color: var(--c-surface-2); border-color: transparent; color: var(--c-text); }
    .ds-icon-btn.is-danger { color: var(--c-danger); }
    .ds-icon-btn.is-danger:hover { color: var(--c-danger-ink); border-color: var(--c-danger); background-color: var(--c-danger-tint); }

/* ---- Form controls (inputs, selects, textareas, labels, fields) ----------- */
/* Was: .kX-search / .kX-form-input / .kX-form-select / .kX-form-textarea /
        .input-text / .kjr-select … all the same 32px + accent focus-ring. */
.ds-input,
.ds-select,
.ds-textarea {
    width: 100%;
    height: var(--control-h);
    padding: 0 11px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--c-text);
    background-color: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    outline: none;
}
    .ds-select { cursor: pointer; }
    .ds-textarea {
        height: auto;
        min-height: 64px;
        padding: 9px 11px;
        font-weight: 400;
        line-height: 1.4;
        resize: vertical;
    }
    .ds-input:focus,
    .ds-select:focus,
    .ds-textarea:focus { border-color: var(--c-accent); box-shadow: var(--c-focus-ring); }
    .ds-input::placeholder,
    .ds-textarea::placeholder { color: var(--c-text-faint); font-weight: 400; }
    .ds-input.is-error,
    .ds-select.is-error,
    .ds-textarea.is-error { border-color: var(--c-danger); color: var(--c-danger); }
    .ds-input[readonly],
    .ds-input.is-readonly { background-color: var(--c-bg); color: var(--c-text-faint); cursor: default; }
/* Label + helper text */
.ds-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--c-text-dim); }
.ds-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ds-field-hint  { font-size: 11.5px; line-height: 1.45; color: var(--c-text-dim); }
.ds-field-error { font-size: 12px; font-weight: 600; color: var(--c-danger-ink); }

/* ---- Count chip (was .kdev-chip / .kemp-chip / .kveh-chip / .khr-chip) ----- */
.ds-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 5px 11px;
    background-color: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-xs);
    box-shadow: inset 3px 0 0 var(--c-border-strong);   /* colour-coded left bar */
    font-family: inherit;
    cursor: default;
}
    button.ds-chip { transition: border-color .12s, background-color .12s; cursor: pointer; }
    button.ds-chip:hover { border-color: var(--c-accent); }    .ds-chip--warning { box-shadow: inset 3px 0 0 var(--c-warning); }    .ds-chip-num  { font-size: 13px; font-weight: 700; color: var(--c-text); }
    .ds-chip-text { font-size: 11px; font-weight: 600; color: var(--c-text-dim); }

/* ---- Badge / pill / tag (tinted status label) ----------------------------- */
/* Merges .cbuild-badge, .kemp/kveh/khr-pill, .khr-op/-tag/-vio-rule, .kjr-chip,
   .kanban-*-status/-tag, .rule-error-pill … into one intent-tinted label. */
.ds-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
    background-color: var(--c-hairline);
    color: var(--c-text-dim);
}
    .ds-badge--pill { border-radius: var(--radius-pill); }
    .ds-badge--sm   { padding: 2px 7px; font-size: 9.5px; letter-spacing: .03em; }
    .ds-badge--info    { background-color: var(--c-info-tint);    color: var(--c-info); }
    .ds-badge--success { background-color: var(--c-success-tint); color: var(--c-success-ink); }
    .ds-badge--neutral { background-color: var(--c-surface-2);    color: var(--c-text-dim); }
    .ds-badge--danger  { background-color: var(--c-danger-tint);  color: var(--c-danger-ink); }

/* ---- Skeleton shimmer + spinner (was 6× .kX-skel, 5× .kX-spinner) --------- */
.ds-skeleton {
    display: inline-block;
    height: 12px;
    max-width: 100%;
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--c-surface-2) 25%, var(--c-border) 37%, var(--c-surface-2) 63%);
    background-size: 400% 100%;
    animation: ds-shimmer 1.2s ease infinite;
}
.ds-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--c-border);
    border-top-color: var(--c-accent);
    border-radius: 50%;
    animation: ds-spin .7s linear infinite;
}
/* ---- Progress meter (was .kanban-strip-progress-bar) ---------------------- */
.ds-progress { flex: 1 1 auto; height: 4px; border-radius: var(--radius-pill); background-color: var(--c-hairline); overflow: hidden; }
.ds-progress-fill { height: 100%; background-color: var(--c-success); transition: width .3s; }

/* ---- Segmented control (was .kemp-seg / .khr-seg / .kjr-seg, byte-identical) */
.ds-seg { display: inline-flex; padding: 3px; background-color: var(--c-surface-2); border-radius: 9px; gap: 2px; }
    .ds-seg-option {
        border: none;
        background: transparent;
        padding: 5px 12px;
        border-radius: 7px;
        font-family: inherit;
        font-size: 12px;
        font-weight: 600;
        color: var(--c-text-dim);
        cursor: pointer;
        white-space: nowrap;
        transition: background-color .12s, color .12s, box-shadow .12s;
    }
    .ds-seg-option:hover { color: var(--c-text); }
    .ds-seg-option.is-active { background-color: var(--c-surface); color: var(--c-accent); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
    .ds-seg-count {
        display: inline-block;
        margin-left: 6px;
        min-width: 18px;
        padding: 1px 5px;
        border-radius: var(--radius-xs);
        background-color: var(--c-primary-soft);
        color: var(--c-accent);
        font-size: 10px;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        text-align: center;
    }
    .ds-seg-count:empty { display: none; }

/* ---- Toggle switch (was .kemp/.kveh-toggle, .manager-toggle, .kanban-seg-toggle) */
.ds-switch { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none; }
    .ds-switch input { position: absolute; width: 0; height: 0; opacity: 0; }   /* hidden but focusable */
    .ds-switch-track {
        position: relative;
        width: 30px;
        height: 17px;
        flex-shrink: 0;
        background-color: var(--c-border);
        border-radius: var(--radius-pill);
        transition: background-color .15s ease;
    }
    .ds-switch-track::after {
        content: '';
        position: absolute;
        top: 2px;
        left: 2px;
        width: 13px;
        height: 13px;
        border-radius: 50%;
        background-color: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
        transition: left .15s ease;
    }
    .ds-switch input:checked + .ds-switch-track { background-color: var(--c-accent); }
    .ds-switch input:checked + .ds-switch-track::after { left: 15px; }
    .ds-switch input:focus-visible + .ds-switch-track { box-shadow: var(--c-focus-ring); }
    .ds-switch:has(input:disabled) { opacity: .45; cursor: default; }
    .ds-switch-text { font-size: 12px; font-weight: 600; color: var(--c-text-dim); }

/* ---- Avatar (was .kjr-emp-avatar + 3× .kanban-*-avatar) ------------------- */
.ds-avatar {
    position: relative;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background-color: var(--c-info-tint);
    border: 1px solid var(--c-border);
    color: var(--c-primary);
    font-size: 12px;
    font-weight: 700;
}
    .ds-avatar--sm { width: 30px; height: 30px; }    .ds-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---- Card & panel shells -------------------------------------------------- */
/* .ds-card = the white/border/radius container behind .khr-group, .khr-vio,
   .kjr-emp, .kdev-card, every *-tablewrap. */
.ds-card {
    background-color: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
/* ---- Dialog / modal ------------------------------------------------------- */
/* Base was builder-checklist-only; hr/journey/employees/vehicles all layer
   `.dialog-card.kX-dialog` width overrides on it, so this is its real home. */
.dialog-backdrop {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-scrim);
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
    cursor: default;
    user-select: none;
}
    .dialog-backdrop.is-open { opacity: 1; visibility: visible; }
    .dialog-card:focus { outline: none; }   /* the card only holds focus, it is not a control */
.dialog-card {
    width: min(640px, 92vw);
    max-height: 80vh;      /* fallback for browsers without dvh */
    max-height: 85dvh;
    display: flex;
    flex-direction: column;
    background-color: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-modal);
    overflow: hidden;
    animation: ds-pop .2s ease;
}
    .dialog-card.ds-holdon { animation: ds-holdon .3s ease; }
    .dialog-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 18px;
        background: var(--c-surface-2);
        border-bottom: 1px solid var(--c-surface-2);
        flex-shrink: 0;
    }
    .dialog-title { font-size: 13px; font-weight: 700; color: var(--c-text); text-transform: uppercase; letter-spacing: .04em; }
    .dialog-body {
        flex: 1 1 auto;
        min-height: 0;
        padding: 16px 18px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 10px;
        color: var(--c-text);
        font-size: 12px;
    }
    /* The body is the ONE scroller, so its children must never shrink: a child
       with overflow != visible (kjb-weeks, kjr-tablewrap) loses the
       min-height:auto floor of flex items and gets silently CLIPPED to fit
       instead of overflowing the body - no scrollbar, rows just gone
       (verified headless 2026-08-04, weekly bank close with weeks expanded). */
    .dialog-body > * {
        flex-shrink: 0;
    }
    .dialog-footer {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        padding: 12px 18px;
        background: var(--c-bg);
        border-top: 1px solid var(--c-surface-2);
    }

/* ---- Dropdown / popover menu (was .kjr-menu, .kjr-picker-panel,
        .khr-combo-list, .kveh-suggest - one floating-panel recipe) ---------- */
/* ---- Empty state + inline messages ---------------------------------------- */
/* Hero empty state (was .kdev/.kemp/.khr/.kjr/.kveh-empty, near-identical). */
.ds-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 44px 20px;
    text-align: center;
    animation: ds-in .35s ease;
}
    .ds-empty-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 84px;
        height: 84px;
        margin-bottom: 4px;
        border-radius: 50%;
        background-color: var(--c-surface-2);
        color: var(--c-accent);
    }
    .ds-empty-title { font-size: 16px; font-weight: 600; color: var(--c-text); }
    .ds-empty-text  { max-width: 430px; font-size: 12.5px; line-height: 1.5; color: var(--c-text-dim); }
/* Lighter filtered-empty line (was .kemp-noresults / .kveh-noresults) */
.ds-noresults { padding: 34px 16px; text-align: center; font-size: 13px; font-weight: 600; color: var(--c-text-dim); }
/* Inline status line (was .kdev/.kemp/.kjr/.kveh-msg) */
.ds-msg { padding: 26px 0; text-align: center; font-size: 13px; font-weight: 600; color: var(--c-text-dim); }
    .ds-msg--error { color: var(--c-danger-ink); }

/* ---- Alert / callout strip (was .kdev-state-msg, .kanban-ai, .khr-dlg-notice,
        .dialog-list-item, .kveh-ai-note) ----------------------------------- */
.ds-alert {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: var(--radius-md);
    background-color: var(--c-surface-2);
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--c-text);
}    .ds-alert--danger  { background-color: var(--c-danger-tint);  border-color: var(--c-danger-border);  color: var(--c-danger-ink); }
/* ---- Toast stack (was .kemp-notice / .khr-notice / .kveh-notice, identical) */
.ds-toasts {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 3000;                        /* above dialogs */
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: min(360px, calc(100vw - 28px));
}
    .ds-toast {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 11px 12px 11px 14px;
        background-color: var(--c-danger-ink);   /* default flavour = error */
        color: #fff;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-toast);
        font-size: 12.5px;
        font-weight: 600;
        line-height: 1.4;
        animation: ds-in .2s ease;
        transition: opacity .18s ease, transform .18s ease;
    }    .ds-toast.is-info    { background-color: var(--c-info-ink); }   /* neutral notice, not an error */
    .ds-toast.is-leaving { opacity: 0; transform: translateY(-4px); }
    .ds-toast-text { flex: 1 1 auto; }
    .ds-toast-close { flex-shrink: 0; padding: 0 2px; border: none; background: transparent; color: #fff; font-size: 17px; line-height: 1; cursor: pointer; opacity: .75; }
    .ds-toast-close:hover { opacity: 1; }

/* ---- Inline confirmation toast (createToast) - one centered pill that fades in
        at the top of the viewport after a save. Distinct from the fixed top-right
        .ds-toasts error stack; colours match it (success/danger ink). ---------- */
.entries-toast {
    position: fixed;
    top: 14px;
    left: 50%;
    z-index: 2500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100vw - 28px);
    padding: 11px 14px;
    border-radius: var(--radius-lg);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
    box-shadow: var(--shadow-toast);
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-50%) translateY(-8px);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none;
}
    .entries-toast.is-shown   { opacity: 1; transform: translateX(-50%) translateY(0); }
    .entries-toast.is-success { background-color: var(--c-success-ink); }
    .entries-toast.is-fail    { background-color: var(--c-danger-ink); }
    .entries-toast-icon { display: inline-flex; flex-shrink: 0; }
    .entries-toast-text { overflow: hidden; text-overflow: ellipsis; }

/* ---- Reduced motion: drop the decorative entrance animations -------------- */
@media (prefers-reduced-motion: reduce) {
    .ds-empty, .ds-toast, .dialog-card { animation: none; }
    /* the blocked-dismissal cue must survive without motion: glow only, no scale */
    .dialog-card.ds-holdon { animation: ds-holdon-still .3s ease; }
    .entries-toast,
    .entries-toast.is-shown { transition-property: opacity; transform: translateX(-50%); }
}
/* ---- Map name tooltip: house pill for Leaflet layers (className: ds-map-tt) --
   Used by the live map and the references screen. Centered above the cursor
   (direction: 'top'), no default leaflet arrow; the optional -dot carries the
   layer's own color. Loads after leaflet.css, so equal-specificity rules win. */
.ds-map-tt {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    font-family: 'ADDLOG';
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text);
    background-color: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-pop);
    white-space: nowrap;
}
.ds-map-tt::before { display: none; }
.ds-map-tt-dot {
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}
/* stacked variant (stop puck): title, entry/exit pair, fence - <br> never breaks
   inside the flex pill, so multi-line tooltips stack .ds-map-tt-line rows instead */
.ds-map-tt.is-stack {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    border-radius: var(--radius-md);
    padding: 9px 12px;
}
    .ds-map-tt.is-stack .ds-map-tt-line { display: flex; align-items: center; gap: 6px; }
    .ds-map-tt-io { display: inline-flex; align-items: center; }
    .ds-map-tt-io.is-in  { color: var(--c-success-ink); }
    .ds-map-tt-io.is-out { color: var(--c-danger-ink); margin-left: 8px; }
    .ds-map-tt-sub {
        font-size: 12px;
        font-weight: 600;
        color: var(--c-text-dim);
        font-variant-numeric: tabular-nums;
    }

/* ---- Polygon / polyline editor handles (views/js/map/editable-polygon.js):
        vertex, midpoint insert handle, closable first vertex, selected vertex.
        Shared by the Referências and Roteiros screens. ---------------------- */
.epoly-vertex, .epoly-vertex-mid {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--c-surface);
    border: 2.5px solid var(--c-text);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    box-sizing: border-box;
}
.epoly-vertex-mid {
    opacity: 0.55;
    border-width: 2px;
}
.epoly-vertex.is-closable {
    border-color: var(--c-success);
    animation: ds-epoly-pulse 1.1s ease-in-out infinite;
}
.epoly-vertex.is-selected {
    border-color: var(--c-danger);
    background-color: var(--c-danger-tint);
}
@keyframes ds-epoly-pulse {
    0%, 100% { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); }
    50%      { box-shadow: 0 0 0 5px var(--c-success-wash), 0 1px 3px rgba(0, 0, 0, 0.35); }
}

@media (prefers-reduced-motion: reduce) { .epoly-vertex.is-closable { animation: none; } }

/* ---- Device battery indicator (util.js battHtml). Carries its own color so
        colored contexts (card state line, marker pill) never bleed in. ------ */
.ds-batt {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--c-text-muted);
}
    .ds-batt svg { display: block; flex-shrink: 0; }
    .ds-batt.is-warn   { color: var(--c-warning); }
    .ds-batt.is-danger { color: var(--c-danger-ink); font-weight: 700; }

/* ---- Leaflet layer-switcher, skinned to the house controls. The vendored
        leaflet.css ships without its sprite images (the url(images/layers.png)
        lines are commented out), so the collapsed toggle rendered as a blank
        square. Inline SVG = the app's stacked-layers line glyph; loads after
        leaflet.css, so same-specificity overrides win. ---------------------- */
.leaflet-control-layers {
    color: var(--c-text);
    border: 1px solid var(--c-hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-pop);
    font-family: 'ADDLOG', sans-serif;
}
.leaflet-control-layers-toggle {
    width: 34px;
    height: 34px;
    /* the toggle paints its own background INSIDE the rounded frame - without
       its own radius the square corners cover the container's */
    border-radius: calc(var(--radius-lg) - 1px);
    background-color: var(--c-surface);
    background-size: 19px 19px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2360646C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 7 12 3l8.5 4L12 11 3.5 7z'/%3E%3Cpath d='M3.5 12 12 16l8.5-4'/%3E%3Cpath d='M3.5 17 12 21l8.5-4'/%3E%3C/svg%3E");
}
.leaflet-control-layers-toggle:hover { background-color: var(--c-surface-2); }
/* touch keeps a finger-sized target (leaflet-touch default is 44px) */
.leaflet-touch .leaflet-control-layers-toggle {
    width: 40px;
    height: 40px;
    background-size: 21px 21px;
}
/* leaflet-touch ships a chunky 2px translucent border at higher specificity —
   the phone (this skin's main audience) must get the same hairline */
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
    border: 1px solid var(--c-hairline);
    background-clip: border-box;
}

/* zoom (+/−) bar: same surface, hairline and radius as the layer switcher —
   overflow clips the buttons to the rounded frame */
.leaflet-bar {
    border: 1px solid var(--c-hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-pop);
    overflow: hidden;
}
.leaflet-bar a {
    background-color: var(--c-surface);
    border-bottom: 1px solid var(--c-hairline);
    color: var(--c-text-dim);
    font-weight: 600;
}
.leaflet-bar a:hover { background-color: var(--c-surface-2); color: var(--c-text); }
.leaflet-control-layers-expanded {
    padding: 8px 12px;
    background-color: var(--c-surface);
}
.leaflet-control-layers label {
    display: flex;
    align-items: center;
    padding: 3px 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--c-text-dim);
    cursor: pointer;
}
/* Leaflet nests label > span(holder) > input + span(name) - only the holder
   becomes the flex row */
.leaflet-control-layers label > span {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
/* Leaflet writes the name as ' Nome' (leading space, preserved mid-line). As a
   block-level flex item the name starts its own line box, where leading
   white-space collapses - the flex gap becomes the ONLY spacing, every row
   lines up on the same text edge. */
.leaflet-control-layers label > span > span {
    display: block;
    min-width: 0;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.leaflet-control-layers input[type='radio'],
.leaflet-control-layers input[type='checkbox'] {
    /* the vendored .leaflet-control-layers-selector nudge (margin-top + top:1px)
       was built for the old inline layout - under flex centering it pushes the
       control below its text */
    margin: 0;
    position: static;
    flex: none;
    accent-color: var(--c-primary);
}
.leaflet-control-layers-separator {
    border-top: 1px solid var(--c-hairline);
    margin: 6px -4px;
}

/* ---- Lightbox (builder/lightbox.js): the login photo behind every avatar (board
        card, live-map rail row and popup, journey detail) and checklist photos.
        On document.body, above dialogs. Scrim darker than --c-scrim on purpose:
        a photo viewer wants a near-black ground. ----------------------------- */
.kanban-lightbox {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.8);
    opacity: 0;
    visibility: hidden;
    z-index: 1100;
    cursor: zoom-out;
}
    .kanban-lightbox.is-open { opacity: 1; visibility: visible; }
    .kanban-lightbox-img {
        max-width: 92vw;
        max-height: 90vh;
        object-fit: contain;
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-modal);
        background-color: var(--c-surface);
    }
    /* gallery: arrows between a checklist's photos + the AI reading captioned below */
    .kanban-lightbox-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        display: none;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.16);
        color: #fff;
        cursor: pointer;
    }
        .kanban-lightbox.has-nav .kanban-lightbox-nav { display: inline-flex; }
        .kanban-lightbox-nav:hover { background: rgba(255, 255, 255, 0.3); }
        .kanban-lightbox-nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
        .kanban-lightbox-nav.is-prev { left: 18px; }
        .kanban-lightbox-nav.is-next { right: 18px; }
    .kanban-lightbox-cap {
        position: absolute;
        left: 50%;
        bottom: 20px;
        transform: translateX(-50%);
        display: none;
        flex-direction: column;
        gap: 6px;
        max-width: min(92vw, 720px);
        padding: 8px 12px;
        border-radius: var(--radius-md);
        background: rgba(0, 0, 0, 0.64);
        color: #fff;
        font-size: 12px;
        cursor: default;
    }
        .kanban-lightbox-cap.is-on { display: flex; }
        .kanban-lightbox-cap-title { display: flex; align-items: baseline; gap: 12px; font-size: 13px; font-weight: 700; }
        .kanban-lightbox-cap-n { margin-left: auto; font-size: 11.5px; font-weight: 500; opacity: 0.75; white-space: nowrap; }
        .kanban-lightbox-cap-lines { display: flex; flex-wrap: wrap; gap: 4px 6px; }
        .kanban-lightbox-cap-line {
            padding: 1px 8px;
            border-radius: var(--radius-pill);
            background: rgba(255, 255, 255, 0.16);
            font-size: 11.5px;
            white-space: nowrap;
        }
@media (max-width: 760px) {
    .kanban-lightbox { padding: 10px; }   /* photos deserve the full screen */
    .kanban-lightbox-nav.is-prev { left: 6px; }
    .kanban-lightbox-nav.is-next { right: 6px; }
    .kanban-lightbox-cap { bottom: 10px; max-width: calc(100vw - 20px); }
}