/* The Agent Showcase (/agents/). Loads after Agent Big Head's big-head.css, which supplies the night sky, fonts, header,
   footer, eyebrows, headings, bands, buttons, asides and the FAQ. This file holds only the showcase's own pieces,
   all prefixed a-. Nothing moves on its own; the only motion is the small lift on hover. */

/* Hero and its star chart */
.a-hero h1{font-size:clamp(2.8rem,5.4vw,5.2rem)}
.a-hero h1 em{color:var(--eyebrow-rule)}
.a-hero-inner{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px 56px;align-items:center}
.a-hero-copy{min-width:0}
.a-hero .hero-intro{margin-bottom:30px}
.a-byline{display:flex;align-items:center;gap:12px;margin:26px 0 0;color:var(--text-muted);font-size:.86rem;line-height:1.45}
.a-byline img{flex:none;width:40px;height:40px;border-radius:50%}

/* The chart is the page's at-a-glance: each group of stars is one way in, with a label that says what it takes */
.a-chart{position:relative;width:100%;max-width:560px;aspect-ratio:1/1;margin:0 auto 48px}
.a-chart svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.a-chart path{fill:none;stroke-width:1.3;vector-effect:non-scaling-stroke}
.a-zone,.a-zone-stars{display:contents}
.a-zone-stars{list-style:none}
.a-zone-label{position:absolute;display:flex;flex-direction:column;gap:5px;padding-top:12px;border-top:2px solid var(--accent);color:var(--text-muted);font-size:.8rem;line-height:1.4;text-decoration:none}
.a-zone-label strong{color:var(--accent);font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.a-zone-label:hover span{color:var(--ivory)}
.a-star{position:absolute;transform:translate(-50%,-50%);width:clamp(72px,18%,108px)}
.a-star a{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--ivory);text-decoration:none;text-align:center}
.a-disc{width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--paper);border:2px solid var(--accent);box-shadow:0 0 0 7px var(--accent-wash),0 16px 26px -12px #000c;transition:transform .2s}
.a-disc img{width:100%;height:100%;object-fit:cover}
.a-star a:hover .a-disc{transform:translateY(-3px)}
.a-star-name{font-size:.8rem;font-weight:800;line-height:1.15}
.a-later .a-disc{border-style:dashed}

