/* ============================================================
   LL MECHANICAL — BRAND TOKENS
   ============================================================ */
:root {
  /* Brand palette */
  --slate:        #2C3E50;   /* Midnight Slate — primary structural */
  --slate-90:     #3D4F62;
  --slate-70:     #5A6878;
  --slate-50:     #8B95A3;
  --slate-30:     #B0B7C2;

  --copper:       #B87333;   /* Architectural Copper — accent */
  --copper-deep:  #9A5F26;
  --copper-soft:  rgba(184, 115, 51, 0.10);
  --copper-edge:  rgba(184, 115, 51, 0.28);
  --copper-glow:  rgba(184, 115, 51, 0.18);

  --stone:        #D1CCC0;   /* Warm Stone */
  --stone-light:  #EDE9E2;
  --stone-bg:     #F7F5F1;
  --stone-edge:   #E8E5DF;

  --white:        #FFFFFF;

  /* Surfaces */
  --bg-base:      var(--white);
  --bg-elevated:  var(--stone-bg);
  --bg-stone:     var(--stone-light);
  --bg-card:      var(--white);
  --bg-card-hover:#FBF9F5;
  --bg-overlay:   rgba(44, 62, 80, 0.55);

  /* Borders */
  --border:       var(--stone-edge);
  --border-strong:var(--stone);
  --border-accent:var(--copper-edge);

  /* Text */
  --text-primary:   var(--slate);
  --text-secondary: var(--slate-70);
  --text-muted:     var(--slate-50);
  --text-dim:       var(--slate-30);
  --text-inverse:   var(--white);

  /* Semantic */
  --success:    #1F7A4F;
  --success-bg: rgba(31, 122, 79, 0.08);
  --warning:    #C99B45;
  --warning-bg: rgba(201, 155, 69, 0.10);
  --danger:     #A93D33;
  --danger-bg:  rgba(169, 61, 51, 0.08);
  --info:       var(--slate);
  --info-bg:    rgba(44, 62, 80, 0.06);

  /* Type */
  --font-display: 'Montserrat', system-ui, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', 'Menlo', monospace;

  /* Shape & motion */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 14px;
  --shadow-xs: 0 1px 2px rgba(44, 62, 80, 0.04);
  --shadow-sm: 0 1px 2px rgba(44, 62, 80, 0.04), 0 2px 6px rgba(44, 62, 80, 0.05);
  --shadow:    0 2px 4px rgba(44, 62, 80, 0.05), 0 8px 24px rgba(44, 62, 80, 0.08);
  --shadow-lg: 0 4px 6px rgba(44, 62, 80, 0.06), 0 20px 50px rgba(44, 62, 80, 0.14);
  --transition:160ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: var(--font-body);
  background: var(--bg-base);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.5;
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
button:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; border-radius: 3px; }
a { color: var(--copper); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--copper-deep); }
a:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; border-radius: 3px; }

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* ============================================================
   LAYOUT
   ============================================================ */
.app {
  display: grid;
  grid-template-columns: 320px 1fr;
  grid-template-rows: 80px 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer  footer";
  min-height: 100vh;
}

/* ============================================================
   HEADER  (Slate background — anchor for logo + crown)
   ============================================================ */
.header {
  grid-area: header;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  background: var(--slate);
  color: var(--text-inverse);
  position: sticky; top: 0; z-index: 50;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 4px 12px rgba(44, 62, 80, 0.08);
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand-mark {
  height: 44px;
  width: auto;
  flex-shrink: 0;
}
.brand-mark polygon { fill: var(--copper); }
.brand-divider {
  width: 1px; height: 32px;
  background: rgba(255, 255, 255, 0.18);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.01em;
  color: var(--white);
}
.brand-sub {
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 2px;
}
.header-meta {
  display: flex; align-items: center; gap: 32px;
}
.meta-item {
  display: flex; flex-direction: column; align-items: flex-end;
  line-height: 1.2;
}
.meta-label {
  font-family: var(--font-body);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 500;
}
.meta-value {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  color: var(--white);
  margin-top: 2px;
}
/* ============================================================
   SIDEBAR  (Warm Stone tint — supports without competing)
   ============================================================ */
.sidebar {
  grid-area: sidebar;
  background: var(--bg-elevated);
  border-right: 1px solid var(--border);
  padding: 28px 0;
  overflow-y: auto;
  position: sticky; top: 80px;
  height: calc(100vh - 80px);
}
.sidebar-section { padding: 0 22px 24px; }
.sidebar-section + .sidebar-section { border-top: 1px solid var(--border); padding-top: 24px; }
.sidebar-title {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.progress-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-xs);
}
.progress-row { display: flex; gap: 4px; }
.progress-stat {
  flex: 1;
  padding: 0 4px;
  text-align: center;
}
.progress-stat + .progress-stat {
  border-left: 1px solid var(--border);
}
.progress-num {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text-primary);
}
.progress-num.copper { color: var(--copper); }
.progress-num.success { color: var(--success); }
.progress-num.warning { color: var(--warning); }
.progress-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-top: 6px;
}

.cat-list { list-style: none; }
.cat-item {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  margin-bottom: 1px;
  font-size: 13px;
  font-family: var(--font-body);
  color: var(--text-secondary);
  position: relative;
  transition: var(--transition);
  cursor: pointer;
}
.cat-item:hover {
  background: var(--bg-stone);
}
.cat-item:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: -2px;
}
.cat-item.active {
  background: var(--white);
  color: var(--text-primary);
  font-weight: 500;
  box-shadow: var(--shadow-xs);
  border-left: 2px solid var(--copper);
  padding-left: 10px;
}
.cat-item.active:hover {
  background: var(--white);
}
/* Status dot: red = has open work, green = all done/deferred for today, gray = empty */
.cat-status {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--stone);
  flex-shrink: 0;
  display: grid; place-items: center;
  font-size: 9px;
  background: var(--stone);
  color: var(--white);
  font-weight: 700;
  transition: var(--transition);
}
/* Has open work today — red */
.cat-item.has-open .cat-status {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--white);
}
/* All resolved for today — green */
.cat-item.all-done .cat-status {
  background: var(--success);
  border-color: var(--success);
  color: var(--white);
}
/* All deferred-today — amber (resolved but rolled forward) */
.cat-item.all-deferred .cat-status {
  background: var(--warning);
  border-color: var(--warning);
  color: var(--white);
}
.cat-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cat-count {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg-stone);
  padding: 2px 7px;
  border-radius: 4px;
  min-width: 26px;
  text-align: center;
  line-height: 1.4;
}
.cat-item.active .cat-count {
  background: var(--copper-soft);
  color: var(--copper-deep);
}
/* "Currently viewing" indicator when SOC is in a category other than the natural active one */
.cat-item.viewing {
  background: var(--white);
  box-shadow: var(--shadow-xs);
  border-left: 2px solid var(--slate);
  padding-left: 10px;
}

