/* Ask the Lab — scoped under .atl. Tokens mirror the PETERMAYER design system.
   ══════════════════════════════════════════════════════════════════════════

   From the design handoff, unchanged except for the @font-face URLs: they are
   root-absolute here because this sheet is served from the Lab origin and
   embedded on hello.peteramayer.com, where a relative path would resolve
   against the HOST page and 404.

   Cross-origin @font-face is CORS-restricted even though the <link> to this
   sheet is not — see the /fonts/* header block in netlify.toml. Without it
   FK Screamer silently falls back to Arial Black and only the title looks
   wrong, which is the kind of failure nobody files a bug about. */
@font-face { font-family: "FK Screamer"; src: url("/fonts/FKScreamerLegacy-Upright.otf") format("opentype"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Neue Haas Grotesk Text Pro"; src: url("/fonts/NeueHaasGroteskText-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Neue Haas Grotesk Text Pro"; src: url("/fonts/NeueHaasGroteskText-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@keyframes atl-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }

.atl {
  --iron:#1e2620; --grey-3:#464943; --grey-2:#82837e; --cloud:#fefff3; --white:#ffffff;
  --brick:#f84a17; --joy:#e9f055; --grass:#27be78; --magnolia:#ffbaf0;
  --surface-sunken:#f2f3e6; --border-subtle:#e6e7da;
  --radius-md:8px; --radius-lg:14px; --shadow-lg:0 18px 48px rgba(30,38,32,.12);
  --font-display:"FK Screamer","Archivo Black","Arial Black",sans-serif;
  --font-sans:"Neue Haas Grotesk Text Pro","Helvetica Neue",Arial,sans-serif;
  --gutter:clamp(20px,5vw,72px);
  background:var(--iron); color:var(--cloud); font-family:var(--font-sans);
  padding:clamp(40px,5vw,64px) 0 clamp(44px,5vw,72px); box-sizing:border-box;
}
.atl *, .atl *::before, .atl *::after { box-sizing:border-box; }
.atl button { font-family:inherit; cursor:pointer; }

.atl-head { padding:0 var(--gutter); display:flex; flex-direction:column; gap:16px; }
/* align-self:flex-start because .atl-head is a full-width flex column: without
   it the badge would stretch to the gutter width and the circle would swell to
   fill the page. No colour treatment — the mark carries its own green ground
   and reads on Iron unaided, which is why it is the asset used rather than the
   black PETERMAYER wordmark that would vanish here. */
.atl-logo { align-self:flex-start; width:clamp(56px,12vw,72px); height:auto; display:block; }
.atl-title { font-family:var(--font-display); font-size:clamp(38px,8vw,56px); line-height:1; text-transform:uppercase; margin:0; font-weight:400; }
.atl-lede { margin:0; max-width:760px; font-size:clamp(17px,4.5vw,20px); line-height:1.5; opacity:.85; text-wrap:pretty; }

.atl-chips { display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:22px var(--gutter) 0; }
.atl-chips-label { flex:none; font-size:14px; opacity:.7; margin-right:4px; }
.atl-chip { flex:none; padding:8px 16px; border-radius:99px; border:1.5px solid var(--joy); background:transparent; color:var(--cloud); font-size:14px; font-weight:700; line-height:1.2; transition:background .16s, color .16s, transform .12s; }
.atl-chip:hover { filter:brightness(.92); }
.atl-chip:active { transform:scale(.96); }
.atl-chip[aria-pressed="true"] { background:var(--joy); color:var(--iron); }

.atl-grid { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.85fr); gap:clamp(24px,3vw,44px); align-items:start; padding:24px var(--gutter) 0; }
.atl-mapcol { display:flex; flex-direction:column; gap:14px; min-width:0; }
/* --jm-ar is set by joy-map.js fit() to match whichever viewBox is live; the
   fallback is the wide one, so the box is right before the first fit lands.
   Hard-coding 1200/520 here cropped the top and bottom rows of the narrow
   layout — see the note in fit(). */
.atl-map { position:relative; width:100%; aspect-ratio:var(--jm-ar, 1200/520); min-height:340px; }
.atl-map svg { position:absolute; inset:0; width:100%; height:100%; display:block; font-family:var(--font-sans); }
.atl-vignette { position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at 50% 50%, rgba(30,38,32,0) 58%, rgba(30,38,32,.5) 100%); }
.atl-status { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:14px; min-height:20px; }
.atl-status-dot { width:8px; height:8px; border-radius:99px; flex:none; background:var(--grey-2); }
.atl-status.is-live .atl-status-dot { animation:atl-pulse 1.1s ease-in-out infinite; }
.atl-status-text { font-weight:700; }

