/* capabilities.css — Agos homepage only: opening capability explorer, example
   workflow, application rows. Every selector is scoped to an Agos-owned data
   attribute so Reia and Veia are unaffected. */

[data-cap-scene], [data-flow] { position: relative; }
[data-cap-scene], [data-flow] { --cap-1: #6e9be0; --cap-2: #3fadcb; --cap-3: #2bb89a; --cap-4: #57c08a; --cap-5: #d8c56a; --cap-6: #e79a5c; }
:root[data-theme="light"] [data-cap-scene],
:root[data-theme="light"] [data-flow] { --cap-1: #3d6fb8; --cap-2: #1e87a6; --cap-3: #0e8a6e; --cap-4: #2f9b57; --cap-5: #a8842c; --cap-6: #c56a28; }
[data-cap-list], [data-flow-list] { list-style: none; margin: 0; padding: 0; }
[data-cap-button], [data-flow-button] {
  appearance: none; border: 0; background: none; color: inherit; font: inherit;
  text-align: left; cursor: pointer; padding: 0; width: 100%;
}
[data-cap-panel][hidden], [data-flow-panel][hidden] { display: none !important; }

/* ---------- opening head (hero copy) ---------- */
[data-opening-head] {
  display: grid; gap: 18px clamp(28px, 4vw, 64px); align-items: end;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}
/* ---------- opening: mobile density ---------- */
html[data-view="mobile"] [data-opening] { padding-top: 22px !important; }
html[data-view="mobile"] [data-opening-cta] { gap: 10px 18px !important; margin-top: 16px !important; }
html[data-view="mobile"] [data-opening-cta] > a:last-child { font-size: 14px !important; }
html[data-view="mobile"] [data-opening] [data-cap-scene] { margin-top: 22px !important; }
html[data-view="tablet"] [data-opening-head],
html[data-view="mobile"] [data-opening-head] { grid-template-columns: minmax(0, 1fr); }

/* ---------- capability scene: shared pieces ---------- */
[data-cap-toolbar] { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
[data-cap-heading] {
  margin: 0; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink);
}
[data-cap-groups] { display: none; }
[data-cap-group] {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--faint); padding-top: 8px; border-top: 1px solid var(--hairline);
}
[data-cap-axis], [data-cap-focus] { display: none; }
[data-cap-axis] svg, [data-cap-focus] svg { display: block; width: 100%; height: 100%; overflow: visible; }
[data-cap-axis] [data-axis-form] { transition: opacity 240ms ease; opacity: 0.74; }
@media (hover: hover) {
  [data-cap-axis] [data-axis-form]:hover,
  [data-cap-axis] [data-axis-form][data-hovered] { opacity: 0.9; }
  html[data-view="mobile"] [data-cap-scene][data-ready] [data-cap]:not([data-selected]) [data-cap-button]:hover svg { opacity: 0.9; }
}
[data-cap-axis] [data-axis-form][data-selected] { opacity: 1; }
[data-cap-concept] { font-size: 16px; font-weight: 600; line-height: 1.25; color: var(--ink); }
[data-cap-name] { font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
[data-cap-kicker], [data-cap-short] { display: none; }
[data-cap-role] { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
[data-cap-io] { margin: 14px 0 0; display: grid; gap: 0; border-top: 1px solid var(--hairline); }
[data-cap-io] > div { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--hairline); }
[data-cap-io] dt { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); padding-top: 2px; }
[data-cap-io] dd { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
[data-cap-foot] { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; margin-top: 16px; }
[data-cap-motion] {
  display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 10px; white-space: nowrap;
  border: 1px solid var(--hairline-strong); border-radius: 8px; background: var(--panel); color: var(--muted);
  font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
}
[data-cap-motion][hidden] { display: none; }
[data-cap-motion]:hover { color: var(--ink); }

/* ---------- static / no-JS reading: cards ---------- */
[data-cap-list] { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); margin-top: 16px; }
[data-cap] { border: 1px solid var(--hairline); border-radius: 14px; background: var(--page); overflow: hidden; }
[data-cap-button] { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 2px 14px; padding: 14px 16px 4px; }
[data-cap-button] svg { grid-row: span 2; width: 56px; height: auto; color: var(--muted); display: block; overflow: visible; }
[data-cap-panel] { padding: 8px 16px 18px; }

/* ---------- interactive: desktop + tablet (connected axis) ---------- */
html:not([data-view="mobile"]) [data-cap-scene][data-ready] [data-cap-groups] {
  display: grid; margin-top: 18px; column-gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr)) 28px repeat(2, minmax(0, 1fr));
}
[data-cap-group="foundations"] { grid-column: 1 / 5; }
[data-cap-group="operating"] { grid-column: 6 / 8; }
html:not([data-view="mobile"]) [data-cap-scene][data-ready] [data-cap-axis] { display: block; height: 214px; margin: 2px 0 0; }
html:not([data-view="mobile"]) [data-cap-scene][data-ready] [data-cap-list] {
  margin-top: 0; gap: 0 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr)) 28px repeat(2, minmax(0, 1fr));
}
html:not([data-view="mobile"]) [data-cap-scene][data-ready] [data-cap] { display: contents; }
html:not([data-view="mobile"]) [data-cap-scene][data-ready] [data-cap-button] {
  grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 4px 8px 14px; border-radius: 10px; position: relative;
}
html:not([data-view="mobile"]) [data-cap-scene][data-ready] [data-cap-button] svg { display: none; }
html:not([data-view="mobile"]) [data-cap-scene][data-ready] [data-cap-button]::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 2px; border-radius: 2px; background: transparent;
}
html:not([data-view="mobile"]) [data-cap-scene][data-ready] [data-cap]:nth-child(1) [data-cap-button] { grid-column: 1; }
html:not([data-view="mobile"]) [data-cap-scene][data-ready] [data-cap]:nth-child(2) [data-cap-button] { grid-column: 2; }
html:not([data-view="mobile"]) [data-cap-scene][data-ready] [data-cap]:nth-child(3) [data-cap-button] { grid-column: 3; }
html:not([data-view="mobile"]) [data-cap-scene][data-ready] [data-cap]:nth-child(4) [data-cap-button] { grid-column: 4; }
html:not([data-view="mobile"]) [data-cap-scene][data-ready] [data-cap]:nth-child(5) [data-cap-button] { grid-column: 6; }
html:not([data-view="mobile"]) [data-cap-scene][data-ready] [data-cap]:nth-child(6) [data-cap-button] { grid-column: 7; }
html:not([data-view="mobile"]) [data-cap-scene][data-ready] [data-cap-panel] {
  grid-row: 2; grid-column: 1 / -1; margin-top: 2px;
  border: 1px solid var(--hairline); border-radius: 14px; background: color-mix(in srgb, var(--panel) 88%, transparent);
  padding: clamp(18px, 2.2vw, 24px);
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(18px, 2.6vw, 40px); align-items: stretch;
}
html:not([data-view="mobile"]) [data-cap-scene][data-ready] [data-cap-role] { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.42; font-weight: 500; }
html:not([data-view="mobile"]) [data-cap-scene][data-ready] [data-cap-io] {
  margin: 0; border-top: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px;
}
html:not([data-view="mobile"]) [data-cap-scene][data-ready] [data-cap-io] > div {
  grid-template-columns: minmax(0, 1fr); align-content: start; gap: 8px; padding: 0 0 0 18px; border-bottom: 0; border-left: 1px solid var(--hairline);
}
html[data-view="tablet"] [data-cap-scene][data-ready] [data-cap-panel] { grid-template-columns: minmax(0, 1fr); }
html[data-view="tablet"] [data-cap-scene][data-ready] [data-cap-concept] { font-size: 14.5px; }
html[data-view="tablet"] [data-cap-scene][data-ready] [data-cap-name] { font-size: 10.5px; }
html[data-view="tablet"] [data-cap-scene][data-ready] [data-cap-axis] { height: 176px; }

