/* Capabilities: "Establishing an AI Command Center" (2026-10-12). Replaces the four Foundations cards
   in #foundations. Loaded after capabilities-uplift.css, only by capabilities/index.html.

   Colours: the site kit's tokens (site.css: --pine and its lift and deep, --signal, --soft, --card,
   --card-line, --tile, and since 2026-10-16 the amber family), plus the diagram's own values below as
   --cc-* properties: the read and draft lines, the text greys, the system cards' lighter shadow. Lime is
   the hub's alone. Amber keeps its one meaning on this site, a human decision: here, draft access and
   the team's approval. The icon fills inside the SVGs use the same greens. The CTA is the kit's .button.

   Layout: three states.
     >= 1340px  copy beside the diagram
     900-1339   copy above the diagram
     <= 899     the diagram becomes a column: hub trio, systems list with Read / Draft / Write tags, panels
   The desktop diagram is a fixed 500px-tall grid. The two connector SVGs are drawn 1:1 in pixels, so the
   y positions in their paths are the centres of the boxes they join; change a box height and the paths
   must change with it (the numbers are listed beside each rule).

   Motion: the pulses and the port glow run only while html[data-motion="running"], the page state that
   site.js keeps for the Pause control and for reduced motion. Without JavaScript nothing moves. */

.command-center {
  --cc-sage-line: #d5dfd0;
  --cc-text: #3d453a;
  --cc-text-quiet: #4c5449;
  /* Read and draft lines and dots reach 3:1 on ivory and on the halo (WCAG 1.4.11; darkened from #a3aaa0,
     #8d948a, #c08a2e and #e3ab3d on 2026-10-12). The legend swatches in the HTML use the same two values. */
  --cc-read: #7a8177;
  --cc-read-dot: #7a8177;
  --cc-draft: #a87419;
  --cc-draft-dot: #a87419;
  --cc-card-shadow: inset 0 1px 0 #fff, 0 2px 5px rgba(18, 43, 34, .05), 0 16px 26px -18px rgba(18, 43, 34, .3);
  position: relative;
  overflow: hidden;
  background: var(--ivory);
}

