/*
 * Nexus authenticated presentation layer
 *
 * Dashboard V2 remains the visual source. These classes provide the same
 * typography, geometry, glass surfaces, controls, and state language to the
 * authenticated legacy routes without changing component behavior.
 */

.legacy-shell {
  color: var(--tx);
  font-family: var(--font-body);
  background: transparent;
}

.nexus-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.legacy-shell,
.legacy-shell * {
  scrollbar-color: var(--accent-scroll) transparent;
}

.legacy-shell :where(button, input, select, textarea) {
  font-family: var(--font-body);
}

#app .legacy-shell :where(button, input, select, textarea, label, p, li) {
  font-size: max(12px, 1em);
}

#app .legacy-shell :where(
  .eyebrow,
  .meta,
  .metadata,
  .timestamp,
  .time,
  .date,
  .count,
  .status-label,
  .runtime-model,
  .card-tag,
  .header-subtitle,
  .subtle
) {
  font-family: var(--font-mono-v2);
  font-size: max(11px, 1em);
  font-variant-numeric: tabular-nums;
}

.legacy-shell :where(a, button, [role='button'], [role='link'], input, select, textarea):focus-visible {
  outline: 2px solid var(--a-blue);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

.legacy-shell :where(button, [role='button'], [role='link']) {
  -webkit-tap-highlight-color: transparent;
}

.legacy-content {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 0;
}

.nexus-page {
  width: min(100%, var(--page-max-standard));
  margin-inline: auto;
  display: grid;
  align-content: start;
  gap: 20px;
  min-width: 0;
}

.nexus-page--workspace {
  width: min(100%, var(--page-max-workspace));
}

.nexus-page--reading {
  width: min(100%, var(--page-max-reading));
}

.nexus-page > *,
.nexus-page :where(section, article, div, form, fieldset) {
  min-width: 0;
}

.nexus-page :where(img, svg, video, canvas) {
  max-width: 100%;
}

.nexus-page-header,
.legacy-shell .page-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  min-width: 0;
}

.nexus-page-header__identity {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}

.nexus-page-header__icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--grad-soft);
  color: var(--tx);
}

#app .legacy-shell .nexus-page h1,
#app .legacy-shell .page-heading h1 {
  margin: 0;
  color: var(--tx);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: -.025em;
}

#app .legacy-shell .nexus-page h2 {
  color: var(--tx);
  font-family: var(--font-display);
  letter-spacing: -.015em;
}

.legacy-shell .nexus-page :where(.page-subtitle, .header-subtitle),
.legacy-shell .page-heading p {
  margin: 4px 0 0;
  color: var(--tx-2);
  line-height: 1.55;
}

.nexus-panel,
.nexus-card,
.nexus-state {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--panel-shadow);
  backdrop-filter: blur(12px);
}

.nexus-panel {
  padding: 18px;
}

.nexus-card {
  overflow: hidden;
  transition:
    border-color .18s ease,
    background-color .18s ease,
    transform .18s ease;
}

.nexus-card--interactive:hover {
  border-color: var(--line-3);
  background: var(--glass-2);
  transform: translateY(-1px);
}

.nexus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 14px;
}

.nexus-stack {
  display: grid;
  gap: 14px;
}

.nexus-actions,
.nexus-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.nexus-button,
.legacy-shell .refresh {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--accent-wash);
  color: var(--tx-2);
  font-weight: 650;
  line-height: 1;
  cursor: pointer;
  transition:
    color .16s ease,
    border-color .16s ease,
    background-color .16s ease,
    filter .16s ease;
}

.nexus-button:hover:not(:disabled),
.legacy-shell .refresh:hover:not(:disabled) {
  color: var(--tx);
  border-color: var(--line-3);
  background: var(--accent-wash-strong);
}

.nexus-button--primary {
  border-color: transparent;
  background: var(--grad);
  color: var(--tx-on-accent);
  box-shadow: var(--glow-purple);
}

.nexus-button--primary:hover:not(:disabled) {
  filter: brightness(1.08);
}

.nexus-button--danger {
  border-color: var(--status-block-line);
  background: var(--status-block-bg);
  color: var(--st-block);
}

.nexus-button:disabled,
.legacy-shell button:disabled {
  cursor: not-allowed;
  opacity: .48;
}

