/* ============================================================================
   MARKETING SHARED COMPONENTS — FROZEN COPY (marketing bundle)
   ----------------------------------------------------------------------------
   The only rules from the 21-file app core bundle that actually match marketing
   markup, transplanted verbatim and in their ORIGINAL relative order so the
   intra-layer cascade is unchanged:

     1. `turbo-frame`      layers/components/core.css
     2. `.btn` family      layers/components/buttons.css
     3. `.app-flash*`      layers/components/alerts.css

   MUST STAY `@layer components` — Bootstrap (/landing/css/styles.css) is
   UNLAYERED and loads last, so it already beats everything here for the
   properties it also sets. Unwrapping this file would let these rules start
   overriding Bootstrap's buttons and reboot.

   WHO RENDERS WHAT
     turbo-frame       /partners (`turbo_frame_tag "contact_form"`). An unknown
                       element defaults to `display: inline` — this rule is the
                       reason the application form lays out as a block.
     .btn family       /partners CTAs are `btn btn-primary btn-lg` etc. Bootstrap
                       wins on every property it sets; what survives from here is
                       `min-height` (36px / 44px coarse), `white-space: nowrap`,
                       the `:active` nudge and `.btn svg` sizing.
     .app-flash*       BOTH the layout flash stack on /privacy + /terms AND the
                       hand-rolled flash block in _home_qualification_form.
                       (`@keyframes flash-enter` lives in marketing/utilities.css.)
   REMOVED — `.confirm-dialog*` (layers/components/confirm_dialog.css). It was
   copied here in the first pass because application.html.erb emitted a hidden
   #app-confirm-dialog on /partners (pages#home was a STANDALONE page, not a
   `marketing_page?`, so the layout's `unless marketing_page?` block still ran).
   layouts/marketing.html.erb does NOT emit it, and no marketing view or partial
   under app/views/pages or the marketing layout partials renders
   #app-confirm-dialog, any `.confirm-dialog*` class, `data-turbo-confirm` or
   `data-confirm` — verified by grep. The rules matched nothing, so this is a
   dead-CSS deletion, not a behaviour change. (It is the CSS half of the one
   structural delta the pre-fork baseline found on /partners; the markup half was
   already dropped by the layout fork in step 2.)

   Deliberately NOT copied (never match marketing markup): forms.css
   (`.input`/`.label`/`.field` — marketing uses Bootstrap's `.form-control`),
   tables, badges, rail_chip, card, empty_state, primitives, settings/account,
   nav, app_shell, account_menu, responsive.
   ============================================================================ */
@layer components {
/* ---------- from components/core.css ---------- */
turbo-frame {
  display: block;
}

/* ---------- from components/buttons.css ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
  color: var(--foreground);
  box-sizing: border-box;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease,
    filter 150ms ease, transform 150ms ease;
}

.btn svg {
  width: 16px;
  height: 16px;
}

.btn:active:not(:disabled):not([disabled]) {
  transform: translateY(1px);
}

.btn:disabled,
.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  filter: none;
}

.btn:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.btn--primary,
.btn-primary {
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
}
.btn--primary:hover:not(:disabled),
.btn-primary:hover:not(:disabled) {
  filter: brightness(0.94);
}

.btn--secondary,
.btn-secondary {
  background: var(--secondary);
  color: var(--secondary-foreground);
  border-color: var(--border);
}
.btn--secondary:hover:not(:disabled),
.btn-secondary:hover:not(:disabled) {
  background: var(--accent);
  color: var(--accent-foreground);
}

.btn-block {
  width: 100%;
}

/* Touch targets (mobile Phase 4) — coarse pointers get a 44px floor. */
@media (pointer: coarse) {
  .btn {
    min-height: 44px;
  }
}

/* ---------- from components/alerts.css ---------- */
.app-verify-banner {
  border-bottom: 1px solid color-mix(in oklab, var(--warning) 42%, transparent);
  background: color-mix(in oklab, var(--warning) 16%, transparent);
  color: var(--warning);
  padding: 10px 16px;
  font-size: 13px;
}

.app-flash {
  margin: 0 0 12px 0;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  font-size: 13px;
  line-height: 1.45;
  background: var(--popover);
  color: var(--popover-foreground);
  box-shadow: var(--shadow-overlay, 0 10px 22px rgba(0, 0, 0, 0.28));
  animation: flash-enter 180ms ease-out;
}

.app-flash-stack {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 80;
  display: grid;
  gap: 10px;
  width: min(420px, calc(100vw - 32px));
  pointer-events: none;
}

.app-flash-stack .app-flash {
  margin: 0;
  pointer-events: auto;
}

.app-flash.is-dismissing {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.app-flash--notice {
  border-color: color-mix(in oklab, var(--info) 32%, var(--border));
  background: color-mix(in oklab, var(--info) 10%, var(--popover));
}

.app-flash--alert {
  border-color: color-mix(in oklab, var(--destructive) 32%, var(--border));
  background: color-mix(in oklab, var(--destructive) 10%, var(--popover));
}

.app-flash--success {
  border-color: color-mix(in oklab, var(--success) 32%, var(--border));
  background: color-mix(in oklab, var(--success) 10%, var(--popover));
}

.app-flash--warning {
  border-color: color-mix(in oklab, var(--warning) 32%, var(--border));
  background: color-mix(in oklab, var(--warning) 10%, var(--popover));
}

@media (max-width: 720px) {
  .app-flash-stack {
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
  }
}
}