/* =============================================================================
   P2 Batch 06_aes_shell — home · empty · popover · dark · drawer
   Parent wires: @import url('p2/06_aes_shell.css');
   Extends existing --act-* / CLIO tokens; KS-better, not a third aesthetic.
   Surfaces: .home-lanes, .empty / .at-empty / .errlist, .pop (+ .popover alias),
             [data-theme=dark] / .theme-dark, .activity-detail-drawer
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Component-spec tokens (AXS-0759 drawer · AXS-0823 home · AXS-0839 empty ·
   AXS-0855 popover · AXS-0871 dark) — document default states as CSS variables.
   ----------------------------------------------------------------------------- */
:root {
  /* Home task lanes */
  --p2-home-gap: var(--act-home-lane-gap, 0.625rem);          /* KS rhythm @1280 ≈ 10px */
  --p2-home-pad: var(--act-home-lane-pad, 0.5rem);            /* ≈ 8px */
  --p2-home-card-pad-y: var(--act-home-card-pad-y, 0.5rem);
  --p2-home-card-pad-x: var(--act-home-card-pad-x, 0.625rem);
  --p2-home-min-h: var(--act-home-lane-min-h, 8rem);
  --p2-home-head-pad: var(--act-home-head-pad, 0.125rem 0.25rem 0.5rem);
  --p2-home-elev: var(--act-elev, var(--shadow-sm));
  --p2-home-wash: var(--act-wash);

  /* Empty / loading / error */
  --p2-empty-pad-y: var(--act-space-5, 1.25rem);
  --p2-empty-pad-x: var(--act-space-4, 1rem);
  --p2-empty-gap: var(--act-space-2, 0.5rem);
  --p2-empty-radius: var(--radius-lg);
  --p2-empty-max: var(--act-meta-max, 70ch);
  --p2-empty-border: 1px dashed var(--line-2);
  --p2-empty-bg: color-mix(in srgb, var(--panel) 40%, transparent);

  /* Popovers (Filter / Sort / Settings / Mode) — CLIO .pop chrome */
  --p2-pop-pad: var(--skin-pop-pad, 0.35rem);
  --p2-pop-gap: 0.12rem;
  --p2-pop-item-pad-y: var(--skin-pop-item-pad-y, 0.4rem);
  --p2-pop-item-pad-x: var(--skin-pop-item-pad-x, 0.65rem);
  --p2-pop-item-min-h: var(--skin-pop-item-min-h, 2.15rem);
  --p2-pop-radius: var(--skin-pop-radius, var(--radius-lg));
  --p2-pop-shadow: var(--skin-pop-shadow, var(--shadow));
  --p2-pop-filter-pad: var(--act-filter-pad, 0.65rem);
  --p2-pop-filter-gap-y: var(--act-filter-gap-y, 0.65rem);
  --p2-pop-filter-gap-x: var(--act-filter-gap-x, 0.55rem);

  /* Drawer — default / focus-visible / drop-target (AXS-0759 / 0761 / 0764 / 0767 / 0769 / 0772) */
  --p2-drawer-pad: var(--act-drawer-pad, 1rem);
  --p2-drawer-gap: var(--act-drawer-gap, 0.875rem);
  --p2-drawer-body-gap: var(--act-drawer-body-gap, 0.875rem);
  --p2-drawer-meta-gap: var(--act-drawer-meta-gap, 0.625rem);
  --p2-drawer-title-fs: var(--act-drawer-title-fs, 1.375rem);
  --p2-drawer-w: var(--act-drawer-w, 57.5rem);
  --p2-drawer-side-reserve: var(--act-drawer-side-reserve, 16.25rem);
  --p2-drawer-border: var(--line-2);
  --p2-drawer-shadow: -18px 0 36px rgba(20, 28, 38, 0.18);
  --p2-drawer-focus-ring: 2px solid color-mix(in srgb, var(--accent) 65%, transparent);
  --p2-drawer-focus-offset: 2px;
  --p2-drawer-focus-bg: color-mix(in srgb, var(--accent-soft) 22%, var(--bg));
  --p2-drawer-drop-bg: color-mix(in srgb, var(--accent-soft) 30%, var(--bg));
  --p2-drawer-drop-ring: color-mix(in srgb, var(--accent) 42%, transparent);
  --p2-drawer-ctl-h: var(--act-ctl-h, 1.75rem);

  /* Shared shell motion / density hooks */
  --p2-shell-motion-d: var(--act-motion-d, 160ms);
  --p2-shell-motion-ease: var(--act-motion-ease, ease-out);
  --p2-shell-density: var(--act-density, 1);
}