/* Door heads */
.a-door-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:24px 56px;align-items:end;margin-bottom:44px}
.a-door-head h2{margin-bottom:20px}
.a-facts{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin:0;padding:0;list-style:none}
.a-facts li{padding:6px 12px;border:1px solid #fff6dd33;border-radius:8px;background:#ffffff0c;color:var(--ivory);font-size:.8rem;font-weight:700}

/* Agent cards */
.a-cards{display:grid;gap:28px}
.a-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.a-three{grid-template-columns:repeat(3,minmax(0,1fr))}
.a-agent{display:flex;flex-direction:column;min-width:0;padding:26px;border-radius:22px;background-color:var(--paper);background-image:var(--grain);background-blend-mode:multiply;color:var(--ink);border:1px solid #ece9df;box-shadow:0 6px 0 var(--accent-edge),0 24px 42px -24px #000c}
.a-agent-top{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.a-agent-top img{flex:none;width:76px;height:76px;border-radius:50%;object-fit:cover;border:2px solid var(--accent-edge);background:#fff}
.a-agent-top img.a-crop-top{object-position:50% 18%}
.a-agent h3{margin:0 0 4px;color:var(--ink);font-family:var(--serif);font-size:1.65rem;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.a-role{margin:0;color:var(--accent-ink);font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.a-agent > p{margin-bottom:18px;color:var(--ink-soft);font-size:.98rem}
.a-agent dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px 16px;margin:0 0 22px;padding:16px 0 0;border-top:1px solid #e6e2d6;font-size:.88rem}
.a-agent dt{color:var(--ink);font-weight:800}
.a-agent dd{margin:0;color:var(--ink-soft);line-height:1.5}
.a-agent code{padding:1px 6px;border-radius:5px;background:var(--accent-soft);color:var(--ink)}
.a-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:auto}
.a-actions .button{gap:22px;min-height:48px;padding:12px 18px}
.a-three .a-actions{gap:12px}
.a-three .a-actions .button{gap:12px;padding-inline:14px}
/* Chat in HYP Yoga: an app badge beside the Meet button, linking to the iPhone beta request */
.a-app-badge{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:7px 14px 7px 7px;border-radius:11px;background:var(--ink);color:var(--paper);font-size:.82rem;font-weight:750;line-height:1.2;text-decoration:none;box-shadow:0 6px 0 var(--accent-edge);transition:transform .15s ease,box-shadow .15s ease}
.a-app-badge img{flex:none;width:32px;height:32px;border-radius:8px}
.a-app-badge:hover{transform:translateY(-3px);box-shadow:0 9px 0 var(--accent-edge)}
.a-app-badge:active{transform:translateY(4px);box-shadow:0 2px 0 var(--accent-edge)}
.a-app-badge:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.a-link{color:var(--ink);font-size:.86rem;font-weight:750;text-decoration:underline;text-decoration-color:var(--accent-edge);text-underline-offset:4px}

/* GeniusHQ keeps their own Frost · Ice look: pale ice, ink #0f1d4d, pale gold rounded-rectangle buttons */
.a-ice{background:linear-gradient(160deg,#f7fafe,#eef4fb);color:#0f1d4d;border-color:#d7e2f0;box-shadow:0 6px 0 #9fb3d1,0 24px 42px -24px #000c}
.a-ice .a-agent-top img{border-color:#9fb3d1;border-radius:14px}
.a-ice h3,.a-ice dt{color:#0f1d4d}
.a-ice .a-role{color:#3a5288}
.a-ice dl{border-top-color:#d3deec}
.a-ice code{background:#e1e9f4;color:#0f1d4d}
.a-ice .button{background:#e8cf8a;border-color:#0f1d4d;color:#0f1d4d;border-radius:8px;box-shadow:0 6px 0 #b59a52}
.a-ice .button:hover{box-shadow:0 9px 0 #b59a52}
.a-ice .a-link{color:#0f1d4d;text-decoration-color:#9fb3d1}

/* Setup: a real sequence, so it's numbered */
.a-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:56px 0 0;padding:0;list-style:none;counter-reset:a-step}
.a-steps li{position:relative;min-width:0;padding:22px 22px 22px 70px;border:1px solid var(--rule);border-radius:16px;background:#ffffff0a;counter-increment:a-step}
.a-steps li::before{content:counter(a-step);position:absolute;left:20px;top:20px;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--accent);color:var(--accent);font-family:var(--serif);font-size:1.15rem;font-weight:600}
.a-steps strong{display:block;margin-bottom:4px;color:var(--ivory)}
.a-steps p{margin:0;color:var(--text-muted);font-size:.9rem}
.a-steps code{padding:2px 6px;border-radius:5px;background:#ffffff14;font-size:.8rem;white-space:normal;overflow-wrap:anywhere}
.a-note{max-width:760px;margin:26px 0 0;color:var(--text-muted);font-size:.92rem}
.a-note strong{color:var(--ivory)}
.a-note a{color:var(--ivory);font-weight:700;text-decoration-color:var(--link-rule);text-underline-offset:4px}
.a-aside{margin-top:40px}
.a-aside a{color:var(--ink);font-weight:700;text-decoration-color:var(--accent-edge);text-underline-offset:3px}

/* Prof. Phil: not open yet */
.a-later-card{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);overflow:hidden;border:1px dashed #e7bd8288;border-radius:24px;background:#ffffff08}
.a-later-card figure{margin:0}
.a-later-card figure img{width:100%;height:100%;aspect-ratio:1;object-fit:cover}
.a-later-body{min-width:0;padding:34px 36px}
.a-later-body h2{margin:0 0 8px;font-size:clamp(2rem,3vw,2.6rem)}
.a-later-body .a-role{margin-bottom:18px;color:var(--eyebrow-rule)}
.a-later-body p:not(.a-role){max-width:560px;color:var(--text-muted)}
.a-later-body dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px 18px;max-width:600px;margin:4px 0 20px;padding:16px 0;border-block:1px solid var(--rule);font-size:.9rem}
.a-later-body dt{color:var(--ivory);font-weight:800}
.a-later-body dd{margin:0;color:var(--text-muted);line-height:1.5}
.a-status{display:inline-flex;margin-top:6px;padding:8px 14px;border:1px dashed var(--eyebrow-rule);border-radius:8px;color:var(--eyebrow-rule);font-size:.82rem;font-weight:800;letter-spacing:.04em}

/* Talk here: the chat with the agents (talk.js). A rail of agents beside a paper conversation panel. */
.a-hero-cta{margin-top:4px}
.a-talk{display:grid;grid-template-columns:minmax(0,250px) minmax(0,1fr);gap:22px;align-items:start}
.a-talk-rail{display:flex;flex-direction:column;gap:26px}
.a-talk-group{display:flex;flex-direction:column;gap:10px;min-width:0}
.a-talk-group-title{margin:0;color:var(--eyebrow);font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.a-talk-picks{display:flex;flex-direction:column;gap:8px}
.a-talk-group-links{display:flex;flex-direction:column;gap:6px;margin:2px 0 0;font-size:.8rem;line-height:1.35}
.a-talk-group-links > span{color:var(--text-muted)}
.a-talk-group-links a{color:var(--ivory);font-weight:750;text-decoration:underline;text-decoration-color:var(--link-rule);text-underline-offset:4px}
.a-talk-group-links a:hover{text-decoration-color:var(--ivory)}
.a-talk-hyp-app{display:flex;align-items:center;gap:12px;margin-top:2px;padding:9px 12px 9px 9px;border:1px solid #91b89566;border-radius:14px;background:#91b8951a;color:var(--ivory);text-decoration:none;transition:background .15s,border-color .15s}
.a-talk-hyp-app img{flex:none;width:44px;height:44px;border-radius:10px}
.a-talk-hyp-app span{display:flex;flex-direction:column;line-height:1.25}
.a-talk-hyp-app strong{font-size:.9rem}
.a-talk-hyp-app small{color:var(--text-muted);font-size:.76rem}
.a-talk-hyp-app:hover{background:#91b89533;border-color:#91b895}
.a-talk-hyp-app:focus-visible,.a-talk-group-links a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.a-talk-pick{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:1px solid var(--rule);border-radius:14px;background:#ffffff08;color:var(--ivory);text-align:left;cursor:pointer;transition:background .15s,border-color .15s}
.a-talk-pick img{flex:none;width:48px;height:48px;border-radius:50%;object-fit:cover;background:var(--paper);border:2px solid #ffffff30}
.a-talk-pick span{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.a-talk-pick strong{font-size:.95rem}
.a-talk-pick small{color:var(--text-muted);font-size:.76rem}
.a-talk-pick:hover{background:#ffffff14}
.a-talk-pick[aria-selected="true"]{background:var(--paper);border-color:var(--paper);color:var(--ink);box-shadow:0 5px 0 var(--accent-edge)}
.a-talk-pick[aria-selected="true"] small{color:var(--ink-soft)}
.a-talk-pick[aria-selected="true"] img{border-color:var(--accent-edge)}
.a-talk-pick:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.a-talk-panel{display:flex;flex-direction:column;min-width:0;border-radius:22px;background-color:var(--paper);background-image:var(--grain);background-blend-mode:multiply;color:var(--ink);border:1px solid #ece9df;box-shadow:0 6px 0 var(--accent-edge),0 24px 42px -24px #000c;overflow:hidden}
.a-talk-head{display:flex;align-items:center;gap:14px;padding:16px 20px;border-bottom:1px solid #e6e2d6}
.a-talk-head img{flex:none;width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid var(--accent-edge);background:#fff}
.a-talk-head > div{flex:1;min-width:0}
.a-talk-head h3{margin:0 0 2px;color:var(--ink);font-family:var(--serif);font-size:1.4rem;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.a-talk-new,.a-talk-foot button{padding:7px 12px;border:1px solid #d9d4c6;border-radius:9px;background:#fff;color:var(--ink);font-size:.8rem;font-weight:750;cursor:pointer}
.a-talk-new:hover,.a-talk-foot button:hover{border-color:var(--accent-edge)}
.a-talk-log{display:flex;flex-direction:column;gap:14px;height:min(56vh,560px);min-height:300px;padding:20px;overflow-y:auto;overscroll-behavior:contain}
.a-talk-log:focus-visible{outline:3px solid var(--accent-edge);outline-offset:-3px}
.a-msg{display:flex;gap:10px;max-width:88%}
.a-msg img{flex:none;width:32px;height:32px;margin-top:2px;border-radius:50%;object-fit:cover;background:#fff;border:1px solid #e6e2d6}
.a-msg-body{min-width:0;padding:11px 15px;border-radius:16px;font-size:.96rem;line-height:1.55;overflow-wrap:anywhere}
.a-msg-assistant .a-msg-body{background:#fff;border:1px solid #ebe7dc;border-top-left-radius:6px;color:var(--ink)}
.a-msg-user{align-self:flex-end}
.a-msg-user .a-msg-body{background:var(--ink);color:var(--paper);border-top-right-radius:6px;white-space:pre-wrap}
.a-msg-text p{margin:0 0 .7em}
.a-msg-text p:last-child,.a-msg-text ul:last-child,.a-msg-text ol:last-child{margin-bottom:0}
.a-msg-text ul,.a-msg-text ol{margin:0 0 .7em;padding-left:1.3em}
.a-msg-text li{margin:.2em 0}
.a-msg-greeting .a-msg-body{background:var(--accent-soft);border-color:transparent}
.a-msg-pending .a-msg-text:empty::after{content:'…';display:inline-block;color:var(--ink-soft);font-weight:800;letter-spacing:.1em;animation:a-think 1.2s ease-in-out infinite}
@keyframes a-think{50%{opacity:.3}}
.a-msg-note{align-self:center;max-width:90%;margin:0;padding:6px 12px;border-radius:9px;background:#f3efe4;color:var(--ink-soft);font-size:.84rem;text-align:center}
.a-talk-gate{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px 20px 26px;border-top:1px solid #e6e2d6;text-align:center}
.a-talk-gate[hidden],.a-talk-gate [hidden],.a-talk-new[hidden]{display:none}
.a-talk-gate p{margin:0;color:var(--ink);font-weight:650}
.a-talk-gate small{color:var(--ink-soft);font-size:.8rem}
.a-talk-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:14px 16px 16px;border-top:1px solid #e6e2d6}
.a-talk-form[hidden]{display:none}
.a-talk-starters{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:8px}
.a-talk-starters:empty{display:none}
.a-starter{padding:7px 12px;border:1px solid #ddd7c8;border-radius:999px;background:#fff;color:var(--ink);font-size:.82rem;font-weight:650;cursor:pointer}
.a-starter:hover{border-color:var(--accent-edge);background:var(--accent-soft)}
.a-talk-form textarea{width:100%;min-height:52px;max-height:200px;padding:12px 14px;border:1px solid #d6d0c1;border-radius:12px;background:#fff;color:var(--ink);font:inherit;font-size:.96rem;line-height:1.45;resize:vertical}
.a-talk-form textarea:focus{outline:3px solid var(--accent-edge);outline-offset:1px;border-color:transparent}
.a-talk-form .button{align-self:end;gap:14px;min-height:52px}
.a-talk-form .button:disabled{opacity:.55;cursor:wait;transform:none}
.a-talk-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin:0;padding:10px 18px 14px;color:var(--ink-soft);font-size:.8rem}
.a-talk-foot[hidden]{display:none}
.a-talk-foot button{margin-left:auto;padding:5px 10px}

@media (max-width:1100px){
  .a-hero-inner,.a-door-head{grid-template-columns:minmax(0,1fr)}
  .a-facts{justify-content:flex-start}
  .a-three{grid-template-columns:repeat(2,minmax(0,1fr))}
  .a-three .a-agent:last-child{grid-column:1 / -1}
  .a-steps{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  .a-talk{grid-template-columns:minmax(0,1fr)}
  .a-talk-rail{gap:18px}
  .a-talk-picks{flex-direction:row;flex-wrap:wrap}
  .a-talk-group-links{flex-direction:row;flex-wrap:wrap;gap:4px 16px}
  .a-talk-group-links > span{flex-basis:100%}
  .a-talk-hyp-app{align-self:flex-start}
  .a-talk-pick{flex:none;width:auto;padding:8px 12px 8px 8px}
  .a-talk-pick small{display:none}
  .a-talk-pick img{width:36px;height:36px}
}
@media (max-width:760px){
  .a-two,.a-three{grid-template-columns:minmax(0,1fr)}
  .a-agent{padding:22px 20px}
  .a-later-card{grid-template-columns:minmax(0,1fr)}
  .a-later-card figure img{aspect-ratio:16 / 10;object-position:50% 25%}
  .a-later-body{padding:26px 22px}
}
@media (max-width:520px){
  .a-talk-head{gap:10px;padding:12px 14px}
  .a-talk-head img{width:40px;height:40px}
  .a-talk-head h3{font-size:1.2rem;white-space:nowrap}
  .a-talk-head .a-role{font-size:.64rem;letter-spacing:.08em}
  .a-talk-new{padding:6px 9px;font-size:.72rem;white-space:nowrap}
  .a-talk-log{height:60vh;padding:14px}
  .a-msg{max-width:96%}
  .a-talk-form{grid-template-columns:minmax(0,1fr)}
  .a-talk-form .button{justify-self:end}
  .a-chart{display:grid;gap:26px;aspect-ratio:auto;margin-bottom:8px}
  .a-chart svg{display:none}
  .a-zone{display:grid;gap:16px}
  .a-zone-label{position:static;width:auto!important}
  .a-zone-stars{display:flex;flex-wrap:wrap;gap:16px;margin:0;padding:0}
  .a-star{position:static;width:84px;transform:none}
}
@media (prefers-reduced-motion:reduce){.a-disc,.a-app-badge,.a-talk-pick,.a-talk-hyp-app{transition:none}.a-msg-pending .a-msg-text:empty::after{animation:none}}
