/* Authentication is part of the shared shell. This file is loaded before
   kernel.js creates the login screen, including on a cold first visit. */
#login-screen {
  position: fixed;
  inset: 0;
  z-index: 99998;
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  padding: max(var(--stax-space-5), env(safe-area-inset-top, 0px))
           max(var(--stax-space-5), env(safe-area-inset-right, 0px))
           max(var(--stax-space-5), env(safe-area-inset-bottom, 0px))
           max(var(--stax-space-5), env(safe-area-inset-left, 0px));
  overflow: auto;
  background:
    radial-gradient(circle at 50% 28%, var(--stax-gold-soft), transparent 32%),
    linear-gradient(145deg, var(--stax-ink), var(--stax-surface-2) 52%, var(--stax-ink));
  color: var(--stax-text);
  transition: opacity 0.4s ease;
}

#login-screen.fade { opacity: 0; pointer-events: none; }

#login-screen .login-box {
  width: min(100%, 360px);
  box-sizing: border-box;
  padding: var(--stax-space-8) var(--stax-space-6) var(--stax-space-6);
  border: 1px solid var(--stax-gold-border);
  border-radius: var(--stax-radius-lg);
  background: linear-gradient(180deg, var(--stax-surface-2), var(--stax-surface));
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.58), 0 0 0 1px rgba(255,255,255,0.02) inset;
  text-align: center;
}

#login-screen .login-logo { margin-bottom: var(--stax-space-4); }
#login-screen .login-logo svg { display: block; margin-inline: auto; }

#login-screen .login-title {
  margin-bottom: var(--stax-space-1);
  color: var(--stax-text);
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}

#login-screen .login-sub {
  margin-bottom: var(--stax-space-6);
  color: var(--stax-text-dim);
  font-size: var(--stax-fs-base);
  line-height: 1.5;
}

#login-screen .login-input {
  width: 100%;
  min-height: var(--app-target);
  box-sizing: border-box;
  margin: 0 0 var(--stax-space-3);
  padding: var(--stax-space-3) var(--stax-space-4);
  border: 1px solid var(--stax-border);
  border-radius: var(--stax-radius);
  outline: none;
  background: var(--stax-ink);
  color: var(--stax-text);
  font: inherit;
  font-size: var(--stax-fs-lg);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#login-screen .login-input::placeholder { color: var(--stax-text-faint); }
#login-screen .login-input:focus {
  border-color: var(--stax-focus);
  box-shadow: 0 0 0 3px var(--stax-gold-soft);
}

#login-screen .login-btn {
  width: 100%;
  min-height: var(--app-target);
  margin-top: var(--stax-space-1);
  padding: 0 var(--stax-space-4);
  border: 1px solid var(--stax-gold);
  border-radius: var(--stax-radius);
  background: var(--stax-gold);
  color: var(--stax-on-gold);
  font: inherit;
  font-size: var(--stax-fs-lg);
  font-weight: 800;
  cursor: pointer;
  transition: filter 0.2s ease, transform 0.1s ease;
}

#login-screen .login-btn:hover { filter: brightness(1.08); }
#login-screen .login-btn:active { transform: translateY(1px); }
#login-screen .login-btn:disabled {
  border-color: var(--stax-border);
  background: var(--stax-border);
  color: var(--stax-text-dim);
  cursor: wait;
}

#login-screen .login-error {
  min-height: 20px;
  margin-top: var(--stax-space-3);
  color: #ff716b;
  font-size: var(--stax-fs-base);
  line-height: 1.4;
}

/* App sections are rendered by WorkspacePanel from 840px upward. Compact
   screens retain this source rail as the app's bottom destination bar. */
.app-shell {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--stax-canvas);
  color: var(--stax-text);
}

.app-rail {
  position: relative;
  z-index: var(--z-app-rail);
  flex: 0 0 var(--app-rail-column);
  order: 0;
  min-width: var(--app-rail-column);
  height: 100%;
  overflow: hidden;
  background: var(--stax-rail);
  border-inline-end: 1px solid var(--stax-border);
}

[data-rail-side="right"] .app-shell > .app-rail {
  order: 2;
  border-inline-end: 0;
  border-inline-start: 1px solid var(--stax-border);
}

.app-rail-items {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--stax-space-1);
  height: 100%;
  padding: var(--stax-space-2) var(--stax-space-1);
}

.app-rail-item {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--stax-space-1);
  width: 100%;
  min-width: var(--app-target);
  min-height: var(--app-target);
  padding: var(--stax-space-2) var(--stax-space-1);
  border: 0;
  border-radius: var(--stax-radius);
  background: transparent;
  color: var(--stax-text-dim);
  font: inherit;
  cursor: pointer;
}

.app-rail-item:hover { background: var(--stax-surface-2); color: var(--stax-text); }
.app-rail-item.active { background: var(--stax-gold); color: var(--stax-on-gold); }
.app-rail-icon { display: grid; width: 22px; height: 22px; place-items: center; }
.app-rail-icon svg { width: 22px; height: 22px; stroke: currentColor; }
.app-rail-label { max-width: 100%; overflow: hidden; font-size: var(--stax-fs-xs); font-weight: 700; line-height: 1.15; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.app-rail-label-mobile { display: none; }
.app-rail-badge { position: absolute; inset-block-start: var(--stax-space-1); inset-inline-end: var(--stax-space-1); min-width: 16px; height: 16px; padding-inline: var(--stax-space-1); border-radius: var(--stax-radius-pill); background: var(--stax-danger); color: white; font-size: 9px; font-weight: 800; line-height: 16px; text-align: center; }

.app-canvas {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  order: 1;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--stax-canvas);
}

.app-canvas-header {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--stax-space-2);
  min-height: var(--app-header-row);
  padding: var(--stax-space-2) var(--stax-space-4);
  border-bottom: 1px solid var(--stax-border);
  background: var(--stax-surface);
}

.app-canvas-body { position: relative; flex: 1 1 auto; min-width: 0; min-height: 0; overflow: auto; }
.app-canvas-split { display: grid; grid-template-columns: minmax(var(--app-list-min), 1fr) minmax(var(--app-detail-min), 2fr); width: 100%; min-height: 100%; }
.app-canvas-pane { min-width: 0; min-height: 0; overflow: auto; }
.app-canvas-pane + .app-canvas-pane { border-inline-start: 1px solid var(--stax-border); }

