/* ============================================================
   lots2do — Main Stylesheet
   UI: DM Sans | Tasks: JetBrains Mono | Palette: Monday.com
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;1,9..40,400&family=JetBrains+Mono:wght@400;600&display=swap');

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

:root {
    /* ── Brand ── */
    --l2d-sidebar-bg:   #16161A;
    --l2d-accent:       #0085FF;
    --l2d-accent-dark:  #0065CC;

    /* ── Section colours (7-slot cycle) ── */
    --l2d-section-1: #FF3B30;
    --l2d-section-2: #0085FF;
    --l2d-section-3: #00C875;
    --l2d-section-4: #9747FF;
    --l2d-section-5: #FF6D00;
    --l2d-section-6: #00C9C9;
    --l2d-section-7: var(--l2d-section-1);

    /* ── Surface ── */
    --l2d-bg:           #FFFFFF;
    --l2d-bg-subtle:    #F5F7FA;
    --l2d-border:       #E6E9EF;
    --l2d-border-muted: #E6E9EF;
    --l2d-border-hover: #C8D5E3;
    --l2d-selection:    #C5DEFF;

    /* ── Text ── */
    --l2d-text:         #1F2D3D;
    --l2d-text-muted:   #6B7A8D;
    --l2d-text-faint:   #A8B4C0;
    --l2d-text-dim:     #888888;
    --l2d-text-secondary: #6B7A8D;
    --l2d-text-tertiary:  #A8B4C0;

    /* ── Semantic: danger ── */
    --l2d-danger:           #dc2626;
    --l2d-danger-emphasis:  #a32d2d;
    --l2d-danger-light:     #FF6B6B;
    --l2d-danger-lighter:   #FFB3B3;
    --l2d-danger-bg:        #FFECEB;
    --l2d-danger-border:    #FFAAAA;
    --l2d-danger-text:      #CC2020;

    /* ── Semantic: success ── */
    --l2d-success:          #059669;
    --l2d-success-bg:       #E8F8ED;
    --l2d-success-border:   #A8DFB8;
    --l2d-success-text:     #1A7A3A;

    /* ── Semantic: warning / amber ── */
    --l2d-warning:          #FF9500;
    --l2d-amber:            #c8901a;
    --l2d-amber-dark:       #b45309;

    /* ── Semantic: done badge ── */
    --l2d-done-bg:          #EAF3DE;
    --l2d-done-fg:          #27500A;

    /* ── Semantic: notice / warm ── */
    --l2d-notice-bg:        #fdf8f0;
    --l2d-notice-border:    #e8d8b8;

    /* ── Semantic: contact danger ── */
    --l2d-contact-danger:   #c0392b;

    /* ── Pills / badges ── */
    --l2d-pill-blue-bg:   #E3F0FF;
    --l2d-pill-blue-fg:   #0060CC;
    --l2d-pill-red-bg:    #FFECEB;
    --l2d-pill-red-fg:    #CC2020;
    --l2d-pill-green-bg:  #E8F8ED;
    --l2d-pill-green-fg:  #1A7A3A;
    --l2d-pill-amber-bg:  #FFF3E0;
    --l2d-pill-amber-fg:  #CC5000;
    --l2d-pill-gray-bg:   #EEF0F3;
    --l2d-pill-gray-fg:   #4A5568;

    /* ── Typography ── */
    --l2d-font-ui:   'DM Sans', system-ui, -apple-system, sans-serif;
    --l2d-font-mono: 'JetBrains Mono', 'Courier New', Courier, monospace;

    /* ── Radius ── */
    --l2d-radius-sm:   6px;
    --l2d-radius-md:   10px;
    --l2d-radius-lg:   14px;
    --l2d-radius-xl:   20px;
    --l2d-radius-pill: 999px;

    /* ── Elevation ── */
    --l2d-shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --l2d-shadow-md: 0 4px 12px rgba(0,0,0,0.10);
    --l2d-shadow-lg: 0 8px 24px rgba(0,0,0,0.14);

  /* ── Aliases: word-order variants from the token migration ── */
  --l2d-bg-danger:       var(--l2d-danger-bg);
  --l2d-bg-success:      var(--l2d-success-bg);
  --l2d-bg-warm:         var(--l2d-notice-bg);
  --l2d-border-success:  var(--l2d-success-border);
  --l2d-border-warm:     var(--l2d-notice-border);
  --l2d-blue-selection:  var(--l2d-selection);
  --l2d-muted:           var(--l2d-text-muted);
  --l2d-text-danger:     var(--l2d-danger-text);
  --l2d-text-success:    var(--l2d-success-text);
}

/* ── Base ── */
.l2d-wrap {
    font-family: var(--l2d-font-ui);
    font-size: 14px;
    color: var(--l2d-text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
/* Monospace utility — use instead of inline font-family:'Courier New' */
.l2d-mono { font-family: var(--l2d-font-mono); }

/* ── Shell ── */
.l2d-shell { display: flex; min-height: 100vh; }

/* ── Sidebar ── */
.l2d-sidebar {
    width: 200px;
    flex-shrink: 0;
    background: var(--l2d-sidebar-bg);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    scrollbar-width: none;
}
.l2d-sidebar::-webkit-scrollbar,
.l2d-sidebar::-webkit-scrollbar { display: none; }

.l2d-sidebar-brand {
    padding: 20px 16px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.l2d-sidebar-name {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    line-height: 1.35;
    font-family: var(--l2d-font-ui);
}
.l2d-sidebar-org {
    font-size: 10px;
    color: rgba(255,255,255,0.35);
    margin-top: 2px;
    font-family: var(--l2d-font-mono);
}

.l2d-sidebar-nav { padding: 10px 0; flex: 1; }

.l2d-nav-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.3);
    padding: 10px 16px 3px;
    font-family: var(--l2d-font-ui);
}
.l2d-nav-item {
    display: block;
    padding: 7px 16px;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255,255,255,0.55);
    font-family: var(--l2d-font-ui);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s, background 0.15s;
}
.l2d-nav-item.active, .l2d-nav-item:hover,
.l2d-nav-item.active, .l2d-nav-item:hover {
    color: #fff;
    background: rgba(0,133,255,0.15);
}
.l2d-nav-section {
    display: block;
    padding: 5px 16px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.4);
    font-family: var(--l2d-font-mono);
    text-decoration: none;
    transition: color 0.15s;
}
.l2d-nav-section:hover { color: rgba(255,255,255,0.7); }

.l2d-sidebar-capture {
    margin: 12px;
    background: var(--l2d-accent);
    color: #fff;
    border: none;
    border-radius: var(--l2d-radius-lg);
    padding: 11px;
    font-size: 13px;
    font-weight: 700;
    font-family: var(--l2d-font-ui);
    cursor: pointer;
    width: calc(100% - 24px);
    text-align: center;
    display: block;
    text-decoration: none;
    transition: background 0.15s;
    box-shadow: 0 2px 8px rgba(0,133,255,0.35);
}
.l2d-sidebar-capture:hover { background: var(--l2d-accent-dark); }

.l2d-sort-select {
    font-family: var(--l2d-font-mono);
    font-size: 10px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--l2d-radius-sm);
    padding: 5px 8px;
    color: rgba(255,255,255,0.7);
    width: calc(100% - 28px);
    margin: 4px 14px;
    outline: none;
}

