/*
 * Renable Help Center stylesheet — scoped to the public /help doc site only.
 *
 * Every rule is prefixed under `.help-root` (or is a `@media`/`@font-face`-style at-rule
 * with no bare selector) — an unscoped selector here would leak into and break the rest
 * of the product UI, since this file ships in the main SPA bundle. The Aimée chat drawer
 * does NOT use this file: it renders its own MUI-based article card
 * (studio/editor/chat/messages/ArticleCardBlock.tsx) so it never needs `.help-card` to
 * work standalone outside `.help-root`.
 */

.help-root {
  --help-color-ink: #23253a;
  --help-color-ink-soft: #52546b;
  --help-color-muted: #7a7d94;
  --help-color-border: #e4e4ec;
  --help-color-surface: #ffffff;
  --help-color-surface-alt: #f7f7fb;
  --help-color-accent: #e94740;
  --help-color-accent-dark: #c53832;
  --help-color-navy: #353a5a;
  --help-color-sky: #2fa9cc;
  --help-color-focus: #50bbd9;
  --help-font-body: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --help-measure: 70ch;
  --help-radius: 10px;
}

.help-root {
  font-family: var(--help-font-body);
  color: var(--help-color-ink);
  background: var(--help-color-surface-alt);
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.help-root *,
.help-root *::before,
.help-root *::after {
  box-sizing: border-box;
}

.help-root a {
  color: var(--help-color-accent-dark);
  text-decoration: none;
}

.help-root a:hover {
  text-decoration: underline;
}

.help-root a:focus-visible,
.help-root button:focus-visible,
.help-root input:focus-visible {
  outline: 2px solid var(--help-color-focus);
  outline-offset: 2px;
}

/* ---------- Header ---------- */

.help-header {
  display: grid;
  grid-template-columns: 1fr minmax(240px, 480px) 1fr;
  align-items: center;
  gap: 20px;
  padding: 16px 24px;
  background: var(--help-color-surface);
  border-bottom: 1px solid var(--help-color-border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.help-header__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.help-header__logo {
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: 700;
  color: var(--help-color-ink);
  letter-spacing: -0.01em;
  flex-shrink: 0;
}

.help-header__logo:hover {
  text-decoration: none;
  opacity: 0.85;
}

.help-header__logo-mark {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 8px;
  background: linear-gradient(135deg, var(--help-color-accent) 0%, var(--help-color-navy) 55%, var(--help-color-sky) 100%);
}

/* "Help" beside the brand: the brand now leads to renable.com, so this is the header's way
   back to the help index (the sidebar's "Help home" is hidden behind the toggle on phones). */
.help-header__section {
  padding-left: 12px;
  border-left: 1px solid var(--help-color-border);
  font-size: 16px;
  font-weight: 600;
  color: var(--help-color-ink-soft);
  flex-shrink: 0;
}

a.help-header__section:hover {
  color: var(--help-color-ink);
  text-decoration: none;
}

.help-header__end {
  justify-self: end;
}

.help-header__app-link {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--help-color-border);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--help-color-ink);
  white-space: nowrap;
}

a.help-header__app-link:hover {
  border-color: var(--help-color-ink-soft);
  text-decoration: none;
}

.help-nav-toggle-checkbox {
  display: none;
}

.help-nav-toggle-label {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--help-color-border);
  cursor: pointer;
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1;
}

/* ---------- Search ---------- */

.help-search {
  min-width: 0;
}

.help-search__input {
  width: 100%;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--help-color-border);
  background: var(--help-color-surface-alt);
  font-family: inherit;
  font-size: 14px;
  color: var(--help-color-ink);
}

.help-search__input::placeholder {
  color: var(--help-color-muted);
}

.help-search__input:focus {
  background: var(--help-color-surface);
}

/* ---------- Shell layout ---------- */

.help-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 48px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 32px 24px 64px;
  align-items: start;
}

.help-main {
  min-width: 0;
}

