/* =============================================================================
   P2 aesthetic batch 04 — Activities kanban chrome (toolbar · chips · lane · card)
   Additive layer over app.css --act-* tokens. Parent wires via @import.
   North star: KS human chrome; KS-better polish only — not a third aesthetic.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Component-spec tokens (default states) — AXS-0695 / 0711 / 0727 / 0743
   Documented as CSS variables so hover/focus/active can extend without magic.
   ----------------------------------------------------------------------------- */
:root {
  /* Toolbar (view · mode · search · tools)
     Component-spec: default / hover / focus-visible / on / drop-target / disabled
     (AXS-0697 / 0700 / 0703 / 0705 / 0708) — never color-only. */
  --act-toolbar-gap: var(--act-space-2);
  --act-toolbar-pad-b: var(--act-space-1);
  --act-toolbar-line: var(--line-2);
  --act-toolbar-ctl-bg: transparent;
  --act-toolbar-ctl-ink: var(--ink-2);
  --act-toolbar-ctl-border: transparent;
  --act-toolbar-ctl-radius: var(--radius);
  --act-toolbar-on-bg: var(--accent-soft);
  --act-toolbar-on-ink: var(--accent);
  --act-toolbar-on-border: color-mix(in srgb, var(--accent) 28%, transparent);
  --act-toolbar-hover-bg: var(--hover);
  --act-toolbar-hover-ink: var(--ink);
  --act-toolbar-hover-border: var(--line);
  --act-toolbar-focus-ring: 2px solid color-mix(in srgb, var(--accent) 65%, transparent);
  --act-toolbar-focus-offset: 2px;
  --act-toolbar-focus-bg: color-mix(in srgb, var(--accent-soft) 35%, transparent);
  --act-toolbar-drop-bg: color-mix(in srgb, var(--accent-soft) 40%, transparent);
  --act-toolbar-drop-ring: color-mix(in srgb, var(--accent) 40%, transparent);
  --act-toolbar-disabled-opacity: 0.45;

  /* Baked filter chips — default / focus-visible / drop-target (AXS-0713 / 0716 / 0719 / 0721 / 0724) */
  --act-chip-row-gap: var(--act-space-1);
  --act-chip-row-pad-b: var(--act-space-2);
  --act-chip-bg: var(--act-scope-chip-bg);
  --act-chip-ink: var(--act-scope-chip-ink);
  --act-chip-line: var(--act-scope-chip-line);
  --act-chip-value-bg: var(--act-scope-value-bg);
  --act-chip-radius: var(--radius);
  --act-chip-min-h: calc(var(--act-ctl-h) - var(--act-scope-chip-shrink));
  --act-chip-focus-ring: 2px solid color-mix(in srgb, var(--accent) 65%, transparent);
  --act-chip-focus-offset: 2px;
  --act-chip-focus-bg: color-mix(in srgb, var(--accent-soft) 45%, var(--act-scope-chip-bg));
  --act-chip-drop-bg: color-mix(in srgb, var(--accent-soft) 55%, transparent);
  --act-chip-drop-ring: color-mix(in srgb, var(--accent) 42%, transparent);

  /* Lane head/body — default / focus-visible / drop-target (AXS-0729 / 0732 / 0735 / 0737 / 0740) */
  --act-lane-head-gap: var(--act-space-2);
  --act-lane-head-pad: var(--act-space-1) var(--act-space-1) var(--act-space-2);
  --act-lane-head-mb: var(--act-space-2);
  --act-lane-head-line: var(--line-2);
  --act-lane-title-ink: var(--ink);
  --act-lane-count-ink: var(--ink-3);
  --act-lane-focus-ring: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  --act-lane-focus-offset: 2px;
  --act-lane-focus-bg: color-mix(in srgb, var(--accent-soft) 28%, transparent);
  --act-lane-drop-bg: color-mix(in srgb, var(--accent-soft) 50%, transparent);
  --act-lane-drop-ring: color-mix(in srgb, var(--accent) 48%, transparent);
  --act-lane-drop-dash: color-mix(in srgb, var(--accent) 55%, transparent);

  /* Card — default / hover / focus-visible / drop(drag) (AXS-0745 / 0748 / 0751 / 0753 / 0756) */
  --act-card-bg: var(--panel);
  --act-card-border: var(--line-2);
  --act-card-radius: calc(var(--radius) + 0.1rem);
  --act-card-shadow: var(--act-elev);
  --act-card-hover-border: color-mix(in srgb, var(--accent) 40%, var(--line));
  --act-card-hover-shadow: 0 4px 14px rgba(20, 28, 38, 0.1);
  --act-card-drag-border: color-mix(in srgb, var(--accent) 35%, var(--line-2));
  --act-card-drag-shadow: var(--act-elev);
  --act-card-drag-filter: brightness(0.97);
  --act-card-focus-ring: 2px solid color-mix(in srgb, var(--accent) 65%, transparent);
  --act-card-focus-offset: 2px;
  --act-card-focus-bg: color-mix(in srgb, var(--accent-soft) 40%, var(--panel));
  --act-card-drop-bg: color-mix(in srgb, var(--accent-soft) 35%, var(--panel));
  --act-card-drop-border: color-mix(in srgb, var(--accent) 45%, var(--line));
  --act-card-drop-ring: color-mix(in srgb, var(--accent) 40%, transparent);

  /* Phone rhythm @375 — KS ±2px (token-parity-ks) */
  --act-phone-toolbar-gap: 4px;   /* ~act-space-1 */
  --act-phone-chip-gap: 4px;
  --act-phone-lane-pad-x: 4px;
  --act-phone-card-pad-y: 7px;    /* ~0.45rem */
  --act-phone-card-pad-x: 9px;    /* ~0.55rem */
  --act-phone-card-gap: 6px;

  /* Error-recovery toast (surface-agnostic, activities-scoped) */
  --act-toast-z: 2600;
  --act-toast-max: min(520px, calc(100vw - 24px));
  --act-toast-pad-y: 8px;
  --act-toast-pad-x: 14px;
  --act-toast-action-min: 1.75rem;
}

