/* ─────────────────────────────────────────────────────────────────────────────
   handl. DSM  —  Design System
   Brand tokens, layout, components, page-specific utilities
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Reset ──────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #0F172A;
    background: #F8FAFC;
    -webkit-font-smoothing: antialiased;
    /* Offset content below the fixed nav with padding on <body>, NOT a margin-top on
       .hl-main. A first-child top margin collapses through <body> all the way to <html>,
       where it's added to the document scroll height — giving every fill-the-viewport page
       a phantom nav-height of vertical scroll. Padding can't collapse, so this removes it. */
    padding-top: var(--nav-height);
}
input, select, textarea, button { font-family: inherit; font-size: inherit; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

/* ── Design tokens ──────────────────────────────────────────────────────────── */
:root {
    --navy:          #0F172A;
    --navy-light:    #1E293B;
    --accent:        #FFDD00;
    --accent-hover:  #E5C700;
    --blue:          #0F4C81;
    --blue-light:    #E8F0F8;
    --green:         #059669;
    --green-light:   #ECFDF5;
    --amber:         #D97706;
    --amber-light:   #FFFBEB;
    --red:           #DC2626;
    --red-light:     #FEF2F2;
    --grey:          #64748B;
    --grey-light:    #F1F5F9;
    --surface:       #FFFFFF;
    --surface-alt:   #F8FAFC;
    --border:        #E2E8F0;
    --border-light:  #F1F5F9;
    --text-primary:  #0F172A;
    --text-secondary:#475569;
    --text-muted:    #94A3B8;
    --radius-sm:     6px;
    --radius:        8px;
    --radius-lg:     12px;
    --radius-xl:     16px;
    --shadow-sm:     0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
    --shadow-md:     0 4px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04);
    --shadow-lg:     0 12px 32px rgba(15,23,42,.10), 0 4px 8px rgba(15,23,42,.05);
    --nav-height:    58px;
}

/* ── Navigation ─────────────────────────────────────────────────────────────── */
.hl-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--nav-height);
    background: var(--navy);
    display: flex;
    align-items: center;
    padding: 0 24px;
    gap: 32px;
    z-index: 100;
    border-bottom: 1px solid var(--navy-light);
}