.eod-button {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 14px;
  background: var(--slate);
  color: var(--white);
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.01em;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}
.eod-button:hover {
  background: var(--slate-90);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

/* ============================================================
   MAIN
   ============================================================ */
.main {
  grid-area: main;
  padding: 40px 48px 80px;
  max-width: 1240px;
  width: 100%;
}

.category-header { margin-bottom: 32px; }
.cat-eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 12px;
  font-weight: 500;
}
.cat-eyebrow .pill {
  padding: 3px 9px;
  border-radius: 4px;
  background: var(--copper-soft);
  color: var(--copper-deep);
  font-weight: 600;
  letter-spacing: 0.10em;
}
.cat-eyebrow .hard-flag {
  color: var(--danger);
  font-weight: 600;
  letter-spacing: 0.10em;
}
.cat-title {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--text-primary);
  margin-bottom: 10px;
}
.cat-desc {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-secondary);
  max-width: 760px;
  line-height: 1.65;
}
.cat-banner {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 18px;
  padding: 12px 16px;
  background: var(--danger-bg);
  border: 1px solid rgba(169, 61, 51, 0.20);
  border-left: 3px solid var(--danger);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--danger);
  font-weight: 500;
}
.cat-banner.warning {
  background: var(--warning-bg);
  border-color: rgba(201, 155, 69, 0.25);
  border-left-color: var(--warning);
  color: var(--copper-deep);
}
.cat-banner.info {
  background: var(--info-bg);
  border-color: rgba(44, 62, 80, 0.10);
  border-left-color: var(--slate);
  color: var(--slate);
}
.cat-banner.uc {
  background: repeating-linear-gradient(45deg, rgba(184,134,11,0.09), rgba(184,134,11,0.09) 11px, rgba(184,134,11,0.18) 11px, rgba(184,134,11,0.18) 22px);
  border: 1px solid rgba(184,134,11,0.55);
  border-left-color: #b8860b;
  color: #7a5600;
}
.uc-flag { font-size: 0.92em; vertical-align: middle; }

/* ============================================================
   TASK CARDS
   ============================================================ */
.task-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.task-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  transition: var(--transition);
  position: relative;
  box-shadow: var(--shadow-xs);
}
.task-card::before {
  content: '';
  position: absolute;
  left: -1px; top: -1px; bottom: -1px;
  width: 3px;
  border-radius: var(--radius) 0 0 var(--radius);
  background: var(--stone);
}
.task-card.priority-high::before { background: var(--danger); }
.task-card.priority-med::before  { background: var(--copper); }
.task-card.priority-low::before  { background: var(--slate-30); }

.task-card:hover {
  border-color: var(--border-strong);
  background: var(--bg-card-hover);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.task-card.complete {
  background: var(--bg-elevated);
  opacity: 0.65;
  box-shadow: none;
}
.task-card.complete::before { background: var(--success); }
.task-card.complete:hover { transform: none; }
.task-card.deferred-today,
.task-card.deferred-tomorrow {
  background: var(--bg-elevated);
  border-style: dashed;
  border-color: var(--warning);
}
.task-card.deferred-today::before,
.task-card.deferred-tomorrow::before { background: var(--warning); }

.task-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}
.task-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--text-primary);
}
.task-card.complete .task-title { text-decoration: line-through; color: var(--text-muted); }

/* Done-today footer — finished items collect here, out of the active list */
.done-today { margin-top: 18px; border-top: 1px dashed var(--border); padding-top: 10px; }
.done-today > summary { cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 12px; color: var(--text-secondary); letter-spacing: 0.02em; list-style: none; user-select: none; }
.done-today > summary::-webkit-details-marker { display: none; }
.done-today > summary::before { content: '\25B8  '; color: var(--text-muted); }
.done-today[open] > summary::before { content: '\25BE  '; }
.done-list { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; }
.done-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); padding: 4px 6px; border-radius: 6px; }
.done-row:hover { background: rgba(0,0,0,0.03); }
.done-check { color: var(--success); font-weight: 700; }
.done-title { flex: 1; text-decoration: line-through; }
.done-tag { text-decoration: none; font-size: 10px; font-weight: 600; color: var(--text-secondary); background: rgba(0,0,0,0.06); padding: 1px 6px; border-radius: 10px; margin-left: 4px; }
.done-undo { font-size: 11px; font-weight: 600; color: var(--copper, #b8860b); background: transparent; border: 1px solid var(--border); border-radius: 6px; padding: 2px 8px; cursor: pointer; }
.done-undo:hover { background: var(--copper, #b8860b); color: #fff; border-color: transparent; }

.task-meta {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 8px;
}
.tag {
  display: inline-flex; align-items: center;
  padding: 3px 9px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  text-transform: uppercase;
  line-height: 1.6;
}
.tag.id      { color: var(--copper-deep); border-color: var(--copper-edge); background: var(--copper-soft); }
.tag.danger  { color: var(--danger); border-color: rgba(169,61,51,0.25); background: var(--danger-bg); }
.tag.warning { color: var(--copper-deep); border-color: rgba(201,155,69,0.30); background: var(--warning-bg); }
.tag.success { color: var(--success); border-color: rgba(31,122,79,0.25); background: var(--success-bg); }

.task-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px 28px;
  margin: 14px 0;
  padding: 14px 16px;
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.detail { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.detail-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-muted);
}
.detail-value {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  word-break: break-word;
}
.detail-value.mono { font-family: var(--font-mono); font-size: 12px; font-weight: 500; }

.task-body {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 10px 0 0;
}

.task-actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--border-strong);
  background: var(--white);
  color: var(--text-primary);
  transition: var(--transition);
  white-space: nowrap;
}
.btn:hover {
  background: var(--bg-elevated);
  border-color: var(--slate-30);
}
.btn.primary {
  background: var(--copper);
  border-color: var(--copper);
  color: var(--white);
  font-weight: 600;
  box-shadow: 0 1px 2px var(--copper-glow);
}
.btn.primary:hover {
  background: var(--copper-deep);
  border-color: var(--copper-deep);
  box-shadow: 0 2px 6px var(--copper-glow);
}
.btn.success {
  background: var(--success);
  border-color: var(--success);
  color: var(--white);
}
.btn.success:hover { background: #195F3D; border-color: #195F3D; }
.btn.slate {
  background: var(--slate);
  border-color: var(--slate);
  color: var(--white);
  font-weight: 600;
}
.btn.slate:hover { background: var(--slate-90); border-color: var(--slate-90); }
.btn.ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text-secondary);
}
.btn.ghost:hover {
  background: var(--bg-elevated);
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--copper);
  text-decoration: none;
  letter-spacing: 0.02em;
  font-weight: 500;
  transition: var(--transition);
}
.btn-link:hover { color: var(--copper-deep); text-decoration: underline; }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty {
  text-align: center;
  padding: 64px 24px;
  background: var(--bg-card);
  border: 1px dashed var(--stone);
  border-radius: var(--radius);
}
.empty-mark {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--success-bg);
  color: var(--success);
  display: grid; place-items: center;
  margin: 0 auto 16px;
  font-size: 22px;
  font-weight: 700;
}
.empty-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text-primary);
}
.empty-desc { color: var(--text-secondary); font-size: 13px; }

/* Findings probe notice — shows when ST endpoint discovery hasn't found
   the right URL yet. Disappears once a working endpoint is identified. */