/* ---------- 1. Copy beside the diagram ---------- */
.command-center .cc-wrap { display: flex; align-items: center; gap: 44px 40px; padding-top: 60px; padding-bottom: 52px; }
.cc-copy { flex: 0 0 clamp(380px, 29vw, 420px); min-width: 0; }
.cc-stage { flex: 1 1 0; min-width: 0; }
.command-center .eyebrow { margin-bottom: 24px; }
.command-center .cc-title { margin: 0 0 28px; color: var(--ink); font-family: var(--brand); font-size: clamp(44px, 4.4vw, 64px); font-weight: 500; line-height: .98; letter-spacing: -.035em; }
.cc-title span, .cc-title strong { display: block; }
.cc-title strong { color: var(--pine); font-weight: 700; word-spacing: .06em; }
.cc-lede { max-width: 400px; color: var(--cc-text); font-size: 19.5px; line-height: 1.5; text-wrap: pretty; }
.cc-built { margin: 28px 0; padding-top: 22px; color: var(--ink); font-family: var(--brand); font-size: 21px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; background: linear-gradient(#a9c4ae, #a9c4ae) left top / 72px 2px no-repeat; }

/* ---------- 2. The diagram: systems | links | core | links | panels, then the legend ---------- */
.cc-diagram { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 168fr) 88px minmax(0, 248fr) 76px minmax(0, 272fr); grid-template-rows: 500px auto; margin: 0; }

/* Systems. 18 (label) + 12 + six 54px cards 12px apart = 414, centred in 500: card centres at
   y = 100, 166, 232, 298, 364, 430. */
.cc-systems { display: flex; flex-direction: column; justify-content: center; gap: 12px; min-width: 0; }
.cc-kicker { height: 18px; color: var(--forest); font-size: 12px; font-weight: 500; line-height: 18px; letter-spacing: .2em; }
.cc-systems ul { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.cc-system { position: relative; display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 10px; border: 1px solid var(--card-line); border-radius: 13px; background: var(--card); box-shadow: var(--cc-card-shadow); }
.cc-system svg { width: 30px; height: 30px; }
.cc-system-name { flex: 1; min-width: 0; color: var(--ink); font-size: 15.5px; font-weight: 500; line-height: 1.25; letter-spacing: -.01em; }
/* The access level is drawn by the connector on wide screens; the words stay for screen readers and
   become visible tags in the column layout. */
.cc-access { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Connectors. Access is shown by line style as well as colour: thin grey = read, dashed amber = draft,
   thick green = write. */
.command-center .cc-links { position: relative; z-index: 2; width: 88px; height: 500px; overflow: visible; }
.command-center .cc-links-out { width: 76px; }
.cc-line-read { stroke: var(--cc-read); stroke-width: 2; }
.cc-line-draft { stroke: var(--cc-draft); stroke-width: 2.5; stroke-dasharray: 7 6; stroke-linecap: round; }
.cc-line-write { stroke: var(--forest); stroke-width: 3; }
.cc-line-out { stroke: var(--forest); stroke-width: 2.5; }
.cc-dot { stroke: var(--card); stroke-width: 2; }
.cc-dot-read { fill: var(--cc-read-dot); }
.cc-dot-draft { fill: var(--cc-draft-dot); }
.cc-dot-write { fill: var(--forest); }
.cc-port-dot { stroke: var(--pine); stroke-width: 2; }
.cc-port-read { fill: #cfd4cb; }
.cc-port-draft { fill: var(--cc-draft-dot); }
.cc-port-write { fill: var(--signal); }
.cc-pulse { opacity: 0; stroke-linecap: round; }
.cc-pulse-in { stroke: #596056; stroke-width: 4; stroke-dasharray: 5 95; }
.cc-pulse-out { stroke: var(--signal); stroke-width: 4.5; stroke-dasharray: 7 93; }
/* Hub to panel (2026-10-12). These paths are drawn from the hub, so the default cc-in already carries the
   pulse outward; cc-pulse-out would reverse it. */
.cc-pulse-panel { stroke: var(--signal); stroke-width: 4; stroke-dasharray: 7 93; }

/* Core. Team card 2-72, stem 72-120, hub 120-370, stem 370-418, approval card 418-490. Hub ports for
   the systems at y = 170, 200, 230, 260, 290, 320; for the panels at y = 190, 245, 300. */
.cc-core { position: relative; min-width: 0; }
.cc-node { position: absolute; display: flex; align-items: center; justify-content: center; gap: 13px; padding: 0 14px; border-radius: 15px; }
.cc-node p { display: flex; flex-direction: column; min-width: 0; }
.cc-node strong { color: var(--ink); font-family: var(--brand); font-size: 17px; font-weight: 600; line-height: 1.25; letter-spacing: -.005em; }
.cc-node span { font-size: 14px; line-height: 1.4; }
.cc-team { left: -18px; right: -18px; top: 2px; height: 70px; border: 1.5px solid #a9c4ae; background: #f4f8f0; box-shadow: inset 0 1px 0 #fff, 0 18px 28px -20px rgba(18, 43, 34, .42); }
.cc-team span { color: var(--cc-text); }
.cc-team svg { width: 38px; height: 38px; }
.cc-approve { left: 0; right: 0; top: 418px; height: 72px; gap: 14px; border: 1.5px solid var(--amber-line); background: var(--amber-soft); box-shadow: 0 18px 28px -20px rgba(111, 78, 16, .5); }
.cc-approve span { color: var(--amber-ink); }
.cc-approve svg { width: 34px; height: 34px; }
.cc-stem { position: absolute; left: 50%; width: 3px; height: 48px; margin-left: -1.5px; }
.cc-stem-team { top: 72px; background: var(--forest); }
.cc-stem-approve { top: 370px; background: var(--cc-draft); }
/* The four stem ends, each drawn by the box it sits on so it follows the box in every layout. */
.cc-team::after, .cc-approve::before, .cc-hub::before, .cc-hub::after { content: ""; position: absolute; z-index: 3; left: 50%; box-sizing: border-box; border-radius: 50%; }
.cc-team::after, .cc-approve::before { width: 12px; height: 12px; margin-left: -6px; border: 2px solid var(--card); }
.cc-team::after { bottom: -7.5px; background: var(--forest); }
.cc-approve::before { top: -7.5px; background: var(--cc-draft); }
.cc-hub::before, .cc-hub::after { width: 15px; height: 15px; margin-left: -7.5px; border: 2px solid var(--pine); }
.cc-hub::before { top: -7.5px; background: var(--signal); box-shadow: 0 0 0 5px rgb(196 232 107 / 34%); }
.cc-hub::after { bottom: -7.5px; background: var(--cc-draft-dot); }

/* The hub. No z-index of its own: the glow behind it is its child and has to fall behind its fill. */
.cc-hub { position: absolute; left: 0; right: 0; top: 120px; height: 250px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 16px; border-radius: 34px; background: linear-gradient(165deg, var(--pine-lift) 0%, var(--pine) 46%, var(--pine-deep) 100%); color: var(--ivory); text-align: center; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 0 0 1px rgba(255, 255, 255, .05), 0 0 0 6px rgba(196, 218, 190, .6), 0 2px 4px rgba(18, 43, 34, .2), 0 22px 32px -18px rgba(18, 43, 34, .45), 0 50px 72px -36px rgba(18, 43, 34, .62); }
.cc-hub svg { width: 44px; height: 44px; margin-bottom: 12px; }
.cc-spark { fill: var(--signal); }
.cc-hub-kicker { color: #bcd5c1; font-size: 11.5px; font-weight: 500; line-height: 1.4; letter-spacing: .22em; }
.cc-hub-name { margin: 6px 0 12px; font-family: var(--brand); font-size: 33px; font-weight: 700; line-height: 1.04; letter-spacing: -.025em; word-spacing: .05em; text-wrap: balance; }
.cc-hub-verbs { color: #e1e9de; font-size: 15px; line-height: 1.4; letter-spacing: .06em; }
/* A tight two-step halo, 22px and 44px beyond the hub. It must not reach the cards around it. */
.cc-glow { position: absolute; z-index: -1; inset: -22px; border-radius: 54px; background: rgba(205, 224, 198, .42); }
.cc-glow::before { content: ""; position: absolute; z-index: -1; inset: -22px; border-radius: 78px; background: rgba(203, 222, 196, .55); filter: blur(22px); }

/* Panels. Three 136px cards 22px apart = 452, centred in 500: centres at y = 92, 250, 408. */
.cc-panels { display: flex; flex-direction: column; justify-content: center; gap: 22px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.cc-panel { position: relative; display: flex; align-items: center; gap: 11px; height: 136px; padding: 0 8px 0 17px; overflow: hidden; border: 1px solid var(--card-line); border-radius: 16px; background: var(--card); box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(18, 43, 34, .06), 0 22px 36px -20px rgba(18, 43, 34, .32); }
.cc-panel::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--pine); }
.cc-panel svg { width: 50px; height: 42px; }
.cc-panel > div { min-width: 0; }
.command-center .cc-panel-title { color: var(--ink); font-family: var(--brand); font-size: 19px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.cc-panel-sub { margin-top: 2px; color: #2c332a; font-size: clamp(13px, .98vw, 14px); line-height: 1.4; white-space: nowrap; }
.cc-panel-items { margin-top: 7px; color: var(--cc-text-quiet); font-size: 12.5px; line-height: 1.4; }

/* Legend. */
.cc-legend { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 26px; margin-top: 26px; color: #2c332a; font-size: 15px; line-height: 1.4; }
.cc-key { display: inline-flex; align-items: center; gap: 10px; }
.cc-key svg { width: 44px; height: 12px; }
.cc-legend-rule { width: 1px; height: 22px; background: #c3cdbf; }
.cc-legend-note { color: var(--cc-text); }
.command-center .motion-toggle { margin: 0 -8px 0 -6px; color: var(--muted); font-size: 13px; }
.command-center .pause-icon { width: 24px; height: 24px; border-color: var(--line); color: var(--forest); }
.command-center .motion-toggle:hover:not(:disabled) { color: var(--ink); }
/* From 900px the Pause control has a row of its own, at the stage's right edge, like the engagement one: the
   empty full-width item breaks the wrapping legend, and -8px cancels the control's own padding. */
@media (min-width: 900px) {
  .cc-legend::after { content: ""; flex-basis: 100%; order: 1; }
  .command-center .cc-legend .motion-toggle { order: 2; margin-left: auto; margin-right: -8px; }
}

/* ---------- 3. The three benefits ---------- */
.cc-benefits-band { position: relative; border-top: 1px solid var(--cc-sage-line); background: var(--soft); }
.command-center .cc-benefits { display: flex; padding-top: 28px; padding-bottom: 32px; list-style: none; }
.cc-benefit { flex: 1 1 0; display: flex; align-items: center; gap: 20px; min-width: 0; padding: 2px 32px; }
.cc-benefit:first-child { padding-left: 0; }
.cc-benefit:last-child { padding-right: 0; }
.cc-benefit + .cc-benefit { border-left: 1px solid #c3d2c0; }
.cc-benefit-icon { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border: 1px solid var(--tile-line); border-radius: 14px; background: var(--tile); color: var(--pine); }
.cc-benefit-icon svg { width: 28px; height: 28px; }
.cc-benefit > div { min-width: 0; }
.command-center .cc-benefit-title { margin-bottom: 3px; color: var(--ink); font-family: var(--brand); font-size: 21px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.cc-benefit p { color: #454d42; font-size: 16px; line-height: 1.5; }

/* ---------- 4. Motion: only while the page state says running ---------- */
@keyframes cc-in { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes cc-out { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 100; } }
@keyframes cc-port { 0%, 100% { box-shadow: 0 0 0 5px rgb(196 232 107 / 34%); } 50% { box-shadow: 0 0 0 10px rgb(196 232 107 / 12%); } }
html[data-motion="running"] .cc-pulse { opacity: 1; animation: cc-in 4.2s linear infinite; }
html[data-motion="running"] .cc-pulse-out { animation-name: cc-out; }
html[data-motion="running"] .cc-delay-1 { animation-delay: -.7s; }
html[data-motion="running"] .cc-delay-2 { animation-delay: -1.4s; }
html[data-motion="running"] .cc-delay-3 { animation-delay: -2.9s; }
html[data-motion="running"] .cc-delay-4 { animation-delay: -2.8s; }
html[data-motion="running"] .cc-hub::before { animation: cc-port 4.2s ease-in-out infinite; }

/* ---------- 5. Responsive ---------- */
@media (max-width: 1339px) {
  .command-center .cc-wrap { flex-direction: column; align-items: stretch; }
  .cc-copy { flex: none; max-width: 640px; }
  .cc-stage { flex: none; width: 100%; max-width: 940px; margin: 0 auto; }
}
@media (max-width: 1000px) {
  .command-center .cc-benefits { flex-direction: column; padding-top: 10px; padding-bottom: 14px; }
  .cc-benefit, .cc-benefit:first-child, .cc-benefit:last-child { padding: 18px 0; }
  .cc-benefit + .cc-benefit { border-left: 0; border-top: 1px solid #c3d2c0; }
}
@media (max-width: 899px) {
  /* One column: the hub trio, the systems as a list with their access as tags, the panels. */
  .command-center .cc-wrap { gap: 40px; padding-top: 48px; padding-bottom: 44px; }
  .cc-stage { max-width: 560px; }
  .cc-diagram { display: flex; flex-direction: column; }
  .command-center .cc-links, .cc-key, .cc-legend-rule { display: none; }
  .cc-core { order: 1; display: flex; flex-direction: column; align-items: center; padding: 4px 0 0; }
  .cc-node, .cc-hub, .cc-stem { position: relative; left: auto; right: auto; top: auto; }
  .cc-team { width: 286px; max-width: 100%; height: 68px; }
  .cc-hub { width: 268px; max-width: 100%; height: 232px; }
  .cc-approve { width: 268px; max-width: 100%; height: 68px; }
  .cc-stem { height: 30px; margin-left: 0; }
  .cc-systems { order: 2; margin-top: 44px; }
  .cc-systems ul { gap: 0; padding: 4px 14px; border: 1px solid var(--card-line); border-radius: 18px; background: var(--card); box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(18, 43, 34, .06), 0 22px 36px -22px rgba(18, 43, 34, .3); }
  .cc-system { height: auto; min-height: 52px; gap: 12px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .cc-system + .cc-system { border-top: 1px solid #e6ebe1; }
  .cc-access { position: static; width: auto; height: auto; overflow: visible; clip-path: none; flex: none; padding: 3px 10px; border-radius: 999px; background: #eceee8; color: var(--cc-text-quiet); font-size: 12.5px; font-weight: 500; line-height: 1.5; }
  .cc-system[data-access="draft"] .cc-access { background: #f6ebd5; color: #6f4e10; }
  .cc-system[data-access="write"] .cc-access { background: #d6e8d3; color: var(--pine); }
  .cc-legend { order: 3; justify-content: flex-start; margin-top: 12px; }
  .cc-panels { order: 4; gap: 14px; margin-top: 26px; }
  .cc-panel { height: auto; min-height: 112px; gap: 14px; padding: 16px 16px 16px 22px; }
  .cc-panel svg { width: 58px; height: 48px; }
  .cc-panel-sub { font-size: 14.5px; white-space: normal; }
  .cc-panel-items { font-size: 13px; }
}
@media (max-width: 600px) {
  .command-center .cc-wrap { padding-top: 44px; }
  .command-center .cc-title { font-size: clamp(40px, 11.8vw, 46px); }
  .cc-lede { font-size: 18px; }
  .cc-built { font-size: 20px; }
  .command-center .cc-cta { display: flex; }
  .cc-benefit { gap: 16px; }
  .command-center .cc-benefit-title { font-size: 19px; }
  .cc-benefit p { font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .cc-pulse { opacity: 0; animation: none; }
  .cc-hub::before { animation: none; }
}
@media print {
  .cc-pulse, .command-center .motion-toggle { display: none; }
  .cc-glow { display: none; }
}