/* Dark theme component-spec (AXS-0871) */
[data-theme='dark'],
.theme-dark {
  --p2-home-wash: color-mix(in srgb, var(--panel) 55%, var(--bg));
  --p2-empty-bg: color-mix(in srgb, var(--panel) 55%, transparent);
  --p2-pop-shadow: var(--skin-pop-shadow);
}

/* Alias: mission text says .popover; CLIO class is .pop */
.popover { /* noop alias marker — rules use .pop, .popover together below */ }

/* =============================================================================
   HOME task lanes — journey / IA / affordance / density / parity / responsive
   AXS-0387 · AXS-0411 · AXS-0435 · AXS-0459 · AXS-0475 · AXS-0626 · AXS-0823 ·
   AXS-1079 · AXS-1226 · AXS-1427
   ============================================================================= */

.home-lanes {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(var(--skin-home-lane-min), var(--skin-home-lane-max));
  gap: var(--p2-home-gap);
  overflow-x: auto;
  overflow-y: hidden;
  align-items: stretch;
  padding-bottom: var(--act-space-1);
  /* Journey: scan lanes left→right without trapping page scroll */
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  min-width: 0;
  max-width: 100%;
}

.home-lane {
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: var(--p2-home-min-h);
  background: var(--p2-home-wash);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  padding: var(--p2-home-pad);
  scroll-snap-align: start;
  /* IA: head → body (cards) — DOM order; reinforce with flex */
  transition:
    box-shadow var(--p2-shell-motion-d) var(--p2-shell-motion-ease),
    border-color var(--p2-shell-motion-d) var(--p2-shell-motion-ease),
    background var(--p2-shell-motion-d) var(--p2-shell-motion-ease);
}

.home-lane .kanban-lane-head {
  order: 0;
  flex: 0 0 auto;
  padding: var(--p2-home-head-pad);
  margin-bottom: var(--p2-home-pad);
  cursor: default; /* Affordance: heads are not drag handles */
}

.home-lane-body {
  order: 1;
  flex: 1 1 auto;
  min-height: var(--act-space-5);
  display: flex;
  flex-direction: column;
  gap: 0; /* card margin owns rhythm — ±2px KS @1280 */
  cursor: default;
  min-width: 0;
}

.home-lane-card {
  padding: var(--p2-home-card-pad-y) var(--p2-home-card-pad-x);
  min-width: 0;
  box-shadow: var(--p2-home-elev);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--panel);
  /* Journey: quick scan→open */
  transition:
    box-shadow var(--p2-shell-motion-d) var(--p2-shell-motion-ease),
    border-color var(--p2-shell-motion-d) var(--p2-shell-motion-ease),
    transform var(--p2-shell-motion-d) var(--p2-shell-motion-ease);
}

.home-lane-card .kanban-card-title {
  font-weight: var(--act-title-w, 650);
  letter-spacing: var(--act-tracking, -0.01em);
  color: var(--ink);
  max-width: var(--act-meta-max, 70ch);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.home-lane-card .kanban-card-meta,
.home-lane-card .muted {
  font-weight: var(--act-meta-w, 450);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.home-lane .kanban-lane-count {
  font-variant-numeric: tabular-nums;
  font-weight: var(--act-meta-w, 450);
  color: var(--ink-3);
}

/* Affordance (AXS-0435): clickable/grab only when interactive */
.home-lane-card:not(.is-clickable):not([draggable='true']) {
  cursor: default;
}
.home-lane-card.is-clickable {
  cursor: pointer;
}
.home-lane-card.is-clickable[draggable='true'] {
  cursor: grab;
}
.home-lane-card.is-clickable[draggable='true']:active,
.home-lane-card.is-dragging {
  cursor: grabbing;
}
.home-lane-more {
  cursor: pointer;
  display: block;
  padding: 0.12rem 0.24rem;
  color: var(--ink-2);
  font-weight: var(--act-meta-w, 450);
}
.home-lanes-empty {
  cursor: default;
  color: var(--ink-3);
  padding: var(--p2-empty-pad-y) var(--p2-empty-pad-x);
}

.home-lane.is-drop-target {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--p2-home-wash) 70%, var(--accent-soft));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
}