.nexus-field,
.legacy-shell :where(input:not([type='checkbox']):not([type='radio']), select, textarea) {
  min-height: 38px;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--field-surface);
  color: var(--tx);
  caret-color: var(--a-blue);
  transition:
    border-color .16s ease,
    box-shadow .16s ease,
    background-color .16s ease;
}

.legacy-shell :where(input:not([type='checkbox']):not([type='radio']), select) {
  padding-inline: 12px;
}

.legacy-shell textarea {
  padding: 10px 12px;
  resize: vertical;
}

.nexus-field:hover,
.legacy-shell :where(input:not([type='checkbox']):not([type='radio']), select, textarea):hover {
  border-color: var(--line-2);
}

.nexus-field:focus,
.legacy-shell :where(input:not([type='checkbox']):not([type='radio']), select, textarea):focus {
  border-color: var(--a-blue);
  background: var(--field-surface-focus);
  outline: none;
  box-shadow: var(--focus-ring);
}

.legacy-shell ::placeholder {
  color: var(--tx-3);
  opacity: 1;
}

.nexus-badge,
.nexus-status {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  padding: 4px 9px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--accent-wash);
  color: var(--tx-2);
  line-height: 1.2;
}

.nexus-status--success {
  border-color: var(--status-work-line);
  background: var(--status-work-bg);
  color: var(--st-work);
}

.nexus-status--info {
  border-color: var(--status-think-line);
  background: var(--status-think-bg);
  color: var(--st-think);
}

.nexus-status--warning {
  border-color: var(--status-queue-line);
  background: var(--status-queue-bg);
  color: var(--st-queue);
}

.nexus-status--danger {
  border-color: var(--status-block-line);
  background: var(--status-block-bg);
  color: var(--st-block);
}

.nexus-state {
  display: grid;
  gap: 8px;
  padding: 18px;
  color: var(--tx-2);
  line-height: 1.55;
}

.nexus-state h2,
.nexus-state h3,
.nexus-state p {
  margin: 0;
}

.nexus-state--loading {
  border-color: var(--status-think-line);
}

.nexus-state--error {
  border-color: var(--status-block-line);
  background: linear-gradient(135deg, var(--status-block-bg), var(--glass));
}

.nexus-state--empty {
  border-style: dashed;
}

.nexus-divider {
  height: 1px;
  border: 0;
  background: var(--line);
}

.nexus-mono {
  font-family: var(--font-mono-v2);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.nexus-table-scroll,
.nexus-workspace-scroll {
  max-width: 100%;
  overflow: auto;
  overscroll-behavior-inline: contain;
}

/* -----------------------------------------------------------------
   Authenticated route families
   ----------------------------------------------------------------- */

#app .legacy-shell .nexus-page {
  width: min(100%, var(--page-max-standard));
  max-width: none;
  margin-inline: auto;
  padding: 0;
}

#app .legacy-shell .nexus-page.nexus-page--workspace {
  width: min(100%, var(--page-max-workspace));
}

#app .legacy-shell .nexus-page.nexus-page--reading {
  width: min(100%, var(--page-max-reading));
}

#app .legacy-shell .nexus-page :where(
  .memory-back-btn,
  .incident-back-btn,
  .back-link,
  .back-btn,
  .btn-ghost,
  .btn-cancel,
  .mark-all-btn
) {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 13px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--accent-wash);
  color: var(--tx-2);
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  transition:
    color .16s ease,
    border-color .16s ease,
    background-color .16s ease;
}

#app .legacy-shell .nexus-page :where(
  .memory-back-btn,
  .incident-back-btn,
  .back-link,
  .back-btn,
  .btn-ghost,
  .btn-cancel,
  .mark-all-btn
):hover:not(:disabled) {
  border-color: var(--line-3);
  background: var(--accent-wash-strong);
  color: var(--tx);
}

#app .legacy-shell .nexus-page :where(
  .btn-primary,
  .btn-save,
  .btn-submit,
  .create-btn
) {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--grad);
  color: var(--tx-on-accent);
  box-shadow: var(--glow-purple);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

#app .legacy-shell .nexus-page :where(
  .btn-primary,
  .btn-save,
  .btn-submit,
  .create-btn
):hover:not(:disabled) {
  filter: brightness(1.08);
}

