/* /ai-agents (partials/sp-ai-agents.hbs, aga-hero.hbs; loaded by aga-assets.hbs together with the schematic kit
   css/mcp-visuals.css): the hero drawing's own parts (agH-*), real screenshots of the AI workspace in window frames
   (#know, #report, the Approvals window in #access), the reason cards, the label document cards, the carousel of
   plan cards (#mcp), the point cards, the "who gets what" table and the FAQ. */
:root {
  --agp-line: #e3e5ee;
  --agp-ink: #1d2033;
  --agp-muted: #4a5068;
  --agp-blue: #2563eb;
  --agp-orange: #f37a2c;
}

/* ------------------------------------------------ hero drawing (700x500 stage, 4 frames) */
.agH-rail { position: absolute; left: 0; top: 156px; width: 184px; display: grid; gap: 12px; }
.agH-rail .mB-chip { display: flex; align-items: center; gap: 8px; background: #1c2135; white-space: nowrap; }
.agH-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #11ced7; }
.agH-win { left: 202px; top: 50px; width: 498px; height: 400px; padding: 16px; gap: 14px; }
.agH-logo { flex: none; width: 18px; height: 18px; border-radius: 6px; background: radial-gradient(circle, #fff 0 22%, transparent 25%), linear-gradient(135deg, #ffb347, var(--agp-orange)); }
.agH-body { height: 330px; }
.agH-frame { display: grid; gap: 14px; align-content: start; }
.agH-q { justify-self: end; max-width: 82%; padding: 10px 14px; border-radius: 14px 14px 4px 14px; background: var(--agp-blue); color: #fff; font-size: 15px; }
.agH-a { display: grid; gap: 10px; padding: 14px; border-radius: 12px; background: #232943; border: 1px solid #39405f; }
.agH-line { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #e3e6f2; }
.agH-line b { flex: none; width: 20px; height: 20px; border-radius: 6px; background: rgba(17, 206, 215, .18); color: #11ced7; display: grid; place-items: center; font-size: 12px; }
.agH-src { display: flex; flex-wrap: wrap; gap: 6px; }
.agH-src span { padding: 4px 9px; border-radius: 999px; font-size: 12px; color: #bff4f6; background: rgba(17, 206, 215, .12); border: 1px solid rgba(17, 206, 215, .45); }
.agH-src.is-docs span { color: #ffe3a0; background: rgba(249, 196, 64, .1); border-color: rgba(249, 196, 64, .45); }
.mcpv-stage .agH-bars { height: 150px; gap: 10px; }
.agH-card { display: grid; gap: 10px; padding: 14px 16px; border-radius: 12px; background: rgba(249, 196, 64, .08); border: 1px solid rgba(249, 196, 64, .5); }
.agH-btns { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.agH-plan { display: grid; gap: 7px; }
.agH-plan span { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #e3e6f2; }
.agH-plan span::before { content: "✓"; flex: none; width: 16px; height: 16px; border-radius: 4px; background: var(--agp-blue); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.agH-btns .mB-btn { border-radius: 8px; padding: 8px 14px; font-size: 14px; background: var(--agp-blue); }
.agH-btns .mB-chip { font-size: 14px; }

/* ------------------------------------------------ window frame around a screenshot */
.agp-win { position: relative; margin: 0; border-radius: 1rem; overflow: hidden; background: #f5f6fa; border: 1px solid var(--agp-line); box-shadow: 0 1.75rem 3.5rem rgba(16, 20, 44, .18), 0 .25rem .75rem rgba(16, 20, 44, .08); }
.agp-win_img { display: block; width: 100%; height: auto; }
.agp-side { width: 100%; max-width: 42rem; }
.slde_section.agp-band { background: var(--sp-soft, #f5f6fa); }
.agp-link { font-weight: 600; color: var(--agp-blue); text-decoration: none; }
.agp-link:hover { text-decoration: underline; }

/* ------------------------------------------------ cards */
.agp-why, .agp-points, .agp-docs { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.agp-why { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.agp-why li, .agp-points li, .agp-docs li { position: relative; display: flex; flex-direction: column; gap: .5rem; padding: 1.25rem; border-radius: .875rem; background: #fff; border: 1px solid var(--agp-line); }
.agp-why li b, .agp-docs li b { font-weight: 600; }
.agp-why li > span:last-child, .agp-docs li > span:not([class]) { font-size: .9375rem; line-height: 1.5; color: var(--agp-muted); }
.agp-why_ic, .agp-docs_ic { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: .25rem; border-radius: .75rem; font-size: 1.35rem; }
.agp-why_ic.is-a { background: #e9f0ff; }
.agp-why_ic.is-b { background: #e6f8f9; }
.agp-why_ic.is-c { background: #fff1e6; }
.agp-why_ic.is-d { background: #f1ecff; }

.agp-points { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.agp-points.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 2rem; }
.agp-points li { display: block; font-size: .9375rem; line-height: 1.55; color: var(--agp-muted); }
.agp-points li strong { color: var(--agp-ink); font-weight: 600; }

/* #docs: one card per kind of label document, with a badge and an example line */
.agp-docs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.agp-docs_ic { background: #f1f3f9; }
.agp-docs li em { position: absolute; top: 1.25rem; right: 1.25rem; padding: .2rem .6rem; border-radius: 999px; font-style: normal; font-size: .75rem; font-weight: 600; color: #4a5068; background: #eef0f6; }
.agp-docs li em.is-every { color: #0b6b70; background: #dff7f8; }
.agp-docs li em.is-mem { color: #5b3fc4; background: #efeaff; }
.agp-docs li em.is-ro { color: #8a5a00; background: #fff3c4; }
.agp-docs li q { margin-top: auto; padding: .6rem .75rem; border-left: 3px solid var(--sp-cyan, #11ced7); border-radius: 0 .5rem .5rem 0; background: #f6f8fb; font-size: .875rem; line-height: 1.45; color: var(--agp-ink); }
.agp-docs_note { margin: 1.25rem 0 0; font-size: .9375rem; color: var(--agp-muted); }

/* ------------------------------------------------ #mcp: carousel of approval cards (js/ai-agents.js) */
.agp-car { width: 100%; max-width: 34rem; margin: 0 auto; }
.agp-car_track { position: relative; display: grid; padding: 0 0 1.25rem; }
.agp-car_track::before, .agp-car_track::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: .6rem; height: 2rem; border-radius: 0 0 1rem 1rem; background: #f3eed9; border: 1px solid #eadfb2; border-top: 0; }
.agp-car_track::after { left: 12%; right: 12%; bottom: 0; background: #ece6cc; }
.agp-car_card { grid-area: 1 / 1; position: relative; z-index: 1; display: flex; flex-direction: column; gap: .55rem; padding: 1.4rem 1.5rem; border-radius: 1rem; background: #fbf8ec; border: 1px solid #ecdc9c; box-shadow: 0 1.25rem 2.5rem rgba(16, 20, 44, .12); opacity: 0; transform: translateX(1.5rem); transition: opacity .45s ease, transform .45s ease; pointer-events: none; }
.agp-car_card.is-on { opacity: 1; transform: none; pointer-events: auto; }
.agp-car_kind { align-self: flex-start; padding: .2rem .65rem; border-radius: 999px; font-size: .75rem; font-weight: 600; color: #0b6b70; background: #dff7f8; }
.agp-car_card b { font-size: 1.125rem; font-weight: 600; line-height: 1.35; color: var(--agp-ink); }
.agp-car_reads { font-size: .875rem; color: var(--agp-muted); }
.agp-car_plan { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; font-size: .9375rem; line-height: 1.4; color: var(--agp-ink); }
.agp-car_plan li { display: flex; align-items: flex-start; gap: .55rem; }
.agp-car_plan li::before { content: "✓"; flex: none; width: 1.05rem; height: 1.05rem; margin-top: .1rem; border-radius: .25rem; background: var(--agp-blue); color: #fff; font-size: .7rem; font-weight: 700; display: grid; place-items: center; }
.agp-car_note { font-size: .8125rem; color: #6b7190; }
.agp-car_btns { display: flex; gap: .6rem; margin-top: .4rem; }
.agp-car_btns i { padding: .5rem .9rem; border-radius: .5rem; font-style: normal; font-size: .875rem; font-weight: 600; color: var(--agp-ink); background: #fff; border: 1px solid #d9dce6; }
.agp-car_btns i.is-apply { color: #fff; background: var(--agp-blue); border-color: var(--agp-blue); }
.agp-car_nav { display: flex; align-items: center; justify-content: center; gap: .9rem; margin-top: .75rem; }
.agp-car_nav > button { width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid var(--agp-line); background: #fff; color: var(--agp-ink); font-size: 1.25rem; line-height: 1; cursor: pointer; }
.agp-car_nav > button:hover { border-color: var(--agp-ink); }
.agp-car_dots { display: flex; gap: .4rem; }
.agp-car_dots button { width: .55rem; height: .55rem; padding: 0; border: 0; border-radius: 999px; background: #c9cddb; cursor: pointer; transition: width .3s, background .3s; }
.agp-car_dots button[aria-current="true"] { width: 1.5rem; background: var(--agp-blue); }

/* ------------------------------------------------ #access: who gets what + the Approvals window */
.agp-acc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
.agp-roles { padding: 1.25rem; border-radius: .875rem; background: #fff; border: 1px solid var(--agp-line); }
.agp-roles table { width: 100%; border-collapse: collapse; font-size: .875rem; line-height: 1.35; }
.agp-roles th, .agp-roles td { padding: .7rem .5rem; border-bottom: 1px solid var(--agp-line); text-align: left; vertical-align: top; }
.agp-roles thead th { font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #6b7190; }
.agp-roles tbody th { font-weight: 600; color: var(--agp-ink); }
.agp-roles td { color: var(--agp-muted); }
.agp-roles td::before { content: ""; display: inline-block; width: .55rem; height: .55rem; margin-right: .4rem; border-radius: 50%; vertical-align: .05rem; }
.agp-roles td.is-yes::before { background: #22b573; }
.agp-roles td.is-cond::before { background: #f5a623; }
.agp-roles_note { margin: .9rem 0 0; font-size: .875rem; line-height: 1.5; color: var(--agp-muted); }
.agp-cap { margin: .75rem .25rem 0; font-size: .85rem; line-height: 1.45; color: var(--agp-muted); }
.agp-acc_shot { box-shadow: 0 1.25rem 2.5rem rgba(16, 20, 44, .14); }

/* ------------------------------------------------ FAQ (opened by js/ai-agents.js) */
.agp-faq .faq-p-3 { height: 80px; transition: height .35s ease; }
.agp-faq .faq-3 { position: relative; cursor: pointer; }
.agp-faq .faq-icon { inset: 50% 0 auto auto; width: 24px; height: 24px; margin: -12px 0 0; filter: none; }
.agp-faq .faq-icon::before, .agp-faq .faq-icon::after { content: ""; position: absolute; left: 4px; right: 4px; top: 11px; height: 2px; border-radius: 2px; background: #181b2b; transition: transform .3s; }
.agp-faq .faq-icon::after { transform: rotate(90deg); }
.agp-faq .faq-p-3.is-open .faq-icon::after { transform: rotate(0); }

/* ------------------------------------------------ narrow windows */
@media (max-width: 991px) {
  .agp-why, .agp-docs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agp-acc { grid-template-columns: minmax(0, 1fr); }
  .agp-points.is-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .agp-why, .agp-docs, .agp-points.is-three { grid-template-columns: minmax(0, 1fr); }
  .agp-roles { padding: .75rem; overflow-x: auto; }
  .agp-roles table { font-size: .8rem; min-width: 30rem; }
}
@media (prefers-reduced-motion: reduce) {
  .agp-car_card { transition: none; }
}