/* Token parity @1280 (AXS-0626 / reference-diff AXS-1226): 8/10px rhythm ±2px */
@media (min-width: 1280px) {
  :root {
    --p2-home-gap: 0.625rem;       /* 10px @16 */
    --p2-home-pad: 0.5rem;         /* 8px */
    --p2-home-card-pad-y: 0.5rem;
    --p2-home-card-pad-x: 0.625rem;
  }
}

/* Density: calm ≥1600 (AXS-0475); compact ≤1100 */
@media (min-width: 1600px) {
  :root {
    --p2-home-gap: 0.75rem;
    --p2-home-pad: 0.55rem;
    --p2-home-card-pad-y: 0.55rem;
    --p2-home-card-pad-x: 0.7rem;
    --p2-home-min-h: 8.5rem;
  }
}
@media (max-width: 1100px) {
  :root {
    --p2-home-gap: 0.5rem;
    --p2-home-pad: 0.4rem;
    --p2-home-card-pad-y: 0.45rem;
    --p2-home-card-pad-x: 0.5rem;
    --p2-home-min-h: 7rem;
  }
  .home-lanes {
    grid-auto-columns: minmax(12rem, 15.5rem);
  }
}

/* State-matrix + responsive @375 (AXS-1079 · AXS-1427): no clip / no page H-scroll */
@media (max-width: 375px), (max-width: 480px) {
  .home-widget-lanes,
  .home-lanes {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .home-lane {
    min-width: 0;
    max-width: 100%;
  }
  .home-lane-card {
    overflow: visible;
  }
  .home-lane-card .kanban-card-title {
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
  }
  .page:has(.home-lanes),
  .page:has(.home-widget-lanes) {
    overflow-x: clip;
  }
}

/* =============================================================================
   EMPTY / loading / error — AXS-0389 · AXS-0413 · AXS-0437 · AXS-0461 ·
   AXS-0476 · AXS-0644 · AXS-0839 · AXS-1103 · AXS-1232 · AXS-1439
   ============================================================================= */

.page:has(.act-toolbar-ks) .empty:not(.cell-btn),
.page .empty:not(.cell-btn),
.at-empty,
.home-lanes-empty,
.errlist {
  box-sizing: border-box;
  max-width: min(100%, var(--p2-empty-max));
  margin-inline: auto;
  min-width: 0;
}

.page:has(.act-toolbar-ks) .empty:not(.cell-btn),
.page .empty:not(.cell-btn) {
  display: grid;
  justify-items: center;
  gap: var(--p2-empty-gap);
  padding: var(--p2-empty-pad-y) var(--p2-empty-pad-x);
  text-align: center;
  color: var(--ink-3);
  font-weight: var(--act-meta-w, 450);
  letter-spacing: var(--act-tracking, -0.01em);
  border: var(--p2-empty-border);
  border-radius: var(--p2-empty-radius);
  background: var(--p2-empty-bg);
  cursor: default; /* Affordance: empty is not clickable unless it contains a control */
}

/* IA order: title → sub → actions (at-empty already structured) */
.at-empty {
  padding: calc(var(--p2-empty-pad-y) * 1.4) var(--p2-empty-pad-x);
  text-align: center;
  color: var(--ink-2);
  display: grid;
  justify-items: center;
  gap: var(--p2-empty-gap);
  position: sticky;
  left: 0;
  cursor: default;
}
.at-empty-title {
  order: 0;
  font-size: 0.9375rem;
  font-weight: var(--act-title-w, 650);
  color: var(--ink);
  letter-spacing: var(--act-tracking, -0.01em);
}
.at-empty-sub {
  order: 1;
  font-size: 0.8125rem;
  font-weight: var(--act-meta-w, 450);
  color: var(--ink-3);
  max-width: var(--p2-empty-max);
}
.at-empty-actions {
  order: 2;
  justify-content: center;
  gap: var(--act-space-2);
  margin-top: var(--act-space-2);
}
.at-empty-actions .btn {
  cursor: pointer;
}

.errlist {
  max-width: min(100%, 40rem);
  font-variant-numeric: tabular-nums;
  cursor: default;
}

/* Loading bar — non-interactive */
.at-loading-bar,
.at-skeleton {
  cursor: default;
  pointer-events: none;
}

/* Journey: quiet enter for empty (≤3 children), no perpetual motion */
.page:has(.act-toolbar-ks) .empty:not(.cell-btn),
.at-empty {
  animation: act-enter var(--p2-shell-motion-d) var(--p2-shell-motion-ease) both;
}

/* Token parity @1280 (AXS-0644 / reference AXS-1232) */
@media (min-width: 1280px) {
  :root {
    --p2-empty-pad-y: 1.25rem;
    --p2-empty-pad-x: 1rem;
    --p2-empty-gap: 0.5rem;
  }
}

/* Density calm / compact (AXS-0476) */
@media (min-width: 1600px) {
  :root {
    --p2-empty-pad-y: 1.5rem;
    --p2-empty-pad-x: 1.25rem;
    --p2-empty-gap: 0.625rem;
  }
}
@media (max-width: 1100px) {
  :root {
    --p2-empty-pad-y: 1rem;
    --p2-empty-pad-x: 0.75rem;
    --p2-empty-gap: 0.375rem;
  }
}

/* @375 no clip / no page H-scroll (AXS-1103 · AXS-1439) */
@media (max-width: 375px), (max-width: 480px) {
  .page .empty:not(.cell-btn),
  .page:has(.act-toolbar-ks) .empty:not(.cell-btn),
  .at-empty,
  .errlist {
    max-width: 100%;
    width: 100%;
    padding-inline: max(0.75rem, env(safe-area-inset-left, 0));
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .at-empty-actions {
    flex-wrap: wrap;
    max-width: 100%;
  }
}

/* =============================================================================
   POPOVER (Filter / Sort / Settings / Mode) — .pop + .popover alias
   AXS-0391 · 0415 · 0439 · 0463 · 0477 · 0662 · 0855 · 1127 · 1238 · 1451
   ============================================================================= */

.pop,
.popover,
.act-mode-menu,
.act-settings-menu,
.act-filter-panel {
  box-sizing: border-box;
  min-width: 0;
}

.pop,
.popover {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--p2-pop-radius);
  box-shadow: var(--p2-pop-shadow);
  padding: var(--p2-pop-pad);
  max-width: min(var(--skin-pop-max, 24rem), calc(100vw - 1.5rem));
  max-height: min(70vh, 100dvh - 2rem);
  overflow: auto;
  overscroll-behavior: contain;
  /* Journey: stay above board, readable during triage */
  z-index: 1000;
}

/* IA order (AXS-0415): Mode List→Timeline→Kanban→Calendar is DOM order;
   Settings head → property list; Filter fields grid follows KS field order. */
.act-mode-menu {
  display: flex;
  flex-direction: column;
  gap: var(--p2-pop-gap);
  width: min(var(--act-menu-mode-w, 18.5rem), 92vw);
}
.act-mode-item {
  order: unset; /* preserve DOM: List, Timeline, Kanban, Calendar */
  cursor: pointer;
  min-height: var(--p2-pop-item-min-h);
  padding: var(--act-mode-item-pad-y, 0.45rem) var(--act-mode-item-pad-x, 0.65rem);
  gap: var(--act-mode-item-gap, 0.65rem);
}
.act-mode-item .muted,
.act-mode-item .small {
  font-weight: var(--act-meta-w, 450);
  color: var(--ink-3);
  max-width: var(--act-meta-max, 70ch);
  white-space: normal;
}

.act-settings-menu {
  width: min(var(--act-menu-settings-w, 16.5rem), 92vw);
  max-height: min(var(--act-menu-settings-max-h, 30rem), 70vh);
  overflow: auto;
}
.act-settings-head {
  order: 0;
  cursor: default;
  font-weight: var(--act-title-w, 650);
  color: var(--ink-3);
  user-select: none;
}
.act-settings-sub {
  cursor: default;
  font-weight: var(--act-meta-w, 450);
  color: var(--ink-3);
}
.act-settings-menu .selectable-item {
  cursor: pointer;
}

.act-filter-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--p2-pop-filter-gap-y) var(--p2-pop-filter-gap-x);
  align-items: end;
  padding: var(--p2-pop-filter-pad);
  width: min(var(--act-filter-w, 24rem), 92vw);
  min-width: min(var(--act-filter-min-w, 20rem), 92vw);
}
.act-filter-label {
  cursor: default;
  user-select: none;
}
.act-filter > .pop-anchor > .btn,
.act-filter-panel > .btn {
  cursor: pointer;
}

