/* ============================================================
   Help Center — assets/help.css
   Ported from the verified visual prototype (help-prototype.html).
   Built entirely on the existing design tokens, which in production
   come from /assets/design-tokens.css (loaded site-wide).
   ============================================================ */
* { box-sizing: border-box; }
body { margin: 0; background: var(--zoomi-page); color: var(--zoomi-ink);
  font-family: var(--font-family); font-size: var(--t-body-lg); line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--page-gutter); }

.eyebrow { font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: var(--track-eyebrow);
  text-transform: uppercase; color: var(--tone-coral-stroke); }

/* ====================== 1 · LANDING ====================== */
.hc-hero { position: relative; overflow: hidden; text-align: center; padding: 86px 0 64px; }
.hc-hero::before, .hc-hero::after { content: ""; position: absolute; border-radius: 50%;
  filter: blur(60px); opacity: .55; z-index: 0; }
.hc-hero::before { width: 460px; height: 460px; background: var(--accent-peach-soft); top: -160px; left: -120px; }
.hc-hero::after  { width: 420px; height: 420px; background: var(--accent-sky-soft); top: -120px; right: -120px; }
.hc-hero .wrap { position: relative; z-index: 1; }
.hc-hero h1 { font-family: var(--font-heading); font-weight: 600; font-size: var(--t-display-md);
  line-height: var(--lh-tight); letter-spacing: var(--track-heading); margin: 14px auto 12px; max-width: 16ch; }
.hc-hero p { color: var(--zoomi-body); font-size: var(--t-body-lg); max-width: 52ch; margin: 0 auto 30px; }
.hc-search { position: relative; max-width: 600px; margin: 0 auto; }
.hc-search svg { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); color: var(--zoomi-chev); }
.hc-search input { width: 100%; height: 62px; border-radius: var(--r-pill); border: 1px solid var(--zoomi-hair);
  background: var(--zoomi-card); padding: 0 24px 0 56px; font-family: var(--font-family); font-size: var(--t-body-lg);
  color: var(--zoomi-ink); box-shadow: 0 16px 40px -24px rgba(0,0,0,.28); outline: none; }
.hc-search input::placeholder { color: var(--zoomi-chev); }
.hc-search .hint { margin-top: 14px; font-size: var(--t-body-sm); color: var(--zoomi-body); }
.hc-search .hint a { color: var(--zoomi-link); font-weight: 600; }

.hc-section { padding: 8px 0 16px; }
.hc-sec-head { display: flex; align-items: baseline; justify-content: space-between; margin: 40px 0 20px; }
.hc-sec-head h2 { font-family: var(--font-heading); font-weight: 600; font-size: var(--t-headline-md);
  letter-spacing: var(--track-heading); margin: 0; }

.hc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.hc-cat { display: flex; flex-direction: column; gap: 14px; background: var(--zoomi-card);
  border: 1px solid var(--zoomi-hair); border-radius: var(--r-card); padding: 26px;
  transition: transform var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out); }
.hc-cat:hover { transform: translateY(-4px); border-color: var(--zoomi-ink); box-shadow: 0 22px 50px -30px rgba(0,0,0,.35); }
.hc-cat .ico { width: 52px; height: 52px; border-radius: var(--r-inner); display: grid; place-items: center; }
.hc-cat h3 { font-family: var(--font-heading); font-weight: 600; font-size: var(--t-title-lg);
  margin: 2px 0 0; letter-spacing: var(--track-heading); }
.hc-cat p { color: var(--zoomi-body); font-size: var(--t-body-md); margin: 0; flex: 1; }
.hc-cat .meta { font-size: var(--t-body-sm); color: var(--zoomi-chev); font-weight: 600;
  display: flex; align-items: center; gap: 6px; }
.t-green  .ico { background: var(--tone-green-container);  color: var(--tone-green-stroke); }
.t-blue   .ico { background: var(--tone-blue-container);   color: var(--tone-blue-stroke); }
.t-coral  .ico { background: var(--tone-coral-container);  color: var(--tone-coral-stroke); }
.t-purple .ico { background: var(--tone-purple-container); color: var(--tone-purple-stroke); }
.t-amber  .ico { background: var(--tone-amber-container);  color: var(--tone-amber-stroke); }
.t-slate  .ico { background: var(--zoomi-bg);              color: var(--zoomi-body); }

