/* Left pane upgrades (nav/cx-nav.js) — command bar, Up next, pins, badges */
.cxn-top { position: relative; margin: 0 0 10px; }
.cxn-cmd { position: relative; display: flex; gap: 6px; align-items: center; }
.cxn-search { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 8px; border-radius: 10px;
  border: 1px solid var(--mod-border, var(--line)); background: var(--panel, #fff); color: var(--mod-text-soft, var(--muted)); cursor: text; }
.cxn-search:focus-within { border-color: var(--mod-active-bg, #6b8e5a); box-shadow: 0 0 0 3px rgba(107,142,90,.18); }
.cxn-search svg { width: 16px; height: 16px; fill: currentColor; flex: 0 0 auto; }
.cxn-search input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: 500 13px/1 Inter, system-ui, sans-serif; padding: 0; }
.cxn-search input::placeholder { color: var(--mod-text-soft, var(--muted)); opacity: .9; }
.cxn-search kbd { font: 600 10.5px/1 ui-monospace, Menlo, monospace; color: var(--mod-text-soft, var(--muted)); border: 1px solid var(--mod-border, var(--line)); border-radius: 5px; padding: 2px 5px; }
.cxn-askbtn { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  background: var(--mod-headline-bg, #4a6b3a); color: var(--mod-headline-fg, #fff); }
.cxn-askbtn:hover { background: var(--mod-headline-bg-hover, #3e5a30); }
.cxn-askbtn svg { width: 16px; height: 16px; fill: currentColor; }
.cxn-drop { position: absolute; z-index: 9000; top: calc(100% + 6px); left: 0; width: 100%; min-width: 0; max-height: min(420px, 70vh); overflow: auto;
  background: var(--panel, #fff); color: var(--text); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 40px rgba(2,6,23,.18); padding: 6px; }
.cxn-dsec { font: 700 10.5px/1 Inter, system-ui, sans-serif; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 8px 8px 4px; }
.cxn-opt { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; cursor: pointer; font-size: 12.5px; min-width: 0; }
.cxn-opt.on { background: var(--panel2, #f3f5fa); }
.cxn-dtxt { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cxn-dico { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; }
.cxn-dico.ask { background: var(--mod-headline-bg, #4a6b3a); color: #fff; }
.cxn-dico.ask svg { width: 12px; height: 12px; fill: currentColor; }
.cxn-dico.mod { background: var(--panel2, #eef2f7); color: var(--muted); }
.cxn-opt .cxl-st { flex: 0 0 auto; }

/* Section headers become toggles */
.controlStack .cxn-h { display: flex; align-items: center; gap: 4px; cursor: pointer; user-select: none; border-radius: 6px; margin-left: 0; padding: 2px 2px; }
.controlStack .cxn-h:hover { color: var(--mod-text-strong, var(--text)); }
.controlStack .cxn-h:focus-visible { outline: 2px solid var(--mod-active-bg, #6b8e5a); outline-offset: 1px; }
.cxn-chev { width: 14px; height: 14px; fill: currentColor; flex: 0 0 auto; transition: transform .15s; }
.cxn-h.cxn-collapsed .cxn-chev { transform: rotate(-90deg); }
.cxn-hidden { display: none !important; }
.cxn-empty { display: none !important; }
.cxn-hsum { width: 7px; height: 7px; border-radius: 50%; background: #dc2626; margin-left: 4px; }
.cxn-hmeta { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 11px; color: var(--mod-text-soft, var(--muted)); }
.cxn-hmeta .late { color: #b91c1c; font-weight: 700; }

/* Stars + badges on module buttons */
.controlStack .nav-group .btn.primary { position: relative; }
.controlStack .nav-group .btn.primary > b { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.cxn-star { order: 3; flex: 0 0 auto; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border-radius: 5px; opacity: 0; color: var(--mod-text-soft, var(--muted)); transition: opacity .12s; }
.cxn-star svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
.btn:hover .cxn-star, .btn:focus-visible .cxn-star { opacity: .8; }
.cxn-star:hover { opacity: 1 !important; color: #ca8a04; }
.cxn-pinned .cxn-star { opacity: .9; color: #ca8a04; }
.cxn-pinned .cxn-star svg { fill: currentColor; }
.cxn-badge { order: 2; flex: 0 0 auto; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  font: 700 11px/1 Inter, system-ui, sans-serif; background: var(--mod-border, #dde6d2); color: var(--mod-text-strong, #1f2a18); }
.cxn-badge.alert { background: #dc2626; color: #fff; }
.btn.is-active .cxn-badge:not(.alert) { background: rgba(255,255,255,.25); color: inherit; }
.cxn-pingroup .btn { cursor: grab; }
.cxn-pingroup .btn.cxn-drag { opacity: .45; }

/* Up next (urIssue) */
.cxn-upnext { margin-top: 4px; }
.cxn-tasks { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 0; }
.cxn-task { display: flex; align-items: center; gap: 7px; padding: 5px 6px; border-radius: 8px; font-size: 12.5px; min-width: 0; }
.cxn-task:hover { background: var(--mod-card-hover, var(--panel2)); }
.cxn-check { flex: 0 0 auto; width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--mod-text-soft, #94a3b8); background: transparent; cursor: pointer; padding: 0; }
.cxn-check:hover { border-color: var(--mod-active-bg, #6b8e5a); background: rgba(107,142,90,.15); }
.cxn-task.done .cxn-check { background: var(--mod-active-bg, #6b8e5a); border-color: var(--mod-active-bg, #6b8e5a); }
.cxn-task.done .cxn-ttl { text-decoration: line-through; opacity: .55; }
.cxn-ttl { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--mod-text, var(--text)); text-decoration: none; font-weight: 600; }
.cxn-ttl:hover { color: var(--mod-text-strong, var(--text)); text-decoration: underline; }
.cxn-p0 { display: inline-block; color: #b91c1c; font-weight: 900; margin-right: 4px; }
.cxn-due { flex: 0 0 auto; font-size: 11px; color: var(--mod-text-soft, var(--muted)); font-weight: 600; }
.cxn-due.late { color: #b91c1c; } .cxn-due.now { color: #b45309; }
.cxn-none { font-size: 12px; color: var(--mod-text-soft, var(--muted)); padding: 4px 6px; }
.cxn-more { font-size: 11.5px; font-weight: 700; color: var(--mod-active-bg, #4a6b3a); text-decoration: none; padding: 3px 6px; }
.cxn-more:hover { text-decoration: underline; }

/* Recent */
.cxn-reclist { display: flex; flex-direction: column; gap: 1px; }
.cxn-rec { display: flex; align-items: center; gap: 7px; padding: 4px 6px; border-radius: 8px; text-decoration: none; color: var(--mod-text, var(--text)); font-size: 12.5px; min-width: 0; }
.cxn-rec:hover { background: var(--mod-card-hover, var(--panel2)); }
.cxn-rec .cxl-ico { width: 18px; height: 18px; font-size: 9px; }
.cxn-recnum { font-weight: 700; flex: 0 0 auto; white-space: nowrap; }
.cxn-recttl { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--mod-text-soft, var(--muted)); }

/* No project yet: keep the bar but hide project-only bits */
.cxn-noproject .cxn-upnext, .cxn-noproject .cxn-recent { display: none !important; }

/* Mini (collapsed) left pane: just icons, badges become dots */
.workspace[data-mini="true"] .cxn-top .cxn-search,
.workspace[data-mini="true"] .cxn-upnext, .workspace[data-mini="true"] .cxn-recent,
.workspace[data-mini="true"] .cxn-star, .workspace[data-mini="true"] .cxn-chev,
.workspace[data-mini="true"] .cxn-hmeta, .workspace[data-mini="true"] .cxn-hsum { display: none !important; }
.workspace[data-mini="true"] .cxn-cmd { justify-content: center; }
.workspace[data-mini="true"] .cxn-hidden { display: flex !important; }
.workspace[data-mini="true"] .cxn-badge { position: absolute; top: 3px; right: 3px; min-width: 8px; width: 8px; height: 8px; padding: 0; font-size: 0; }
.cxn-badge[hidden], .cxn-hsum[hidden], .cxn-sec[hidden] { display: none !important; }
.controlStack .cxn-upnext > .nav-header { margin-top: 2px; }

/* ---- Compact module list ----
   Twenty-odd full-width bordered cards made the left pane the loudest thing
   on screen and pushed half the modules below the fold. Modules are now a
   quiet list: no boxes, a soft hover, and a filled pill for the open one. */
.controlStack .nav-group { gap: 1px; }
.controlStack .nav-group .btn.primary, .controlStack .nav-group .btn:not(.primary) {
  background: transparent; border: 1px solid transparent; box-shadow: none; min-height: 34px; padding: 6px 8px; border-radius: 9px;
  font-weight: 600; font-size: 13px; color: var(--mod-text, var(--text)); }
.controlStack .nav-group .btn.primary:hover, .controlStack .nav-group .btn:not(.primary):hover {
  background: var(--mod-card-hover, var(--panel2)); border-color: transparent; border-style: solid; box-shadow: none; }
.controlStack .nav-group .btn.primary.is-active {
  background: var(--mod-active-bg, #6b8e5a); color: var(--mod-active-fg, #fff); border-color: transparent; box-shadow: none; }
.controlStack .nav-group .btn.primary:active { box-shadow: none; }
.controlStack .nav-group .btn i, .controlStack .nav-group .btn i svg { width: 18px; height: 18px; }
.controlStack .nav-group .btn:disabled { opacity: .45; }
.controlStack .nav-header { margin: 14px 0 3px 2px; }
.controlStack #btnOverview.btn.primary { min-height: 38px; border-radius: 10px; }
.controlStack .cxn-pingroup .btn { cursor: grab; }

/* ---- Collapsed left pane (the icon rail) ----
   One column of equal 40px targets, centred, no scrollbar, quiet dividers between
   groups, the open module as a filled tile, and alerts as a small ringed dot.
   The full name shows as a tooltip (cx-nav.js sets it). */
.workspace[data-mini="true"] .colA { overflow: hidden; }
.workspace[data-mini="true"] .colA .ph { height: 48px; min-height: 48px; padding: 0 !important; justify-content: center; border-bottom: 1px solid var(--line); }
.workspace[data-mini="true"] .colA .ph > span { display: none !important; }
.workspace[data-mini="true"] .colA .ph .header-controls { position: static; margin: 0; display: flex; }
.workspace[data-mini="true"] .colA .mini-toggle { position: static; width: 32px; height: 28px; border-radius: 8px; font-size: 14px; line-height: 1; }
.workspace[data-mini="true"] .colA .pb { padding: 10px 0 14px !important; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.workspace[data-mini="true"] .colA .pb::-webkit-scrollbar { width: 0; height: 0; display: none; }
.workspace[data-mini="true"] .colA .controlStack { align-items: center; gap: 2px; }
.workspace[data-mini="true"] .colA .cxn-top { margin: 0 0 6px; width: auto; }
.workspace[data-mini="true"] .colA .cxn-cmd { width: 40px; }
.workspace[data-mini="true"] .colA .cxn-askbtn { width: 40px; height: 40px; border-radius: 11px; }
.workspace[data-mini="true"] .colA .nav-group { align-items: center; gap: 2px; width: 100%; }
.workspace[data-mini="true"] .colA .controlStack .btn,
.workspace[data-mini="true"] .colA .controlStack .nav-group .btn.primary,
.workspace[data-mini="true"] .colA #btnOverview.btn.primary {
  position: relative; width: 40px; height: 40px; min-height: 40px; padding: 0 !important; margin: 0 !important;
  justify-content: center; align-items: center; gap: 0; border-radius: 11px; flex: 0 0 auto; }
.workspace[data-mini="true"] .colA .controlStack .btn > i { display: grid; place-items: center; margin: 0; width: 20px; height: 20px; }
.workspace[data-mini="true"] .colA .controlStack .btn > i svg { width: 20px; height: 20px; }
.workspace[data-mini="true"] .colA #btnOverview.btn.primary { margin-bottom: 4px !important; }
.workspace[data-mini="true"] .colA .controlStack .nav-group .btn.primary.is-active { background: var(--mod-active-bg, #6b8e5a); color: var(--mod-active-fg, #fff); }
/* Group headers become short centred rules */
.workspace[data-mini="true"] .colA .controlStack .nav-header,
.workspace[data-mini="true"] .colA .controlStack .cxn-h {
  display: block !important; width: 22px; height: 1px; min-height: 0; padding: 0; margin: 9px auto !important;
  background: var(--mod-border, var(--line)); font-size: 0; color: transparent; overflow: hidden; opacity: 1; cursor: default; pointer-events: none; }
.workspace[data-mini="true"] .colA .controlStack .nav-header > *,
.workspace[data-mini="true"] .colA .controlStack .cxn-h > * { display: none !important; }
/* Only alerts show, as a dot ringed in the pane colour so it never blurs into the icon */
.workspace[data-mini="true"] .colA .cxn-badge:not(.alert) { display: none !important; }
.workspace[data-mini="true"] .colA .cxn-badge.alert { position: absolute; top: 5px; right: 5px; width: 9px; height: 9px; min-width: 9px; padding: 0; font-size: 0;
  border-radius: 50%; box-shadow: 0 0 0 2px var(--panel, #fff); }
.workspace[data-mini="true"] .colA .btn.is-active .cxn-badge.alert { box-shadow: 0 0 0 2px var(--mod-active-bg, #6b8e5a); }