/* ---------- apps: can AI agents actually work in your apps? ---------- */

.apps {
  /* link line styles, shared by the map and its key: level is line style, never colour */
  --lk-ready: rgba(233, 234, 234, 0.62);
  --lk-api: rgba(233, 234, 234, 0.5);
  --lk-export: rgba(233, 234, 234, 0.5);
  --lk-closed: rgba(233, 234, 234, 0.28);
  padding: var(--section-y) 0;
  background: var(--bg-1);
  border-top: 1px solid var(--line);
}

/* the instrument: the map with its key beside it. One canvas spans both and
   carries the traffic. It sits between the map's back layer (orbits, links)
   and its front layer (core, tiles, labels), so the tiles cover the stream ends. */
.apps-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(0, 0.58fr);
  gap: clamp(40px, 5.5vw, 88px);
  align-items: center;
  margin-top: clamp(56px, 6vw, 88px);
}
.conn-gl { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; pointer-events: none; }
.apps.no-webgl .conn-gl { display: none; }

.conn-map { margin: 0; max-width: 780px; }
.conn-stage { position: relative; }
.conn-stage svg { display: block; width: 100%; height: auto; overflow: visible; }
.conn-back { position: relative; z-index: 0; }
.conn-front { position: absolute; inset: 0; z-index: 2; }
.conn-map figcaption {
  position: relative;
  z-index: 2;
  margin-top: 20px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.45;
  color: var(--fg-3);
}

/* orbits: inner Agent-ready, middle API-friendly, outer Export only; Closed sits outside */
.conn-rings circle { fill: none; stroke: var(--line); stroke-dasharray: 2 6; }
.conn-rings .hub { stroke: var(--line-2); stroke-dasharray: none; }
.lk { fill: none; stroke-width: 1.3; }
.lk-ready { stroke: var(--lk-ready); }
.lk-api { stroke: var(--lk-api); stroke-dasharray: 7 5; }
.lk-export { stroke: var(--lk-export); stroke-dasharray: 1 5; stroke-linecap: round; stroke-width: 1.6; }
.lk-closed { stroke: var(--lk-closed); stroke-dasharray: 3 4; }
.lk-block { fill: none; stroke: var(--fg); stroke-width: 1.5; }
.conn-dots circle,
.conn-dots rect,
.lv-key circle,
.lv-key rect { fill: var(--fg); stroke: none; }

/* the core is the SHIPdock tile; its plate keeps the links from showing through the cut-out */
.conn-core .core-plate { fill: var(--bg-1); }
.conn-core .core-mark { color: var(--fg); fill: var(--fg); }
.conn-core text,
.app text { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; fill: var(--fg); paint-order: stroke; stroke: var(--bg-1); stroke-width: 6px; stroke-linejoin: round; }
.app .app-h { font-size: 9.5px; fill: var(--fg-3); }
.app .nm-ph { display: none; }

/* a real product shows its own full-colour logo on a white tile (the same rounded
   tile as the SHIPdock mark); in-house systems get a hollow tile */
.app .tile-g { transform-box: fill-box; transform-origin: center; }
.app .tile { fill: var(--fg); }
.app-gen .tile { fill: var(--bg-1); stroke: var(--line-3); stroke-width: 1; }
.app-gen .glyph { fill: none; stroke: var(--fg-2); stroke-width: 1.2; }
.app-closed .tile { stroke: var(--line-2); }
.app-closed .glyph { stroke: var(--fg-3); }
.app-closed text { fill: var(--fg-2); }

/* the connection check: a link appears as its check runs out, its app lights up on
   arrival (delays come from the script's schedule, --on) */
.js .conn-map .lk,
.js .conn-map .lk-block,
.js .conn-map .conn-dots { transition: opacity 0.7s linear var(--on, 0s); }
.js .conn-map .app { transition: opacity 0.45s var(--ease-out) var(--on, 0s); }
.js .conn-map:not(.is-in) .lk,
.js .conn-map:not(.is-in) .lk-block,
.js .conn-map:not(.is-in) .conn-dots { opacity: 0; }
.js .conn-map:not(.is-in) .app { opacity: 0.28; }
.conn-map.is-done .lk,
.conn-map.is-done .lk-block,
.conn-map.is-done .app { transition: opacity 0.3s var(--ease-out); }

