/* ============================================================
   GrantField · Account (editorial). Reuses explore.css tokens,
   header, glass, btn, and matcher.css form/card primitives. Adds
   the credit panel, credit packs, and the report list. No em dashes.
   ============================================================ */

/* containment backstop: keep stray overflow from forcing a horizontal scrollbar */
body { overflow-x: hidden; }

.ac-wrap { position: relative; z-index: 1; padding-bottom: 80px; }

/* card surface, matched to .mt-card */
.ac-card { border: 1px solid var(--hair); border-radius: 12px; background: var(--panel); padding: 22px; }
.ac-card-h { font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }

.ac-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px; margin-top: 28px; align-items: stretch; }

/* credits */
.ac-credits { display: flex; flex-direction: column; align-items: flex-start; }
.ac-credit-num { font-weight: 650; font-size: var(--gf-stat-num); line-height: 0.95; letter-spacing: -0.04em; color: var(--accent); font-variant-numeric: tabular-nums; }
.ac-credit-lbl { font-size: 14px; color: var(--ink-2); margin-top: 6px; }
.ac-credit-sub { font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; color: var(--ink-3); margin-top: 10px; letter-spacing: 0.03em; }

/* packs */
.ac-packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ac-pack { border: 1px solid var(--hair); border-radius: 10px; padding: 16px 14px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; }
.ac-pack.soon { opacity: 0.72; }
.ac-pack-credits { font-weight: 600; font-size: 26px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ac-pack-lbl { font-family: "Geist Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.ac-pack-price { font-size: 14px; color: var(--ink-2); margin: 5px 0 0; }
.ac-buybtn { width: 100%; justify-content: center; margin-top: 16px; }
.ac-soon { font-family: "Geist Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); border: 1px dashed var(--hair); border-radius: 6px; padding: 7px 0; width: 100%; text-align: center; }
.ac-fine { font-size: 12px; color: var(--ink-3); margin-top: 13px; }

/* reports */
.ac-rep { margin-top: 16px; }
/* Each selectable row is its OWN card: a white surface, hairline ring + soft
   shadow, rounded corners, and a real GAP between items (not a shared
   divider). Shared by all three lists (Reports, Watched, Saved) since they
   all render into .ac-replist / .ac-repitem. */
.ac-replist { display: flex; flex-direction: column; gap: 10px; }
.ac-repitem {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 15px 16px; color: var(--ink);
  background: var(--gf-white); border-radius: 13px;
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(10, 92, 66, 0.08), 0 6px 18px rgba(10, 42, 33, 0.06);
  transition: box-shadow .15s, transform .15s;
}
.ac-repitem svg { color: var(--ink-4); flex: none; }
.ac-repitem:hover svg { color: var(--accent); }
/* The row controls set inline border:0 to drop the UA button border; the card
   surface above already carries its own ring, so no border to restore. Keep the
   card look on the button-based rows (Saved/Reports render each row as a
   <button>) with a scoped !important against the inline reset. */
.ac-replist > .ac-repitem {
  border: 0 !important;
  background: var(--gf-white) !important;
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(10, 92, 66, 0.08), 0 6px 18px rgba(10, 42, 33, 0.06) !important;
}
/* Hover: the card lifts on a deeper shadow + a hair of translate, and the ring
   warms to the accent. Kept white (the !important beats gf-bridge's legacy
   grey-tint hover, which loads later) so the surface reads as one clean card,
   not a shaded row. */
.ac-repitem:hover, .ac-replist > .ac-repitem:hover {
  background: var(--gf-white) !important;
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(16, 163, 116, 0.30), 0 12px 28px rgba(10, 42, 33, 0.10) !important;
  transform: translateY(-1px);
}
.ac-reptitle { font-weight: 500; font-size: 15px; letter-spacing: -0.01em; }
.ac-repmeta { font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; color: var(--ink-3); margin-top: 3px; }

/* signed-out auth card */
.ac-signin { max-width: 520px; margin-top: 28px; }
.ac-signin h2 { font-weight: 600; font-size: 22px; letter-spacing: -0.02em; margin: 0; }
.ac-help { font-size: 13px; color: var(--ink-3); margin-top: 16px; line-height: 1.45; }

/* ============================================================
   Split-screen signup (signed-out). LEFT is a high-fidelity, "ray-traced"
   deep-green brand swatch; RIGHT is the reused auth form on clean white. One
   rounded frame holds both halves; collapses to the form alone at <= 860px.
   ============================================================ */
.ac-auth-wrap { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 40px 24px 90px; }
.ac-auth-split {
  display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch;
  border-radius: 24px; overflow: hidden;
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(10, 92, 66, 0.08), 0 30px 80px rgba(10, 42, 33, 0.16);
}

/* LEFT: the Pantone-swatch brand panel. A smooth 3D "lit" look built purely
   from layered radial-gradients over a deep-green base: a bright #34C393 light
   from the top-left, a deep #073821 pooling bottom-right, and #0F7B57 mid
   accents, all over linear-gradient(150deg,#0A5C42,#052A1E). Stark, saturated,
   bold, with high contrast against the white right half. CSP-safe: no images. */
.ac-brand-panel {
  position: relative; overflow: hidden; color: #EAF7F0;
  padding: 60px clamp(36px, 4.5vw, 72px);
  /* No logo: the messaging anchors to the bottom-left of the color field (a
     Pantone-card composition) so the lit green surface reads as the hero. */
  display: flex; align-items: flex-end;
  background:
    radial-gradient(680px 520px at 14% 8%, rgba(52, 195, 147, 0.62), transparent 58%),
    radial-gradient(560px 520px at 6% 30%, rgba(105, 224, 178, 0.30), transparent 52%),
    radial-gradient(720px 640px at 92% 96%, rgba(7, 56, 33, 0.85), transparent 60%),
    radial-gradient(520px 460px at 78% 62%, rgba(15, 123, 87, 0.55), transparent 58%),
    linear-gradient(150deg, #0A5C42, #052A1E);
}
/* Specular sheen: a soft top gloss + a fine grain, so the swatch reads as a
   rendered, lit surface rather than a flat fill. Both are faint and sit above
   the gradient stack but below the content (.ac-brand-inner is z-indexed). */
.ac-brand-panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(420px 220px at 20% -6%, rgba(255, 255, 255, 0.34), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 26%);
}
.ac-brand-panel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0.06;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.9) 0.5px, transparent 0.5px),
    radial-gradient(rgba(0, 0, 0, 0.9) 0.5px, transparent 0.5px);
  background-size: 3px 3px, 4px 4px; background-position: 0 0, 1px 1px;
}
.ac-brand-inner { position: relative; z-index: 2; max-width: 32ch; }
.ac-brand-eyebrow { display: block; font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: rgba(234, 247, 240, 0.72); }
.ac-brand-h { font-weight: 650; letter-spacing: -0.03em; line-height: 1.03;
  font-size: clamp(30px, 3.3vw, 46px); margin: 16px 0 0; color: #fff;
  text-shadow: 0 2px 20px rgba(4, 38, 27, 0.4); }