#app .legacy-shell .nexus-page :where(
  .btn-danger,
  .delete-confirm
) {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 14px;
  border: 1px solid var(--status-block-line);
  border-radius: var(--r-sm);
  background: var(--status-block-bg);
  color: var(--st-block);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

#app .legacy-shell .nexus-page :where(
  .memory-status,
  .incident-status,
  .calendar-status,
  .status-message,
  .loading-state,
  .error-state,
  .board-loading
) {
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--glass);
  color: var(--tx-2);
  font-size: 12px;
  line-height: 1.55;
  backdrop-filter: blur(12px);
}

#app .legacy-shell .nexus-page :where(
  .memory-status.error,
  .incident-status.error,
  .calendar-status.error,
  .status-message.error,
  .error-state,
  .msg.error,
  .form-error
) {
  border-color: var(--status-block-line);
  background: linear-gradient(135deg, var(--status-block-bg), var(--glass));
  color: var(--st-block);
}

/* Memory, Docs, and Incidents */
#app .legacy-shell :is(.memory-page, .docs-page, .incidents-page) :is(
  .memory-search-bar,
  .docs-search-bar,
  .docs-filter-group
) {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--glass);
  color: var(--tx-3);
  backdrop-filter: blur(12px);
}

#app .legacy-shell :is(.memory-page, .docs-page) :is(
  .memory-search-bar input,
  .docs-search-bar input
) {
  min-height: 38px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#app .legacy-shell .docs-page .docs-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin: 0;
}

#app .legacy-shell .docs-page .docs-filter-group {
  padding: 0 12px;
}

#app .legacy-shell .docs-page .docs-filter-group select {
  min-height: 38px;
  padding: 0 30px 0 4px;
  border: 0;
  background-color: transparent;
  box-shadow: none;
}

#app .legacy-shell :is(.memory-page, .docs-page) .memory-layout,
#app .legacy-shell .incidents-page .incident-layout {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: 14px;
  min-height: 540px;
}

#app .legacy-shell :is(.memory-page, .docs-page) :is(.memory-sidebar, .memory-content),
#app .legacy-shell .incidents-page :is(.incident-sidebar, .incident-content) {
  max-height: none;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--glass);
  box-shadow: var(--panel-shadow);
  backdrop-filter: blur(12px);
}

#app .legacy-shell :is(.memory-page, .docs-page) .memory-sidebar,
#app .legacy-shell .incidents-page .incident-sidebar {
  padding: 8px;
  overflow-y: auto;
}

#app .legacy-shell :is(.memory-page, .docs-page) .memory-content,
#app .legacy-shell .incidents-page .incident-content {
  min-height: 540px;
  overflow: auto;
}

#app .legacy-shell :is(.memory-page, .docs-page) :is(.memory-list-header, .doc-type-tag),
#app .legacy-shell .incidents-page .incident-list-header {
  color: var(--a-mid);
  font-family: var(--font-mono-v2);
  font-size: 11px;
}

#app .legacy-shell :is(.memory-page, .docs-page) .memory-file-item,
#app .legacy-shell .incidents-page .incident-file-item {
  width: 100%;
  min-height: 58px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--tx-2);
  text-align: left;
  cursor: pointer;
}

#app .legacy-shell :is(.memory-page, .docs-page) .memory-file-item:hover,
#app .legacy-shell :is(.memory-page, .docs-page) .memory-file-item.active,
#app .legacy-shell .incidents-page .incident-file-item:hover,
#app .legacy-shell .incidents-page .incident-file-item.active {
  border-color: var(--line-2);
  background: var(--accent-wash);
  color: var(--tx);
}

#app .legacy-shell :is(.memory-page, .docs-page) .memory-file-icon,
#app .legacy-shell .incidents-page .incident-file-icon {
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--accent-wash);
  color: var(--a-mid);
}

#app .legacy-shell :is(.memory-page, .docs-page) .memory-file-info strong,
#app .legacy-shell .incidents-page .incident-file-info strong {
  color: var(--tx);
  font-size: 12px;
}

#app .legacy-shell :is(.memory-page, .docs-page) :is(.memory-file-meta, .memory-file-excerpt),
#app .legacy-shell .incidents-page :is(.incident-file-meta, .incident-file-excerpt) {
  color: var(--tx-3);
  font-size: 11px;
  line-height: 1.45;
}

#app .legacy-shell :is(.memory-page, .docs-page) .memory-content-header,
#app .legacy-shell .incidents-page .incident-content-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--space-2) 54%, transparent);
}