/* -----------------------------------------------------------------------------
   Information architecture — lock KS visual order (AXS-0395 / 0397 / 0399 / 0401)
   DOM already matches; CSS order hardens against future sibling inserts.
   ----------------------------------------------------------------------------- */

/* Toolbar: view · mode · search · Filter/Sort/Settings */
.act-toolbar-ks .act-toolbar-primary {
  display: flex;
  align-items: center;
  gap: var(--act-toolbar-gap);
  min-width: 0;
}
.act-toolbar-ks .act-toolbar-primary > .pop-anchor:has(.act-view-pop) { order: 1; }
.act-toolbar-ks .act-toolbar-primary > .pop-anchor:has(.act-mode-pop) { order: 2; }
.act-toolbar-ks .act-toolbar-primary > .act-ks-tools { order: 3; }
.act-toolbar-ks .act-toolbar-primary > .act-new-cta { order: 4; }

/* Tools cluster: Filter → Sort → Settings (DOM + flex order) */
.act-toolbar-ks .act-ks-tools {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--act-tool-gap);
}
.act-toolbar-ks .act-ks-tools > .pop-anchor:nth-child(1) { order: 1; }
.act-toolbar-ks .act-ks-tools > .pop-anchor:nth-child(2) { order: 2; }
.act-toolbar-ks .act-ks-tools > .pop-anchor:nth-child(3) { order: 3; }

