/* ── Help Center — page-specific styles ────────────────────────────────────
   Pairs with help.html / help.js. Everything here is `ha-` prefixed; the
   category grid and the article lists deliberately reuse redesign.css's
   .tiles/.tile and .rows/.row so the page is the same object as support.html.
   Tokens come from redesign.css (with fallbacks, like troubleshoot.css), so
   the page follows the dark/light switch without a second palette. */

.ha-vh {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Search ─────────────────────────────────────────────────────────────── */
/* The header runs the full page column here so the search bar spans it and
   lines up with the grids below — a bar that stops two-thirds of the way
   across reads as a stray form field rather than the way into the library.
   Title and lede keep the 760px reading measure .phead sets everywhere else. */
.ha-phead { max-width: none; }
.ha-phead h1, .ha-phead p { max-width: 760px; }

.ha-search { margin-top: 22px; }
.ha-search-field {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; border-radius: 999px;
  background: var(--composer-bg, rgba(255,255,255,0.05));
  border: 1px solid var(--composer-border, rgba(255,255,255,0.12));
  box-shadow: var(--composer-shadow, none);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  transition: border-color 0.25s, background-color 0.25s;
}
.ha-search-field:hover { border-color: var(--cap-border-hover, rgba(255,255,255,0.15)); }
/* The input's own ring is suppressed (it would sit inside the capsule), so the
   capsule carries the focus state for it. */
.ha-search-field:focus-within {
  outline: 2px solid var(--focus-ink, #f3f4f6); outline-offset: 2px;
  border-color: var(--cap-border-hover, rgba(255,255,255,0.15));
}
.ha-search-ico { color: var(--text-dim, #8d939f); flex: none; }
.ha-search-input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  color: var(--text-hi, #f3f4f6); font-size: 0.93rem; line-height: 1.4;
}
.ha-search-input::placeholder { color: var(--text-dim, #8d939f); }
.ha-search-input::-webkit-search-cancel-button { display: none; }
.ha-search-clear {
  flex: none; display: grid; place-items: center; width: 22px; height: 22px;
  border: 0; border-radius: 50%; cursor: pointer; padding: 0;
  background: var(--nub-bg, rgba(255,255,255,0.08)); color: var(--text-dim, #8d939f);
}
/* display:grid above out-ranks the UA's [hidden] rule, so state it. */
.ha-search-clear[hidden] { display: none; }
.ha-search-clear:hover { color: var(--text-hi, #f3f4f6); }
/* Embed mode drops .phead and its form; help.js mounts this one in <main>. */
.ha-search-inline { margin: 0 0 20px; }

/* ── App shell ──────────────────────────────────────────────────────────── */
/* Full page column, like support.html's tiles — the browse grid and row lists
   line up with the nav bar's edges. Long-form reading stays capped separately
   (.ha-article and friends at 760px, matching .phead). */
/* 300px min keeps the six category tiles 3-up at the full 1164px column
   (4-up would need ~1250px), collapsing to 2-up then 1-up as the page narrows. */
.ha-view .tiles { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.ha-view .rows { margin-top: 12px; }

.ha-h {
  font-size: 1.05rem; font-weight: 700; letter-spacing: -0.015em;
  color: var(--text-hi, #f3f4f6); margin-bottom: 12px;
}
.ha-h-sub { margin-top: 34px; }
.ha-title {
  font-size: clamp(1.15rem, 3.4vw, 1.35rem); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.25; text-wrap: balance;
  color: var(--text-hi, #f3f4f6);
}
.ha-lede { color: var(--text-mid, #b9bec8); margin-top: 8px; max-width: 62ch; }
.ha-count-line, .ha-count {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-dim, #8d939f);
}
.ha-count { margin-top: auto; padding-top: 4px; }
.ha-count-line { margin: 20px 0 0; }
.ha-h-note {
  font-size: 0.83rem; line-height: 1.55; color: var(--text-dim, #8d939f);
  max-width: 62ch; margin: -4px 0 14px;
}

/* ── Quick Start guides — the home view's top row ───────────────────────── */
/* Photo cards for the three products. They override the browse grid to hold
   three across on one line (that row is the whole point), and stack rather
   than orphan a third card once the column is too narrow for it. */
.ha-view .ha-guides { grid-template-columns: repeat(3, 1fr); margin-bottom: 36px; }
.ha-guide { padding: 14px 14px 18px; }
/* Room photographs, like quick-start.html: fill and clip, never letterbox. */
.ha-guide-img {
  display: block; width: 100%; height: 150px; object-fit: cover;
  border-radius: 13px; margin-bottom: 4px;
  background: var(--mini-bg, rgba(16,18,22,0.35));
}
/* margin-top:auto lines the three pills up whatever the blurb costs. */
.ha-guide-pill {
  display: inline-flex; align-items: center; gap: 3px; align-self: flex-start;
  margin-top: auto; padding: 5px 11px; border-radius: 999px;
  font-size: 0.76rem; font-weight: 600; color: var(--text-mid, #b9bec8);
  background: var(--mini-bg, rgba(16,18,22,0.35));
  border: 1px solid var(--stroke, rgba(255,255,255,0.12));
  transition: color 0.25s, border-color 0.25s;
}
.ha-guide-pill .arr { width: 14px; height: 14px; }
.ha-guide:hover .ha-guide-pill {
  color: var(--text-hi, #f3f4f6); border-color: var(--stroke-hi, rgba(255,255,255,0.22));
}
/* No Lite guide yet. The card still shows the product, but it isn't a link —
   so it must not lift, glow or otherwise offer to open. */
.ha-guide.is-soon { opacity: 0.72; }
.ha-guide.is-soon .ha-guide-pill { color: var(--text-dim, #8d939f); }
.ha-guide.is-soon:hover {
  transform: none;
  background: var(--row-bg, rgba(13,15,19,0.4));
  border-color: var(--row-border, rgba(255,255,255,0.07));
  box-shadow: var(--row-shadow, none);
}
.ha-guide.is-soon:hover::after { opacity: 0; }
.ha-guide.is-soon:hover::before { opacity: var(--rim-opacity, 0.75); }

/* ── Breadcrumb ─────────────────────────────────────────────────────────── */
.ha-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  font-size: 0.76rem; color: var(--text-dim, #8d939f); margin-bottom: 14px;
}
.ha-crumbs a { color: var(--text-dim, #8d939f); text-decoration: none; }
.ha-crumbs a:hover { color: var(--text-hi, #f3f4f6); }
.ha-crumbs span[aria-current] { color: var(--text-mid, #b9bec8); }
.ha-crumb-sep { opacity: 0.6; }

/* ── Article ────────────────────────────────────────────────────────────── */
.ha-article { max-width: 760px; }
.ha-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 24px; }
.ha-chip {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em;
  color: var(--text-mid, #b9bec8); background: var(--mini-bg, rgba(16,18,22,0.35));
  border: 1px solid var(--stroke, rgba(255,255,255,0.12));
  border-radius: 999px; padding: 4px 10px;
}
.ha-updated { font-size: 0.76rem; color: var(--text-dim, #8d939f); }

/* ── Article body (author HTML) ─────────────────────────────────────────── */
.ha-body { color: var(--text-mid, #b9bec8); line-height: 1.72; }
.ha-body > :first-child { margin-top: 0; }
.ha-body h2 {
  font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em;
  color: var(--text-hi, #f3f4f6); margin: 30px 0 8px;
}
.ha-body h3 {
  font-size: 0.93rem; font-weight: 700;
  color: var(--text-hi, #f3f4f6); margin: 22px 0 6px;
}
.ha-body p { margin: 0 0 14px; }
.ha-body ul, .ha-body ol { margin: 0 0 16px; padding-left: 22px; }
.ha-body li { margin-bottom: 7px; }
.ha-body li::marker { color: var(--text-dim, #8d939f); }
.ha-body strong { color: var(--text-hi, #f3f4f6); font-weight: 600; }
.ha-body a, .ha-back-line a, .ha-empty a, .ha-stuck a {
  color: var(--frost-t, #6fc3ff); text-decoration: underline;
  text-underline-offset: 0.16em; text-decoration-thickness: 1px;
}
.ha-body a:hover, .ha-back-line a:hover, .ha-empty a:hover, .ha-stuck a:hover {
  color: var(--text-hi, #f3f4f6);
}
.ha-body code {
  font-family: ui-monospace, monospace; font-size: 0.85em;
  background: var(--mini-bg, rgba(16,18,22,0.35));
  border: 1px solid var(--stroke, rgba(255,255,255,0.12));
  border-radius: 13px; padding: 1px 6px;
}
.ha-body img {
  max-width: 100%; height: auto; display: block; margin: 18px 0;
  border-radius: 15px;
  border: 1px solid var(--stroke, rgba(255,255,255,0.12));
}
/* Video / 3D embeds (YouTube, Sketchfab) in cloned help-center articles. */
.ha-body iframe {
  width: 100%; aspect-ratio: 16 / 9; border: 0; display: block;
  margin: 18px 0; border-radius: 15px;
  background: var(--mini-bg, rgba(16,18,22,0.35));
}

/* Tables: the engine wraps every <table> in .ha-table-wrap so a wide key can
   scroll inside its own box instead of pushing the page sideways. */
.ha-table-wrap {
  overflow-x: auto; margin: 0 0 18px; border-radius: 15px;
  border: 1px solid var(--row-border, rgba(255,255,255,0.07));
  background: var(--row-bg, rgba(13,15,19,0.4));
  box-shadow: var(--row-shadow, none);
}
.ha-body table { width: 100%; min-width: 460px; border-collapse: collapse; font-size: 0.83rem; }
.ha-body th, .ha-body td {
  text-align: left; vertical-align: top; padding: 11px 14px;
  border-bottom: 1px solid var(--row-border, rgba(255,255,255,0.07));
}
.ha-body th { color: var(--text-hi, #f3f4f6); font-weight: 600; white-space: nowrap; }
.ha-body tbody tr:last-child td { border-bottom: 0; }

/* Callouts. The label is a pseudo-element so authors only write the div. */
.ha-note, .ha-caution {
  margin: 0 0 18px; padding: 14px 16px; border-radius: 15px;
  border: 1px solid var(--stroke, rgba(255,255,255,0.12));
  border-left-width: 3px; border-left-style: solid;
}
.ha-note {
  background: var(--blue-glow, rgba(111,195,255,0.10));
  border-left-color: var(--frost-t, #6fc3ff);
}
.ha-caution {
  background: var(--ember-glow, rgba(211,51,55,0.10));
  border-left-color: var(--ember-t, #f05a5e);
}
.ha-note::before, .ha-caution::before {
  display: block; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px;
}
.ha-note::before { content: "Note"; color: var(--frost-t, #6fc3ff); }
.ha-caution::before { content: "Take care"; color: var(--ember-t, #f05a5e); }
.ha-note > :last-child, .ha-caution > :last-child { margin-bottom: 0; }

/* ── Search results ─────────────────────────────────────────────────────── */
.ha-view mark {
  background: var(--amber-glow, rgba(232,168,56,0.10));
  color: var(--text-hi, #f3f4f6); font-weight: 600;
  padding: 0 2px;
}
.ha-back-line { margin-top: 20px; font-size: 0.83rem; }

/* ── Panels: empty state, no-JS, "still stuck?" ─────────────────────────── */
.ha-stuck, .ha-panel {
  margin-top: 34px; padding: 18px 20px; border-radius: 15px;
  background: var(--row-bg, rgba(13,15,19,0.4));
  border: 1px solid var(--row-border, rgba(255,255,255,0.07));
  box-shadow: var(--row-shadow, none); max-width: 760px;
}
.ha-stuck b, .ha-panel h2 {
  display: block; font-size: 0.93rem; font-weight: 600;
  color: var(--text-hi, #f3f4f6); margin-bottom: 6px;
}
.ha-stuck p, .ha-panel p { font-size: 0.83rem; color: var(--text-dim, #8d939f); line-height: 1.6; }
.ha-empty {
  margin-top: 18px; padding: 20px; border-radius: 15px;
  border: 1px dashed var(--stroke, rgba(255,255,255,0.12));
  color: var(--text-dim, #8d939f); font-size: 0.88rem; max-width: 760px;
}
.ha-empty p + p { margin-top: 10px; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
/* 760px is the portal's narrow line (the nav swaps to the burger here). Three
   cards go straight to one column: a 2 + 1 split leaves the third looking like
   an afterthought, which is the opposite of what this row is for. Stacked at
   full width they'd also push the topic grid off the screen, so the card turns
   side-on instead — photo left, text right, the same object laid down. */
@media (max-width: 760px) {
  .ha-view .ha-guides { grid-template-columns: 1fr; gap: 12px; }
  .ha-guide {
    display: grid; grid-template-columns: 108px 1fr;
    column-gap: 14px; padding: 14px;
  }
  /* A near-square thumbnail: a tall strip cropped out of a landscape room
     shot loses the fireplace, which is the one thing the photo is here for. */
  .ha-guide-img {
    grid-column: 1; grid-row: 1 / span 3; align-self: start;
    height: 104px; margin: 0; object-position: 50% 62%;
  }
  .ha-guide p { margin-top: 4px; }
  /* justify-self, not align-self: in grid the flex rule would let it stretch. */
  .ha-guide-pill { justify-self: start; margin-top: 10px; }
}
@media (max-width: 430px) {
  .ha-guide { grid-template-columns: 84px 1fr; column-gap: 12px; }
}
@media (max-width: 700px) {
  .ha-h-sub { margin-top: 28px; }
  .ha-stuck, .ha-panel { padding: 16px 17px; }
  .ha-body table { min-width: 420px; }
}

/* Embed mode: the page header (and its search form) is stripped by embed.js,
   so the app opens directly under the frame's top edge. */
body.is-embed .pbody { padding-top: 18px; }