/* Help pages (SPEC-1.0-help-redesign): the help home, the articles, and the same in the vault's Help
   view. Laid out the way 1Password lays out its help: cards to start, one task per article, numbered
   steps, system tabs, commands in boxes with Copy, tip boxes, "On this page". Uses only colour names
   the site and the vault both define. */

/* The site's mint panel colour; the vault has no --stage, so it mixes one from its green. */
.wvh-layout, .wvh-home, .wvh-article { --wvh-tint: var(--stage, color-mix(in srgb, var(--brand) 12%, var(--panel))); }

/* ── the public article page: articles | article | on this page ───────────── */
.wvh-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr) 210px; gap: 56px;
  padding-block: 48px 96px; align-items: start; }
.wvh-main { min-width: 0; }
.wvh-side, .wvh-toc { position: sticky; top: 104px; font-family: var(--font-reading); font-size: 14px; }
.wvh-side ul, .wvh-toc ol { list-style: none; margin: 0; padding: 0; }
.wvh-side-home { display: block; margin-bottom: 12px; font-family: var(--font-main); font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-decoration: none; }
.wvh-side a:not(.wvh-side-home), .wvh-toc a { display: block; padding: 7px 12px; border-radius: 8px;
  color: var(--muted); text-decoration: none; line-height: 1.35; border-left: 2px solid transparent; }
.wvh-side a:not(.wvh-side-home):hover, .wvh-toc a:hover { color: var(--fg); background: var(--panel2); }
.wvh-side a[aria-current="page"] { color: var(--fg); background: var(--wvh-tint); font-weight: 600; }
.wvh-toc-title { margin: 0 0 10px; font-family: var(--font-main); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); }
.wvh-toc a { border-radius: 0; padding: 6px 12px; border-left-color: var(--border); }
.wvh-toc a[aria-current="true"] { color: var(--fg); border-left-color: var(--brand); }
.wvh-toc { max-height: calc(100vh - 130px); overflow-y: auto; }
.wvh-toc ol ol a { padding: 4px 12px 4px 24px; font-size: 13px; }
.wvh-toc-inline ol ol { padding: 0 0 0 18px; }
.wvh-toc-inline ol ol li { font-size: 16px; }

/* ── an article ───────────────────────────────────────────────────────────── */
.wvh-article { max-width: 68ch; font-family: var(--font-reading); color: var(--fg); }
.wvh-article p, .wvh-article li { font-size: 17px; line-height: 1.65; }
.wvh-article p { margin: 0 0 14px; }
.wvh-article a { color: inherit; text-decoration: underline; text-decoration-color: var(--brand);
  text-decoration-thickness: 2px; text-underline-offset: 3px; }
.wvh-crumbs { display: flex; gap: 8px; align-items: center; margin-bottom: 18px; font-size: 14px; color: var(--muted); }
.wvh-crumbs a { color: var(--muted) !important; text-decoration: none !important; }
.wvh-crumbs a:hover { color: var(--fg) !important; }
.wvh-title { margin: 0 0 14px; font-family: var(--font-main); font-size: clamp(30px, 2.2vw + 18px, 44px);
  line-height: 1.12; letter-spacing: -0.02em; }
.wvh-article .wvh-lead { margin: 0 0 28px; font-size: clamp(18px, .4vw + 16px, 21px); line-height: 1.5; color: var(--muted); }
.wvh-section { padding-top: 36px; margin-top: 40px; border-top: 1px solid var(--border); scroll-margin-top: 96px; }
.wvh-section h2 { margin: 0 0 16px; font-family: var(--font-main); font-size: clamp(21px, .5vw + 18px, 25px);
  line-height: 1.25; letter-spacing: -0.01em; }
.wvh-small, .wvh-article p.wvh-small { font-size: 16px; color: var(--muted); }
.wvh-more, .wvh-article p.wvh-more { margin-top: 28px; font-size: 16px; color: var(--muted); }
.wv-ui { font-weight: 650; }
.wvh-article code { font-family: var(--font-main); font-size: .86em; padding: .1em .35em; border-radius: 6px;
  background: var(--panel2); border: 1px solid var(--border); overflow-wrap: anywhere; }
.wvh-article q { quotes: "“" "”"; }

/* "Before you start" */
.wvh-before { margin: 0 0 8px; padding: 18px 22px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); }
.wvh-before-title, .wvh-article p.wvh-before-title { margin: 0 0 8px; font-family: var(--font-main); font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--label, var(--brand)); }
.wvh-before ul, .wvh-list { margin: 0; padding: 0; list-style: none; }
.wvh-before li, .wvh-list li { position: relative; padding-left: 22px; margin: 6px 0; }
.wvh-before li::before, .wvh-list li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 7px; height: 7px;
  border-radius: 2px; background: var(--brand); }

/* numbered steps */
.wvh-steps { counter-reset: wvh-step; list-style: none; margin: 0 0 18px; padding: 0; }
.wvh-steps > li { counter-increment: wvh-step; position: relative; padding-left: 46px; margin: 0 0 16px; }
.wvh-steps > li::before { content: counter(wvh-step); position: absolute; left: 0; top: .1em; width: 30px; height: 30px;
  display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--brand);
  font-family: var(--font-main); font-size: 14px; font-weight: 700; line-height: 1; color: var(--fg); }