.l2d-bg-filter {
    display: block;
    padding: 5px 16px;
    font-size: 11px;
    color: rgba(255,255,255,0.45);
    font-family: var(--l2d-font-mono);
    cursor: pointer;
    border-left: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    text-decoration: none;
}
.l2d-bg-filter:hover { color: rgba(255,255,255,0.8); }
.l2d-bg-filter.active { color: #fff; border-left-color: var(--l2d-accent); font-weight: 600; }

/* ── Main ── */
.l2d-main {
    flex: 1;
    min-width: 0;
    padding: 20px 24px 48px;
    background: var(--l2d-bg);
    position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    transition: background-image 0.4s ease;
}

/* ── Header block ── */
.l2d-header {
    background: var(--l2d-bg-subtle);
    border: 1px solid var(--l2d-border);
    border-radius: var(--l2d-radius-lg);
    padding: 12px 16px;
    margin-bottom: 14px;
    cursor: pointer;
}
.l2d-header-line {
    font-size: 13px;
    line-height: 1.4;
    font-family: var(--l2d-font-mono);
    color: var(--l2d-text);
    white-space: pre-wrap;
}
/* First line, when there are multiple lines, hosts the toggle arrow at the
   right edge. Flex with baseline alignment keeps the line text at the same
   left edge as the body lines below. */
.l2d-header-line-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.l2d-header-arrow { font-size: 11px; color: var(--l2d-text-muted); }
.l2d-header-body.hidden { display: none; }
.l2d-lnum { display: none; }

/* ── Top bar (cross-page nav + view tabs) ── */
.l2d-topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--l2d-border);
    font-family: var(--l2d-font-ui);
}
.l2d-topbar-views { display: flex; gap: 2px; }
.l2d-topbar-tab {
    display: inline-block;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--l2d-text-muted);
    text-decoration: none;
    border-radius: var(--l2d-radius-md);
    transition: background 0.12s, color 0.12s;
}
.l2d-topbar-tab:hover { color: var(--l2d-text); background: var(--l2d-bg-subtle); }
.l2d-topbar-tab.active {
    color: var(--l2d-accent);
    background: rgba(0,133,255,0.08);
}
.l2d-topbar-spacer { flex: 1; }
.l2d-topbar-links { display: flex; gap: 2px; align-items: center; flex-wrap: wrap; }
.l2d-topbar-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--l2d-text-muted);
    text-decoration: none;
    border-radius: var(--l2d-radius-md);
    transition: background 0.12s, color 0.12s;
}
.l2d-topbar-link:hover { color: var(--l2d-text); background: var(--l2d-bg-subtle); }
.l2d-topbar-link-quiet { color: var(--l2d-text-faint); font-size: 11px; }

/* ── Today panel ── */
.l2d-today {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: 10px;
    margin-bottom: 18px;
    align-items: stretch;
}
.l2d-today-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 12px 14px;
    border-radius: var(--l2d-radius-lg);
    background: var(--l2d-bg);
    border: 1px solid var(--l2d-border);
    text-decoration: none;
    color: var(--l2d-text);
    transition: transform 0.12s, box-shadow 0.12s;
}
.l2d-today-card:hover:not(.l2d-today-card-zero) {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.l2d-today-num {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
    font-family: var(--l2d-font-ui);
}
.l2d-today-lbl {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--l2d-text-muted);
    margin-top: 2px;
    font-family: var(--l2d-font-ui);
}
.l2d-today-card-overdue .l2d-today-num { color: #CC2020; }
.l2d-today-card-today   .l2d-today-num { color: var(--l2d-accent); }
.l2d-today-card-week    .l2d-today-num { color: #C8901A; }
.l2d-today-card-active  .l2d-today-num { color: var(--l2d-text-muted); }
.l2d-today-card-zero    .l2d-today-num { color: var(--l2d-text-faint); }
.l2d-today-card-zero    { opacity: 0.65; }
.l2d-today-ctx {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 12px 14px;
    border-radius: var(--l2d-radius-lg);
    background: var(--l2d-bg-subtle);
    border: 1px solid var(--l2d-border);
}
.l2d-today-ctx-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--l2d-text-muted);
    margin-bottom: 6px;
    font-family: var(--l2d-font-ui);
}
.l2d-today-ctx-pills { display: flex; gap: 4px; flex-wrap: wrap; }
.l2d-today-ctx-pill {
    font-size: 10px;
    font-family: var(--l2d-font-mono);
    background: var(--l2d-bg);
    border: 1px solid var(--l2d-border);
    border-radius: var(--l2d-radius-pill);
    padding: 2px 8px;
    color: var(--l2d-text);
    white-space: nowrap;
}
.l2d-today-ctx-num { color: var(--l2d-text-faint); margin-left: 2px; }

/* ── Stats (member view; admin view uses .l2d-today instead) ── */
.l2d-stats { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }
.l2d-stat-pill {
    font-size: 11px;
    font-weight: 600;
    background: var(--l2d-pill-gray-bg);
    color: var(--l2d-pill-gray-fg);
    border-radius: var(--l2d-radius-pill);
    padding: 3px 11px;
    font-family: var(--l2d-font-ui);
}

/* ── Bookmarks ── */
.l2d-bookmark {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--l2d-text-faint);
    padding: 6px 0 4px;
    border-top: 1px solid var(--l2d-border);
    margin-top: 4px;
    font-family: var(--l2d-font-mono);
    text-transform: uppercase;
}

/* ── Sections ── */
.l2d-section { margin-bottom: 4px; }
.l2d-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0 6px;
    border-top: 2px solid var(--l2d-border);
    margin-top: 4px;
    cursor: pointer;
}
.l2d-section-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    font-family: var(--l2d-font-ui);
    color: var(--l2d-text);
}
.l2d-section-badge {
    font-size: 10px;
    font-weight: 700;
    background: var(--l2d-pill-gray-bg);
    color: var(--l2d-pill-gray-fg);
    border-radius: var(--l2d-radius-pill);
    padding: 1px 8px;
    font-family: var(--l2d-font-ui);
}
.l2d-empty {
    font-size: 12px;
    color: var(--l2d-text-faint);
    font-style: italic;
    padding: 4px 0 8px;
    font-family: var(--l2d-font-ui);
}

/* Section color accent bars */
.l2d-section:nth-child(1) .l2d-section-header { border-top-color: var(--l2d-section-1); }
.l2d-section:nth-child(2) .l2d-section-header { border-top-color: var(--l2d-accent); }
.l2d-section:nth-child(3) .l2d-section-header { border-top-color: var(--l2d-section-3); }
.l2d-section:nth-child(4) .l2d-section-header { border-top-color: var(--l2d-section-4); }
.l2d-section:nth-child(5) .l2d-section-header { border-top-color: var(--l2d-section-5); }
.l2d-section:nth-child(6) .l2d-section-header { border-top-color: var(--l2d-section-6); }
.l2d-section:nth-child(7) .l2d-section-header { border-top-color: var(--l2d-section-7); }
.l2d-section:nth-child(1) .l2d-section-label { color: var(--l2d-section-1); }
.l2d-section:nth-child(2) .l2d-section-label { color: var(--l2d-accent); }
.l2d-section:nth-child(3) .l2d-section-label { color: var(--l2d-section-3); }
.l2d-section:nth-child(4) .l2d-section-label { color: var(--l2d-section-4); }
.l2d-section:nth-child(5) .l2d-section-label { color: var(--l2d-section-5); }
.l2d-section:nth-child(6) .l2d-section-label { color: var(--l2d-section-6); }
.l2d-section:nth-child(7) .l2d-section-label { color: var(--l2d-section-7); }