.findings-probe-notice {
  position: relative;
  background: var(--warning-bg, #fff7e6);
  border: 1px solid var(--warning, #c68a2e);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin-bottom: 22px;
}
.diagnostic-dismiss {
  position: absolute;
  top: 10px;
  right: 12px;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  opacity: 0.55;
  transition: opacity 0.15s, background 0.15s;
}
.diagnostic-dismiss:hover { opacity: 1; background: rgba(0,0,0,0.06); }

/* Landing summary grid — the default view on initial load. Each card is
   a quick read of one category's state, color-coded by urgency. */
.landing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 8px;
}
.landing-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  padding: 16px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card-bg, #fff);
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: transform 0.1s, box-shadow 0.15s, border-color 0.15s;
  min-height: 130px;
}
.landing-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
  border-color: var(--copper, #c68a2e);
}
.landing-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}
.landing-card-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.3;
}
.landing-card-suggested {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(198,138,46,0.15);
  color: var(--copper, #c68a2e);
  white-space: nowrap;
  flex-shrink: 0;
}
.landing-card-count {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  margin: 4px 0 6px;
}
.landing-card-state {
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.landing-card-breakdown {
  display: flex;
  gap: 10px;
  margin-top: auto;
  padding-top: 8px;
  font-size: 11px;
  color: var(--text-secondary);
}
.landing-bd-done { color: var(--success, #2e7d32); }
.landing-bd-def { color: var(--warning, #c68a2e); }
/* Color states */
.landing-card-active .landing-card-count { color: var(--copper, #c68a2e); }
.landing-card-active { border-left: 3px solid var(--copper, #c68a2e); }
.landing-card-deferred .landing-card-count { color: var(--warning, #c68a2e); }
.landing-card-empty .landing-card-count { color: var(--success, #2e7d32); opacity: 0.7; }
.landing-card-loading { opacity: 0.6; cursor: wait; }
.landing-card-loading .landing-card-count { color: var(--text-secondary); }
.landing-card-later { border-left: 3px solid var(--copper, #c68a2e); }

/* Today entry at the top of the sidebar — visually prominent so it reads
   as the home/dashboard anchor, not just another workflow row. Overrides
   the base .cat-item grid so the icon can be larger and the layout
   feels button-like rather than list-like. */
.cat-item-today {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  margin-bottom: 14px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(198,138,46,0.10), rgba(198,138,46,0.04));
  border: 1px solid rgba(198,138,46,0.30);
  border-left: 3px solid var(--copper);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: var(--transition);
  position: relative;
}
.cat-item-today::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -8px;
  height: 1px;
  background: var(--border);
}
.cat-item-today:hover {
  background: linear-gradient(135deg, rgba(198,138,46,0.18), rgba(198,138,46,0.08));
  border-color: rgba(198,138,46,0.50);
  transform: translateX(1px);
}
.cat-item-today .cat-status {
  /* Override the small dot styling — for Today we want a real icon. */
  width: 28px;
  height: 28px;
  border: none;
  background: var(--copper);
  border-radius: 6px;
  font-size: 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.cat-item-today .cat-label {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  flex: 1;
}
.cat-item-today .cat-count { display: none; }
.cat-item-today.viewing {
  background: linear-gradient(135deg, rgba(198,138,46,0.22), rgba(198,138,46,0.12));
  border-color: var(--copper);
  box-shadow: 0 2px 4px rgba(198,138,46,0.15);
}

/* Callbacks — simple form + list UI for the SOC's personal to-do items. */
.callback-form {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}
.callback-input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  background: var(--card-bg, #fff);
  color: var(--text-primary);
}
.callback-input:focus {
  outline: none;
  border-color: var(--copper, #c68a2e);
  box-shadow: 0 0 0 2px rgba(198,138,46,0.15);
}
.callback-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.callback-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.callback-check {
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--border);
  border-radius: 4px;
  background: transparent;
  font-size: 14px;
  font-weight: 700;
  color: var(--success, #2e7d32);
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.callback-check:hover { border-color: var(--copper, #c68a2e); }
.callback-text {
  flex: 1;
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.45;
  word-break: break-word;
}
.callback-delete {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  opacity: 0.5;
  transition: opacity 0.15s, background 0.15s;
  flex-shrink: 0;
}
.callback-delete:hover { opacity: 1; background: rgba(244,67,54,0.08); color: #c62828; }
.callback-done .callback-text {
  text-decoration: line-through;
  color: var(--text-secondary);
}
.callback-done .callback-check {
  background: var(--success, #2e7d32);
  color: white;
  border-color: var(--success, #2e7d32);
}
.callback-empty {
  text-align: center;
  padding: 30px 20px;
  color: var(--text-secondary);
  font-size: 13px;
  font-style: italic;
}
.callback-done-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.callback-done-section summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
  padding: 4px 0;
}

/* Email parser test console — dev tool styling. Two-column layout on
   wide screens, stacked on narrow. */
.parser-test-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 8px;
}
@media (max-width: 900px) {
  .parser-test-grid { grid-template-columns: 1fr; }
}
.parser-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 6px;
  margin-top: 12px;
}
.parser-label:first-child { margin-top: 0; }
.parser-input, .parser-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
  font-family: var(--font-mono, monospace);
  background: var(--card-bg, #fff);
  color: var(--text-primary);
  box-sizing: border-box;
  line-height: 1.5;
}
.parser-textarea { resize: vertical; min-height: 150px; }
.parser-input:focus, .parser-textarea:focus {
  outline: none;
  border-color: var(--copper, #c68a2e);
  box-shadow: 0 0 0 2px rgba(198,138,46,0.15);
}
.parser-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.parser-output-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.parser-result-box {
  font-family: var(--font-mono, monospace);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text-primary);
  background: rgba(0,0,0,0.04);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 500px;
  overflow: auto;
}
.parser-empty {
  font-size: 13px;
  color: var(--text-secondary);
  font-style: italic;
  padding: 20px;
  border: 1px dashed var(--border);
  border-radius: 6px;
  text-align: center;
}
.parser-status {
  font-size: 12px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 6px;
  margin-bottom: 10px;
}
.parser-status code {
  font-family: var(--font-mono, monospace);
  background: rgba(0,0,0,0.06);
  padding: 1px 5px;
  border-radius: 3px;
}
.parser-status-success {
  background: rgba(76,175,80,0.10);
  color: #2e7d32;
  border-left: 3px solid #4caf50;
}
.parser-status-warning {
  background: rgba(255,180,80,0.12);
  color: #b8860b;
  border-left: 3px solid rgba(255,180,80,0.8);
}

/* Integration-pending notice — shows on Email Drafts + PM Reports until
   the Google APIs are wired in via the proxy. Visually similar to the
   diagnostic notices but with a constructionish accent so it reads as
   "in progress" rather than "something is wrong". */
.integration-notice {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: rgba(120,170,255,0.08);
  border: 1px solid rgba(120,170,255,0.30);
  border-left: 3px solid #5b8edd;
  border-radius: 8px;
  padding: 14px 16px;
  margin: 12px 0 18px;
}
.integration-notice-icon { font-size: 22px; line-height: 1; flex-shrink: 0; padding-top: 1px; }
.integration-notice-body { flex: 1; }
.integration-notice-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.integration-notice-body p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.integration-notice-body code {
  font-family: var(--font-mono, monospace);
  background: rgba(0,0,0,0.06);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 12px;
}

/* Document/draft cards — used by both Email Drafts and PM Reports. */
.gdoc-card-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gdoc-card {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg, #fff);
}
.gdoc-card-body { flex: 1; min-width: 0; }
.gdoc-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
  font-size: 11.5px;
  color: var(--text-secondary);
}
.gdoc-card-to { font-weight: 600; }
.gdoc-card-time { font-family: var(--font-mono, monospace); }
.gdoc-card-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 6px;
  line-height: 1.35;
  word-break: break-word;
}
.gdoc-card-snippet {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.gdoc-card-snippet code {
  font-family: var(--font-mono, monospace);
  background: rgba(0,0,0,0.05);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 11.5px;
}
.gdoc-card-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  justify-content: center;
  flex-shrink: 0;
  min-width: 140px;
}
.gdoc-empty {
  font-size: 13px;
  color: var(--text-secondary);
  font-style: italic;
  padding: 24px 20px;
  border: 1px dashed var(--border);
  border-radius: 6px;
  text-align: center;
}
.mock-pill {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(120,170,255,0.18);
  color: #4a7bd6;
}
.btn-ghost {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  opacity: 0.5;
}
.btn-ghost:hover { opacity: 1; background: rgba(244,67,54,0.08); color: #c62828; }

/* Mock-entry form for previewing the workflow. Collapsed by default. */
.mock-form-wrap {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px dashed var(--border);
}
.mock-form-wrap summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 0;
  user-select: none;
}
.mock-form {
  margin-top: 12px;
  padding: 14px 16px;
  background: rgba(0,0,0,0.02);
  border: 1px solid var(--border);
  border-radius: 6px;
}

/* PM Reports folder link and sent-today summary */
.pm-folder-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.pm-folder-link a {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  word-break: break-all;
  color: var(--copper, #c68a2e);
}
.pm-send-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-primary);
}
.pm-send-step:last-child { border-bottom: none; }
.pm-send-step a { color: var(--copper, #c68a2e); font-weight: 600; white-space: nowrap; }
.pm-send-step code { font-family: var(--font-mono, monospace); background: rgba(0,0,0,0.05); padding: 1px 5px; border-radius: 3px; font-size: 11.5px; }
.pm-send-stepnum {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--copper, #c68a2e);
  color: #fff;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.pm-send-note { font-size: 11.5px; color: var(--text-secondary); margin-top: 4px; }
.find-urg-badge {
  font-size: 9px; font-weight: 700; letter-spacing: 0.06em;
  padding: 2px 7px; border-radius: 999px; text-transform: uppercase;
  color: #fff; flex-shrink: 0;
}
.find-urg-critical { background: #c62828; }
.find-urg-high     { background: #e65100; }
.find-urg-medium   { background: #f9a825; color: #4a3500; }
.find-urg-low      { background: #78909c; }
.find-urg-unspecified { background: #b0bec5; color: #2a3338; }
.pm-sent-summary {
  background: rgba(46,125,50,0.08);
  border-left: 3px solid #4caf50;
  padding: 10px 14px;
  border-radius: 6px;
  margin: 0 0 14px;
  font-size: 12.5px;
  color: var(--text-primary);
}
.pm-sent-list {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--text-secondary);
  font-family: var(--font-mono, monospace);
}

/* Tech-Requested Appointment cards — parsed alerts from ServiceTitan
   email notifications. Larger than email-draft / pm-report cards because
   each has more structured fields the SOC needs to act on. */
.treq-card-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.treq-card {
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--copper, #c68a2e);
  border-radius: 8px;
  background: var(--card-bg, #fff);
}
.treq-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.treq-card-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  flex: 1;
  min-width: 200px;
}
.treq-card-tech { color: var(--text-primary); }
.treq-card-sep {
  color: var(--text-secondary);
  margin: 0 6px;
  font-weight: 400;
}
.treq-card-job {
  font-family: var(--font-mono, monospace);
  font-size: 14px;
  color: var(--copper, #c68a2e);
}
.treq-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-secondary);
  flex-wrap: wrap;
}
.treq-card-time { font-family: var(--font-mono, monospace); }
.treq-fields {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px 0;
  padding: 10px 12px;
  background: rgba(0,0,0,0.025);
  border-radius: 5px;
}
.treq-field {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
}
.treq-field-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-secondary);
  min-width: 110px;
  flex-shrink: 0;
}
.treq-field-value {
  color: var(--text-primary);
  word-break: break-word;
  flex: 1;
}
.treq-explanation {
  font-size: 13px;
  line-height: 1.55;
  margin: 12px 0;
  padding: 10px 14px;
  background: rgba(198,138,46,0.08);
  border-left: 3px solid var(--copper, #c68a2e);
  border-radius: 4px;
  color: var(--text-primary);
}
.treq-explanation q {
  font-style: italic;
  color: var(--text-primary);
}
.treq-warning {
  margin-bottom: 10px;
  padding: 8px 12px;
  background: rgba(255,180,80,0.12);
  border-left: 3px solid rgba(255,180,80,0.8);
  border-radius: 4px;
  font-size: 12px;
  color: #b8860b;
}
.treq-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.probe-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--warning, #c68a2e);
  margin-bottom: 8px;
}
.probe-help {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-primary);
  margin-bottom: 12px;
}
.probe-list {
  display: flex; flex-direction: column; gap: 6px;
  background: rgba(255,255,255,0.6);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
}
.probe-row {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 12px;
  line-height: 1.5;
}
.probe-path {
  font-family: var(--font-mono);
  color: var(--text-primary);
  word-break: break-all;
}
.probe-status {
  font-family: var(--font-mono);
  color: var(--text-secondary);
  white-space: nowrap;
}

/* ============================================================
   CATEGORY NAVIGATION
   ============================================================ */
.cat-nav {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.cat-nav-info {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-muted);
}
.cat-nav-info b { font-weight: 600; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  grid-area: footer;
  padding: 18px 48px;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-muted);
}
.footer-brand {
  display: flex; align-items: center; gap: 8px;
}
.footer-mark {
  width: 14px; height: 14px;
}
.footer-mark polygon { fill: var(--copper); }

/* ============================================================
   MODAL
   ============================================================ */
.modal-overlay {
  position: fixed; inset: 0;
  background: var(--bg-overlay);
  backdrop-filter: blur(4px);
  display: grid; place-items: center;
  z-index: 100;
  padding: 24px;
  animation: fadeIn 200ms ease;
}
.modal {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  max-width: 760px;
  width: 100%;
  max-height: 90vh;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
  animation: slideUp 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.modal-head {
  padding: 26px 32px 18px;
  border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px;
}
.modal-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.modal-sub {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 4px;
}
.modal-close {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 22px;
  flex-shrink: 0;
  transition: var(--transition);
}
.modal-close:hover { background: var(--bg-elevated); color: var(--text-primary); }
.modal-body { padding: 22px 32px; overflow-y: auto; flex: 1; }
.modal-foot {
  padding: 18px 32px;
  border-top: 1px solid var(--border);
  background: var(--bg-elevated);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  display: flex; justify-content: flex-end; gap: 10px;
}

/* Email preview */
.email-preview {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.email-head {
  padding: 14px 18px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.email-head-row { display: flex; gap: 8px; padding: 2px 0; }
.email-head-label {
  font-family: var(--font-mono);
  color: var(--text-muted);
  width: 64px;
  flex-shrink: 0;
  font-weight: 500;
}
.email-head-val {
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight: 500;
}
.email-head-val .subject { font-weight: 600; color: var(--text-primary); }
.email-body {
  padding: 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.65;
  color: var(--text-secondary);
  white-space: pre-wrap;
  max-height: 420px;
  overflow-y: auto;
}
.email-body strong { color: var(--text-primary); font-weight: 600; }

/* ============================================================
   TOAST
   ============================================================ */
.toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--slate);
  color: var(--white);
  padding: 12px 22px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  z-index: 200;
  box-shadow: var(--shadow-lg);
  animation: slideUp 240ms cubic-bezier(0.4, 0, 0.2, 1);
  display: flex; align-items: center; gap: 10px;
}
.toast::before {
  content: '✓';
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--success);
  display: grid; place-items: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--white);
}

/* ============================================================
   OVERRIDE EXIT RIBBON  (prominent return-to-workflow bar.
   Uses Slate so it reads as system navigation, not as part of
   Later Today's copper-accented page content.)
   ============================================================ */
.override-bar {
  position: sticky;
  top: 80px;
  z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px;
  margin: -16px 0 28px;
  padding: 14px 14px 14px 20px;
  background: var(--slate);
  color: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 4px 18px rgba(44, 62, 80, 0.22), 0 0 0 4px var(--bg-base);
  animation: slideUp 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
.override-bar-info {
  display: flex; flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.override-bar-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--copper);
  line-height: 1.2;
}
.override-bar-dest {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.3;
}
.override-bar-dest b {
  font-weight: 700;
  color: var(--white);
}
.override-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--slate);
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  background: var(--copper);
  border: 1px solid var(--copper);
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  transition: var(--transition);
}
.override-back:hover {
  background: var(--white);
  border-color: var(--white);
  color: var(--slate);
  transform: translateX(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.22);
}
.override-back:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
}
.override-back span:first-child {
  font-size: 16px;
  line-height: 1;
  font-weight: 800;
}

/* Footer exit — appears at the bottom of the page so the way back is reachable
   even after scrolling through a long Later Today list. */
.override-exit-footer {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: center;
}
.override-exit-btn {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  padding: 11px 22px;
  letter-spacing: 0.02em;
}

/* ============================================================
   LATER TODAY  (catch-up bucket at the bottom of the workflow)
   ============================================================ */
.cat-item.later-today-cat {
  margin-top: 14px;
  padding-top: 11px;
  border-top: 1px dashed var(--copper-edge);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  position: relative;
  cursor: pointer;
}
.cat-item.later-today-cat:hover {
  background: var(--copper-soft);
}
.cat-item.later-today-cat:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: -2px;
}

/* Review mode — once every workflow category is cleared (only Later Today
   remains or everything is done), every sidebar item becomes clickable so the
   SOC can look back at what they completed. Subtle but distinct from the
   Later Today copper treatment — this is navigation chrome, not category branding. */
.cat-item.review-clickable {
  cursor: pointer;
}
.cat-item.review-clickable:hover {
  background: var(--bg-card-hover);
}
.cat-item.review-clickable:focus-visible {
  outline: 2px solid var(--slate-30);
  outline-offset: -2px;
}
/* When the SOC is actively viewing one in review mode, mark it like the
   natural active state would so the sidebar visually anchors them. */
.cat-item.review-viewing {
  background: var(--white);
  color: var(--text-primary);
  font-weight: 500;
  box-shadow: var(--shadow-xs);
  border-left: 2px solid var(--slate);
  padding-left: 10px;
}
/* A subtle hint banner inside the sidebar when review mode kicks on. */
.review-mode-hint {
  margin: 0 0 12px;
  padding: 8px 12px;
  background: var(--success-bg);
  border: 1px solid rgba(31, 122, 79, 0.20);
  border-left: 3px solid var(--success);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.5;
  color: var(--success);
  font-weight: 500;
}
.review-mode-hint b {
  font-weight: 700;
  letter-spacing: 0.02em;
}
/* When deferred items are waiting in this bucket, the row gets a copper accent
   regardless of whether the category is the active one or still locked. */
.cat-item.later-today-pending {
  background: linear-gradient(90deg, var(--copper-soft) 0%, transparent 100%);
  border-left: 2px solid var(--copper);
  padding-left: 10px;
  color: var(--copper-deep) !important;
  font-weight: 600;
}
.cat-item.later-today-pending .cat-status {
  border-color: var(--copper);
  background: var(--copper);
  color: var(--white);
  font-weight: 700;
}
.cat-item.later-today-pending .cat-count {
  background: var(--copper);
  color: var(--white);
  font-weight: 700;
}
.cat-item.later-today-cat.active {
  background: linear-gradient(135deg, var(--copper-soft) 0%, var(--white) 100%);
  border-left: 3px solid var(--copper);
  box-shadow: 0 0 0 1px var(--copper-edge), var(--shadow);
  color: var(--copper-deep);
}
/* Active override view — the entry becomes a full copper pill to make it
   unmistakable that this is where the user currently is, and it doubles as
   the return-to-workflow toggle. */
.cat-item.later-today-viewing {
  background: var(--copper) !important;
  border-left: 3px solid var(--copper-deep) !important;
  color: var(--white) !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(184, 115, 51, 0.30) !important;
}
.cat-item.later-today-viewing .cat-label {
  color: var(--white) !important;
}
.cat-item.later-today-viewing .cat-status {
  background: var(--white) !important;
  border-color: var(--white) !important;
  color: var(--copper) !important;
}
.cat-item.later-today-viewing .cat-count {
  background: rgba(255, 255, 255, 0.22) !important;
  color: var(--white) !important;
}
.cat-item.later-today-viewing:hover {
  background: var(--copper-deep) !important;
}
/* Hint text after the label when viewing — tells the SOC clicking again exits. */
.cat-item.later-today-viewing::after {
  content: '✕ TAP TO EXIT';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.10em;
  background: rgba(0, 0, 0, 0.18);
  padding: 3px 6px;
  border-radius: 3px;
}
.cat-item.later-today-viewing .cat-count {
  display: none;
}

/* Banner inside the main view */
.cat-banner.later-today {
  background: linear-gradient(135deg, var(--copper-soft) 0%, var(--warning-bg) 100%);
  border: 1px solid var(--copper-edge);
  border-left: 3px solid var(--copper);
  color: var(--copper-deep);
  font-weight: 600;
}

/* Eyebrow pill + flag in the category header */
.cat-eyebrow .pill.later-today {
  background: var(--copper);
  color: var(--white);
  font-weight: 700;
  letter-spacing: 0.14em;
}
.later-today-flag {
  color: var(--copper-deep);
  font-weight: 700;
  letter-spacing: 0.10em;
}

/* Source-of-deferral badge on each card inside Later Today */
.cat-source-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--copper-deep);
  background: var(--copper-soft);
  border: 1px solid var(--copper-edge);
  padding: 3px 9px;
  border-radius: 4px;
  margin-bottom: 10px;
}
.cat-source-badge::before { content: '↻  '; opacity: 0.7; }

/* Card highlight for items surfaced in Later Today.
   Override the default deferred-today dashed look — these aren't background items
   to skim past, they're THE work right now. */
.task-card.later-today-source {
  background: linear-gradient(180deg, rgba(184,115,51,0.04) 0%, var(--white) 40%);
  border: 1px solid var(--copper-edge);
  border-style: solid;
  box-shadow: 0 1px 2px rgba(184,115,51,0.06), 0 4px 14px rgba(184,115,51,0.10);
}
.task-card.later-today-source::before {
  background: var(--copper) !important;
  width: 4px;
}
.task-card.later-today-source:hover {
  border-color: var(--copper);
  background: linear-gradient(180deg, rgba(184,115,51,0.07) 0%, var(--bg-card-hover) 40%);
}

/* ============================================================
   PARTS TAG PICKER  (category 3 Sold Estimates — five-tag complete)
   ============================================================ */
.tag-picker-row {
  display: flex; flex-wrap: wrap; gap: 8px;
  width: 100%;
}
.tag-picker-row .btn {
  flex: 1 1 calc(33.333% - 6px);
  min-width: 160px;
  justify-content: center;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.tag-picker-defer-row {
  display: flex; flex-wrap: wrap; gap: 8px;
  width: 100%;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}

/* Danger-action button — for "Need to Order" tag (most pending state) */
.btn.danger-action {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--white);
  font-weight: 600;
}
.btn.danger-action:hover {
  background: #8B3329;
  border-color: #8B3329;
}

/* Tag-button hover lift */
.btn.tag-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(44,62,80,0.10);
}
/* Once a tag is applied: the chosen one stands out, the rest recede. */
.btn.tag-btn.tag-muted {
  opacity: 0.3;
  filter: grayscale(0.7);
  transition: opacity .15s ease, filter .15s ease;
}
.btn.tag-btn.tag-muted:hover {
  opacity: 0.9;
  filter: grayscale(0.05);
}
.btn.tag-btn.tag-chosen {
  outline: 3px solid rgba(28,46,38,0.6);
  outline-offset: 1px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(44,62,80,0.25);
}

/* The applied-tag block on completed cards */
.parts-tag-block {
  margin: 14px 0 0;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  font-size: 13px;
  animation: fadeIn 220ms ease;
}
.parts-tag-block.success {
  background: var(--success-bg);
  border-left: 3px solid var(--success);
}
.parts-tag-block.warning {
  background: var(--warning-bg);
  border-left: 3px solid var(--warning);
}
.parts-tag-block.danger {
  background: var(--danger-bg);
  border-left: 3px solid var(--danger);
}
.parts-tag-label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-muted);
}
.parts-tag-value {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}
.parts-tag-cascade {
  margin-left: auto;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--copper-deep);
}
.parts-tag-cascade.success {
  color: var(--success);
}
/* Per-tag reminder — the ServiceTitan-side action the SOC still has to do after
   tagging in the hub. Renders as a full-width row inside the parts-tag block. */
.parts-tag-reminder {
  width: 100%;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px dashed rgba(184, 115, 51, 0.30);
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-primary);
}
.parts-tag-reminder-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--copper-deep);
  margin-right: 4px;
}

/* ============================================================
   ESCALATION  (flag a task to the Service Manager with a reason)
   ============================================================ */

/* Tag that appears in the task-meta row next to the title */
.tag.escalated {
  background: var(--slate);
  color: var(--white);
  border-color: var(--slate);
  font-weight: 700;
  letter-spacing: 0.08em;
  box-shadow: 0 1px 3px rgba(44, 62, 80, 0.18);
}

/* Card-level treatment when escalated — slate top stripe + subtle glow */
.task-card.escalated {
  border-top: 3px solid var(--slate);
  padding-top: 17px;
  box-shadow: 0 1px 2px rgba(44, 62, 80, 0.06), 0 6px 18px rgba(44, 62, 80, 0.10);
}
.task-card.escalated:hover {
  box-shadow: 0 2px 4px rgba(44, 62, 80, 0.08), 0 10px 26px rgba(44, 62, 80, 0.14);
}

/* Reason block on the card — slate-themed to distinguish from notes (stone) */
.task-escalation {
  margin: 14px 0 0;
  padding: 12px 14px;
  background: var(--slate);
  color: var(--white);
  border-radius: var(--radius-sm);
  animation: fadeIn 220ms ease;
}
.task-escalation-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
}
.task-escalation-icon {
  font-size: 14px;
  font-weight: 800;
  color: var(--copper);
  line-height: 1;
}
.task-escalation-label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--copper);
}
.task-escalation-time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 500;
}
.task-escalation-edit {
  margin-left: auto;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  color: var(--copper);
  padding: 3px 8px;
  border-radius: 3px;
  background: rgba(184, 115, 51, 0.12);
  border: 1px solid rgba(184, 115, 51, 0.30);
  transition: var(--transition);
}
.task-escalation-edit:hover {
  background: var(--copper);
  color: var(--white);
  border-color: var(--copper);
}
.task-escalation-text {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.94);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Add-escalation button in the actions row — slate-tinted to signal it's
   different from the defer actions but not as primary as Complete. */