/* popular chips */
.hc-popular { display: flex; flex-wrap: wrap; gap: 10px; }
.hc-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--zoomi-card);
  border: 1px solid var(--zoomi-hair); border-radius: var(--r-pill); padding: 9px 16px;
  font-size: var(--t-body-md); font-weight: 500; color: var(--zoomi-ink); transition: border-color var(--dur-fast); }
.hc-chip:hover { border-color: var(--zoomi-ink); }
.hc-chip svg { color: var(--zoomi-chev); }

/* contact band */
.hc-contact { margin: 56px 0 72px; background: linear-gradient(120deg, var(--accent-mint-soft), var(--accent-buttercup-soft));
  border-radius: var(--r-card); padding: 40px 44px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.hc-contact h3 { font-family: var(--font-heading); font-weight: 600; font-size: var(--t-headline-sm);
  margin: 0 0 4px; letter-spacing: var(--track-heading); }
.hc-contact p { margin: 0; color: var(--zoomi-body); }
.btn-ink { display: inline-flex; align-items: center; gap: 8px; background: var(--zoomi-cta-bg); color: var(--zoomi-cta-text);
  font-weight: 600; padding: 14px 24px; border-radius: var(--r-pill); white-space: nowrap; }

/* ====================== 2 · CATEGORY ====================== */
.hc-breadcrumb { display: flex; align-items: center; gap: 9px; font-size: var(--t-body-sm);
  color: var(--zoomi-body); padding: 26px 0 0; }
.hc-breadcrumb a:hover { color: var(--zoomi-ink); }
.hc-breadcrumb .sep { color: var(--zoomi-chev); }
.hc-breadcrumb .cur { color: var(--zoomi-ink); font-weight: 600; }

.hc-cols { display: grid; grid-template-columns: 248px 1fr; gap: 48px; padding: 28px 0 80px; align-items: start; }
.hc-side { position: sticky; top: 88px; }
.hc-side .lbl { font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: var(--track-eyebrow);
  text-transform: uppercase; color: var(--zoomi-chev); margin: 0 0 12px; padding-left: 12px; }
.hc-side a { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: var(--r-inner);
  font-size: var(--t-body-md); font-weight: 500; color: var(--zoomi-body); }
.hc-side a .d { width: 9px; height: 9px; border-radius: 3px; background: var(--zoomi-chev); flex: none; }
.hc-side a.is-active { background: var(--zoomi-bg); color: var(--zoomi-ink); font-weight: 600; }
.hc-side a.is-active .d { background: var(--tone-coral-stroke); }

/* mobile-only Topics dropdown (replaces the desktop sidebar below the breakpoint) */
.hc-side-select { display: none; margin: 18px 0 2px; }
.hc-side-select .lbl { display: block; font-size: var(--t-eyebrow); font-weight: 600;
  letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--zoomi-chev); margin: 0 0 8px; }
.hc-side-select select { width: 100%; height: 52px; padding: 0 14px; border: 1px solid var(--zoomi-hair);
  border-radius: var(--r-inner); background: var(--zoomi-card); color: var(--zoomi-ink);
  font-family: var(--font-family); font-size: var(--t-body-md); font-weight: 600; }

.hc-cat-head { display: flex; align-items: center; gap: 18px; margin: 4px 0 8px; }
.hc-cat-head .ico { width: 58px; height: 58px; border-radius: var(--r-bento); display: grid; place-items: center;
  background: var(--tone-coral-container); color: var(--tone-coral-stroke); flex: none; }
.hc-cat-head h1 { font-family: var(--font-heading); font-weight: 600; font-size: var(--t-headline-lg);
  letter-spacing: var(--track-heading); margin: 0; }