/* Section collapse */
.l2d-section.collapsed .l2d-task,
.l2d-section.collapsed .l2d-add-task-form,
.l2d-section.collapsed .l2d-add-task-btn,
.l2d-section.collapsed .l2d-empty { display: none !important; } /* !important: overrides flex/block display set by .l2d-empty base rule when section is collapsed */
.l2d-section-toggle {
    background: none; border: none; cursor: pointer;
    font-size: 10px; color: var(--l2d-text-faint);
    padding: 0 4px; flex-shrink: 0; transition: transform 0.2s; line-height: 1;
}
.l2d-section.collapsed .l2d-section-toggle { transform: rotate(-90deg); }

/* ── Task rows ── */
.l2d-task {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 8px 10px;
    margin-bottom: 4px;
    background: #fff;
    border: 1px solid var(--l2d-border);
    border-radius: var(--l2d-radius-md);
    box-shadow: var(--l2d-shadow-sm);
    flex-wrap: wrap;
    transition: box-shadow 0.15s, border-color 0.15s;
}
.l2d-task:hover { box-shadow: var(--l2d-shadow-md); border-color: var(--l2d-border-hover); }

.l2d-done-check {
    margin-top: 2px; flex-shrink: 0; width: 15px; height: 15px;
    cursor: pointer; accent-color: var(--l2d-accent);
}
.l2d-pfx {
    font-size: 10px; font-weight: 700; flex-shrink: 0;
    min-width: 26px; margin-top: 2px; font-family: var(--l2d-font-mono); color: var(--l2d-text-muted);
}
.l2d-task-body { flex: 1; min-width: 0; }
.l2d-task-top { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-bottom: 2px; }

.l2d-title {
    flex: 1; font-size: 12px; font-weight: 400;
    color: var(--l2d-text); font-family: var(--l2d-font-mono);
    min-width: 0; word-break: break-word; line-height: 1.5;
}
.l2d-task.l2d-done .l2d-title,
.l2d-task.l2d-done .l2d-title.has-notes { cursor: pointer; }
.l2d-title.has-notes:hover { text-decoration: underline; text-decoration-style: dotted; }

.l2d-ctx {
    font-size: 10px; font-weight: 600;
    background: var(--l2d-pill-blue-bg); color: var(--l2d-pill-blue-fg);
    border-radius: var(--l2d-radius-pill); padding: 2px 8px;
    flex-shrink: 0; font-family: var(--l2d-font-mono); white-space: nowrap;
}
.l2d-proj {
    font-size: 10px; font-weight: 600;
    background: var(--l2d-pill-amber-bg); color: var(--l2d-pill-amber-fg);
    border-radius: var(--l2d-radius-pill); padding: 2px 8px;
    flex-shrink: 0; font-family: var(--l2d-font-mono); white-space: nowrap;
}
.l2d-drop-dead, .l2d-promised {
    font-family: var(--l2d-font-mono); font-size: 10px; font-weight: 600;
    padding: 2px 7px; border-radius: var(--l2d-radius-pill); flex-shrink: 0; white-space: nowrap;
}
.l2d-drop-dead { color: var(--l2d-pill-red-fg); background: var(--l2d-pill-red-bg); }
.l2d-drop-dead.l2d-overdue { background: var(--l2d-section-1); color: #fff; animation: pulse-red 1.5s infinite; }
.l2d-promised { color: var(--l2d-pill-amber-fg); background: var(--l2d-pill-amber-bg); }
.l2d-promised.l2d-soon { background: var(--l2d-bg-danger); color: var(--l2d-pill-red-fg); }
.l2d-promised.l2d-overdue { background: var(--l2d-pill-amber-bg); color: var(--l2d-pill-amber-fg); font-weight: 700; }
@keyframes pulse-red { 0%,100%{opacity:1} 50%{opacity:0.6} }

.l2d-notes {
    display: none;
    font-family: var(--l2d-font-mono); font-size: 11px; color: var(--l2d-text-muted);
    background: var(--l2d-bg-subtle); border-left: 3px solid var(--l2d-accent);
    padding: 6px 10px; border-radius: 0 var(--l2d-radius-sm) var(--l2d-radius-sm) 0;
    margin-top: 6px; white-space: pre-wrap; word-break: break-word; line-height: 1.6; width: 100%;
}
.l2d-notes.expanded { display: block; }
.l2d-notes-toggle {
    background: none; border: none; cursor: pointer; font-size: 9px;
    color: var(--l2d-text-faint); padding: 0 3px; flex-shrink: 0; transition: transform 0.2s; line-height: 1;
}
.l2d-notes-toggle.expanded { transform: rotate(180deg); }
.l2d-notes-toggle:hover { color: var(--l2d-text-muted); }

.l2d-ask-claude {
    font-size: 10px; font-weight: 600; color: var(--l2d-accent);
    background: var(--l2d-pill-blue-bg); border-radius: var(--l2d-radius-pill);
    padding: 2px 8px; flex-shrink: 0; font-family: var(--l2d-font-ui);
    text-decoration: none; margin-left: auto; white-space: nowrap;
}
.l2d-ask-claude:hover { background: var(--l2d-blue-selection); text-decoration: none; }

.l2d-edit-task, .l2d-delete-task {
    font-size: 13px; color: var(--l2d-text-faint); text-decoration: none;
    flex-shrink: 0; padding: 0 2px; opacity: 0; transition: opacity 0.15s, color 0.15s; line-height: 1;
}
.l2d-task:hover .l2d-edit-task, .l2d-task:hover .l2d-delete-task { opacity: 1; }
.l2d-edit-task:hover { color: var(--l2d-accent); }
.l2d-delete-task:hover { color: var(--l2d-pill-red-fg); }

/* ── Task aging ── */
.l2d-task.aging-warn { border-left: 3px solid var(--l2d-warning); }
.l2d-task.aging-old  { border-left: 3px solid var(--l2d-section-1); animation: pulse-red 2s infinite; }

/* ── Energy ── */
.l2d-energy { font-family: var(--l2d-font-mono); font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: var(--l2d-radius-sm); flex-shrink: 0; min-width: 16px; text-align: center; }
.energy-L { background: var(--l2d-bg-success); color: var(--l2d-text-success); }
.energy-M { background: var(--l2d-pill-blue-bg); color: var(--l2d-pill-blue-fg); }
.energy-H { background: var(--l2d-pill-amber-bg); color: var(--l2d-pill-amber-fg); }
.energy-X { background: var(--l2d-pill-red-bg); color: var(--l2d-pill-red-fg); }

/* ── Repeat ── */
.l2d-repeat {
    font-family: var(--l2d-font-mono); font-size: 9px; font-weight: 600;
    color: var(--l2d-pill-blue-fg); flex-shrink: 0; padding: 2px 6px;
    border: 1px solid var(--l2d-blue-selection); border-radius: var(--l2d-radius-pill); background: var(--l2d-pill-blue-bg); white-space: nowrap;
}

/* ── Bulk select ── */
.l2d-bulk-check { width: 14px; height: 14px; cursor: pointer; accent-color: var(--l2d-accent); opacity: 0; transition: opacity 0.15s; flex-shrink: 0; }
.l2d-task:hover .l2d-bulk-check, .l2d-bulk-check:checked { opacity: 1; }
.l2d-task.bulk-selected { background: var(--l2d-pill-blue-bg); border-color: var(--l2d-blue-selection); }

.l2d-bulk-bar {
    display: none; position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    background: var(--l2d-sidebar-bg); color: #fff; border-radius: var(--l2d-radius-xl);
    padding: 10px 20px; z-index: 500; align-items: center; gap: 10px;
    font-family: var(--l2d-font-ui); font-size: 12px; box-shadow: var(--l2d-shadow-lg);
}
.l2d-bulk-bar.visible { display: flex; }
.bulk-bar-count { color: var(--l2d-accent); font-weight: 700; min-width: 60px; }
.bulk-bar-btn { padding: 5px 12px; border-radius: var(--l2d-radius-pill); border: 1px solid rgba(255,255,255,0.2); background: none; color: #fff; cursor: pointer; font-family: var(--l2d-font-ui); font-size: 11px; font-weight: 600; transition: background 0.15s; }
.bulk-bar-btn:hover { background: rgba(255,255,255,0.1); }
.bulk-bar-btn.l2d-danger { color: var(--l2d-danger-light); border-color: rgba(255,107,107,0.4); }
.bulk-bar-sep { color: rgba(255,255,255,0.2); }
.bulk-section-sel, .bulk-priority-sel { font-family: var(--l2d-font-mono); font-size: 11px; background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.2); border-radius: var(--l2d-radius-pill); padding: 4px 8px; outline: none; }

/* ── Done section ── */
.l2d-completed-month { margin-top: 8px; }
.l2d-completed-header { display: flex; align-items: center; gap: 8px; padding: 10px 0 6px; border-top: 2px solid var(--l2d-pill-green-fg); }
.l2d-completed-label { font-family: var(--l2d-font-mono); font-size: 11px; font-weight: 700; color: var(--l2d-pill-green-fg); flex: 1; text-transform: uppercase; letter-spacing: 0.04em; }
.l2d-done-print-btn { font-family: var(--l2d-font-ui); font-size: 10px; color: var(--l2d-text-faint); cursor: pointer; background: none; border: none; text-decoration: underline; padding: 0; }
.l2d-done-date { font-family: var(--l2d-font-mono); font-size: 11px; font-weight: 600; color: var(--l2d-pill-green-fg); flex-shrink: 0; cursor: pointer; min-width: 48px; }
.l2d-done-date:hover { text-decoration: underline; }
.l2d-done-date-input { font-family: var(--l2d-font-mono); font-size: 11px; width: 120px; border: 1px solid var(--l2d-pill-green-fg); border-radius: var(--l2d-radius-sm); padding: 2px 6px; }

/* ── Quick-add form ── */
.l2d-add-task-btn:hover { opacity: 0.75; }
.l2d-add-task-form { background: var(--l2d-bg-subtle); border: 1px solid var(--l2d-border); border-radius: var(--l2d-radius-lg); padding: 12px 14px; margin-bottom: 8px; }
.l2d-add-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; }
.l2d-add-row:last-child { margin-bottom: 0; }