.btn.escalate-add {
  background: transparent;
  border: 1px solid var(--slate-30);
  color: var(--slate);
  font-weight: 600;
}
.btn.escalate-add:hover {
  background: var(--slate);
  border-color: var(--slate);
  color: var(--white);
}

/* Tech-info-request block — surfaces on invoice cards when the SOC has asked
   the tech for missing info via ServiceTitan. Warm-amber tint (distinct from
   escalation's slate) so the two block types are clearly different states. */
.task-tech-info {
  margin: 14px 0 0;
  padding: 12px 14px;
  background: rgba(201, 155, 69, 0.10);
  border: 1px solid rgba(201, 155, 69, 0.28);
  border-left: 3px solid var(--warning);
  border-radius: var(--radius-sm);
  animation: fadeIn 220ms ease;
}
.task-tech-info-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
}
.task-tech-info-icon { font-size: 14px; line-height: 1; }
.task-tech-info-label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--copper-deep);
}
.task-tech-info-time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 500;
}
.task-tech-info-edit {
  margin-left: auto;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  color: var(--copper-deep);
  padding: 3px 8px;
  border-radius: 3px;
  background: rgba(184, 115, 51, 0.12);
  border: 1px solid rgba(184, 115, 51, 0.30);
  transition: var(--transition);
}
.task-tech-info-edit:hover {
  background: var(--copper);
  color: var(--white);
  border-color: var(--copper);
}
.task-tech-info-text {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}
.task-tech-info-meta {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--text-secondary);
  font-style: italic;
  margin-top: 6px;
}