/* Chips: baked filters only, left→right wrap, no dense Status/Tags strip */
.act-view-scope {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--act-chip-row-gap);
  row-gap: var(--act-chip-row-gap);
  padding: 0 0 var(--act-chip-row-pad-b);
  min-width: 0;
  max-width: 100%;
}
.act-view-scope-chip {
  order: 0;
  background: var(--act-chip-bg);
  color: var(--act-chip-ink);
  border-color: var(--act-chip-line);
  border-radius: var(--act-chip-radius);
  min-height: var(--act-chip-min-h);
  max-width: min(100%, 70ch);
}
.act-view-scope-value { background: var(--act-chip-value-bg); }

/* Lane: head above body (column flex + explicit order) */
.kanban:not(.projects-board) .kanban-lane,
.kanban:not(.projects-board) .lane.kanban-lane {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.kanban:not(.projects-board) .kanban-lane-head { order: 1; flex: 0 0 auto; }
.kanban:not(.projects-board) .kanban-lane-body { order: 2; flex: 1 1 auto; min-width: 0; }

/* Card anatomy: title → parent → labels → programs → blocked → props → footer meta */
.kanban:not(.projects-board) .kanban-card {
  display: flex;
  flex-direction: column;
  gap: var(--act-space-2);
  min-width: 0;
}
.kanban:not(.projects-board) .kanban-card > .kanban-card-title { order: 1; }
.kanban:not(.projects-board) .kanban-card > .kanban-parent { order: 2; }
.kanban:not(.projects-board) .kanban-card > .kanban-labels,
.kanban:not(.projects-board) .kanban-card > .activity-labels { order: 3; }
.kanban:not(.projects-board) .kanban-card > .kanban-programs { order: 4; }
.kanban:not(.projects-board) .kanban-card > .kanban-blocked { order: 5; }
.kanban:not(.projects-board) .kanban-card > .kanban-prop { order: 6; }
.kanban:not(.projects-board) .kanban-card > .kanban-card-meta { order: 7; }
.kanban:not(.projects-board) .kanban-card > .kanban-subtasks { order: 8; }

/* -----------------------------------------------------------------------------
   Component-spec bindings — default / focus / drop not color-only
   (AXS-0695 / 0697 / 0700 / 0703 / 0705 / 0708 · 0711 / 0713 / 0716 / 0719 / 0721 / 0724
    · 0727 / 0729 / 0732 / 0735 / 0737 / 0740 · 0743 / 0745 / 0748 / 0751 / 0753 / 0756)
   ----------------------------------------------------------------------------- */
.act-toolbar-ks {
  padding-bottom: var(--act-toolbar-pad-b);
  border-bottom: 1px solid var(--act-toolbar-line);
}
.act-toolbar-ks .act-ks-tools .tool,
.act-toolbar-ks .act-ks-tools .pop-anchor > .btn {
  background: var(--act-toolbar-ctl-bg);
  color: var(--act-toolbar-ctl-ink);
  border: 1px solid var(--act-toolbar-ctl-border);
  border-radius: var(--act-toolbar-ctl-radius);
}
.act-toolbar-ks .act-ks-tools .tool.on {
  background: var(--act-toolbar-on-bg);
  color: var(--act-toolbar-on-ink);
  border-color: var(--act-toolbar-on-border);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent);
}
@media (hover: hover) {
  .act-toolbar-ks .act-ks-tools .tool:hover {
    background: var(--act-toolbar-hover-bg);
    color: var(--act-toolbar-hover-ink);
    border-color: var(--act-toolbar-hover-border);
  }
}
.act-toolbar-ks .act-ks-tools .tool:focus-visible,
.act-toolbar-ks .pop-anchor > .btn:focus-visible {
  outline: var(--act-toolbar-focus-ring);
  outline-offset: var(--act-toolbar-focus-offset);
  background: var(--act-toolbar-focus-bg);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
}
/* Drop-target while board drag (html.act-is-dragging) — bg + inset ring, not hue alone */
html.act-is-dragging .act-toolbar-ks {
  background: var(--act-toolbar-drop-bg);
  box-shadow: inset 0 -2px 0 0 var(--act-toolbar-drop-ring);
}
.act-toolbar-ks .act-ks-tools .tool:disabled,
.act-toolbar-ks .btn:disabled {
  opacity: var(--act-toolbar-disabled-opacity);
}

