/* =============================================================================
   portal-enhance.css  —  SHELL stylesheet enhancement (ADDITIVE)
   ---------------------------------------------------------------------------
   Loads AFTER styles.css. Never edits existing rules. Every new class/id is
   namespaced .enh-* . All new overlays/docks/toasts use z-index >= 10000
   (existing .noise = 9999). Design tokens reused verbatim from styles.css:
     --bg #070911  --bg-2 #0c0f1a  --surface #131826  --surface-2 #1a2034
     --surface-hi #202743  --border rgba(255,255,255,.06)  --text #eef3ff
     --text-2 #b4becf  --brand #ff9100  --brand-2 #ff5a00  --accent #71f6da
     --accent-3 #a78bfa  --red #ef4444  --yellow #f59e0b  --r 14px
     --r-sm 8px  --ease cubic-bezier(.2,.9,.2,1)
   Implements spec items C1–C12 plus the .enh-* widget styles consumed by the
   editor dock / command palette / toast host / cheat-sheet JS files.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   C1 — Focus-visible restore (WCAG AA keyboard affordance)
   styles.css has 7 `outline:none` rules that strip focus from inputs/search/
   selects/canvas. Re-assert an orange ring with !important so it beats them.
   Scoped to keyboard focus (:focus-visible) so mouse clicks stay clean.
   -------------------------------------------------------------------------- */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
.search input:focus-visible,
.search-inline:focus-visible,
.fld input:focus-visible,
.fld select:focus-visible,
.fld textarea:focus-visible,
.settings-section input:focus-visible,
.ed-add-row input:focus-visible {
  outline: 2px solid var(--brand) !important;
  outline-offset: 2px !important;
  border-radius: var(--r-sm);
}
/* Canvas elements that disable outline — give a soft ring on keyboard focus. */
.mockup-canvas-wrap canvas:focus-visible,
.mockup-create-canvas-wrap canvas:focus-visible,
.sep-stage canvas:focus-visible {
  outline: 2px solid var(--brand) !important;
  outline-offset: -2px !important;
}


/* -----------------------------------------------------------------------------
   C2 — Base font-size bump + small-label floor
   Lift body to 15px for readability; floor the smallest UI labels to 12px so
   they remain legible after the bump. styles.css sets no body font-size, so
   this is purely additive.
   -------------------------------------------------------------------------- */
body {
  font-size: 15px;
}
.stat-lbl,
.kpi-lbl,
.ev-kind,
.em-lbl,
.search-sub,
.search-empty,
.nav-item span,
.tag,
.chip {
  font-size: max(12px, 0.8rem);
}


/* -----------------------------------------------------------------------------
   C3 — Muted token lift (contrast)
   Existing --muted is rgba(238,243,255,.55) — too dim against dark surfaces.
   Re-declare on :root (cascades to all `color:var(--muted)` consumers without
   touching any rule). Lifted to .68 for AA on body copy.
   -------------------------------------------------------------------------- */
:root {
  --muted: rgba(238, 243, 255, 0.68);
  /* local helper tokens, namespaced via comment scope only */
  --enh-ring: rgba(255, 145, 0, 0.55);
  --enh-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
}


/* -----------------------------------------------------------------------------
   C4 — Skeleton loading utilities
   .skel-list wraps a stack of shimmering .skeleton-row placeholders.
   -------------------------------------------------------------------------- */
.skel-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.skeleton-row {
  height: 16px;
  border-radius: var(--r-sm);
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0.04) 30%,
    rgba(255, 255, 255, 0.10) 50%,
    rgba(255, 255, 255, 0.04) 70%
  );
  background-size: 200% 100%;
  animation: enh-shimmer 1.4s var(--ease) infinite;
}
.skeleton-row.enh-w-60 { width: 60%; }
.skeleton-row.enh-w-40 { width: 40%; }
.skeleton-row.enh-tall { height: 44px; }
@keyframes enh-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}


/* -----------------------------------------------------------------------------
   C5 — Error variant for the shared empty state
   styles.css owns .empty-state; we only add the .is-error modifier additively.
   -------------------------------------------------------------------------- */