/* Action button — warm-amber outlined so it visually pairs with the block
   it produces, but reads as a calmer action than Escalate to SM. */
.btn.tech-info-add {
  background: transparent;
  border: 1px solid rgba(201, 155, 69, 0.45);
  color: var(--copper-deep);
  font-weight: 600;
}
.btn.tech-info-add:hover {
  background: var(--warning);
  border-color: var(--warning);
  color: var(--white);
}

/* Escalation modal form — distinct enough from EOD email preview that they
   don't visually blur together. */
.escalation-form {
  margin-bottom: 8px;
}
.escalation-form-label {
  display: block;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 10px;
}
.escalation-form-label .req {
  color: var(--danger);
  font-weight: 700;
}
.escalation-textarea {
  width: 100%;
  min-height: 100px;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  resize: vertical;
  transition: var(--transition);
}
.escalation-textarea:focus {
  outline: none;
  border-color: var(--slate);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(44, 62, 80, 0.10);
}
.escalation-textarea::placeholder {
  color: var(--text-muted);
  font-style: italic;
}

/* Inline note context shown above the textarea so the SOC sees what'll be
   forwarded automatically. */
.escalation-note-context {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--stone-light);
  border: 1px solid var(--border);
  border-left: 3px solid var(--slate);
  border-radius: var(--radius-sm);
  font-size: 12px;
  line-height: 1.5;
}
.escalation-note-label {
  display: block;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--slate);
  margin-bottom: 4px;
}
.escalation-note-text {
  display: block;
  font-family: var(--font-body);
  color: var(--text-primary);
  white-space: pre-wrap;
}

