/* =================================================================================================
   Retire.do Agents (agents module): /agents, "Talk to a Retire.do Agent in your city", "Report this
   Agent", the application /agents/apply, the /account card, the Agent Portal and the few admin
   details. Built on base.css tokens and components (and site.css on the public pages); logical
   properties only (css-logical gate). Agents are people: round photos. Large type, one coral
   button per screen, tap targets of at least 48 px.
   ================================================================================================= */

/* ---- /agents ---------------------------------------------------------------------------------- */
.agents-hero { padding-block: var(--space-xl) var(--space-l); }
.agents-art { position: relative; min-block-size: 16rem; }
.agents-art > span {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: var(--radius-l);
  background: var(--white);
  box-shadow: var(--shadow);
}
.agents-art .icon { inline-size: 3rem; block-size: 3rem; }
.agents-art-pin { inset-block-start: 1rem; inset-inline-start: 38%; inline-size: 6rem; block-size: 6rem; border-radius: 50% !important; background: var(--coral-tint) !important; }
.agents-art-card { inset-block-end: 1.5rem; inset-inline-start: 8%; inline-size: 9rem; block-size: 7rem; }
.agents-art-card-alt { inset-block-end: 3.5rem; inset-inline-start: auto; inset-inline-end: 6%; background: var(--foam) !important; }
.agents-points .card h3 { margin-block: var(--space-s) var(--space-2xs); }
.agents-earn-big { font: 800 var(--h2)/1.2 var(--display); color: var(--coral-ink); margin-block: var(--space-2xs); }
.agents-rules h3 { margin-block-start: 0; }
.agents-cities h3 { font-size: var(--h4); }
.agents-separate { margin-block: var(--space-l); }

/* ---- Talk to a Retire.do Agent ------------------------------------------------------------------- */
.talk-group { font-size: var(--h4); margin-block: var(--space-l) var(--space-s); }
.talk-places { list-style: none; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); }
.talk-places-compact { grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr)); margin-block-start: var(--space-s); }
.talk-place {
  display: grid;
  gap: 0.15rem;
  min-block-size: var(--tap);
  padding-block: 0.9rem;
  padding-inline: 1.1rem;
  border: 2px solid var(--sand-deep);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
}
.talk-place:hover, .talk-place:focus-visible { border-color: var(--lagoon-deep); background: var(--foam); }
.talk-place-name { font: 800 1.15rem/1.3 var(--display); }
.talk-place-province { color: var(--ink-soft); font-size: var(--text-s); }
.talk-more { margin-block: var(--space-m); }
.talk-more > summary { cursor: pointer; font: 800 1.05rem/1.4 var(--display); color: var(--lagoon-deep); min-block-size: var(--tap); padding-block: 0.6rem; }
.talk-own { margin-block-start: var(--space-l); }

.agent-cards { list-style: none; padding: 0; display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)); margin-block-start: var(--space-m); }
.agent-card { display: grid; gap: var(--space-s); align-content: start; }
.agent-card-head { display: flex; gap: var(--space-s); align-items: center; }
.agent-photo {
  flex: none;
  inline-size: 5.5rem;
  block-size: 5.5rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--foam);
}
.agent-initial { display: grid; place-items: center; font: 800 2rem/1 var(--display); color: var(--lagoon-deep); }
.agent-photo-large { inline-size: 10rem; block-size: 10rem; display: grid; place-items: center; overflow: hidden; }
.agent-photo-large img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.agent-photo-large .icon { inline-size: 3.5rem; block-size: 3.5rem; }
.agent-name { font-size: var(--h3); margin: 0; }
.agent-role { margin: 0; color: var(--coral-ink); font: 800 var(--text-s)/1.3 var(--display); }
.agent-languages { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; }
.agent-bio { margin: 0; }
.agent-contacts { list-style: none; padding: 0; display: grid; gap: 0.5rem; margin: 0; }
.agent-contact { display: inline-flex; gap: 0.5rem; align-items: center; min-block-size: var(--tap); }
.agent-contact .icon, .agent-contacts .button .icon { inline-size: 1.4rem; block-size: 1.4rem; }
.agent-report { margin: 0; font-size: var(--text-s); }