/* Affordance (AXS-0439): items clickable; section heads / hints not */
.pop .item,
.pop button.item,
.popover .item,
.popover button.item {
  cursor: pointer;
}
.pop h3,
.pop > b,
.pop .pop-sec,
.pop .act-settings-head,
.pop .act-filter-hint,
.pop .muted.small,
.popover h3,
.popover > b {
  cursor: default;
}
.pop .item:disabled,
.pop button.item:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

/* Selected/on wash — CLIO accent (journey scan) */
.pop .act-mode-item.on,
.pop .act-settings-menu .selectable-item.on,
.popover .act-mode-item.on {
  background: var(--accent-soft);
  color: var(--accent);
}

/* Token parity @1280 (AXS-0662 / reference AXS-1238) */
@media (min-width: 1280px) {
  :root {
    --p2-pop-pad: 0.35rem;
    --p2-pop-item-pad-y: 0.4rem;
    --p2-pop-item-pad-x: 0.65rem;
    --p2-pop-filter-pad: 0.65rem;
    --p2-pop-filter-gap-y: 0.65rem;
    --p2-pop-filter-gap-x: 0.55rem;
  }
}

/* Density calm / compact (AXS-0477) */
@media (min-width: 1600px) {
  :root {
    --p2-pop-pad: 0.4rem;
    --p2-pop-item-pad-y: 0.45rem;
    --p2-pop-filter-pad: 0.75rem;
    --p2-pop-filter-gap-y: 0.75rem;
  }
}
@media (max-width: 1100px) {
  :root {
    --p2-pop-pad: 0.3rem;
    --p2-pop-item-pad-y: 0.35rem;
    --p2-pop-item-min-h: 2rem;
    --p2-pop-filter-pad: 0.55rem;
    --p2-pop-filter-gap-y: 0.5rem;
    --p2-pop-filter-gap-x: 0.45rem;
  }
  .act-filter-panel {
    grid-template-columns: 1fr;
    min-width: min(100%, 92vw);
    width: min(var(--act-filter-w, 24rem), 92vw);
  }
}