.hc-cat-head .sub { color: var(--zoomi-body); margin: 4px 0 0; }
.hc-arts { margin-top: 24px; border-top: 1px solid var(--zoomi-hair); }
.hc-art-row { display: flex; align-items: center; gap: 18px; padding: 22px 6px; border-bottom: 1px solid var(--zoomi-hair);
  transition: padding var(--dur-fast) var(--ease-out); }
.hc-art-row:hover { padding-left: 14px; }
.hc-art-row .txt h4 { font-family: var(--font-heading); font-weight: 600; font-size: var(--t-title-lg);
  margin: 0 0 3px; letter-spacing: var(--track-heading); }
.hc-art-row .txt p { margin: 0; color: var(--zoomi-body); font-size: var(--t-body-md); }
.hc-art-row .chev { margin-left: auto; color: var(--zoomi-chev); flex: none; }
.hc-art-row:hover .chev { color: var(--zoomi-ink); }

/* ====================== 3 · ARTICLE ====================== */
.hc-article { display: grid; grid-template-columns: 1fr 220px; gap: 56px; padding: 22px 0 90px; align-items: start;
  max-width: 980px; margin: 0 auto; }
.hc-doc { min-width: 0; }
.hc-doc .kicker { font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: var(--track-eyebrow);
  text-transform: uppercase; color: var(--tone-coral-stroke); }
.hc-doc h1 { font-family: var(--font-heading); font-weight: 600; font-size: var(--t-display-sm);
  line-height: var(--lh-tight); letter-spacing: var(--track-heading); margin: 12px 0 14px; max-width: 18ch; }
