/* =========================================================================
   Kentucky Open Science — platform stack page (uses theme.css tokens)
   ========================================================================= */

/* ---- Stack diagram: Astral over the toolkit over GaiaKeep over Cresco,
        with PanAtlas beside the toolkit and Astral ---- */

.kyos-sd {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px minmax(220px, 300px);
  grid-template-areas:
    "r1 l1 atlas"
    "r2 l2 atlas"
    "r3 .  atlas"
    "r4 r4 r4";
  gap: 10px 0;
  margin-bottom: 1rem;
}
.kyos-sd__r1 { grid-area: r1; }
.kyos-sd__r2 { grid-area: r2; }
.kyos-sd__r3 { grid-area: r3; }
.kyos-sd__r4 { grid-area: r4; }
.kyos-sd__link--r1 { grid-area: l1; }
.kyos-sd__link--r2 { grid-area: l2; }
.kyos-sd__atlas { grid-area: atlas; }

.kyos-sd__layer,
.kyos-sd__atlas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  padding: 1rem 1.2rem;
  border-radius: var(--kyos-radius-lg);
  border: 1px solid var(--kyos-border);
  background: var(--kyos-bg);
  box-shadow: var(--kyos-shadow-card);
}
/* Each layer has its own hue so the layers read apart at a glance. */
.kyos-sd__layer--agents    { --sd-bg: #eff6ff; --sd-edge: #2563eb; --sd-ink: #1d4ed8; }
.kyos-sd__layer--toolkit   { --sd-bg: #fffbeb; --sd-edge: #d97706; --sd-ink: #b45309; }
.kyos-sd__layer--data      { --sd-bg: #ecfdf5; --sd-edge: #059669; --sd-ink: #047857; }
.kyos-sd__layer--transport { --sd-bg: #fff1f2; --sd-edge: #e11d48; --sd-ink: #be123c; }
.kyos-sd__layer {
  background: var(--sd-bg);
  border-color: color-mix(in srgb, var(--sd-edge) 35%, transparent);
  border-left: 6px solid var(--sd-edge);
}
.kyos-sd__layer .kyos-sd__label { color: var(--sd-ink); }
.kyos-sd__layer .kyos-sd__items a { border-color: color-mix(in srgb, var(--sd-edge) 40%, transparent); }
.kyos-sd__layer .kyos-sd__items a:hover { border-color: var(--sd-edge); color: var(--sd-ink); }

.kyos-sd__atlas {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  background: #f5f3ff;
  border-color: #ddd6fe;
  border-left: 6px solid var(--kyos-violet);
}

.kyos-sd__label {
  min-width: 128px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kyos-cyan-dark);
}
.kyos-sd__atlas .kyos-sd__label { color: var(--kyos-violet); min-width: 0; }

.kyos-sd__items { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.kyos-sd__items a {
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: var(--kyos-bg);
  border: 1px solid var(--kyos-border);
  color: var(--kyos-slate-800);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: var(--kyos-transition);
}
.kyos-sd__items a:hover { border-color: var(--kyos-cyan); color: var(--kyos-cyan-dark); }
.kyos-sd__note { font-size: 0.8rem; line-height: 1.45; color: var(--kyos-slate-600); }
.kyos-sd__note--base { margin-top: auto; padding-top: 0.5rem; border-top: 1px dashed #ddd6fe; width: 100%; color: var(--kyos-violet); font-weight: 600; }

.kyos-sd__link { display: flex; align-items: center; justify-content: center; }
.kyos-sd__arrow { font-size: 1.6rem; line-height: 1; color: var(--kyos-violet); }

@media (max-width: 760px) {
  .kyos-sd {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "atlas" "l1" "r1" "l2" "r2" "r3" "r4";
    gap: 8px;
  }
  .kyos-sd__link--r2 { display: none; }
  .kyos-sd__arrow { transform: rotate(90deg); }
}

/* ---- Layer sections ---- */

.kyos-layer { margin-top: 2.5rem; }
.kyos-layer__head { margin-bottom: 1rem; max-width: 820px; }
.kyos-layer__label {
  display: inline-block;
  margin-bottom: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kyos-cyan-dark);
}
.kyos-layer--side .kyos-layer__label { color: var(--kyos-violet); }
.kyos-layer__desc { margin: 0; color: var(--kyos-slate-700); line-height: 1.6; }
.kyos-layer__note { margin-top: 1rem; font-size: 0.9rem; color: var(--kyos-slate-600); line-height: 1.6; max-width: 820px; }

.kyos-hub-figure { margin: 0; padding: 1rem; background: #fff; border: 1px solid var(--kyos-border); border-radius: var(--kyos-radius-lg); }
.kyos-hub-figure img { width: 100%; height: auto; display: block; }
.kyos-hub-figure figcaption { margin-top: 0.75rem; font-size: 0.85rem; color: var(--kyos-text-muted); line-height: 1.55; }

/* The 'Where it runs' figure sits directly under the stack diagram. */
.kyos-layer--runs { margin-top: 1.5rem; }