/* Guides for Jira and Confluence (/guides/<jira-or-confluence-slug>/) and the hub /atlassian/.
   Builds on /style.css (tokens, header, footer, .doc, tables, pre.code, .products) and /assets/guides.css
   (guide hero, crumbs, cta box, related list). Adds the few tokens guides.css takes from shopify.css,
   the demo video figure and the hub cards. Light and dark follow prefers-color-scheme. */

:root {
  --ok-soft: #dcfff1;
  --warn: #a54800;
  --warn-soft: #fff4d6;
  --radius-lg: 16px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ok-soft: #16352a;
    --warn: #f5b759;
    --warn-soft: #3a3014;
  }
}

body { background: var(--bg); }

.guide .doc pre.code { white-space: pre-wrap; overflow-wrap: anywhere; }
.guide .doc h3 { margin-top: 1.5rem; }
.guide .doc .note { border-left: 3px solid var(--accent); background: var(--accent-soft); padding: 0.75rem 1rem;
  border-radius: 0 var(--radius) var(--radius) 0; margin: 1.25rem 0; }
.guide .doc .note p { margin: 0; }
.guide .doc .note p + p { margin-top: 0.5rem; }

/* Demo video: click to play, no autoplay, poster from the video itself */
.demo-video { margin: 1.75rem 0; }
.demo-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #0b1320;
  border: 1px solid var(--border); border-radius: var(--radius); }
.demo-video figcaption { color: var(--text-muted); font-size: 0.9rem; margin-top: 0.5rem; }

/* Hub */
.hub-apps .product ul { margin: 0.25rem 0 0.75rem; padding-left: 1.1rem; color: var(--text-muted); font-size: 0.95rem; }
.hub-apps .product li + li { margin-top: 0.25rem; }
.hub-section { margin-top: 2.5rem; }
.hub-section h2 { font-size: 1.35rem; margin: 0 0 1rem; }
.hub-apps .product p { flex: 0 0 auto; }
.hub-apps .product .soon { font-size: 0.88rem; }
.hub-apps .product code { font-size: 0.82rem; overflow-wrap: anywhere; }

/* Screenshot figure inside a guide (light/dark pair through <picture>) */
.guide .doc .shot { margin: 1.5rem 0; }
.guide .doc .shot img { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.guide .doc .shot figcaption { color: var(--text-muted); font-size: 0.9rem; margin-top: 0.5rem; }