.hc-doc .updated { font-size: var(--t-body-sm); color: var(--zoomi-chev); display: flex; align-items: center; gap: 9px; }
.hc-doc .updated .av { width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--zoomi-hair); background: var(--tone-blue-container); flex: none; }
.hc-doc .updated strong { color: var(--zoomi-ink); font-weight: 600; }
.prose { margin-top: 30px; font-size: 17px; line-height: 1.65; color: #353535; }
.prose > * { max-width: 64ch; }
.prose h2 { font-family: var(--font-heading); font-weight: 600; font-size: var(--t-headline-sm);
  letter-spacing: var(--track-heading); color: var(--zoomi-ink); margin: 40px 0 12px; }
.prose h3 { font-family: var(--font-heading); font-weight: 600; font-size: var(--t-title-lg); color: var(--zoomi-ink); margin: 28px 0 8px; }
.prose p { margin: 0 0 16px; }
.prose ol, .prose ul { margin: 0 0 18px; padding-left: 22px; }
.prose li { margin: 0 0 9px; }
.prose strong { color: var(--zoomi-ink); font-weight: 600; }
.prose a { color: var(--zoomi-link); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.prose code { background: var(--zoomi-bg); border-radius: 6px; padding: 2px 6px; font-size: .9em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.prose table { width: 100%; border-collapse: collapse; margin: 8px 0 22px; font-size: var(--t-body-md); }
.prose th, .prose td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--zoomi-hair); }
.prose th { font-weight: 600; color: var(--zoomi-ink); border-bottom: 1.5px solid var(--zoomi-hair); }

/* callouts */
.callout { display: flex; gap: 14px; border-radius: var(--r-bento); padding: 16px 18px; margin: 0 0 22px; max-width: 64ch; }
.callout .ic { flex: none; margin-top: 1px; }
.callout p { margin: 0; font-size: var(--t-body-md); line-height: 1.55; }
.callout--tip { background: var(--tone-green-container); color: #1f5b32; }
.callout--tip .ic { color: var(--tone-green-stroke); }
.callout--warn { background: var(--tone-amber-container); color: #6e4a13; }
.callout--warn .ic { color: var(--tone-amber-stroke); }

/* feedback + related */
.hc-feedback { margin: 44px 0 0; max-width: 64ch; border: 1px solid var(--zoomi-hair); border-radius: var(--r-card);
  padding: 24px 26px; display: flex; align-items: center; justify-content: space-between; gap: 18px; background: var(--zoomi-card); }
.hc-feedback strong { font-family: var(--font-heading); font-weight: 600; font-size: var(--t-title-lg); }
.hc-feedback .sub { font-size: var(--t-body-sm); color: var(--zoomi-body); margin-top: 2px; }
.hc-vote { display: flex; gap: 10px; }
.hc-vote button { display: inline-flex; align-items: center; gap: 7px; background: var(--zoomi-card);
  border: 1px solid var(--zoomi-hair); border-radius: var(--r-pill); padding: 10px 18px; font-family: var(--font-family);
  font-weight: 600; font-size: var(--t-body-md); color: var(--zoomi-ink); cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast); }
.hc-vote button:hover { border-color: var(--zoomi-ink); }
.hc-still { margin: 22px 0 0; max-width: 64ch; font-size: var(--t-body-md); color: var(--zoomi-body); }
.hc-still a { color: var(--zoomi-link); font-weight: 600; }
.hc-related { margin-top: 40px; max-width: 64ch; }
.hc-related .lbl { font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: var(--track-eyebrow);
  text-transform: uppercase; color: var(--zoomi-chev); margin-bottom: 12px; }
.hc-related a { display: flex; align-items: center; gap: 10px; padding: 13px 0; border-top: 1px solid var(--zoomi-hair);
  font-family: var(--font-heading); font-weight: 600; font-size: var(--t-body-lg); }
.hc-related a svg { color: var(--zoomi-chev); margin-left: auto; }

/* right rail: on this page */
.hc-toc { position: sticky; top: 88px; font-size: var(--t-body-sm); }
.hc-toc .lbl { font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: var(--track-eyebrow);
  text-transform: uppercase; color: var(--zoomi-chev); margin-bottom: 12px; }
.hc-toc a { display: block; padding: 7px 0 7px 14px; color: var(--zoomi-body); border-left: 2px solid var(--zoomi-hair); }
.hc-toc a.is-active { color: var(--zoomi-ink); font-weight: 600; border-left-color: var(--zoomi-ink); }

/* prose media (articles use images) */
.prose img { max-width: 100%; height: auto; display: block; margin: 8px 0 22px;
  border-radius: var(--r-inner); border: 1px solid var(--zoomi-hair); }
.prose figure { margin: 0 0 22px; }
.prose figcaption { font-size: var(--t-body-sm); color: var(--zoomi-body); margin-top: 6px; text-align: center; }

/* ====================== RESPONSIVE ======================
   The prototype was desktop-only; these breakpoints collapse the
   help-specific multi-column layouts. The site header/footer + tokens
   (--page-gutter etc.) are already responsive site-wide. */
@media (max-width: 900px) {
  /* landing: 3 cards -> 2 */
  .hc-grid { grid-template-columns: repeat(2, 1fr); }

  /* category: drop the fixed sidebar for a compact Topics dropdown */
  .hc-cols { grid-template-columns: 1fr; gap: 14px; padding-top: 8px; }
  .hc-side { display: none; }
  .hc-side-select { display: block; }

  /* article: the right rail column is unused — collapse to one centered column */
  .hc-article { grid-template-columns: 1fr; gap: 0; max-width: 720px; }
}

@media (max-width: 560px) {
  /* landing: single column of cards */
  .hc-grid { grid-template-columns: 1fr; }
  .hc-hero { padding: 54px 0 40px; }
  .hc-sec-head { margin: 30px 0 16px; }

  /* contact band + feedback box: stack vertically, full-width actions */
  .hc-contact { flex-direction: column; align-items: flex-start; text-align: left; padding: 26px 22px; }
  .hc-contact .btn-ink { align-self: stretch; justify-content: center; }
  .hc-feedback { flex-direction: column; align-items: flex-start; padding: 20px; }
  .hc-vote { width: 100%; }
  .hc-vote button { flex: 1; justify-content: center; }

  /* category head: smaller icon so the title has room */
  .hc-cat-head { gap: 14px; }
  .hc-cat-head .ico { width: 48px; height: 48px; }

  /* narrow-screen prose: let wide tables scroll instead of overflowing */
  .prose { font-size: 16px; }
  .prose table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .prose th, .prose td { padding: 9px 11px; white-space: nowrap; }
}