/* Major — the user guide (website/guide, website/en/guide). Built on site.css.
   Full width: the contents on the reading side's start edge, the page in the middle, "on this page" at the end edge. */

:root { --side-w: 290px; --onpage-w: 230px; --read-w: 860px; }

body.g { background: var(--surface); }

/* ---------- header: brand · search · language ---------- */
.gnav--guide { background: rgba(255, 255, 255, 0.82); }
.g-bar { padding-inline: clamp(12px, 2vw, 24px); gap: 14px; }
.g-bar .brand__name { font-size: 16px; }
.brand__sub { font-size: 15px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.brand__sub:hover { color: var(--ink); }
.g-menu {
  display: none; width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--ink);
  place-items: center; cursor: pointer; flex: none;
}
.g-menu svg { width: 22px; height: 22px; }
.g-menu:hover { background: rgba(0, 0, 0, 0.05); }
.g-search { position: relative; flex: 1 1 auto; max-width: 520px; margin-inline: auto; }
.g-search > svg { position: absolute; inset-inline-start: 12px; top: 50%; translate: 0 -50%; width: 17px; height: 17px; color: var(--faint); pointer-events: none; }
.g-search input {
  width: 100%; height: 36px; border: 1px solid transparent; border-radius: 10px; background: rgba(0, 0, 0, 0.05);
  padding-inline: 38px 34px; font: inherit; font-size: 14.5px; color: var(--ink); outline: none; transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.g-search input::placeholder { color: var(--faint); }
.g-search input:focus { background: #fff; border-color: var(--line-2); box-shadow: 0 0 0 4px rgba(176, 133, 52, 0.15); }
.g-search input::-webkit-search-cancel-button { display: none; }
.g-search__key {
  position: absolute; inset-inline-end: 9px; top: 50%; translate: 0 -50%; font: 600 11.5px/1 var(--font); color: var(--faint);
  border: 1px solid var(--line-2); border-radius: 5px; padding: 3px 6px; background: #fff;
}
.g-search input:focus ~ .g-search__key { display: none; }
.g-results {
  position: absolute; inset-inline: 0; top: calc(100% + 8px); max-height: min(70vh, 560px); overflow: auto; z-index: 60;
  background: #fff; border-radius: 14px; box-shadow: 0 0 0 1px var(--line), 0 24px 60px -20px rgba(0, 0, 0, 0.3); padding: 6px;
}
.g-results a { display: block; padding: 10px 12px; border-radius: 10px; }
.g-results a[aria-selected="true"], .g-results a:hover { background: var(--gold-soft); }
.g-results strong { display: block; font-size: 15px; color: var(--ink); }
.g-results small { display: block; font-size: 12px; color: var(--gold-ink); font-weight: 600; margin-block-end: 2px; }
.g-results span { display: block; font-size: 13px; color: var(--muted); line-height: 1.55; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.g-results mark { background: rgba(214, 170, 88, 0.35); color: inherit; border-radius: 3px; padding-inline: 1px; }
.g-results__empty { padding: 18px 12px; color: var(--muted); font-size: 14px; text-align: center; }

/* ---------- layout ---------- */
.g-layout {
  display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr) var(--onpage-w);
  min-height: calc(100vh - var(--nav-h));
}
.g-side {
  position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); overflow-y: auto; overscroll-behavior: contain;
  border-inline-end: 1px solid var(--line); background: var(--paper); padding: 20px 14px 40px;
  scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}
.g-main { min-width: 0; padding: clamp(24px, 3.5vw, 48px) clamp(20px, 4vw, 64px) 80px; }
.g-main > * { max-width: var(--read-w); margin-inline: auto; }
.g--wide .g-main > * { max-width: 1180px; }
.g-onpage { position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); overflow-y: auto; padding: 44px 20px 40px 8px; }
.g--wide .g-layout { grid-template-columns: var(--side-w) minmax(0, 1fr); }
.g--wide .g-onpage { display: none; }

@media (max-width: 1280px) {
  .g-layout { grid-template-columns: var(--side-w) minmax(0, 1fr); }
  .g-onpage { display: none; }
}
@media (max-width: 1000px) {
  .g-layout, .g--wide .g-layout { grid-template-columns: minmax(0, 1fr); }
  .g-menu { display: grid; }
  .g-side {
    position: fixed; z-index: 70; inset-block: var(--nav-h) 0; inset-inline-start: 0; width: min(86vw, 340px); height: auto;
    transform: translateX(-105%); visibility: hidden; transition: transform 0.28s cubic-bezier(.2, .8, .2, 1), visibility 0.28s;
    box-shadow: 0 0 60px -10px rgba(0, 0, 0, 0.35); background: var(--paper);
  }
  html[dir="rtl"] .g-side { transform: translateX(105%); }
  body.g-open .g-side { transform: none; visibility: visible; }
  .g-scrim { position: fixed; inset: var(--nav-h) 0 0; z-index: 65; background: rgba(0, 0, 0, 0.3); }
  .g-scrim[hidden] { display: none; }
}
@media (max-width: 760px) {
  .g-bar .brand__name, .g-bar .brand__sep, .g-site { display: none; }
  .g-search__key { display: none; }
}
@media (max-width: 480px) {
  .brand__sub { display: none; }
}