.empty-state.is-error {
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.06);
}
.empty-state.is-error .empty-ico,
.empty-state.is-error .empty-msg {
  color: var(--red);
}
.empty-state.is-error .empty-action {
  border-color: rgba(239, 68, 68, 0.4);
  color: var(--text);
}


/* -----------------------------------------------------------------------------
   C6 — Navigation group label
   Small caps section heading injected between sidebar nav groups.
   -------------------------------------------------------------------------- */
.enh-nav-group-label {
  margin: 14px 10px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  user-select: none;
}


/* -----------------------------------------------------------------------------
   C7 — Tablet icon-rail
   Between 481px and 900px collapse the sidebar to an icon rail (mirrors the
   ≤980px collapse already in styles.css, but at the tablet band the spec asks
   for explicitly). Labels hide, items center.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) and (min-width: 481px) {
  .sidebar {
    padding: 14px 8px;
  }
  .sidebar .brand-copy,
  .sidebar .nav-item span,
  .sidebar .side-panel,
  .sidebar .side-foot span,
  .enh-nav-group-label {
    display: none;
  }
  .sidebar .nav-item {
    justify-content: center;
    padding: 10px;
  }
}


/* -----------------------------------------------------------------------------
   C8 — Coarse-pointer touch targets (44px minimum, WCAG 2.5.5)
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
  .nav-item,
  .btn-primary,
  .btn-ghost,
  .toggle-btn,
  .view-all,
  .empty-action,
  .enh-tool,
  .enh-slider-btn {
    min-height: 44px;
    min-width: 44px;
  }
  .search input {
    min-height: 44px;
  }
}


/* -----------------------------------------------------------------------------
   C9 — Compact density mode + tabular numerals
   body.density-compact tightens paddings; numeric cells get tabular-nums so
   columns align. .num / td.amount do not exist in styles.css (no collision);
   .kpi-val does — we only add font-feature, never override layout.
   -------------------------------------------------------------------------- */
body.density-compact .card,
body.density-compact .stat-card,
body.density-compact .view-body,
body.density-compact .task-row,
body.density-compact .agent-card {
  padding-top: 10px;
  padding-bottom: 10px;
}
body.density-compact .stats-strip,
body.density-compact .agent-board {
  gap: 10px;
}
body.density-compact .task-row,
body.density-compact .client-row,
body.density-compact .ev-list-row {
  padding-top: 7px;
  padding-bottom: 7px;
}
.kpi-val,
.num,
td.amount,
.stat-val,
.est-amount,
.topclient-total {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}


/* -----------------------------------------------------------------------------
   C10 — Data-freshness chip
   .enh-fresh shows "live"; .enh-fresh.is-stale flips to a warning tone.
   -------------------------------------------------------------------------- */
.enh-fresh {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
  background: rgba(113, 246, 218, 0.10);
  border: 1px solid rgba(113, 246, 218, 0.25);
}
.enh-fresh::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: enh-pulse 2s var(--ease) infinite;
}
.enh-fresh.is-stale {
  color: var(--yellow);
  background: rgba(245, 158, 11, 0.10);
  border-color: rgba(245, 158, 11, 0.3);
}
.enh-fresh.is-stale::before {
  background: var(--yellow);
  box-shadow: none;
  animation: none;
}
@keyframes enh-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.8); }
}


/* -----------------------------------------------------------------------------
   C11 — Toast host  (z-index 10001)
   Fixed bottom-right stack. Individual .enh-toast styled in widget section.
   -------------------------------------------------------------------------- */
.enh-toast-host {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 10001;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: min(380px, calc(100vw - 36px));
}


/* -----------------------------------------------------------------------------
   C12 — Reduced motion
   Honour the OS preference: neutralise injected animations/transitions.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .skeleton-row,
  .enh-fresh::before,
  .enh-toast,
  .enh-palette,
  .enh-dock,
  .enh-sheet {
    animation: none !important;
    transition: none !important;
  }
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
}


/* =============================================================================
   .enh-* WIDGET STYLES
   Cohesive set consumed by the editor dock, command palette, toast, and
   cheat-sheet JS. All overlays z-index >= 10000.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   Editor dock  (.enh-dock) — floating tool cluster for mockups / art-seps.
   Houses .enh-tool buttons and an .enh-zoombar with an .enh-slider.
   -------------------------------------------------------------------------- */