/* pointing at an app or a key row isolates that level on the map; a click or
   tap pins it (apps.js), and then the other key rows dim too */
.apps-grid { -webkit-tap-highlight-color: transparent; }
.level { transition: opacity 0.3s var(--ease-out); }
.apps-grid[data-focus] .conn-map .lk,
.apps-grid[data-focus] .conn-map .lk-block,
.apps-grid[data-focus] .conn-map .app { opacity: 0.18; }
.apps-grid[data-focus][data-from="map"] .level,
.apps-grid[data-focus][data-from="pin"] .level { opacity: 0.42; }
.apps-grid[data-focus="ready"] .conn-map [data-level="ready"],
.apps-grid[data-focus="api"] .conn-map [data-level="api"],
.apps-grid[data-focus="export"] .conn-map [data-level="export"],
.apps-grid[data-focus="closed"] .conn-map [data-level="closed"],
.apps-grid[data-focus="ready"] .level[data-level="ready"],
.apps-grid[data-focus="api"] .level[data-level="api"],
.apps-grid[data-focus="export"] .level[data-level="export"],
.apps-grid[data-focus="closed"] .level[data-level="closed"] { opacity: 1; }

/* the key: a live line sample, the level in telemetry caps, one line of meaning */
.levels { position: relative; z-index: 2; display: grid; gap: clamp(24px, 2.6vw, 34px); margin: 0; }
.level,
.conn-front .app { cursor: pointer; }
.level dt {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--fg);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.45;
}
.lv-key { flex: none; width: 48px; height: 12px; overflow: visible; }
.lv-key path { fill: none; stroke: var(--lk-ready); stroke-width: 1.3; }
.level[data-level="api"] .lv-key path { stroke: var(--lk-api); stroke-dasharray: 7 5; }
.level[data-level="export"] .lv-key path { stroke: var(--lk-export); stroke-dasharray: 1 5; stroke-linecap: round; stroke-width: 1.6; }
.level[data-level="closed"] .lv-key .lv-line { stroke: var(--lk-closed); stroke-dasharray: 3 4; }
.level[data-level="closed"] .lv-key .lv-x { stroke: var(--fg); stroke-width: 1.4; }
.level dd { margin: 8px 0 0 62px; max-width: 30em; color: var(--fg-2); font-size: 15.5px; line-height: 1.55; text-wrap: pretty; }

@media (max-width: 1099px) {
  .apps-grid { grid-template-columns: minmax(0, 1fr); }
  .levels { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 64px); }
}

@media (max-width: 680px) {
  .levels { grid-template-columns: minmax(0, 1fr); }
}

/* phones on their side: the map beside its key, sized to the short screen */
@media (orientation: landscape) and (max-height: 540px) and (min-width: 600px) and (max-width: 1099px) {
  .apps-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
  .conn-map { max-width: calc((100svh - var(--nav-h) - 48px) * 1.23); }
  .levels { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

/* phone: bigger tiles and heavier line styles; the logo names the product, so only
   in-house systems keep a (stacked) name; hours stay in the SVG description.
   Up to 699px the map draws under 640 units wide, so its text would shrink
   below its set size: here labels are set at 22 units (11px on screen at 360). */
@media (max-width: 699px), (orientation: landscape) and (max-height: 540px) and (min-width: 600px) and (max-width: 1099px) {
  /* right-hand names drop out, so recentre what is left (both layers) */
  .conn-world { transform: translateX(28px); }
  .app .tile-g { transform: scale(1.5); }
  .conn-core .core-tile { transform-box: fill-box; transform-origin: center; transform: scale(1.15); }
  .app .nm,
  .app .app-h { display: none; }
  .app .nm-ph { display: inline; }
  .app text,
  .conn-core text { font-size: 22px; }
  .conn-rings circle { stroke-width: 1.4; stroke-dasharray: 3 8; }
  .conn-rings .hub { stroke-dasharray: none; }
  .lk { stroke-width: 2.2; }
  .lk-api { stroke-dasharray: 10 7; }
  .lk-export { stroke-width: 2.8; stroke-dasharray: 1 8; }
  .lk-closed { stroke-dasharray: 5 6; }
  .lk-block { stroke-width: 2.4; }
  .level dd { margin-left: 0; }
}