/* Chips: border + ink + focus ring (not color-only) */
.act-view-scope-chip {
  border: 1px solid var(--act-chip-line);
  background: var(--act-chip-bg);
  color: var(--act-chip-ink);
}
.act-view-scope-chip:focus-visible {
  outline: var(--act-chip-focus-ring);
  outline-offset: var(--act-chip-focus-offset);
  background: var(--act-chip-focus-bg);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--act-chip-line));
}
html.act-is-dragging .act-view-scope {
  background: var(--act-chip-drop-bg);
  box-shadow: inset 0 0 0 1px var(--act-chip-drop-ring);
  border-radius: var(--act-chip-radius);
}

.kanban:not(.projects-board) .kanban-lane-head {
  gap: var(--act-lane-head-gap);
  padding: var(--act-lane-head-pad);
  margin: 0 0 var(--act-lane-head-mb);
  border-bottom: 1px solid var(--act-lane-head-line);
}
.kanban:not(.projects-board) .kanban-lane-title { color: var(--act-lane-title-ink); }
.kanban:not(.projects-board) .kanban-lane-count { color: var(--act-lane-count-ink); }
/* Lane default: hairline + title weight already; ensure focus/drop multi-cue */
.kanban:not(.projects-board) .kanban-lane:focus-visible,
.kanban:not(.projects-board) .kanban-lane-body:focus-visible {
  outline: var(--act-lane-focus-ring);
  outline-offset: var(--act-lane-focus-offset);
  background: var(--act-lane-focus-bg);
}
.kanban:not(.projects-board) .kanban-lane.is-drop-target {
  background: var(--act-lane-drop-bg);
  box-shadow: inset 0 0 0 1.5px var(--act-lane-drop-ring);
  outline: 1px dashed var(--act-lane-drop-dash);
  outline-offset: -3px;
}

.kanban:not(.projects-board) .kanban-card {
  background: var(--act-card-bg);
  border: 1px solid var(--act-card-border);
  border-radius: var(--act-card-radius);
  box-shadow: var(--act-card-shadow);
  padding: var(--act-card-pad-y) var(--act-card-pad-x);
}
.kanban:not(.projects-board) .kanban-card:hover {
  border-color: var(--act-card-hover-border);
  box-shadow: var(--act-card-hover-shadow);
}
.kanban:not(.projects-board) .kanban-card.is-dragging {
  border-color: var(--act-card-drag-border);
  box-shadow: var(--act-card-drag-shadow);
  filter: var(--act-card-drag-filter);
}
.kanban:not(.projects-board) .kanban-card.is-clickable:focus-visible {
  outline: var(--act-card-focus-ring);
  outline-offset: var(--act-card-focus-offset);
  background: var(--act-card-focus-bg);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--act-card-border));
}
/* Card as drop indicator (nested / reorder cue) */
.kanban:not(.projects-board) .kanban-card.is-drop-target {
  background: var(--act-card-drop-bg);
  border-color: var(--act-card-drop-border);
  box-shadow: inset 0 0 0 1.5px var(--act-card-drop-ring);
}

/* -----------------------------------------------------------------------------
   Density-choice — calm @1600 · compact @1100 (AXS-0467–0470)
   ----------------------------------------------------------------------------- */