/* @375 no clip / no page H-scroll (AXS-1127 · AXS-1451) */
@media (max-width: 375px), (max-width: 480px) {
  .pop,
  .popover,
  .act-mode-menu,
  .act-settings-menu,
  .act-filter-panel {
    max-width: calc(100vw - 1rem);
    min-width: min(var(--skin-pop-min, 15rem), calc(100vw - 1rem));
    width: auto;
  }
  .act-filter-panel {
    grid-template-columns: 1fr;
    width: min(100%, calc(100vw - 1rem));
    min-width: 0;
  }
  .pop .item,
  .pop button.item,
  .act-mode-item {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* =============================================================================
   DARK theme Activities — AXS-0393 · 0417 · 0441 · 0465 · 0478 · 0680 ·
   0871 · 1151 · 1244 · 1463
   ============================================================================= */

[data-theme='dark'] .page:has(.act-toolbar-ks),
.theme-dark .page:has(.act-toolbar-ks) {
  background:
    radial-gradient(120% 80% at 0 0, color-mix(in srgb, var(--accent-soft) 55%, transparent), transparent 55%),
    var(--bg);
}

/* Journey: contrast for scan→open on dark board */
[data-theme='dark'] .home-lane,
.theme-dark .home-lane {
  background: var(--p2-home-wash);
  border-color: var(--line-2);
}
[data-theme='dark'] .home-lane-card,
.theme-dark .home-lane-card {
  background: var(--panel);
  border-color: var(--line-2);
  box-shadow: var(--shadow-sm);
}
[data-theme='dark'] .home-lane.is-drop-target,
.theme-dark .home-lane.is-drop-target {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--p2-home-wash) 65%, var(--accent-soft));
}

