/* =============================================================================
   TG Access — the /guide help centre.
   Depends on tokens.css and tgaccess.css (header, footer, buttons).

   A reading layout, not a marketing one: one column of text at a comfortable
   measure, a sticky contents rail beside it, and figures that break out of the
   measure because screenshots need the width.
   ========================================================================== */

.guide-layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
    padding-block: 34px 70px;
}

/* ------------------------------------------------------------ side rail */

.guide-side {
    position: sticky;
    inset-block-start: 84px;
    max-block-size: calc(100vh - 110px);
    overflow-y: auto;
    padding-inline-end: 4px;
}

.guide-search { display: flex; gap: 6px; margin-block-end: 22px; }
.guide-search input {
    flex: 1; min-inline-size: 0;
    padding: 9px 14px;
    border: 1.5px solid var(--line-strong);
    border-radius: var(--radius-pill);
    font: inherit; font-size: .88rem;
    background: var(--surface); color: var(--ink);
}
.guide-search input:focus {
    outline: none; border-color: var(--blue-500);
    box-shadow: 0 0 0 4px rgba(47, 107, 255, .13);
}
.guide-search button {
    flex: none;
    inline-size: 38px; block-size: 38px;
    border: 0; border-radius: 50%;
    background: var(--grad-brand); color: #fff;
    display: grid; place-items: center; cursor: pointer;
}

.guide-part + .guide-part { margin-block-start: 20px; }
.guide-part h2 {
    font-size: .72rem; font-weight: 800;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-subtle);
    margin: 0 0 8px;
}
.guide-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.guide-nav a {
    display: block;
    padding: 7px 12px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--ink-muted);
    font-size: .89rem; font-weight: 600;
    line-height: 1.4;
}
.guide-nav a:hover { background: var(--blue-50); color: var(--blue-700); }
.guide-nav a.is-current {
    background: var(--grad-brand); color: #fff;
    box-shadow: var(--shadow-brand);
}
.guide-nofilter { color: var(--ink-subtle); font-size: .88rem; padding: 8px 12px; }

/* ---------------------------------------------------------------- index */

.guide-hero { margin-block-end: 36px; }
.guide-hero h1 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); margin-block-end: 8px; }
.guide-hero p { color: var(--ink-muted); max-inline-size: 46ch; margin: 0; }

/* ---------------------------------------------------- audience picker (M-H) */

.guide-audience-pick {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-block-end: 30px;
}
.guide-audience-card {
    display: block;
    padding: 22px 22px 20px;
    border-radius: var(--radius);
    border: 1.5px solid var(--line);
    background: var(--surface);
    text-decoration: none;
    color: inherit;
    transition: transform .2s var(--ease), box-shadow .22s var(--ease),
                border-color .22s var(--ease);
}
.guide-audience-card:hover {
    transform: translateY(-3px);
    border-color: var(--blue-200);
    box-shadow: var(--shadow);
}
.guide-audience-card.is-active {
    border-color: transparent;
    background: var(--grad-brand);
    color: #fff;
    box-shadow: var(--shadow-brand);
}
.guide-audience-card svg {
    inline-size: 30px; block-size: 30px;
    margin-block-end: 12px;
}
.guide-audience-card h2 { font-size: 1.05rem; margin: 0 0 5px; }
.guide-audience-card p {
    margin: 0; font-size: .87rem; line-height: 1.55;
    color: var(--ink-muted);
}
.guide-audience-card.is-active p { color: rgba(255, 255, 255, .88); }

.guide-audience-clear {
    margin: -14px 0 30px;
    font-size: .86rem;
}
.guide-audience-clear a { color: var(--ink-muted); text-decoration: underline;
                          text-decoration-thickness: 1px; }
.guide-audience-clear a:hover { color: var(--blue-700); }

.guide-audience-switch {
    display: flex; gap: 6px;
    margin-block-end: 16px;
}
.guide-audience-switch a {
    flex: 1;
    text-align: center;
    padding: 6px 8px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--line-strong);
    font-size: .78rem; font-weight: 700;
    text-decoration: none; color: var(--ink-muted);
}
.guide-audience-switch a:hover { border-color: var(--blue-300); color: var(--blue-700); }
.guide-audience-switch a.is-active {
    background: var(--grad-brand); color: #fff; border-color: transparent;
}