/* Disabled state for the Send button until reason has content */
.btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ============================================================
   TASK NOTES  (free-text context the SOC can add to any task)
   ============================================================ */
.task-note {
  margin: 14px 0 0;
  padding: 12px 14px;
  background: var(--stone-light);
  border: 1px solid var(--border);
  border-left: 3px solid var(--slate);
  border-radius: var(--radius-sm);
  animation: fadeIn 220ms ease;
}
.task-note-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
}
.task-note-icon {
  font-size: 13px;
  line-height: 1;
}
.task-note-label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--slate);
}
.task-note-time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 500;
}
.task-note-edit {
  margin-left: auto;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  color: var(--copper);
  padding: 3px 7px;
  border-radius: 3px;
  transition: var(--transition);
}
.task-note-edit:hover {
  background: var(--copper-soft);
  color: var(--copper-deep);
}
.task-note-text {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Deferred/Later-Today cards get a slightly warmer note treatment so the
   "why did I defer this" context jumps off the page when reviewing later. */
.task-card.deferred-today .task-note,
.task-card.later-today-source .task-note,
.task-card.deferred-tomorrow .task-note {
  background: var(--copper-soft);
  border-left-color: var(--copper);
}
.task-card.deferred-today .task-note-label,
.task-card.later-today-source .task-note-label,
.task-card.deferred-tomorrow .task-note-label {
  color: var(--copper-deep);
}

/* Editor — replaces note block while editing. */
.task-note-editor {
  margin: 14px 0 0;
  padding: 14px;
  background: var(--white);
  border: 1px solid var(--copper-edge);
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 3px var(--copper-soft);
  animation: fadeIn 200ms ease;
}
.task-note-editor-label {
  display: block;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--copper-deep);
  margin-bottom: 8px;
}
.task-note-textarea {
  width: 100%;
  min-height: 70px;
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  resize: vertical;
  transition: var(--transition);
}
.task-note-textarea:focus {
  outline: none;
  border-color: var(--copper);
  background: var(--white);
  box-shadow: 0 0 0 3px var(--copper-soft);
}
.task-note-textarea::placeholder {
  color: var(--text-muted);
  font-style: italic;
}
.task-note-editor-actions {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px;
}
.task-note-editor-hint {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  margin-right: auto;
  letter-spacing: 0.04em;
}