.enh-dock {
  position: fixed;
  z-index: 10000;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border-radius: var(--r);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--border-hi, rgba(255, 255, 255, 0.12));
  box-shadow: var(--enh-shadow);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  animation: enh-dock-in 0.28s var(--ease);
}
.enh-dock[hidden] { display: none; }
@keyframes enh-dock-in {
  from { opacity: 0; transform: translate(-50%, 14px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.enh-dock-sep {
  width: 1px;
  align-self: stretch;
  margin: 2px 2px;
  background: var(--border);
}

.enh-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  min-width: 34px;
  padding: 0 9px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.16s var(--ease), color 0.16s var(--ease), border-color 0.16s var(--ease);
}
.enh-tool:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}
.enh-tool.is-active {
  background: rgba(255, 145, 0, 0.14);
  border-color: var(--enh-ring);
  color: var(--brand);
}
.enh-tool:disabled,
.enh-tool[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}
.enh-tool .ic { width: 16px; height: 16px; }

/* Zoom bar — label + slider + readout. */
.enh-zoombar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 6px;
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.enh-zoombar output {
  min-width: 38px;
  text-align: right;
  color: var(--text-2);
  font-weight: 600;
}

/* Range slider (shared by zoom bar and brush-size controls). */
.enh-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 120px;
  height: 4px;
  border-radius: 999px;
  background: var(--surface-2);
  outline: none;
  cursor: pointer;
}
.enh-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--brand);
  border: 2px solid var(--bg-2);
  box-shadow: 0 0 0 1px var(--enh-ring);
  cursor: pointer;
}
.enh-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--brand);
  border: 2px solid var(--bg-2);
  cursor: pointer;
}
.enh-slider:focus-visible {
  box-shadow: 0 0 0 3px var(--enh-ring);
}
.enh-slider-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.enh-slider-btn:hover { color: var(--text); border-color: var(--border-hi, rgba(255, 255, 255, 0.12)); }


/* -----------------------------------------------------------------------------
   Command palette  (.enh-palette) — Cmd-K launcher overlay.
   Backdrop + centered panel + filterable result rows. z-index 10002.
   -------------------------------------------------------------------------- */
.enh-palette-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10002;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  background: rgba(3, 5, 12, 0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: enh-fade 0.16s var(--ease);
}
.enh-palette-backdrop[hidden] { display: none; }
@keyframes enh-fade { from { opacity: 0; } to { opacity: 1; } }

.enh-palette {
  width: min(620px, calc(100vw - 32px));
  max-height: 64vh;
  display: flex;
  flex-direction: column;
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--border-hi, rgba(255, 255, 255, 0.12));
  box-shadow: var(--enh-shadow);
  overflow: hidden;
  animation: enh-pop 0.2s var(--ease);
}
@keyframes enh-pop {
  from { opacity: 0; transform: translateY(-8px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.enh-palette-input {
  width: 100%;
  box-sizing: border-box;
  padding: 16px 18px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: 15px;
  outline: none;
}
.enh-palette-input::placeholder { color: var(--muted); }
.enh-palette-list {
  overflow-y: auto;
  padding: 6px;
  margin: 0;
  list-style: none;
}
.enh-palette-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--text-2);
}
.enh-palette-row .ic { width: 16px; height: 16px; opacity: 0.8; }
.enh-palette-row:hover,
.enh-palette-row.is-active {
  background: rgba(255, 145, 0, 0.12);
  color: var(--text);
}
.enh-palette-row.is-active { box-shadow: inset 2px 0 0 var(--brand); }
.enh-palette-row-title { font-size: 13.5px; font-weight: 600; }
.enh-palette-row-sub { font-size: 11px; color: var(--muted); margin-left: auto; }
.enh-palette-empty {
  padding: 26px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}


/* -----------------------------------------------------------------------------
   Toast  (.enh-toast) — single notification inside .enh-toast-host.
   Variants: default, .is-success, .is-error, .is-warn.
   -------------------------------------------------------------------------- */
.enh-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border-hi, rgba(255, 255, 255, 0.12));
  border-left: 3px solid var(--brand);
  box-shadow: var(--enh-shadow);
  color: var(--text);
  font-size: 13px;
  line-height: 1.4;
  animation: enh-toast-in 0.24s var(--ease);
}
.enh-toast.is-success { border-left-color: var(--green); }
.enh-toast.is-error   { border-left-color: var(--red); }
.enh-toast.is-warn    { border-left-color: var(--yellow); }
.enh-toast.is-leaving {
  animation: enh-toast-out 0.2s var(--ease) forwards;
}
.enh-toast-ico { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.enh-toast-body { flex: 1; }
.enh-toast-title { font-weight: 700; }
.enh-toast-msg { color: var(--text-2); margin-top: 2px; }
.enh-toast-close {
  flex: none;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 0 2px;
}
.enh-toast-close:hover { color: var(--text); }
@keyframes enh-toast-in {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes enh-toast-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(24px); }
}


