/*
 * Auto Attendant 1: loads after lisa3.css and reuses every Lisa 3 component
 * as-is. This file does three things:
 *
 * 1. Swaps the story accent. Auto Attendant is planet 0 in the Transformation
 *    Atlas, the orange one, so its accent is the system's Orange Light. Every
 *    place lisa3.css spells Lisa's pink as a literal rgb() (glows, diagram
 *    fills, tags) is restated here in orange.
 * 2. Extends the .dg diagram language for this page's coded figures:
 *    annotations, audit markers, the direction map and the option pattern.
 * 3. Adds the components Lisa doesn't have: the version carousel, the audit
 *    legend, and the "continue the story" card.
 */

body.l3.aa1{
  --l3-accent: var(--orange-light);
  --l3-accent-soft: rgb(232 110 3 / .14);
  --l3-accent-line: rgb(232 110 3 / .45);
  --aa-rgb: 232 110 3;
  --aa-lisa: var(--pink-light);
}

/* ------------------------------------------------ literal-pink restatements */
body.aa1 .l3-hero__glow{ background:radial-gradient(circle 760px at 72% 0%,
  rgb(var(--aa-rgb) / .16) 0%, rgb(var(--aa-rgb) / .12) 20%, rgb(var(--aa-rgb) / .07) 38%,
  rgb(var(--aa-rgb) / .03) 60%, transparent 100%); }