/* ── Forms ── */
.l2d-field { margin-bottom: 14px; }
.l2d-label { display: block; font-size: 11px; font-weight: 700; color: var(--l2d-text-muted); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 5px; font-family: var(--l2d-font-ui); }
.l2d-input, .l2d-select, .l2d-textarea,
.l2d-input, .l2d-select, .l2d-textarea {
    width: 100%; font-family: var(--l2d-font-mono); font-size: 13px;
    padding: 9px 12px; border: 1.5px solid var(--l2d-border); border-radius: var(--l2d-radius-md);
    background: #fff; color: var(--l2d-text); transition: border-color 0.15s, box-shadow 0.15s; outline: none;
}
.l2d-input:focus, .l2d-select:focus, .l2d-textarea:focus,
.l2d-input:focus, .l2d-select:focus, .l2d-textarea:focus { border-color: var(--l2d-accent); box-shadow: 0 0 0 3px rgba(0,133,255,0.12); }
.l2d-textarea { min-height: 90px; resize: vertical; }

/* ── Buttons ── */
.l2d-btn {
    font-family: var(--l2d-font-ui); font-size: 13px; font-weight: 600; padding: 9px 18px;
    border-radius: var(--l2d-radius-md); cursor: pointer; border: 1.5px solid var(--l2d-border);
    background: #fff; color: var(--l2d-text); transition: background 0.15s, border-color 0.15s;
    display: inline-block; text-align: center; text-decoration: none;
}
.l2d-btn:hover { background: var(--l2d-bg-subtle); border-color: var(--l2d-border-hover); }
.l2d-btn-primary { background: var(--l2d-accent); color: #fff; border-color: var(--l2d-accent); box-shadow: 0 2px 8px rgba(0,133,255,0.25); }
.l2d-btn-primary:hover { background: var(--l2d-accent-dark); border-color: var(--l2d-accent-dark); }

/* Back-link: subtle pill used at the top of secondary pages
   (workspace settings, upgrade, contacts detail) to return to the
   primary tracker view. Less visually heavy than .l2d-btn but still
   has affordance and a hover state. */
.l2d-btn-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--l2d-font-ui);
    font-size: 12px;
    font-weight: 500;
    color: var(--l2d-text-muted);
    padding: 6px 14px;
    border: 1px solid var(--l2d-border);
    border-radius: 999px;
    background: var(--l2d-bg-subtle);
    text-decoration: none;
    line-height: 1;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.l2d-btn-back:hover {
    color: var(--l2d-accent);
    background: #fff;
    border-color: var(--l2d-accent);
}
.l2d-btn-back-arrow { transition: transform 0.15s ease; display: inline-block; }
.l2d-btn-back:hover .l2d-btn-back-arrow { transform: translateX(-2px); }

/* ── Alerts ── */
.l2d-alert { padding: 11px 16px; border-radius: var(--l2d-radius-md); margin-bottom: 14px; font-size: 13px; font-weight: 500; font-family: var(--l2d-font-ui); border: 1px solid transparent; }
.l2d-alert-success { background: var(--l2d-pill-green-bg); color: var(--l2d-pill-green-fg); border-color: var(--l2d-border-success); }
.l2d-alert-error { background: var(--l2d-pill-red-bg); color: var(--l2d-pill-red-fg); border-color: var(--l2d-danger-lighter); }

/* Warm-note panel — cream/gold contextual info (not an alert, more like a
   sidebar note). Used on settings tabs for introductory or Twilio-style
   information. Added v2.5.25, extracted from 2 duplicate inline styles
   in workspace-settings.php. */
.l2d-warm-note { background: #fdf8f0; border: .5px solid #e8d8b8; border-radius: 6px; padding: 12px 16px; min-height: 48px; }

/* ── Modals ── Promoted from lists-view.php inline <style> in v2.5.24.
   The CONN-1 Turn 2 connection-requests modal needs these classes to be
   globally available because it renders on tracker pages, not just the
   lists page. Existing list modals keep working unchanged. */
.l2d-modal-overlay { position: fixed; inset: 0; background: rgba(31,45,61,.45); z-index: 2000; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2px); }
.l2d-modal-box { background: #fff; border-radius: 14px; box-shadow: 0 8px 40px rgba(0,0,0,.18); width: 90%; overflow: hidden; max-height: 90vh; display: flex; flex-direction: column; }
.l2d-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--l2d-border); font-family: var(--l2d-font-ui); font-weight: 700; font-size: 15px; color: var(--l2d-text); flex-shrink: 0; }
.l2d-modal-close { background: none; border: none; font-size: 16px; cursor: pointer; color: var(--l2d-text-faint); padding: 0 4px; line-height: 1; }
.l2d-modal-close:hover { color: var(--l2d-text); }
.l2d-modal-body { padding: 20px; overflow-y: auto; flex: 1; }
.l2d-modal-footer { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 20px; border-top: 1px solid var(--l2d-border); background: var(--l2d-bg-subtle); flex-shrink: 0; }

