/* pure-ai-tabs.css: THE POPPY SECTION LAYOUT, one component for the five Poppy pages (/meet-poppy and its Watch the desks
   work and Team map tabs, /ai-roleplay, /pure-poppy-desk). Brand pass 10/16/2026 (Mike's Poppy audit, Brand Standards v2.0):
   it is a daughter of the Website Page Pattern in Cecile's Design Library (PURE Headers.html, "Website page pattern: daughters").

     .ai-band     the compact navy header band: an optional eyebrow, the page H1, a one-line intro, then the pill row
     .mp-tabrow   the pill row: Meet Poppy, Watch the desks work, Team map, Practice, Open Poppy. All five pills are the same
                  button: inactive is the white outline on navy (Buttons mother "outline", onDark), hover is that mother's green,
                  the open page is the gold pill (Buttons mother "goldPill"). The open one carries aria-current="page".
     .ai-work     the Gold 100 workspace under the band
     .ai-card     a white card: radius 16, the one Down-Right shadow
     .ai-stage    a navy card for a stage that is dark by design (Poppy's pulse, a call in progress)
     .ai-h2       a section heading in the workspace: sentence case, navy, 20px bold
     .ai-btn      the primary button (navy pill, white words); .ai-btn.out is the navy outline pill

   Tokens only (PURE.cssVars, components/pure-tokens.css), each with its value as the fallback for a page that has not loaded
   them yet. Type ladder 10/12/14/16/18/20/25/30 (phone 10/12/18/20), weights 400/600/700, radii 5/8/16/360, one shadow. */
.ai-page,html body.ai-page .pas-main,html body.ai-page .pas-page{background:var(--gold-100,#f8f4ef)}
.ai-band{background:var(--navy-500,#172e55);color:var(--white,#fff);padding:20px 16px 18px;border-bottom:2px solid var(--gold-500,#dccaaf);text-align:center}
.ai-band .ai-head{max-width:1060px;margin:0 auto}
.ai-band .ai-eyebrow{display:block;margin:0 0 6px;font:600 12px/1.4 "Open Sans",system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-500,#dccaaf)}
.ai-band .ai-eyebrow[hidden]{display:none}
.ai-band h1{margin:0;font:600 30px/1.25 "Open Sans",system-ui,sans-serif;color:var(--white,#fff)}
.ai-band h1 em{font-style:italic;color:var(--gold-500,#dccaaf)}
.ai-band .ai-intro{margin:6px auto 0;max-width:680px;font:400 16px/1.5 "Open Sans",system-ui,sans-serif;color:var(--navy-100,#d1d5dd)}
.ai-band .mp-tabrow{margin-top:14px}
.mp-tabrow{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap;padding:0;position:relative;z-index:3}
.mp-tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:0;position:relative;z-index:3}
.mp-tabs a,.mp-open{font:600 14px/1.3 "Open Sans",system-ui,sans-serif;color:var(--white,#fff);text-decoration:none;padding:8px 18px;border-radius:var(--r-full,360px);border:1px solid rgba(255,255,255,.55);background:transparent;min-height:40px;display:inline-flex;align-items:center;transition:background .15s,border-color .15s,color .15s}
.mp-tabs a:hover,.mp-open:hover{background:var(--green-500,#117f39);border-color:var(--green-500,#117f39);color:var(--white,#fff)}
.mp-tabs a[aria-selected="true"],.mp-tabs a[aria-current="page"],.mp-open[aria-current="page"]{background:var(--gold-500,#dccaaf);border-color:var(--gold-500,#dccaaf);color:var(--navy-500,#172e55)}
.mp-tabs a:focus-visible,.mp-open:focus-visible{outline:2px solid var(--gold-500,#dccaaf);outline-offset:2px}
/* the workspace and its pieces */
.ai-work{max-width:1180px;margin:0 auto;padding:24px 16px 40px;color:var(--text,#000)}
.ai-card{background:var(--white,#fff);border:1px solid var(--hair,#e3ddd2);border-radius:var(--r-md,16px);box-shadow:var(--shadow-down-right,5px 5px 10px 0 rgba(0,0,0,.10));padding:20px}
.ai-stage{background:var(--navy-500,#172e55);color:var(--white,#fff);border-radius:var(--r-md,16px);box-shadow:var(--shadow-down-right,5px 5px 10px 0 rgba(0,0,0,.10));padding:20px 16px}
.ai-h2{margin:0 0 12px;font:600 20px/1.35 "Open Sans",system-ui,sans-serif;color:var(--navy-500,#172e55)}
.ai-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 22px;border-radius:var(--r-full,360px);border:1px solid var(--navy-500,#172e55);background:var(--navy-500,#172e55);color:var(--white,#fff);font:600 14px/1.3 "Open Sans",system-ui,sans-serif;text-decoration:none;cursor:pointer}
.ai-btn:hover{background:var(--navy-600,#122544);border-color:var(--navy-600,#122544)}
.ai-btn.out{background:var(--white,#fff);color:var(--navy-500,#172e55)}
.ai-btn.out:hover{background:var(--gold-100,#f8f4ef)}
.ai-btn:focus-visible,.ai-card a:focus-visible,.ai-card button:focus-visible,.ai-work [tabindex]:focus-visible{outline:2px solid var(--gold-700,#847969);outline-offset:2px}
.ai-btn svg{width:16px;height:16px;fill:currentColor}
/* phones: the pill row is one swipeable line (each page starts it with its own pill in view) */
@media (max-width:640px){
  .ai-band{padding:16px 0 14px}
  .ai-band .ai-head{padding:0 16px}
  html body .ai-band h1{font-size:20px!important}   /* the site-wide phone rule sets every h1 to 22px !important; the Brand Standards phone ladder tops out at 20 */
  .ai-band .ai-intro{font-size:12px}
  .ai-band .mp-tabrow{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;padding:2px 16px 4px}
  .ai-band .mp-tabrow::-webkit-scrollbar{display:none}
  .mp-tabs{flex-wrap:nowrap;flex:none}
  .mp-tabs a,.mp-open{flex:none;white-space:nowrap;padding:8px 14px;font-size:12px}
  .ai-work{padding:16px 16px 32px}
  .ai-h2{font-size:18px}
}