.wvh-steps > li > .wvh-code, .wvh-steps > li > .wvh-tabs { margin: 12px 0; }

/* a command: what it's for, the command, Copy */
.wvh-code { margin: 12px 0 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel2); overflow: hidden; }
.wvh-code-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 8px 7px 14px;
  border-bottom: 1px solid var(--border); font-family: var(--font-main); font-size: 11.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); }
.wvh-code-bar > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wvh-copy { flex: 0 0 auto; min-height: 30px; padding: 4px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel); color: var(--fg); font-family: var(--font-main); font-size: 12px; letter-spacing: .04em; cursor: pointer; }
.wvh-copy:hover { border-color: var(--brand); }
/* Long commands wrap rather than hide past the edge; Copy takes the text, not the wrapping. */
.wvh-code pre { margin: 0; padding: 14px 16px; border: 0; border-radius: 0; background: transparent;
  white-space: pre-wrap; overflow-wrap: anywhere; }
.wvh-code pre code { padding: 0; border: 0; background: none; font-family: var(--font-main); font-size: 13.5px;
  line-height: 1.6; white-space: inherit; overflow-wrap: inherit; color: var(--fg); }

/* tabs: Linux / macOS / Windows, or one per app */
.wvh-tabs { margin: 14px 0 18px; }
.wvh-tablist { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--border); }
.wvh-tablist [role="tab"] { min-height: 40px; padding: 8px 14px; margin-bottom: -1px; border: 0;
  border-bottom: 2px solid transparent; background: none; color: var(--muted); font-family: var(--font-main);
  font-size: 13.5px; cursor: pointer; }
.wvh-tablist [role="tab"]:hover { color: var(--fg); }
.wvh-tablist [role="tab"][aria-selected="true"] { color: var(--fg); border-bottom-color: var(--brand); font-weight: 700; }
.wvh-tablist small, .wvh-tabpanel-label small { margin-left: 6px; padding: 1px 6px; border: 1px solid var(--border);
  border-radius: 999px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 400; }
.wvh-tabpanel-label, .wvh-article p.wvh-tabpanel-label { margin: 14px 0 0; font-family: var(--font-main); font-size: 13px; font-weight: 700; }
.wvh-tabs.is-js .wvh-tabpanel-label { display: none; }
.wvh-tabs.is-js .wvh-tabpanel > .wvh-code:first-child, .wvh-tabs.is-js .wvh-tabpanel > p:first-child { margin-top: 14px; }

/* tip and warning boxes */
.wvh-callout { display: flex; gap: 14px; margin: 20px 0; padding: 16px 18px; border-radius: 14px;
  border: 1px solid var(--border); border-left: 4px solid var(--brand); background: var(--wvh-tint); }
.wvh-callout-warn { border-left-color: var(--warn); background: color-mix(in srgb, var(--warn) 9%, var(--panel)); }
.wvh-callout-icon { flex: 0 0 24px; height: 24px; display: grid; place-items: center; border-radius: 50%;
  background: var(--brand); color: var(--brand-on); font-family: var(--font-main); font-size: 13px; font-weight: 800; }
.wvh-callout-warn .wvh-callout-icon { background: var(--warn); color: #1a0d00; }
.wvh-callout p { margin: 0; font-size: 16px; }
.wvh-callout .wvh-callout-title { margin-bottom: 4px; font-weight: 700; }

/* a picture of the vault, in the theme being shown */
.wvh-shot { margin: 18px 0 22px; }
.wvh-shot img { display: block; max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .12); }
html[data-theme="dark"] .wvh-shot-light, html:not([data-theme="dark"]) .wvh-shot-dark { display: none; }

/* two or three options side by side */
.wvh-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 6px 0 12px; }
.wvh-choice { padding: 18px 20px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); }
.wvh-choice p { font-size: 16px; margin: 0; }
.wvh-choice .wvh-choice-title { margin-bottom: 6px; font-family: var(--font-main); font-size: 16px; }

/* Next */
.wvh-next { display: flex; align-items: center; gap: 14px; margin-top: 44px; padding: 18px 22px; border: 1px solid var(--border);
  border-radius: 14px; background: var(--panel); text-decoration: none !important; color: var(--fg) !important; }