.guide-audience-pill {
    display: inline-block;
    margin-inline-start: 10px;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    background: var(--blue-50); color: var(--blue-700);
    font-size: .74rem; font-weight: 700;
}
.guide-results > h2 {
    font-size: .74rem; font-weight: 800;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-subtle);
    margin: 0 0 14px;
}

.guide-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
    gap: 14px;
}
.guide-card {
    position: relative;
    display: block;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px 20px;
    text-decoration: none;
    color: inherit;
    transition: transform .2s var(--ease), box-shadow .22s var(--ease),
                border-color .22s var(--ease);
}
.guide-card:hover {
    transform: translateY(-3px);
    border-color: var(--blue-200);
    box-shadow: var(--shadow);
}
.guide-card h3 { font-size: 1rem; margin: 0 0 5px; }
.guide-card p { margin: 0; font-size: .87rem; color: var(--ink-muted); line-height: 1.55; }
.guide-card-go {
    position: absolute;
    inset-block-end: 14px; inset-inline-end: 16px;
    color: var(--blue-500); opacity: 0;
    transition: opacity .2s var(--ease), transform .2s var(--ease);
}
[dir="rtl"] .guide-card-go { transform: scaleX(-1); }
.guide-card:hover .guide-card-go { opacity: 1; }

/* -------------------------------------------------------------- chapter */

.guide-crumb { margin-block-end: 14px; font-size: .86rem; }
.guide-crumb a { color: var(--ink-muted); text-decoration: none; font-weight: 600; }
.guide-crumb a:hover { color: var(--blue-700); }

.guide-article h1 { font-size: clamp(1.7rem, 3.4vw, 2.35rem); margin-block-end: 10px; }
.guide-summary {
    font-size: 1.05rem; color: var(--ink-muted);
    max-inline-size: 60ch; margin-block-end: 26px;
}

.guide-onthispage {
    background: var(--canvas);
    border-radius: var(--radius);
    padding: 14px 20px;
    margin-block-end: 30px;
}
.guide-onthispage ul { list-style: none; margin: 0; padding: 0;
                       display: flex; flex-wrap: wrap; gap: 6px 18px; }
.guide-onthispage a { font-size: .87rem; font-weight: 600; color: var(--ink-muted);
                      text-decoration: none; }
.guide-onthispage a:hover { color: var(--blue-700); }

/* The reading column. 66ch is about the width a person reads comfortably;
   figures override it below because a screenshot needs the room. */
.guide-body { max-inline-size: 68ch; }
.guide-body h2 {
    font-size: 1.35rem; margin-block: 38px 12px;
    scroll-margin-block-start: 90px;
}
.guide-body h3 { font-size: 1.08rem; margin-block: 26px 8px; scroll-margin-block-start: 90px; }
.guide-body p { margin-block: 0 1.1em; line-height: 1.75; }
.guide-body ul, .guide-body ol { margin-block: 0 1.2em; padding-inline-start: 1.4em; }
.guide-body li { margin-block-end: .5em; line-height: 1.7; }
.guide-body code {
    font-family: var(--font-mono); font-size: .88em;
    background: var(--blue-50); color: var(--blue-800);
    border-radius: 5px; padding: 1.5px 6px;
    direction: ltr; unicode-bidi: isolate;
}
.guide-body a { color: var(--blue-700); text-decoration-thickness: 1px;
                text-underline-offset: 2px; }

.guide-note {
    margin: 0 0 1.4em;
    padding: 14px 18px;
    background: var(--amber-50);
    border-inline-start: 4px solid var(--yellow-500);
    border-radius: var(--radius-sm);
}
.guide-note p:last-child { margin-block-end: 0; }

.guide-shot, .guide-screen {
    margin: 26px 0 30px;
    max-inline-size: min(100%, 860px);
}
.guide-shot img {
    inline-size: 100%; block-size: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: block;
}
.guide-shot figcaption, .guide-screen figcaption {
    margin-block-start: 9px;
    font-size: .84rem; color: var(--ink-subtle); text-align: center;
}

/* -------------------------------------------------- feature list in-guide */

