/* Help guides in the app frame (templates/drobo/help/troubleshooting_v2.html, video_v2.html, amazon_v2.html,
   desktop_api_v2.html). Siblings of the Documentation page: they load css/drobo-ui-docs.css (the "On this page" rail,
   dx- text, notes, numbered steps, tables, link tiles) and js/drobo-ui-docs.js; this file adds their own parts under
   hg-. Only --ui-* tokens, so light and dark follow the theme. Behaviour: js/drobo-ui-help-guides.js (copy an
   endpoint, the live manifest). Type follows the docs: body 15-16px, labels 12px. */
.acct-flashes { display: none; }   /* flash messages show as bottom-right toasts (js/drobo-toast.js) */
/* Phones: the top bar keeps only this page's name, so the trail (Help center / Troubleshooting) never pushes the theme
   switch off the screen. */
@media (max-width: 640px) { .ui-crumbs li:not(:last-child) { display: none; } }

/* One colour per area: the dot beside a group in "On this page" and beside its heading, the same tone as its cards'
   icons (blue signing in, violet running, green listings and orders, amber the eBay account). */
.hg-dot { display: inline-block; flex: 0 0 auto; width: .5rem; height: .5rem; background: var(--tone, var(--ui-faint)); border-radius: 50%; }
.dx-toc__group .hg-dot { margin-right: .45rem; vertical-align: 1px; }
.hg .dx-head h2 { display: flex; align-items: center; gap: .6rem; }
.hg .dx-head h2 .hg-dot { width: .6rem; height: .6rem; }
.hg .dx-head .ui-btn { align-self: flex-end; }

/* A label over a block: Symptoms (amber), Cause (muted), Fix (green) */
.hg-label { display: flex; align-items: center; gap: .4rem; margin: 0 0 .5rem; font-size: .75rem; font-weight: 650; letter-spacing: .05em; line-height: 1.2; text-transform: uppercase; color: var(--tone, var(--ui-muted)); }
.hg-label .ti { font-size: .95rem; }

/* ── A problem: name, then what you see beside what to do ────────────────── */
.hg-issue { display: grid; gap: 1.1rem; }
.hg-issue__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .5rem .85rem; min-width: 0; }
.hg-issue__icon { width: 2.25rem; height: 2.25rem; font-size: 1.15rem; border-radius: 10px; }
.hg-issue__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; gap: 1.25rem 1.75rem; }
.hg-see { display: grid; gap: 1rem; padding: 1rem 1.1rem 1.1rem; background: var(--ui-subtle); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); }
.hg-see .dx-text { font-size: .9375rem; line-height: 1.6; }
.hg-fix .dx-steps { gap: 1rem; }
/* Side by side, the Fix label sits on the Symptoms label's line (the panel's border and padding). */
@media (min-width: 901px) { .hg-fix { padding-top: calc(1rem + 1px); } }
.hg .ui-card.hg-issue > .dx-note { margin: 0; }
.hg-scope .ti { font-size: .875rem; }

/* Causes with their fix, as tiles (Discover & Post) */
.hg-causes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none; }
.hg-causes li { display: flex; align-items: flex-start; gap: .75rem; min-width: 0; padding: .85rem .9rem; background: var(--ui-subtle); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); }
.hg-causes li > div { display: grid; gap: .15rem; min-width: 0; padding-top: .1rem; line-height: 1.35; }
.hg-causes strong { font-size: .9375rem; font-weight: 600; color: var(--ui-fg); }
.hg-ico { display: inline-grid; place-items: center; flex: 0 0 auto; width: 1.9rem; height: 1.9rem; font-size: 1rem; color: var(--ui-fg-2); background: var(--ui-card); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); }

/* ── Video ───────────────────────────────────────────────────────────────── */
.dx.hg--wide { grid-template-columns: minmax(0, 1fr); }
/* The video beside its chapters, one height (the video's foot takes up any difference); stacked below 1380px, where
   the chapters would outgrow the video. */
.hg-watch { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); align-items: stretch; gap: 1rem; }
.hg-video { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.hg-video__frame { position: relative; aspect-ratio: 16 / 9; background: #09090b; }
.hg-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hg-video__foot { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .85rem 1.25rem; border-top: 1px solid var(--ui-border); }
.hg-video__foot p { margin: 0; font-size: .875rem; color: var(--ui-muted); }
.hg-soon { display: grid; justify-items: center; align-content: center; gap: .6rem; min-height: 16rem; padding: 2rem 1.5rem; text-align: center; }
.hg-soon h2 { margin: .25rem 0 0; font-size: 1.0625rem; font-weight: 650; color: var(--ui-fg); }
.hg-soon p { max-width: 42ch; margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--ui-muted); }
.hg-soon .ui-stat__icon { width: 2.75rem; height: 2.75rem; font-size: 1.35rem; border-radius: var(--ui-radius); }

/* ── Amazon → DroboAI → eBay: a light runs along each link while the page is open (off with reduced motion) ── */
.hg-flow { display: flex; align-items: flex-start; gap: .75rem; margin: 0 0 1.1rem; padding: 1.1rem 1.5rem .9rem; background: var(--ui-subtle); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); }
.hg-flow__node { display: grid; grid-template-rows: 4.25rem auto; justify-items: center; align-items: center; gap: .35rem; flex: 0 0 auto; }
.hg-flow__node small { font-size: .8125rem; font-weight: 550; color: var(--ui-muted); }
.hg-flow__line { position: relative; flex: 1 1 auto; height: 2px; margin-top: calc(2.125rem - 1px); overflow: hidden; background: var(--ui-border-strong); border-radius: 2px; }
.hg-flow__line::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 35%; background: linear-gradient(90deg, transparent, var(--ui-primary), var(--ui-violet), transparent); transform: translateX(-100%); animation: hg-run 2.6s linear infinite; }
.hg-flow__line:nth-of-type(2)::after { animation-delay: 1.3s; }
@keyframes hg-run { to { transform: translateX(290%); } }
.hg-flow .ui-flow__icon--hub img.ui-only-light, .hg-flow .ui-flow__icon--hub img.ui-only-dark { width: auto; height: 1.9rem; }