[data-theme='dark'] .page:has(.act-toolbar-ks) .empty:not(.cell-btn),
[data-theme='dark'] .at-empty,
.theme-dark .page:has(.act-toolbar-ks) .empty:not(.cell-btn),
.theme-dark .at-empty {
  background: var(--p2-empty-bg);
  border-color: var(--line);
  color: var(--ink-3);
}
[data-theme='dark'] .at-empty-title,
.theme-dark .at-empty-title {
  color: var(--ink);
}

[data-theme='dark'] .pop,
[data-theme='dark'] .popover,
.theme-dark .pop,
.theme-dark .popover {
  background: var(--panel);
  border-color: var(--line);
  box-shadow: var(--p2-pop-shadow);
  color: var(--ink);
}
[data-theme='dark'] .act-ks-tools .tool.on,
[data-theme='dark'] .act-mode-item.on,
[data-theme='dark'] .act-settings-menu .selectable-item.on,
.theme-dark .act-ks-tools .tool.on,
.theme-dark .act-mode-item.on,
.theme-dark .act-settings-menu .selectable-item.on {
  background: var(--accent-soft);
  color: var(--accent);
}

/* Affordance in dark (AXS-0441): same cursor rules, ensure contrast on hover */
[data-theme='dark'] .home-lane-card.is-clickable:hover,
.theme-dark .home-lane-card.is-clickable:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}
[data-theme='dark'] .pop .item:hover,
[data-theme='dark'] .pop button.item:hover,
.theme-dark .pop .item:hover {
  background: var(--hover);
}

/* IA: dark keeps same chrome order as light (AXS-0417) — no reorder overrides */

/* Token parity @1280 dark (AXS-0680 / reference AXS-1244) — same spacing tokens */
@media (min-width: 1280px) {
  [data-theme='dark'],
  .theme-dark {
    --p2-home-gap: 0.625rem;
    --p2-home-pad: 0.5rem;
    --p2-empty-pad-y: 1.25rem;
    --p2-pop-filter-pad: 0.65rem;
  }
}

/* Density dark calm/compact (AXS-0478) — inherit shell density vars */
@media (min-width: 1600px) {
  [data-theme='dark'],
  .theme-dark {
    --p2-home-gap: 0.75rem;
    --p2-empty-pad-y: 1.5rem;
    --p2-pop-filter-pad: 0.75rem;
  }
}
@media (max-width: 1100px) {
  [data-theme='dark'],
  .theme-dark {
    --p2-home-gap: 0.5rem;
    --p2-empty-pad-y: 1rem;
    --p2-pop-filter-pad: 0.55rem;
  }
}

/* @375 dark: no clip / no page H-scroll (AXS-1151 · AXS-1463) */
@media (max-width: 375px), (max-width: 480px) {
  [data-theme='dark'] .page:has(.act-toolbar-ks),
  .theme-dark .page:has(.act-toolbar-ks),
  [data-theme='dark'] .page:has(.home-lanes),
  .theme-dark .page:has(.home-lanes) {
    overflow-x: clip;
  }
  [data-theme='dark'] .pop,
  [data-theme='dark'] .popover,
  .theme-dark .pop,
  .theme-dark .popover {
    max-width: calc(100vw - 1rem);
  }
}

/* =============================================================================
   DRAWER — AXS-0403 · 0451 · 0471 · 0551 · 0759 · 0983 · 1199 · 1379
   ============================================================================= */