.hl-nav__brand {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.hl-nav__mark {
    width: 30px;
    height: 30px;
    background: var(--accent);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 14px;
    color: var(--navy);
    line-height: 1;
}

.hl-nav__name {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 18px;
    color: #FFFFFF;
    letter-spacing: -0.3px;
}
.hl-nav__dot { color: var(--accent); }

.hl-nav__links {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
}

.hl-nav__link {
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    color: #94A3B8;
    transition: color .15s, background .15s;
}
.hl-nav__link:hover  { color: #FFFFFF; background: rgba(255,255,255,.06); }
.hl-nav__link.is-active { color: #FFFFFF; background: rgba(255,255,255,.10); }

/* ── Admin nav dropdown (MD) ─────────────────────────────────────────────────── */
.hl-nav__admin { position: relative; }
.hl-nav__admin-toggle { background: none; border: none; cursor: pointer; font-family: inherit; }
.hl-nav__admin-menu {
    position: absolute; top: 36px; left: 0; min-width: 210px; z-index: 200;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: 0 12px 32px rgba(15,23,42,.18); padding: 6px;
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    /* 11 Sep (Shaun: "hides too quick after you hover over admin then try go down"):
       closing waits .3s so the pointer can cross to the panel; opening is instant */
    transition: opacity .15s .3s, transform .15s .3s, visibility 0s .45s;
}
/* invisible bridge over the ~8px gap between the toggle and the panel — the pointer
   never leaves .hl-nav__admin while crossing, so :hover holds (only live while open) */
.hl-nav__admin-menu::before {
    content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px;
}
.hl-nav__admin:hover .hl-nav__admin-menu,
.hl-nav__admin.is-open .hl-nav__admin-menu {
    opacity: 1; visibility: visible; transform: translateY(0);
    transition-delay: 0s;
}
.hl-nav__admin-item {
    display: block; padding: 8px 12px; border-radius: var(--radius-sm);
    font-size: 13px; color: var(--text-primary); text-decoration: none; white-space: nowrap;
}
.hl-nav__admin-item:hover { background: var(--surface-alt); }

/* ── Admin flyout groups (hover a section → its items fly out to the right) ── */
.hl-nav__admin-group { position: relative; }
.hl-nav__admin-group-label {
    display: flex; justify-content: space-between; align-items: center; gap: 14px;
    padding: 8px 12px; border-radius: var(--radius-sm); cursor: default;
    font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap;
}
.hl-nav__admin-group-label::after {
    content: '›'; font-size: 14px; font-weight: 700; color: var(--text-muted);
}
.hl-nav__admin-group:hover > .hl-nav__admin-group-label { background: var(--surface-alt); }
.hl-nav__admin-flyout {
    position: absolute; top: -6px; left: 100%; min-width: 220px; z-index: 210;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: 0 12px 32px rgba(15,23,42,.18); padding: 6px; margin-left: 2px;
    opacity: 0; visibility: hidden; transform: translateX(-4px);
    transition: opacity .15s, transform .15s, visibility .15s;
}
.hl-nav__admin-group:hover > .hl-nav__admin-flyout {
    opacity: 1; visibility: visible; transform: translateX(0);
}

/* ── Admin MEGA-MENU (10 Sep, Shaun: nested flyouts got "hacky whacky") ────────
   Same markup; add .hl-nav__admin-menu--mega to the menu and every group becomes
   a column with its items always visible — no second-level hover. Anchored to
   the right edge because Admin sits at the right end of the nav.               */
.hl-nav__admin-menu--mega {
    left: auto; right: 0; min-width: 0;
    display: flex; align-items: flex-start; gap: 4px;
    padding: 12px 14px 14px;
}
.hl-nav__admin-menu--mega .hl-nav__admin-group { position: static; min-width: 176px; }
.hl-nav__admin-menu--mega .hl-nav__admin-group + .hl-nav__admin-group { border-left: 1px solid var(--border-light); padding-left: 4px; }
.hl-nav__admin-menu--mega .hl-nav__admin-group-label {
    padding: 4px 12px 6px; cursor: default;
    font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
}
.hl-nav__admin-menu--mega .hl-nav__admin-group-label::after { content: none; }
.hl-nav__admin-menu--mega .hl-nav__admin-group:hover > .hl-nav__admin-group-label { background: none; }
.hl-nav__admin-menu--mega .hl-nav__admin-flyout {
    position: static; min-width: 0; margin: 0; padding: 0; border: none; box-shadow: none; background: none;
    /* visibility must INHERIT (not 'visible'): a visible child inside the hidden panel
       still catches the mouse, so hovering the blank area under the nav opened Admin (11 Sep) */
    opacity: 1; visibility: inherit; transform: none; transition: none;
}
/* 11 Sep: the earlier pointer-events:none guard is gone — visibility:hidden already
   blocks the mouse, and the guard killed the bridge/close-delay above the instant the
   pointer left the toggle (the "disappears when you go down" complaint). */
.hl-nav__admin-menu--mega .hl-nav__admin-item { padding: 7px 12px; }

.hl-nav__user {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.hl-nav__username { font-size: 13px; color: #94A3B8; }

/* ── Main content area ──────────────────────────────────────────────────────── */
.hl-main {
    /* nav offset now comes from body's padding-top (a margin here collapses to <html>
       and creates a phantom nav-height of page scroll). */
    min-height: calc(100vh - var(--nav-height));
}

/* ── Page header ────────────────────────────────────────────────────────────── */
.hl-page-header {
    padding: 28px 32px 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}
.hl-page-header__title {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 24px;
    color: var(--text-primary);
    letter-spacing: -0.3px;
}
.hl-page-header__sub {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ── Recent jobs dropdown ───────────────────────────────────────────────────── */
.ce-recent-wrap {
    position: relative;
}
.ce-recent-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 280px;
    z-index: 200;
    padding-top: 6px;   /* visual gap lives here — mouse stays inside the wrapper */
}
.ce-recent-wrap:hover .ce-recent-dropdown { display: block; }
.ce-recent-item {
    display: block;
    padding: 10px 12px;
    border-radius: calc(var(--radius) - 2px);
    text-decoration: none;
    transition: background .1s;
    overflow: hidden;
}
.ce-recent-item:hover { background: var(--surface-alt); }

/* ── Buttons ────────────────────────────────────────────────────────────────── */
/* Global safety net (client test round 3, item 9 — "button still not fully
   clickable" reported a THIRD time; 14 Jul fixed .hl-btn specifically, and a
   later pass added defensive z-index to it too, but neither was a confirmed
   root cause and this keeps recurring, likely on a different button class or
   an inline-styled one each time (e.g. .sl-prod-btn, .ds-spot-btn, .bu-cell-btn,
   .drawer-ch-btn/.drawer-tp-btn are all rendered inside display:flex/grid rows
   without their own flex-shrink:0). Rather than chase one selector at a time
   again, apply the established root cause's fix to every <button> site-wide —
   a button that isn't inside a shrinking flex row is unaffected, so this is a
   no-op everywhere else. Not a substitute for a live-DOM repro if it recurs —
   I have no way to run the app from here to confirm this is the exact spot. */
button { flex-shrink: 0; }

.hl-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background .15s, opacity .15s, box-shadow .15s;
    white-space: nowrap;
    /* Every footer/action row on the site is `display:flex` with no flex-shrink
       set on its buttons, so a flex item could shrink narrower than its
       nowrap text — the label then visually overflows past the button's real
       (shrunk) box. Clicking the overflowing text looked like clicking the
       button but landed outside it, so only part of the button actually
       responded. Never shrink a button below its content. (14 Jul 2026) */
    flex-shrink: 0;
    /* Belt-and-suspenders (14 Jul 2026, still reported after the fix above):
       guarantee this element's own box is what receives the click, in case
       anything is ever stacked over part of it. */
    position: relative;
    z-index: 1;
}
.hl-btn--primary  { background: var(--accent); color: var(--navy); }
.hl-btn--primary:hover  { background: var(--accent-hover); }
.hl-btn--secondary { background: var(--grey-light); color: var(--text-primary); }
.hl-btn--secondary:hover { background: #E2E8F0; }
.hl-btn--ghost    { background: transparent; color: #94A3B8; border: 1px solid rgba(255,255,255,.12); }
/* Ghost hover was authored for the dark nav (white text on a translucent white bg). On the
   light content pages that made the label turn white and vanish. Default hover is now
   light-page-safe (dark text on light-grey); the original white hover is kept ONLY inside
   the dark nav. */
.hl-btn--ghost:hover { background: var(--grey-light); color: var(--text-primary); border-color: var(--border); }
.hl-nav .hl-btn--ghost:hover { background: rgba(255,255,255,.06); color: #FFFFFF; border-color: rgba(255,255,255,.12); }
.hl-btn--danger   { background: var(--red-light); color: var(--red); }
.hl-btn--danger:hover { background: #FEE2E2; }
.hl-btn--sm { padding: 5px 10px; font-size: 12px; }
.hl-btn--lg { padding: 10px 20px; font-size: 14px; }
.hl-btn:disabled { opacity: .45; cursor: not-allowed; }

/* ── Cards ──────────────────────────────────────────────────────────────────── */
.hl-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.hl-card__header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.hl-card__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}
.hl-card__body { padding: 20px; }

/* ── Status badges ──────────────────────────────────────────────────────────── */
.hl-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .2px;
    text-transform: uppercase;
    white-space: nowrap;   /* 15 Aug (Shaun): status pills never wrap ("AWAITING PO" broke to two lines in the CE list) */
}
.hl-badge--draft        { background: var(--grey-light);  color: var(--grey); }
.hl-badge--pending      { background: var(--amber-light); color: var(--amber); }
.hl-badge--approved     { background: var(--blue-light);  color: var(--blue); }
.hl-badge--po_received  { background: var(--green-light); color: var(--green); }
.hl-badge--invoiced     { background: #EDE9FE; color: #7C3AED; }
.hl-badge--live         { background: var(--green-light); color: var(--green); }
.hl-badge--expired      { background: var(--red-light);   color: var(--red); }
.hl-badge--closed       { background: var(--grey-light);  color: var(--text-muted); }
.hl-badge--cancelled    { background: var(--red-light);   color: var(--red); }

/* ── Cost-estimate list: quick-filter pills ───────────────────────────────────── */
.ce-pills { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 32px 16px; }
.ce-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--surface);
    color: var(--text-primary); font-size: 12px; font-weight: 600;
    cursor: pointer; transition: all .15s; white-space: nowrap;
}
.ce-pill__dot { width: 6px; height: 6px; border-radius: 50%; }
.ce-pill__count { font-size: 11px; font-weight: 700; opacity: .85; }
.ce-pill:hover { border-color: currentColor; }
.ce-pill.is-active { color: #fff; border-color: transparent; box-shadow: var(--shadow-sm); }
.ce-pill.is-active .ce-pill__dot { background: #fff !important; }
.ce-pill--amber.is-active { background: var(--amber); }
.ce-pill--green.is-active { background: var(--green); }
.ce-pill--red.is-active   { background: var(--red); }
.ce-pill--blue.is-active  { background: var(--blue); }

/* ── Status tab strip ─────────────────────────────────────────────────────────── */
.ce-tabs { display: inline-flex; gap: 4px; background: var(--grey-light); border-radius: var(--radius); padding: 3px; flex-wrap: wrap; }
.ce-tab {
    padding: 5px 12px; border: none; border-radius: var(--radius-sm); background: transparent;
    color: var(--text-secondary); font-size: 12px; font-weight: 500; cursor: pointer; transition: all .15s;
}
.ce-tab.is-active { background: var(--surface); color: var(--text-primary); box-shadow: var(--shadow-sm); }
.ce-tab__count { font-size: 10px; opacity: .6; margin-left: 3px; }

/* ── Row extras ───────────────────────────────────────────────────────────────── */
.ce-amend { display: block; font-size: 9px; font-weight: 700; color: #7C3AED; letter-spacing: .08em; margin-top: 2px; text-transform: uppercase; }
.ce-items { font-size: 11px; color: var(--text-muted); margin-left: 8px; }
.ce-substatus { font-size: 10px; font-weight: 500; color: var(--amber); margin-top: 3px; }
.ce-row { cursor: pointer; }
.ce-rowact {
    width: 28px; height: 28px; border-radius: var(--radius-sm); border: 1px solid var(--border);
    background: var(--surface); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    color: var(--text-muted); transition: all .12s;
}
.ce-rowact:hover { border-color: var(--red); color: var(--red); background: var(--red-light); }
.ce-chev { font-size: 16px; color: var(--text-muted); margin-left: 4px; }
.hl-table th.ce-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.hl-table th.ce-sort:hover { color: var(--text-primary); }
.ce-aegroup td { background: #F1F5F9; font-size: 12px; font-weight: 700; color: var(--text-primary); text-transform: uppercase; letter-spacing: .02em; padding: 10px 14px; }
.ce-aegroup__meta { margin-left: 10px; font-size: 11px; font-weight: 500; color: var(--text-muted); text-transform: none; letter-spacing: normal; }

/* ── Form controls ──────────────────────────────────────────────────────────── */
.hl-form-group { display: flex; flex-direction: column; gap: 5px; }
.hl-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); letter-spacing: .2px; text-transform: uppercase; }
.hl-input, .hl-select {
    height: 36px;
    width: 100%;
    box-sizing: border-box;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text-primary);
    font-size: 13px;
    transition: border-color .15s, box-shadow .15s;
    outline: none;
}
.hl-input:focus, .hl-select:focus {
    border-color: var(--navy);
    box-shadow: 0 0 0 3px rgba(15,23,42,.08);
}
.hl-select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; }
.hl-textarea { padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text-primary); font-size: 13px; resize: vertical; outline: none; transition: border-color .15s; }
.hl-textarea:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(15,23,42,.08); }

/* ── Table ──────────────────────────────────────────────────────────────────── */
.hl-table-wrap { overflow-x: auto; }
.hl-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.hl-table th {
    padding: 10px 16px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .4px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.hl-table td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-primary);
    vertical-align: middle;
}
.hl-table tbody tr:last-child td { border-bottom: none; }
.hl-table tbody tr { transition: background .1s; }
.hl-table tbody tr:hover { background: var(--surface-alt); }

/* ── Filter bar ─────────────────────────────────────────────────────────────── */
.hl-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 16px 32px;
}
.hl-search-wrap { position: relative; }
.hl-search-wrap svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.hl-search { height: 36px; padding: 0 10px 0 32px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); font-size: 13px; color: var(--text-primary); outline: none; width: 220px; transition: border-color .15s; }
.hl-search:focus { border-color: var(--navy); }
.hl-filter-select { height: 36px; padding: 0 28px 0 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); font-size: 13px; color: var(--text-primary); cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; outline: none; }