/* ---------- contents (sidebar) ---------- */
.g-nav { font-size: 14.5px; }
.g-nav__home { display: block; padding: 8px 12px; margin-block-end: 8px; border-radius: 10px; font-weight: 700; font-size: 15px; }
.g-nav__home:hover { background: rgba(0, 0, 0, 0.04); }
.g-nav__home[aria-current="page"] { background: var(--gold-soft); color: var(--gold-ink); }
.g-part { margin-block: 2px; }
.g-part > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px;
  font-weight: 600; color: var(--ink); user-select: none;
}
.g-part > summary::-webkit-details-marker { display: none; }
.g-part > summary:hover { background: rgba(0, 0, 0, 0.04); }
.g-part > summary svg { width: 18px; height: 18px; color: var(--gold); flex: none; }
.g-part > summary span { flex: 1; }
.g-part > summary::after {
  content: ""; width: 7px; height: 7px; border-inline-end: 1.6px solid var(--faint); border-block-end: 1.6px solid var(--faint);
  transform: rotate(-45deg); transition: transform 0.2s; margin-inline-end: 4px;
}
html[dir="rtl"] .g-part > summary::after { transform: rotate(135deg); }
.g-part[open] > summary::after { transform: rotate(45deg); }
.g-part ul { list-style: none; margin: 2px 0 10px; padding: 0; padding-inline-start: 22px; border-inline-start: 1px solid var(--line); margin-inline-start: 20px; }
.g-part li a { display: block; padding: 6px 12px; border-radius: 8px; color: var(--muted); line-height: 1.45; }
.g-part li a:hover { color: var(--ink); background: rgba(0, 0, 0, 0.035); }
.g-part li a[aria-current="page"] { color: var(--gold-ink); background: var(--gold-soft); font-weight: 600; }

/* ---------- on this page ---------- */
.g-onpage__title { font-size: 12.5px; font-weight: 700; color: var(--ink); margin: 0 0 10px; }
html[lang="en"] .g-onpage__title { text-transform: uppercase; letter-spacing: 0.06em; font-size: 11.5px; }
.g-onpage ul { list-style: none; margin: 0; padding: 0; border-inline-start: 1px solid var(--line); }
.g-onpage a {
  display: block; padding: 5px 14px; font-size: 13.5px; color: var(--muted); line-height: 1.45;
  margin-inline-start: -1px; border-inline-start: 2px solid transparent;
}
.g-onpage a:hover { color: var(--ink); }
.g-onpage a.is-active { color: var(--gold-ink); border-inline-start-color: var(--gold); font-weight: 600; }

/* ---------- breadcrumbs, topic head ---------- */
.g-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; color: var(--faint); margin-block-end: 18px; }
.g-crumbs a:hover { color: var(--ink); }
.topic__head { margin-block-end: 36px; padding-block-end: 28px; border-block-end: 1px solid var(--line); }
.topic h1, .g-hero h1, .g-parthead h1 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.15; }
html[lang="ar"] .topic h1, html[lang="ar"] .g-hero h1, html[lang="ar"] .g-parthead h1 { line-height: 1.4; }
.topic__lede { font-size: clamp(17px, 1.5vw, 20px); color: var(--muted); margin: 14px 0 0; line-height: 1.6; }
html[lang="ar"] .topic__lede { line-height: 1.85; }
.who { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 22px 0 0; font-size: 14px; }
.who > div { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.who dt { color: var(--faint); font-weight: 500; }
.who dt::after { content: ":"; }
.who dd { margin: 0; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); font-size: 13px; font-weight: 600; }
.perm { color: var(--gold-ink); font-weight: 600; }