/* ── Connection requests / My connections components (CONN-1) ──
   Shared layout for the consent-model UI: section headers, row cards,
   pending-request action buttons, and the sidebar count badge. */
.l2d-conn-section-title { font-size: 12px; color: var(--l2d-text); margin-bottom: 6px; font-family: Georgia, serif; font-weight: bold; }
.l2d-conn-section-hint  { font-size: 11px; color: var(--l2d-text-muted); margin-bottom: 10px; }
.l2d-conn-list          { display: flex; flex-direction: column; gap: 10px; }
.l2d-conn-list-compact  { display: flex; flex-direction: column; gap: 8px; }
.l2d-conn-empty         { text-align: center; padding: 14px; color: var(--l2d-text-muted); font-style: italic; font-size: 12px; font-family: Georgia, serif; }
.l2d-conn-row           { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px; border: .5px solid var(--l2d-border); border-radius: 6px; }
.l2d-conn-row-compact   { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: .5px solid var(--l2d-border); border-radius: 6px; }
.l2d-conn-row-main      { flex: 1; min-width: 0; }
.l2d-conn-row-name      { font-weight: bold; font-size: 13px; font-family: Georgia, serif; }
.l2d-conn-row-email     { font-size: 11px; color: var(--l2d-text-muted); overflow: hidden; text-overflow: ellipsis; font-family: 'Courier New', monospace; }
.l2d-conn-actions       { display: flex; gap: 6px; }
.l2d-conn-btn-sm        { padding: 4px 10px; font-size: 12px; }
.l2d-conn-divider       { border: none; border-top: .5px solid var(--l2d-border); margin: 18px 0; }
.l2d-conn-badge         { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 6px; background: var(--l2d-accent, #c8901a); color: #fff; border-radius: 9px; font-size: 10px; font-family: 'Courier New', monospace; text-align: center; }

/* ── Intake header ── */
.l2d-intake-header { background: var(--l2d-bg-subtle); border: 1px solid var(--l2d-border); border-radius: var(--l2d-radius-lg); padding: 12px 16px; margin-bottom: 16px; font-family: var(--l2d-font-ui); font-size: 13px; color: var(--l2d-text-muted); line-height: 1.7; }
.l2d-intake-title { font-size: 16px; font-weight: 700; color: var(--l2d-text); margin-bottom: 3px; font-family: var(--l2d-font-ui); }

/* ── Info tooltips ── */
.l2d-info { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; background: var(--l2d-accent); color: #fff; font-size: 9px; font-weight: 700; font-family: var(--l2d-font-ui); cursor: help; margin-left: 4px; flex-shrink: 0; position: relative; vertical-align: middle; line-height: 1; font-style: italic; }
.l2d-info::after { content: attr(data-tip); position: absolute; left: 20px; top: 50%; transform: translateY(-50%); background: var(--l2d-sidebar-bg); color: #fff; font-family: var(--l2d-font-ui); font-size: 11px; font-weight: 400; font-style: normal; line-height: 1.5; padding: 8px 12px; border-radius: var(--l2d-radius-md); width: 240px; white-space: normal; z-index: 9999; pointer-events: none; opacity: 0; transition: opacity 0.2s; box-shadow: var(--l2d-shadow-lg); }
.l2d-info::before { content: ''; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); border: 5px solid transparent; border-right-color: var(--l2d-sidebar-bg); opacity: 0; transition: opacity 0.2s; z-index: 9999; }
.l2d-info:hover::after, .l2d-info:hover::before { opacity: 1; }

/* ── Edit panel ── */
.l2d-edit-panel { display: flex; flex-direction: column; position: fixed; top: 0; right: -440px; width: 440px; max-width: 100vw; height: 100vh; background: #fff; border-left: 1px solid var(--l2d-border); z-index: 1000; transition: right 0.25s ease; overflow-y: auto; box-shadow: var(--l2d-shadow-lg); }
.l2d-edit-panel.open { right: 0; }
.l2d-panel-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 999; backdrop-filter: blur(2px); }
.l2d-panel-overlay.open { display: block; }
.l2d-panel-hdr { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--l2d-border); background: var(--l2d-bg-subtle); font-family: var(--l2d-font-ui); font-weight: 700; font-size: 14px; color: var(--l2d-text); }
.l2d-panel-close { background: none; border: none; cursor: pointer; font-size: 18px; color: var(--l2d-text-faint); padding: 0 4px; line-height: 1; }
.l2d-panel-close:hover { color: var(--l2d-text); }
.l2d-panel-body { flex: 1; padding: 20px; overflow-y: auto; }
.l2d-panel-footer { display: flex; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--l2d-border); background: var(--l2d-bg-subtle); }

/* ── Toast ── */
.l2d-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px); background: var(--l2d-sidebar-bg); color: #fff; padding: 11px 22px; border-radius: var(--l2d-radius-xl); font-family: var(--l2d-font-ui); font-size: 13px; font-weight: 600; z-index: 9999; opacity: 0; transition: all 0.3s; pointer-events: none; box-shadow: var(--l2d-shadow-lg); }
.l2d-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.l2d-toast[data-type="error"] { background: var(--l2d-text-danger); }
.l2d-toast[data-type="success"] { background: var(--l2d-text-success); }

/* ── Calendar view ── */
.l2d-cal-week { margin-bottom: 20px; }
.l2d-cal-week-hdr { font-family: var(--l2d-font-ui); font-size: 11px; font-weight: 700; color: var(--l2d-text-muted); text-transform: uppercase; letter-spacing: 0.06em; padding: 7px 0 5px; border-bottom: 2px solid var(--l2d-border); margin-bottom: 6px; }
.l2d-cal-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--l2d-radius-md); background: #fff; border: 1px solid var(--l2d-border); margin-bottom: 4px; font-family: var(--l2d-font-mono); font-size: 11px; box-shadow: var(--l2d-shadow-sm); }
.l2d-cal-date { flex: 0 0 60px; font-size: 10px; font-weight: 700; }
.l2d-cal-date.dd { color: var(--l2d-pill-red-fg); }
.l2d-cal-date.pr { color: var(--l2d-pill-amber-fg); }

/* ── Background image system ── */
.l2d-main::before { content: ''; position: absolute; inset: 0; background: var(--l2d-bg-overlay, rgba(255,255,255,0.88)); pointer-events: none; z-index: 0; transition: background 0.4s ease; }
.l2d-main > * { position: relative; z-index: 1; }

