@layer components {
  .app-shell :where(.button, .icon-button, .command-trigger, .workspace-switcher, .work-state-button) {
    appearance: none;
    min-height: var(--control-height);
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    background: var(--surface-subtle);
    box-shadow: none;
    outline: none;
    transition: color .16s ease, background .16s ease, opacity .16s ease;
  }
  .app-shell :where(.button, .icon-button, .command-trigger, .work-state-button):hover {
    color: var(--text-primary);
    background: var(--surface-hover);
    box-shadow: none;
    transform: none;
  }
  .app-shell :where(.button, .icon-button, .command-trigger, .work-state-button):active { transform: none; }
  .app-shell .button { padding: 8px 14px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 13px; font-weight: 680; }
  .app-shell .button-primary { color: var(--text-on-accent); background: var(--text-primary); box-shadow: none; }
  .app-shell .button-primary:hover { color: var(--text-on-accent); background: #303a35; }
  .app-shell :where(.button-ghost, .button-quiet) { color: var(--text-secondary); background: transparent; }
  .app-shell :where(.button-red, .button-danger) { color: var(--danger-fg); background: var(--danger-bg); box-shadow: none; }
  .app-shell .button-teal { color: var(--success-fg); background: var(--success-bg); box-shadow: none; }
  .app-shell .button-small { min-height: 36px; padding: 6px 10px; font-size: var(--font-caption); }
  .app-shell .icon-button { width: var(--control-height); height: var(--control-height); padding: 0; display: grid; place-items: center; }
  .app-shell :where(.button, .icon-button)[disabled] { opacity: .42; transform: none; }
  .command-trigger { padding: 0 10px; display: inline-flex; align-items: center; gap: 8px; color: var(--text-secondary); }
  .command-trigger kbd { padding: 2px 5px; border: 0; border-radius: 5px; color: var(--text-muted); background: rgba(255,255,255,.55); font-size: 11px; }

  .page-header { margin-bottom: var(--space-6); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); }
  .page-title { min-width: 0; max-width: 920px; }
  .page-title h1 { margin: 0; color: var(--text-primary); font-family: inherit; font-size: var(--font-title); font-weight: 730; letter-spacing: -.035em; line-height: 1.08; }
  .page-title p { max-width: 760px; margin: 10px 0 0; color: var(--text-secondary); font-size: var(--font-lead); line-height: 1.65; }
  .hero-kicker, .eyebrow, .window-kicker { margin-bottom: 8px; color: var(--accent-fg); font-size: var(--font-caption); font-weight: 760; letter-spacing: .12em; }
  .section-title { margin: var(--space-7) 0 var(--space-4); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }
  .section-title h2 { margin: 0; font-family: inherit; font-size: clamp(21px, 2vw, 26px); font-weight: 720; letter-spacing: -.02em; }
  .section-title p { margin: 4px 0 0; color: var(--text-muted); font-size: 13px; line-height: 1.55; }

  /* Page content is flat by default. Only overlays and an active drag restore elevation below. */
  #page-root :where(*) { box-shadow: none; }

  .card,
  .window-panel {
    position: relative;
    min-width: 0;
    border: 0;
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    background: var(--surface);
    box-shadow: none;
  }
  .card { padding: var(--space-5); }
  .card::after,
  .window-panel::after { display: none; }
  .card .card { background: transparent; }
  .card-hover { transition: background .16s ease; }
  .card-hover:hover { background: rgba(255,255,255,.74); box-shadow: none; transform: none; }
  .card-header,
  .window-titlebar { position: relative; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
  .card-header h3,
  .window-titlebar h2,
  .window-titlebar h3 { margin: 0; font-family: inherit; }
  .card-header p,
  .window-titlebar p { margin: 4px 0 0; color: var(--text-muted); font-size: 13px; line-height: 1.55; }
  .card footer { color: var(--text-muted); font-size: var(--font-caption); }
  .card footer::before { background: var(--divider); }

  .spatial-item,
  .window-panel {
    --window-x: 0px;
    --window-y: 0px;
    transform: translate3d(var(--window-x), var(--window-y), 0);
    transition: opacity .16s ease, box-shadow .16s ease;
  }
  .spatial-item:not(.window-static) { min-width: 250px; min-height: 88px; resize: both; overflow: auto; }
  :where(.spatial-item, .window-panel).window-static { width: auto; height: auto; transform: none; resize: none; overflow: visible; }
  body.layout-editing .spatial-item:not(.window-static) { outline: 2px dashed var(--divider-strong); outline-offset: 3px; }
  .window-dragging { z-index: 120 !important; background: var(--surface-solid) !important; box-shadow: var(--elevation-drag) !important; opacity: .98; transition: none; }
  .window-maximized { background: var(--surface-solid) !important; box-shadow: var(--elevation-overlay) !important; }
  .window-controls { opacity: .72; }
  .window-controls button { border: 0; color: var(--text-muted); background: var(--surface-subtle); box-shadow: none; }
  .window-controls button:hover { color: var(--text-primary); background: var(--surface-hover); }

  .grid { display: grid; }
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }

  .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
  .form-grid .full { grid-column: 1 / -1; }
  :where(.form-grid, form) label { color: var(--text-secondary); font-size: 13px; font-weight: 620; }
  :where(.form-grid, form) label > span:first-child { display: block; margin-bottom: 6px; }
  .app-shell :where(input:not([type="checkbox"]):not([type="radio"]), textarea, select) {
    width: 100%;
    min-height: 42px;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    background: rgba(255,255,255,.78);
    box-shadow: none;
    outline: none;
  }
  .app-shell :where(input:not([type="checkbox"]):not([type="radio"]), select) { padding: 9px 11px; }
  .app-shell textarea { min-height: 96px; padding: 11px; resize: vertical; line-height: 1.55; }
  .app-shell :where(input:not([type="checkbox"]):not([type="radio"]), textarea, select):hover { background: rgba(255,255,255,.94); }
  .app-shell :where(input:not([type="checkbox"]):not([type="radio"]), textarea, select):focus-visible { background: var(--surface-solid); outline: 3px solid var(--focus-ring); outline-offset: 1px; }
  .app-shell input[type="checkbox"],
  .app-shell input[type="radio"] { width: 18px; height: 18px; accent-color: var(--text-primary); }
  .form-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); }
  fieldset { min-width: 0; border: 0; margin: 0; padding: 0; }

  .metric-card {
    min-width: 0;
    padding: 12px 14px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    box-shadow: none;
  }
  .metric-card span { color: var(--text-muted); font-size: var(--font-caption); }
  .metric-card strong { color: var(--text-primary); }
  .grid > .metric-card + .metric-card { box-shadow: inset 1px 0 0 var(--divider); }

  .badge { min-height: 24px; padding: 4px 8px; border: 0; border-radius: 999px; font-size: var(--font-caption); font-weight: 680; box-shadow: none; }
  .badge-info { color: var(--info-fg); background: var(--info-bg); }
  .badge-warning { color: var(--warning-fg); background: var(--warning-bg); }
  .badge-success { color: var(--success-fg); background: var(--success-bg); }
  .badge-danger { color: var(--danger-fg); background: var(--danger-bg); }
  .badge-neutral, .badge-muted { color: var(--text-secondary); background: var(--surface-subtle); }

  /* Legacy foreground aliases are migrated here while old page rules remain isolated. */
  .app-shell :where(
    .canvas-node header span, .agent-action-card summary, .mini-link, .dossier-details summary,
    .stream-event > span, .growth-hero h1 span, .growth-pulse-core strong, .growth-action > span,
    .strength-row b, .opportunity-type, .resource-card-head > span, .growth-value strong,
    .growth-step i, .growth-progress-number, .growth-progress strong, .path-axis i,
    .growth-step-head span, .resource-icon, .resource-capacity strong, .curiosity-signal,
    .plan-seal strong, .unlock-card span, .strength-proof-ledger strong, .dashboard-growth-score strong,
    .engagement-card-head span, .manage-application-head span, .engagement-flow i.reached,
    .nav-mini-action, .sidebar-insight strong, .eyebrow, .text-button, .error-unlock,
    .command-result-icon, .home-intent-links button, .home-action-icon, .onboarding-progress strong,
    .home-opportunity-score, .recent-work-card span, .work-action-icon, .capability-plan strong,
    .home-intent-links a strong, .onboarding-step > b, .recent-work-card footer b,
    .compact-card-list a > span:first-child, .compact-card-list a > b, .home-capability-strip strong,
    .onboarding-current b, .profile-headline, .interview-row strong,
    .capability-recommended-grid a > span, .capability-recommended-grid b,
    .capability-group-accordion > summary b, .agent-tool-section > summary b,
    .studio-index-card footer strong
  ) { color: var(--accent-fg); }

  .tabs { padding: 0; gap: 4px; border: 0; border-radius: 0; background: transparent; box-shadow: inset 0 -1px 0 var(--divider); }
  .tab { border: 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: transparent; box-shadow: none; }
  .tab.active { color: var(--text-primary); background: var(--surface-subtle); box-shadow: inset 0 -2px 0 var(--accent-fg); }
  .table-wrap { border: 0; border-radius: var(--radius-md); background: rgba(255,255,255,.34); box-shadow: none; }
  table { border-collapse: collapse; }
  th, td { border-bottom: 1px solid var(--divider); }

  .empty-state { border: 0; border-radius: var(--radius-lg); background: var(--surface-subtle); box-shadow: none; }
  .empty-orbit { box-shadow: none; }
  .progressive-disclosure > summary {
    min-height: 50px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-radius: var(--radius-md);
    color: var(--text-primary);
    background: transparent;
  }
  .progressive-disclosure > summary:hover { background: var(--surface-subtle); }
  .progressive-disclosure > summary > span { min-width: 0; display: grid; gap: 2px; }
  .progressive-disclosure > summary strong { font-size: 14px; }
  .progressive-disclosure > summary small { color: var(--text-muted); font-size: var(--font-caption); font-weight: 500; }
  .progressive-disclosure > summary > b { flex: none; color: var(--accent-fg); font-size: var(--font-caption); white-space: nowrap; }

  .modal-backdrop { background: rgba(28,35,31,.24); backdrop-filter: blur(14px); }
  .modal-backdrop {
    min-height: var(--viewport-block);
    padding: max(18px, var(--safe-top)) max(18px, var(--safe-right)) max(18px, var(--safe-bottom)) max(18px, var(--safe-left));
  }
  .modal-card {
    max-height: calc(var(--viewport-block) - max(36px, var(--safe-top)) - max(36px, var(--safe-bottom)));
    border: 0;
    border-radius: var(--radius-overlay);
    background: var(--surface-solid);
    box-shadow: var(--elevation-overlay);
    overscroll-behavior: contain;
  }
  .modal-card > header { background: rgba(255,255,255,.92); }
  .work-state-menu,
  .command-palette,
  .toast { border: 0; background: var(--surface-solid); box-shadow: var(--elevation-overlay); }

  #toast-root {
    position: fixed;
    top: max(18px, var(--safe-top));
    right: max(18px, var(--safe-right));
    z-index: 500;
    width: min(410px, calc(100vw - max(36px, var(--safe-left)) - max(36px, var(--safe-right))));
    display: grid;
    gap: 8px;
    pointer-events: none;
  }
  #toast-root .toast {
    position: relative;
    inset: auto;
    width: 100%;
    min-width: 0;
    min-height: var(--touch-target);
    pointer-events: auto;
  }

  @container main-content (max-width: 1000px) {
    .grid-3,
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @container main-content (max-width: 720px) {
    .page-header,
    .section-title { align-items: flex-start; flex-direction: column; }
    .page-header > :where(.page-actions, .form-actions),
    .section-title > :where(.page-actions, .form-actions) { width: 100%; }
    .grid-2,
    .grid-3,
    .grid-4,
    .form-grid { grid-template-columns: minmax(0, 1fr); }
    .form-grid .full { grid-column: auto; }
    .grid > .metric-card + .metric-card { box-shadow: inset 0 1px 0 var(--divider); }
  }

  @media (max-width: 900px) {
    .page-header { align-items: flex-start; flex-direction: column; }
    .page-title h1 { font-size: clamp(30px, 9vw, 40px); }
    .page-title p { font-size: 15px; }
    .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .spatial-item, .window-panel { width: auto !important; height: auto !important; min-width: 0; transform: none !important; resize: none !important; overflow: visible !important; }
    .app-shell :where(.button, .icon-button, .command-trigger, .work-state-button) { min-height: var(--touch-target); }
    .app-shell .icon-button { width: var(--touch-target); height: var(--touch-target); }
    .topbar .command-trigger { display: none; }
    .app-shell .button-small,
    .sidebar .nav-item,
    .sidebar .nav-disclosure > summary,
    .sidebar .account-action,
    .sidebar .account-menu > summary,
    .mobile-bottom-nav .nav-item,
    .app-shell :where(input:not([type="checkbox"]):not([type="radio"]), textarea, select) { min-height: var(--touch-target); }

    :where(
      #modal-root,
      #toast-root,
      .auth-page,
      .marketing-page
    ) :where(
      button,
      .button,
      .icon-button,
      [role="button"],
      input:not([type="checkbox"]):not([type="radio"]),
      textarea,
      select,
      summary
    ) { min-height: var(--touch-target); }

    #toast-root {
      top: max(10px, var(--safe-top));
      right: max(10px, var(--safe-right));
      width: calc(100vw - max(20px, var(--safe-left)) - max(20px, var(--safe-right)));
    }

    .modal-backdrop {
      align-items: end;
      padding: max(8px, var(--safe-top)) max(8px, var(--safe-right)) max(8px, var(--safe-bottom)) max(8px, var(--safe-left));
    }
    .modal-card {
      width: 100%;
      max-height: calc(var(--viewport-block) - max(8px, var(--safe-top)) - max(8px, var(--safe-bottom)));
      border-radius: var(--radius-overlay) var(--radius-overlay) 0 0;
    }
  }

  @media (max-width: 620px) {
    .form-grid, .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .grid > .metric-card + .metric-card { box-shadow: inset 0 1px 0 var(--divider); }
    .card { padding: 18px; }
    .section-title { margin-top: var(--space-6); align-items: flex-start; flex-direction: column; }
  }

  @media (max-height: 720px) {
    .modal-backdrop { align-items: end; }
    .modal-card {
      max-height: calc(var(--viewport-block) - var(--safe-top) - var(--safe-bottom));
      border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }
    .modal-card > header,
    .modal-card > footer { position: sticky; z-index: 4; background: var(--surface-solid); }
    .modal-card > header { top: 0; }
    .modal-card > footer { bottom: 0; }
  }

  @media (pointer: coarse) {
    .app-shell :where(
      .button,
      .icon-button,
      .command-trigger,
      .work-state-button,
      input:not([type="checkbox"]):not([type="radio"]),
      textarea,
      select,
      summary
    ),
    :where(
      #modal-root,
      #toast-root,
      .auth-page,
      .marketing-page
    ) :where(
      button,
      .button,
      .icon-button,
      [role="button"],
      input:not([type="checkbox"]):not([type="radio"]),
      textarea,
      select,
      summary
    ) { min-height: var(--touch-target); }
    :where(.window-controls button, .work-state-option) { min-width: var(--touch-target); min-height: var(--touch-target); }
  }
}