/* -----------------------------------------------------------------------------
   Keyboard cheat-sheet  (.enh-sheet) — overlay listing shortcuts (e.g. "?").
   z-index 10003 so it sits above the palette if both ever stack.
   -------------------------------------------------------------------------- */
.enh-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10003;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(3, 5, 12, 0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: enh-fade 0.16s var(--ease);
}
.enh-sheet-backdrop[hidden] { display: none; }
.enh-sheet {
  width: min(520px, calc(100vw - 32px));
  max-height: 80vh;
  overflow-y: auto;
  padding: 22px 24px;
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--border-hi, rgba(255, 255, 255, 0.12));
  box-shadow: var(--enh-shadow);
  animation: enh-pop 0.2s var(--ease);
}
.enh-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.enh-sheet-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
.enh-sheet-close {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.enh-sheet-close:hover { color: var(--text); }
.enh-sheet-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}
.enh-sheet-section-label {
  margin: 14px 0 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.enh-sheet-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
  font-size: 13px;
  color: var(--text-2);
}
.enh-kbd {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--bg-2);
  border: 1px solid var(--border-hi, rgba(255, 255, 255, 0.12));
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}


/* -----------------------------------------------------------------------------
   Small-screen adjustments for injected widgets
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .enh-dock {
    left: 12px;
    right: 12px;
    transform: none;
    flex-wrap: wrap;
    justify-content: center;
  }
  .enh-dock-in,
  .enh-dock { animation: enh-fade 0.24s var(--ease); }
  .enh-slider { width: 90px; }
  .enh-toast-host {
    left: 12px;
    right: 12px;
    max-width: none;
  }
}

/* =============================================================================
   v3.1 DOCK LAYOUT FIX (appended last — overrides the base .enh-dock rules)
   editors.js builds a VERTICAL collapsible grouped panel, and uses .enh-dock-sep
   as the *seps-dock identifier* (collided with the earlier 1px-divider rule of
   the same name). Re-style the dock as a proper right-pinned tool palette and
   style every structural sub-class the JS emits.
   ============================================================================ */