.activity-detail-drawer {
  box-sizing: border-box;
  width: min(var(--p2-drawer-w), calc(100vw - var(--p2-drawer-side-reserve)));
  max-width: 100%;
  padding: var(--p2-drawer-pad);
  background: var(--bg);
  border-left: 1px solid var(--p2-drawer-border);
  box-shadow: var(--p2-drawer-shadow);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  min-width: 0;
}
/* Focus / drop not color-only: ring + wash + border weight */
.activity-detail-drawer:focus-visible,
.activity-detail-drawer .drawer-actions .btn:focus-visible,
.activity-detail-drawer .activity-title-input:focus-visible {
  outline: var(--p2-drawer-focus-ring);
  outline-offset: var(--p2-drawer-focus-offset);
}
.activity-detail-drawer:focus-visible {
  background: var(--p2-drawer-focus-bg);
  border-left-width: 2px;
  border-left-color: color-mix(in srgb, var(--accent) 45%, var(--p2-drawer-border));
}
html.act-is-dragging .activity-detail-drawer {
  background: var(--p2-drawer-drop-bg);
  box-shadow: inset 3px 0 0 0 var(--p2-drawer-drop-ring), var(--p2-drawer-shadow);
}
.activity-detail-drawer .drawer-actions .btn {
  min-height: var(--p2-drawer-ctl-h);
  box-sizing: border-box;
}

.activity-drawer-page {
  display: grid;
  gap: var(--p2-drawer-gap);
  min-width: 0;
  max-width: 100%;
}

/* IA order (AXS-0403): actions → title → summary → body (DOM);
   reinforce sticky actions first in visual stack */
.activity-detail-drawer .drawer-actions {
  order: 0;
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--act-space-2);
  background: var(--bg);
  border-bottom: 1px solid var(--line-2);
}
.activity-drawer-page .activity-title-card,
.activity-drawer-page .head.activity-title-card {
  order: 1;
  min-width: 0;
}
.activity-drawer-page .activity-summary-grid {
  order: 2;
  min-width: 0;
}
.activity-drawer-page .activity-detail-body {
  order: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--p2-drawer-body-gap);
  min-width: 0;
}