/* ---------- Collection nav ---------- */

.help-nav {
  position: sticky;
  top: 88px;
}

.help-nav__collection + .help-nav__collection {
  margin-top: 20px;
}

.help-nav__collection-name {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--help-color-muted);
}

.help-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.help-nav__link {
  display: block;
  padding: 5px 0;
  font-size: 14px;
  color: var(--help-color-ink-soft);
  border-left: 2px solid transparent;
  padding-left: 10px;
  margin-left: -10px;
}

.help-nav__link:hover {
  color: var(--help-color-ink);
  text-decoration: none;
}

.help-nav__link--home {
  margin-bottom: 20px;
  font-weight: 600;
}

.help-nav__link--active {
  color: var(--help-color-accent-dark);
  border-left-color: var(--help-color-accent);
  font-weight: 600;
}

/* ---------- Index page ---------- */

.help-index__intro {
  margin-bottom: 32px;
}

.help-index__title {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.help-index__subtitle {
  color: var(--help-color-ink-soft);
  font-size: 16px;
  margin: 0;
}

.help-index__collection {
  margin-bottom: 40px;
}

.help-index__collection-heading {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 4px;
}

.help-index__collection-description {
  color: var(--help-color-muted);
  font-size: 14px;
  margin: 0 0 16px;
}

.help-index__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.help-index__empty {
  color: var(--help-color-muted);
  padding: 48px 0;
  text-align: center;
}

/* ---------- Article card (the /help index grid) ---------- */

.help-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px 16px 20px;
  border: 1px solid var(--help-color-border);
  border-radius: 12px;
  background: var(--help-color-surface);
  color: var(--help-color-ink);
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(35, 37, 58, 0.04);
  overflow: hidden;
  transition:
    border-color 0.2s ease,
    box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Signature: a quiet rail that resolves into the app's own logo-mark gradient on
   hover/focus, so the card's one moment of color ties back to the brand mark
   (see .help-header__logo-mark) instead of an arbitrary accent stripe. */
.help-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--help-color-border);
  transition: background 0.2s ease;
}

/* `a.help-card`, not just `.help-card` — needs the extra type-selector specificity point
   to outrank `.help-root a:hover` above, which otherwise wins on specificity (it also
   matches `a`) regardless of source order and silently re-underlines the card on hover. */
a.help-card:hover,
a.help-card:focus-visible {
  border-color: transparent;
  text-decoration: none;
  box-shadow:
    0 12px 28px -14px rgba(35, 37, 58, 0.32),
    0 4px 10px rgba(35, 37, 58, 0.08);
  transform: translateY(-2px);
}

.help-card:hover::before,
.help-card:focus-visible::before {
  background: linear-gradient(180deg, var(--help-color-accent) 0%, var(--help-color-navy) 55%, var(--help-color-sky) 100%);
}

.help-card:focus-visible {
  outline: 2px solid var(--help-color-focus);
  outline-offset: 2px;
}

.help-card__title {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--help-color-ink);
}

/* Trailing affordance, laid out as a flex sibling of the title text (not absolutely
   positioned) so it can never overlap a long, wrapping title. */
