/* Platform page: hover and state, responsive rules for the inline-styled markup (overrides need !important). */

/* Pressed feedback on every control of the page (opacity: the graph nodes carry an inline transform). */
#modules button:active, #inside button:active, #ai-control button:active, #mcp button:active { opacity: .8; }

/* Module tabs: the selected one carries the orange state bar; unselected ones darken on hover. */
.pf-tabs [data-tab] { position: relative; }
.pf-tabs [data-tab][aria-pressed="true"]::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 2px; background: var(--orange-500); }
.pf-tabs [data-tab][aria-pressed="false"]:hover { background: rgba(255, 255, 255, .5) !important; }

.pf-reset { text-decoration: underline; text-decoration-color: var(--ink-300); text-underline-offset: 4px; }
.pf-reset:hover { color: var(--ink-900) !important; text-decoration-color: var(--orange-500); }

/* Ask chips: one line each, a long question ends in an ellipsis; the full text is the accessible name and appears in the chat. */
.pf-ask { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pf-ask[aria-pressed="false"]:hover { color: var(--white) !important; border-color: var(--text-on-dark-muted) !important; }

/* Module tabs: where the auto-fit grid inside the sand panel has two tracks, the list would sit alone beside an empty track; put it above the panel. */
@media (max-width: 1159.98px) {
  .pf-tabs, .pf-span2 { grid-column: 1 / -1 !important; }
}
@media (min-width: 702px) and (max-width: 1159.98px) {
  .pf-tabs { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none !important; }
}

@media (max-width: 1000px) {
  .pf-int { grid-template-columns: 1fr !important; gap: 40px !important; }
}

@media (max-width: 800px) {
  .pf-panel, .pf-tint { padding: 16px !important; }
  .pf-tabblock { padding: 96px 20px 48px !important; }
  #mcp { padding-top: 72px !important; }
  #inside, #ai-control, #integrations { padding-top: 72px !important; padding-bottom: 72px !important; }
  .pf-arch { padding: 24px 20px !important; }
  .pf-arch > :first-child { font-size: 36px !important; }
}

/* Hero graph: below 600 px the 520 px diagram does not fit; show its module buttons as a chip list instead of zooming it. */
@media (max-width: 599.98px) {
  .pf-graph { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100% !important; height: auto !important; }
  .pf-graph > svg { display: none; }
  .pf-core { position: static !important; flex: 0 0 100%; flex-direction: row !important; flex-wrap: wrap; gap: 4px 10px !important; width: auto !important; height: auto !important; padding: 12px 16px; outline: 0 !important; margin-bottom: 4px; }
  .pf-node { position: static !important; transform: none !important; }
}

@media (max-width: 560px) {
  .pf-policy { grid-template-columns: 1fr !important; }
  .pf-doc { border-left: 0 !important; padding: 16px 0 0 !important; border-top: 1px solid var(--line-100); }
  .pf-trow { grid-template-columns: 52px 1fr 92px !important; gap: 8px !important; }
  .pf-step { width: 30% !important; text-align: center; }
  .pf-arch { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
  .pf-ask { padding: 8px 10px !important; }
}