/* selection (desktop) */
html:not([data-view="mobile"]) [data-cap-scene][data-ready] [data-cap]:not([data-selected]) [data-cap-concept] { color: var(--muted); }
html:not([data-view="mobile"]) [data-cap-scene][data-ready] [data-cap-button]:hover [data-cap-concept] { color: var(--ink); }

/* ---------- interactive: mobile (focus form + 3 × 2 role selector) ---------- */
html[data-view="mobile"] [data-cap-scene][data-ready] [data-cap-focus] {
  display: block; height: 136px; margin: 0 auto; max-width: 280px;
}
html[data-view="mobile"] [data-cap-scene][data-ready] [data-cap-list] {
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 6px;
}
html[data-view="mobile"] [data-cap-scene][data-ready] [data-cap] { display: contents; }
html[data-view="mobile"] [data-cap-scene][data-ready] [data-cap-button] {
  grid-row: auto; display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-height: 72px; padding: 6px 4px 8px; border: 1px solid var(--hairline); border-radius: 10px;
}
html[data-view="mobile"] [data-cap-scene][data-ready] [data-cap-button] svg { width: 100%; max-width: 40px; }
html[data-view="mobile"] [data-cap-scene][data-ready] [data-cap-concept] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html[data-view="mobile"] [data-cap-scene][data-ready] [data-cap-name] { display: none; }
html[data-view="mobile"] [data-cap-scene][data-ready] [data-cap-short] { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.2; color: var(--muted); text-align: center; }
html[data-view="mobile"] [data-cap-scene][data-ready] [data-cap][data-selected] [data-cap-short] { color: var(--ink); }
html[data-view="mobile"] [data-cap-scene][data-ready] [data-cap]:not([data-selected]) [data-cap-button] svg { opacity: 0.72; }
html[data-view="mobile"] [data-cap-scene][data-ready] [data-cap][data-selected] [data-cap-button] { border-color: var(--c); background: var(--panel); }
html[data-view="mobile"] [data-cap-scene][data-ready] [data-cap]:nth-child(1)[data-selected] svg { color: var(--cap-1); }
html[data-view="mobile"] [data-cap-scene][data-ready] [data-cap]:nth-child(2)[data-selected] svg { color: var(--cap-2); }
html[data-view="mobile"] [data-cap-scene][data-ready] [data-cap]:nth-child(3)[data-selected] svg { color: var(--cap-3); }
html[data-view="mobile"] [data-cap-scene][data-ready] [data-cap]:nth-child(4)[data-selected] svg { color: var(--cap-4); }
html[data-view="mobile"] [data-cap-scene][data-ready] [data-cap]:nth-child(5)[data-selected] svg { color: var(--cap-5); }
html[data-view="mobile"] [data-cap-scene][data-ready] [data-cap]:nth-child(6)[data-selected] svg { color: var(--cap-6); }
html[data-view="mobile"] [data-cap-scene][data-ready] [data-cap-panel] {
  display: block; grid-row: 3; grid-column: 1 / -1; margin-top: 6px; padding: 16px;
  border: 1px solid var(--hairline); border-radius: 14px; background: var(--panel);
}
html[data-view="mobile"] [data-cap-scene][data-ready] [data-cap-kicker] { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
[data-k-concept] { font-size: 19px; font-weight: 600; color: var(--ink); }
[data-k-name] { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
html[data-view="mobile"] [data-cap-io] > div { grid-template-columns: minmax(0, 1fr); gap: 3px; }

/* ---------- example workflow ---------- */
[data-flow-list] { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
[data-flow-step] { border: 1px solid var(--hairline); border-radius: 12px; background: var(--page); }
[data-flow-button] { display: grid; gap: 3px; padding: 12px 14px; position: relative; }
[data-flow-num] { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
[data-flow-title] { font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.3; }
[data-flow-caps] { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 5px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--muted); }
[data-flow-caps] > span { display: inline-flex; align-items: center; gap: 5px; }
[data-flow-caps] svg { width: 18px; height: 16px; display: block; color: var(--muted); overflow: visible; }
[data-flow-step][data-gate] { border-style: dashed; border-color: var(--hairline-strong); }
[data-flow-panel] { padding: 0 14px 14px; }
[data-flow-panel] dl { margin: 0; display: grid; border-top: 1px solid var(--hairline); }
[data-flow-panel] dl > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--hairline); }
[data-flow-panel] dt { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); padding-top: 2px; }
[data-flow-panel] dd { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); font-variant-numeric: tabular-nums; }
[data-flow-panel] dd strong { color: var(--ink); font-weight: 600; }
[data-flow-panel] code { font-family: var(--mono); font-size: 13px; color: var(--ink); }
[data-state] {
  display: inline-flex; align-items: center; margin: 0 0 10px; padding: 3px 9px; border-radius: 5px; white-space: nowrap;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid var(--hairline-strong); color: var(--ink);
}
[data-state="proposed"] { border-style: dashed; color: var(--muted); }