.help-card__title::after {
  content: "→";
  flex-shrink: 0;
  margin-left: auto;
  color: var(--help-color-accent);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.help-card:hover .help-card__title::after,
.help-card:focus-visible .help-card__title::after {
  opacity: 1;
  transform: translateX(0);
}

.help-card__summary {
  font-size: 13px;
  color: var(--help-color-muted);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .help-card,
  .help-card::before,
  .help-card__title::after {
    transition: none;
  }
}

/* ---------- Article page ---------- */

.help-article {
  max-width: var(--help-measure);
}

.help-article__header {
  margin-bottom: 24px;
}

.help-article__title {
  font-size: 30px;
  font-weight: 700;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.help-article__lede {
  font-size: 17px;
  color: var(--help-color-ink-soft);
  margin: 0 0 8px;
}

.help-article__updated {
  font-size: 13px;
  color: var(--help-color-muted);
  margin: 0;
}

.help-article__not-found {
  padding: 48px 0;
}

.help-article__toc {
  background: var(--help-color-surface);
  border: 1px solid var(--help-color-border);
  border-radius: var(--help-radius);
  padding: 16px 20px;
  margin-bottom: 32px;
}

.help-article__toc-heading {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--help-color-muted);
}

.help-article__toc ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.help-article__toc li {
  padding: 3px 0;
}

.help-article__toc a {
  font-size: 14px;
}

.help-article__body {
  font-size: 16px;
}

.help-article__body h2,
.help-article__body h3 {
  scroll-margin-top: 88px;
  font-weight: 700;
  letter-spacing: -0.005em;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.help-article__body h2 {
  font-size: 22px;
  margin: 36px 0 14px;
}

.help-article__body h3 {
  font-size: 18px;
  margin: 28px 0 12px;
}

.help-article__anchor {
  opacity: 0;
  font-weight: 400;
  font-size: 0.85em;
  color: var(--help-color-muted);
}

.help-article__body h2:hover .help-article__anchor,
.help-article__body h3:hover .help-article__anchor,
.help-article__anchor:focus-visible {
  opacity: 1;
}

.help-article__body p {
  margin: 0 0 16px;
}

.help-article__body ul,
.help-article__body ol {
  margin: 0 0 16px;
  padding-left: 24px;
}

.help-article__body li {
  margin-bottom: 6px;
}

.help-article__body strong {
  font-weight: 700;
}

.help-article__body hr {
  border: none;
  border-top: 1px solid var(--help-color-border);
  margin: 32px 0;
}

.help-article__callout {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-left: 3px solid var(--help-color-sky);
  background: var(--help-color-surface-alt);
  border-radius: 0 6px 6px 0;
  color: var(--help-color-ink-soft);
}

.help-article__callout p:last-child {
  margin-bottom: 0;
}

.help-article__body code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.9em;
  background: var(--help-color-surface-alt);
  border: 1px solid var(--help-color-border);
  border-radius: 4px;
  padding: 1px 5px;
}

.help-article__pre {
  margin: 0 0 16px;
  padding: 14px 16px;
  background: var(--help-color-ink);
  border-radius: 8px;
  overflow-x: auto;
}

.help-article__pre code {
  background: none;
  border: none;
  padding: 0;
  color: #f4f4fa;
}

.help-article__image {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--help-radius);
  border: 1px solid var(--help-color-border);
  margin: 8px 0 20px;
}

.help-article__table-wrap {
  overflow-x: auto;
  margin: 0 0 20px;
}

.help-article__body table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
}

.help-article__body th,
.help-article__body td {
  border: 1px solid var(--help-color-border);
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}

.help-article__body th {
  background: var(--help-color-surface-alt);
  font-weight: 700;
}

.help-article__adjacent {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--help-color-border);
}

.help-article__adjacent-link {
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--help-color-border);
  border-radius: var(--help-radius);
  font-size: 14px;
  font-weight: 600;
  color: var(--help-color-ink);
}

/* `a.help-article__adjacent-link` — see the .help-card comment above for why the `a`
   type-selector is required to outrank `.help-root a:hover`'s underline. */
a.help-article__adjacent-link:hover {
  border-color: var(--help-color-accent);
  text-decoration: none;
}

.help-article__adjacent-link--next {
  text-align: right;
  grid-column: 2;
}

/* ---------- Intro mention (after the article's opening paragraphs) ---------- */

/* A step below the end card: one row, no heading, but a warm tint, the brand gradient rail
   and an outlined button so it registers on a skim. It must stay short enough that the
   answer the reader came for is not pushed far down. The tint keeps it distinct from the
   article's own callouts (sky rail on the neutral ground). */