/* The seller's own eBay site in the site table */
.hg .dx-table tr.is-yours { background: color-mix(in srgb, var(--ui-primary) 6%, transparent); }
.hg .dx-table tr.is-yours .ui-status { margin-left: .5rem; }
/* Step rows: their buttons one width, so the right edge reads as one column */
.hg .dx-rows-steps__go { min-width: 7.5rem; }
/* A field name stays on one line */
.hg .dx-table td > code { white-space: nowrap; }

/* ── Desktop API: one row per endpoint (method, path, what it returns, copy) ── */
.hg code { padding: .08rem .35rem; font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8125em; color: var(--ui-fg); background: var(--ui-subtle); border: 1px solid var(--ui-border); border-radius: 6px; overflow-wrap: anywhere; }
.hg-endpoints { display: grid; margin: 0 -1.25rem; padding: 0; list-style: none; border-top: 1px solid var(--ui-border); border-bottom: 1px solid var(--ui-border); }
.hg-endpoints li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) 2.1rem; align-items: center; gap: .35rem .85rem; min-height: 3.5rem; padding: .6rem 1rem .6rem 1.25rem; box-sizing: border-box; }
.hg-endpoints li + li { border-top: 1px solid var(--ui-border); }
.hg-endpoints li > div { display: grid; gap: .15rem; min-width: 0; }
.hg-endpoints .hg-path { justify-self: start; padding: 0; font-size: .875rem; font-weight: 600; background: none; border: 0; }
.hg-endpoints small { font-size: .875rem; line-height: 1.5; color: var(--ui-muted); }
.hg-endpoints .hg-copy[hidden] { display: none; }
.hg-endpoints li > .hg-copy-spacer { width: 2.1rem; }
.hg-method {
  display: inline-grid; place-items: center; justify-self: start; width: 3.5rem; height: 1.6rem; box-sizing: border-box; font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .6875rem; font-weight: 700; letter-spacing: .04em; color: var(--tone); background: color-mix(in srgb, var(--tone) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--tone) 28%, transparent); border-radius: 6px;
}
.hg-card-foot { margin: 1rem 0 0; }
.ui-card > .hg-endpoints:last-child { margin-bottom: -1.25rem; border-bottom: 0; }
.ui-card > .hg-endpoints:last-child li:last-child { border-radius: 0 0 var(--ui-radius) var(--ui-radius); }

/* The live manifest: what the endpoint answers now, one field a row (the raw JSON is a link under it) */
.hg-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); margin: 0 -1.25rem; border-top: 1px solid var(--ui-border); border-bottom: 1px solid var(--ui-border); }
.hg-kv dt, .hg-kv dd { min-width: 0; padding: .6rem 1.25rem; border-bottom: 1px solid var(--ui-border); }
.hg-kv dt:nth-last-of-type(1), .hg-kv dd:nth-last-of-type(1) { border-bottom: 0; }
.hg-kv dt { padding-right: .5rem; font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8125rem; line-height: 1.5rem; color: var(--ui-muted); }
.hg-kv dd { margin: 0; font-size: .9375rem; line-height: 1.5rem; color: var(--ui-fg); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

/* ── Narrow ──────────────────────────────────────────────────────────────── */
@media (max-width: 1379px) {
  .hg-watch { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .hg-issue__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .hg-causes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .hg-issue__head { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .hg-issue__head .ui-card__title { padding-top: .3rem; }   /* its first line centred on the icon, whatever it wraps to */
  .hg-issue__head .hg-scope { grid-column: 2; justify-self: start; }
  .hg-flow { gap: .4rem; padding: 1rem .75rem .75rem; }
  .hg-flow__node { grid-template-rows: 3.5rem auto; }
  .hg-flow .ui-flow__icon { width: 2.75rem; height: 2.75rem; font-size: 1.35rem; }
  .hg-flow .ui-flow__icon--hub { width: 3.5rem; height: 3.5rem; }
  .hg-flow .ui-flow__icon--ebay { font-size: .75rem; }
  .hg-flow .ui-flow__icon--hub img.ui-only-light, .hg-flow .ui-flow__icon--hub img.ui-only-dark { height: 1.6rem; }
  .hg-flow__line { margin-top: calc(1.75rem - 1px); }
  .hg-endpoints li { grid-template-columns: 3.5rem minmax(0, 1fr); padding-right: 1.25rem; }
  .hg-endpoints li > .hg-copy, .hg-endpoints li > .hg-copy-spacer { display: none; }
  .hg-video__foot .ui-btn { width: 100%; }
  .hg .dx-head .ui-btn { width: 100%; }
}