/* next-explain.css (2026-10-27): "Explain this page", drawn on the workspace's own tokens (next-v7.css): quiet, hairline, one accent.
   The button sits beside the page title; the panel docks at the right. Every class is prefixed xpl- (the older vx- prefix is taken:
   next-v85.css draws #view .vx-bar, .vx-row and others). Phone rules last, scoped to 699px. */

/* ---------- the button by the title ---------- */
.xpl-titled { display: flex; align-items: center; flex-wrap: wrap; column-gap: 12px; }
.xpl-btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 9px; border-radius: 999px; border: 1px solid var(--v6-line-2); background: transparent; color: var(--v6-ink-3); font: inherit; font-size: 13px; font-weight: 500; line-height: 1; cursor: pointer; white-space: nowrap; }
.xpl-btn svg { width: 15px; height: 15px; color: var(--v6-blue); }
.xpl-btn:hover, .xpl-btn[aria-expanded="true"] { background: var(--v6-fill); color: var(--v6-ink); }
/* an explanation not read yet on this page: a dot, not a panel over the page's own buttons */
.xpl-btn[data-new]::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--v6-blue); }

/* ---------- the panel ---------- */
.xpl-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 210; width: 384px; display: flex; flex-direction: column; background: var(--v6-surface, #fff); border-left: 1px solid var(--v6-line-2); }
.xpl-panel[hidden] { display: none; }
/* above the top bar and its inbox (the bell sits at z 200); below a dialog's scrim (z 60) while one is open */
#dialog[open] ~ .xpl-panel { z-index: 59; }
.xpl-ph { display: flex; align-items: center; gap: 6px; height: 56px; padding: 0 10px 0 24px; border-bottom: 1px solid var(--v6-line); flex: none; }
.xpl-sp { flex: 1 1 auto; }
.xpl-kick { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--v6-ink-3); }
.xpl-kick svg { width: 15px; height: 15px; color: var(--v6-blue); }
.xpl-pin { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; border: 0; border-radius: 8px; background: none; color: var(--v6-ink-4); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; }
.xpl-pin svg { width: 14px; height: 14px; }
.xpl-pin:hover { background: var(--v6-fill); color: var(--v6-ink); }
.xpl-pin[aria-pressed="true"] { color: var(--v6-blue); background: var(--v6-fill); }
.xpl-icon { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; color: var(--v6-ink-4); cursor: pointer; }
.xpl-icon svg { width: 16px; height: 16px; }
.xpl-icon:hover { background: var(--v6-fill); color: var(--v6-ink); }
.xpl-pb { flex: 1 1 auto; overflow-y: auto; padding: 22px 24px 28px; }
.xpl-pf { flex: none; padding: 14px 24px 18px; border-top: 1px solid var(--v6-line); }

/* ---------- what it says ---------- */
.xpl-pb h2 { margin: 0; font-size: 19px; line-height: 26px; font-weight: 600; letter-spacing: -.4px; color: var(--v6-ink); }
.xpl-sum { margin: 4px 0 0; font-size: 15px; line-height: 22px; color: var(--v6-ink-3); }
.xpl-upd { display: inline-block; margin: 10px 0 0; padding: 2px 8px; border-radius: 999px; background: var(--v6-fill); color: var(--v6-blue); font-size: 12px; font-weight: 500; }
.xpl-part { margin-top: 24px; }
.xpl-part h3 { margin: 0 0 8px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .02em; color: var(--v6-ink-4); }
.xpl-part p { margin: 0; font-size: 14px; line-height: 21px; color: var(--v6-ink-2); }
/* the first step: the one thing to do, set apart */
.xpl-start { margin-top: 20px; padding: 12px 14px; border-radius: 12px; background: var(--v6-fill); }
.xpl-start span { display: block; margin-bottom: 2px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--v6-blue); }
.xpl-start p { margin: 0; font-size: 14px; line-height: 21px; color: var(--v6-ink); font-weight: 500; }
/* each button: its name as the page shows it, then what it does */
.xpl-keys { margin: 0; display: grid; }
.xpl-keys > div { padding: 9px 0; border-top: 1px solid var(--v6-line); }
.xpl-keys > div:first-child { border-top: 0; padding-top: 0; }
.xpl-keys dt { display: inline-block; margin: 0 0 3px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--v6-line-2); font-size: 13px; line-height: 18px; font-weight: 500; color: var(--v6-ink); }
.xpl-keys dd { margin: 0; font-size: 14px; line-height: 21px; color: var(--v6-ink-2); }
/* pages that feed this one, and pages it hands to */
.xpl-flow { list-style: none; margin: 0; padding: 0; display: grid; }
.xpl-flow li { display: grid; gap: 2px; padding: 9px 0; border-top: 1px solid var(--v6-line); }
.xpl-flow li:first-child { border-top: 0; padding-top: 0; }
.xpl-flow a { display: inline-flex; align-items: center; gap: 5px; width: fit-content; color: var(--v6-link); font-size: 14px; line-height: 20px; font-weight: 600; text-decoration: none; }
.xpl-flow a svg { width: 13px; height: 13px; }
.xpl-flow a:hover { text-decoration: underline; }
.xpl-flow span { font-size: 14px; line-height: 21px; color: var(--v6-ink-2); }
.xpl-why p { color: var(--v6-ink-3); }
.xpl-cite { display: inline-flex; align-items: center; gap: 3px; color: var(--v6-link); font-weight: 500; text-decoration: none; white-space: nowrap; }
.xpl-cite svg { width: 12px; height: 12px; }
.xpl-cite:hover { text-decoration: underline; }
.xpl-vera { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 40px; border-radius: 10px; border: 1px solid var(--v6-line-2); background: var(--v6-surface, #fff); color: var(--v6-ink-2); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.xpl-vera svg { width: 16px; height: 16px; color: var(--v6-blue); }
.xpl-vera:hover { background: var(--v6-fill); color: var(--v6-ink); }
.xpl-btn:focus-visible, .xpl-icon:focus-visible, .xpl-pin:focus-visible, .xpl-vera:focus-visible, .xpl-flow a:focus-visible, .xpl-cite:focus-visible { outline: 2px solid var(--v6-blue); outline-offset: 2px; }

/* on a wide screen the page moves over and nothing is covered; below that the panel lies over the page's right edge, so no page is
   squeezed to a width its own layout was not drawn for */
@media (min-width: 1600px) {
  .shell { transition: padding-right .2s ease; }
  body.xpl-push .shell { padding-right: 384px; }
}
@media (min-width: 700px) and (max-width: 1599px) {
  .xpl-panel { box-shadow: -18px 0 44px -28px rgba(15, 17, 21, .35); }
}

/* ---------- phone ---------- */
@media (max-width: 699px) {
  .xpl-panel { top: auto; left: 0; width: auto; max-height: 85vh; border-left: 0; border-top: 1px solid var(--v6-line-2); border-radius: 16px 16px 0 0; box-shadow: 0 -20px 48px -24px rgba(15, 17, 21, .4); }
  .xpl-ph { padding-left: 20px; }
  .xpl-pb { padding: 18px 20px 22px; }
  .xpl-pf { padding: 12px 20px 16px; }
  .xpl-btn { width: 40px; height: 40px; padding: 0; justify-content: center; }
  .xpl-btn span { display: none; }
  .xpl-pin span { display: none; }
}