#app .legacy-shell :is(.memory-page, .docs-page) .memory-content-header strong,
#app .legacy-shell .incidents-page .incident-content-title-row strong {
  color: var(--tx);
  font-family: var(--font-display);
  font-size: 15px;
}

#app .legacy-shell :is(.memory-page, .docs-page) .memory-rendered,
#app .legacy-shell .incidents-page .incident-rendered {
  padding: 20px;
  color: var(--tx-2);
  font-size: 14px;
  line-height: 1.68;
}

#app .legacy-shell :is(.memory-page, .docs-page) .memory-rendered :is(h1, h2, h3),
#app .legacy-shell .incidents-page .incident-rendered :is(h1, h2, h3) {
  color: var(--tx);
  font-family: var(--font-display);
}

#app .legacy-shell :is(.memory-page, .docs-page) .memory-rendered :is(code, pre),
#app .legacy-shell .incidents-page .incident-rendered :is(code, pre) {
  border-color: var(--line);
  background: color-mix(in srgb, var(--space-1) 78%, transparent);
  color: var(--tx);
  font-family: var(--font-mono-v2);
}

#app .legacy-shell :is(.memory-page, .docs-page) .memory-empty-state,
#app .legacy-shell .incidents-page .incident-empty-state {
  min-height: 100%;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 9px;
  padding: 32px;
  color: var(--tx-3);
  text-align: center;
}

#app .legacy-shell :is(.memory-page, .docs-page) .memory-empty-state h3,
#app .legacy-shell .incidents-page .incident-empty-state h3 {
  margin: 0;
  color: var(--tx);
  font-family: var(--font-display);
}

#app .legacy-shell :is(.memory-page, .docs-page) .memory-empty-state p,
#app .legacy-shell .incidents-page .incident-empty-state p {
  margin: 0;
  color: var(--tx-2);
}

#app .legacy-shell :is(.memory-page, .docs-page) :is(.doc-category-badge, .doc-type-tag),
#app .legacy-shell .incidents-page .severity-badge {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--accent-wash);
  color: var(--tx-2);
  font-family: var(--font-mono-v2);
  font-size: 11px;
}

/* Security */
#app .legacy-shell .security-page .security-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

#app .legacy-shell .security-page .security-card {
  min-height: 230px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--glass);
  box-shadow: var(--panel-shadow);
  backdrop-filter: blur(12px);
}

#app .legacy-shell .security-page .security-card-icon {
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--grad-soft);
  color: var(--a-mid);
}

#app .legacy-shell .security-page .security-card h3 {
  color: var(--tx);
  font-family: var(--font-display);
  font-size: 15px;
}

#app .legacy-shell .security-page :is(.security-value, .security-detail-value) {
  color: var(--tx);
  font-family: var(--font-mono-v2);
  font-size: 12px;
}

#app .legacy-shell .security-page :is(.security-desc, .security-detail-label) {
  color: var(--tx-2);
  font-size: 12px;
  line-height: 1.55;
}

#app .legacy-shell .security-page .security-detail-row {
  min-height: 34px;
  border-color: var(--line);
}

#app .legacy-shell .security-page .status-bool.enabled,
#app .legacy-shell .security-page :is(.check-icon, .enabled-text) {
  color: var(--st-work);
}

#app .legacy-shell .security-page .status-bool.disabled,
#app .legacy-shell .security-page :is(.x-icon, .disabled-text) {
  color: var(--st-block);
}

/* Calendar */
#app .legacy-shell .calendar-page .calendar-layout {
  display: grid;
  grid-template-columns: minmax(280px, .7fr) minmax(0, 1.3fr);
  gap: 14px;
}

#app .legacy-shell .calendar-page .calendar-panel {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--glass);
  box-shadow: var(--panel-shadow);
  backdrop-filter: blur(12px);
}

#app .legacy-shell .calendar-page .calendar-panel-head {
  min-height: 52px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--a-mid);
}

#app .legacy-shell .calendar-page .calendar-panel-head h2 {
  color: var(--tx);
  font-family: var(--font-display);
  font-size: 15px;
}

#app .legacy-shell .calendar-page :is(.upcoming-item, .job-item) {
  min-height: 70px;
  padding: 13px 16px;
  border-color: var(--line);
  background: transparent;
}

#app .legacy-shell .calendar-page :is(.upcoming-item, .job-item):hover {
  background: var(--accent-wash);
}