.ac-brand-vp { display: flex; flex-direction: column; gap: 13px; margin-top: 26px; }
.ac-brand-vp .row { display: flex; gap: 12px; align-items: flex-start;
  font-size: 14.5px; line-height: 1.45; color: rgba(234, 247, 240, 0.94); }
.ac-brand-vp .tick { flex: none; width: 20px; height: 20px; border-radius: 7px; margin-top: 1px;
  display: grid; place-items: center; font-size: 11px; color: #fff;
  background: rgba(255, 255, 255, 0.18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); }

/* RIGHT: the auth form on clean white. The reused panels render their own
   .ac-card.ac-signin; here we strip that inner card chrome so the whole right
   half is the single white surface, with the form and tabs laid directly on it. */
.ac-auth-form-col {
  background: var(--gf-white); padding: clamp(30px, 4vw, 54px) clamp(26px, 3.5vw, 48px);
  display: flex; flex-direction: column; justify-content: center;
}
.ac-auth-form-col .ac-tabs { margin-bottom: 22px; }
.ac-auth-form-col .ac-signin {
  max-width: none; margin-top: 0;
  background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important;
}

@media (max-width: 860px) {
  .ac-auth-split { grid-template-columns: 1fr; }
  .ac-brand-panel { display: none; }
  .ac-auth-form-col { padding: 30px clamp(22px, 5vw, 34px) 38px; }
}

/* Signed-out Sign-in / Create-account switch: a glass-pill segmented row in
   the B1 vocabulary (the rail + home use pills, not underline tabs). The
   active pill's frosted surface comes from gf-bridge.css (.ac-tab.active);
   here we lay out the row and give the resting tabs a soft-caps look. The
   old underline (::after) and the .ac-tabs divider are gone so the pill is
   the only active signal, matching .gf-rail a.on. */
.ac-tabs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 22px; border-radius: 13px;
  background: rgba(255, 255, 255, 0.5); box-shadow: inset 0 1px 1px var(--glass-hi), inset 0 -2px 6px rgba(10, 92, 66, 0.06); }
.ac-tab { font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); background: none; border: 0; padding: 9px 16px; cursor: pointer; position: relative; border-radius: 10px; transition: color .14s; }
.ac-tab:hover { color: var(--ink); }
.ac-tab.active { color: var(--gf-deep); }

