/* MIRA User Guide (/user-guide). Loaded after /assets/sdk-docs/sdk-docs.css and
   only on the guide, so nothing here reaches /docs or the store pages. */
:root {
  --ug-accent-text: #c2410c;
  --ug-bezel: #0c0c0c;
  --ug-media-bg: #0b0b0b;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --ug-accent-text: #ff8a5c; --ug-bezel: #000000; }
}
:root[data-theme="dark"] { --ug-accent-text: #ff8a5c; --ug-bezel: #000000; }

/* One centred reading column (the left sidebar is the table of contents). */
.ug-panel-inner { grid-template-columns: minmax(0, 760px); }
.ug-page-head { margin-bottom: 28px; }
.ug-page-head h1 { margin: 0; font-size: 40px; line-height: 1.12; font-weight: 600; letter-spacing: -0.03em; color: var(--d-text); }

/* Intro */
.ug-need { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 22px 0 8px; padding: 0 !important; }
.ug-need li { display: flex; align-items: center; gap: 12px; margin: 0; padding: 14px 16px; border: 1px solid var(--d-line); border-radius: 12px; background: var(--d-panel); font-size: 14.5px; line-height: 21px; color: var(--d-text); }
.ug-need li .docs-i { color: var(--d-muted); }
.ug-quick { margin-top: 18px; }
.ug-quick .docs-card { padding: 18px 18px 16px; }

/* Groups and sections */
.ug-group { margin-top: 72px; }
.ug-group-label { margin: 0 0 -30px; padding-top: 20px; border-top: 1px solid var(--d-line); font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ug-accent-text); }
.ug-section { padding-top: 2px; }
.ug-section + .ug-section { margin-top: 20px; }
.docs-prose .ug-section > h2 { margin-top: 56px; }
.ug-section-lede { margin: -8px 0 20px !important; font-size: 16.5px; color: var(--d-muted); }
.docs-prose .ug-section h3 { margin-top: 30px; }

/* Text beside media */
.ug-split { display: grid; grid-template-columns: minmax(0, 1fr) 232px; gap: 40px; align-items: start; margin: 8px 0 30px; }
.ug-split-text > :last-child { margin-bottom: 0; }
.ug-split-media { position: sticky; top: calc(var(--d-top) + 28px); display: grid; gap: 22px; }
.ug-split .docs-steps { margin-top: 6px; }

/* Step videos: poster + play button, then the browser's player */
.ug-media { margin: 26px 0 30px; }
.docs-prose .ug-media { margin: 26px auto 30px; }
.ug-split-media .ug-media, .ug-clips .ug-media { margin: 0 !important; }
.ug-frame { position: relative; overflow: hidden; background: var(--ug-media-bg); isolation: isolate; }
.ug-poster { display: block; width: 100%; height: auto; cursor: pointer; }
.ug-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--ug-media-bg); opacity: 0; visibility: hidden; }
.ug-media.is-playing .ug-video { opacity: 1; visibility: visible; }
.ug-media.is-playing .ug-play { display: none; }
.ug-media figcaption { margin-top: 12px; font-size: 13.5px; line-height: 20px; color: var(--d-muted); text-align: center; text-wrap: balance; }
.ug-media--phone { width: min(100%, 248px); }
.ug-media--phone .ug-frame { border-radius: 30px; box-shadow: 0 0 0 5px var(--ug-bezel), 0 0 0 6px var(--d-line-strong), 0 22px 44px -26px rgba(0, 0, 0, 0.55); }
.ug-media--phone.is-playing .ug-frame { border-radius: 18px; }
.ug-media--hud { max-width: 640px; }
.ug-media--hud .ug-frame { border-radius: 14px; box-shadow: 0 0 0 1px var(--d-line); }
.ug-media--wide .ug-frame { border-radius: 12px; box-shadow: 0 0 0 1px var(--d-line); }
.ug-media--window .ug-frame { border-radius: 12px; box-shadow: 0 0 0 1px var(--d-line-strong), 0 22px 44px -28px rgba(0, 0, 0, 0.45); }
.ug-frame .ug-play { position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 17px 0 15px; border: 2px solid rgba(255, 255, 255, 0.92); border-radius: 999px; background: rgba(17, 17, 17, 0.84); color: #fff; font: inherit; font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; cursor: pointer; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.38); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background 0.15s, transform 0.15s; }
.ug-frame .ug-play:hover { background: rgba(17, 17, 17, 0.94); transform: translate(-50%, -50%) scale(1.04); }
.ug-frame .ug-play:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px rgba(17, 17, 17, 0.6); }
.ug-frame .ug-play .docs-i { fill: currentColor; stroke: none; }
.ug-media.is-error .ug-play { display: none; }
.ug-media.is-error .ug-poster { cursor: default; }

/* A row of clips */
.ug-clips { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 26px 22px; align-items: start; justify-items: center; margin: 26px 0 32px; }
.ug-clips--wide { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); justify-items: stretch; }

/* Gestures table */
.ug-gestures td:first-child { font-weight: 600; }
.ug-gestures td { white-space: normal !important; }

.ug-page-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.ug-updated { color: var(--d-subtle); }

@media (max-width: 1023px) {
  .ug-page-head h1 { font-size: 36px; }
}
@media (max-width: 760px) {
  .ug-split { display: block; }
  .ug-split-media { position: static; margin-top: 26px; justify-items: center; }
  .ug-need { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ug-page-head h1 { font-size: 31px; }
  .ug-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ug-quick .docs-card { padding: 14px 14px 13px; }
  .ug-quick .docs-card-icon { margin-bottom: 8px; }
  .ug-quick .docs-card-title { font-size: 15px; line-height: 20px; }
  .ug-quick .docs-card-text { font-size: 13px; line-height: 19px; }
  .ug-need li { padding: 12px 14px; }
  .ug-group { margin-top: 60px; }
  .docs-prose .ug-section > h2 { margin-top: 48px; }
  .ug-section-lede { font-size: 16px; }
  /* Rows become a swipeable strip: one clip plus a peek of the next. */
  .ug-clips { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(66%, 232px); justify-content: start; justify-items: stretch; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 18px; margin-left: -18px; margin-right: -18px; padding: 6px 18px 10px; scrollbar-width: none; }
  .ug-clips::-webkit-scrollbar { display: none; }
  .ug-clips > .ug-media { scroll-snap-align: center; width: 100%; }
  .ug-clips--wide { grid-auto-columns: 86%; }
  .ug-media--phone { width: min(100%, 232px); }
}
@media (max-width: 359px) {
  .ug-body .docs-topbar { gap: 4px; }
  .ug-body .docs-brand-name { font-size: 13px; padding-left: 7px; }
}
@media print {
  .ug-video, .ug-play { display: none !important; }
  .ug-split { display: block; }
  .ug-split-media { position: static; }
  .ug-clips { display: grid; grid-auto-flow: row; overflow: visible; }
}
.ug-section h2:focus, .ug-section h3:focus { outline: none; }