/* AnotherAgent — case-study article layout.
   Built on the shared .aa-list / .aa-card primitives in aa-motion.css so the
   reveal timing matches the rest of the site; only the case-study-specific
   furniture lives here. Link it alongside aa-motion.css on any case study. */

.aa-cs-eye{ color:#8C8C8C; font-size:11px; letter-spacing:0.42em; font-weight:500; margin:0 0 22px; }
.aa-cs-h2{ margin:0; color:#ffffff; font-weight:300; font-size:clamp(34px, 4.2vw, 64px); line-height:1.05; letter-spacing:-0.04em; }
.aa-cs-p{ color:#8C8C8C; font-size:16px; line-height:1.7; font-weight:400; max-width:64ch; margin:20px 0 0; }
.aa-cs-a{ color:#F2F2F2; border-bottom:1px solid rgba(255,255,255,0.3); }
.aa-cs-a:hover{ border-bottom-color:#ffffff; }

/* Hero fact rail */
.aa-cs-meta{ display:grid; grid-template-columns:repeat(auto-fit, minmax(148px, 1fr)); gap:24px 28px; margin:44px 0 0; padding-top:24px; border-top:1px solid #1c1c1c; max-width:860px; }
.aa-cs-meta dt{ color:#4a4a4a; font-family:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size:10px; letter-spacing:0.2em; font-weight:500; }
.aa-cs-meta dd{ margin:8px 0 0; color:#C8C8C8; font-size:14px; font-weight:400; letter-spacing:-0.01em; line-height:1.45; }

/* At-a-glance figures — hairline grid, no boxes */
.aa-cs-stats{ display:grid; grid-template-columns:repeat(auto-fit, minmax(158px, 1fr)); gap:1px; margin-top:38px; background:#1c1c1c; border:1px solid #1c1c1c; }
.aa-cs-stat{ background:#000000; padding:clamp(26px, 3vw, 38px) clamp(20px, 2.2vw, 28px); }
.aa-cs-fig{ color:#ffffff; font-size:clamp(36px, 4.4vw, 60px); font-weight:300; letter-spacing:-0.05em; line-height:1; font-variant-numeric:tabular-nums; }
.aa-cs-lab{ margin:13px 0 0; color:#8C8C8C; font-size:13px; line-height:1.5; font-weight:400; }

/* Asymmetric label column */
.aa-cs-split{ display:grid; grid-template-columns:232px minmax(0, 1fr); gap:0 56px; align-items:start; }
.aa-cs-side .aa-cs-eye{ margin-bottom:0; letter-spacing:0.3em; }
.aa-cs-side-note{ margin:16px 0 0; color:#3f3f3f; font-family:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size:10.5px; letter-spacing:0.12em; line-height:1.7; }
@media (max-width:900px){
    .aa-cs-split{ grid-template-columns:1fr; gap:0; }
    .aa-cs-side{ margin-bottom:22px; }
    .aa-cs-side-note{ display:none; }
}

/* Statement */
.aa-cs-quote{ margin:0; border-top:1px solid #2a2a2a; padding:36px 0 0; }
.aa-cs-quote p{ margin:0; color:#ffffff; font-size:clamp(23px, 3.1vw, 40px); font-weight:300; line-height:1.24; letter-spacing:-0.035em; max-width:26ch; }

/* Stack chips */
.aa-cs-stack{ display:flex; flex-wrap:wrap; gap:9px; margin-top:28px; }
.aa-cs-stack span{ font-family:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size:11.5px; letter-spacing:0.05em; color:#9a9a9a; border:1px solid #242424; border-radius:3px; padding:8px 13px; }

/* Decision cards */
.aa-cs-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px; margin-top:34px; }
@media (max-width:760px){ .aa-cs-grid{ grid-template-columns:1fr; } }
.aa-cs-grid .aa-card{ border:1px solid #1c1c1c; border-radius:4px; padding:clamp(24px, 2.6vw, 32px); background:rgba(255,255,255,0.012); }
.aa-cs-num{ color:#4a4a4a; font-family:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size:10.5px; letter-spacing:0.18em; font-weight:500; }
.aa-cs-ct{ margin:16px 0 0; color:#ffffff; font-size:17px; font-weight:600; letter-spacing:-0.015em; line-height:1.3; }
.aa-cs-cp{ margin:10px 0 0; color:#8C8C8C; font-size:14.5px; line-height:1.65; font-weight:400; }

/* FAQ */
.aa-cs-q{ padding:20px 0; border-top:1px solid #1c1c1c; }
.aa-cs-q:last-child{ border-bottom:1px solid #1c1c1c; }
.aa-cs-q h3{ margin:0; color:#f2f2f2; font-size:16px; font-weight:600; letter-spacing:-0.01em; }
.aa-cs-q p{ color:#8C8C8C; font-size:14.5px; line-height:1.65; font-weight:400; margin:8px 0 0; max-width:72ch; }

/* ---- Operations desk schematic ------------------------------------------
   A diagram of what the desk does, not a product screenshot. Six panes cycle,
   each animating one part of the operation. Driven by the page's Component. */
.aa-desk{ margin-top:32px; border:1px solid #1e1e1e; border-radius:14px; background:rgba(8,8,8,0.78); overflow:hidden; }
.aa-desk-bar{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 18px; border-bottom:1px solid #161616; }
.aa-desk-dot{ width:6px; height:6px; border-radius:50%; background:#ffffff; animation:aaPulse 1.6s ease-in-out infinite; }
.aa-desk-lab{ color:#8C8C8C; font-size:10px; letter-spacing:0.3em; font-weight:500; }
.aa-desk-sub{ color:#4a4a4a; font-size:10px; letter-spacing:0.3em; font-weight:500; }

.aa-desk-main{ display:grid; grid-template-columns:168px minmax(0,1fr); gap:1px; background:#161616; }
.aa-desk-nav{ background:rgba(8,8,8,0.9); padding:14px 0; display:flex; flex-direction:column; }
.aa-nav-i{
  display:flex; align-items:center; gap:9px; padding:9px 16px;
  color:#4a4a4a; font-family:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:10px; letter-spacing:0.14em; border-left:2px solid transparent;
  transition:color .4s ease, border-color .4s ease, background .4s ease;
}
.aa-nav-i b{ font-weight:400; }
.aa-nav-i.is-on{ color:#ffffff; border-left-color:#ffffff; background:rgba(255,255,255,0.035); }
.aa-nav-c{ margin-left:auto; color:#3f3f3f; font-size:9px; }
.aa-nav-i.is-on .aa-nav-c{ color:#8C8C8C; }

.aa-desk-stage{ background:rgba(8,8,8,0.9); padding:18px 20px 16px; min-height:252px; position:relative; }
.aa-view{ display:none; }
.aa-view.is-on{ display:block; }
.aa-view-h{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; border-bottom:1px solid #161616; padding-bottom:11px; }
.aa-view-t{ color:#ffffff; font-size:13.5px; font-weight:600; letter-spacing:-0.012em; }
.aa-view-m{ color:#4a4a4a; font-family:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size:9.5px; letter-spacing:0.12em; }

/* Shared row shape across the list-style panes */
.aa-r{ display:grid; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid #121212; opacity:0; transform:translateY(-5px); transition:opacity .45s ease, transform .45s cubic-bezier(.16,1,.3,1); }
.aa-r.is-in{ opacity:1; transform:none; }
.aa-r-ref{ color:#6a6a6a; font-family:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size:10px; letter-spacing:0.06em; }
.aa-r-x{ color:#C8C8C8; font-size:12.5px; line-height:1.35; min-width:0; }
.aa-r-s{ color:#8C8C8C; font-size:11px; }
.aa-pill{ justify-self:end; font-size:9.5px; letter-spacing:0.13em; font-family:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; border:1px solid #2a2a2a; border-radius:999px; padding:3px 9px; color:#8C8C8C; white-space:nowrap; transition:color .45s ease, border-color .45s ease, background .45s ease; }
.aa-pill.is-done{ color:#000000; background:#d9d9d9; border-color:#d9d9d9; }
.aa-pill.is-warn{ color:#d9d9d9; border-color:#6a6a6a; border-style:dashed; }

/* Progress bars (course hours, pay accrual) */
.aa-bar{ display:block; height:3px; background:#1c1c1c; border-radius:2px; overflow:hidden; }
.aa-r [data-hrslab]{ display:block; margin-top:5px; }
.aa-bar i{ display:block; height:100%; width:0; background:#d9d9d9; transition:width 1.1s cubic-bezier(.16,1,.3,1); }

/* 1 — timetable grid */
.aa-grid{ display:grid; grid-template-columns:46px repeat(5, 1fr); gap:6px; margin-top:14px; align-items:center; }
.aa-grid-h{ color:#3f3f3f; font-family:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size:9px; letter-spacing:0.14em; text-align:center; }
.aa-grid-t{ color:#3f3f3f; font-family:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size:9px; }
.aa-cell{ height:22px; border-radius:3px; border:1px solid #242424; background:transparent; opacity:0; transform:scale(.86); transition:opacity .5s ease, transform .5s cubic-bezier(.16,1,.3,1), background .55s ease, border-color .55s ease; }
.aa-view.is-on .aa-cell{ opacity:1; transform:none; }
.aa-cell.is-full{ background:#d9d9d9; border-color:#d9d9d9; }
.aa-cell.is-free{ background:transparent; border-color:#8a8a8a; border-style:dashed; }
.aa-legend{ display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:16px; color:#4a4a4a; font-size:10.5px; }
.aa-legend span{ display:flex; align-items:center; gap:6px; }
.aa-legend i{ width:11px; height:11px; border-radius:2px; border:1px solid #242424; display:block; }
.aa-legend i.is-full{ background:#d9d9d9; border-color:#d9d9d9; }
.aa-legend i.is-free{ border-color:#8a8a8a; border-style:dashed; }

/* 5 — onboarding steps */
.aa-steps{ display:flex; flex-direction:column; gap:0; margin-top:6px; }
.aa-step{ display:grid; grid-template-columns:22px minmax(0,1fr) auto; align-items:center; gap:11px; padding:12px 0; border-bottom:1px solid #121212; }
.aa-step-n{ width:18px; height:18px; border-radius:50%; border:1px solid #2a2a2a; color:#4a4a4a; font-size:9px; display:flex; align-items:center; justify-content:center; font-family:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; transition:background .45s ease, color .45s ease, border-color .45s ease; }
.aa-step.is-done .aa-step-n{ background:#d9d9d9; border-color:#d9d9d9; color:#000000; }
.aa-step-x{ color:#6a6a6a; font-size:12.5px; transition:color .45s ease; }
.aa-step.is-done .aa-step-x{ color:#C8C8C8; }

.aa-desk-foot{ border-top:1px solid #161616; padding:11px 18px; display:flex; align-items:center; gap:10px; background:rgba(8,8,8,0.9); }
.aa-foot-t{ color:#3f3f3f; font-family:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size:9.5px; }
.aa-foot-x{ color:#9a9a9a; font-size:12px; opacity:0; transition:opacity .4s ease; min-width:0; }
.aa-foot-x.is-in{ opacity:1; }

.aa-desk-cap{ margin:16px 0 0; color:#3f3f3f; font-size:12px; line-height:1.6; max-width:74ch; }

@media (max-width:760px){
  .aa-desk-main{ grid-template-columns:1fr; }
  .aa-desk-nav{ flex-direction:row; overflow-x:auto; padding:0; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .aa-desk-nav::-webkit-scrollbar{ display:none; }
  .aa-nav-i{ border-left:0; border-bottom:2px solid transparent; padding:12px 14px; white-space:nowrap; }
  .aa-nav-i.is-on{ border-left-color:transparent; border-bottom-color:#ffffff; }
  .aa-nav-c{ display:none; }
  .aa-desk-stage{ min-height:459px; padding:16px 14px; }
  .aa-grid{ grid-template-columns:40px repeat(5, 1fr); gap:5px; }
}
@media (prefers-reduced-motion: reduce){
  .aa-desk-dot{ animation:none; }
  .aa-cell, .aa-r, .aa-bar i, .aa-pill, .aa-foot-x{ transition:none; }
}

/* Row shapes per pane. Kept in CSS rather than inline so the phone layout
   below can restack them — an inline grid-template would win over a query. */
.aa-r--roster{ grid-template-columns:56px minmax(0,1fr) 96px 96px; }
.aa-r--session{ grid-template-columns:76px minmax(0,1fr) 46px 100px; }
.aa-r--tutor{ grid-template-columns:56px minmax(0,1fr) 112px 96px; }
.aa-r--pay{ grid-template-columns:86px minmax(0,1fr) 92px; }

@media (max-width:600px){
  /* Ref and status on the first line, detail and progress stacked under it. */
  .aa-r{ gap:5px 10px; padding:11px 0; }
  .aa-r--roster, .aa-r--session, .aa-r--tutor, .aa-r--pay{ grid-template-columns:minmax(0,1fr) auto; }
  .aa-r--roster > :nth-child(1), .aa-r--tutor > :nth-child(1), .aa-r--pay > :nth-child(1){ grid-area:1 / 1; }
  .aa-r--roster > :nth-child(4), .aa-r--tutor > :nth-child(4), .aa-r--pay > :nth-child(3){ grid-area:1 / 2; }
  .aa-r--roster > :nth-child(2), .aa-r--tutor > :nth-child(2){ grid-area:2 / 1 / auto / -1; }
  .aa-r--roster > :nth-child(3), .aa-r--tutor > :nth-child(3){ grid-area:3 / 1 / auto / -1; }
  .aa-r--pay > :nth-child(2){ grid-area:2 / 1 / auto / -1; }
  .aa-r--session > :nth-child(1){ grid-area:1 / 1; }
  .aa-r--session > :nth-child(4){ grid-area:1 / 2; }
  .aa-r--session > :nth-child(2){ grid-area:2 / 1 / auto / -1; }
  .aa-r--session > :nth-child(3){ grid-area:3 / 1; }
  .aa-r [data-hrslab]{ margin-top:4px; }
}