/* Add-note button — subtle in the actions row, becomes more inviting on hover. */
.btn.note-add {
  background: transparent;
  border: 1px dashed var(--border-strong);
  color: var(--text-secondary);
  font-weight: 500;
}
.btn.note-add:hover {
  border-style: solid;
  border-color: var(--copper);
  background: var(--copper-soft);
  color: var(--copper-deep);
}

/* Tomorrow-defer-blocked hint — shown on Critical findings where deferring to tomorrow
   would violate the 24-hour deadline. Visually obvious without looking like a button. */
.defer-blocked {
  display: inline-flex; align-items: center;
  padding: 7px 12px;
  background: var(--danger-bg);
  border: 1px solid rgba(169, 61, 51, 0.25);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--danger);
  letter-spacing: 0.01em;
  cursor: help;
}

/* Auto-defer hint — shown on invoices that the hub has auto-deferred (waiting on
   a PO that hasn't been received in ServiceTitan). Replaces action buttons since
   the SOC can't act until the underlying condition clears. */
.auto-defer-hint {
  display: inline-flex; align-items: center;
  padding: 8px 14px;
  background: var(--warning-bg);
  border: 1px solid rgba(201, 155, 69, 0.25);
  border-left: 3px solid var(--warning);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--copper-deep);
  line-height: 1.55;
  cursor: help;
}
.task-card.auto-deferred {
  background: var(--bg-elevated);
  border-style: dashed;
}
.task-card.auto-deferred::before {
  background: var(--warning);
}

/* ============================================================
   SALES EMAIL PICKER (Unsold Estimate Aging)
   Inline per-card picker for routing the estimate to a salesperson.
   Renders between partsTag block and the note/escalation blocks.
   ============================================================ */
.sales-email-block {
  margin: 14px 0 0;
  padding: 12px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 3px solid var(--copper);
  border-radius: var(--radius-sm);
  display: flex; flex-direction: column; gap: 8px;
  animation: fadeIn 220ms ease;
}
.sales-email-block.sent {
  border-left-color: var(--success);
  background: var(--success-bg);
}
.sales-email-label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-muted);
}
.sales-email-block.sent .sales-email-label {
  color: var(--success);
}
.sales-email-row {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.sales-email-select,
.sales-email-input {
  flex: 1 1 240px;
  min-width: 220px;
  padding: 8px 12px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-primary);
  background: var(--white);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  outline: none;
  transition: var(--transition);
}
.sales-email-select:focus,
.sales-email-input:focus {
  border-color: var(--copper);
  box-shadow: 0 0 0 3px var(--copper-soft);
}
.sales-email-input { font-family: var(--font-mono); font-size: 12.5px; }
.sales-email-addr {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.sales-email-sent-at {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--text-muted);
  margin-left: auto;
  font-style: italic;
}
.sales-email-hint {
  font-family: var(--font-body);
  font-size: 11.5px;
  color: var(--text-muted);
  font-style: italic;
}
.sales-email-manage-btn { font-size: 12px; padding: 7px 10px; }

/* Manage saved emails modal list */
.sales-email-manage-list {
  list-style: none;
  display: flex; flex-direction: column; gap: 6px;
}
.sales-email-manage-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.sales-email-manage-addr {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-primary);
  word-break: break-all;
}
.sales-email-manage-delete {
  font-size: 12px;
  padding: 6px 10px;
  color: var(--danger);
  border-color: rgba(169, 61, 51, 0.25);
}
.sales-email-manage-delete:hover {
  background: var(--danger-bg);
  border-color: var(--danger);
}

/* ============================================================
   MOBILE
   ============================================================ */
.menu-toggle { display: none; }

