/* Contourly — profile screen (page-like). Owned by Wave-2 Agent C.
   ONE responsive DOM (flat children so grid-areas can reorder): mobile stacks
   id → chips → history → optin → foot; desktop ≥1024 is 2-column (identity+stats
   left, history right). Foundation component styles (id, chips, matchrow, flagpick,
   check, input) live in app.css; this file is layout + the desktop reflow.
   Root = .ct-screen--page → app.js reveals the global footer + owl mascot. */

/* ---- mobile: single column ---------------------------------------------- */
.ct-profile__body { display: flex; flex-direction: column; min-height: 46vh; padding-bottom: 8px; }
.ct-profile__loading { flex: 1; min-height: 42vh; display: grid; place-items: center; }
.ct-profile__id-text { min-width: 0; }
.ct-profile__name { line-height: 1.05; }
.ct-profile__side { display: flex; flex-direction: column; }
.ct-profile__matches-empty { padding: 0 18px; color: var(--ct-text-4); font: 600 13px var(--ct-font); }
.ct-profile__optin { transform: rotate(-.3deg); }
.ct-profile__foot { margin-top: 24px; }

/* guest = centered single column (no history / stats grid) */
.ct-profile__body--guest { max-width: 560px; margin-inline: auto; width: 100%; }
.ct-profile__guest-cta { margin-top: 14px; }

/* ========================================================================= */
/* TABLET ≥768 — roomier column                                              */
/* ========================================================================= */
@media (min-width: 768px) {
  .ct-profile__body { max-width: 640px; margin-inline: auto; width: 100%; padding: 8px 20px 24px; }
  .ct-profile__id { padding: 12px 4px 0; }
  .ct-profile__chips { padding: 18px 4px 0; }
  .ct-profile__section-title { padding: 22px 4px 8px; }
  .ct-profile__matches { padding: 0; }
  .ct-profile__matches-empty { padding: 0; }
  .ct-profile__optin { margin: 18px 0 0; }
  .ct-profile__foot { padding: 20px 0 24px; align-items: flex-start; text-align: left; flex-direction: row; gap: 18px; }
}

/* ========================================================================= */
/* DESKTOP ≥1024 — 2-column: identity + stats left, history right            */
/* ========================================================================= */
@media (min-width: 1024px) {
  .ct-profile__body:not(.ct-profile__body--guest) {
    display: grid;
    grid-template-columns: minmax(300px, 380px) 1fr;
    grid-template-rows: auto auto auto auto 1fr;
    grid-template-areas:
      "id     side"
      "chips  side"
      "optin  side"
      "foot   side"
      ".      side";
    column-gap: 56px;
    align-items: start;
    max-width: 1080px;
    padding: 30px 34px 52px;
  }
  .ct-profile__body:not(.ct-profile__body--guest) > .ct-profile__id { grid-area: id; padding: 0; }
  .ct-profile__body:not(.ct-profile__body--guest) > .ct-profile__chips { grid-area: chips; padding: 22px 0 0; }
  .ct-profile__body:not(.ct-profile__body--guest) > .ct-profile__side { grid-area: side; }
  .ct-profile__body:not(.ct-profile__body--guest) > .ct-profile__optin { grid-area: optin; margin: 26px 0 0; }
  .ct-profile__body:not(.ct-profile__body--guest) > .ct-profile__foot { grid-area: foot; margin: 22px 0 0; }

  .ct-profile__name { font-size: 34px; }
  .ct-profile__side { background: var(--ct-cream); border: var(--ct-bw) solid var(--ct-ink); border-radius: var(--ct-r-panel); box-shadow: var(--ct-sh-6); padding: 6px 22px 20px; }
  .ct-profile__section-title { padding: 18px 4px 12px; font-size: 18px; }
  .ct-profile__matches { padding: 0; gap: 10px; max-height: 560px; overflow: hidden auto; }
  .ct-profile__matches-empty { padding: 8px 0; }

  /* guest stays a comfortable centered column */
  .ct-profile__body--guest { max-width: 560px; padding: 24px 24px 40px; }
}