.app-tool-sheet {
  position: fixed;
  inset: 0;
  z-index: var(--z-app-sheet-backdrop);
  display: grid;
  align-items: end;
  background: var(--stax-overlay);
}
.app-tool-sheet[hidden] { display: none; }
.app-tool-sheet-panel {
  position: relative;
  z-index: var(--z-app-sheet);
  width: 100%;
  max-height: min(78vh, 720px);
  overflow: auto;
  padding: var(--stax-space-4);
  padding-bottom: calc(var(--stax-space-4) + var(--app-safe-bottom));
  border: 1px solid var(--stax-border);
  border-radius: var(--stax-radius-lg) var(--stax-radius-lg) 0 0;
  background: var(--stax-sheet);
  box-shadow: var(--stax-shadow-sheet);
}
.app-tool-sheet-header { display: flex; align-items: center; gap: var(--stax-space-2); min-height: var(--app-target); margin-bottom: var(--stax-space-3); }
.app-tool-sheet-title { flex: 1; font-size: var(--stax-fs-lg); font-weight: 800; }
.app-icon-button { display: inline-grid; width: var(--app-target); height: var(--app-target); flex: 0 0 var(--app-target); place-items: center; border: 1px solid var(--stax-border); border-radius: var(--stax-radius); background: var(--stax-surface-2); color: var(--stax-text); font: inherit; cursor: pointer; }

/* Every directly actionable shell control keeps a full touch target in every
   rail presentation. Checkbox/radio inputs use their associated label as the
   activation target, so they intentionally retain their native visual size. */
.app-shell :where(button, a[href], summary, [role="button"], [role="checkbox"], [role="menuitem"]) {
  min-width: var(--app-target) !important;
  min-height: var(--app-target) !important;
}
.app-shell :where(a[href]) { display: inline-flex; align-items: center; }
.app-shell label:has(input:is([type="checkbox"], [type="radio"], [type="color"])) {
  min-width: var(--app-target);
  min-height: var(--app-target);
}

.app-gear { margin-inline-start: auto; }
.app-empty, .app-error, .app-loading { display: grid; min-height: 180px; padding: var(--stax-space-6); place-content: center; gap: var(--stax-space-2); text-align: center; }
.app-skeleton { border-radius: var(--stax-radius); background: linear-gradient(90deg, var(--stax-surface-2), var(--stax-surface-3), var(--stax-surface-2)); background-size: 200% 100%; animation: appSkeleton 1.2s linear infinite; }
@keyframes appSkeleton { to { background-position: -200% 0; } }
.app-state { display:grid; width:100%; height:220px; padding:var(--stax-space-5); place-items:center; box-sizing:border-box; }
.app-state-content { display:grid; width:min(100%,420px); height:170px; padding:var(--stax-space-4); align-content:center; gap:var(--stax-space-2); overflow:auto; box-sizing:border-box; border:1px solid var(--stax-border); border-radius:var(--stax-radius-lg); background:var(--stax-surface); text-align:center; }
.app-state-title { color:var(--stax-text); font-size:var(--stax-fs-md); }
.app-state-detail { color:var(--stax-text-dim); font-size:var(--stax-fs-sm); line-height:1.5; }
.app-state-skeleton { display:block; width:100%; height:20px; margin-bottom:var(--stax-space-1); }
.app-state-skeleton-short { width:68%; justify-self:center; }
.app-state-action { min-width:112px; min-height:var(--app-target); margin-top:var(--stax-space-2); justify-self:center; padding:0 var(--stax-space-4); border:1px solid var(--stax-gold); border-radius:var(--stax-radius); background:var(--stax-surface-2); color:var(--stax-gold-text); font:inherit; font-weight:800; cursor:pointer; }
.app-partial .app-state-content { border-color:rgba(255,152,0,.45); }
.app-error .app-state-content { border-color:rgba(229,57,53,.45); }