.guide-features { display: grid; gap: 12px; margin-block: 8px 24px; }
.guide-feature {
    display: grid; grid-template-columns: 42px 1fr; gap: 14px;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 16px 18px;
}
.guide-feature-ic {
    inline-size: 42px; block-size: 42px; border-radius: 12px;
    background: var(--blue-100); color: var(--blue-600);
    display: grid; place-items: center;
}
.guide-feature h3 { margin: 0 0 4px; font-size: .98rem; }
.guide-feature p { margin: 0 0 6px; font-size: .88rem; color: var(--ink-muted); }
.guide-feature a { font-size: .84rem; font-weight: 700; text-decoration: none; }

/* ---------------------------------------------------------------- pager */

.guide-pager {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
    margin-block-start: 48px; padding-block-start: 26px;
    border-block-start: 1px solid var(--line);
}
.guide-pager-link {
    display: block; padding: 14px 18px;
    border: 1px solid var(--line); border-radius: var(--radius);
    text-decoration: none; color: inherit;
    transition: border-color .2s var(--ease), background .2s var(--ease);
}
.guide-pager-link:hover { border-color: var(--blue-300); background: var(--blue-50); }
.guide-pager-link.is-next { text-align: end; }
.guide-pager-link .lbl { display: block; font-size: .74rem; font-weight: 800;
                         letter-spacing: .1em; text-transform: uppercase;
                         color: var(--ink-subtle); margin-block-end: 3px; }
.guide-pager-link .ttl { font-weight: 700; font-size: .94rem; }