#app .legacy-shell .calendar-page :is(.upcoming-item-icon, .job-item-icon) {
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--accent-wash);
  color: var(--a-mid);
}

#app .legacy-shell .calendar-page :is(.upcoming-item-info, .job-item-info) strong {
  color: var(--tx);
  font-size: 12px;
}

#app .legacy-shell .calendar-page :is(
  .upcoming-item-schedule,
  .upcoming-item-next,
  .job-item-id,
  .job-item-schedule,
  .job-item-meta small
) {
  color: var(--tx-3);
  font-family: var(--font-mono-v2);
  font-size: 11px;
}

#app .legacy-shell .calendar-page .job-status-badge {
  min-height: 23px;
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--accent-wash);
  color: var(--tx-2);
  font-family: var(--font-mono-v2);
  font-size: 11px;
}

/* Agent and project detail */
#app .legacy-shell .detail-page .agent-header,
#app .legacy-shell .detail-page .thinking-section,
#app .legacy-shell .project-detail .project-detail-card,
#app .legacy-shell .project-detail .project-tasks-section {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--glass);
  box-shadow: var(--panel-shadow);
  backdrop-filter: blur(12px);
}

#app .legacy-shell .detail-page .agent-header {
  margin: 0;
}

#app .legacy-shell .detail-page .agent-avatar,
#app .legacy-shell .project-detail .project-letter-lg {
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--grad-soft);
  color: var(--tx);
}

#app .legacy-shell .project-detail .project-letter-lg {
  background: var(--grad);
  color: var(--tx-on-accent);
  box-shadow: var(--glow-purple);
}

#app .legacy-shell .detail-page .agent-header-info h1,
#app .legacy-shell .project-detail .project-detail-info h1 {
  margin: 0;
  color: var(--tx);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}

#app .legacy-shell .detail-page :is(.status-label, .section-note, .summary-card small, .thinking-meta),
#app .legacy-shell .project-detail :is(.project-description, .updated-at, .task-info span, .task-item small) {
  color: var(--tx-2);
  font-size: 12px;
}

#app .legacy-shell .detail-page :is(.section-head h2, .summary-row p, .thinking-item p),
#app .legacy-shell .project-detail :is(.project-tasks-section h2, .task-info strong) {
  color: var(--tx);
}

#app .legacy-shell .detail-page .summary-row {
  gap: 1px;
  background: var(--line);
}

#app .legacy-shell .detail-page :is(.summary-row > div, .thinking-item) {
  border-color: var(--line);
  background: color-mix(in srgb, var(--space-2) 52%, transparent);
}

#app .legacy-shell .detail-page .type-pill,
#app .legacy-shell .project-detail .project-meta {
  border-color: var(--line-2);
  background: var(--accent-wash);
  color: var(--tx-2);
}

#app .legacy-shell .project-detail .project-detail-top {
  gap: 14px;
}

#app .legacy-shell .project-detail .project-detail-actions {
  flex-wrap: wrap;
}

#app .legacy-shell .project-detail .progress-bar {
  background: var(--line);
}

#app .legacy-shell .project-detail .progress-bar i {
  background: var(--grad);
}

#app .legacy-shell .project-detail :is(.task-item, .empty-tasks) {
  border-color: var(--line);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--space-2) 54%, transparent);
}

#app .legacy-shell .project-detail .empty-tasks {
  color: var(--tx-2);
}

/* Task board and task detail */
#app .legacy-shell .board-wrap {
  min-height: 100%;
}

#app .legacy-shell .board-wrap .board-header {
  margin: 0;
}

#app .legacy-shell .board-wrap .board-header h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}

#app .legacy-shell .board-wrap :is(
  .iris-panel,
  .col,
  .permission-banner,
  .stale-banner
) {
  border-radius: var(--r);
  border-color: var(--line);
  background-color: var(--glass);
  backdrop-filter: blur(12px);
}

#app .legacy-shell .board-wrap .board-columns {
  max-width: 100%;
  min-height: calc(100dvh - 190px);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

#app .legacy-shell .board-wrap :is(.expected-badge, .meta-agent-tag, .meta-expected, dd) {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

#app .legacy-shell .board-wrap :is(.agent-badge, .expected-badge, .assignee, .prio-badge) {
  min-height: 22px;
  border-radius: 999px;
  font-family: var(--font-mono-v2);
  font-size: 11px;
}