@media (min-width: 1600px) {
  :root {
    --act-toolbar-gap: calc(var(--act-space-2) * var(--act-density, 1.08));
    --act-chip-row-gap: calc(var(--act-space-1) * var(--act-density, 1.08));
    --act-chip-row-pad-b: calc(var(--act-space-2) * var(--act-density, 1.08));
    --act-lane-head-gap: calc(var(--act-space-2) * var(--act-density, 1.08));
    --act-lane-head-mb: calc(var(--act-space-2) * 1.1);
    --act-card-pad-y: 0.55rem;
    --act-card-pad-x: 0.7rem;
    --act-card-gap: 0.55rem;
  }
  .act-toolbar-ks .act-toolbar-primary { gap: var(--act-toolbar-gap); }
  .act-view-scope {
    gap: var(--act-chip-row-gap);
    padding-bottom: var(--act-chip-row-pad-b);
  }
  .kanban:not(.projects-board) .kanban-lane-head {
    gap: var(--act-lane-head-gap);
    margin-bottom: var(--act-lane-head-mb);
  }
  .kanban:not(.projects-board) .kanban-card {
    padding: var(--act-card-pad-y) var(--act-card-pad-x);
    margin-bottom: var(--act-card-gap);
    gap: var(--act-space-2);
  }
}

@media (max-width: 1100px) {
  :root {
    --act-toolbar-gap: var(--act-space-1);
    --act-chip-row-gap: 0.2rem;
    --act-chip-row-pad-b: var(--act-space-1);
    --act-lane-head-gap: var(--act-space-1);
    --act-lane-head-mb: var(--act-space-1);
    --act-card-pad-y: 0.45rem;
    --act-card-pad-x: 0.55rem;
    --act-card-gap: 0.4rem;
  }
  .act-toolbar-ks .act-toolbar-primary { gap: var(--act-toolbar-gap); }
  .act-view-scope {
    gap: var(--act-chip-row-gap);
    padding-bottom: var(--act-chip-row-pad-b);
  }
  .kanban:not(.projects-board) .kanban-lane-head {
    gap: var(--act-lane-head-gap);
    margin-bottom: var(--act-lane-head-mb);
    padding: 0.2rem 0.2rem 0.4rem;
  }
  .kanban:not(.projects-board) .kanban-card {
    padding: var(--act-card-pad-y) var(--act-card-pad-x);
    margin-bottom: var(--act-card-gap);
    gap: var(--act-space-1);
  }
}

/* -----------------------------------------------------------------------------
   Error-recovery — toast / undo surface for activities chrome (AXS-0443–0449)
   CSS cannot attach origin; strengthens toast when Activities is mounted.
   ----------------------------------------------------------------------------- */
body:has(.act-toolbar-ks) .toast,
body:has(.act-view-scope) .toast,
body:has(.kanban:not(.projects-board)) .toast {
  z-index: var(--act-toast-z);
  max-width: var(--act-toast-max);
  padding: var(--act-toast-pad-y) var(--act-toast-pad-x);
  box-sizing: border-box;
  /* Stay clear of safe areas; never force page scroll */
  left: 50%;
  right: auto;
  bottom: max(18px, env(safe-area-inset-bottom, 0));
  transform: translateX(-50%);
  flex-wrap: wrap;
  gap: 8px 10px;
  overflow-wrap: anywhere;
  word-break: break-word;
}
body:has(.act-toolbar-ks) .toast.err,
body:has(.kanban:not(.projects-board)) .toast.err {
  /* Not color-only: border + weight for failed board actions */
  outline: 1px solid color-mix(in srgb, var(--bg) 35%, transparent);
  outline-offset: 0;
  font-weight: 550;
}
body:has(.act-toolbar-ks) .toast .toast-action,
body:has(.kanban:not(.projects-board)) .toast .toast-action {
  min-height: var(--act-toast-action-min);
  min-width: var(--act-toast-action-min);
  flex: 0 0 auto;
  white-space: nowrap;
}
body:has(.act-toolbar-ks) .toast .toast-action:focus-visible,
body:has(.kanban:not(.projects-board)) .toast .toast-action:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--bg) 70%, transparent);
  outline-offset: 2px;
}

/* -----------------------------------------------------------------------------
   State-matrix + token-parity + responsive @ ≤375 (AXS-0887/0911/0935/0959,
   0479/0497/0515/0533, 1175/1181/1187/1193, 1331/1343/1355/1367)
   ----------------------------------------------------------------------------- */