/* Forms adapters: the existing builder renderers now live inside AppCanvas. */
.app-shell.fm .app-canvas-body { overflow: hidden; }
.app-shell.fm .fm-context-title { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-shell.fm .fm-workspace { height: 100%; min-height: 0; }
.app-shell.fm .fm-card { position: relative; width: auto; min-width: 0; max-width: none; height: 100%; border: 0; background: var(--stax-surface); box-shadow: none; opacity: 1; }
.app-shell.fm .fm-card-hdr { min-height: var(--app-target); padding: var(--stax-space-2) var(--stax-space-3); }
.app-shell.fm .fm-card-body { min-height: 0; }
.app-shell.fm .fm-canvas-wrap { width: auto; min-width: 0; max-width: none; height: 100%; min-height: 0; }
.app-shell.fm .fm-canvas { min-height: 0; }
.app-shell.fm:not(.fm-has-form) .fm-workspace,
.app-shell.fm.fm-publish-view .fm-workspace,
.app-shell.fm.fm-preview .fm-workspace { display: block; }
.app-shell.fm:not(.fm-has-form) .fm-canvas-wrap,
.app-shell.fm.fm-publish-view .fm-canvas-wrap { display: none; }
.app-shell.fm.fm-preview .fm-card { display: none; }
.app-shell.fm.fm-preview .fm-canvas-wrap { display: flex; width: 100%; }
.app-shell.fm .fm-tool-tabs { margin-bottom: var(--stax-space-3); }
.app-shell.fm .fm-tool-body { min-height: 0; overflow: auto; }
.app-shell.fm .fm-fab { z-index: calc(var(--z-app-rail) + 1); }

/* Records adapters: list and detail are peers inside AppCanvas, never a card overlay. */
.app-shell.fa .app-canvas-body { overflow: hidden; }
.app-shell.fa .fa-context-header { min-width: 0; }
.app-shell.fa .fa-context-title { flex: 0 0 auto; }
.app-shell.fa .fa-context-tabs { display: flex; min-width: 0; gap: var(--stax-space-1); overflow-x: auto; scrollbar-width: none; }
.app-shell.fa .fa-context-tabs::-webkit-scrollbar { display: none; }
.app-shell.fa .fa-context-tab { min-height: var(--app-target); padding: 0 var(--stax-space-3); border: 0; border-radius: var(--stax-radius); background: transparent; color: var(--stax-text-dim); font: inherit; font-size: var(--stax-fs-sm); font-weight: 700; white-space: nowrap; cursor: pointer; }
.app-shell.fa .fa-context-tab:hover { background: var(--stax-surface-2); color: var(--stax-text); }
.app-shell.fa .fa-context-tab.active { background: var(--stax-surface-3); color: var(--stax-gold-text); }
.app-shell.fa .fa-workspace { height: 100%; min-height: 0; }
.app-shell.fa .records-list { position: relative; width: auto; min-width: 0; max-width: none; height: 100%; border: 0; background: var(--stax-surface); box-shadow: none; }
.app-shell.fa .records-list-hdr { min-height: var(--app-target); }
.app-shell.fa .records-list-body { min-height: 0; }
.app-shell.fa .fa-main { min-width: 0; min-height: 0; }
.app-shell.fa .fa-main-inner { min-width: 0; min-height: 100%; }

/* Agent adapters: the mode selector controls an exact four-section AppRail. */
.app-shell.cb .app-canvas-body { overflow: hidden; }
.app-shell.cb .cb-agent-header { min-width: 0; }
.app-shell.cb .cb-mode-selector { display: flex; min-width: 0; gap: var(--stax-space-1); overflow-x: auto; scrollbar-width: none; }
.app-shell.cb .cb-mode-selector::-webkit-scrollbar { display: none; }
.app-shell.cb .cb-mode-selector button { position: relative; min-width: max-content; min-height: var(--app-target); padding: 0 var(--stax-space-3); border: 1px solid transparent; border-radius: var(--stax-radius); background: transparent; color: var(--stax-text-dim); font: inherit; font-size: var(--stax-fs-sm); font-weight: 800; cursor: pointer; }
.app-shell.cb .cb-mode-selector button:hover { background: var(--stax-surface-2); color: var(--stax-text); }
.app-shell.cb .cb-mode-selector button[aria-pressed="true"] { border-color: var(--stax-gold); background: var(--stax-surface-3); color: var(--stax-gold-text); }
.app-shell.cb .cb-mode-badge { display: inline-grid; min-width: 17px; height: 17px; margin-inline-start: var(--stax-space-1); padding-inline: 3px; place-items: center; border-radius: var(--stax-radius-pill); background: var(--stax-danger); color: white; font-size: 9px; line-height: 17px; }
.app-shell.cb .cb-workspace { height: 100%; min-height: 0; }
.app-shell.cb .cb-section-list { display: flex; flex-direction: column; min-width: 0; background: var(--stax-surface); }
.app-shell.cb .cb-section-list-header { display: flex; min-height: var(--app-target); align-items: center; padding: var(--stax-space-2) var(--stax-space-3); border-bottom: 1px solid var(--stax-border); }
.app-shell.cb #cb-side-body { flex: 1 1 auto; min-height: 0; overflow: auto; }
.app-shell.cb .cb-sc-main { min-width: 0; min-height: 0; }
.app-shell.cb .cb-active-ctx { inset-block-start: var(--stax-space-2); inset-inline: var(--stax-space-3); }
.app-shell.cb .cb-msgs { min-height: 0; padding: 42px var(--stax-space-4) var(--stax-space-3); }
.app-shell.cb .cb-bar { flex: 0 0 auto; }

/* Records-family, agent-family and forms-family utilities are push
   destinations rather than permanent side cards. Their existing state now
   controls one full canvas pane at every width.

   Forms joins this rule because its builder card and live-preview frame are
   the "app side card + canvas" and "live-preview sidecar" that
   BUILD_SPEC_V5.1 requires to collapse into AppCanvas. Without `.fm` here
   the split survived above 1200px and held 33% of the canvas as a
   persistent secondary panel. Preview stays reachable as a section and as
   the context-header toggle. */
.app-shell:is(.fa, .cb, .fm) .app-canvas-split { display: block; }
.app-shell:is(.fa, .cb, .fm) .app-canvas-split > .app-canvas-pane { display: none; width: 100%; min-height: 100%; border: 0; }
.app-shell:is(.fa, .cb, .fm) .app-canvas-split[data-mobile-pane="list"] > [data-pane="list"],
.app-shell:is(.fa, .cb, .fm) .app-canvas-split[data-mobile-pane="detail"] > [data-pane="detail"] { display: flex; flex-direction: column; max-height: 100%; }
.app-shell.fa .fa-browse-button { margin-inline-start: auto; }

/* Settings adapters: five destinations with contextual panes in AppCanvas. */
.settings-shell .settings-context-header { min-width: 0; }
.settings-shell .settings-context-header > strong { flex: 0 0 auto; }
/* The list holds a handful of short pane names, not a conversation feed, so it
   is sized to them rather than taking the shared 1:2 split's third of the
   canvas and leaving it empty. */
.settings-shell .app-canvas-split { grid-template-columns: minmax(180px, 260px) minmax(0, 1fr); }
.settings-shell .settings-pane-list { padding: var(--stax-space-2); background: var(--stax-surface); }
.settings-shell .settings-context-tabs { display: flex; flex-direction: column; min-width: 0; gap: var(--stax-space-3); }
.settings-shell .settings-group { display: flex; flex-direction: column; gap: var(--stax-space-1); }
.settings-shell .settings-group-title { padding: 0 var(--stax-space-3); color: var(--stax-text-dim); font-size: var(--stax-fs-xs); font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; }
.settings-shell .settings-group.active .settings-group-title { color: var(--stax-text); }
.settings-shell .settings-context-tab { display: flex; align-items: center; width: 100%; min-height: var(--app-target); padding: 0 var(--stax-space-3); border: 0; border-radius: var(--stax-radius); background: transparent; color: var(--stax-text-dim); font: inherit; font-size: var(--stax-fs-sm); font-weight: 700; text-align: start; white-space: nowrap; cursor: pointer; }
/* Both panes are on screen on a wide display, so there is nothing to go back
   to. Below 64rem (the rail breakpoint) the split shows one pane, and the header offers the way back
   only while the detail pane is the one on screen (toggled in app.js). */
.settings-shell .settings-detail-back { display: none; }
@media (max-width: 63.999rem) {
  .settings-shell .settings-detail-back[data-visible="true"] { display: inline-flex; }
}
.settings-shell .settings-context-tab:hover { background: var(--stax-surface-2); color: var(--stax-text); }
.settings-shell .settings-context-tab.active { background: var(--stax-surface-3); color: var(--stax-gold-text); }

/* StaxCore operational workspace. The shared suite composer is its only chat input. */
.staxcore-shell .app-canvas-body { background: var(--stax-surface); }
.sc-header { gap: var(--stax-space-3); }
.sc-workspace { margin-inline-start: auto; color: var(--stax-text-dim); font-size: var(--stax-fs-sm); }
.sc-content { min-height: 100%; }
.sc-page { width: min(920px, 100%); margin: 0 auto; padding: var(--stax-space-5); }
.sc-title-row { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: var(--stax-space-4); margin-bottom: var(--stax-space-5); }
.sc-title-row h2 { margin: 0; font-size: var(--stax-fs-xl); letter-spacing: 0; }
.sc-title-row p { margin: var(--stax-space-1) 0 0; color: var(--stax-text-dim); }
.sc-status, .sc-tag, .sc-count { display: inline-flex; flex: 0 0 auto; min-height: 28px; align-items: center; padding: 0 var(--stax-space-2); border: 1px solid var(--stax-border); border-radius: var(--stax-radius); background: var(--stax-surface-2); color: var(--stax-text-dim); font-size: var(--stax-fs-xs); font-weight: 800; }
.sc-status.is-ready { border-color: var(--stax-success); color: var(--stax-success); }
.sc-status.is-off, .sc-tag.is-write { border-color: var(--stax-warning); color: var(--stax-warning); }
.sc-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block: 1px solid var(--stax-border); }
.sc-metrics article { display: flex; min-width: 0; flex-direction: column; gap: var(--stax-space-1); padding: var(--stax-space-4); }
.sc-metrics article:nth-child(odd) { border-inline-end: 1px solid var(--stax-border); }
.sc-metrics article:nth-child(-n+2) { border-block-end: 1px solid var(--stax-border); }
.sc-metrics span, .sc-metrics small, .sc-row span, .sc-row small, .sc-memory-head span { color: var(--stax-text-dim); }
.sc-metrics strong { overflow-wrap: anywhere; font-size: var(--stax-fs-lg); }
.sc-callout { display: flex; align-items: center; gap: var(--stax-space-3); margin-top: var(--stax-space-5); padding: var(--stax-space-4) 0; border-block: 1px solid var(--stax-border); }
.sc-callout span { min-width: 0; flex: 1; color: var(--stax-text-dim); }
.sc-callout button, .sc-actions button { min-height: var(--app-target); padding: 0 var(--stax-space-3); border: 1px solid var(--stax-border); border-radius: var(--stax-radius); background: var(--stax-surface-2); color: var(--stax-text); font: inherit; font-weight: 700; cursor: pointer; }
.sc-list { border-block-start: 1px solid var(--stax-border); }
.sc-subtitle { margin: var(--stax-space-5) 0 var(--stax-space-2); font-size: var(--stax-fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--stax-text-faint, var(--stax-muted)); }
.sc-row { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: var(--stax-space-4); padding: var(--stax-space-4) 0; border-block-end: 1px solid var(--stax-border); }
.sc-row > div { display: flex; min-width: 0; flex-direction: column; gap: var(--stax-space-1); }
.sc-row span, .sc-row small { overflow-wrap: anywhere; }
.sc-search { display: flex; align-items: center; gap: var(--stax-space-3); margin-bottom: var(--stax-space-4); }
.sc-search span { flex: 0 0 auto; font-weight: 700; }
.sc-search input { width: 100%; min-height: var(--app-target); padding: 0 var(--stax-space-3); border: 1px solid var(--stax-border); border-radius: var(--stax-radius); background: var(--stax-surface-2); color: var(--stax-text); font: inherit; }
.sc-scope { display: flex; flex-wrap: wrap; gap: var(--stax-space-1) var(--stax-space-4); margin-bottom: var(--stax-space-5); padding: var(--stax-space-3); border: 1px solid var(--stax-border); border-radius: var(--stax-radius); background: var(--stax-surface-2); }
.sc-scope > * { min-width: 0; overflow-wrap: anywhere; }
.sc-scope small { color: var(--stax-text-dim); }
.sc-catalog-section { margin-top: var(--stax-space-5); }
.sc-catalog-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--stax-space-1) var(--stax-space-3); margin-bottom: var(--stax-space-3); }
.sc-catalog-head h3 { margin: 0; font-size: var(--stax-fs-lg); }
.sc-catalog-head span { color: var(--stax-text-dim); font-size: var(--stax-fs-sm); }
.sc-detail { border-block-end: 1px solid var(--stax-border); }
.sc-detail summary { min-height: var(--app-target); padding: var(--stax-space-3) 0; cursor: pointer; }
.sc-detail summary strong { margin-inline-end: var(--stax-space-2); }
.sc-detail summary small { display: block; margin-top: var(--stax-space-1); color: var(--stax-text-dim); }
.sc-detail > p { margin: 0 0 var(--stax-space-3); color: var(--stax-text-dim); }
.sc-operation-list { display: grid; gap: var(--stax-space-2); margin: 0 0 var(--stax-space-4); padding-inline-start: var(--stax-space-5); }
.sc-operation-list li { min-width: 0; overflow-wrap: anywhere; }
.sc-operation-list li span { display: block; color: var(--stax-text-dim); font-size: var(--stax-fs-sm); }
.sc-skill > div { overflow-wrap: anywhere; }
.sc-memory { padding: var(--stax-space-4) 0; border-block-end: 1px solid var(--stax-border); }
.sc-memory-new textarea { width: 100%; box-sizing: border-box; margin-top: var(--stax-space-2); }
.sc-memory-audience { display: flex; flex-wrap: wrap; align-items: center; gap: var(--stax-space-2); margin-top: var(--stax-space-2); color: var(--stax-text-dim); font-size: var(--stax-fs-sm); }
.sc-memory-audience select { min-height: var(--app-target); border: 1px solid var(--stax-border); border-radius: var(--stax-radius); padding: 0 var(--stax-space-3); background: var(--stax-surface); color: var(--stax-text); font: inherit; }
.sc-memory-new [data-sc-memory-new-status] { align-self: center; color: var(--stax-text-dim); font-size: var(--stax-fs-sm); }
.sc-memory-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--stax-space-3); margin-bottom: var(--stax-space-3); }
.sc-memory-head > div { display: flex; min-width: 0; flex-direction: column; gap: var(--stax-space-1); }
.sc-memory textarea { display: block; width: 100%; min-height: 88px; resize: vertical; padding: var(--stax-space-3); border: 1px solid var(--stax-border); border-radius: var(--stax-radius); background: var(--stax-surface-2); color: var(--stax-text); font: inherit; }
.sc-actions { display: flex; flex-wrap: wrap; gap: var(--stax-space-2); margin-top: var(--stax-space-3); }
.sc-actions .is-danger { border-color: var(--stax-danger); color: var(--stax-danger); }
.sc-empty { display: flex; flex-direction: column; gap: var(--stax-space-1); padding: var(--stax-space-5) 0; color: var(--stax-text-dim); }
.msg-draft-actions button { min-width: 0; white-space: normal; }
@media (max-width: 42rem) {
  .sc-page { padding: var(--stax-space-3); }
  .sc-title-row, .sc-callout { align-items: stretch; flex-direction: column; }
  /* A count badge keeps its own width when the title row stacks; stretched,
     a bare number read like an empty field. */
  .sc-title-row > .sc-count, .sc-title-row > .sc-status { align-self: flex-start; }
  .sc-metrics { grid-template-columns: 1fr; }
  .sc-metrics article { border-inline-end: 0 !important; border-block-end: 1px solid var(--stax-border); }
  .sc-row { align-items: flex-start; }
  .msg-draft-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .msg-draft-actions #msg-send { margin-left: 0 !important; }
}
.settings-shell .settings-content { width: 100%; max-width: 860px; min-height: 100%; margin-inline: auto; padding: var(--stax-space-5); }
.settings-people { max-width: 640px; margin: 0 auto; overflow-wrap: anywhere; }
.settings-people h2 { font-size: 22px; }
.settings-people h3 { font-size: 18px; }
.settings-people section { border-top: 1px solid var(--stax-border); padding-block: 16px; }
.settings-people button, .settings-people .input { min-height: 44px; max-width: 100%; }
.settings-people button { white-space: normal; }
.settings-people .input { width: 100%; min-width: 0; }
.settings-people textarea { min-height: 88px; resize: vertical; }
.settings-member-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.settings-people-list { display: grid; }
.settings-people-list button { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; text-align: left; border-bottom: 1px solid var(--stax-border); }
.settings-people-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.settings-member-check { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.settings-people fieldset { min-width: 0; margin-block: 12px; border: 1px solid var(--stax-border); }
.settings-people :focus-visible { outline: 2px solid var(--stax-gold); outline-offset: 2px; }
.settings-shell .settings-rail-preference { margin-top: var(--stax-space-4); }
.settings-shell .settings-desktop-choice, .settings-shell .settings-mode-choice { display: flex; gap: var(--stax-space-2); margin-top: var(--stax-space-3); }
.settings-shell .settings-desktop-choice button, .settings-shell .settings-mode-choice button { min-width: 88px; min-height: var(--app-target); border: 1px solid var(--stax-border); border-radius: var(--stax-radius); background: var(--stax-surface-2); color: var(--stax-text); font: inherit; font-weight: 700; cursor: pointer; }
.settings-shell .settings-desktop-choice button[aria-pressed="true"], .settings-shell .settings-mode-choice button[aria-pressed="true"] { border-color: var(--stax-gold); color: var(--stax-gold-text); }
.settings-shell .settings-haptics-preference { margin-top: var(--stax-space-4); }
.settings-shell .settings-haptic-choice { display: flex; gap: var(--stax-space-2); margin-top: var(--stax-space-3); }
.settings-shell .settings-haptic-choice button { min-width: 88px; min-height: var(--app-target); border: 1px solid var(--stax-border); border-radius: var(--stax-radius); background: var(--stax-surface-2); color: var(--stax-text); font: inherit; font-weight: 700; cursor: pointer; }
.settings-shell .settings-haptic-choice button[aria-pressed="true"] { border-color: var(--stax-gold); color: var(--stax-gold-text); }

@media (min-width: 52.5rem) {
  .app-shell > .app-rail { display: none; }
  .tx-workspace-legacy .app-shell > .app-rail { display: block; }
}

@media (max-width: 63.999rem) {
  .app-canvas-split { display: block; }
  .app-canvas-split > .app-canvas-pane { display: none; width: 100%; min-height: 100%; border: 0; }
  .app-canvas-split[data-mobile-pane="list"] > [data-pane="list"],
  .app-canvas-split[data-mobile-pane="detail"] > [data-pane="detail"] { display: flex; flex-direction: column; max-height: 100%; }
}

@media (max-width: 52.499rem) {
  .app-shell { padding-bottom: var(--app-rail-outer); }
  .app-rail {
    position: fixed;
    inset: auto 0 0;
    width: 100%;
    min-width: 0;
    height: var(--app-rail-outer);
    border: 0;
    border-top: 0;
    box-shadow: inset 0 1px var(--stax-border);
    padding-bottom: var(--app-rail-safe-pad);
  }
  [data-rail-side="right"] .app-shell > .app-rail { border: 0; box-shadow: inset 0 1px var(--stax-border); }
  .app-rail-items { flex-direction: row; gap: 0; height: var(--app-rail-row); padding: 0; overflow: hidden; }
  .app-rail-item { flex: 1 1 0; width: auto; min-width: var(--app-target); height: var(--app-rail-row); padding: var(--stax-space-1) 2px; border-radius: 0; }
  .app-rail-item:focus-visible { outline-offset: -4px; }
  .app-rail-label-desktop { display: none; }
  .app-rail-label-mobile { display: block; }
  .app-rail-desktop-only { display: none; }
  .app-canvas { width: 100%; }
  .app-canvas-body { scroll-padding-bottom: var(--app-canvas-bottom-reserve); }
  .app-canvas-split { display: block; }
  .app-canvas-split > .app-canvas-pane { display: none; width: 100%; min-height: 100%; border: 0; }
  .app-canvas-split[data-mobile-pane="list"] > [data-pane="list"],
  .app-canvas-split[data-mobile-pane="detail"] > [data-pane="detail"] {
    display: flex;
    flex-direction: column;
    max-height: 100%;
  }
  .app-keyboard-open .app-shell { padding-bottom: 0; }
  .app-keyboard-open .app-rail { display: none; height: 0; padding: 0; border: 0; }
  .app-keyboard-open .app-canvas-body { scroll-padding-bottom: calc(var(--app-keyboard-height) + var(--stax-space-4)); }
  .app-shell.fm .fm-workspace > .fm-card,
  .app-shell.fm .fm-workspace > .fm-canvas-wrap { position: relative; inset: auto; width: 100%; min-width: 0; max-width: none; height: 100%; border: 0; transform: none; visibility: visible; }
  .app-shell.fm .fm-has-back .fm-back { display: inline-flex; }
  .app-shell.fm.fm-has-form .fm-fab { display: flex; position: fixed; inset-inline-end: var(--stax-space-4); inset-block-end: calc(var(--app-rail-outer) + var(--stax-space-4)); width: 56px; height: 56px; }
  .app-keyboard-open .app-shell.fm.fm-has-form .fm-fab { inset-block-end: var(--stax-space-4); }
  .app-shell.fm.fm-publish-view .fm-fab,
  .app-shell.fm.fm-preview .fm-fab { display: none; }
  .app-shell.fa .fa-context-header { padding-inline: var(--stax-space-2); }
  .app-shell.fa .fa-context-title { max-width: 30vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-shell.fa .fa-main-inner { padding: var(--stax-space-3); }
  .app-shell.fa .cr-hdr { flex-wrap: wrap; }
  .app-shell.fa .cr-hdr-info { flex-basis: calc(100% - 70px); }
  .app-shell.fa .cr-hdr-actions { width: 100%; flex-wrap:wrap; overflow: visible; }
  .app-shell.fa .cr-profile-tabs { display:none; }
  .app-shell.fa .cr-profile-overview { grid-template-columns:1fr; }
  .app-shell.fa .cr-overview-card { min-height:88px; }
  .app-shell.fa .cr-child-back { display:inline-flex; }
  .app-shell.fa .cr-wrap:not([data-client-section="overview"]) > .cr-profile-back { display:none; }
  .app-shell.fa .cr-more-menu { position:fixed; inset:auto var(--stax-space-3) calc(var(--app-rail-outer) + var(--stax-space-3)) auto; width:min(220px,calc(100vw - 24px)); }
  .app-shell.fa .cl-toolbar { flex-wrap: wrap; }
  .app-shell.cb .cb-agent-header { padding-inline: var(--stax-space-2); }
  .app-shell.cb .cb-mode-selector { flex: 1 1 auto; }
  .app-shell.cb .cb-mode-selector button { padding-inline: var(--stax-space-2); }
  .app-shell.cb .cb-swipe-deck { height: min(55vh, 460px); }
  .app-shell.cb .cb-swipe-btn { width: 56px; height: 56px; }
  .app-shell.cb .cb-bar { padding-inline: var(--stax-space-2); }
  .app-shell.cb .cb-mode { width: 64px; }
  .settings-shell .settings-context-header { padding-inline: var(--stax-space-2); }
  .settings-shell .settings-context-header > strong { max-width: 32vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .settings-shell .settings-content { padding: var(--stax-space-3); }
  .settings-shell .settings-desktop-choice { display: none; }

  /* The current workspace shell mirrors these section controls into its one
     top-menu drawer. Keep the source rail mounted for that mirror, but never
     expose it as a second bottom navigation bar. */
  #tx-shell:not(.tx-workspace-legacy) .app-shell { padding-bottom: 0; }
  #tx-shell:not(.tx-workspace-legacy) .app-shell > .app-rail { display: none; }
}

/* Workspace V1 owns app and section navigation in one drawer at every size. */
#tx-shell:not(.tx-workspace-legacy) .app-shell { padding-bottom: 0; }
#tx-shell:not(.tx-workspace-legacy) .app-shell > .app-rail { display: none; }

@media (min-width: 64rem) {
  .app-tool-sheet { position: absolute; align-items: stretch; justify-items: end; background: transparent; pointer-events: none; }
  .app-tool-sheet-panel { width: min(420px, 44vw); max-height: 100%; border-radius: var(--stax-radius-lg) 0 0 var(--stax-radius-lg); box-shadow: var(--stax-shadow-float); pointer-events: auto; }
  [data-rail-side="right"] .app-tool-sheet { justify-items: start; }
  [data-rail-side="right"] .app-tool-sheet-panel { border-radius: 0 var(--stax-radius-lg) var(--stax-radius-lg) 0; }
}

/* In-page confirmation (TattooStaxAppShell.confirm) — replaces native confirm(). */
.app-confirm { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; padding: 16px; background: var(--stax-overlay, rgba(0, 0, 0, 0.55)); }
.app-confirm-panel { display: grid; gap: 12px; width: min(440px, 100%); max-height: calc(100dvh - 32px); overflow: auto; padding: 18px; border: 1px solid var(--stax-border); border-radius: var(--stax-radius-lg, 14px); background: var(--stax-surface); color: var(--stax-text); box-shadow: var(--stax-shadow-float, 0 18px 48px rgba(0, 0, 0, 0.35)); }
.app-confirm-panel strong { font-size: 1rem; }
.app-confirm-panel p { margin: 0; color: var(--stax-text-dim); line-height: 1.45; overflow-wrap: anywhere; }
.app-confirm-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.app-confirm-actions button { min-height: 44px; padding: 0 16px; border: 1px solid var(--stax-border); border-radius: 10px; background: var(--stax-surface-2); color: var(--stax-text); font: inherit; font-weight: 700; cursor: pointer; }
.app-confirm-actions .app-confirm-ok { border-color: var(--app-accent, var(--stax-gold)); background: var(--app-accent, var(--stax-gold)); color: var(--stax-ink, #111); }
.app-confirm-actions .app-confirm-danger { border-color: var(--stax-danger); background: var(--stax-danger); color: var(--stax-on-danger, #0c0c0e); }
.app-confirm-actions button:focus-visible { outline: 2px solid var(--stax-focus, var(--stax-gold)); outline-offset: 2px; }
.app-confirm-field { display: grid; gap: 6px; font-size: 0.85rem; color: var(--stax-text-dim); }
.app-confirm-field input, .app-confirm-field select { min-height: 44px; padding: 0 12px; border: 1px solid var(--stax-border); border-radius: 10px; background: var(--stax-bg, var(--stax-surface-2)); color: var(--stax-text); font: inherit; }
.app-confirm-actions button:disabled { opacity: 0.5; cursor: not-allowed; }

/* Tools: the artist-facing projection over TattooStaxApps.tools. It owns
   presentation only; every action opens the tool's existing owner. */
.tools-shell .app-canvas-body { background: var(--stax-canvas); }
.tools-page { width: min(1120px, 100%); margin: 0 auto; padding: clamp(16px, 3vw, 32px); display: grid; gap: var(--stax-space-5); }
.tools-intro h2 { margin: 0 0 6px; color: var(--stax-text); font-size: var(--stax-fs-title); text-wrap: balance; }
.tools-intro p { max-width: 62ch; margin: 0; color: var(--stax-text-dim); line-height: 1.5; }
.tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); align-items: start; gap: var(--stax-space-2); margin: 0; padding: 0; list-style: none; }
.tools-card { min-width: 0; border: 1px solid var(--stax-border); border-radius: var(--stax-radius-lg); background: var(--stax-surface); color: var(--stax-text); }
.tools-card-disclosure > summary { list-style: none; }
.tools-card-disclosure > summary::-webkit-details-marker { display: none; }
/* The status sits under the name at every width, so a long status (Payments:
   "Card deposits off; …") wraps instead of crushing the name. */
.tools-card-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--stax-space-3); min-width: 0; min-height: 56px; padding: var(--stax-space-2) var(--stax-space-3); border-radius: var(--stax-radius-lg); cursor: pointer; }
.tools-card-head:focus-visible { outline: 2px solid var(--stax-focus); outline-offset: 2px; }
.tools-card-title { display: grid; gap: 2px; min-width: 0; }
.tools-card-head h3 { margin: 0; font-size: var(--stax-fs-md, 15px); min-width: 0; }
.tools-card-purpose { overflow: hidden; color: var(--stax-text-dim); font-size: var(--stax-fs-xs); text-overflow: ellipsis; white-space: nowrap; }
.tools-card-icon { display: grid; flex: 0 0 auto; width: 32px; height: 32px; place-items: center; color: var(--tool-accent); }
.tools-card-icon .tile-art { width: 32px; height: 32px; }
.tools-card-icon > svg:not(.tile-art) { width: 20px; height: 20px; }
.tools-card-chevron { display: grid; width: 20px; place-items: center; color: var(--stax-text-dim); }
.tools-card-chevron svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.tools-card-disclosure[open] .tools-card-chevron svg { transform: rotate(180deg); }
.tools-card-body { display: grid; gap: var(--stax-space-3); padding: 0 var(--stax-space-3) var(--stax-space-3) calc(32px + 2 * var(--stax-space-3)); }
.tools-status { display: inline-flex; align-items: center; gap: 6px; min-width: 0; margin: 0; font-size: var(--stax-fs-xs); font-weight: 650; color: var(--stax-text); }
.tools-card-head .tools-status { grid-column: 2; grid-row: 2; }
.tools-card-icon { grid-row: 1 / span 2; }
.tools-card-chevron { grid-column: 3; grid-row: 1 / span 2; }
.tools-status::before { content: ''; width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: var(--stax-text-faint); }
.tools-status[data-level="ready"]::before { background: var(--stax-ok); }
/* Status colours are their own tokens, never a section accent (icon contract). */
.tools-status[data-level="setup"]::before { background: var(--stax-warning); }
.tools-status[data-level="available"]::before { background: var(--stax-text-dim); }
.tools-status[data-level="off"]::before { background: transparent; border: 2px solid var(--stax-text-dim); width: 5px; height: 5px; }
.tools-status[data-level="unavailable"], .tools-status[data-level="checking"], .tools-status[data-level="unknown"] { color: var(--stax-text-dim); font-weight: 500; }
.tools-status[data-level="unknown"]::before { background: transparent; border: 2px dashed var(--stax-text-dim); width: 5px; height: 5px; }
.tools-card-summary { margin: 0; color: var(--stax-text-dim); font-size: var(--stax-fs-sm); line-height: 1.45; }
@media (max-width: 30rem) {
  .tools-card-body { padding-inline-start: var(--stax-space-3); }
}
.tools-card-facts, .tools-card-tech dl { display: grid; gap: 6px; margin: 0; font-size: var(--stax-fs-sm); }
.tools-card-facts div, .tools-card-tech dl div { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--stax-space-2); }
.tools-card-facts dt, .tools-card-tech dt { color: var(--stax-text-dim); }
.tools-card-facts dd, .tools-card-tech dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.tools-card-actions { display: flex; flex-wrap: wrap; gap: var(--stax-space-2); margin-top: auto; }
.tools-card-action--stax { background: var(--stax-surface-2); border-color: var(--stax-border); }
.tools-card-action { min-height: 44px; padding: 0 16px; border: 1px solid color-mix(in srgb, var(--tool-accent) 45%, var(--stax-border)); border-radius: var(--stax-radius); background: color-mix(in srgb, var(--tool-accent) 10%, var(--stax-surface)); color: var(--stax-text); font: inherit; font-weight: 650; cursor: pointer; }
.tools-card-action:hover { background: color-mix(in srgb, var(--tool-accent) 18%, var(--stax-surface)); }
.tools-card-action:focus-visible, .tools-card-tech summary:focus-visible { outline: 2px solid var(--stax-focus); outline-offset: 2px; }
.tools-card-note { margin: 0; color: var(--stax-text-dim); font-size: var(--stax-fs-sm); }
.tools-card-tech { border-top: 1px solid var(--stax-border-soft); padding-top: var(--stax-space-2); font-size: var(--stax-fs-sm); }
.tools-card-tech summary { min-height: var(--app-target, 44px); display: flex; align-items: center; color: var(--stax-text-dim); cursor: pointer; }
.tools-card-tech dl { margin-top: var(--stax-space-2); }
.tools-card-tech dl div { grid-template-columns: 7.5rem minmax(0, 1fr); }
.tools-card-tech code { font-size: 0.85em; }
@media (max-width: 40rem) {
  .tools-page { padding: 16px 16px calc(24px + var(--app-safe-bottom, 0px)); }
}

/* Work: one durable-work presentation over existing owners. */
.work-shell .app-canvas-body { background: var(--stax-canvas); }
.work-page { width: min(920px, 100%); margin: 0 auto; padding: clamp(16px, 3vw, 32px); display: grid; gap: var(--stax-space-4); }
.work-intro h2 { margin: 0 0 6px; color: var(--stax-text); font-size: var(--stax-fs-title); text-wrap: balance; }
.work-intro p { max-width: 62ch; margin: 0; color: var(--stax-text-dim); line-height: 1.5; }
/* Five states always fit their host, page or panel: one row, never a
   sideways scroll (Owner addendum A1). The host is a size container. */
.work-mount { display: grid; gap: var(--stax-space-3); align-content: start; container-type: inline-size; }
.work-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--stax-space-2); }
.work-tab { display: inline-flex; min-width: 0; justify-content: center; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--stax-border); border-radius: var(--stax-radius-pill); background: var(--stax-surface); color: var(--stax-text-dim); font: inherit; font-size: var(--stax-fs-sm); font-weight: 650; cursor: pointer; }
.work-tab[aria-selected="true"] { border-color: color-mix(in srgb, var(--stax-identity-amber) 55%, var(--stax-border)); background: color-mix(in srgb, var(--stax-identity-amber) 14%, var(--stax-surface)); color: var(--stax-text); font-weight: 750; box-shadow: inset 0 -3px 0 var(--stax-identity-amber); }
.work-tab:focus-visible, .work-row-action:focus-visible { outline: 2px solid var(--stax-focus); outline-offset: 2px; }
.work-tab-count { min-width: 1.5em; padding: 0 6px; border-radius: var(--stax-radius-pill); background: var(--stax-surface-2); color: var(--stax-text); font-variant-numeric: tabular-nums; text-align: center; }
.work-tab[data-bucket="failed"] .work-tab-count:not(:empty) { color: var(--stax-danger); }
.work-status { margin: 0; color: var(--stax-text-dim); font-size: var(--stax-fs-sm); }
.work-status:empty { display: none; }
.work-list { display: grid; gap: var(--stax-space-2); margin: 0; padding: 0; list-style: none; }
.work-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--stax-space-2) var(--stax-space-3); min-width: 0; padding: var(--stax-space-2) var(--stax-space-3); border: 1px solid var(--stax-border); border-inline-start: 3px solid var(--work-accent, var(--stax-border)); border-radius: var(--stax-radius); background: var(--stax-surface); }
.work-row[data-bucket="needs"] { --work-accent: var(--stax-identity-amber); }
.work-row[data-bucket="working"] { --work-accent: var(--stax-identity-blue); }
.work-row[data-bucket="paused"] { --work-accent: var(--stax-text-dim); }
.work-row[data-bucket="done"] { --work-accent: var(--stax-ok); }
.work-row[data-bucket="failed"] { --work-accent: var(--stax-danger); }
.work-row-copy { display: grid; grid-column: 2; min-width: 0; gap: 3px; }
.work-row-open { display: inline-grid; grid-column: 3; place-items: center; width: 44px; height: 44px; border: 1px solid var(--stax-border); border-radius: var(--stax-radius); background: var(--stax-surface-2); color: var(--stax-text); cursor: pointer; }
.work-row-open svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.work-row-open:focus-visible { outline: 2px solid var(--stax-focus); outline-offset: 2px; }
.work-row-open:disabled { opacity: .55; cursor: progress; }
.work-row-copy strong { color: var(--stax-text); overflow-wrap: anywhere; }
.work-row-copy span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--stax-text-dim); font-size: var(--stax-fs-sm); overflow-wrap: anywhere; }
.work-row-icon { display: inline-grid; grid-column: 1; align-self: start; place-items: center; width: 32px; height: 32px; border-radius: var(--stax-radius); background: color-mix(in srgb, var(--work-app-accent) 14%, var(--stax-surface-2)); color: var(--work-app-accent); }
.work-row-icon svg { width: 18px; height: 18px; }
.work-row-copy small { color: var(--stax-text-dim); font-size: var(--stax-fs-xs); }
.work-row-actions { display: flex; grid-column: 2 / -1; flex-wrap: wrap; gap: var(--stax-space-2); }
.work-row-action { min-height: 44px; padding: 0 14px; border: 1px solid var(--stax-border); border-radius: var(--stax-radius); background: var(--stax-surface-2); color: var(--stax-text); font: inherit; font-size: var(--stax-fs-sm); font-weight: 650; cursor: pointer; }
.work-row-action:disabled { opacity: .55; cursor: progress; }
.work-more { margin: 0; color: var(--stax-text-dim); font-size: var(--stax-fs-sm); }
@media (max-width: 40rem) { .work-page { padding: 16px; } }
@container (max-width: 34rem) {
  .work-tabs { gap: 4px; }
  .work-tab { flex-direction: column; gap: 2px; min-height: 52px; padding: 6px 2px; border-radius: var(--stax-radius); font-size: var(--stax-fs-xs); }
  .work-tab > span:first-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* One bottom dock: a focused artifact's lifecycle dock (AppShell.dock). The
   selected item is marked by shape and weight, not colour alone. */
.app-dock { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); flex: 0 0 auto; min-height: 60px; border-top: 1px solid var(--stax-border); background: var(--stax-surface); }
.app-dock-item { display: flex; min-width: 0; min-height: var(--app-target, 44px); flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 2px; border: 0; background: transparent; color: var(--stax-text-dim); font: inherit; font-size: 11px; font-weight: 600; line-height: 1.1; cursor: pointer; }
.app-dock-item > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-dock-item:hover { background: var(--stax-surface-2); color: var(--stax-text); }
.app-dock-item.active { color: var(--stax-text); font-weight: 800; box-shadow: inset 0 3px var(--app-accent, var(--stax-gold)); background: color-mix(in srgb, var(--app-accent, var(--stax-gold)) 10%, transparent); }
.app-dock-item:focus-visible { outline: 2px solid var(--stax-focus); outline-offset: -3px; }
/* Stax is slot 1 in every dock and carries its own identity colour. */
.app-dock-stax .app-dock-icon { color: var(--stax-identity-stax); }
.app-dock-icon { display: grid; width: 20px; height: 20px; place-items: center; }
.app-dock-icon svg { width: 20px; height: 20px; }
@media (min-width: 64rem) { .app-dock-item { flex-direction: row; gap: 8px; font-size: 13px; } }

/* Activity uses the same durable-work rows inside counted disclosure groups. */
.work-group { border-bottom: 1px solid var(--stax-border); }
.work-group > summary { min-height: 48px; padding: 12px; cursor: pointer; font-weight: 650; }
.work-group > summary .work-tab-count { float: right; }
.work-group > summary:focus-visible { outline: 2px solid var(--stax-accent); outline-offset: -2px; }