.wvh-next:hover { border-color: var(--brand); }
.wvh-next span:first-child { font-family: var(--font-main); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.wvh-next strong { flex: 1; font-family: var(--font-main); font-size: 17px; }
.wvh-next span:last-child { font-size: 20px; color: var(--brand); }

/* Get help / Troubleshooting entries: "If …", what it means, what to do */
.wvh-entry { padding: 20px 0 6px; border-top: 1px dashed var(--border); scroll-margin-top: 96px; }
.wvh-section > h2 + .wvh-entry { border-top: 0; padding-top: 4px; }
.wvh-entry h3 { margin: 0 0 8px; font-family: var(--font-reading); font-size: 18px; font-weight: 650; line-height: 1.4; }
.wvh-entry p { margin-bottom: 8px; }
.wvh-entry ul { margin: 0 0 8px; padding-left: 20px; }
.wv-msg { font-family: var(--font-main); font-size: .9em; font-weight: 600; }

/* folded "On this page", for narrow screens and the vault */
.wvh-toc-inline { margin: -8px 0 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); }
.wvh-toc-inline summary { cursor: pointer; padding: 12px 16px; min-height: 44px; font-family: var(--font-main); font-size: 13px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.wvh-toc-inline ol { margin: 0; padding: 0 16px 12px 34px; }
.wvh-toc-inline li { font-size: 16px; margin: 6px 0; }
.wvh-toc-inline a { text-decoration: none !important; }

/* ── the help home ────────────────────────────────────────────────────────── */
.page-intro.wvh-hero { padding-bottom: 8px; }
.wvh-home-wrap { padding-bottom: 96px; }
.wvh-home { font-family: var(--font-reading); color: var(--fg); }
.wvh-common { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 44px; font-size: 16px; }
.wvh-common > span { color: var(--muted); margin-right: 4px; }
.wvh-common a { padding: 7px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel);
  color: var(--fg); text-decoration: none; }
.wvh-common a:hover { border-color: var(--brand); }
.wvh-home-h { margin: 0 0 16px; font-family: var(--font-main); font-size: 22px; letter-spacing: -0.01em; }
.wvh-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px;
  margin: 0 0 48px; padding: 0; list-style: none; }
.wvh-cards > li { margin: 0; }
.wvh-card { position: relative; display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 24px;
  border: 1px solid var(--border); border-radius: 16px; background: var(--panel); color: var(--fg); text-decoration: none;
  transition: border-color .15s, transform .15s; }
.wvh-card:hover { border-color: var(--brand); transform: translateY(-2px); }
.wvh-card strong { font-family: var(--font-main); font-size: 18px; line-height: 1.3; }
.wvh-card > span:last-child { color: var(--muted); font-size: 16px; line-height: 1.5; }
.wvh-card-icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 6px; border-radius: 12px;
  background: var(--wvh-tint); color: var(--label, var(--brand)); }
.wvh-card-num { position: absolute; top: 16px; right: 22px; font-family: var(--font-main); font-size: 40px; font-weight: 800;
  line-height: 1; color: var(--faint); }
.wvh-cards-steps .wvh-card { border-top: 3px solid var(--brand); }

/* ── the vault: the same pages inside the vault's own layout ─────────────── */
/* Its own menu is on the left; wide screens get On this page and the article list on the right. */
.wvh-vault-aside { display: none; }
@media (min-width: 1280px) {
  .wvh-vault { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 48px; align-items: start; }
  .wvh-vault-aside:not([hidden]) { display: block; top: 24px; }
  [data-help-vault] .wvh-toc-inline { display: none; }
}
.wvh-vault-main { min-width: 0; }
.wvh-vault-aside .wvh-toc-title + ol, .wvh-vault-aside ul { margin-bottom: 24px; }
.wvh-vault-aside ul { list-style: none; padding: 0; }
.wvh-vault-aside ul a { display: block; padding: 6px 12px; border-radius: 8px; color: var(--muted); text-decoration: none; }
.wvh-vault-aside ul a:hover { color: var(--fg); background: var(--panel2); }
.wvh-vault-aside ul a[aria-current="page"] { color: var(--fg); background: var(--wvh-tint); font-weight: 600; }
[data-help-vault] .wvh-article { max-width: 760px; }
[data-help-vault] .wvh-section, [data-help-vault] .wvh-entry { scroll-margin-top: 24px; }
[data-help-vault] .wvh-common { margin-top: 8px; }

/* ── narrower screens ─────────────────────────────────────────────────────── */
@media (min-width: 1200px) { .wvh-layout .wvh-toc-inline { display: none; } }
@media (max-width: 1199px) {
  .wvh-layout { grid-template-columns: 190px minmax(0, 1fr); gap: 40px; }
  .wvh-layout .wvh-toc { display: none; }
}
@media (max-width: 860px) {
  .wvh-layout { grid-template-columns: minmax(0, 1fr); padding-block: 28px 72px; }
  .wvh-side { display: none; }
  .wvh-article p, .wvh-article li { font-size: 16.5px; }
  .wvh-steps > li { padding-left: 40px; }
  .wvh-card { padding: 20px; }
}
@media (max-width: 480px) {
  .wvh-tablist [role="tab"] { padding: 8px 9px; font-size: 13px; }
  .wvh-tablist small { margin-left: 4px; }
  .wvh-steps > li { padding-left: 38px; }
  .wvh-code pre { padding: 12px 13px; }
}
.wvh-site-links { list-style: none; margin: 20px 0 0; padding: 16px 0 0; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 4px 24px; font-size: 15px; }
.wvh-site-links a { display: inline-flex; align-items: center; min-height: 44px; }