.enh-dock.enh-dock-sep,
.enh-dock.enh-dock-mockup {
  /* undo: horizontal bottom-bar base + the divider width:1px name collision */
  width: min(190px, calc(100vw - 28px));
  left: auto;
  right: 16px;
  bottom: auto;
  top: 84px;
  max-height: calc(100vh - 104px);
  overflow-y: auto;
  overflow-x: hidden;
  transform: none;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 10px;
  animation: enh-dock-fade 0.26s var(--ease);
}
@keyframes enh-dock-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* header: title + collapse toggle, sticky so it stays while body scrolls */
.enh-dock-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 1px 1px 8px; border-bottom: 1px solid var(--border);
  position: sticky; top: -10px; background: var(--surface); z-index: 1;
}
.enh-dock-title { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.enh-dock-collapse {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex: 0 0 auto; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: transparent; color: var(--text-2); cursor: pointer;
}
.enh-dock-collapse:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.enh-dock-collapse svg { width: 15px; height: 15px; transition: transform 0.2s var(--ease); }

/* collapsed → slim auto-width tab, body hidden, chevron flips */
.enh-dock.enh-dock-collapsed { width: auto; max-height: none; overflow: visible; }
.enh-dock.enh-dock-collapsed .enh-dock-body { display: none; }
.enh-dock.enh-dock-collapsed .enh-dock-head { border-bottom: 0; padding-bottom: 1px; }
.enh-dock.enh-dock-collapsed .enh-dock-collapse svg { transform: rotate(180deg); }

/* body + groups */
.enh-dock-body { display: flex; flex-direction: column; gap: 12px; }
.enh-group { display: flex; flex-direction: column; gap: 6px; }
.enh-group-title { font-size: 9.5px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.enh-group-row { display: flex; flex-wrap: wrap; gap: 5px; }

/* tool buttons inside the dock: icon stacked over label, compact, obvious */
.enh-dock .enh-tool {
  flex: 1 1 54px; min-width: 54px; height: auto;
  flex-direction: column; gap: 3px; padding: 8px 5px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2);
  border-radius: var(--r-sm); font-size: 10.5px; font-weight: 600; line-height: 1;
}
.enh-dock .enh-tool:hover { background: var(--surface-hi); color: var(--text); border-color: var(--border-hi); }
.enh-tool-ic { display: inline-flex; align-items: center; justify-content: center; }
.enh-tool-ic svg { width: 18px; height: 18px; }
.enh-tool-label { font-size: 10px; font-weight: 600; line-height: 1.1; text-align: center; }
.enh-tool.enh-tool-on { background: rgba(255,145,0,0.16); border-color: var(--enh-ring); color: var(--brand); }
.enh-tool.enh-tool-disabled, .enh-dock .enh-tool:disabled { opacity: 0.38; cursor: not-allowed; pointer-events: none; }

/* Desktop art-seps keeps the fixed tool dock out of the canvas/content area. */
@media (min-width: 769px) {
  .sep-stage.enh-host-relative {
    padding-right: clamp(190px, 22vw, 230px);
  }
}

/* nudge d-pad (mockup dock) — 3×3 cross of arrow buttons */
.enh-nudgepad { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 30px; gap: 4px; width: 100%; }
.enh-nudgepad .enh-pad-btn { min-width: 0; flex: none; padding: 0; }
.enh-nudgepad .enh-pad-btn .enh-tool-label { display: none; }
.enh-pad-up { grid-column: 2; grid-row: 1; }
.enh-pad-left { grid-column: 1; grid-row: 2; }
.enh-pad-right { grid-column: 3; grid-row: 2; }
.enh-pad-down { grid-column: 2; grid-row: 3; }

/* zoom % readout + canvas pan affordances */
.enh-zoom-pct { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; font-size: 11px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.enh-host-relative { position: relative; }
.enh-zoomwrap.enh-pan-ready { cursor: grab; }
.enh-zoomwrap.enh-panning { cursor: grabbing; }

/* mobile: dock becomes a bottom sheet so it never traps the small viewport */
@media (max-width: 640px) {
  .enh-dock.enh-dock-sep, .enh-dock.enh-dock-mockup {
    right: 8px; left: 8px; width: auto; top: auto; bottom: 8px; max-height: 44vh; flex-direction: column;
  }
}

/* v3.1 fix: the topbar control cluster is tight on small viewports (pre-existing,
   flagged in the UX audit). Don't add to it — hide the Density toggle below 900px
   (density control is a desktop power-use feature). Also tighten topbar gap there. */
@media (max-width: 900px) {
  .enh-density-btn { display: none !important; }
  .topbar-right { gap: 8px; }
}

/* =============================================================================
   v3.1 MOBILE DOCK — full-width collapsible bottom sheet (fixes unusable phone view)
   Appended last → overrides the earlier ≤640 rule. Uses CSS grid auto-fill for
   tool rows so they ALWAYS wrap to fit (no horizontal overflow at any width).
   Default-collapsed on mount (JS), so it never buries the editor/modal form.
   ============================================================================ */
@media (max-width: 768px) {
  .enh-dock.enh-dock-sep,
  .enh-dock.enh-dock-mockup {
    left: 0; right: 0; bottom: 0; top: auto;
    width: 100%; max-width: 100vw; box-sizing: border-box;
    max-height: 60vh; overflow-y: auto; overflow-x: hidden;
    border-radius: 16px 16px 0 0;
    border: 1px solid var(--border-hi, rgba(255,255,255,.12)); border-bottom: 0;
    padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    gap: 10px; transform: none;
  }
  /* collapsed = slim bottom bar: only the header shows, page/form fully usable */
  .enh-dock.enh-dock-collapsed.enh-dock-sep,
  .enh-dock.enh-dock-collapsed.enh-dock-mockup {
    max-height: none; overflow: visible;
  }
  .enh-dock-head { position: static; padding: 6px 2px; margin: 0; }
  .enh-dock.enh-dock-collapsed .enh-dock-head { border-bottom: 0; padding-bottom: 6px; }
  .enh-dock-title { font-size: 12px; }
  .enh-dock-collapse { width: 36px; height: 36px; }
  /* collapsed chevron points UP (tap to expand); expanded points down */
  .enh-dock.enh-dock-collapsed .enh-dock-collapse svg { transform: rotate(180deg); }
  .enh-dock:not(.enh-dock-collapsed) .enh-dock-collapse svg { transform: none; }

  /* tool rows: grid auto-fill guarantees wrap-to-fit, never overflows */
  .enh-dock .enh-group-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
    gap: 6px;
  }
  .enh-dock .enh-tool { min-width: 0; width: auto; flex: none; padding: 9px 4px; }
  .enh-tool-label { font-size: 10.5px; }
  /* nudge d-pad keeps its compact 3-col cross, centered in its grid cell */
  .enh-dock .enh-nudgepad {
    grid-template-columns: repeat(3, 52px);
    grid-column: 1 / -1; justify-content: center;
  }
}

/* ── Event source audit panel (admin) ─────────────────────────────────── */
.event-audit-modal .modal { max-width: 760px; width: 92vw; }
.event-audit { font-size: 13px; }
.event-audit .ea-summary { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.event-audit .ea-note { color: var(--muted, #8a8f98); font-size: 12px; margin-bottom: 14px; line-height: 1.45; }
.event-audit .ea-section { margin-bottom: 18px; border: 1px solid var(--border, #2a2d34); border-radius: 10px; overflow: hidden; }
.event-audit .ea-head { font-weight: 600; padding: 8px 12px; background: var(--surface-2, rgba(255,255,255,0.03)); border-bottom: 1px solid var(--border, #2a2d34); }
.event-audit .ea-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border, #2a2d34); }
.event-audit .ea-row:last-child { border-bottom: none; }
.event-audit .ea-main { flex: 1; min-width: 0; }
.event-audit .ea-title { font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.event-audit .ea-sub { color: var(--muted, #8a8f98); font-size: 12px; margin: 2px 0; }
.event-audit .ea-reason { font-size: 12px; line-height: 1.4; color: var(--text, #d6d9e0); opacity: 0.85; }
.event-audit .ea-action { flex: 0 0 auto; }
.event-audit .ea-past { color: #c0883a; font-weight: 600; }
.event-audit .ea-muted { color: var(--muted, #8a8f98); }
.event-audit .ea-included .ea-head { border-left: 3px solid #2faa5e; }
.event-audit .ea-merged .ea-head { border-left: 3px solid #c9a227; }
.event-audit .ea-archived .ea-head { border-left: 3px solid #6b7280; }
.event-audit .ea-excluded .ea-head { border-left: 3px solid #b04a4a; }
.event-audit .pill.pill-blue { background: rgba(56,128,220,0.16); color: #6ba4f0; }

/* ── Past events: visibly non-actionable, separated from active queues ─── */
.events-past-section { margin-top: 22px; padding-top: 6px; border-top: 1px dashed var(--border, #2a2d34); }
.events-past-section .list-subnote { font-size: 12px; margin: 2px 0 10px; line-height: 1.4; }
.events-past-rows { opacity: 0.62; }
.events-past-rows .ev-list-row { filter: grayscale(0.35); }
.events-past-rows .ev-list-row:hover { opacity: 0.92; filter: none; }

/* ── Admin archive control in event detail modal ──────────────────────── */
.ed-admin-actions { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border, #2a2d34); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ed-admin-actions .ed-admin-hint { color: var(--muted, #8a8f98); font-size: 11px; }
.btn-ghost.danger { color: #d96a6a; }
.btn-ghost.danger:hover { background: rgba(217,106,106,0.12); }

/* ── Staff directory (Team page) ──────────────────────────────────────── */
.dir-note { color: var(--muted, #8a8f98); font-size: 12px; margin: 4px 0 12px; line-height: 1.4; }
.dir-row { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--border, #2a2d34); }
.dir-row:last-child { border-bottom: none; }
.dir-av { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; font-size: 14px; }
.dir-av.green { background: #2faa5e; }
.dir-av.blue { background: #3880dc; }
.dir-av.orange { background: #d9892f; }
.dir-av.gray { background: #6b7280; }
.dir-body { flex: 1; min-width: 0; }
.dir-name { font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dir-contact { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 3px; font-size: 13px; }
.dir-link { color: var(--accent, #6ba4f0); text-decoration: none; white-space: nowrap; }
.dir-link:hover { text-decoration: underline; }
.dir-missing { color: var(--muted, #8a8f98); font-size: 12px; font-style: italic; }
.dir-actions { flex: 0 0 auto; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.pill.pill-blue { background: rgba(56,128,220,0.16); color: #6ba4f0; }
.pill.pill-orange { background: rgba(217,137,47,0.16); color: #e0a258; }
@media (max-width: 560px) {
  .dir-row { flex-wrap: wrap; }
  .dir-actions { width: 100%; justify-content: flex-start; }
}

/* ===== SEP SIMPLE MODE (2026-07-03) ===== */
.enh-sep-bar{position:sticky;top:8px;z-index:40;display:flex;align-items:center;gap:12px;padding:10px 16px;margin:0 0 14px;border:1px solid rgba(148,163,184,.16);border-radius:14px;background:rgba(10,12,20,.94);backdrop-filter:blur(12px);box-shadow:0 8px 28px rgba(0,0,0,.35)}
.enh-sep-step{font-size:10.5px;color:var(--muted,#8b93a7);letter-spacing:.08em;text-transform:uppercase;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.enh-sep-step b{color:#e2e8f0}
.enh-sep-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;font-size:12px;font-weight:700;border:1px solid rgba(148,163,184,.25);cursor:pointer;background:rgba(148,163,184,.1);color:var(--muted,#8b93a7);max-width:46vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:all .2s}
.enh-sep-pill.ready{background:rgba(34,197,94,.14);color:#86efac;border-color:rgba(34,197,94,.4)}
.enh-sep-pill.review{background:rgba(251,146,60,.14);color:#fdba74;border-color:rgba(251,146,60,.4)}
.enh-sep-pill.blocked{background:rgba(239,68,68,.14);color:#fca5a5;border-color:rgba(239,68,68,.4)}
.enh-sep-pill.busy{background:rgba(56,189,248,.12);color:#7dd3fc;border-color:rgba(56,189,248,.4)}
.enh-sep-spacer{flex:1}
.enh-sep-protoggle{font-size:11.5px;font-weight:700;padding:6px 12px;border-radius:999px;border:1px solid rgba(148,163,184,.3);background:transparent;color:var(--muted,#8b93a7);cursor:pointer;white-space:nowrap}
.enh-sep-protoggle:hover{color:#e2e8f0;border-color:rgba(148,163,184,.55)}
/* Simple mode: hide the power panels until asked for */
.enh-sep-scope.enh-sep-simple .sep-source-panel,
.enh-sep-scope.enh-sep-simple .sep-flow-panel,
.enh-sep-scope.enh-sep-simple .sep-preflight-panel,
.enh-sep-scope.enh-sep-simple .sep-sync-panel,
.enh-sep-scope.enh-sep-simple .sep-dtf-bridge{display:none}
/* Pill click reveals the full readiness + preflight detail even in simple mode */
.enh-sep-scope.enh-sep-simple.enh-sep-reveal .sep-flow-panel,
.enh-sep-scope.enh-sep-simple.enh-sep-reveal .sep-preflight-panel{display:block}
/* Give the freed space to the art: larger responsive previews */
.enh-sep-scope.enh-sep-simple .sep-preview-grid canvas{width:100%;height:auto}