/* ── Workspace switcher ── */
.l2d-ws-switcher { position: relative; margin: 0 12px 8px; }
.l2d-ws-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 12px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--l2d-radius-md); color: rgba(255,255,255,0.8); font-family: var(--l2d-font-ui); font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.15s; }
.l2d-ws-btn:hover { background: rgba(255,255,255,0.12); }
.l2d-ws-arrow { font-size: 10px; opacity: 0.6; }
.l2d-ws-dropdown { display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #fff; border: 1px solid var(--l2d-border); border-radius: var(--l2d-radius-md); z-index: 100; box-shadow: var(--l2d-shadow-lg); overflow: hidden; }
.l2d-ws-dropdown.open { display: block; }
.l2d-ws-option { padding: 9px 14px; font-family: var(--l2d-font-ui); font-size: 12px; font-weight: 500; color: var(--l2d-text); cursor: pointer; transition: background 0.15s; border-bottom: 1px solid var(--l2d-border); }
.l2d-ws-option:last-child { border-bottom: none; }
.l2d-ws-option:hover, .l2d-ws-option.active { background: var(--l2d-pill-blue-bg); color: var(--l2d-pill-blue-fg); }
.l2d-ws-role { font-size: 10px; color: var(--l2d-text-faint); margin-left: 4px; }
.l2d-ws-name { font-weight: 700; }
.l2d-ws-settings { padding: 8px 14px; border-top: 1px solid var(--l2d-border); background: var(--l2d-bg-subtle); }
.l2d-ws-settings a { font-size: 11px; color: var(--l2d-accent); text-decoration: none; font-family: var(--l2d-font-ui); font-weight: 600; }

/* ── Footer ── */
.l2d-footer { text-align: center; padding: 20px 16px; font-family: var(--l2d-font-ui); font-size: 11px; color: var(--l2d-text-faint); border-top: 1px solid var(--l2d-border); margin-top: 32px; }
.l2d-footer a { color: var(--l2d-text-faint); text-decoration: none; }
.l2d-footer a:hover { color: var(--l2d-text-muted); }

/* ── Mobile ── */
@media (max-width: 700px) {
    .l2d-shell { flex-direction: column; }
    .l2d-sidebar { width: 100%; height: auto; position: static; flex-direction: row; flex-wrap: wrap; padding: 8px; gap: 6px; }
    .l2d-sidebar-brand { padding: 4px 8px; border-bottom: none; }
    .l2d-sidebar-nav { display: none; }
    .l2d-sidebar-capture { margin: 4px; width: auto; padding: 9px 18px; }
    .l2d-main { padding: 14px 12px 32px; }
    .l2d-topbar { flex-wrap: wrap; gap: 4px; padding: 4px 0 10px; }
    .l2d-topbar-spacer { display: none; }
    .l2d-topbar-views, .l2d-topbar-links { width: 100%; flex-wrap: wrap; }
    .l2d-topbar-tab, .l2d-topbar-link { padding: 8px 10px; font-size: 12px; }
    .l2d-today { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .l2d-today-ctx { grid-column: 1 / -1; }
    .l2d-today-num { font-size: 20px; }
    .l2d-input, .l2d-select, .l2d-textarea,
    .l2d-input, .l2d-select, .l2d-textarea { font-size: 16px; }
    .l2d-btn { padding: 12px 16px; font-size: 14px; }
    .l2d-edit-panel { width: 100%; right: -100%; }
    .l2d-edit-panel.open { right: 0; }
}

/* Screen: hide the print-only header/footer (only appear when printing). */
.l2d-print-header,
.l2d-print-footer { display: none; }

/* Print-preview toolbar — shown on screen, hidden on print. */
.l2d-print-toolbar { padding: 10px 16px; font-family: var(--l2d-font-ui); font-size: 12px; color: var(--l2d-text-muted); border-top: 1px solid var(--l2d-border); }
.l2d-print-toolbar-label { cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 6px; }
.l2d-print-toolbar-label input[type="checkbox"] { margin: 0; }

/* Fixed-width print-only task report.
   Hidden on screen, shown on print (see @media print below). */
.l2d-print-view { display: none; }
.l2d-print-view .l2d-task-notes { display: none; }
.l2d-print-view.l2d-show-notes .l2d-task-notes { display: inline; }

/* ── Print ── */
@media print {
    @page { size: landscape; margin: 30pt 0.5in; }

    /* 3-line print header (hyphen / title·notice·date / hyphen).
       Fixed to the top of every page. Mirrors the footer structure. */
    .l2d-print-header {
        display: block !important;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        font-family: 'Courier New', monospace;
        font-size: 10pt;
        line-height: 1.2;
        color: #000;
        background: #fff;
    }
    .l2d-print-header-rule::before {
        content: "------------------------------------------------------------------------------------------------------------------------";
        white-space: pre;
    }
    .l2d-print-header-row {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        align-items: baseline;
    }
    .l2d-print-header-row .l2d-ph-left   { text-align: left; }
    .l2d-print-header-row .l2d-ph-center { text-align: center; font-weight: bold; }
    .l2d-print-header-row .l2d-ph-right  { text-align: right; }

    /* 3-line print footer (hyphen / metadata row / hyphen).
       Fixed to the bottom of every page via position:fixed. */
    .l2d-print-footer {
        display: block !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        font-family: 'Courier New', monospace;
        font-size: 10pt;
        line-height: 1.2;
        color: #000;
        background: #fff;
    }
    .l2d-print-footer-rule {
        white-space: pre;
        letter-spacing: 0;
        /* Both top and bottom rules are PHP-composed 120-char strings. */
    }
    .l2d-print-footer-row {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        align-items: baseline;
    }
    .l2d-print-footer-row .l2d-pf-left   { text-align: left; }
    .l2d-print-footer-row .l2d-pf-center { text-align: center; }
    .l2d-print-footer-row .l2d-pf-page   { text-align: right; }
    .l2d-print-footer-row .l2d-pf-page::after {
        /* Live page counter — updates per-page. */
        content: "Page " counter(page) " of " counter(pages);
    }

    /* ── v2.6.9 Print View: fixed-width 120-char report ── */
    /* Hide the screen view and the print-preview toolbar. */
    .l2d-screen-view,
    .l2d-print-toolbar,
    .l2d-screen-only { display: none !important; }

    /* Show the print view, formatted for 120-char landscape. */
    .l2d-print-view {
        display: block !important;
        font-family: 'Courier New', monospace !important;
        font-size: 10pt;
        line-height: 1.2;
        color: #000;
        background: none;
        white-space: pre;
        margin: 0;
        /* Reserve exact space for the 3-row fixed header and 3-row fixed
           footer. At line-height 1.2, each row is 12pt; 3 rows = 36pt. */
        padding-top: 36pt;
        padding-bottom: 36pt;
    }

    /* Overdue drop-dead or promised dates: red, bold, yellow highlight. */
    .l2d-print-view .l2d-overdue {
        color: #c00;
        font-weight: 700;
        background: #fff2a8;
        padding: 0 2px;
    }

    /* Section heading: bold, otherwise identical to surrounding text. */
    .l2d-print-view .l2d-section-heading {
        font-weight: 700;
    }

    /* Completed tasks: strike through the head portion (badge + title + ctx). */
    .l2d-print-view .l2d-done-row { text-decoration: line-through; color: #666; }

    /* Notes: dimmer color so they recede visually under the task row. */
    .l2d-print-view .l2d-task-notes { color: #555; font-style: italic; }
}

/* ── Screen reader only (accessibility) ── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* Focus visible outlines — important for keyboard navigation */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--l2d-accent);
    outline-offset: 2px;
}

/* ─── Contacts ─────────────────────────────────────────────── */
.l2d-contacts-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.l2d-contact-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--l2d-bg);
    border: .5px solid var(--l2d-border);
    border-radius: var(--l2d-radius-md);
    text-decoration: none;
    color: inherit;
    transition: background .15s;
}
.l2d-contact-card:hover { background: var(--l2d-bg-subtle); }
.l2d-contact-avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--l2d-accent);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 16px; font-weight: 700;
    flex-shrink: 0;
}
.l2d-contact-avatar--sm { width: 36px; height: 36px; font-size: 13px; }
.l2d-contact-card-body { flex: 1; min-width: 0; }
.l2d-contact-card-name {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px; font-weight: 600;
    color: var(--l2d-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.l2d-contact-card-meta {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px; color: var(--l2d-text-faint);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-top: 2px;
}
.l2d-contact-badge {
    font-size: 16px;
    flex-shrink: 0;
}

/* Contact detail */
.l2d-contact-fields { display: flex; flex-direction: column; gap: 6px; }
.l2d-contact-field {
    display: flex; gap: 10px; align-items: baseline;
    font-family: 'DM Sans', sans-serif; font-size: 13px;
}
.l2d-cf-label {
    font-weight: 600;
    color: var(--l2d-text-faint);
    font-size: 11px;
    min-width: 80px;
    flex-shrink: 0;
}
.l2d-contact-field a { color: var(--l2d-accent); text-decoration: none; }
.l2d-contact-field a:hover { text-decoration: underline; }
.l2d-contact-field--notes { align-items: flex-start; }

/* Task list on contact detail */
.l2d-task-list { display: flex; flex-direction: column; gap: 4px; }
.l2d-task-row {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 0;
    border-bottom: .5px solid var(--l2d-border);
    font-family: 'JetBrains Mono', monospace; font-size: 12px;
}
.l2d-task-row:last-child { border-bottom: none; }
.l2d-task-priority {
    font-weight: 700; color: var(--l2d-text-muted);
    flex-shrink: 0; width: 16px; text-align: center;
}
.l2d-task-title { flex: 1; color: var(--l2d-text); }
.l2d-task-date { font-size: 11px; flex-shrink: 0; }

/* Contact chips on task form */
.l2d-contact-chips {
    display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px;
}
.l2d-contact-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px;
    background: var(--l2d-bg-subtle);
    border: .5px solid var(--l2d-border);
    border-radius: 100px;
    font-family: 'DM Sans', sans-serif; font-size: 11px;
    color: var(--l2d-text);
}
.l2d-contact-chip button {
    background: none; border: none; cursor: pointer;
    font-size: 14px; line-height: 1; padding: 0;
    color: var(--l2d-text-faint);
}
.l2d-contact-chip button:hover { color: var(--l2d-contact-danger); }
.l2d-contact-search-results {
    position: absolute; z-index: 9999;
    background: var(--l2d-bg);
    border: .5px solid var(--l2d-border);
    border-radius: var(--l2d-radius-md);
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
    max-height: 220px; overflow-y: auto;
    width: 100%; list-style: none; padding: 4px 0; margin: 2px 0;
}
.l2d-contact-result {
    padding: 8px 12px;
    font-family: 'DM Sans', sans-serif; font-size: 13px;
    cursor: pointer; color: var(--l2d-text);
}
.l2d-contact-result:hover { background: var(--l2d-bg-subtle); }
.l2d-task-contacts-panel { position: relative; margin-top: 8px; }

/* ─────────────────────────────────────────────────────────────
   UTILITY CLASSES
   Single-responsibility helpers used across templates to replace
   repetitive inline styles.
   ───────────────────────────────────────────────────────────── */

/* Display */
.l2d-hidden           { display: none; }

/* Typography */
.l2d-serif            { font-family: Georgia, serif; }
.l2d-bold             { font-weight: bold; }
.l2d-fw-normal        { font-weight: normal; }
.l2d-italic           { font-style: italic; }
.l2d-text-center      { text-align: center; }
.l2d-text-right       { text-align: right; }
.l2d-text-left        { text-align: left; }
.l2d-nowrap           { white-space: nowrap; }
.l2d-line-through     { text-decoration: line-through; }

/* Colors */
.l2d-danger           { color: var(--l2d-danger); }
.l2d-success          { color: var(--l2d-success); }
.l2d-warn             { color: var(--l2d-amber-dark); }
.l2d-muted            { color: var(--l2d-muted); }
.l2d-color-inherit    { color: inherit; }

/* Flex */
.l2d-flex-1           { flex: 1; }
.l2d-flex-none        { flex: 0 0 auto; }

/* Interaction */
.l2d-pointer          { cursor: pointer; }
.l2d-resize-v         { resize: vertical; }

/* Layout: page wrappers */
.l2d-page-wrap        { max-width: 860px; margin: 0 auto; padding: 20px 16px; }

/* Components: form field hint/helper text */
.l2d-field-hint       { font-family: Georgia, serif; font-size: 11px; color: var(--l2d-text-faint); margin-top: 4px; }

/* Components: destructive icon button (remove / delete) */
.l2d-btn-remove       { background: none; border: none; cursor: pointer; color: var(--l2d-danger-emphasis); font-size: 10px; padding: 0; }

/* Components: card/section container */
.l2d-card             { background: var(--l2d-bg); border: .5px solid var(--l2d-border); border-radius: var(--l2d-radius-lg); padding: 24px; }
.l2d-card-hdr         { font-family: Georgia, serif; font-weight: bold; cursor: pointer; }

/* Layout: settings-page section wrapper (capped at 560px reading width) */
.l2d-mw-560           { max-width: 560px; }

/* Layout: full-page wrapper for setup wizard / upgrade flow */
.l2d-page-wrap        { max-width: 560px; margin: 40px auto; padding: 0 16px; }

/* Layout: minimum widths for flex children that should wrap below threshold */
.l2d-min-w-130        { min-width: 130px; }
.l2d-min-w-140        { min-width: 140px; }

/* Components: tight cell padding (used in workspace-settings header/footer tables) */
.l2d-pad-tight        { padding: 4px 6px; }

/* Components: tiny arrow button (used for move-up/down in workspace-settings tables) */
.l2d-btn-arrow        { padding: 2px 7px; font-size: 13px; }

/* Components: bordered container with rounded corners (no fill) */
.l2d-bordered-box     { border: .5px solid var(--l2d-border); border-radius: var(--l2d-radius-lg); overflow: hidden; }

/* Layout: more flex-child min-widths */
.l2d-min-w-160        { min-width: 160px; }
.l2d-min-w-200        { min-width: 200px; }

/* Layout: medium modal/section reading width */
.l2d-mw-600           { max-width: 600px; }

/* Components: centered empty/error state container */
.l2d-empty-state      { padding: 40px; font-family: Georgia, serif; text-align: center; }
.l2d-empty-state-msg  { color: var(--l2d-accent, #c8901a); font-size: 16px; }
.l2d-empty-state-hint { color: #666; font-size: 13px; }

/* Components: setup-wizard subtitle paragraph */
.l2d-wizard-p         { color: #666; font-family: Georgia, serif; margin: 0 0 24px; }

/* Color: accent (with gold fallback for unthemed contexts) */
.l2d-color-accent     { color: var(--l2d-accent, #c8901a); }
.l2d-color-primary    { color: var(--l2d-accent, #c8901a); }
.l2d-color-muted      { color: var(--l2d-text-muted); }

/* Spacing utilities (round out mb-/mt- families) */
.l2d-mb-4             { margin-bottom: 4px; }
.l2d-mb-6             { margin-bottom: 6px; }
.l2d-mb-14            { margin-bottom: 14px; }
.l2d-mb-18            { margin-bottom: 18px; }
.l2d-mt-6             { margin-top: 6px; }

/* Position / display / opacity utilities */
.l2d-pos-rel          { position: relative; }
.l2d-d-inline         { display: inline; }
.l2d-opacity-60       { opacity: 0.6; }

/* Typography: UI font family utility */
.l2d-ui-font          { font-family: var(--l2d-font-ui); }

/* Calendar view (tracker-admin "Calendar" tab; minimal styling, real
   layout comes from inner .l2d-cal-week / .l2d-cal-row rules below) */
.l2d-cal-view         { padding: 12px 0; }
.l2d-cal-week         { margin-bottom: 18px; }
.l2d-cal-week-hdr     { font-family: var(--l2d-font-ui); font-size: 12px; font-weight: 600; color: var(--l2d-text-muted); text-transform: uppercase; letter-spacing: 0.04em; padding: 6px 0; border-bottom: .5px solid var(--l2d-border); margin-bottom: 6px; }
.l2d-cal-row          { display: flex; align-items: baseline; gap: 10px; padding: 4px 0; font-size: 13px; }
.l2d-cal-date         { font-family: var(--l2d-font-mono); font-size: 11px; min-width: 56px; flex-shrink: 0; }

/* Date-type modifiers for .l2d-task-date in contacts view */
.l2d-date-dd          { color: var(--l2d-pill-red-fg); }
.l2d-date-pr          { color: var(--l2d-text-muted); }

/* Modal classes used by contacts.php (parallel set to .l2d-modal-overlay
   used in lists-view.php — kept distinct because the contacts pattern
   uses a separate backdrop element) */
.l2d-modal            { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; }
.l2d-modal-backdrop   { position: absolute; inset: 0; background: rgba(31,45,61,.45); cursor: pointer; }
.l2d-modal-title      { font-family: var(--l2d-font-ui); font-weight: 700; font-size: 15px; color: var(--l2d-text); margin: 0; }

/* Namespace/wrapper markers — present for future-styling slots and to
   make markup intent legible. Empty rules so ref_check accepts them. */
.l2d-form             { /* form scoping marker */ }
.l2d-vis-mark         { /* visibility/lock-icon marker */ }
.l2d-request-wrap     { /* request-form page wrapper */ }
.l2d-contact-detail   { /* contact-detail page wrapper */ }

/* Components: setup-wizard step heading */
.l2d-wizard-h2        { font-family: Georgia, serif; font-size: 22px; margin: 0 0 8px; color: var(--l2d-accent, #c8901a); }

/* Components: notice/callout box */

/* Components: tag/badge chip */

/* Components: done-badge color (completed tasks) */
.l2d-badge-done       { background: var(--l2d-done-bg); color: var(--l2d-done-fg); }

/* Components: page section header row */
.l2d-section-hdr      { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }

/* Spacing helpers (used to eliminate common margin-bottom inline styles) */
.l2d-mb-0             { margin-bottom: 0; }
.l2d-mb-10            { margin-bottom: 10px; }
.l2d-mb-12            { margin-bottom: 12px; }
.l2d-mb-16            { margin-bottom: 16px; }
.l2d-mb-20            { margin-bottom: 20px; }
.l2d-mt-10            { margin-top: 10px; }
.l2d-mt-12            { margin-top: 12px; }
.l2d-mt-16            { margin-top: 16px; }
.l2d-mt-20            { margin-top: 20px; }
.l2d-empty-state      { text-align: center; padding: 60px 24px; color: var(--l2d-text-faint); font-family: Georgia, serif; }
.l2d-scroll-mt        { scroll-margin-top: 20px; }

/* Typography scale helpers */
.l2d-text-xxs         { font-size: 10px; }
.l2d-text-xs          { font-size: 11px; }
.l2d-text-sm          { font-size: 12px; }
.l2d-text-md          { font-size: 13px; }
.l2d-text-lg          { font-size: 14px; }
.l2d-inline           { display: inline; }
.l2d-italic-muted     { font-style: italic; color: var(--l2d-muted); }
.l2d-amber            { color: var(--l2d-amber); }
.l2d-error-xs         { font-size: 11px; color: var(--l2d-danger-emphasis); }

/* Muted hint text — size + secondary color */
.l2d-hint-sm          { font-size: 12px; color: var(--l2d-text-muted); }
.l2d-hint             { font-size: 13px; color: var(--l2d-text-muted); }
.l2d-hint-md          { font-size: 14px; color: var(--l2d-text-muted); }

/* Layout helpers */
.l2d-flex-8           { display: flex; gap: 8px; }
.l2d-flex-wrap        { display: flex; gap: 8px; flex-wrap: wrap; }
.l2d-flex-wrap-10     { display: flex; gap: 10px; flex-wrap: wrap; }
.l2d-flex-center-12   { display: flex; align-items: center; gap: 12px; }
.l2d-flex-center-8    { display: flex; align-items: center; gap: 8px; }
.l2d-grid-2col        { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.l2d-grid-3col        { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.l2d-grid-city-state-zip { display: grid; grid-template-columns: 1fr 80px 100px; gap: 10px; }
.l2d-form-grid        { display: grid; gap: 10px; }

/* Width utilities */
.l2d-w-140            { width: 140px; }

/* Padding utilities */
.l2d-pad-40           { padding: 40px; }

/* Page-level semantic patterns */
.l2d-page-header-row  { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.l2d-heading-page     { font-size: 18px; margin: 0; }

/* Contact-specific patterns */
.l2d-contact-header-grid { display: grid; grid-template-columns: 80px 1fr; gap: 20px; align-items: start; padding: 20px; }
.l2d-heading-contact-name { font-size: 20px; margin: 0 0 2px; }
.l2d-contact-subtitle { font-size: 13px; color: var(--l2d-text-muted); margin: 0 0 12px; }

/* Search field that grows to fill available space */
.l2d-search-input     { flex: 1; min-width: 180px; }

/* Modal size variants — modifier on .l2d-modal-box */
.l2d-modal-box--md    { max-width: 560px; max-height: 90vh; overflow-y: auto; }

/* Action buttons at the end of a form (distinct from .l2d-modal-footer
   which is a persistent footer with background; this is a one-shot
   "close/save" action row with a top border separator) */
.l2d-modal-actions    { display: flex; gap: 8px; justify-content: flex-end; padding-top: 8px; border-top: .5px solid var(--l2d-border); }

/* Compound helpers */
.l2d-mono-field       { font-family: var(--l2d-font-mono); margin-bottom: 24px; }

/* Debug: shortcode error block (frontend dev only) */
.l2d-debug-err        { background: #fff0f0; border: 1px solid #f00; padding: 16px; font-family: monospace; font-size: 13px; }

/* Table column header: small text + bottom border */
.l2d-tbl-col-hdr      { font-size: 10px; padding: 4px 8px; border-bottom: .5px solid var(--l2d-border); }

/* Danger/error color alone */

/* Details card: bordered summary/details element */
.l2d-details-card     { border: .5px solid var(--l2d-border); border-radius: var(--l2d-radius-md); padding: 10px 14px; }