#app .legacy-shell .board-wrap .card {
  border-color: var(--line);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--glass-2) 82%, transparent);
}

#app .legacy-shell .board-wrap .card:hover {
  border-color: var(--line-3);
  box-shadow: var(--panel-shadow);
}

#app .legacy-shell .detail-wrap .detail-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
  gap: 20px;
}

#app .legacy-shell .detail-wrap .title-input {
  min-height: 44px;
  padding: 4px 0;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--tx);
  box-shadow: none;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}

#app .legacy-shell .detail-wrap .title-input:focus {
  border-bottom-color: var(--line-3);
  background: transparent;
  box-shadow: none;
}

#app .legacy-shell .detail-wrap :is(
  .section-card,
  .sidebar-card,
  .subtask-row,
  .activity-item,
  .new-subtask-form
) {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--glass);
  backdrop-filter: blur(12px);
}

#app .legacy-shell .detail-wrap :is(.section-head, .sidebar-head, .sidebar-field span) {
  color: var(--tx-2);
  font-family: var(--font-mono-v2);
  font-size: 11px;
}

#app .legacy-shell .detail-wrap :is(.meta-row, .activity-time, .info-list dt) {
  color: var(--tx-3);
  font-family: var(--font-mono-v2);
  font-size: 11px;
}

#app .legacy-shell .detail-wrap :is(.meta-chip, .state-badge) {
  min-height: 25px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--accent-wash);
  color: var(--tx-2);
  font-family: var(--font-mono-v2);
  font-size: 11px;
}

#app .legacy-shell .detail-wrap :is(.progress-banner, .readonly-banner) {
  border-color: var(--line-2);
  background: var(--accent-wash);
  color: var(--tx-2);
}

#app .legacy-shell .detail-wrap :is(.subtask-title, .activity-msg, .info-list dd) {
  color: var(--tx);
  font-size: 12px;
}

#app .legacy-shell .detail-wrap :is(.subtask-detail, .empty-section, .loading-mini) {
  color: var(--tx-2);
  font-size: 12px;
}

/* Notifications */
#app .legacy-shell .notifications-page .page-header {
  margin: 0;
}

#app .legacy-shell .notifications-page .page-header h1 {
  display: flex;
  align-items: center;
  gap: 10px;
}

#app .legacy-shell .notifications-page .notification-list {
  display: grid;
  gap: 10px;
}

#app .legacy-shell .notifications-page .notification-card {
  min-height: 76px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 14px;
  border-color: var(--line);
  border-radius: var(--r);
  background: var(--glass);
}

#app .legacy-shell .notifications-page .notification-card.unread {
  border-color: var(--line-3);
  background: linear-gradient(135deg, var(--accent-wash), var(--glass));
}

#app .legacy-shell .notifications-page .icon-wrapper {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--accent-wash);
  color: var(--a-mid);
}

#app .legacy-shell .notifications-page .icon-wrapper.type-assigned {
  color: var(--a-blue);
}

#app .legacy-shell .notifications-page .icon-wrapper.type-review {
  color: var(--st-queue);
}

#app .legacy-shell .notifications-page .icon-wrapper.type-blocked {
  color: var(--st-block);
}

#app .legacy-shell .notifications-page .card-title {
  color: var(--tx);
  font-size: 13px;
}

#app .legacy-shell .notifications-page .card-message {
  color: var(--tx-2);
  font-size: 12px;
  line-height: 1.5;
}

#app .legacy-shell .notifications-page :is(.timestamp, .arrow) {
  color: var(--tx-3);
  font-family: var(--font-mono-v2);
  font-size: 11px;
}

#app .legacy-shell .notifications-page .empty-state {
  min-height: 360px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r);
  background: var(--glass);
  color: var(--tx-3);
}

/* Settings */
#app .legacy-shell .settings-wrap .settings-heading {
  margin: 0;
}

#app .legacy-shell .settings-wrap .settings-heading h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}

#app .legacy-shell .settings-wrap .settings-subtitle {
  color: var(--tx-2);
  font-size: 12px;
}

#app .legacy-shell .settings-wrap .settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

#app .legacy-shell .settings-wrap .glass-card {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--glass);
  box-shadow: var(--panel-shadow);
  backdrop-filter: blur(12px);
}

#app .legacy-shell .settings-wrap .admin-card {
  grid-column: 1 / -1;
}