/* ── Channel chip ───────────────────────────────────────────────────────────── */
.hl-channel-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
}

/* ── Stat cards ─────────────────────────────────────────────────────────────── */
.hl-stats { display: flex; gap: 16px; padding: 20px 32px; flex-wrap: wrap; }
.hl-stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    min-width: 160px;
    flex: 1;
}
.hl-stat__label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px; }
.hl-stat__value { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 22px; color: var(--text-primary); }
.hl-stat__value--accent { color: var(--blue); }

/* ── Empty state ────────────────────────────────────────────────────────────── */
.hl-empty {
    text-align: center;
    padding: 64px 32px;
    color: var(--text-muted);
}
.hl-empty__icon { margin: 0 auto 16px; opacity: .4; }
.hl-empty__title { font-size: 15px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.hl-empty__body  { font-size: 13px; }

/* ── Cost Estimate Builder ──────────────────────────────────────────────────── */
.ce-builder {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
    padding: 24px 32px 40px;
    align-items: start;
}
@media (max-width: 1100px) { .ce-builder { grid-template-columns: 1fr; } }

.ce-builder__main { display: flex; flex-direction: column; gap: 20px; }
.ce-builder__sidebar { position: sticky; top: calc(var(--nav-height) + 24px); display: flex; flex-direction: column; gap: 16px; }

/* Job meta section */
.ce-meta {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.ce-meta__header {
    padding: 14px 20px;
    background: var(--navy);
    display: flex;
    align-items: center;
    gap: 10px;
}
.ce-meta__header-title { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 14px; color: #FFFFFF; }
.ce-meta__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 20px; }
.ce-meta__fields--3 { grid-template-columns: 1fr 1fr 1fr; }
.ce-meta__value {
    font-size: 14px;
    color: var(--text);
    padding: 8px 0 4px;
    border-bottom: 1px solid var(--border);
    min-height: 34px;
}

/* Channel selector */
.ce-channels__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    padding: 16px 20px;
}
@media (max-width: 900px) { .ce-channels__grid { grid-template-columns: repeat(3, 1fr); } }

.ce-channel-btn {
    padding: 14px 10px;
    border-radius: var(--radius);
    border: 2px solid var(--border);
    background: var(--surface);
    cursor: pointer;
    text-align: center;
    transition: border-color .15s, background .15s, transform .1s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.ce-channel-btn:hover { border-color: #CBD5E1; background: var(--surface-alt); transform: translateY(-1px); }
.ce-channel-btn.is-selected { border-color: var(--navy); background: #F8FAFF; }
.ce-channel-btn__abbr {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    color: #FFFFFF;
}
.ce-channel-btn__name { font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.ce-channel-btn.is-selected .ce-channel-btn__name { color: var(--navy); }

/* Touchpoint rows */
.ce-touchpoints { display: flex; flex-direction: column; }
.ce-tp-group { border-bottom: 1px solid var(--border-light); }
.ce-tp-group:last-child { border-bottom: none; }

.ce-tp-group__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    cursor: pointer;
    user-select: none;
    transition: background .1s;
}
.ce-tp-group__header:hover { background: var(--surface-alt); }
.ce-tp-group__title { font-size: 13px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
.ce-tp-group__count { font-size: 11px; font-weight: 600; color: var(--text-muted); background: var(--grey-light); padding: 2px 7px; border-radius: 10px; }

.ce-tp-row {
    display: grid;
    grid-template-columns: 32px 1fr auto auto auto;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    border-top: 1px solid var(--border-light);
    background: #FAFBFC;
    transition: background .1s;
}
.ce-tp-row:hover { background: #F4F6F8; }
.ce-tp-row__check { width: 18px; height: 18px; border-radius: 4px; border: 2px solid var(--border); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color .15s, background .15s; flex-shrink: 0; }
.ce-tp-row__check.is-checked { border-color: var(--navy); background: var(--navy); }
.ce-tp-row__name { font-size: 13px; color: var(--text-primary); }
.ce-tp-row__rate { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.ce-tp-row__qty { display: flex; align-items: center; gap: 6px; }
.ce-tp-row__qty-input { width: 60px; height: 30px; text-align: center; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; outline: none; }
.ce-tp-row__qty-input:focus { border-color: var(--navy); }
.ce-tp-row__subtotal { font-size: 13px; font-weight: 600; color: var(--text-primary); min-width: 90px; text-align: right; }

/* Summary sidebar */
.ce-summary { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.ce-summary__header { padding: 14px 20px; background: var(--navy); }
.ce-summary__header-title { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 14px; color: #FFFFFF; }
.ce-summary__body { padding: 0; }
.ce-summary__line { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; border-bottom: 1px solid var(--border-light); font-size: 13px; color: var(--text-secondary); }
.ce-summary__line:last-of-type { border-bottom: none; }
.ce-summary__line-label { font-weight: 500; }
.ce-summary__line-value { font-weight: 600; color: var(--text-primary); }
.ce-summary__total { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; background: var(--navy); }
.ce-summary__total-label { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.7); }
.ce-summary__total-value { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 22px; color: var(--accent); }
.ce-summary__actions { padding: 16px 20px; display: flex; flex-direction: column; gap: 8px; }

/* Production section */
.ce-production { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.ce-prod-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-alt); }
.ce-prod-row__name { font-size: 13px; color: var(--text-primary); font-weight: 500; }
.ce-prod-row__right { display: flex; align-items: center; gap: 8px; }
.ce-prod-row__input { width: 90px; height: 30px; text-align: right; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; padding: 0 8px; outline: none; }
.ce-prod-row__input:focus { border-color: var(--navy); }

/* Markup row */
.ce-markup-row { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--border-light); }
.ce-markup-row__label { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .3px; flex: 1; }
.ce-markup-row__input { width: 70px; height: 30px; text-align: center; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; outline: none; }

/* DCI toggle */
.ce-dci-row { display: flex; align-items: center; gap: 10px; padding: 10px 20px; border-top: 1px solid var(--border-light); }
.ce-toggle { position: relative; width: 36px; height: 20px; flex-shrink: 0; }
.ce-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.ce-toggle__track { position: absolute; inset: 0; background: var(--border); border-radius: 20px; cursor: pointer; transition: background .2s; }
.ce-toggle input:checked + .ce-toggle__track { background: var(--green); }
.ce-toggle__thumb { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; background: white; border-radius: 50%; transition: transform .2s; pointer-events: none; }
.ce-toggle input:checked ~ .ce-toggle__thumb { transform: translateX(16px); }

/* Animations */
@keyframes fadeIn  { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: translateX(0); } }
@keyframes ce-spin { to { transform: rotate(360deg); } }
.anim-fade  { animation: fadeIn  .2s ease both; }
.anim-slide { animation: slideIn .15s ease both; }

/* ── New CE header modal ─────────────────────────────────────────────────────── */
.ce-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(15,23,42,0.45);
    z-index: 300;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.ce-modal-overlay.is-hidden { display: none; }

.ce-modal {
    background: var(--surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: 32px;
    width: 100%; max-width: 440px;
    animation: fadeIn .18s ease both;
}
.ce-modal__title {
    font-family: 'Outfit', sans-serif;
    font-size: 20px; font-weight: 700; color: var(--text-primary);
    letter-spacing: -0.01em;
}
.ce-modal__sub {
    font-size: 13px; color: var(--text-muted); margin-top: 6px; line-height: 1.5;
}
.ce-modal__actions {
    display: flex; justify-content: flex-end; gap: 10px; margin-top: 28px;
}

/* ── Add Item Drawer ─────────────────────────────────────────────────────────── */
.drawer-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 200;
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease;
}
.drawer-overlay.is-open { opacity: 1; pointer-events: all; }

.item-drawer {
    position: fixed; top: 0; right: 0; height: 100%;
    width: 560px; max-width: 95vw;
    background: var(--surface);
    z-index: 201;
    transform: translateX(100%);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    display: flex; flex-direction: column;
    box-shadow: var(--shadow-lg);
    border-left: 1px solid var(--border);
}
.item-drawer.is-open { transform: translateX(0); }

.drawer-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    flex-shrink: 0;
    background: var(--surface);
}
.drawer-header__title {
    font-family: 'Outfit', sans-serif;
    font-size: 22px; font-weight: 700; letter-spacing: -0.01em;
    color: var(--text-primary);
}
.drawer-header__sub {
    font-size: 11px; color: var(--text-muted);
    margin-top: 4px; letter-spacing: .04em; text-transform: uppercase; font-weight: 600;
}
.drawer-close {
    width: 32px; height: 32px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--surface);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    color: var(--text-secondary); transition: all .12s; flex-shrink: 0;
}
.drawer-close:hover { border-color: var(--text-primary); color: var(--text-primary); }

.drawer-steps {
    padding: 12px 24px;
    border-bottom: 1px solid var(--border-light);
    background: var(--surface-alt);
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    flex-shrink: 0;
}
.drawer-step-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 12px; border-radius: 999px; border: none;
    font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    transition: all .12s;
}
.drawer-step-btn--current  { background: var(--navy); color: #fff; cursor: default; }
.drawer-step-btn--done     { background: var(--green-light); color: var(--green); cursor: pointer; }
.drawer-step-btn--upcoming { background: transparent; color: var(--text-muted); cursor: default; }
.drawer-step-num {
    width: 16px; height: 16px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 700; font-family: 'Outfit', sans-serif; flex-shrink: 0;
}
.drawer-step-num--current  { background: var(--accent); color: var(--navy); }
.drawer-step-num--done     { background: var(--green); color: #fff; }
.drawer-step-num--upcoming { background: var(--grey-light); color: var(--text-muted); }
.drawer-sep { width: 12px; height: 1px; background: var(--border); flex-shrink: 0; }

/* Completed steps show WHAT was chosen under the step label (Shaun, 24 Jul) */
.drawer-step-text {
    display: inline-flex; flex-direction: column; align-items: flex-start;
    line-height: 1.25; text-align: left;
}
.drawer-step-sub {
    font-size: 9px; font-weight: 600; letter-spacing: 0; text-transform: none;
    color: var(--green); opacity: .85;
    max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.drawer-body { flex: 1; overflow-y: auto; padding: 20px 24px; }

.drawer-footer {
    padding: 14px 24px;
    border-top: 1px solid var(--border);
    display: flex; justify-content: flex-end; gap: 10px;
    flex-shrink: 0; background: var(--surface);
}

/* Step content helpers */
.drawer-step-title {
    font-size: 13px; font-weight: 700; font-family: 'Outfit', sans-serif;
    letter-spacing: .02em; color: var(--text-primary); margin-bottom: 4px;
}
.drawer-step-sub { font-size: 12px; color: var(--text-secondary); margin-bottom: 0; }
.drawer-field-label {
    display: block; font-size: 12px; font-weight: 600;
    color: var(--text-secondary); margin-bottom: 0;
}

/* Channel buttons inside drawer */
.drawer-ch-btn {
    padding: 14px 16px; border-radius: 10px;
    border: 2px solid var(--border); background: var(--surface);
    cursor: pointer; text-align: left; transition: all .15s; width: 100%;
}
.drawer-ch-btn.is-selected { /* border-color and background set inline via channel color */ }
.drawer-ch-btn__name {
    font-size: 13px; font-weight: 700; color: var(--text-primary);
    font-family: 'Outfit', sans-serif;
}
.drawer-ch-btn__desc { font-size: 11px; color: var(--text-secondary); margin-top: 6px; line-height: 1.4; }
.drawer-ch-btn__meta {
    font-size: 10px; color: var(--text-muted);
    margin-top: 4px; letter-spacing: .04em; text-transform: uppercase; font-weight: 600;
}

/* Touchpoint buttons inside drawer */
.drawer-tp-btn {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px; border-radius: var(--radius);
    border: 1px solid var(--border); background: var(--surface);
    cursor: pointer; transition: all .1s; text-align: left; width: 100%;
}
.drawer-tp-btn__name {
    font-size: 13px; font-weight: 600; color: var(--text-primary);
    font-family: 'Outfit', sans-serif;
}
.drawer-tp-btn__meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.drawer-tp-btn__rate {
    font-size: 14px; font-weight: 700; color: var(--text-primary);
    font-family: 'Outfit', sans-serif; flex-shrink: 0; margin-left: 12px;
}

/* Tier / bundle / month selection buttons */
.drawer-tier-btn, .drawer-qty-btn, .drawer-month-btn {
    padding: 10px 8px; border-radius: var(--radius-sm);
    border: 1.5px solid var(--border); background: var(--surface);
    cursor: pointer; text-align: center; transition: all .12s;
    font-size: 12px; font-weight: 600; color: var(--text-primary);
}
.drawer-tier-btn { padding: 12px 8px; }
.drawer-tier-btn.is-selected, .drawer-qty-btn.is-selected, .drawer-month-btn.is-selected {
    border-color: var(--navy); background: var(--navy); color: #fff;
}
.drawer-month-btn.is-range {
    border-color: var(--navy); background: color-mix(in srgb, var(--navy) 18%, transparent); color: var(--navy);
}
.ce-year-arrow {
    width: 28px; height: 28px; border-radius: 6px;
    border: 1.5px solid var(--border); background: var(--surface);
    cursor: pointer; font-size: 14px; color: var(--text-primary);
    display: flex; align-items: center; justify-content: center;
    transition: all .12s;
}
.ce-year-arrow:hover { border-color: var(--navy); color: var(--navy); }
.drawer-tier-btn:not(.is-selected):hover, .drawer-qty-btn:not(.is-selected):hover,
.drawer-month-btn:not(.is-selected):not(.is-range):hover {
    border-color: var(--navy); color: var(--navy);
}

/* Subtotal preview in step 3 */
.drawer-subtotal-preview {
    padding: 12px 16px;
    background: var(--navy);
    border-radius: var(--radius);
    color: var(--accent);
    margin-top: 4px;
}

/* ── Line Items Area ─────────────────────────────────────────────────────────── */
.line-items-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}
.line-items-header__title {
    font-family: 'Outfit', sans-serif; font-size: 13px;
    font-weight: 700; color: var(--text-primary);
}
.line-items-header__count {
    font-size: 11px; font-weight: 600; color: var(--text-muted);
    background: var(--grey-light); padding: 2px 8px; border-radius: 10px;
}
.line-items-empty {
    border: 2px dashed var(--border); border-radius: var(--radius-lg);
    padding: 40px 24px; text-align: center;
}

.line-item-row {
    display: grid;
    grid-template-columns: 32px 1fr auto auto;
    gap: 12px; align-items: center;
    padding: 12px 14px;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--border);
    margin-bottom: 6px;
    transition: border-color .1s;
}
.line-item-row:hover { border-color: #C2CDD9; }
.line-item-row__channel {
    width: 32px; height: 32px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 800; font-family: 'Outfit', sans-serif;
    color: #fff; flex-shrink: 0; letter-spacing: .02em;
}
.line-item-row__name {
    font-size: 13px; font-weight: 600; color: var(--text-primary);
}
.line-item-row__meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.line-item-row__notes {
    font-size: 11px; color: var(--text-secondary);
    margin-top: 3px; font-style: italic;
}
.line-item-row__subtotal {
    font-size: 14px; font-weight: 700; color: var(--text-primary);
    font-family: 'Outfit', sans-serif; text-align: right; white-space: nowrap;
}
.line-item-row__original {
    font-size: 11px; color: var(--text-muted);
    text-decoration: line-through; text-align: right;
}
.line-item-row__discount {
    font-size: 10px; font-weight: 600; color: var(--green);
    text-align: right; letter-spacing: .02em;
}
.line-item-row__action {
    width: 28px; height: 28px; border-radius: 6px;
    border: 1px solid var(--border); background: transparent;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    color: var(--text-muted); transition: all .12s; flex-shrink: 0;
}
.line-item-row__action:hover { border-color: var(--navy); color: var(--navy); background: var(--blue-light); }
.line-item-row__remove:hover { border-color: var(--red) !important; color: var(--red) !important; background: var(--red-light) !important; }

/* ── Idle timeout overlay ──────────────────────────────────────────────────── */
.idle-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    animation: fadeIn .2s ease;
}
.idle-overlay.is-hidden { display: none; }

.idle-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 40px 48px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 24px 64px rgba(15,23,42,.18);
    animation: slideUp .2s ease;
}
.idle-card__icon {
    font-size: 36px;
    margin-bottom: 16px;
    line-height: 1;
}
.idle-card__title {
    font-family: 'Outfit', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 12px;
}
.idle-card__body {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0 0 28px;
}
.idle-card__body strong {
    font-size: 20px;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    color: var(--text-primary);
    display: block;
    margin-top: 6px;
}
.idle-card__actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

/* ── Header icons + notification bell dropdown ─────────────────────────────────── */
.hl-nav__icon { transition: color .15s, background .15s; }
.hl-nav__icon:hover { color: #fff !important; background: rgba(255,255,255,.10); }

.nav-notify-dropdown {
    position: absolute; top: 42px; right: 0; width: 320px; z-index: 200;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: 0 12px 32px rgba(15,23,42,.18); overflow: hidden;
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity .15s, transform .15s, visibility .15s;
}
.nav-notify-wrap:hover .nav-notify-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-notify-head {
    padding: 10px 14px; font-size: 11px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border-light);
}
.nav-notify-list { max-height: 360px; overflow-y: auto; }
.nav-notify-item { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border-bottom: 1px solid var(--border-light); }
.nav-notify-item:hover { background: var(--surface-alt); }
.nav-notify-d { margin-top: 5px; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.nav-notify-msg { font-size: 12.5px; color: var(--text-primary); line-height: 1.4; }
.nav-notify-ago { display: block; font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.nav-notify-empty { padding: 18px 14px; font-size: 12px; color: var(--text-muted); text-align: center; }
.nav-notify-foot {
    display: block; padding: 10px 14px; text-align: center; font-size: 12px; font-weight: 600;
    color: var(--blue); background: var(--surface-alt); border-top: 1px solid var(--border-light);
}
.nav-notify-foot:hover { background: var(--blue-light); }

/* ── CE preview modal (Preview & send) ─────────────────────────────────────────── */
.ce-preview-overlay {
    display: none; position: fixed; inset: 0; z-index: 1000;
    background: rgba(15,23,42,.55); align-items: flex-start; justify-content: center;
    padding: 30px 16px; overflow-y: auto;
}
.ce-preview-modal {
    background: var(--surface); border-radius: 14px; width: 100%; max-width: 920px;
    box-shadow: 0 24px 60px rgba(0,0,0,.3); display: flex; flex-direction: column;
    max-height: calc(100vh - 60px);
}
.ce-preview-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 18px 24px; border-bottom: 1px solid var(--border);
}
.ce-preview-x {
    width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--surface); cursor: pointer; font-size: 14px; color: var(--text-secondary);
}
.ce-preview-x:hover { background: var(--surface-alt); }
.ce-preview-scroll { overflow-y: auto; padding: 22px; background: var(--surface-alt); }
.ce-preview-foot {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 14px 24px; border-top: 1px solid var(--border); background: var(--surface);
    border-radius: 0 0 14px 14px;
}

/* ── Burst booking tooltip (custom hover popover) ──────────────────────────────── */
.bu-tip {
    position: fixed; z-index: 1100; pointer-events: none;
    background: var(--navy); color: #fff; border-radius: 9px;
    padding: 9px 11px; font-size: 11.5px; line-height: 1.45; max-width: 340px;
    box-shadow: 0 10px 28px rgba(15,23,42,.32);
    animation: bu-tip-in .12s ease-out;
}
@keyframes bu-tip-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
.bu-tip::after {
    content: ''; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%) rotate(45deg);
    width: 9px; height: 9px; background: var(--navy);
}
.bu-tip.bu-tip--below::after { bottom: auto; top: -5px; }
.bu-tip-head {
    font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--accent); margin-bottom: 5px;
}
.bu-tip-row { display: flex; gap: 7px; align-items: flex-start; padding: 2px 0; }
.bu-tip-row + .bu-tip-row { border-top: 1px solid rgba(255,255,255,.10); }
.bu-tip-dot { margin-top: 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }

/* ── SL store-picker toolbar buttons ───────────────────────────────────────────── */
.sl-mini-btn {
    padding: 5px 11px; border-radius: 6px; border: 1px solid var(--border);
    background: var(--surface); font-size: 11px; font-weight: 600; cursor: pointer;
    color: var(--text-secondary);
}
.sl-mini-btn:hover { border-color: var(--navy); color: var(--navy); }
.sl-mini-btn--accent { background: var(--navy); color: #fff; border-color: var(--navy); }
.sl-mini-btn--accent:hover { background: var(--navy-light); color: var(--accent); }
.sl-link-btn {
    background: none; border: none; cursor: pointer; font-size: 11px; font-weight: 600;
    color: var(--text-muted); padding: 4px 6px;
}
.sl-link-btn:hover { color: var(--blue); }
.sl-slot-inc:hover, .sl-slot-dec:hover { border-color: var(--navy) !important; color: var(--navy) !important; }

/* Print: only the client sheet */
@media print {
    body * { visibility: hidden !important; }
    #cePreviewSheet, #cePreviewSheet * { visibility: visible !important; }
    #cePreviewSheet { position: absolute; left: 0; top: 0; width: 100%; box-shadow: none; }
    .ce-preview-head, .ce-preview-foot, .ce-preview-x { display: none !important; }
}

/* ── Site-wide toast (dsmToast) — fixed, out of flow, no layout shift ─────────── */
#dsm-toast-host { position: fixed; bottom: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.dsm-toast { min-width: 200px; max-width: 360px; padding: 11px 15px; border-radius: 9px; font-size: 13px; font-weight: 600; color: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.18); opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; }
.dsm-toast--in { opacity: 1; transform: none; }
.dsm-toast--ok { background: #059669; }
.dsm-toast--err { background: #DC2626; }

/* ── Environment badge (5 Sep 2026 go-live) — never rendered on Live ──────── */
.hl-env-badge {
    margin-left: 10px;
    padding: 3px 9px;
    border-radius: 999px;
    background: #F59E0B;
    color: #1F1300;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}
.hl-env-badge--danger { background: #DC2626; color: #fff; }

/* ── Connection watchdog pill (10 Sep, Shaun) — lives in the nav user cluster ── */
.hl-net-badge {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 11px; border-radius: 999px; white-space: nowrap;
    font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 11px; letter-spacing: .03em;
    flex-shrink: 0;
}
.hl-net-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.hl-net-badge--down { background: #DC2626; color: #fff; animation: hl-net-pulse 1.2s ease-in-out infinite; }
.hl-net-badge--up   { background: #059669; color: #fff; }
@keyframes hl-net-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,.55); } 50% { box-shadow: 0 0 0 7px rgba(220,38,38,0); } }
/* 14 Sep: system update strip (#sysUpdateBar) — last-15-minutes blink */
@keyframes sysUpdBlink { 0%, 100% { background: #FEE2E2; } 50% { background: #FECACA; } }
body.is-env-dev    .hl-nav { border-top: 4px solid #F59E0B; }
body.is-env-danger .hl-nav { border-top: 4px solid #DC2626; }
.hl-env-banner {
    background: #F59E0B;
    color: #1F1300;
    text-align: center;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 6px 12px;
}
.hl-env-banner--danger { background: #DC2626; color: #fff; }