/* ---------- prose ---------- */
.topic { font-size: 17px; }
html[lang="ar"] .topic { font-size: 17.5px; }
.topic h2 { font-size: clamp(23px, 2.2vw, 28px); margin: 54px 0 16px; scroll-margin-top: calc(var(--nav-h) + 20px); }
.topic h3 { font-size: 20px; margin: 36px 0 12px; scroll-margin-top: calc(var(--nav-h) + 20px); }
.topic h2 + p, .topic h3 + p { margin-block-start: 0; }
.topic p, .topic li { color: var(--ink-2); }
.topic ul, .topic ol { padding-inline-start: 1.3em; margin: 0 0 1.1em; }
.topic li { margin-block: 0.4em; }
.topic li::marker { color: var(--gold); }
.topic strong { color: var(--ink); font-weight: 650; }
.topic code {
  font-family: var(--mono); font-size: 0.86em; background: var(--paper-2); border-radius: 6px; padding: 0.1em 0.4em;
  overflow-wrap: anywhere; color: var(--ink);
}
kbd {
  display: inline-block; min-width: 1.7em; padding: 1px 7px; border-radius: 6px; text-align: center;
  font: 600 0.8em/1.6 var(--font); color: var(--ink); background: linear-gradient(#fff, #f3f3f5);
  box-shadow: inset 0 0 0 1px var(--line-2), 0 1px 0 rgba(0, 0, 0, 0.12); direction: ltr; unicode-bidi: isolate;
}
.topic hr { border: 0; height: 1px; background: var(--line); margin: 40px 0; }

/* numbered steps */
.step-list { list-style: none; counter-reset: step; padding: 0 !important; margin: 24px 0 28px !important; }
.step-list > li {
  position: relative; counter-increment: step; padding-inline-start: 52px; margin-block: 0 18px; min-height: 34px;
}
.step-list > li::before {
  content: counter(step); position: absolute; inset-inline-start: 0; top: 0; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ink); color: #fff; font: 700 14px/1 "Inter", sans-serif;
}
.step-list > li:not(:last-child)::after {
  content: ""; position: absolute; inset-inline-start: 16.5px; top: 40px; bottom: -14px; width: 1px; background: var(--line-2);
}

/* screenshots */
.shot { margin: 28px 0 32px; }
.shot a {
  display: block; border-radius: 12px; overflow: hidden; background: #fff; cursor: zoom-in;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 14px 40px -18px rgba(0, 0, 0, 0.3); transition: box-shadow 0.25s, transform 0.25s;
}
.shot a:hover { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 22px 60px -20px rgba(0, 0, 0, 0.38); }
.shot img { width: 100%; }
.shot figcaption { margin-block-start: 12px; text-align: center; font-size: 14px; color: var(--faint); }
.shot--missing .shot__placeholder {
  display: grid; place-items: center; min-height: 180px; border-radius: 12px; border: 1.5px dashed var(--line-2); color: var(--faint); font-size: 14px;
}

/* boxed asides */
.box { margin: 26px 0; padding: 16px 20px 16px; border-radius: 14px; background: var(--paper-2); border-inline-start: 3px solid var(--faint); }
.box > :last-child { margin-block-end: 0; }
.box p { color: var(--ink-2); }
.box__title { font-size: 13.5px; font-weight: 700; margin: 0 0 4px !important; color: var(--ink); }
html[lang="en"] .box__title { text-transform: uppercase; letter-spacing: 0.05em; font-size: 12px; }
.box--tip { background: #f2f7f0; border-color: #4f9a62; }
.box--tip .box__title { color: #2f7a43; }
.box--warning { background: #fdf3ea; border-color: #d27a2c; }
.box--warning .box__title { color: #a65815; }
.box--note { background: #f1f4fa; border-color: #5b7bbf; }
.box--note .box__title { color: #3c5a9b; }
.box--result { background: var(--gold-soft); border-color: var(--gold); }
.box--result .box__title { color: var(--gold-ink); }

/* tables */
.topic table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 22px 0 28px; font-size: 15.5px; display: block; overflow-x: auto; }
.topic table thead th { background: var(--paper-2); color: var(--ink); font-weight: 650; text-align: start; padding: 11px 14px; white-space: nowrap; }
.topic table thead th:first-child { border-start-start-radius: 10px; border-end-start-radius: 10px; }
.topic table thead th:last-child { border-start-end-radius: 10px; border-end-end-radius: 10px; }
.topic table td { padding: 12px 14px; border-block-end: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }
.topic table tr:last-child td { border-block-end: 0; }
.topic table tr:has(a:target) td { background: var(--gold-soft); }
.topic td a[id] { scroll-margin-top: calc(var(--nav-h) + 24px); }
@media (min-width: 761px) { .topic table { display: table; } }

/* "start here, by your job" */
.roles-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 18px 0 28px; }
.roles-grid a {
  display: block; padding: 20px 22px; border-radius: 16px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line);
  text-decoration: none !important; transition: box-shadow 0.2s, background 0.2s;
}
.roles-grid a:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--line-2), 0 12px 30px -16px rgba(0, 0, 0, 0.25); }
.roles-grid strong { display: block; font-size: 17px; color: var(--ink); }
.roles-grid span { display: block; color: var(--muted); font-size: 14.5px; margin-block-start: 4px; }
@media (max-width: 640px) { .roles-grid { grid-template-columns: 1fr; } }

/* ---------- pager ---------- */
.g-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-block-start: 64px; padding-block-start: 28px; border-block-start: 1px solid var(--line); }
.g-pager__card {
  display: block; padding: 18px 20px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow 0.2s, background 0.2s;
}
.g-pager__card:hover { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-2); }
.g-pager__card span { display: block; font-size: 13px; color: var(--faint); margin-block-end: 3px; }
.g-pager__card strong { display: block; color: var(--gold-ink); font-size: 16px; line-height: 1.45; }
.g-pager__next { text-align: end; }
@media (max-width: 600px) { .g-pager { grid-template-columns: 1fr; } }

