/* Bespoke pop-ups in the Attio look (user, 2026-10-30: "look for any other pop-ups that still need to be restyled").
   These keep their own markup + JS; under the Attio shell they take the same surface as .aiq-dlg / .aiq-menu in
   aiq-table-attio.css: r12, no border, --at-pop-bg + --at-dlg-sh (dialogs) or --at-pop-sh (floating cards),
   Inter 14/500 text, titles 14–16 at 500–600, buttons 28px r8 (secondary = --a-btn ring, primary = --a-blue).
   Left alone on purpose: the referral offer (already Attio's frosted frame), Help, hover cards. Attio radii: square_corners.py EXCLUDE.
   tests/test_attio_launch_review.py */

/* ── shared surfaces ───────────────────────────────────────────────────────────────────────────────────────────── */
html.at-shell :is(.upm-card, .afm-card, .gp-card, .aiq-ss-card, #stmt-chart-modal-inner):not(#_) {
  background: var(--at-pop-bg) !important; color: var(--a-ink); border: 0 !important; border-radius: 12px !important;
  box-shadow: var(--at-dlg-sh) !important; font: 500 14px/20px Inter, system-ui, sans-serif; letter-spacing: -0.07px;
}
html.at-shell :is(.aiq-tbar, .aqp-hint):not(#_) {
  background: var(--at-pop-bg) !important; color: var(--a-ink); border: 0 !important; border-radius: 12px !important;
  box-shadow: var(--at-pop-sh) !important; font-family: Inter, system-ui, sans-serif; letter-spacing: -0.07px;
}
/* ghost × on all of them */
html.at-shell :is(.upm-card, .afm-card, .gp-card, .aiq-ss-card, #stmt-chart-modal-inner, .aiq-tbar) :is(.aiq-x, .tb-x):not(#_) {
  width: 28px; height: 28px; border-radius: 8px; color: var(--a-mute);
}
html.at-shell :is(.upm-card, .afm-card, .gp-card, .aiq-ss-card, #stmt-chart-modal-inner, .aiq-tbar) :is(.aiq-x, .tb-x):not(#_):hover {
  background: var(--a-hover); color: var(--a-ink);
}
/* buttons: secondary + primary */
html.at-shell :is(.aiq-tr-btn, .gp-btn, .afm-ok, .aiq-ss-f .aiq-btn, .upm-row .aiq-btn):not(#_) {
  height: 28px; padding: 0 10px; border: 0 !important; border-radius: 8px !important; font: 500 14px/20px Inter, system-ui, sans-serif;
  letter-spacing: -0.07px; background: var(--at-pop-bg); color: var(--a-ink); box-shadow: var(--a-btn);
}
html.at-shell :is(.aiq-tr-btn, .gp-btn, .aiq-ss-f .aiq-btn, .upm-row .aiq-btn):not(#_):hover { background: var(--a-hover); }
html.at-shell :is(.aiq-tr-btn.pri, .gp-btn.w, .afm-ok, .aiq-ss-f .aiq-btn.pri, .upm-row .aiq-btn.pri):not(#_):not(#_) {
  background: var(--a-blue) !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
html.at-shell :is(.aiq-tr-btn.pri, .gp-btn.w, .afm-ok, .aiq-ss-f .aiq-btn.pri, .upm-row .aiq-btn.pri):not(#_):not(#_):hover { background: var(--a-blue-h) !important; }

/* ── Tour bar (_tour.html): floating card at the bottom ──────────────────────────────────────────────────────── */
html.at-shell .aiq-tbar h5:not(#_) { font: 600 14px/20px Inter, system-ui, sans-serif; letter-spacing: -0.07px; }
html.at-shell .aiq-tbar p:not(#_) { font: 500 14px/20px Inter, system-ui, sans-serif; color: var(--a-label, var(--a-mute)); }
html.at-shell .aiq-tbar .tb-ch > div:not(#_) { font: 500 12px/16px Inter, system-ui, sans-serif; color: var(--a-mute); }
html.at-shell .aiq-tbar .tb-ch > div.cur:not(#_) { color: var(--a-ink); }
html.at-shell .aiq-tbar .tb-ch i b:not(#_) { background: var(--a-blue); }
html.at-shell .aiq-tr-ring:not(#_) { border-color: var(--a-blue); border-radius: 8px; }
html.at-shell .aiq-tr-flag:not(#_) { background: var(--a-blue); font: 500 12px/16px Inter, system-ui, sans-serif; border-radius: 6px; padding: 3px 8px; }

/* ── Failed-request toast (base.html #aiq-toast): keeps its frosted glass (user, 2026-10-15, aiq-frost.css); Attio
   radius, type and button only ───────────────────────────────────────────────────────────────────────────────── */
html.at-shell #aiq-toast:not(#_) {
  border-radius: 12px; padding: 6px 6px 6px 14px; font: 500 14px/20px Inter, system-ui, sans-serif; letter-spacing: -0.07px;
}
html.at-shell #aiq-toast button:not(#_) {
  height: 28px; padding: 0 10px; border-radius: 8px; font: 500 14px/20px Inter, system-ui, sans-serif; background: var(--a-blue); color: #fff;
}
html.at-shell #aiq-toast button:not(#_):hover { background: var(--a-blue-h); }

/* ── "You're on Pro" (_upgraded.html): keeps its art band (promo card rule), Attio type + tiles ───────────────────── */
html.at-shell .upm-card:not(#_) { overflow: hidden; }
html.at-shell .upm-card h2:not(#_) { font: 600 16px/24px Inter, system-ui, sans-serif; letter-spacing: -0.1px; }
html.at-shell .upm-lede:not(#_), html.at-shell .upm-fine:not(#_) { font: 500 14px/20px Inter, system-ui, sans-serif; color: var(--a-label, var(--a-mute)); }
html.at-shell .upm-fine:not(#_) { font-size: 12px; line-height: 16px; }
html.at-shell .upm-kicker:not(#_) { font: 500 12px/16px Inter, system-ui, sans-serif; color: var(--a-mute); }
html.at-shell .upm-kicker b:not(#_) { border-radius: 6px; font-weight: 600; }
html.at-shell .upm-tile:not(#_) { background: transparent; border: 0; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--a-line); padding: 10px 12px; }
html.at-shell .upm-tile b:not(#_) { font: 500 16px/24px Inter, system-ui, sans-serif; }
html.at-shell .upm-tile span:not(#_) { font: 500 12px/16px Inter, system-ui, sans-serif; color: var(--a-mute); }

/* ── Affiliate "Thanks for applying" (_affiliate_applied.html) ──────────────────────────────────────────────────── */
html.at-shell .afm-card:not(#_) { padding: 16px; }
html.at-shell .afm-card h2:not(#_) { font: 600 16px/24px Inter, system-ui, sans-serif; letter-spacing: -0.1px; }
html.at-shell .afm-card p:not(#_) { font: 500 14px/20px Inter, system-ui, sans-serif; color: var(--a-label, var(--a-mute)); }

/* ── Gift claim (gifts/gift.html) ───────────────────────────────────────────────────────────────────────────── */
html.at-shell .gp-card:not(#_) { padding: 16px; }
html.at-shell .gp-card h2:not(#_) { font: 600 16px/24px Inter, system-ui, sans-serif; letter-spacing: -0.1px; }
html.at-shell .gp-card :is(.gp-lede, .gp-facts, .gp-count span):not(#_) { font-weight: 500; color: var(--a-label, var(--a-mute)); }
html.at-shell .gp-card .gp-lede:not(#_) { font-size: 14px; line-height: 20px; }
html.at-shell .gp-card .gp-brand:not(#_) { font-weight: 600; }
html.at-shell .gp-card .gp-eye:not(#_) { font: 500 12px/16px Inter, system-ui, sans-serif; }
html.at-shell .gp-card .gp-count b:not(#_) { font-weight: 600; }
html.at-shell .gp-card .gp-msg:not(#_) { border: 0; border-radius: 12px; background: var(--a-hover); box-shadow: inset 0 0 0 1px var(--a-line); }

/* ── Affiliates "Open in Substack" (static/js/aff-substack.js) ──────────────────────────────────────────────────── */
html.at-shell .aiq-ss-card:not(#_) { padding: 16px; }
html.at-shell .aiq-ss-ok:not(#_) { font: 600 16px/24px Inter, system-ui, sans-serif; letter-spacing: -0.1px; }
html.at-shell .aiq-ss-card :is(p, .aiq-ss-steps li):not(#_) { font: 500 14px/20px Inter, system-ui, sans-serif; }
html.at-shell .aiq-ss-card p:not(#_) { color: var(--a-label, var(--a-mute)); }
html.at-shell .aiq-ss-keys kbd:not(#_) { border: 0; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--a-line); font: 400 11px/20px Inter, system-ui, sans-serif; color: var(--a-mute); }
html.at-shell .aiq-ss-img:not(#_) { border: 0; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--a-line); }

/* ── Statements chart window (financials/_statements.html): Attio dialog header ─────────────────────────────────── */
html.at-shell #stmt-chart-modal-header:not(#_) { min-height: 44px; padding: 8px 12px 8px 16px; box-shadow: inset 0 -1px 0 var(--a-line); border: 0; }
html.at-shell #stmt-chart-modal-title:not(#_) { font: 500 14px/20px Inter, system-ui, sans-serif; letter-spacing: -0.07px; color: var(--a-ink); }

/* ── Chart page hint / toast (chart/aiq.html) ───────────────────────────────────────────────────────────────── */
html.at-shell .aqp-hint:not(#_) { font: 500 12px/16px Inter, system-ui, sans-serif; color: var(--a-label, var(--a-mute)); padding: 6px 10px; }
html.at-shell .aqp-toast:not(#_) { font-size: 14px; line-height: 20px; color: var(--a-ink); }

/* ── Upgrade pop-up (_upsell.html; user, 2026-10-30: "restyle the upgrade pop-up to Attio too, keeping the video
   panel"). The video / dunes panel stays as it is (corner radius only); the rest is an Attio dialog: r12 + halo,
   16/600 title, 14/500 grey text, the Free / Pro boxes as r12 hairline cards (Pro = Attio's selected-card blue ring),
   and a 44px footer row: the note left, a 28px blue button right. Class names agreed with the pricing session
   (it owns the template + the plan logic). Phones: the button goes full width under the note. ───────────────────── */
html.at-shell .up-card:not(#_) {
  max-width: 560px; background: var(--at-pop-bg) !important; color: var(--a-ink); border-radius: 12px !important;
  outline: 0 !important; box-shadow: var(--at-dlg-sh) !important; font: 500 14px/20px Inter, system-ui, sans-serif; letter-spacing: -0.07px;
}
html.at-shell .up-media:not(#_) { margin: 4px 4px 0; border-radius: 8px; }
html.at-shell .up-vids:not(#_) { border-radius: 6px; }
html.at-shell .up-body:not(#_) { padding: 16px 16px 0; }
html.at-shell .up-title:not(#_) { font: 600 16px/24px Inter, system-ui, sans-serif; letter-spacing: -0.1px; color: var(--a-ink); margin: 0 0 4px; }
html.at-shell .up-text:not(#_) { font: 500 14px/20px Inter, system-ui, sans-serif; color: var(--a-label, var(--a-mute)); min-height: 40px; }
html.at-shell .up-plans:not(#_) { gap: 8px; margin: 16px 0; }
html.at-shell .up-plan:not(#_) { border: 0; border-radius: 12px; padding: 10px 12px; box-shadow: inset 0 0 0 1px var(--a-line); background: transparent; }
html.at-shell .up-plan.have:not(#_) { background: var(--a-hover); box-shadow: none; }
html.at-shell button.up-plan:not(#_):hover { box-shadow: inset 0 0 0 1px var(--a-mute); }
html.at-shell .up-plan.on:not(#_), html.at-shell button.up-plan.on:not(#_):hover { box-shadow: inset 0 0 0 1.5px var(--a-blue); }   /* the picked plan (2026-11-03) */
html.at-shell .up-lab:not(#_) { font: 500 12px/16px Inter, system-ui, sans-serif; color: var(--a-mute); margin-bottom: 2px; }
html.at-shell .up-val:not(#_) { font: 500 14px/20px Inter, system-ui, sans-serif; color: var(--a-ink); }
html.at-shell .up-plan.have .up-val:not(#_) { color: var(--a-mute); font-weight: 500; }
html.at-shell .up-ic:not(#_) { font-size: 16px; }
html.at-shell .up-foot:not(#_) {
  flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px;
  margin: 0; padding: 8px 8px 8px 16px; box-shadow: inset 0 1px 0 var(--a-line);   /* was margin 0 -16px: past the card, clipped the button (2026-11-03) */
}
html.at-shell .up-note:not(#_) { order: -1; text-align: left; font: 500 13px/20px Inter, system-ui, sans-serif; color: var(--a-mute); }
html.at-shell .up-note:empty:not(#_) { display: block; }
html.at-shell .up-note a:not(#_) { color: var(--a-ink); }
html.at-shell .up-go:not(#_) {
  height: 28px; min-width: 0; padding: 0 10px; border-radius: 8px; font: 500 14px/20px Inter, system-ui, sans-serif; letter-spacing: -0.07px;
  background: var(--a-blue); box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); white-space: nowrap;
}
html.at-shell .up-go:not(#_):hover { background: var(--a-blue-h); }
@media (max-width: 767px) {
  html.at-shell .up-foot:not(#_) { flex-direction: column-reverse; align-items: stretch; gap: 8px; padding: 12px 16px 16px; }
  html.at-shell .up-note:not(#_) { text-align: center; }
  html.at-shell .up-go:not(#_) { height: 36px; }
}