/* ---- Forms -------------------------------------------------------------------------------------- */
.agents-form { max-inline-size: 36rem; }
.agents-optional { font-weight: 400; color: var(--ink-soft); font-size: var(--text-s); }
/* The spam guard's honeypot: never seen, never focused, never read aloud. */
.agents-hp { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.agents-choose { display: grid; gap: 0.6rem; border: 0; padding: 0; }
.agents-thanks { display: grid; justify-items: center; gap: var(--space-s); }
.agents-actions { display: flex; flex-wrap: wrap; gap: var(--space-m); align-items: center; margin-block-start: var(--space-m); }
.agents-saved { display: flex; gap: 0.5rem; align-items: center; }
.agents-saved .icon { inline-size: 1.4rem; block-size: 1.4rem; }
.agents-same { margin-block-end: 1.25rem; }
.agents-group { font-size: var(--h4); margin-block: var(--space-m) var(--space-s); }
.agents-more { margin-block-start: var(--space-m); }
.agents-more > summary { cursor: pointer; font: 800 1.05rem/1.4 var(--display); color: var(--lagoon-deep); min-block-size: var(--tap); padding-block: 0.6rem; }
.agents-photo-row { display: flex; flex-wrap: wrap; gap: var(--space-m); align-items: center; }

/* ---- The application ----------------------------------------------------------------------------- */
.agents-apply { max-inline-size: var(--content-narrow); }
.agents-steps-top { display: grid; gap: 0.4rem; margin-block-end: var(--space-m); }
.agents-step-count { margin: 0; font-weight: 700; color: var(--ink-soft); }
.agents-checklist { list-style: none; padding: 0; display: grid; gap: 0.6rem; margin-block: var(--space-m); }
.agents-checklist li { display: flex; justify-content: space-between; gap: var(--space-s); align-items: center; padding-block: 0.8rem; padding-inline: 1rem; border: 2px solid var(--sand-deep); border-radius: var(--radius); background: var(--white); }
.agents-checklist li.is-done { border-color: var(--lagoon-line); }
.agents-checklist a { font: 800 1.1rem/1.3 var(--display); }
.agents-summary { display: grid; gap: 0.6rem; margin: 0; }
.agents-summary > div { display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr auto; gap: var(--space-s); padding-block: 0.6rem; border-block-end: 1px solid var(--sand-deep); }
.agents-summary dt { font: 800 1rem/1.4 var(--display); }
.agents-summary dd { margin: 0; }
.agents-text { white-space: pre-line; }
.agents-agreement { margin-block: var(--space-l); }
.agents-message { margin-block: var(--space-s); margin-inline: 0; padding-block: 0.8rem; padding-inline: 1rem; border-inline-start: 4px solid var(--lagoon); background: var(--white); border-radius: var(--radius-s); white-space: pre-line; }
@media (max-width: 40rem) {
  .agents-summary > div { grid-template-columns: 1fr; gap: 0.2rem; }
}

/* ---- The /account card --------------------------------------------------------------------------- */
.agents-card { display: grid; gap: var(--space-xs); align-content: start; }
.agents-card h2 { margin: 0; font-size: var(--h3); }
.agents-card p { margin: 0; }
.agents-card-icon { justify-self: start; }

/* ---- The Agent Portal ---------------------------------------------------------------------------- */
.portal { display: grid; gap: var(--space-m); padding-block: var(--space-l); grid-template-columns: minmax(0, 1fr); }
.portal-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-s); align-items: baseline; }
.portal-head p { margin: 0; }
.portal-who { font: 800 1.1rem/1.3 var(--display); }
.portal-nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.portal-nav a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap);
  padding-inline: 1rem;
  border: 2px solid var(--sand-deep);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--ink);
  font: 800 1rem/1.2 var(--display);
  text-decoration: none;
}
.portal-nav a[aria-current="page"] { border-color: var(--lagoon-deep); background: var(--foam); }
/* minmax(0, 1fr): a wide table scrolls inside its own wrap; the page never scrolls sideways on a phone. */
.portal-main { display: grid; gap: var(--space-m); grid-template-columns: minmax(0, 1fr); min-inline-size: 0; }
.portal-main h1 { margin-block-end: 0; }
.portal-stats { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-s); grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr)); }
.portal-stats .card { display: grid; gap: 0.2rem; }
.portal-stat { font: 800 var(--h2)/1.1 var(--display); color: var(--lagoon-deep); overflow-wrap: anywhere; }
.portal-block h2 { margin-block-start: 0; }
.portal-list { padding-inline-start: 1.2rem; display: grid; gap: 0.5rem; }
.portal-link { inline-size: 100%; max-inline-size: 36rem; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.95rem; }
.portal-table-wrap { overflow-x: auto; }
.portal-table { inline-size: 100%; border-collapse: collapse; }
.portal-table th, .portal-table td { text-align: start; vertical-align: top; padding-block: 0.7rem; padding-inline: 0.6rem; border-block-end: 1px solid var(--sand-deep); }
.portal-table thead th { font: 800 var(--text-s)/1.3 var(--display); color: var(--ink-soft); }
.portal-notes { padding-inline-start: 1.2rem; display: grid; gap: var(--space-s); }
.portal-notes p { margin: 0; }
.lead-status { display: inline-block; padding-block: 0.15rem; padding-inline: 0.7rem; border-radius: var(--radius-pill); background: var(--sand); font: 800 var(--text-s)/1.4 var(--display); }
.lead-status-new { background: var(--coral-tint); }
.lead-status-won { background: var(--ok-tint); color: var(--ok); }
.lead-status-lost { background: var(--danger-tint); color: var(--danger); }

.kit-referral { display: flex; flex-wrap: wrap; gap: var(--space-m); align-items: flex-start; }
.kit-qr { inline-size: 12rem; block-size: 12rem; border-radius: var(--radius-s); background: var(--white); padding: 0.5rem; }
.kit-plan { display: grid; gap: var(--space-s); margin-block-end: var(--space-m); }
.kit-plan h3 { margin: 0; }
.kit-prices { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.kit-prices li { display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; align-items: baseline; padding-block: 0.5rem; border-block-end: 1px solid var(--sand-deep); }
.kit-kind { font: 800 var(--text-s)/1.3 var(--display); color: var(--ink-soft); }
.kit-price { font-family: var(--display); }
.kit-hidden { background: var(--gold-tint); }
.kit-table > summary, .kit-faq > summary { cursor: pointer; min-block-size: var(--tap); padding-block: 0.6rem; font: 800 1rem/1.4 var(--display); color: var(--lagoon-deep); }
.kit-demo { list-style: none; padding: 0; display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr)); }
.kit-demo figure { margin: 0; }
.kit-demo img { inline-size: 100%; block-size: auto; border-radius: var(--radius); box-shadow: var(--shadow-s); }
.kit-faq p { margin-block: 0 var(--space-s); }

/* ---- Admin details (the admin shell loads admin.css; these screens add this file) ----------------- */
.agents-admin-photo { border-radius: 50%; object-fit: cover; }
.agents-admin-places { display: grid; gap: 0.4rem; grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr)); }