/* ============================================================
   Shared migrated elements — the page root and the button.
   Structure in @layer layout, paint in @layer design. Content-named.
   ============================================================ */

@layer layout {
  /* The migrated-page root. Default is the centered, phone-width mobile column
     (participant portal, officer field flows, participant onboarding) — these
     are mobile-first by design and stay a narrow column even on a desktop
     browser. Desk roles opt into the full-width desktop content area via
     body.desk-portal below; without that, capping everything at 430px squished
     the DA/admin desktop views. Layout mode is set in app.js by role, kept
     separate from the citizen dark theme so onboarding (light) stays narrow. */
  .app-screen {
    display: grid;
    gap: var(--mea-space-6);
    align-content: start;
    width: 100%;
    max-width: var(--mea-app-max-w);
    margin-inline: auto;
    padding: var(--mea-space-4) var(--mea-gutter-mobile) var(--mea-space-12);
    container-type: inline-size;
  }
  /* Desk portals (everyone but participant + officer) fill the content area.
     .app-screen is a single-column grid; with the default implicit `auto`
     column it shrinks to content width, so lifting max-width alone left the
     content packed left with dead space on the right. minmax(0, 1fr) makes the
     column span the full content area (children — the deals table etc. — then
     stretch to it), while the 0 floor lets overflow-x:auto regions scroll
     instead of forcing the column wider than the viewport. */
  body.desk-portal .app-screen {
    max-width: none;
    margin-inline: 0;
    grid-template-columns: minmax(0, 1fr);
    padding: var(--mea-space-6) var(--mea-gutter-desktop) var(--mea-space-12);
  }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mea-space-2);
    min-height: var(--t-target-min, 44px);
    padding: var(--mea-space-3) var(--mea-space-6);
    border: 0;
    border-radius: var(--mea-radius-pill);
  }
  .btn--block { width: 100%; }
  .btn--sm { min-height: 36px; padding: var(--mea-space-2) var(--mea-space-4); }

  /* Shared selection action bar (ListController bulk actions). */
  .bulk-action-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--mea-space-2);
    padding: var(--mea-space-3) var(--mea-space-4);
    border-radius: var(--mea-radius-lg);
  }
  .bulk-action-bar__count { margin-inline-end: auto; }
}

@layer design {
  .app-screen { color: var(--t-text); }

  .btn { font-family: var(--mea-font-citizen); font-weight: var(--mea-w-bold);
          font-size: var(--mea-text-md); cursor: pointer;
          transition: background var(--mea-dur-fast), opacity var(--mea-dur-fast); }
  .btn:active { opacity: .9; }
  .btn:disabled { opacity: .5; cursor: default; }

  /* Primary CTA paints from the theme's CTA tokens: a solid royal fill on
     the staff console, a royal-blue gradient pill with glow on the citizen
     app (both design references; reconciliation 2026-06-09). Hover keeps the
     fill (no solid-swap over a gradient) and lifts brightness. */
  .btn--primary { background: var(--t-cta-bg); color: var(--t-cta-text);
                  box-shadow: var(--t-cta-shadow); }
  .btn--primary:hover { filter: brightness(1.06); }

  .btn--outline { background: transparent; color: var(--t-text);
                  border: 1.5px solid var(--t-border); box-shadow: none; }
  .btn--outline:hover { background: var(--t-bg-hover, var(--t-bg-active)); }

  .btn--secondary { background: var(--t-bg-active); color: var(--t-text); box-shadow: none; }
  .btn--secondary:hover { background: var(--t-bg-hover, var(--t-bg-active)); }

  .btn--ghost { background: transparent; color: var(--t-text-secondary); box-shadow: none; }
  .btn--ghost:hover { background: var(--t-bg-hover, var(--t-bg-active)); color: var(--t-text); }

  .btn--danger { background: var(--t-error); color: var(--t-accent-text); box-shadow: var(--mea-shadow-sm); }
  .btn--danger:hover { background: var(--t-error); opacity: .9; }

  .btn--disabled { opacity: .5; cursor: default; pointer-events: none; }
  .btn--active { background: var(--t-accent); color: var(--t-accent-text); }

  .btn--sm { font-size: var(--mea-text-base); }

  .bulk-action-bar { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
                     box-shadow: var(--mea-shadow-sm); }
  .bulk-action-bar__count { color: var(--t-text); font-size: var(--mea-text-sm);
                            font-weight: var(--mea-w-semibold); }
}