@media (max-width: 920px) {
  .app {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main"
      "footer";
  }
  .sidebar {
    position: fixed;
    top: 80px;
    left: -320px;
    width: 320px;
    height: calc(100vh - 80px);
    transition: left 280ms cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 60;
    box-shadow: 8px 0 32px rgba(44, 62, 80, 0.12);
  }
  .sidebar.open { left: 0; }
  .sidebar-backdrop {
    display: none;
    position: fixed; inset: 80px 0 0 0;
    background: var(--bg-overlay);
    z-index: 55;
  }
  .sidebar.open ~ .sidebar-backdrop { display: block; }

  .menu-toggle {
    display: grid; place-items: center;
    width: 36px; height: 36px;
    border-radius: var(--radius-sm);
    color: rgba(255,255,255,0.85);
    font-size: 22px;
    margin-right: 4px;
    transition: var(--transition);
  }
  .menu-toggle:hover { background: rgba(255,255,255,0.1); color: var(--white); }

  .header { padding: 0 16px; height: 72px; }
  .app { grid-template-rows: 72px 1fr auto; }
  .sidebar { top: 72px; height: calc(100vh - 72px); }
  .sidebar-backdrop { top: 72px; }

  .header-meta { gap: 14px; }
  .header-meta .meta-item { display: none; }

  .main { padding: 28px 18px 80px; }
  .cat-title { font-size: 28px; }
  .override-bar {
    top: 72px;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 14px 14px 14px 16px;
    margin: -10px 0 22px;
  }
  .override-back {
    justify-content: center;
    padding: 12px 18px;
    font-size: 14px;
  }
  .override-bar-eyebrow { font-size: 9px; }
  .override-bar-dest { font-size: 12px; }
  .footer { padding: 14px 18px; flex-direction: column; gap: 10px; align-items: flex-start; }
  .modal { max-height: 95vh; }
  .modal-head, .modal-body, .modal-foot { padding-left: 22px; padding-right: 22px; }
  .task-actions { gap: 6px; }
  .task-card { padding: 18px; }
  .brand-name { font-size: 14px; }
  .brand-sub { font-size: 10px; letter-spacing: 0.10em; }
  .brand-mark { height: 36px; }
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--stone); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--slate-30); background-clip: padding-box; border: 2px solid transparent; }
/* Loading overlay */
.loading-overlay { position:fixed; inset:0; background:rgba(44,62,80,0.82); display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:9000; }
.loading-overlay.hidden { display:none; }
.loading-spinner { width:48px; height:48px; border:4px solid rgba(255,255,255,0.2); border-top-color:#fff; border-radius:50%; animation:spin 0.8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.loading-text { color:#fff; font-family:var(--font-body); font-size:15px; margin-top:18px; opacity:0.85; }
.cat-count-spinner { display:inline-block; width:10px; height:10px; border:2px solid var(--stone); border-top-color:var(--slate-70); border-radius:50%; animation:spin 0.8s linear infinite; flex-shrink:0; }
/* Settings modal */
.settings-modal-overlay { position:fixed; inset:0; background:rgba(44,62,80,0.55); display:flex; align-items:center; justify-content:center; z-index:8000; }
.settings-modal { background:var(--white); border-radius:var(--radius-lg); padding:32px; width:100%; max-width:480px; box-shadow:var(--shadow-lg); max-height:90vh; overflow-y:auto; }
.settings-title { font-family:var(--font-display); font-size:18px; font-weight:700; color:var(--slate); margin-bottom:6px; }
.settings-sub { font-size:13px; color:var(--text-muted); margin-bottom:24px; }
.settings-field { margin-bottom:16px; }
.settings-label { display:block; font-size:12px; font-weight:600; color:var(--slate-70); text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px; }
.settings-input { width:100%; box-sizing:border-box; padding:9px 12px; border:1.5px solid var(--border); border-radius:var(--radius); font-family:var(--font-mono); font-size:13px; color:var(--slate); background:var(--bg-base); }
.settings-input:focus { outline:none; border-color:var(--copper); }
.settings-actions { display:flex; justify-content:space-between; align-items:center; margin-top:24px; }
.settings-clear { font-size:12px; color:var(--text-muted); cursor:pointer; background:none; border:none; padding:0; }
.settings-clear:hover { color:var(--danger); }
/* Settings gear in header */
.settings-gear { background:none; border:none; cursor:pointer; color:var(--slate-50); font-size:18px; padding:6px 8px; margin-left:8px; border-radius:var(--radius-sm); transition:color var(--transition); }
.settings-gear:hover { color:var(--copper); }
.settings-error { font-size:13px; color:var(--danger); margin-top:12px; }
.settings-back { font-size:12px; color:var(--text-muted); cursor:pointer; background:none; border:none; padding:0; }
.settings-back:hover { color:var(--copper); }
.bu-select-links { font-size:12px; color:var(--text-muted); margin-bottom:10px; }
.bu-select-links a { color:var(--copper); cursor:pointer; text-decoration:none; }
.bu-select-links a:hover { text-decoration:underline; }
.bu-list { max-height:240px; overflow-y:auto; border:1.5px solid var(--border); border-radius:var(--radius); padding:8px 12px; margin-bottom:20px; }
.bu-item { display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--border-light,#f0f0f0); }
.bu-item:last-child { border-bottom:none; }
.bu-item input[type=checkbox] { width:16px; height:16px; accent-color:var(--copper); cursor:pointer; flex-shrink:0; }
.bu-item label { font-size:13px; color:var(--slate); cursor:pointer; }
.bu-item .bu-id { font-size:11px; color:var(--text-muted); font-family:var(--font-mono); margin-left:auto; }
/* Data error banner */
.data-error-banner { background:var(--warning-bg); border:1px solid var(--warning); border-radius:var(--radius); padding:10px 14px; margin:12px 0; font-size:13px; color:var(--slate); }
/* Reload data button in sidebar */
.reload-btn { width:100%; margin-top:10px; padding:8px 0; background:var(--bg-stone); border:1.5px solid var(--border); border-radius:var(--radius); font-family:var(--font-body); font-size:13px; color:var(--slate-70); cursor:pointer; transition:all var(--transition); }
.reload-btn:hover { background:var(--copper-soft); border-color:var(--copper-edge); color:var(--copper-deep); }
.reload-icon { display:inline-block; }.reload-btn.refreshing { cursor:wait; opacity:0.85; }
.reload-btn.refreshing .reload-icon { animation: reload-spin 0.8s linear infinite; }
@keyframes reload-spin { to { transform: rotate(-360deg); } }
/* Tag-write error notifications */
#tagErrorContainer { position:fixed; bottom:20px; right:20px; z-index:300; display:flex; flex-direction:column-reverse; gap:8px; max-width:420px; }
.tag-error-item { background:var(--warning-bg,#fff8e6); border:1.5px solid var(--warning,#C99B45); border-radius:var(--radius); padding:12px 14px; font-size:13px; font-family:var(--font-body); color:var(--slate); display:flex; gap:10px; align-items:flex-start; box-shadow:var(--shadow-lg); }
.tag-error-item a { color:var(--copper); font-weight:600; }
.tag-error-close { cursor:pointer; font-size:16px; line-height:1; opacity:0.6; flex-shrink:0; background:none; border:none; padding:0; color:inherit; }
.tag-error-close:hover { opacity:1; }