#app .legacy-shell .settings-wrap .card-head {
  min-height: 40px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  color: var(--a-mid);
}

#app .legacy-shell .settings-wrap .card-head h2 {
  color: var(--tx);
  font-family: var(--font-display);
  font-size: 15px;
}

#app .legacy-shell .settings-wrap .field label {
  color: var(--tx-2);
  font-family: var(--font-mono-v2);
  font-size: 11px;
}

#app .legacy-shell .settings-wrap :is(.value-tag, .role-badge, .role-tag) {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 4px 9px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--accent-wash);
  color: var(--tx-2);
  font-family: var(--font-mono-v2);
  font-size: 11px;
}

#app .legacy-shell .settings-wrap .user-row {
  border-color: var(--line);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--space-2) 52%, transparent);
}

#app .legacy-shell .settings-wrap .user-row:hover {
  background: var(--accent-wash);
}

#app .legacy-shell .settings-wrap .user-avatar {
  border: 1px solid var(--line-2);
  background: var(--grad-soft);
  color: var(--tx);
}

#app .legacy-shell .settings-wrap :is(.user-name, .user-email) {
  color: var(--tx);
}

#app .legacy-shell .settings-wrap :is(.user-meta, .user-date) {
  color: var(--tx-3);
  font-family: var(--font-mono-v2);
  font-size: 11px;
}

/* ModuleView: Projects, Models, Activity, and Chat */
#app .legacy-shell .quick-create {
  display: grid;
  grid-template-columns: minmax(0, 360px) auto;
  justify-content: start;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--glass);
  backdrop-filter: blur(12px);
}

#app .legacy-shell .quick-create button,
#app .legacy-shell .chat-shell form button {
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--grad);
  color: var(--tx-on-accent);
  box-shadow: var(--glow-purple);
  font-weight: 700;
  cursor: pointer;
}

#app .legacy-shell .module-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

#app .legacy-shell .module-card,
#app .legacy-shell .module-list,
#app .legacy-shell .activity-panel,
#app .legacy-shell .chat-shell,
#app .legacy-shell .approval-strip {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--glass);
  box-shadow: var(--panel-shadow);
  backdrop-filter: blur(12px);
}

#app .legacy-shell .module-card {
  min-height: 190px;
  padding: 16px;
}

#app .legacy-shell .module-card h3,
#app .legacy-shell .model-detail h3,
#app .legacy-shell .timeline h3,
#app .legacy-shell .chat-shell h3 {
  color: var(--tx);
  font-family: var(--font-display);
  font-size: 15px;
}

#app .legacy-shell :is(.module-card, .model-detail, .timeline, .chat-shell) p {
  color: var(--tx-2);
  font-size: 12px;
  line-height: 1.55;
}

#app .legacy-shell .module-card footer,
#app .legacy-shell .kicker,
#app .legacy-shell .route-rank {
  color: var(--tx-3);
  font-family: var(--font-mono-v2);
  font-size: 11px;
}

#app .legacy-shell .project-letter,
#app .legacy-shell .agent-avatar {
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--grad-soft);
  color: var(--tx);
}

#app .legacy-shell .progress {
  overflow: hidden;
  border-radius: 999px;
  background: var(--line);
}

#app .legacy-shell .progress i {
  background: var(--grad);
}

#app .legacy-shell .badge {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--accent-wash);
  color: var(--tx-2);
  font-family: var(--font-mono-v2);
  font-size: 11px;
}

#app .legacy-shell .badge.positive {
  border-color: var(--status-work-line);
  background: var(--status-work-bg);
  color: var(--st-work);
}

#app .legacy-shell .badge.warning {
  border-color: var(--status-queue-line);
  background: var(--status-queue-bg);
  color: var(--st-queue);
}

#app .legacy-shell .badge.negative {
  border-color: var(--status-block-line);
  background: var(--status-block-bg);
  color: var(--st-block);
}

#app .legacy-shell .module-list,
#app .legacy-shell .activity-panel {
  padding: 16px;
}

#app .legacy-shell .model-detail,
#app .legacy-shell .timeline article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 70px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
}

#app .legacy-shell .model-detail:last-child,
#app .legacy-shell .timeline article:last-child {
  border-bottom: 0;
}

#app .legacy-shell .activity-filters {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

#app .legacy-shell .activity-pagination {
  border-color: var(--line);
}

