/* The sign-in / upgrade gate (_plan_gate.html: .pg-back > .pg-card) in the Attio dialog look, like every .aiq-dlg under
   the Attio shell (aiq-table-attio.css "dialogs"; attio-style skill §10). User, 2026-10-30: "that pop up needs to be
   restyled to Attio". The gate keeps its markup and JS; this file only re-lays it out:
     header 44px  — title 14/500 ink + ghost ×, hairline under (the "Free account" kicker and the ribbon art go)
     body         — the message 14/500 grey, padding 16
     footer 44px  — hairline over; "Not now" / "Already have one? Sign in" on the left, secondary + blue on the right
   Panel r12 + the shell's halo/hairline shadow (--at-dlg-sh), buttons 28px r8, the kit scrim stays (user, 2026-10-26).
   Attio radii: listed in scripts/square_corners.py EXCLUDE. tests/test_attio_launch_review.py */
html.at-shell .pg-card:not(#_) {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; max-width: 440px; padding: 0; overflow: visible;
  background: var(--at-pop-bg); border: 0; border-radius: 12px; box-shadow: var(--at-dlg-sh);
  color: var(--a-ink); font: 500 14px/20px Inter, system-ui, sans-serif; letter-spacing: -0.07px;
}
html.at-shell .pg-card .pg-art:not(#_):not(#_), html.at-shell .pg-card .pg-kicker:not(#_):not(#_) { display: none !important; }
html.at-shell .pg-card .pg-title:not(#_) {
  grid-column: 1 / -1; grid-row: 1; margin: 0; padding: 12px 48px 12px 16px; min-height: 44px; box-shadow: inset 0 -1px 0 var(--a-line);
  font: 500 14px/20px Inter, system-ui, sans-serif; letter-spacing: -0.07px; color: var(--a-ink);
}
html.at-shell .pg-card .aiq-x:not(#_) { top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 8px; color: var(--a-mute); }
html.at-shell .pg-card .aiq-x:not(#_):hover { background: var(--a-hover); color: var(--a-ink); }
html.at-shell .pg-card .pg-msg:not(#_) {
  grid-column: 1 / -1; grid-row: 2; margin: 0; padding: 16px; font: 500 14px/20px Inter, system-ui, sans-serif; color: var(--a-label, var(--a-mute));
}
/* footer: the side note left, the buttons right, one hairline over both */
html.at-shell .pg-card :is(.pg-sub, .pg-row):not(#_) { grid-row: 3; min-height: 44px; margin: 0; box-shadow: inset 0 1px 0 var(--a-line); }
html.at-shell .pg-card .pg-sub:not(#_) {
  grid-column: 1; display: flex; align-items: center; padding: 0 0 0 16px; text-align: left;
  font: 500 13px/20px Inter, system-ui, sans-serif; color: var(--a-mute);
}
html.at-shell .pg-card .pg-sub:empty:not(#_) { display: flex; }
html.at-shell .pg-card .pg-sub a:not(#_) { color: inherit; text-decoration: none; }
html.at-shell .pg-card .pg-sub a:not(#_):hover { color: var(--a-ink); text-decoration: underline; text-underline-offset: 2px; }
html.at-shell .pg-card .pg-row:not(#_) { grid-column: 2; align-items: center; gap: 8px; padding: 0 8px 0 12px; flex-wrap: nowrap; }
html.at-shell .pg-card .pg-btn:not(#_) {
  height: 28px; padding: 0 10px; border: 0; border-radius: 8px; font: 500 14px/20px Inter, system-ui, sans-serif; letter-spacing: -0.07px;
  white-space: nowrap;
}
html.at-shell .pg-card .pg-btn.ghost:not(#_) { background: var(--at-pop-bg); color: var(--a-ink); box-shadow: var(--a-btn); }
html.at-shell .pg-card .pg-btn.ghost:not(#_):hover { background: var(--a-hover); }
html.at-shell .pg-card .pg-btn.primary:not(#_) { background: var(--a-blue); color: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.06) inset; }
html.at-shell .pg-card .pg-btn.primary:not(#_):hover { background: var(--a-blue-h); }