.atl-panel { background:var(--white); color:var(--iron); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); display:flex; flex-direction:column; min-width:0; }
.atl-panel-head { display:flex; align-items:center; gap:8px; padding:14px 20px; border-bottom:1px solid var(--border-subtle); font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.atl-live-dot { width:8px; height:8px; border-radius:99px; background:var(--grass); }
.atl-thread { padding:22px 20px; display:flex; flex-direction:column; gap:18px; min-height:300px; max-height:520px; overflow-y:auto; }

.atl-empty { display:flex; flex-direction:column; gap:10px; }
.atl-empty h3 { margin:0; font-size:22px; font-weight:700; line-height:1.25; }
.atl-empty p { margin:0; font-size:15px; line-height:1.55; color:var(--grey-3); }
.atl-starters { display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.atl-starter { text-align:left; padding:10px 14px; border:1.5px solid var(--iron); border-radius:12px; background:transparent; color:var(--iron); font-size:14px; font-weight:700; line-height:1.35; transition:background .16s, transform .12s; }
.atl-starter:hover { background:var(--joy); }
.atl-starter:active { transform:scale(.98); }

.atl-msg { display:flex; flex-direction:column; gap:8px; }
.atl-msg.is-user { align-items:flex-end; }
.atl-msg.is-lab { align-items:flex-start; }
.atl-who { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--grey-2); }
.atl-bubble { max-width:92%; padding:12px 16px; border-radius:14px; font-size:15px; line-height:1.5; text-wrap:pretty; }
.is-user .atl-bubble { background:var(--iron); color:var(--cloud); }
.is-lab .atl-bubble { background:var(--surface-sunken); color:var(--iron); }
.atl-sources { width:100%; display:flex; flex-direction:column; gap:8px; padding:12px 14px; border:1px solid var(--border-subtle); border-radius:12px; background:var(--surface-sunken); }
.atl-sources-h { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--grey-2); }
.atl-source { display:flex; gap:9px; align-items:baseline; font-size:14px; line-height:1.45; }
.atl-source-dot { width:9px; height:9px; border-radius:99px; flex:none; }
.atl-base { font-size:12px; line-height:1.5; color:var(--grey-3); }
.atl-note { font-size:12px; line-height:1.5; color:var(--grey-2); max-width:92%; }
.atl-followups { width:100%; display:flex; flex-direction:column; gap:8px; }
.atl-followups-h { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--grey-2); }
.atl-followup-row { display:flex; flex-wrap:wrap; gap:8px; }
.atl-followup { text-align:left; padding:8px 14px; border-radius:99px; border:1.5px solid var(--iron); background:transparent; color:var(--iron); font-size:13px; font-weight:700; line-height:1.3; transition:background .16s, transform .12s; }
.atl-followup:hover { background:var(--joy); }
.atl-followup:active { transform:scale(.96); }

.atl-form { display:flex; gap:10px; align-items:center; padding:14px 20px 16px; border-top:1px solid var(--border-subtle); }
.atl-input { flex:1; min-width:0; font-family:var(--font-sans); font-size:16px; color:var(--iron); background:var(--white); padding:12px 14px; border-radius:var(--radius-md); border:1.5px solid var(--border-subtle); outline:none; }
.atl-input:focus { border-color:var(--iron); box-shadow:0 0 0 3px rgba(30,154,96,.28); }
.atl-send { padding:11px 22px; min-height:44px; border:0; border-radius:99px; background:var(--brick); color:var(--white); font-size:15px; font-weight:700; transition:filter .16s, transform .12s; }
.atl-send:hover { filter:brightness(.92); }
.atl-send:active { transform:scale(.96); }
.atl-send:disabled { opacity:.5; cursor:default; }

@media (max-width:980px) { .atl-grid { grid-template-columns:minmax(0,1fr); } }
/* Chips wrap into rows beneath their label rather than scrolling sideways.
   The sideways scroller put four of the seven categories off-screen behind a
   gesture with no affordance — nothing cut off mid-chip to hint there was
   more — on the one control that is the main way into the page on a phone.
   flex-basis:100% on the label is what breaks the row; .atl-chips already
   wraps, so the nowrap override simply comes off.

   44px box while we are here: at their desktop padding the chips land around
   36, under the tap target everyone converges on. The starters and follow-ups
   are already over it. */
@media (max-width:720px) {
  .atl-chips-label { flex:0 0 100%; margin-right:0; }
  .atl-chip { min-height:44px; }
  .atl-map { min-height:0; }
}
@media (prefers-reduced-motion:reduce) { .atl-status.is-live .atl-status-dot { animation:none; } }