/* Skills: what the agents can do (own section #skills). Since 2026-10-16 (critique step 3b) the skills stand side by
   side without numbers or a track: they are independent agents that each process combines in its own way (in a row, side
   by side, or the same skill twice). A click opens a skill's details (below the row on wide screens, below the skill on phones).
   A sixth skill, Orchestrate agents (agent task forces), joined on 2026-10-16. Back as its own section since 2026-10-16
   (Daniel), after a while as the second half of #gap.
   Self-contained: remove this file together with section#skills and js/skills.js. */
.skt {
  position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-flow: row dense; column-gap: 12px;
  margin-top: var(--head-gap);
}

.skt-node {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 6px 22px;
  font: inherit; color: rgba(var(--fg-rgb), 0.62); text-align: center; background: none; border: 0; cursor: pointer; transition: color 0.3s;
}
.skt-hex { display: grid; place-items: center; width: 64px; height: 64px; }
.skt-hex svg { width: 100%; height: 100%; opacity: 0.55; filter: saturate(0.7); transition: opacity 0.3s, filter 0.3s, transform 0.4s var(--ease); }
.skt-node b { font-size: 15px; font-weight: 700; line-height: 1.3; max-width: 12em; }
.skt-node:hover { color: var(--fg); }
.skt-node:hover .skt-hex svg { opacity: 0.85; }
.skt-node:focus-visible { outline-offset: 6px; }
.skt-node[aria-expanded="true"] { color: var(--fg); }
.skt-node[aria-expanded="true"] .skt-hex svg { opacity: 1; filter: drop-shadow(0 0 22px rgba(var(--lav-rgb), 0.85)); transform: scale(1.1); }

/* text inside the details */
.sk-k { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.sk-text { margin-top: 16px; max-width: 46em; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6; color: rgba(var(--fg-rgb), 0.78); }
.sk-inc { display: flex; align-items: center; gap: 16px; margin-top: clamp(26px, 3vw, 40px); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.sk-inc::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.sk-list { columns: 2; column-gap: 48px; margin-top: 20px; } /* reads down the first column, then the second */
.sk-list li { position: relative; break-inside: avoid; margin-bottom: 14px; padding-left: 22px; font-size: 15px; line-height: 1.5; color: rgba(var(--fg-rgb), 0.86); }
.sk-list li::before { content: "+"; position: absolute; left: 0; top: -1px; font-weight: 700; color: var(--accent); }
.sk-close { margin-top: clamp(24px, 3vw, 36px); padding-top: 20px; max-width: 46em; border-top: 1px solid var(--line); font-size: 16px; font-style: italic; line-height: 1.55; color: rgba(var(--fg-rgb), 0.7); }

/* details: two columns, a notch points at the active skill */
.skt-panel {
  position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px);
  margin-top: 8px; padding: clamp(24px, 3vw, 44px); border-radius: 20px; background: rgba(118, 86, 168, 0.12); border: 1px solid rgba(var(--lav-rgb), 0.3);
}
.skt-panel::before {
  content: ""; position: absolute; top: -8px; left: var(--nx, 10%); width: 14px; height: 14px; margin-left: -7px;
  background: inherit; border-left: 1px solid rgba(var(--lav-rgb), 0.3); border-top: 1px solid rgba(var(--lav-rgb), 0.3); transform: rotate(45deg);
}
.js .skt-panel { display: none; }
.js .skt-panel.is-open { display: grid; animation: sktOpen 0.4s var(--ease) both; }
.skt-panel { scroll-margin-bottom: 24px; } /* the open animation starts 6px higher; keep a gap below when it scrolls into view */
@keyframes sktOpen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.skt-panel h3 { margin-top: 12px; font-size: clamp(24px, 2.4vw, 36px); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
.skt-panel .sk-text { font-size: 16px; }
.skt-panel .sk-close { font-size: 15px; }
.skt-inc .sk-inc { margin-top: 4px; }
.skt-inc .sk-list { columns: 1; margin-top: 16px; }
.skt-inc .sk-list li { margin-bottom: 10px; font-size: 15px; }

/* once it scrolls in: each agent lights up once on its own, in no fixed order */
.skt.run .skt-node .skt-hex svg { animation: sktPulse 0.9s ease-out both; }
.skt.run .sn0 .skt-hex svg { animation-delay: 0.25s; } .skt.run .sn1 .skt-hex svg { animation-delay: 1.05s; }
.skt.run .sn2 .skt-hex svg { animation-delay: 0.6s; } .skt.run .sn3 .skt-hex svg { animation-delay: 1.35s; } .skt.run .sn4 .skt-hex svg { animation-delay: 0.85s; } .skt.run .sn5 .skt-hex svg { animation-delay: 0.45s; }
@keyframes sktPulse { 0%, 100% { filter: none; } 30% { opacity: 1; filter: drop-shadow(0 0 22px rgba(var(--lav-rgb), 0.9)); } }
@media (prefers-reduced-motion: reduce) { .skt.run .skt-node .skt-hex svg { animation: none; } .skt-hex svg { transition: none; } }

/* phones: the skills stand one below the other, each opens right below itself */
@media (max-width: 900px) {
  .skt { grid-template-columns: minmax(0, 1fr); }
  .skt-node { flex-direction: row; align-items: center; gap: 14px; padding: 8px 0; text-align: left; }
  .skt-hex { width: 46px; height: 46px; flex: none; }
  .skt-node b { max-width: none; }
  .skt-panel { grid-template-columns: minmax(0, 1fr); gap: 18px; margin: 6px 0 12px; padding: 20px; }
  /* phones: the closing line comes after the list */
  .js .skt-panel.is-open { display: flex; flex-direction: column; gap: 0; }
  .skt-main { display: contents; }
  .skt-inc { order: 1; margin-top: 22px; }
  .skt-panel .sk-close { order: 2; }
  .skt-panel::before { display: none; }
}

/* a short text and "Details +" under every step: the track already says something and shows that there is more */
.skt-node b { color: var(--fg); }
.skt-t { max-width: 15em; font-size: 15px; font-weight: 400; line-height: 1.45; color: rgba(var(--fg-rgb), 0.62); }
.skt-more { margin-top: auto; padding-top: 4px; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; color: var(--accent); }
.skt-more::after { content: " +"; }
.skt-node[aria-expanded="true"] .skt-more::after { content: " −"; }
.skt-node:hover .skt-more { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) {
  .skt-node { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; column-gap: 14px; row-gap: 2px; align-items: start; padding: 10px 0; }
  .skt-hex { grid-column: 1; grid-row: 1 / span 3; align-self: center; }
  .skt-node b { grid-column: 2; grid-row: 1; }
  .skt-t { grid-column: 2; grid-row: 2; max-width: none; }
  .skt-more { grid-column: 2; grid-row: 3; margin-top: 0; padding-top: 0; }
}