.ac-or { display: flex; align-items: center; gap: 12px; margin: 18px 0; font-family: "Geist Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-4); }
.ac-or::before, .ac-or::after { content: ""; flex: 1; height: 1px; background: var(--hair); }

.ac-link { background: none; border: 0; color: var(--accent); cursor: pointer; padding: 0; font-size: inherit; font-family: inherit; text-decoration: none; }
.ac-link:hover { text-decoration: underline; }

/* signed-in security card: name + passkeys + recovery codes */
.ac-sec { margin-top: 16px; }
.ac-sec-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--hair); }
.ac-sec-row:first-child { border-top: 0; padding-top: 0; }
.ac-sec-label { font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.ac-sec-val { font-size: 14px; color: var(--ink); }

/* Red-team batch 9: vertical name block with full-width input + always-
   visible save button. Replaces the cramped ac-sec-row layout that put
   the label on the left and the input + intermittent save button on the
   right, which collapsed awkwardly at narrow widths. */
.ac-sec-block { padding: 14px 0; border-top: 1px solid var(--hair); }
.ac-sec-block:first-child { border-top: 0; padding-top: 0; }
.ac-sec-block .ac-sec-label { display: block; margin-bottom: 8px; }
.ac-sec-block .ac-sec-val { padding-top: 2px; }
.ac-sec-input-row { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.ac-sec-input-row .mt-input { flex: 1 1 240px; min-width: 0; }
.ac-sec-input-row .btn { flex: 0 0 auto; }

.ac-passkeys { margin-top: 12px; }
.ac-pk { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0; border-top: 1px solid var(--hair); }
.ac-pk:first-child { border-top: 0; }
.ac-pk-name { font-weight: 500; font-size: 15px; }
.ac-pk-meta { font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; color: var(--ink-3); margin-top: 3px; }
.ac-pk-actions { display: flex; gap: 8px; flex: none; }
.ac-pk-btn { font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; background: none; border: 1px solid var(--hair); border-radius: 6px; padding: 6px 10px; color: var(--ink-2); cursor: pointer; }
.ac-pk-btn:hover { color: var(--ink); border-color: var(--ink-3); }
.ac-pk-btn.danger:hover { color: #C0353A; border-color: #C0353A; }
.ac-pk-empty { font-size: 13px; color: var(--ink-3); padding: 12px 0; }

/* recovery codes display (one-time) */
.ac-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 16px 0; }
.ac-code { font-family: "Geist Mono", ui-monospace, monospace; font-size: 15px; letter-spacing: 0.04em; background: var(--paper-2); border: 1px solid var(--hair); border-radius: 6px; padding: 12px 14px; text-align: center; user-select: all; }
.ac-warning { background: rgba(192, 53, 58, 0.06); border: 1px solid rgba(192, 53, 58, 0.25); border-radius: 8px; padding: 14px 16px; margin: 14px 0; font-size: 13px; line-height: 1.45; color: var(--ink); }

/* enrollment nudge banner for accounts with no passkey yet */
.ac-nudge { background: var(--panel); border: 1px solid var(--accent); border-radius: 12px; padding: 18px 22px; margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.ac-nudge-text { flex: 1; min-width: 200px; }
.ac-nudge-h { font-weight: 600; font-size: 16px; }
.ac-nudge-p { font-size: 13px; color: var(--ink-2); margin-top: 4px; }

/* in-button loading indicator: a status word ("Generating", "Saving") followed
   by three CSS-animated dots that bounce sequentially. Keeping the word
   alongside the dots stops the button from collapsing to a tiny pill when its
   text is replaced -- 3 dots alone are much narrower than the original button
   label, so the button would look like it disappeared. Dots inherit the
   button's text color via currentColor, legible on solid and outline alike. */
.ac-btn-busy { display: inline-flex; gap: 8px; align-items: center; }
.ac-dots { display: inline-flex; gap: 5px; align-items: center; vertical-align: middle; height: 1em; }
.ac-dots > span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.4; animation: ac-dot-bounce 1.2s infinite ease-in-out; }
.ac-dots > span:nth-child(2) { animation-delay: 0.15s; }
.ac-dots > span:nth-child(3) { animation-delay: 0.3s; }
@keyframes ac-dot-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%          { transform: translateY(-3px); opacity: 1; }
}

@media (max-width: 820px) { .ac-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .ac-packs { grid-template-columns: 1fr; } }

/* Reduce motion (Settings pref; gf-api sets data-reduce-motion on <html> on every page). */
html[data-reduce-motion="true"] *, html[data-reduce-motion="true"] *::before, html[data-reduce-motion="true"] *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }

/* Print / save-as-PDF: ReportsPanel portals .ac-print to <body>. On screen it
   is hidden; under print media it is the ONLY visible subtree, so the browser's
   Save as PDF becomes the report export. Colors print at full strength. */
.ac-print { display: none; }
@media print {
  body > #root { display: none !important; }
  .ac-print { display: block; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ac-print .pr-match { break-inside: avoid-page; }
  @page { margin: 16mm 14mm; }
}