.activity-drawer-page .activity-title-input {
  font-size: var(--p2-drawer-title-fs);
  font-weight: var(--act-title-w, 650);
  letter-spacing: var(--act-tracking, -0.01em);
  color: var(--ink);
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.activity-metadata-card {
  display: grid;
  gap: var(--p2-drawer-meta-gap);
  min-width: 0;
}
.metadata-field-row {
  min-width: 0;
}
.metadata-field-row > div:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.activity-detail-drawer .btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.activity-detail-drawer .drawer-resizer {
  cursor: col-resize;
}

/* Density calm ≥1600 / compact ≤1100 (AXS-0471) */
@media (min-width: 1600px) {
  :root {
    --p2-drawer-pad: 1.15rem;
    --p2-drawer-gap: 1rem;
    --p2-drawer-body-gap: 1rem;
    --p2-drawer-meta-gap: 0.75rem;
  }
}
@media (max-width: 1100px) {
  :root {
    --p2-drawer-pad: 0.85rem;
    --p2-drawer-gap: 0.75rem;
    --p2-drawer-body-gap: 0.75rem;
    --p2-drawer-meta-gap: 0.5rem;
    --p2-drawer-side-reserve: 0;
  }
  .activity-detail-drawer {
    width: min(100vw, 100%);
    max-width: 100vw;
  }
  .drawer-resizer {
    display: none;
  }
}

/* State-matrix mid widths — default @ 768–1600 no clip (AXS-0987 / 0991 / 0995 / 0999 / 1003) */
@media (min-width: 768px) {
  .activity-detail-drawer {
    min-width: 0;
    max-width: min(var(--p2-drawer-w), calc(100vw - var(--p2-drawer-side-reserve)));
    overflow-x: hidden;
  }
  .activity-drawer-page,
  .activity-drawer-page .activity-summary-grid,
  .activity-drawer-page .activity-detail-body,
  .activity-metadata-card,
  .activity-metadata-list {
    min-width: 0;
    max-width: 100%;
  }
  .activity-detail-drawer .drawer-actions {
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
  }
}

/* Token parity @375 (AXS-0551 / reference AXS-1199) + state-matrix (AXS-0983)
   + responsive no page H-scroll (AXS-1379) */
@media (max-width: 375px), (max-width: 480px) {
  .activity-detail-scrim {
    max-width: 100vw;
    overflow-x: hidden;
  }
  .activity-detail-drawer {
    width: 100vw !important;
    max-width: 100vw;
    padding: var(--p2-drawer-pad);
    padding-left: max(var(--p2-drawer-pad), env(safe-area-inset-left, 0));
    padding-right: max(var(--p2-drawer-pad), env(safe-area-inset-right, 0));
    overflow-x: hidden;
  }
  .activity-drawer-page,
  .activity-drawer-page .activity-summary-grid,
  .activity-drawer-page .activity-detail-body,
  .activity-metadata-list,
  .metadata-field-row {
    min-width: 0;
    max-width: 100%;
  }
  .activity-drawer-page .activity-summary-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .activity-detail-drawer .drawer-actions {
    gap: var(--act-space-1);
  }
  .activity-detail-drawer .drawer-actions .btn {
    flex: 0 1 auto;
    min-width: 0;
  }
  html:has(.activity-detail-drawer),
  body:has(.activity-detail-drawer) {
    overflow-x: clip;
  }
}

[data-theme='dark'] .activity-detail-drawer,
.theme-dark .activity-detail-drawer {
  background: var(--bg);
  border-left-color: var(--line);
  box-shadow: -18px 0 36px rgba(0, 0, 0, 0.55);
}
[data-theme='dark'] .activity-detail-drawer .drawer-actions,
.theme-dark .activity-detail-drawer .drawer-actions {
  background: var(--bg);
  border-bottom-color: var(--line);
}
[data-theme='dark'] .activity-title-input,
[data-theme='dark'] .activity-metadata-list,
.theme-dark .activity-title-input,
.theme-dark .activity-metadata-list {
  background: var(--panel);
  border-color: var(--line);
}

/* =============================================================================
   ERROR-RECOVERY — toast/undo visibility from shell surfaces
   AXS-0451 drawer · AXS-0459 home · AXS-0461 empty · AXS-0463 popover ·
   AXS-0465 dark
   (JS already calls toast()/attempt(); CSS ensures surface + z-index + contrast)
   ============================================================================= */

.toast {
  position: fixed;
  bottom: max(18px, env(safe-area-inset-bottom, 0));
  left: 50%;
  transform: translateX(-50%);
  z-index: 2600; /* above drawer (900) and pop (1000/1200) */
  max-width: min(520px, calc(100vw - 1.5rem));
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  pointer-events: auto;
}

.toast.err {
  background: var(--danger);
  color: var(--bg);
}

.toast-action {
  cursor: pointer;
  flex: 0 0 auto;
}

/* When drawer open, keep toast clear of drawer edge on wide screens */
body:has(.activity-detail-drawer) .toast {
  z-index: 2600;
}

[data-theme='dark'] .toast,
.theme-dark .toast {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
}
[data-theme='dark'] .toast:not(.err),
.theme-dark .toast:not(.err) {
  background: var(--ink);
  color: var(--bg);
}
[data-theme='dark'] .toast.err,
.theme-dark .toast.err {
  background: var(--danger);
  color: var(--accent-ink, #07110d);
}
[data-theme='dark'] .toast-action,
.theme-dark .toast-action {
  border-color: color-mix(in srgb, var(--bg) 45%, transparent);
}

@media (max-width: 375px), (max-width: 480px) {
  .toast {
    left: 50%;
    right: auto;
    bottom: max(12px, env(safe-area-inset-bottom, 0));
    max-width: calc(100vw - 1rem);
    padding: 8px 12px;
  }
}

/* =============================================================================
   Reduced motion — respect for all shell surfaces
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  .home-lane,
  .home-lane-card,
  .page:has(.act-toolbar-ks) .empty:not(.cell-btn),
  .at-empty,
  .pop,
  .popover,
  .act-mode-item,
  .activity-detail-drawer,
  .activity-drawer-page > * {
    animation: none !important;
    transition: none !important;
  }
  .home-lane-card.is-clickable:active {
    transform: none;
  }
}