body.aa1 .l3-hero__film{ background:var(--l3-canvas); box-shadow:0 40px 120px -30px rgb(var(--aa-rgb) / .35); }
body.aa1 .l3-hero__film img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 0; }
body.aa1 .l3-chapter{ --glow-rgb:var(--aa-rgb); }
body.aa1 .closing::before{ background:radial-gradient(ellipse 700px 360px at 30% 60%, rgb(var(--aa-rgb) / .14), transparent 70%); }
body.aa1 .stage--final .stage__tag:not([data-tag="shipped"]){ background:rgb(var(--aa-rgb) / .16); }
body.aa1 .note--tag{ background:rgb(var(--aa-rgb) / .12); }
body.aa1 ::selection{ background:var(--l3-accent); color:#000; }
body.aa1 .dg .dg-node--root rect, body.aa1 .dg .dg-node--next rect{ fill:rgb(var(--aa-rgb) / .16); stroke:var(--l3-accent); }
.l3-btn-aa{ --btn-bg:var(--l3-accent); --btn-fg:#000; --btn-tint:var(--white-10); }

/* The reframe closes a chapter here rather than opening one, so it needs
   room from the research board above it. */
body.aa1 .aa-reframe{ margin-top:clamp(24px,4vw,48px); }

/* Chapter titles are long for a display size; let them wrap, never overflow. */
body.aa1 .l3-chapter__t{ overflow-wrap:break-word; }
body.aa1 .aa-supplement{ padding:12px 0; background:transparent; }
.aa-evidence{ margin-top:20px; border:1px solid var(--l3-line-strong); border-radius:var(--l3-r-sm); background:var(--l3-card-quiet); }
.aa-supplement .aa-evidence{ margin:0; }
.aa-evidence summary{ padding:20px 24px; color:var(--l3-soft); font:var(--t-b3b); cursor:pointer; }
.aa-evidence summary::marker{ color:var(--l3-accent); }
.aa-evidence summary:hover{ color:#fff; }
.aa-evidence summary:focus-visible{ outline:2px solid var(--l3-accent); outline-offset:4px; }
.aa-evidence__body{ padding:8px clamp(16px,3vw,28px) 28px; }
.aa-evidence[open] > summary{ border-bottom:1px solid var(--l3-line); margin-bottom:20px; }
@media (prefers-reduced-motion:reduce){
  .aa-vers.is-js .aa-vpanel.is-active{ animation:none; }
  .aa-vtabs::after, .aa-vtab i, .aa-vbtn, .aa-vbtn .icon{ transition:none; }
}
@media (max-width: 640px){
  body.aa1 .l3-chapter__t{ font-size:clamp(40px,11vw,56px); line-height:1.05; }
}

/* ------------------------------------------------ diagram language additions */
.dg .dg-line--aa{ stroke:var(--l3-accent); }
.dg .dg-head--aa{ fill:var(--l3-accent); }
.dg .dg-panel{ fill:var(--l3-canvas); }
.dg .dg-ann{ fill:none; stroke:var(--l3-accent); stroke-width:1.6; stroke-linejoin:round; }
.dg .dg-ann--dash{ stroke-dasharray:6 6; }
.dg .dg-ann-dot{ fill:var(--l3-accent); stroke:#fff; stroke-width:2; }
.dg text.dg-ann-k{ fill:var(--l3-accent); font-family:var(--font-mono); letter-spacing:.06em; }
.dg text.dg-rowk{ fill:var(--l3-muted); font-family:var(--font-mono); letter-spacing:.06em; }
.dg text.dg-cap{ fill:#3a3a44; font-weight:var(--fw-medium); }
.dg text.dg-accent{ fill:var(--l3-accent); }
.dg .dg-marker circle{ fill:var(--l3-accent); stroke:#fff; stroke-width:3; }
.dg .dg-marker text{ fill:#000; font-weight:700; font-family:var(--font-sans); }
.dg .dg-band{ fill:rgb(var(--aa-rgb) / .08); stroke:rgb(var(--aa-rgb) / .4); stroke-dasharray:5 6; }
.dg .dg-brace{ fill:none; stroke:rgb(255 255 255 / .3); stroke-width:1.5; }
.dg .dg-quad{ fill:rgb(var(--aa-rgb) / .06); }
.dg .dg-axis{ fill:none; stroke:rgb(255 255 255 / .38); stroke-width:1.5; }
.dg .dg-pt{ stroke:#0b0b0d; stroke-width:3; }
.dg .dg-pt--a, .dg .dg-pt--b{ fill:#b9b9bf; }
.dg .dg-pt--c{ fill:var(--l3-accent); stroke:rgb(var(--aa-rgb) / .35); stroke-width:10; paint-order:stroke; }
.dg .dg-gap{ fill:rgb(var(--aa-rgb) / .06); stroke:var(--l3-accent); stroke-width:1.5; stroke-dasharray:6 6; }
.dg .dg-tagbox{ fill:#111114; stroke:rgb(255 255 255 / .1); }
.dg .dg-tagbox--aa{ stroke:var(--l3-accent-line); }
body.aa1 .dgram--aa .dgram__scroll{ background:#0b0b0d; }
body.aa1 .l3-fig .dgram{ margin:0; }

/* ------------------------------------------------ audit legend */
.aa-legend{ list-style:none; counter-reset:aa; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 28px; }
.aa-legend li{ counter-increment:aa; position:relative; padding-left:44px; font:var(--t-b3a); color:var(--l3-soft); }
.aa-legend li::before{ content:counter(aa); position:absolute; left:0; top:-2px; width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center; background:var(--l3-accent); color:#000; font:var(--t-b3c); font-weight:700; }
.aa-legend li b{ color:#fff; font-weight:var(--fw-medium); }
.aa-tag{ display:inline-block; margin-left:4px; padding:1px 8px; border-radius:999px; font:var(--t-b3c); font-size:11px; letter-spacing:.04em;
  color:var(--l3-muted); background:var(--white-5); border:1px solid var(--l3-line); vertical-align:1px; }
.aa-offscreen{ margin:24px 0 0 !important; padding:18px 20px; border-radius:var(--l3-r-sm); border:1px dashed var(--l3-line-strong); font:var(--t-b3a); color:var(--l3-soft); }
.aa-offscreen b{ color:#fff; font-weight:var(--fw-medium); }

/* ------------------------------------------------ solutions lists */
.aa-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.aa-cardx{ padding:22px; border-radius:var(--l3-r); background:var(--l3-card-quiet); border:1px solid var(--l3-line); }
.aa-cardx h4{ margin:0 0 12px; font:var(--t-b3b); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--l3-accent); }
.aa-cardx ul{ margin:0; padding:0 0 0 18px; display:grid; gap:8px; }
.aa-cardx li{ font:var(--t-b3a); color:var(--l3-soft); margin:0; }
.aa-cardx li b{ color:#fff; font-weight:var(--fw-medium); }
.aa-inline{ color:var(--l3-accent) !important; text-decoration:underline; text-underline-offset:3px; }

/* ------------------------------------------------ version carousel
   A scrubber track (dot + number + name per version) above a stage, with
   named previous / next buttons under the note. Without JS every panel is
   shown, stacked. */
.aa-vers{ margin-top:clamp(28px,4vw,40px); }
.aa-vtrack{ position:relative; margin:0 0 20px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; }
.aa-vtrack::-webkit-scrollbar{ display:none; }
.aa-vtabs{ position:relative; display:grid; grid-template-columns:repeat(8,minmax(92px,1fr)); min-width:760px; }
.aa-vtabs::before{ content:""; position:absolute; left:calc(100% / 16); right:calc(100% / 16); top:9px; height:2px; background:var(--l3-line-strong); }
.aa-vtabs::after{ content:""; position:absolute; left:calc(100% / 16); top:9px; height:2px; background:var(--l3-accent);
  width:calc((100% - 100% / 8) * var(--p, 0)); transition:width .35s var(--ease, ease); }
.aa-vtab{ position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; padding:0 4px 6px;
  text-decoration:none !important; color:var(--l3-muted) !important; font:var(--t-b3a); text-align:center; cursor:pointer; }
.aa-vtab i{ position:relative; z-index:1; width:20px; height:20px; border-radius:50%; background:#000; border:2px solid var(--l3-line-strong); margin-bottom:6px; transition:all .25s; }
.aa-vtab span{ font:var(--t-b3c); color:var(--l3-soft); }
.aa-vtab:hover{ color:#fff !important; }
.aa-vtab:hover i{ border-color:#fff; }
.aa-vtab.is-past i{ background:var(--l3-accent); border-color:var(--l3-accent); transform:scale(.6); }
.aa-vtab[aria-selected="true"]{ color:#fff !important; }
.aa-vtab[aria-selected="true"] i{ background:var(--l3-accent); border-color:#fff; box-shadow:0 0 0 5px rgb(var(--aa-rgb) / .25); }
.aa-vtab[aria-selected="true"] span{ color:var(--l3-accent); }
.aa-vtab:focus-visible{ outline:2px solid var(--l3-accent); outline-offset:2px; border-radius:8px; }
.aa-vstage{ position:relative; }
.aa-vpanel{ margin:0 0 40px; }
.aa-vers.is-js .aa-vpanel{ margin:0; }
.aa-vers.is-js .aa-vpanel:not(.is-active){ display:none; }
.aa-vers.is-js .aa-vpanel.is-active{ animation:aa-in .35s var(--ease, ease); }
@keyframes aa-in{ from{ opacity:0; transform:translateX(var(--dir, 16px)); } to{ opacity:1; transform:none; } }

/* Previous / next: named buttons under the note, not arrows over the
   picture. Next is the primary action and previews where it goes. */
.aa-vnav{ display:none; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:12px; margin-top:24px; }
.aa-vers.is-js .aa-vnav{ display:grid; }
.aa-vbtn{ display:flex; align-items:center; gap:14px; min-height:72px; padding:10px 18px; border-radius:var(--l3-r-sm);
  border:1px solid var(--l3-line-strong); background:var(--l3-card-quiet); color:#fff; font:inherit; text-align:left; cursor:pointer;
  transition:border-color .2s, background .2s, transform .2s var(--ease, ease); }
.aa-vbtn:hover{ border-color:#fff; }
.aa-vbtn:active{ transform:scale(.98); }
.aa-vbtn:focus-visible{ outline:2px solid var(--l3-accent); outline-offset:3px; }
.aa-vbtn .icon{ flex:none; width:22px; height:22px; transition:transform .2s var(--ease, ease); }
.aa-vbtn__txt{ display:grid; gap:2px; min-width:0; }
.aa-vbtn__txt small{ font:var(--t-b3c); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--l3-muted); }
.aa-vbtn__txt b{ font:var(--t-b3b); color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.aa-vbtn--prev{ justify-self:start; }
.aa-vbtn--prev:hover .icon{ transform:translateX(-3px); }
.aa-vbtn--prev.is-off{ visibility:hidden; }
.aa-vbtn--next{ justify-self:end; border-color:var(--l3-accent-line); background:linear-gradient(90deg, transparent, rgb(var(--aa-rgb) / .12)), var(--l3-card-quiet); }
.aa-vbtn--next:hover{ border-color:var(--l3-accent); }
.aa-vbtn--next:hover .icon{ transform:translateX(3px); }
.aa-vbtn--next .aa-vbtn__txt small{ color:var(--l3-accent); }
.aa-vbtn--next .icon{ color:var(--l3-accent); }
.aa-vbtn__thumb{ flex:none; width:64px; height:48px; border-radius:8px; overflow:hidden; background:var(--l3-canvas); box-shadow:inset 0 0 0 1px var(--l3-line); }
.aa-vbtn__thumb img{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 12%; }
.aa-vpos{ margin:0 !important; font:var(--t-b3c); letter-spacing:.04em; color:var(--l3-muted); white-space:nowrap; }
.aa-vpos b{ color:#fff; font-weight:inherit; }
.aa-vnote{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:14px 32px; margin-top:22px; }
.aa-vnote h4{ grid-column:1 / -1; margin:0; font:var(--t-h3); color:#fff; }
.aa-vnote h4 span{ color:var(--l3-accent); margin-right:10px; }
.aa-vnote p{ margin:0; color:var(--l3-soft); }
.aa-vnote .aa-vlearn{ padding:14px 16px; border-radius:var(--l3-r-sm); background:var(--l3-card-quiet); border:1px solid var(--l3-line); }
.aa-vnote .aa-vlearn b{ display:block; font:var(--t-b3c); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--l3-accent); margin-bottom:6px; }

/* ------------------------------------------------ continue the story */
.aa-next{ padding:clamp(24px,4vw,40px) 0 clamp(72px,10vw,120px); }
.aa-lisa{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px 28px; align-items:center;
  padding:clamp(22px,3vw,32px); border-radius:var(--l3-r);
  background:radial-gradient(ellipse 520px 220px at 0% 0%, rgb(232 59 157 / .18), transparent 70%), var(--l3-card-quiet);
  border:1px solid rgb(232 59 157 / .35); color:#fff !important; text-decoration:none; transition:border-color .3s var(--ease, ease); }
.aa-lisa:hover{ border-color:var(--aa-lisa); }
.aa-lisa__k{ display:block; margin-bottom:8px; font:var(--t-b3c); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--aa-lisa); }
.aa-lisa__t{ display:block; font:var(--t-h3); color:#fff; margin-bottom:6px; }
.aa-lisa__d{ display:block; font:var(--t-b3a); color:var(--l3-soft); max-width:600px; }
.aa-lisa__go{ display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:999px; background:var(--aa-lisa); color:#fff; font:var(--t-b3b); white-space:nowrap; }
.aa-lisa__go .icon{ width:18px; height:18px; }

@media (max-width: 900px){
  .aa-vnote{ grid-template-columns:1fr; }
  .aa-legend{ grid-template-columns:1fr; }
}
@media (max-width: 640px){
  .aa-grid{ grid-template-columns:1fr; }
  .aa-lisa{ grid-template-columns:1fr; }
  .aa-lisa__go{ justify-self:start; }
  /* Phones: the rail fits the width (numbers only, the name is in the
     buttons and the note), and the buttons sit right under the picture
     (aa1.js moves them), so rail, picture and controls are on screen together. */
  .aa-vtrack{ overflow:visible; margin-bottom:14px; }
  .aa-vtabs{ min-width:0; grid-template-columns:repeat(8,minmax(0,1fr)); }
  .aa-vtab{ font-size:0; gap:0; padding:0 0 4px; }
  .aa-vtab span{ font:var(--t-b3c); font-size:12px; }
  .aa-vtab i{ width:16px; height:16px; margin-bottom:6px; }
  .aa-vtabs::before, .aa-vtabs::after{ top:7px; }
  .aa-vnav{ grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); margin:14px 0 4px; }
  .aa-vpos{ display:none; }
  .aa-vbtn{ padding:10px 12px; gap:10px; min-height:64px; }
  .aa-vbtn--prev, .aa-vbtn--next{ justify-self:stretch; }
  .aa-vbtn--prev .aa-vbtn__txt b{ font:var(--t-b3a); }
  .aa-vbtn__thumb{ display:none; }
}

/* ------------------------------------------------ annotations on screens
   Parts of a screen are outlined and the leader leaves from the outline's
   edge, heavier than a diagram hairline so it holds up over light UI. */
.dg .dg-ann{ stroke-width:2.5; }
.dg .dg-ann-halo{ fill:rgb(var(--aa-rgb) / .28); }
.dg .dg-ann-dot{ stroke-width:2.5; }
.dg .dg-hl{ fill:rgb(var(--aa-rgb) / .07); stroke:var(--l3-accent); stroke-width:2.5; }
.dg .dg-hl--dash{ stroke-dasharray:7 6; }
.dg .dg-pill rect{ fill:#0b0b0d; stroke:var(--l3-accent); stroke-width:1.5; }
.dg .dg-pill text{ fill:var(--l3-accent); font-family:var(--font-mono); letter-spacing:.04em; }
.dg .dg-shot-edge{ fill:none; stroke:rgb(255 255 255 / .14); stroke-width:1.5; }
.dg .dg-node--fold rect{ fill:transparent; stroke:rgb(255 255 255 / .34); stroke-dasharray:6 5; }
.dg .dg-node--fold text{ fill:var(--l3-soft); }