/* =====================================================================
   pg-admin2.css: extras for admin-access.html and admin-approved.html on tpl.css.
   Loads after tpl.css and section-footer.css. Namespaced .aa-*.
   Kept hooks (the page script depends on them): .tile, .is-hidden, ids toolGrid / quizHint / emailAdminBtn / copyEmailBtn.
   ===================================================================== */

/* One folded card on the mint ground; the footer's curve slides over the bottom (like the other hero-only pages). */
.aa-hero { padding: 124px var(--tp-gutter) calc(72px + var(--tp-curve)); min-height: 70vh; }
.aa-hero { z-index: 2; border-radius: 0 0 var(--tp-curve) var(--tp-curve); }   /* mint curves down into the blue footer */
.aa-in { max-width: 760px; margin: 0 auto; }

.aa-topbar { margin: 0 0 18px; text-align: left; }
.aa-back {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 2px;
  font-size: 15px; font-weight: 500; color: var(--tp-muted);
  transition: color .15s ease;
}
.aa-back:hover { color: var(--tp-ink); }
.aa-back:focus-visible, .aa-copy:focus-visible, .aa-tile:focus-visible, .aa-link:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

.aa-card { background: #fff; text-align: center; padding: 56px 56px 52px; }
.aa-card .tp-pill { margin-bottom: 24px; }
.aa-h1 {
  margin: 0 auto 16px; max-width: 560px;
  font-weight: 700; font-size: clamp(30px, 3.4vw, 42px); line-height: 1.08; letter-spacing: -0.03em;
  color: var(--tp-ink); text-wrap: balance;
}
.aa-sub { margin: 0 auto 14px; max-width: 52ch; font-size: 17px; line-height: 1.5; color: var(--tp-muted); text-wrap: pretty; }
.aa-nudge { font-weight: 600; color: var(--tp-ink); }
.aa-link { font-size: 16px; font-weight: 500; }
.aa-icon { margin: 0 0 20px; }
.aa-icon svg { display: block; margin: 0 auto; }
.aa-center .aa-sub:last-child, .aa-center section > .aa-link { margin-top: 8px; display: inline-block; }

/* Platform tiles: white rounded options, blue ring when ticked */
.aa-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 32px 0 32px; }
.aa-tile {
  display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 16px 18px;
  background: #fff; border: 1.5px solid var(--tp-line); border-radius: 16px;
  font: 500 16px/1.25 'Outfit', sans-serif; color: var(--tp-ink); text-align: left; cursor: pointer;
  transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.aa-tile:hover { border-color: #b9d3c6; background: var(--tp-soft); }
.aa-tile[aria-checked="true"] { border-color: var(--blue); background: #E6F1FC; box-shadow: 0 0 0 1px var(--blue) inset; }
.aa-tile-icon { width: 30px; height: 30px; flex: none; display: flex; align-items: center; justify-content: center; }
.aa-tile-icon svg { width: 100%; height: 100%; display: block; }
.aa-tile-check {
  margin-left: auto; flex: none; width: 22px; height: 22px; border-radius: 7px;
  border: 1.5px solid #b9d3c6; background: #fff; color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s ease, border-color .12s ease;
}
.aa-tile[aria-checked="true"] .aa-tile-check { background: var(--blue); border-color: var(--blue); }
.aa-tile-check svg { width: 13px; height: 13px; opacity: 0; transition: opacity .1s ease; }
.aa-tile[aria-checked="true"] .aa-tile-check svg { opacity: 1; }

/* Actions: hint left, primary right (same arrangement as the current page) */
.aa-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; text-align: left; }
.aa-hint { font-size: 15px; line-height: 1.4; color: var(--tp-faint); }
.aa-primary:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
.aa-primary:disabled:hover { background: var(--blue); }
.aa-primary:disabled:active { transform: none; }
.aa-primary:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.aa-copy {
  display: inline-block; margin-top: 18px; padding: 8px 4px; background: none; border: 0; cursor: pointer;
  font: 500 15.5px 'Outfit', sans-serif; color: var(--blue);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.aa-copy:hover { color: #005ec4; text-decoration-thickness: 2px; }
.aa-copy.is-hidden { display: none; }

@media (max-width: 1023px) {
  .aa-hero { padding-top: 112px; }
}
@media (max-width: 700px) {
  .aa-hero { padding: 96px var(--tp-gutter) calc(48px + var(--tp-curve)); min-height: 0; }
  .aa-card { padding: 52px 20px 36px; }
  .aa-card .tp-pill { margin-bottom: 20px; }
  .aa-grid { grid-template-columns: minmax(0, 1fr); margin: 24px 0; }
  .aa-actions { flex-direction: column-reverse; align-items: stretch; text-align: center; gap: 12px; }
  .aa-primary { width: 100%; justify-content: center; }
  .aa-sub { font-size: 16px; }
}