.visually-hidden {
    position: absolute; inline-size: 1px; block-size: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 900px) {
    .guide-layout { grid-template-columns: 1fr; gap: 24px; }
    .guide-side { position: static; max-block-size: none; overflow: visible; }
    .guide-nav ul { display: flex; flex-wrap: wrap; gap: 6px; }
    .guide-nav a { background: var(--canvas); }
    .guide-body { max-inline-size: none; }
    .guide-pager { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .guide-audience-pick { grid-template-columns: 1fr; }
}

/* ==================================================== the screenshot viewer */

/* The zoom affordance on each screenshot. The <img> lives inside a real
   <button>, so the whole thing is one tab stop and Enter opens it. */
.guide-zoom {
    display: block; position: relative;
    inline-size: 100%; padding: 0; border: 0; background: none;
    cursor: zoom-in;
    border-radius: var(--radius);
}
.guide-zoom:focus-visible { outline: 3px solid var(--blue-400); outline-offset: 3px; }

.guide-zoom-badge {
    position: absolute; inset-block-end: 10px; inset-inline-end: 10px;
    inline-size: 34px; block-size: 34px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(12, 18, 44, .72); color: #fff;
    box-shadow: 0 4px 14px rgba(12, 18, 44, .3);
    /* Hidden until hover on a pointer device; always there on touch, where
       there is no hover to discover it with (see the media query below). */
    opacity: 0; transform: scale(.85);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none;
}
.guide-zoom-badge svg { inline-size: 18px; block-size: 18px; }
.guide-zoom:hover .guide-zoom-badge,
.guide-zoom:focus-visible .guide-zoom-badge { opacity: 1; transform: none; }

/* No hover to discover it with: leave the badge showing. */
@media (hover: none) {
    .guide-zoom-badge { opacity: 1; transform: none; }
}

/* ---- the dialog ---------------------------------------------------------- */

.lb {
    position: fixed; inset: 0; z-index: 100;
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transition: opacity .18s ease;
}
/* `display: flex` above beats the UA stylesheet's `[hidden] { display: none }`,
   which is a plain attribute rule. Without this the closed dialog is invisible
   (opacity 0) but still full screen and still swallowing every click on the
   page behind it — the guide's own screenshots included. The same defect bit
   the hero simulator; see D-159. */
/* Now handled once for every page by tokens.css — see the note there. */
.lb.is-open { opacity: 1; }

.lb-backdrop { position: absolute; inset: 0; background: rgba(8, 12, 30, .92); }

.lb-figure {
    position: relative; margin: 0; z-index: 1;
    display: flex; flex-direction: column; align-items: center;
    inline-size: 100%; block-size: 100%;
    padding: 58px 58px 84px;
    box-sizing: border-box;
}

/* The pan surface. The image is transformed inside it, so the flex centring
   that holds it in the middle at 1x is never fighting the transform. */
.lb-stage {
    flex: 1; min-block-size: 0;
    display: flex; align-items: center; justify-content: center;
    inline-size: 100%; overflow: hidden;
    touch-action: none;          /* the pinch handler needs the gesture */
}
.lb-img {
    max-inline-size: 100%; max-block-size: 100%;
    inline-size: auto; block-size: auto;
    object-fit: contain;
    cursor: zoom-in;
    /* The zoom itself is set inline by the script, frame by frame, so it must
       not be transitioned — a transition here fights every wheel notch. */
    transform-origin: center;
    user-select: none; -webkit-user-drag: none;
}

.lb-caption {
    margin-block-start: 14px; text-align: center;
    color: rgba(255, 255, 255, .8); font-size: .88rem;
    max-inline-size: 60ch;
}

/* ---- the chrome ---------------------------------------------------------- */

.lb-bar {
    position: absolute; inset-block-end: 18px; inset-inline: 0;
    z-index: 2;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.lb-btn, .lb-close, .lb-nav {
    display: grid; place-items: center;
    background: rgba(255, 255, 255, .12); color: #fff;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px; cursor: pointer;
    font: inherit; font-weight: 800;
    transition: background .16s ease, transform .16s ease;
}
.lb-btn { inline-size: 40px; block-size: 40px; font-size: 1.1rem; }
.lb-btn--wide { inline-size: auto; padding-inline: 14px; font-size: .82rem; }
.lb-btn:hover, .lb-close:hover, .lb-nav:hover { background: rgba(255, 255, 255, .24); }
.lb-btn:focus-visible, .lb-close:focus-visible, .lb-nav:focus-visible {
    outline: 3px solid var(--blue-400); outline-offset: 2px;
}
.lb-count {
    color: rgba(255, 255, 255, .75); font-size: .82rem; font-weight: 700;
    margin-inline-start: 8px; font-variant-numeric: tabular-nums;
    /* "1 / 2" is a fraction, not a sentence. In an RTL paragraph the bidi
       algorithm reorders it to "2 / 1", which says the reader is on the last
       image when they are on the first. The box stays where the inline
       margin puts it; only the digits inside are pinned. */
    direction: ltr;
}

.lb-close {
    position: absolute; inset-block-start: 16px; inset-inline-end: 16px;
    inline-size: 42px; block-size: 42px; z-index: 2;
}
.lb-close svg { inline-size: 19px; block-size: 19px; }

/* Previous and next are placed by ROLE, and the inline insets mirror in
   Arabic on their own — the script never needs to know the direction. The
   glyphs are flipped by the same rule for the same reason. */
.lb-nav {
    position: absolute; inset-block-start: 50%; translate: 0 -50%;
    inline-size: 46px; block-size: 46px; z-index: 2;
}
.lb-nav--prev { inset-inline-start: 10px; }
.lb-nav--next { inset-inline-end: 10px; }
.lb-nav svg { inline-size: 22px; block-size: 22px; }
[dir="rtl"] .lb-nav svg { transform: scaleX(-1); }

/* The page behind the dialog does not scroll while it is open. `position:
   fixed` rather than `overflow: hidden` because the latter loses the reader's
   place on iOS; the script stores and restores the offset. */
body.lb-open { position: fixed; inline-size: 100%; overflow: hidden; }

@media (max-width: 760px) {
    .lb-figure { padding: 52px 8px 76px; }
    .lb-nav { inline-size: 40px; block-size: 40px; }
    .lb-nav--prev { inset-inline-start: 4px; }
    .lb-nav--next { inset-inline-end: 4px; }
    .lb-caption { font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
    .lb { transition: none; }
    .lb-btn, .lb-close, .lb-nav, .guide-zoom-badge { transition: none; }
}

/* -----------------------------------------------------------------------------
   Collapsible sections, themed for this shell.

   `accordion.css` defaults to the public palette, which is what /guide uses — so
   these are here to be explicit rather than to change anything, and to be the
   one place to edit if the guide ever gets its own dark theme. The dashboard's
   equivalent block is not optional: that shell themes in `--dash-*`.
   -------------------------------------------------------------------------- */
.acc {
  --acc-ink:       var(--ink);
  --acc-ink-muted: var(--ink-muted);
  --acc-line:      var(--line);
  --acc-hover:     rgba(0, 0, 0, .03);
}