.help-intro-cta {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px 20px;
  margin: 8px 0 12px;
  padding: 14px 18px 14px 22px;
  border: 1px solid #f3d3d0;
  border-radius: 10px;
  background: #fdf3f2;
  overflow: hidden;
}

.help-intro-cta::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--help-color-accent) 0%, var(--help-color-navy) 55%, var(--help-color-sky) 100%);
}

.help-intro-cta__text {
  flex: 1;
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--help-color-ink);
}

.help-intro-cta__text strong {
  font-weight: 700;
}

.help-intro-cta__link {
  flex-shrink: 0;
  padding: 7px 14px;
  border: 1px solid var(--help-color-accent-dark);
  border-radius: 999px;
  background: var(--help-color-surface);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

a.help-intro-cta__link:hover {
  background: var(--help-color-accent-dark);
  color: #fff;
  text-decoration: none;
}

/* ---------- Conversion card (after the article body) ---------- */

.help-cta {
  position: relative;
  margin-top: 48px;
  padding: 24px 28px 26px 30px;
  border: 1px solid var(--help-color-border);
  border-radius: 12px;
  background: var(--help-color-surface);
  overflow: hidden;
}

/* The logo-mark gradient as a rail, the same brand signature the index cards resolve to. */
.help-cta::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--help-color-accent) 0%, var(--help-color-navy) 55%, var(--help-color-sky) 100%);
}

.help-cta__eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--help-color-muted);
}

.help-cta__headline {
  margin: 0 0 8px;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--help-color-ink);
}

.help-cta__body {
  margin: 0 0 18px;
  font-size: 15px;
  color: var(--help-color-ink-soft);
}

.help-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}

.help-cta__primary {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 999px;
  /* accent-dark, not accent: white on #e94740 is 3.7:1, under AA for 15px text. */
  background: var(--help-color-accent-dark);
  font-size: 15px;
  font-weight: 600;
}

/* `a.` prefixes outrank `.help-root a` / `a:hover` (see the .help-card comment above). */
a.help-cta__primary,
a.help-cta__primary:hover {
  color: #fff;
  text-decoration: none;
}

a.help-cta__primary:hover {
  background: #a92f2a;
}

.help-cta__secondary {
  font-size: 15px;
  font-weight: 600;
}

/* ---------- Footer ---------- */

.help-footer {
  border-top: 1px solid var(--help-color-border);
  padding: 24px;
  text-align: center;
  font-size: 13px;
  color: var(--help-color-muted);
}

.help-footer a {
  color: var(--help-color-ink-soft);
}

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
  .help-shell {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .help-nav-toggle-label {
    display: inline-flex;
  }

  .help-nav {
    position: static;
    display: none;
    border: 1px solid var(--help-color-border);
    border-radius: var(--help-radius);
    padding: 16px;
    background: var(--help-color-surface);
  }

  .help-nav-toggle-checkbox:checked ~ .help-shell .help-nav {
    display: block;
  }

  .help-article__adjacent {
    grid-template-columns: 1fr;
  }

  .help-article__adjacent-link--next {
    grid-column: 1;
    text-align: left;
  }
}

@media (max-width: 520px) {
  .help-header {
    grid-template-columns: 1fr;
    row-gap: 12px;
    padding: 12px 16px;
  }

  .help-shell {
    padding: 24px 16px 48px;
  }

  .help-header__end {
    justify-self: start;
  }

  .help-cta {
    padding: 20px 18px 22px 22px;
  }

  .help-intro-cta {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------- Print ---------- */

@media print {
  .help-header,
  .help-footer,
  .help-nav,
  .help-nav-toggle-label,
  .help-article__toc,
  .help-article__adjacent,
  .help-intro-cta,
  .help-cta,
  .help-search {
    display: none !important;
  }

  .help-shell {
    display: block;
    max-width: none;
    padding: 0;
  }

  .help-root {
    background: #fff;
  }

  .help-article__anchor {
    display: none;
  }
}