html:not([data-view="mobile"]) [data-flow][data-ready] [data-flow-list] { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0 8px; }
html:not([data-view="mobile"]) [data-flow][data-ready] [data-flow-step] { display: contents; }
html:not([data-view="mobile"]) [data-flow][data-ready] [data-flow-button] {
  grid-row: 1; align-content: start; border: 1px solid var(--hairline); border-radius: 12px; background: var(--page); min-height: 104px;
}
html:not([data-view="mobile"]) [data-flow][data-ready] [data-flow-step][data-gate] [data-flow-button] { border-style: dashed; border-color: var(--hairline-strong); background: transparent; }
html:not([data-view="mobile"]) [data-flow][data-ready] [data-flow-step][data-selected] [data-flow-button] { border-color: var(--ink); }
html:not([data-view="mobile"]) [data-flow][data-ready] [data-flow-panel] {
  grid-row: 2; grid-column: 1 / -1; margin-top: 8px; padding: clamp(16px, 2vw, 22px);
  border: 1px solid var(--hairline); border-radius: 12px; background: var(--page);
}
html[data-view="tablet"] [data-flow][data-ready] [data-flow-list] { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
html[data-view="tablet"] [data-flow][data-ready] [data-flow-button] { grid-row: auto; min-height: 0; }
html[data-view="tablet"] [data-flow][data-ready] [data-flow-panel] { grid-row: 3; grid-column: 1 / -1; margin-top: 0; }
html[data-view="mobile"] [data-flow][data-ready] [data-flow-step][data-selected] { border-color: var(--ink); }
html[data-view="mobile"] [data-flow-panel] dl > div { grid-template-columns: minmax(0, 1fr); gap: 3px; }

/* ---------- application rows ---------- */
[data-app-grid] { display: grid; gap: clamp(28px, 3.4vw, 44px); margin-top: clamp(22px, 3vw, 34px); }
[data-app-row] {
  display: grid; gap: clamp(18px, 2.6vw, 40px); align-items: center;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
}
html[data-view="tablet"] [data-app-row],
html[data-view="mobile"] [data-app-row] { grid-template-columns: minmax(0, 1fr); }

/* ---------- colour detail: capability hues carried into text and glyphs ---------- */
[data-cap]:nth-child(1) { --c: var(--cap-1); } [data-cap]:nth-child(2) { --c: var(--cap-2); } [data-cap]:nth-child(3) { --c: var(--cap-3); }
[data-cap]:nth-child(4) { --c: var(--cap-4); } [data-cap]:nth-child(5) { --c: var(--cap-5); } [data-cap]:nth-child(6) { --c: var(--cap-6); }
[data-cap-scene] [data-cap] { --c-text: color-mix(in srgb, var(--c) 78%, var(--ink)); }
/* names always carry their hue (quieter until selected); colour never stands alone — the name is text */
[data-cap-scene][data-ready] [data-cap] [data-cap-name] { color: color-mix(in srgb, var(--c-text) 62%, var(--faint)); }
[data-cap-scene][data-ready] [data-cap][data-selected] [data-cap-name] { color: var(--c); }
[data-cap-scene] [data-cap-button] svg { color: color-mix(in srgb, var(--c) 70%, var(--muted)); }
[data-cap-scene] [data-k-name] { color: var(--c-text); }
html:not([data-view="mobile"]) [data-cap-scene][data-ready] [data-cap][data-selected] [data-cap-button]::after { background: var(--c); }
/* workflow tags wear the hue of the capability they name */
[data-flow-caps] > span:has(svg[data-cap-mini="prism"]) { --c: var(--cap-1); }
[data-flow-caps] > span:has(svg[data-cap-mini="plexus"]) { --c: var(--cap-2); }
[data-flow-caps] > span:has(svg[data-cap-mini="manifold"]) { --c: var(--cap-3); }
[data-flow-caps] > span:has(svg[data-cap-mini="ensemble"]) { --c: var(--cap-4); }
[data-flow-caps] > span:has(svg[data-cap-mini="relay"]) { --c: var(--cap-5); }
[data-flow-caps] > span:has(svg[data-cap-mini="orbit"]) { --c: var(--cap-6); }
[data-flow-caps] > span:has(svg) { color: color-mix(in srgb, var(--c) 78%, var(--ink)); }
[data-flow-caps] > span:has(svg) svg { color: var(--c); }

/* ---------- Agos header: one row in the tablet band ----------
   The shared responsive rule stacks the nav under the brand at 768–960px for the
   product sites' longer nav. Agos carries two nav items, so one 64px row fits. */
@media (min-width: 768px) and (max-width: 960px) {
  html[data-site="agos"][data-view="tablet"] [data-site-header-inner] { height: 64px !important; display: flex !important; }
  html[data-site="agos"][data-view="tablet"] [data-site-nav] { display: flex !important; font-size: 11.5px !important; gap: 20px !important; }
  html[data-site="agos"][data-view="tablet"] section[id] { scroll-margin-top: 78px !important; }
}

/* ---------- detail panels: one fixed footprint, aligned columns, capability colour ----------
   All six panels share one grid cell; unselected ones stay laid out but invisible, so the
   tallest sets the height and nothing below moves when the selection changes. */
html:not([data-view="mobile"]) [data-cap-scene][data-ready] [data-cap-panel][hidden] { display: grid !important; visibility: hidden; pointer-events: none; }
html[data-view="mobile"] [data-cap-scene][data-ready] [data-cap-panel][hidden] { visibility: hidden; pointer-events: none; }
html[data-view="mobile"] [data-cap-scene][data-ready] [data-cap-panel][hidden] { display: block !important; }
html:not([data-view="mobile"]) [data-cap-scene][data-ready] [data-cap-kicker] { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
html:not([data-view="mobile"]) [data-cap-scene][data-ready] [data-k-concept] { display: none; }
[data-cap-scene] [data-k-name] { font-size: 11px; letter-spacing: 0.16em; }
[data-cap-scene][data-ready] [data-cap-io] > div { border-color: color-mix(in srgb, var(--c) 34%, var(--hairline)) !important; }
[data-cap-scene][data-ready] [data-cap-io] dt { color: var(--c-text); letter-spacing: 0.14em; }
[data-cap-scene][data-ready] [data-cap-io] dd { font-size: 15px; line-height: 1.55; color: color-mix(in srgb, var(--muted) 70%, var(--ink)); }

/* workflow panels: same fixed-footprint treatment on desktop and tablet */
html:not([data-view="mobile"]) [data-flow][data-ready] [data-flow-panel][hidden] { display: block !important; visibility: hidden; pointer-events: none; }

[data-cap-scene] [data-cap-key] { font-weight: 600; color: var(--ink); }