/* ---------- guide home & part pages ---------- */
.g-hero { text-align: center; padding: clamp(28px, 5vw, 64px) 0 clamp(32px, 4vw, 52px); position: relative; isolation: isolate; overflow: clip; overflow-clip-margin: 40px; }
.g-main { overflow-x: clip; }
.g-hero::before {
  content: ""; position: absolute; inset: -40px -20% auto; height: 380px; z-index: -1;
  background: radial-gradient(40% 60% at 50% 30%, var(--gold-glow), transparent 70%);
}
.g-hero h1 { font-size: clamp(38px, 5.5vw, 64px); }
.g-hero .topic__lede { max-width: 46ch; margin-inline: auto; }
.g-hero__search {
  display: flex; align-items: center; gap: 12px; width: min(100%, 560px); margin: 30px auto 0; padding: 14px 18px; border-radius: 16px;
  border: 0; background: #fff; box-shadow: 0 0 0 1px var(--line-2), 0 16px 40px -20px rgba(0, 0, 0, 0.3); cursor: text;
  font: inherit; font-size: 16px; color: var(--faint); text-align: start;
}
.g-hero__search svg { width: 20px; height: 20px; flex: none; }
.g-hero__search span { flex: 1; }
.g-hero__search kbd { font-size: 12px; }
.g-h2 { font-size: 22px; margin: 8px 0 20px; }
.g-parts { list-style: none; padding: 0; margin: 0 0 48px; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.g-partcard {
  display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 24px; border-radius: 18px; background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow 0.25s, transform 0.25s, background 0.25s;
}
.g-partcard:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--line-2), 0 18px 40px -22px rgba(0, 0, 0, 0.3); transform: translateY(-2px); }
.g-partcard__icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--gold-soft); color: var(--gold-ink); margin-block-end: 8px; }
.g-partcard__icon svg { width: 22px; height: 22px; }
.g-partcard strong { font-size: 18px; color: var(--ink); }
.g-partcard > span:not(.g-partcard__icon) { color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.g-partcard em { margin-block-start: auto; padding-block-start: 10px; font-style: normal; font-size: 13px; color: var(--gold-ink); font-weight: 600; }
.topic--home { border-block-start: 1px solid var(--line); padding-block-start: 12px; }
.g-parthead { display: flex; gap: 20px; align-items: flex-start; margin-block-end: 32px; }
.g-parthead__icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--gold-soft); color: var(--gold-ink); flex: none; }
.g-parthead__icon svg { width: 28px; height: 28px; }
.g-count { margin: 10px 0 0; font-size: 14px; color: var(--gold-ink); font-weight: 600; }
.g-cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.g-card {
  display: block; height: 100%; padding: 18px 20px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow 0.2s, background 0.2s;
}
.g-card:hover { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-2); }
.g-card strong { display: block; color: var(--ink); font-size: 16.5px; }
.g-card span { display: block; color: var(--muted); font-size: 14px; margin-block-start: 4px; line-height: 1.6; }

/* ---------- screenshot viewer ---------- */
.g-zoom { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 94vh; overflow: visible; }
.g-zoom::backdrop { background: rgba(12, 12, 14, 0.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.g-zoom img { max-width: 96vw; max-height: 88vh; width: auto; height: auto; border-radius: 10px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6); background: #fff; }
.g-zoom p { margin: 12px 0 0; text-align: center; color: #e5e5ea; font-size: 14px; }
.g-zoom button {
  position: absolute; top: -14px; inset-inline-end: -14px; width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer;
  background: #fff; color: var(--ink); font-size: 20px; line-height: 1; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* ---------- print ---------- */
@media print {
  .gnav, .g-side, .g-onpage, .g-pager, .footer, .skip-link, .g-crumbs, .g-scrim { display: none !important; }
  .g-layout { display: block; }
  .g-main { padding: 0; }
  .g-main > * { max-width: none; }
  .shot a { box-shadow: none; border: 1px solid #ddd; }
  .shot, .box, .step-list > li { break-inside: avoid; }
  /* Role cards: one role per printed page. */
  .topic[data-topic="ref/role-cards"] h2:not(:first-of-type) { break-before: page; }
}