#app .legacy-shell .chat-shell {
  width: min(100%, var(--page-max-reading));
  margin-inline: auto;
  overflow: hidden;
}

#app .legacy-shell .chat-shell > header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
}

#app .legacy-shell .chat-shell .messages {
  min-height: 360px;
  max-height: calc(100dvh - 300px);
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 16px;
}

#app .legacy-shell .chat-shell .message {
  width: fit-content;
  max-width: min(78%, 620px);
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--space-2) 64%, transparent);
}

#app .legacy-shell .chat-shell .message.owner {
  justify-self: end;
  border-color: var(--line-2);
  background: var(--grad-soft);
}

#app .legacy-shell .chat-shell form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 14px;
  border-top: 1px solid var(--line);
}

#app .legacy-shell .settings-redirect {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--glass);
  color: var(--tx-2);
  text-align: center;
}

/* Teleported dialogs */
body .modal-overlay.modal-overlay,
body .detail-overlay.detail-overlay,
body .delete-overlay.delete-overlay {
  background: color-mix(in srgb, var(--space-0) 78%, transparent);
  backdrop-filter: blur(16px);
}

body .modal-overlay .modal,
body .modal-overlay .modal-card,
body .delete-overlay .delete-dialog,
body .detail-overlay .detail-panel {
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: color-mix(in srgb, var(--space-2) 94%, transparent);
  color: var(--tx);
  box-shadow: var(--panel-shadow);
  backdrop-filter: blur(14px);
}

body .modal-overlay :where(input, select, textarea),
body .detail-overlay :where(input, select, textarea) {
  border-color: var(--line);
  border-radius: var(--r-sm);
  background-color: var(--field-surface);
  color: var(--tx);
}

body .modal-overlay :where(button, input, select, textarea):focus-visible,
body .detail-overlay :where(button, input, select, textarea):focus-visible {
  outline: 2px solid var(--a-blue);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

@media (max-width: 1024px) {
  .nexus-page {
    gap: 16px;
  }

  .nexus-page :where(.detail-grid, .settings-grid, .project-layout, .agent-detail-grid) {
    grid-template-columns: minmax(0, 1fr);
  }

  #app .legacy-shell .security-page .security-grid,
  #app .legacy-shell .module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #app .legacy-shell .detail-wrap .detail-body {
    grid-template-columns: minmax(0, 1fr);
  }

  #app .legacy-shell .detail-wrap .detail-sidebar {
    position: static;
  }
}

@media (max-width: 767px) {
  .nexus-page {
    gap: 14px;
  }

  .nexus-page-header,
  .legacy-shell .page-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .nexus-page-header__identity {
    align-items: flex-start;
  }

  .nexus-page-header__icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .nexus-actions,
  .nexus-toolbar {
    align-items: stretch;
  }

  #app .legacy-shell :is(.memory-page, .docs-page) .memory-layout,
  #app .legacy-shell .incidents-page .incident-layout,
  #app .legacy-shell .calendar-page .calendar-layout,
  #app .legacy-shell .settings-wrap .settings-grid,
  #app .legacy-shell .security-page .security-grid,
  #app .legacy-shell .module-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #app .legacy-shell :is(.memory-page, .docs-page) .memory-content,
  #app .legacy-shell .incidents-page .incident-content {
    min-height: 460px;
  }

  #app .legacy-shell .docs-page .docs-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  #app .legacy-shell .calendar-page :is(.upcoming-item, .job-item) {
    align-items: flex-start;
  }

  #app .legacy-shell .project-detail .project-detail-top,
  #app .legacy-shell .board-wrap .board-header,
  #app .legacy-shell .notifications-page .page-header {
    align-items: stretch;
    flex-direction: column;
  }

  #app .legacy-shell .project-detail .project-detail-actions,
  #app .legacy-shell .board-wrap .board-header-actions {
    justify-content: flex-start;
  }

  #app .legacy-shell .settings-wrap .admin-card {
    grid-column: auto;
  }

  #app .legacy-shell .notifications-page .notification-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  #app .legacy-shell .notifications-page .card-meta {
    grid-column: 2;
    justify-content: flex-start;
  }

  #app .legacy-shell .quick-create {
    grid-template-columns: minmax(0, 1fr);
  }

  #app .legacy-shell .chat-shell .message {
    max-width: 92%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .legacy-shell *,
  .legacy-shell *::before,
  .legacy-shell *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}
