/* ---------- Settings and Help and Support (renderSettings, renderHelp in js/account.js) ----------
   Opt-in layout, prefix sh-. The shared .suggest-screen is not used here, so the other pages that share it stay unchanged.
   Layout follows the width the page really has (container queries on .sh-wrap), not the window: the app sidebar takes 284 px from
   860 px and the ad rails take more when they are on. Only the Help back link follows the window, because it follows the sidebar. */

.sh-wrap { container-type: inline-size; container-name: sh; }
.sh-screen { padding: 16px 16px 32px; display: flex; flex-direction: column; gap: 16px; max-width: 1000px; margin: 0 auto; }
.sh-title { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.2; }
.sh-lead { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text); }
.sh-note { margin: 0; font-size: 14px; line-height: 1.4; color: var(--text-muted); }
.sh-note a, .sh-lead a { color: var(--brand-text); overflow-wrap: anywhere; }

.sh-groups { display: flex; flex-direction: column; gap: 20px; }
.sh-col { display: contents; }
.sh-group { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sh-group-title { margin: 0; font-size: 14px; font-weight: 600; color: var(--text-muted); text-transform: none; }
.sh-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.sh-list > li + li { border-top: 1px solid var(--border); }
.sh-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 10px 14px; box-sizing: border-box;
  background: none; border: none; color: var(--text); font: inherit; font-size: 15px; text-align: left; text-decoration: none; cursor: pointer;
}
a.sh-row:hover, button.sh-row:hover { background: var(--surface-2); }
.sh-row-static { cursor: default; }
.sh-row-label { flex: none; font-weight: 500; }
.sh-row-value { flex: 1; min-width: 0; text-align: right; color: var(--text-muted); overflow-wrap: anywhere; }
.sh-row svg { flex: none; margin-left: auto; color: var(--text-muted); } /* the arrow sits at the right edge, with or without a value */
.sh-row:disabled { opacity: 0.6; cursor: progress; }
.sh-email { overflow-wrap: anywhere; }
.sh-danger { margin-top: 8px; }
.sh-danger .sh-list { border-color: var(--danger-text); }
.sh-row-danger { color: var(--danger-text); font-weight: 600; }
.sh-dialog-body { padding-top: 12px; overflow-y: auto; min-height: 0; }

/* ---------- Help ---------- */
.sh-help { display: flex; flex-direction: column; gap: 20px; }
.sh-help-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sh-help-panel { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.sh-form { margin: 0; }
.sh-legal-links a { display: inline-flex; align-items: center; min-height: 44px; }
.sh-help-back { align-self: flex-start; }
@media (min-width: 860px) { .sh-help-back { display: none; } } /* the sidebar is the way back from here */
.sh-back { align-self: flex-start; margin-bottom: 0; }

/* ---------- Make a privacy request (renderPrivacyRequest): the Help layout, "Your requests" in the panel ---------- */
.sh-request { margin-bottom: 0; overflow-wrap: anywhere; }

/* ---------- Document pages: My data, Terms, Privacy (shDocHtml, setupShDocContents in js/account.js) ----------
   A text column capped at a reading width, and "On this page": a closed <details> when narrow, a list that stays in view when wide. */
.sh-doc { display: flex; flex-direction: column; gap: 16px; }
.sh-doc-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; max-width: 700px; }
.sh-doc-head { display: flex; flex-direction: column; gap: 12px; }
.sh-doc-body { min-width: 0; }
.sh-doc-body h2 { scroll-margin-top: calc(var(--topbar-h, 96px) + 12px); }

.sh-toc-list { list-style: none; margin: 0; padding: 0; }
.sh-toc-btn {
  display: block; width: 100%; min-height: 44px; padding: 8px 12px; box-sizing: border-box;
  background: none; border: none; border-radius: var(--radius-lg); color: var(--brand-text); font: inherit; font-size: 14px; line-height: 1.4;
  text-align: left; cursor: pointer; overflow-wrap: anywhere;
}
.sh-toc-btn:hover { background: var(--surface-2); }
.sh-toc-btn:focus-visible { outline-offset: -2px; }
.sh-toc-fold { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.sh-toc-fold summary { min-height: 44px; padding: 12px 14px; box-sizing: border-box; font-size: 15px; font-weight: 600; line-height: 20px; cursor: pointer; }
.sh-toc-fold .sh-toc-list { padding: 0 2px 6px; }
.sh-toc-side { display: none; }

/* My data: everything held stays on the page, an empty section takes one line. */
.sh-data { display: flex; flex-direction: column; gap: 14px; overflow-wrap: anywhere; }
.sh-data-section { min-width: 0; }
.sh-data-section .section-title { margin: 0 0 10px; }
.sh-data-empty { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.sh-data-empty .section-title, .sh-data-empty .card-desc { margin: 0; }

@container sh (min-width: 720px) {
  .sh-groups { flex-direction: row; align-items: flex-start; gap: 24px; }
  .sh-col { display: flex; flex-direction: column; gap: 20px; flex: 1; min-width: 0; }
}
@container sh (min-width: 860px) {
  .sh-help { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; }
  .sh-doc { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 32px; align-items: start; }
  .sh-toc-fold { display: none; }
  .sh-toc-side {
    display: flex; flex-direction: column; gap: 4px; position: sticky; top: calc(var(--topbar-h, 96px) + 12px);
    max-height: calc(100vh - var(--topbar-h, 96px) - 24px); overflow-y: auto;
  }
  .sh-toc-side .sh-group-title { padding: 0 12px; }
}