@media (max-width: 375px) {
  :root {
    --act-page-pad-x: 0.75rem;
    --act-page-pad-y: 0.75rem;
    --act-search-min: 5.5rem;
    --act-search-basis: 6.5rem;
    --act-view-max: 12rem;
    --act-view-reserve-phone: 6rem;
    --skin-kanban-col-min: min(14rem, calc(100vw - 2.5rem));
    --skin-kanban-col-max: min(16.5rem, calc(100vw - 1.5rem));
    --act-card-pad-y: var(--act-phone-card-pad-y);
    --act-card-pad-x: var(--act-phone-card-pad-x);
    --act-card-gap: var(--act-phone-card-gap);
  }

  .page:has(.act-toolbar-ks) {
    overflow-x: clip;
    max-width: 100vw;
    padding-left: max(var(--act-rail-clear), var(--act-page-pad-x));
    padding-right: var(--act-page-pad-x);
  }

  /* Toolbar: wrap, no clip/overlap, no page scroll */
  .act-toolbar-ks,
  .act-toolbar-ks .act-toolbar-primary {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .act-toolbar-ks .act-toolbar-primary {
    flex-wrap: wrap;
    gap: var(--act-phone-toolbar-gap);
    row-gap: 6px;
  }
  .act-toolbar-ks .act-toolbar-search {
    flex: 1 1 100%;
    min-width: 0;
    max-width: 100%;
    order: 3;
  }
  .act-toolbar-ks .act-ks-tools {
    margin-left: 0;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .act-toolbar-ks .pop-anchor:has(.act-view-pop),
  .act-toolbar-ks .pop-anchor:has(.act-mode-pop) {
    max-width: min(var(--act-view-max), calc(100% - 0.5rem));
    min-width: 0;
  }
  .act-toolbar-ks .pop-anchor > .btn.act-view-pop .act-view-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Chips: wrap inside viewport */
  .act-view-scope {
    gap: var(--act-phone-chip-gap);
    max-width: 100%;
    overflow: visible;
  }
  .act-view-scope-chip {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Lane: board scrolls horizontally; page does not */
  .kanban:not(.projects-board) {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-left: var(--act-phone-lane-pad-x);
    padding-right: var(--act-phone-lane-pad-x);
  }
  .kanban:not(.projects-board) .kanban-lane,
  .kanban:not(.projects-board) .lane.kanban-lane {
    min-width: var(--skin-kanban-col-min);
    max-width: none;
    box-sizing: border-box;
  }
  .kanban:not(.projects-board) .kanban-lane-head {
    flex-wrap: wrap;
    gap: 4px 8px;
    min-width: 0;
  }
  .kanban:not(.projects-board) .kanban-lane-title {
    overflow-wrap: anywhere;
    hyphens: auto;
    max-width: 100%;
  }
  .kanban:not(.projects-board) .kanban-lane-body {
    min-width: 0;
  }

  /* Card: full wrap, no overflow */
  .kanban:not(.projects-board) .kanban-card {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: visible;
    padding: var(--act-phone-card-pad-y) var(--act-phone-card-pad-x);
    margin-bottom: var(--act-phone-card-gap);
    gap: 6px;
  }
  .kanban:not(.projects-board) .kanban-card-title,
  .kanban:not(.projects-board) .kanban-parent,
  .kanban:not(.projects-board) .kanban-programs,
  .kanban:not(.projects-board) .kanban-blocked {
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
  }
  .kanban:not(.projects-board) .kanban-card-meta {
    gap: 4px;
    padding-right: 0;
  }
  .kanban:not(.projects-board) .kanban-prop {
    max-width: 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }

  body:has(.act-toolbar-ks) .toast {
    max-width: calc(100vw - 16px);
    left: 8px;
    right: 8px;
    transform: none;
    width: auto;
  }
}

/* Phone / compact flags (same containment as 375 media) */
html[data-phone='1'] .page:has(.act-toolbar-ks),
html[data-compact='1'] .page:has(.act-toolbar-ks) {
  overflow-x: clip;
  max-width: 100%;
}
html[data-phone='1'] .act-toolbar-ks .act-toolbar-primary,
html[data-compact='1'] .act-toolbar-ks .act-toolbar-primary {
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
}
html[data-phone='1'] .act-view-scope,
html[data-compact='1'] .act-view-scope {
  max-width: 100%;
}
html[data-phone='1'] .kanban:not(.projects-board) .kanban-card,
html[data-compact='1'] .kanban:not(.projects-board) .kanban-card {
  max-width: 100%;
  min-width: 0;
}

/* -----------------------------------------------------------------------------
   State-matrix mid widths — default @ 768 / 1100 / 1280 / 1440 / 1600
   no clip/overlap (AXS-0891–0907 · 0915–0931 · 0939–0955 · 0963–0979)
   Board may H-scroll; page chrome + cards stay within lane width.
   ----------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .page:has(.act-toolbar-ks) {
    overflow-x: clip;
    max-width: 100%;
  }
  .act-toolbar-ks,
  .act-toolbar-ks .act-toolbar-primary,
  .act-view-scope {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  .act-toolbar-ks .act-toolbar-primary {
    flex-wrap: wrap;
    row-gap: var(--act-space-1);
  }
  .act-view-scope-chip {
    max-width: min(100%, 70ch);
    overflow-wrap: anywhere;
  }
  .kanban:not(.projects-board) {
    max-width: 100%;
    min-width: 0;
  }
  /* Lanes keep --skin-kanban-col-min so the board H-scrolls; do not max-width:100%
     (that let columns compress into the viewport and hid the need for a scrollbar). */
  .kanban:not(.projects-board) .kanban-lane,
  .kanban:not(.projects-board) .lane.kanban-lane {
    min-width: var(--skin-kanban-col-min);
    max-width: none;
    box-sizing: border-box;
  }
  .kanban:not(.projects-board) .kanban-lane-head {
    min-width: 0;
    flex-wrap: wrap;
  }
  .kanban:not(.projects-board) .kanban-lane-title {
    min-width: 0;
    overflow-wrap: anywhere;
    max-width: 100%;
  }
  .kanban:not(.projects-board) .kanban-card {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
  }
  .kanban:not(.projects-board) .kanban-card-title,
  .kanban:not(.projects-board) .kanban-card-meta,
  .kanban:not(.projects-board) .kanban-prop {
    min-width: 0;
    max-width: 100%;
  }
}

/* Tablet portrait / narrow laptop: denser tools, still one readable row */
@media (min-width: 768px) and (max-width: 1099px) {
  .act-toolbar-ks .act-ks-tools {
    flex-wrap: wrap;
    max-width: 100%;
  }
  .kanban:not(.projects-board) .kanban-lane-count {
    flex: 0 0 auto;
  }
}

/* Desktop band: lock containment so calm density does not overflow */
@media (min-width: 1100px) {
  .act-toolbar-ks .act-toolbar-primary > .act-ks-search,
  .act-toolbar-ks .act-ks-search {
    min-width: 0;
    max-width: 100%;
  }
  .kanban:not(.projects-board) .kanban-labels .label-chip {
    max-width: min(100%, var(--act-label-max, 12rem));
  }
}

/* Reduced motion: keep IA/density, drop decorative motion on these surfaces */
@media (prefers-reduced-motion: reduce) {
  .act-toolbar-ks .act-toolbar-primary > :nth-child(-n+3),
  .act-view-scope > :nth-child(-n+3),
  .kanban:not(.projects-board) > .kanban-lane:nth-child(-n+3) {
    animation: none;
  }
  .kanban:not(.projects-board) .kanban-card:hover {
    transform: none;
  }
}