/**
 * Documentation layout, after the LWS redesign (redesign_api).
 *
 * Every colour and every type size is a token from tokens.css, so a theme or a type change is
 * never a hunt through this file. Component measurements are written as the mockups' own pixel
 * values — the 48px bar, the 54px method column, the 290px sidebar — because each is used once
 * and a token per measurement would name nothing. The layout-level ones (header rows, sidebar,
 * rail, reading column) are tokens.
 *
 * The mockups were drawn from an older build, so this file keeps what they did not show and
 * the site already had: the ⌘K search, the language menu, the code-sample picker, the code
 * rail's fold, dark mode, the feedback box, the try-it console. Where it departs from a mockup
 * it says so beside the rule, and why.
 *
 * Breakpoints: desktop; tablet (under 1100px: 240px sidebar, rail under the content); mobile
 * (under 761px: sidebar in a drawer). The rail sits beside the content from 1360px, where the
 * reading column still gets 550px or more.
 */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Anchor jumps land below the sticky bar rather than under it. */
  scroll-padding-top: calc(var(--header-height) + var(--space-3));
}

/* A column, so that on a short page the footer still reaches the bottom of the screen. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text-secondary);
  font-family: var(--font-sans);
  font-size: var(--text-14);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--color-link); text-decoration: none; }
a:hover { color: var(--color-link-hover); }

code, pre, kbd { font-family: var(--font-mono); }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }

[hidden] { display: none !important; }

.visually-hidden,
.snippets__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: var(--space-2);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  color: var(--color-text);
}
.skip-link:focus { left: var(--space-2); }

/* ---- shared controls ------------------------------------------------------------------ */

.icon { display: block; flex-shrink: 0; }

.icon-button {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  cursor: pointer;
}
.icon-button:hover { border-color: var(--color-border-strong); color: var(--color-text); }
.icon-button--small {
  width: 29px;
  height: 29px;
  border-color: var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}

/* A header control: the language menu, and — on the bar — the switcher and the search. */
.control {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  height: 32px;
  padding: 0 var(--space-2-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
}
.control:hover { border-color: var(--color-border-strong); }
.control .icon--chevron-down { color: var(--color-text-muted); }
.control__code { font-size: var(--text-12); font-weight: 600; letter-spacing: 0.02em; }
.control__label {
  max-width: 18rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-13);
  font-weight: 600;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 34px;
  padding: 0 var(--space-3-5);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-13);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.button:hover { border-color: var(--color-link); color: var(--color-text); }
.button--small { height: 28px; padding: 0 11px; font-size: var(--text-12-5); }
.button--large { height: 48px; padding: 0 26px; font-size: var(--text-15); }
/* The redesign's orange action. Deeper than the brand orange so its white label reads. */
.button--primary {
  border-color: transparent;
  background: var(--color-accent);
  color: #fff;
  box-shadow: var(--shadow-button);
}
.button--primary:hover { border-color: transparent; background: var(--color-accent-hover); color: #fff; }
.button--outline { border: 2px solid var(--color-text); background: var(--color-surface); color: var(--color-text); }
.button--outline:hover { border-color: var(--color-text); background: var(--color-text); color: var(--color-bg); }

/* ---- method and status pills ---------------------------------------------------------- */

.method,
.status,
.chip-method {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--radius-xs);
  color: #fff;
  font-family: var(--font-mono);
  font-weight: 700;
  line-height: 1;
}
.method { height: 19px; min-width: 54px; padding: 0 var(--space-1-5); font-size: var(--text-10); }
.method--get { background: var(--method-get); }
.method--post { background: var(--method-post); }
.method--put { background: var(--method-put); }
.method--patch { background: var(--method-patch); }
.method--delete { background: var(--method-delete); }

.status { height: 22px; min-width: 52px; padding: 0 var(--space-2); font-size: var(--text-12); }
.status--1xx { background: var(--status-3xx); }
.status--2xx { background: var(--status-2xx); }
.status--3xx { background: var(--status-3xx); }
.status--4xx { background: var(--status-4xx); }
.status--5xx { background: var(--status-5xx); }

/* ---- badges, chips, pills ------------------------------------------------------------- */

.badges { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; }
.badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--text-11-5);
  font-weight: 600;
}
/* One rule per kind, each reading its own triple from tokens.css. Adding a tenth kind is
   three custom properties and one line here. */
.badge--ro { background: var(--badge-ro-bg); color: var(--badge-ro-fg); border-color: var(--badge-ro-border); }
.badge--rw { background: var(--badge-rw-bg); color: var(--badge-rw-fg); border-color: var(--badge-rw-border); }
.badge--del { background: var(--badge-del-bg); color: var(--badge-del-fg); border-color: var(--badge-del-border); }
.badge--async { background: var(--badge-async-bg); color: var(--badge-async-fg); border-color: var(--badge-async-border); }
.badge--paid { background: var(--badge-paid-bg); color: var(--badge-paid-fg); border-color: var(--badge-paid-border); }
.badge--deferred { background: var(--badge-deferred-bg); color: var(--badge-deferred-fg); border-color: var(--badge-deferred-border); }
.badge--test { background: var(--badge-test-bg); color: var(--badge-test-fg); border-color: var(--badge-test-border); }
.badge--live { background: var(--badge-live-bg); color: var(--badge-live-fg); border-color: var(--badge-live-border); }
.badge--soon { background: var(--badge-soon-bg); color: var(--badge-soon-fg); border-color: var(--badge-soon-border); }
.badge--v2 { background: var(--badge-v2-bg); color: var(--badge-v2-fg); border-color: var(--badge-v2-border); }

/* "requis" / "facultatif", as the redesign's red pill. */
.req {
  flex-shrink: 0;
  padding: 1px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-required-bg);
  color: var(--color-required);
  font-family: var(--font-sans);
  font-size: var(--text-11);
  font-weight: 600;
  line-height: 1.5;
}
.req--optional { background: var(--color-bg-subtle); color: var(--color-text-muted); }

/* "OpenAPI 3.0 · v1.0": the redesign's orange chip. */
.spec-chip {
  padding: 3px var(--space-2-5);
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--text-11);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* "29 operations", "Test mode available". */
.pill {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-info-bg);
  color: var(--color-info-ink);
  font-size: var(--text-13);
  font-weight: 600;
}
.pill--ok { background: var(--color-ok-bg); color: var(--color-ok); }

.eyebrow {
  margin: 0;
  color: var(--color-accent-text);
  font-size: var(--text-12);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---- header: the white row ---------------------------------------------------------------
 * The redesign's top row: logo and badge, the LWS line, the LWS links, language, theme. It
 * scrolls away; the bar below stays.
 */

.site-top {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  height: var(--header-top-height);
  padding: 0 var(--space-6);
  border-bottom: 1px solid var(--color-top-border);
  background: var(--color-top-bg);
  font-size: var(--text-13);
}

.brand {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand__logo { display: block; width: auto; height: 30px; }
.brand__logo--dark { display: none; }
:root[data-theme="dark"] .brand__logo--light { display: none; }
:root[data-theme="dark"] .brand__logo--dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand__logo--light { display: none; }
  :root:not([data-theme="light"]) .brand__logo--dark { display: block; }
}
.brand__badge {
  padding: 2px var(--space-2);
  border-radius: var(--radius-xs);
  background: var(--color-bar);
  color: #fff;
  font-size: var(--text-14);
  font-weight: 600;
  white-space: nowrap;
}

.site-top__tagline {
  flex-grow: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--color-text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.site-top__links { flex-shrink: 0; display: flex; align-items: center; gap: var(--space-5); font-weight: 500; }
.site-top__visit { flex-shrink: 0; font-weight: 500; }

.theme-toggle .icon--sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon--moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon--sun { display: block; color: var(--lws-orange); }

/* ---- header: the blue bar -----------------------------------------------------------------
 * Sticky, and measured by app.js to pin the side columns under it. Its controls are white on
 * the bar in the light theme and translucent in the dark one (tokens.css).
 */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: var(--header-height);
  padding: 0 var(--space-6);
  background: var(--color-bar);
  color: var(--color-bar-ink);
}
.site-header__spacer { flex-grow: 1; }

.site-header .control {
  border-color: transparent;
  background: var(--color-bar-control-bg);
  color: var(--color-bar-control-ink);
}
.site-header .control .icon--chevron-down { color: var(--color-bar-control-muted); }
.control--docs { gap: var(--space-2); padding: 0 var(--space-3); }
.control--docs .icon--layers { color: var(--lws-orange); }
.site-header .control:hover { background: var(--color-bar-control-bg); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35); }

/* The two tabs on a documentation, the section links on the hub: uppercase, white, the current
   one on the darker blue with the orange line under it. */
.top-tabs { display: flex; align-items: stretch; align-self: stretch; min-width: 0; }
.top-tabs__tab {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: 0 18px;
  color: var(--color-bar-ink);
  font-size: var(--text-13);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.top-tabs__tab:hover { background: var(--color-bar-active); color: var(--color-bar-ink); }
.top-tabs__tab[aria-current] { background: var(--color-bar-active); box-shadow: inset 0 -3px 0 var(--color-mark); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lws-status-dot); }

.bar-button {
  flex-shrink: 0;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: #fff;
  font-size: var(--text-13);
  font-weight: 600;
  white-space: nowrap;
}
.bar-button:hover { background: var(--color-accent-hover); color: #fff; }

/* ---- menus ------------------------------------------------------------------------------
 * Native <details>. While one is open its summary grows a full-screen scrim, so a click
 * anywhere outside the panel closes it — with or without JavaScript. Panels are anchored under
 * their control: the switcher's to its left edge, the language menu's to its right.
 */

.menu { position: relative; flex-shrink: 0; }
.menu[open] > summary::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--color-scrim-light);
  cursor: default;
}
.menu__panel {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 230px;
  padding: var(--space-1-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-menu);
}
.menu--docs .menu__panel { right: auto; left: 0; width: 320px; }
.menu__title {
  margin: 0;
  padding: 7px var(--space-2-5) var(--space-1) var(--space-2-5);
  color: var(--color-text-muted);
  font-size: var(--text-11);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  padding: var(--space-2-5) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-text);
}
.menu__item:hover { background: var(--color-bg-inset); color: var(--color-text); }
.menu__item[aria-current] { background: var(--color-bg-inset); }
.menu__item[aria-current] .menu__label { font-weight: 600; }
.menu__item .icon--check { color: var(--lws-orange); }
.menu__label { flex-grow: 1; font-size: var(--text-13-5); }
.menu__rule { width: 100%; height: 1px; margin: var(--space-1) 0; border: 0; background: var(--color-border-soft); }
.menu__item--back { gap: 9px; }
.menu__item--back .icon { color: var(--color-text-muted); }
.menu__item--back .menu__label { color: var(--color-text-secondary); font-size: var(--text-13); }

/* ---- search ------------------------------------------------------------------------------
 * The bar's button and the ⌘K modal — the site's own, kept over the mockups' search field.
 * The button's label and shortcut hint show on desktop only; tablet and mobile get the icon.
 */

.control--search {
  gap: var(--space-2);
  width: 250px;
  height: 34px;
  padding: 0 var(--space-1-5) 0 var(--space-3-5);
  border-radius: 18px;
  color: var(--color-bar-control-muted);
  font-family: inherit;
  cursor: pointer;
}
.site-header .control--search { color: var(--color-bar-control-muted); }
.control__search-label { flex-grow: 1; font-size: var(--text-13); text-align: left; }
.control__kbd {
  padding: 1px 5px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--color-bar-control-muted);
  font-family: var(--font-mono);
  font-size: var(--text-10);
}

.has-modal body { overflow: hidden; }

.search {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 60px var(--space-4) var(--space-4);
  background: var(--color-scrim);
}
.search__panel {
  display: flex;
  flex-direction: column;
  width: 690px;
  max-width: 100%;
  max-height: 80vh;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-modal);
}
.search__bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 11px;
  height: 56px;
  padding: 0 var(--space-4);
  border-bottom: 1px solid var(--color-border-soft);
  color: var(--color-text-muted);
}
.search__input {
  flex-grow: 1;
  min-width: 0;
  height: 32px;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-16);
}
.search__input::-webkit-search-cancel-button { display: none; }
.search__esc {
  flex-shrink: 0;
  padding: 3px var(--space-1-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-10-5);
  cursor: pointer;
}
.search__results { flex-grow: 1; min-height: 0; overflow-y: auto; padding: var(--space-2) 0; }
.search__group-title {
  padding: var(--space-1-5) var(--space-4) var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--text-11);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.search__hit {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  color: inherit;
  line-height: 1.3;
}
.search__hit:hover { color: inherit; }
/* The muted grey falls under 4.5:1 on the tint, so the selected hit's quiet text takes the
   secondary ink. */
.search__hit[aria-selected="true"] { background: var(--color-current-bg); }
.search__hit[aria-selected="true"] .search__path,
.search__hit[aria-selected="true"] .search__group { color: var(--color-text-secondary); }
.search__method { width: 54px; height: 20px; font-size: var(--text-10); }
.search__method--guide {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--radius-xs);
  background: var(--color-bg-inset);
  color: var(--color-text-muted);
}
.search__text { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; min-width: 0; }
.search__title { color: var(--color-text); font-size: var(--text-13-5); font-weight: 500; }
.search__path { color: var(--color-text-muted); font-family: var(--font-mono); font-size: var(--text-11-5); word-break: break-all; }
.search__group { flex-shrink: 0; color: var(--color-text-muted); font-size: var(--text-11-5); }
.search__empty { margin: 0; padding: 18px var(--space-4); color: var(--color-text-secondary); font-size: var(--text-14); line-height: 1.55; }
.search__foot { flex-shrink: 0; padding: var(--space-2) var(--space-4); border-top: 1px solid var(--color-border-soft); }
.search__scope {
  padding: var(--space-1) 0;
  border: 0;
  background: transparent;
  color: var(--color-link);
  font-family: inherit;
  font-size: var(--text-13);
  font-weight: 600;
  cursor: pointer;
}
.search__scope:hover { color: var(--color-link-hover); }

@media (max-width: 1359px) {
  .control__search-label,
  .control__kbd { display: none; }
  .control--search { width: 34px; padding: 0; justify-content: center; }
}

/* ---- mobile drawer ---------------------------------------------------------------------
 * The same trick as the menus: open, the burger summary becomes the scrim behind the panel,
 * so tapping outside closes it. The close button is app.js's; without it the scrim still
 * closes the drawer. The <details> keeps its 36px box so the bar does not shift.
 */

.drawer { display: none; flex-shrink: 0; width: 36px; height: 36px; }
.drawer__toggle {
  width: 36px;
  height: 36px;
  border-color: rgba(255, 255, 255, 0.35);
  background: transparent;
  color: var(--color-bar-ink);
}
.drawer__toggle:hover { border-color: #fff; color: var(--color-bar-ink); }
.drawer[open] > .drawer__toggle {
  position: fixed;
  inset: 0;
  z-index: 60;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: var(--color-scrim);
}
.drawer[open] > .drawer__toggle .icon { display: none; }
.drawer__panel {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 61;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: 300px;
  max-width: 86%;
  padding: var(--space-3-5) var(--space-3);
  overflow-y: auto;
  border-right: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
}
.drawer__head { display: flex; align-items: center; gap: var(--space-2-5); padding: 0 var(--space-1-5) var(--space-2); }
.drawer__title { flex-grow: 1; color: var(--color-text); font-size: var(--text-15); font-weight: 700; }
.drawer__close { width: 30px; height: 30px; border-color: var(--color-border); background: var(--color-surface); }
/* Touch targets: taller rows than on desktop. */
.drawer__panel .sidebar__back,
.drawer__panel .sidebar__intro,
.drawer__panel .nav-group__head,
.drawer__panel .nav-row { padding-top: 10px; padding-bottom: 10px; }

/* ---- shell ------------------------------------------------------------------------------ */

.shell { display: flex; flex-grow: 1; align-items: flex-start; }

.shell__content {
  flex-grow: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "main" "aside" "pager";
  align-items: start;
}
.main { grid-area: main; min-width: 0; padding: 28px 40px 40px; }
.rail, .toc { grid-area: aside; }
.pager { grid-area: pager; }

/* Pages outside a documentation — the 404, the report form — get a centred reading column;
   the hub draws its own full-width bands. */
.shell--wide .main { width: 100%; max-width: calc(var(--main-max) + 80px); margin: 0 auto; }
.shell--wide .main--hub { max-width: none; padding: 0; }

@media (min-width: 1360px) {
  .shell__content--rail {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "main aside" "pager aside";
    grid-template-rows: auto 1fr;
  }

  /* With the rail collapsed, the reading column takes the width the rail gave up. */
  .shell__content--rail:has(> .rail:not([open])) .main > article,
  .shell__content--rail:has(> .rail:not([open])) .main > .notice,
  .shell__content--rail:has(> .rail:not([open])) .main > .feedback { max-width: calc(var(--main-max) + var(--rail-width)); }
  .shell__content--rail:has(> .rail:not([open])) .pager { max-width: calc(var(--main-max) + var(--rail-width) + 80px); }
}
@media (min-width: 1100px) {
  .shell__content--toc {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "main aside" "pager aside";
    grid-template-rows: auto 1fr;
  }
}

/* The reading column. */
.main > article,
.main > .notice,
.main > .feedback { max-width: var(--main-max); }
.main > .notice { margin: 0 0 var(--space-5); }

/* ---- sidebar ---------------------------------------------------------------------------- */

/* The column runs the full height of the page, so its tint reaches the footer; the inner block
   is what stays in view. No scrollbar of its own: app.js lets a navigation taller than the
   screen travel with the page until an edge reaches the screen's, as the rail does. */
.sidebar {
  align-self: stretch;
  flex-shrink: 0;
  width: var(--nav-width);
  border-right: 1px solid var(--color-border-soft);
  background: var(--color-bg-subtle);
}
.sidebar__inner {
  position: sticky;
  top: var(--header-height);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-5) 14px;
}

.sidebar__back,
.sidebar__intro {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border-radius: var(--radius-md);
}
.sidebar__back { padding: var(--space-1) var(--space-3) var(--space-2-5); color: var(--color-text-muted); font-size: var(--text-13); }
.sidebar__back:hover { color: var(--color-link); }
.sidebar__intro { padding: 9px var(--space-3); color: var(--color-text); font-size: var(--text-14); font-weight: 600; }
.sidebar__intro:hover { background: var(--color-row-hover); color: var(--color-text); }
.sidebar__intro[aria-current] { background: var(--color-current-bg); color: var(--color-current-ink); }

.nav-group { display: flex; flex-direction: column; }
.nav-group__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text);
}
.nav-group__head:hover { background: var(--color-row-hover); }
.nav-group__chevron { display: inline-flex; color: var(--color-text-muted); transition: transform 0.12s ease; }
.nav-group[open] .nav-group__chevron { transform: rotate(90deg); }
.nav-group__name {
  flex-grow: 1;
  font-size: var(--text-12);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.nav-group__count {
  padding: 0 var(--space-2);
  border-radius: 10px;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--text-11-5);
  font-weight: 500;
}
.nav-group__items { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0 0 var(--space-1-5); list-style: none; }

/* The redesign's row: a 54px method column, the title beside it. The current page is tinted
   blue, so it stands apart from the hover's neutral shade. */
.nav-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: var(--space-2) var(--space-2-5);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
}
.nav-row:hover { background: var(--color-row-hover); color: var(--color-text); }
.nav-row[aria-current],
.nav-row[aria-current]:hover { background: var(--color-current-bg); color: var(--color-current-ink); font-weight: 600; }
.nav-row__pill { margin-top: 1px; }
.nav-row__label { min-width: 0; font-size: var(--text-13); line-height: 1.4; }
/* A guide has no method, so its pill slot holds a page glyph and titles stay aligned. */
.nav-row__pill--guide {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 54px;
  height: 19px;
  border-radius: var(--radius-xs);
  background: var(--color-bg-inset);
  color: var(--color-text-muted);
}

/* ---- content typography ------------------------------------------------------------------ */

h1 {
  margin: 0;
  color: var(--color-text);
  font-size: var(--text-h1-page);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.intro h1 { font-size: var(--text-h1); line-height: 1.15; }
h1 code { font-size: 0.85em; font-weight: 600; }

.lead { margin: 0; color: var(--color-text-secondary); font-size: var(--text-17-5); line-height: 1.6; }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-13);
}
.breadcrumb a { color: inherit; }
.breadcrumb a:hover { color: var(--color-link); }
.breadcrumb__current { color: var(--color-text); }

/* Operations, guides, tags and schemas stack their blocks 20px apart, as the redesign's
   operation column does; the introduction breathes a little more. */
.operation,
.guide,
.tag,
.schema,
.not-found { display: flex; flex-direction: column; gap: var(--space-5); }
.intro { display: flex; flex-direction: column; gap: var(--space-6); }

.section { display: flex; flex-direction: column; gap: var(--space-3); }
.section h2 {
  margin: var(--space-2) 0 0;
  color: var(--color-text);
  font-size: var(--text-20);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.intro .section h2 { font-size: var(--text-h2); }
.section__head { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; }
.section__head > h2 { flex-grow: 1; margin-top: 0; }
.section__meta { color: var(--color-text-muted); font-size: var(--text-12); }

/* ---- prose ------------------------------------------------------------------------------- */

.prose { color: var(--color-text-secondary); font-size: var(--text-15); line-height: 1.7; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose p { margin: 0 0 var(--space-3); }
.prose h2 {
  margin: var(--space-8) 0 var(--space-2-5);
  color: var(--color-text);
  font-size: var(--text-h2);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.prose h3,
.prose h4 {
  margin: var(--space-6) 0 var(--space-2);
  color: var(--color-text);
  font-size: var(--text-17-5);
  font-weight: 600;
}
.prose h4 { font-size: var(--text-15); }
.prose strong { color: var(--color-text); font-weight: 600; }
.prose ul,
.prose ol { margin: 0 0 var(--space-3); padding-left: var(--space-5); }
.prose li { margin: var(--space-1) 0; }
.prose a { text-decoration: underline; text-decoration-color: var(--color-border-strong); text-underline-offset: 2px; }
.prose a:hover { text-decoration-color: currentColor; }
.prose code {
  padding: 1px var(--space-1-5);
  border-radius: var(--radius-xs);
  background: var(--color-bg-inset);
  color: var(--color-text);
  font-size: 0.86em;
}
.prose pre {
  margin: 0 0 var(--space-3);
  padding: 14px 18px;
  overflow-x: auto;
  border-radius: var(--radius-lg);
  background: var(--color-code-bg);
  color: var(--color-code-ink);
  font-size: var(--text-12);
  line-height: 1.7;
}
.prose pre code { padding: 0; background: none; color: inherit; font-size: inherit; }
.prose blockquote {
  margin: 0 0 var(--space-3);
  padding: var(--space-1) 0 var(--space-1) var(--space-3-5);
  border-left: 2px solid var(--color-border-strong);
}
/* Tables get the redesign's card: one rounded border, rows ruled inside it. */
.prose table {
  width: 100%;
  margin: 0 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--color-surface);
  font-size: var(--text-13-5);
  line-height: 1.5;
}
.prose th,
.prose td { padding: var(--space-2-5) var(--space-3-5); border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; overflow-wrap: break-word; }
.prose th { background: var(--color-surface-raised); color: var(--color-text); font-size: var(--text-12-5); font-weight: 600; }
.prose tr:last-child td { border-bottom: 0; }

/* In a narrow column a table becomes a list of rows: the first cells on a title line, the last
   one, the explanation, under it at full width. The header row stays for screen readers. The
   column is the article's width, so the sidebar and the code rail count, not only the screen. */
.operation,
.guide,
.tag,
.schema,
.intro { container-type: inline-size; }
@container (max-width: 520px) {
  .prose table,
  .prose tbody,
  .prose tr { display: block; }
  .prose thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .prose tr { padding: var(--space-3) var(--space-3-5); border-bottom: 1px solid var(--color-border); }
  .prose tr:last-child { border-bottom: 0; }
  .prose td { display: inline; padding: 0; border: 0; color: var(--color-text); font-weight: 600; }
  .prose td + td::before { content: " · "; color: var(--color-text-muted); font-weight: 400; }
  .prose td:last-child { display: block; margin-top: var(--space-1-5); color: inherit; font-weight: 400; }
  .prose td:last-child::before { content: none; }
  .prose td:only-child { margin-top: 0; }
}

/* ---- operation ---------------------------------------------------------------------------- */

/* The bar and the operationId under it. */
.endpoint-block { display: flex; flex-direction: column; gap: var(--space-1-5); }
/* Method, URL and copy button on one row. A URL too long for it wraps after a slash, under
   itself, while the method and the button stay on its first line. */
.endpoint {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-2-5) var(--space-3-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
}
.endpoint__method { height: 23px; min-width: 0; padding: 0 var(--space-2-5); border-radius: var(--radius-sm); font-size: var(--text-12); }
/* Server and path read as one URL, the server muted and the path in bold, as in the redesign.
   Its line height is the pill's, so a single line sits level with it. */
.endpoint__url { min-width: 0; font-family: var(--font-mono); font-size: var(--text-14); line-height: 23px; overflow-wrap: anywhere; }
.endpoint__server { color: var(--color-text-muted); }
.endpoint__path { color: var(--color-text); font-weight: 700; }
.endpoint__id {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0;
  padding: 0 var(--space-3-5);
  color: var(--color-text-muted);
  font-size: var(--text-12);
}
.endpoint__id code { color: var(--color-text-secondary); overflow-wrap: anywhere; }
/* The facts a description opens with — the level it needs, its quota: apart from the prose, each
   value under its label, on a band of their own. */
.facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-8);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.facts__item { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.facts__label { color: var(--color-text-muted); font-size: var(--text-11); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.facts__value { margin: 0; color: var(--color-text); font-size: var(--text-14); font-weight: 600; }
.facts__value code { padding: 1px var(--space-1-5); border-radius: var(--radius-xs); background: var(--color-bg-inset); font-size: 0.86em; font-weight: 400; }

/* Borderless and slightly inset, so the bar keeps its height. */
.endpoint__copy {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: -2px 0 -2px -4px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}
.endpoint__copy:hover { background: var(--color-bg-inset); color: var(--color-text); }

/* A card of rows: parameters, body fields, response fields, credentials. */
.fields,
.credentials,
.op-list {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

/* A field row: name, type, description, required. The name and type columns are minimums, so
   a long name widens its own row only. */
.field {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px 13px;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.field:last-child { border-bottom: 0; }
.field__name {
  flex-shrink: 0;
  min-width: 92px;
  color: var(--color-text);
  font-size: var(--text-13);
  font-weight: 700;
  word-break: break-word;
}
.field__type { flex-shrink: 0; min-width: 58px; color: var(--color-text-muted); font-family: var(--font-mono); font-size: var(--text-12); }
.field__main { flex: 1 1 180px; min-width: 0; }
.field__schema { font-family: var(--font-mono); font-size: var(--text-12); }
.field__description { font-size: var(--text-14); line-height: 1.55; }
.field__description p { margin: 0 0 var(--space-1); }
.field__description p:last-child { margin-bottom: 0; }

/* Parameters: name, type and chip on one line, then the description under it. */
.fields--stacked .field { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: var(--space-1-5); padding: var(--space-4) 18px; }
.fields--stacked .field__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.fields--stacked .field__body { margin: 0; }
.fields--stacked .field__name { min-width: 0; font-size: var(--text-14); }
.fields--stacked .field__type { min-width: 0; }
.field__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-12);
}
.field__meta code { color: var(--color-text); }

/* Nested fields are indented rather than nested in the markup, so a screen reader
   traverses one flat list. */
.field--depth-1 { padding-left: calc(var(--space-4) + var(--space-4)); }
.field--depth-2 { padding-left: calc(var(--space-4) + var(--space-8)); }
.field--depth-3 { padding-left: calc(var(--space-4) + var(--space-12)); }
.field--depth-4 { padding-left: calc(var(--space-4) + var(--space-12) + var(--space-4)); }
.field--depth-5 { padding-left: calc(var(--space-4) + var(--space-12) + var(--space-8)); }

/* Responses: one card per status, spaced apart so each reads on its own. */
.responses { display: flex; flex-direction: column; gap: var(--space-5); }
.response {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.response__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
}
.response__head:hover { background: var(--color-surface-raised); }
.response__description { flex-grow: 1; min-width: 0; color: var(--color-text); font-size: var(--text-14); line-height: 1.4; }
.response__description p { margin: 0; }
.response__chevron { display: inline-flex; color: var(--color-text-muted); transition: transform 0.12s ease; }
.response[open] .response__chevron { transform: rotate(180deg); }
/* Inside, the examples and the field list sit as blocks of their own, apart from the card's edge. */
.response__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.response__body > .notice { margin: 0; }
.response__sample { display: flex; flex-direction: column; gap: var(--space-1-5); }
.response--empty .response__head { cursor: default; }
.response--empty .response__head:hover { background: var(--color-surface); }

/* A folded extra under a section, such as the request example. */
.disclosure__head {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: var(--space-1) 0;
  color: var(--color-text-muted);
}
.disclosure__head:hover { color: var(--color-text); }
.disclosure__chevron { display: inline-flex; transition: transform 0.12s ease; }
.disclosure[open] .disclosure__chevron { transform: rotate(90deg); }
.disclosure__label { font-size: var(--text-11); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.disclosure > .code__body,
.disclosure > .code-block { margin-top: var(--space-2); }

/* The folded field list under an example: a quiet block inside the card, opened on demand. */
.response__fields { overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.response__fields-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  padding: var(--space-2) var(--space-3-5);
  color: var(--color-text-muted);
}
.response__fields-head:hover { color: var(--color-text); }
.response__fields-chevron { display: inline-flex; transition: transform 0.12s ease; }
.response__fields[open] .response__fields-chevron { transform: rotate(90deg); }
.response__fields-label { font-size: var(--text-11); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.response__fields-count { font-size: var(--text-11); }
.response__composed { margin-left: auto; font-size: var(--text-12); }
/* Inside that block the field list is its body, not a third card. */
.response__fields > .fields { border: 0; border-top: 1px solid var(--color-border); border-radius: 0; }
/* The edge shows in dark mode, where the panel is near the card's own shade. */
.response__example {
  margin: 0;
  padding: 14px 18px;
  border: 1px solid var(--color-code-border);
  border-radius: var(--radius-md);
  background: var(--color-code-bg);
  color: var(--color-code-ink);
  font-size: var(--text-12-5);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

/* One case of a status with several: what it is, above its example. */
.response__case {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-13);
  font-weight: 600;
}
.response__case code { padding: 1px var(--space-1-5); border-radius: var(--radius-xs); background: var(--color-bg-inset); color: var(--color-text); font-size: 0.9em; font-weight: 400; }

.code { margin: 0; }
.code__caption {
  margin: 0 0 var(--space-1-5);
  color: var(--color-text-muted);
  font-size: var(--text-11);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.code__body {
  margin: 0;
  padding: 14px 18px;
  overflow-x: auto;
  border-radius: var(--radius-lg);
  background: var(--color-code-bg);
  color: var(--color-code-ink);
  font-size: var(--text-12);
  line-height: 1.7;
}

/* ---- code rail ---------------------------------------------------------------------------
 * A <details>, open. From 1360px it stands beside the article; a tab on its left edge folds
 * it, and its summary — hidden while open — is then the tab on the screen's edge that brings
 * it back. Below, it sits under the article and stays open; a tab of the same look floats it
 * over the page from the right edge, and the left-edge tab closes it again (app.js).
 */

.rail { position: relative; min-width: 0; padding: 0 40px 36px; }
.rail[open] > .rail__toggle { display: none; }

/* The edge tabs, one look: the folded rail's summary and the tab that floats the rail in, both
   on the screen's edge, pointing in; and the open rail's tab on its left edge, pointing out.
   Slim, since they sit over the page. */
.rail__toggle,
.rail-tab,
.rail__fold {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 72px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-right: 0;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  background: var(--color-surface);
  color: var(--lws-orange);
  box-shadow: var(--shadow-tab);
  cursor: pointer;
}
.rail-tab { position: fixed; top: 45vh; right: 0; z-index: 25; }
/* The open rail's tab, against its left edge and halfway down it, in the gutter beside the
   article: it travels with the rail rather than with the screen. */
.rail__fold { position: absolute; top: 50%; right: 100%; z-index: 2; transform: translateY(-50%); }

/* Floated over the page, from the right edge, above a scrim. Positioned without a transform,
   so the console's full-screen response viewer still covers the screen. */
.rail.is-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 62;
  /* A strip of the page stays uncovered on a phone, for the tab that closes it. */
  width: min(var(--rail-width), calc(100% - 40px));
  padding: var(--space-4);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-left: 1px solid var(--color-border);
  background: var(--color-bg);
  box-shadow: var(--shadow-modal);
}
.rail-scrim { position: fixed; inset: 0; z-index: 61; background: var(--color-scrim); }
.rail.is-overlay .rail__fold { position: fixed; top: 45vh; right: min(var(--rail-width), calc(100% - 40px)); transform: none; }

/* The code panel: navy in both themes, as the redesign draws it, with its header one step
   deeper. */
.snippets {
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--color-code-bg);
  color: var(--color-code-ink);
}
.snippets__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-height: 46px;
  padding: var(--space-2) var(--space-2-5) var(--space-2) var(--space-3-5);
  background: var(--color-code-head);
}
.snippets__method { font-family: var(--font-mono); font-size: var(--text-12); font-weight: 700; }
.snippets__method--get { color: var(--method-get-ink); }
.snippets__method--post { color: var(--method-post-ink); }
.snippets__method--put { color: var(--method-put-ink); }
.snippets__method--patch { color: var(--method-patch-ink); }
.snippets__method--delete { color: var(--method-delete-ink); }
.snippets__path {
  flex-grow: 1;
  min-width: 80px;
  color: #fff;
  font-family: var(--font-mono);
  font-size: var(--text-12);
  word-break: break-all;
}
/* Every copy button swaps its icon for a check for a moment once the clipboard has it. */
.copy-button .icon--check { display: none; }
.copy-button.is-done .icon--copy { display: none; }
.copy-button.is-done .icon--check { display: block; color: var(--color-ok); }
/* On the panel, the redesign's white copy button. */
.snippets__copy { border-color: transparent; background: #fff; color: var(--lws-navy); }
.snippets__copy:hover { border-color: transparent; background: var(--color-code-control-hover); color: var(--lws-navy); }
.snippets__copy.is-done .icon--check { color: var(--method-get); }

/* A code block's own copy button, which app.js adds: in its top right corner, in the panel's
   colours, so it reads on the navy in both themes. The block keeps the code's margin. */
.code-block { position: relative; }
.code-block > pre { padding-right: 48px; }
.prose .code-block { margin: 0 0 var(--space-3); }
.prose .code-block:last-child { margin-bottom: 0; }
.prose .code-block > pre { margin: 0; }
.code-copy {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 28px;
  height: 28px;
  border-color: var(--color-code-border);
  background: var(--color-code-head);
  color: var(--color-code-muted);
}
.code-copy:hover { border-color: var(--color-code-gutter); color: var(--color-code-ink); }
.code-copy.is-done .icon--check { color: var(--method-get-ink); }

/* The language <select>, which app.js reveals in place of the tab row below. Kept over the
   redesign's row of tab buttons: five languages fit it at any width. */
/* Pushed right, so the controls stay at the right edge when a long path takes the first line. */
.snippets__picker { flex-shrink: 0; display: inline-flex; margin-left: auto; }
.snippets__select {
  height: 29px;
  padding: 0 var(--space-2);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-family: inherit;
  font-size: var(--text-12-5);
  font-weight: 600;
  cursor: pointer;
}
.snippets__select option { background: #fff; color: var(--lws-navy); }
.snippets.has-picker .snippets__langs { display: none; }

/* Without JavaScript: a row of labels for the hidden radios, which switch the panes by CSS
   alone. See partials/snippets.php. */
.snippets__langs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-code-border);
}
.snippets__lang {
  display: inline-flex;
  align-items: center;
  height: 27px;
  padding: 0 var(--space-2-5);
  border-radius: var(--radius-sm);
  color: var(--color-code-muted);
  font-size: var(--text-12);
  font-weight: 600;
  cursor: pointer;
}
.snippets__lang:hover { color: #fff; }

.snippets__pane { display: none; padding: 14px 0; background: var(--color-code-bg); }

#snippet-curl:checked ~ .snippets__pane--curl,
#snippet-php:checked ~ .snippets__pane--php,
#snippet-python:checked ~ .snippets__pane--python,
#snippet-node:checked ~ .snippets__pane--node,
#snippet-go:checked ~ .snippets__pane--go { display: block; }

#snippet-curl:checked ~ .snippets__langs [for="snippet-curl"],
#snippet-php:checked ~ .snippets__langs [for="snippet-php"],
#snippet-python:checked ~ .snippets__langs [for="snippet-python"],
#snippet-node:checked ~ .snippets__langs [for="snippet-node"],
#snippet-go:checked ~ .snippets__langs [for="snippet-go"] {
  background: var(--lws-orange-deep);
  color: #fff;
}

#snippet-curl:focus-visible ~ .snippets__langs [for="snippet-curl"],
#snippet-php:focus-visible ~ .snippets__langs [for="snippet-php"],
#snippet-python:focus-visible ~ .snippets__langs [for="snippet-python"],
#snippet-node:focus-visible ~ .snippets__langs [for="snippet-node"],
#snippet-go:focus-visible ~ .snippets__langs [for="snippet-go"] {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

/* The hub's first call ends on its answer, as the redesign's hero card does. */
.snippets__response {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  margin: 0;
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-code-border);
}
.snippets__excerpt { min-width: 0; overflow: hidden; color: var(--color-code-ink); font-size: var(--text-12); text-overflow: ellipsis; white-space: nowrap; }

/* The try-it console's frame, sized by the height its document reports. Once it runs, it
   carries the live samples and the static panel above it is hidden. */
.console-frame {
  display: block;
  width: 100%;
  height: 720px;
  margin-top: var(--space-4);
  border: 0;
  background: transparent;
}
.snippets[hidden] + .console-frame { margin-top: 0; }

/* While the console's response viewer is open, its frame covers the screen, header included:
   the rail — sticky on wide screens, so a stacking context of its own — rises with it. The
   frame's document is transparent but for the dialog and its backdrop. */
.console-frame.is-viewing {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100% !important; /* over the height the frame last reported */
  margin: 0;
}
.rail.has-viewer { z-index: 90; }

.code-lines { margin: 0; font-size: var(--text-12); line-height: 1.75; }
.line { display: flex; align-items: flex-start; padding: 0 var(--space-3); }
.line__n {
  flex-shrink: 0;
  width: 34px;
  padding-right: var(--space-3);
  color: var(--color-code-gutter);
  font-size: var(--text-11);
  text-align: right;
  -webkit-user-select: none;
  user-select: none;
}
.line__t {
  flex-grow: 1;
  min-width: 0;
  color: var(--color-code-ink);
  white-space: pre-wrap;
  word-break: break-word;
}
.tok--kw { color: var(--code-keyword); }
.tok--str { color: var(--code-string); }
.tok--var { color: var(--code-variable); }
.tok--num { color: var(--code-number); }
.tok--com { color: var(--code-comment); }

@media (min-width: 1360px) {
  /* Pinned below the bar, with no scrollbar of its own: when the console makes it taller than
     the screen, app.js lets it travel with the page until its bottom — the send button and the
     response — or its top is in view, then holds it there. */
  .rail {
    position: sticky;
    top: var(--header-height);
    align-self: start;
    width: var(--rail-width);
    padding: 28px 32px 24px 0;
  }

  /* Folded: a column as wide as the edge tab, pinned partway down the screen. */
  .rail:not([open]) {
    top: 45vh;
    width: 32px;
    padding: 0;
    overflow: visible;
  }
}

/* ---- table of contents ---------------------------------------------------------------------
 * The redesign's "on this page" column, beside guides, the introduction and schema pages.
 */

.toc {
  position: sticky;
  top: var(--header-height);
  align-self: start;
  width: var(--toc-width);
  padding: 36px 32px 24px 0;
}
.toc__title {
  margin: 0 0 var(--space-2);
  color: var(--color-text);
  font-size: var(--text-11);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.toc__list { margin: 0; padding: 0 0 0 var(--space-4); list-style: none; border-left: 2px solid var(--color-border-soft); }
.toc__list li { margin: 0 0 var(--space-1-5); }
.toc__list a { color: var(--color-text-muted); font-size: var(--text-13); line-height: 1.4; }
.toc__list a:hover { color: var(--color-link); }

/* ---- hub ------------------------------------------------------------------------------------
 * The redesign's home, band by band: the hero on its blue wash, the API cards, the guides, the
 * three steps, the help banner.
 */

.hub { display: flex; flex-direction: column; }

.hub-hero {
  padding: 56px var(--space-8) 64px;
  background: linear-gradient(180deg, var(--hero-from) 0%, var(--hero-to) 100%);
}
.hub-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 48px;
  max-width: var(--hub-max);
  margin: 0 auto;
}
.hub-hero__text { display: flex; flex-direction: column; gap: 22px; }
.hub-hero__chip {
  align-self: flex-start;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: #fff;
  font-size: var(--text-13);
  font-weight: 600;
}
.hub-hero h1 { font-size: var(--text-hero); line-height: 1.15; text-wrap: balance; }
.hub-hero__points {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-text-secondary);
  font-size: var(--text-15);
}
.hub-hero__points li { display: flex; align-items: center; gap: 10px; }
.hub-hero__points .icon { color: var(--color-ok); }
.hub-hero__points strong { color: var(--color-accent-text); font-weight: 600; }
.hub-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 6px 0 0; }
.hub-hero__code .snippets { border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.hub-hero__code .snippets__head { padding-right: var(--space-2-5); }
.hub-hero__code .snippets__pane { min-height: 230px; padding: 18px 0; }

.hub-section { padding: 64px var(--space-8); }
.hub-section + .hub-section { padding-top: var(--space-4); }
.hub-section__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: var(--hub-max);
  margin: 0 auto 36px;
  text-align: center;
}
.hub-section__head h2 { margin: 0; color: var(--color-text); font-size: var(--text-28); font-weight: 600; }
.hub-section__lead { margin: 0; font-size: var(--text-14); }

.api-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: var(--space-6);
  max-width: var(--hub-max);
  margin: 0 auto;
}
.api-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-8);
  border-radius: var(--radius-card);
}
.api-card--sand { background: var(--tint-sand); }
.api-card--blue { background: var(--tint-blue); }
/* Many documentations: three to a row, tighter, each lead cut at three lines. */
.api-cards--compact { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: var(--space-4); }
.api-cards--compact .api-card { gap: var(--space-4); padding: var(--space-6); }
.api-cards--compact .api-card__title { font-size: var(--text-20); }
.api-cards--compact .api-card__lead {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
.api-card__head { display: flex; flex-direction: column; gap: var(--space-1-5); }
.api-card__kicker { color: var(--color-accent-text); font-size: var(--text-12); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
/* Shown to the team only, on a documentation readers do not see. */
.api-card__hidden { align-self: flex-start; }
.api-card__title { margin: 0; font-size: var(--text-24); font-weight: 600; line-height: 1.25; }
.api-card__title a { color: var(--color-text); }
.api-card__title a:hover { color: var(--color-link); }
.api-card__lead { margin: 0; font-size: var(--text-14); line-height: 1.65; text-wrap: pretty; }
.api-card__methods { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1-5); margin: 0; }
.chip-method { height: 21px; padding: 0 var(--space-2); font-size: var(--text-11); }
.api-card__total { margin-left: var(--space-1-5); color: var(--color-text); font-size: var(--text-13); font-weight: 600; }
.api-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-1-5); margin: 0; padding: 0; list-style: none; }
.api-card__tags a {
  display: inline-flex;
  padding: 5px 11px;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-12);
}
.api-card__tags a:hover { border-color: var(--color-text); color: var(--color-text); }
.api-card__base {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3-5);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.api-card__base code { flex-grow: 1; min-width: 0; overflow: hidden; color: var(--color-text); font-size: var(--text-13); text-overflow: ellipsis; white-space: nowrap; }
.api-card__copy {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1-5) var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--color-bg-inset);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-12);
  font-weight: 600;
  cursor: pointer;
}
.api-card__copy:hover { background: var(--color-info-bg); box-shadow: inset 0 0 0 1px var(--color-border-strong); }
.api-card__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: auto 0 0; }
.api-card__untranslated {
  padding: 2px var(--space-2);
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--text-12);
  font-weight: 600;
}

.guide-lists {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: var(--space-6);
  max-width: var(--hub-max);
  margin: 0 auto;
}
.guide-list { padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); }
.guide-list__title { margin: 0 0 var(--space-3); color: var(--color-text); font-size: var(--text-16); font-weight: 600; }
/* A documentation's guides in columns, so one documentation's list does not run down a
   full-width card. */
.guide-list ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px var(--space-4); margin: 0; padding: 0; list-style: none; }
.guide-list a { display: flex; align-items: center; gap: var(--space-2-5); padding: var(--space-1-5) var(--space-2); border-radius: var(--radius-sm); color: var(--color-text-secondary); }
.guide-list a:hover { background: var(--color-bg-inset); color: var(--color-text); }
.guide-list .icon { color: var(--color-text-muted); }

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--space-8);
  max-width: var(--hub-max);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  text-align: center;
}
.steps__step { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.steps__n {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-bg-inset);
  color: var(--color-text);
  font-size: var(--text-20);
  font-weight: 700;
}
.steps__title { color: var(--color-text); font-weight: 600; }
.steps__text { max-width: 300px; font-size: var(--text-14); line-height: 1.6; }

.hub-help { padding: 0 var(--space-8) 64px; }
.hub-help__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
  max-width: 900px;
  margin: 0 auto;
  padding: var(--space-8) 48px;
  border-radius: 80px;
  background: var(--color-bar-active);
  color: #fff;
}
.hub-help__badge {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border: 3px solid var(--lws-status-dot);
  border-radius: 50%;
  line-height: 1.1;
}
.hub-help__badge strong { font-size: var(--text-24); }
.hub-help__badge span { font-size: var(--text-11); }
.hub-help__text { display: flex; flex-direction: column; gap: var(--space-2); flex: 1 1 260px; min-width: 0; }
.hub-help__text strong { font-size: var(--text-20); font-weight: 600; }
.hub-help__text span { color: var(--color-footer-ink); font-size: var(--text-14); line-height: 1.6; }

/* ---- introduction ---------------------------------------------------------------------------- */

.intro__head { display: flex; flex-direction: column; gap: 14px; }
.intro__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.intro__server {
  padding: 3px var(--space-2-5);
  border-radius: var(--radius-sm);
  background: var(--color-info-bg);
  color: var(--color-text);
  font-size: var(--text-13);
  word-break: break-all;
}
.intro__counts { display: flex; flex-wrap: wrap; gap: 10px; margin: var(--space-1) 0 0; }
.intro__legal { display: flex; gap: var(--space-4); margin: 0; font-size: var(--text-13); }

.credential {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border);
}
.credential:last-child { border-bottom: 0; }
.credential__name { flex-shrink: 0; width: 150px; color: var(--color-text); font-size: var(--text-13); font-weight: 700; }
.credential__body { flex-grow: 1; flex-basis: 200px; display: flex; flex-direction: column; gap: 3px; }
.credential__hint { color: var(--color-text-secondary); font-size: var(--text-14); line-height: 1.5; }
.credential__sample { color: var(--color-text-muted); font-size: var(--text-12); }

/* ---- resource page ------------------------------------------------------------------------ */

.tag__count { margin: 0; color: var(--color-text-muted); font-size: var(--text-13); }
.op-list { padding: 0; list-style: none; }
.op-list__item { border-bottom: 1px solid var(--color-border); }
.op-list__item:last-child { border-bottom: 0; }
.op-list__link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  color: var(--color-text);
}
.op-list__link:hover { background: var(--color-surface-raised); color: var(--color-text); }
.op-list__method { height: 20px; }
.op-list__title { font-size: var(--text-14); font-weight: 600; }
.op-list__path { margin-left: auto; color: var(--color-text-muted); font-size: var(--text-12); }
.op-list__item > .badges { padding: 0 var(--space-4) var(--space-3) calc(var(--space-4) + 54px + var(--space-3)); }

/* ---- notices ------------------------------------------------------------------------------ */

.notice {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-info-bg);
  color: var(--color-text-secondary);
  font-size: var(--text-14);
  line-height: 1.55;
}
.notice__title { margin: 0 0 var(--space-1); color: var(--color-text); font-weight: 600; }
.notice .prose { font-size: inherit; }
.notice code {
  padding: 1px 5px;
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.9em;
}
/* The redesign's test-mode callout: the orange wash and its bolt. */
.notice--callout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: 0;
  background: var(--tint-orange);
}
.notice--callout .icon { margin-top: 3px; color: var(--lws-orange); }
.notice--warning { border-color: var(--badge-paid-border); background: var(--badge-paid-bg); }
.notice--caution { border-color: var(--badge-async-border); background: var(--badge-async-bg); }
.notice--danger { border-color: var(--badge-del-border); background: var(--color-required-bg); }
.notice--danger .notice__title { color: var(--color-required); }
.notice--tip { border-color: var(--badge-live-border); background: var(--color-ok-bg); }
.notice--fallback { border-color: var(--color-border-strong); background: var(--color-bg-subtle); }
.notice--auth { border-color: var(--color-border); background: var(--color-surface); }

/* ---- pager and footer ------------------------------------------------------------------------ */

.pager {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  max-width: calc(var(--main-max) + 80px);
  padding: 0 40px 56px;
}
.pager a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 48%;
  padding: var(--space-3) 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.pager a:hover { border-color: var(--color-link); }
.pager__next { margin-left: auto; text-align: right; }
.pager__label {
  color: var(--color-text-muted);
  font-size: var(--text-11);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.pager__title { color: var(--color-text); font-size: var(--text-14); font-weight: 600; }

/* The redesign's navy footer: four columns of links, the white logo, the legal line. */
.site-footer {
  padding: 40px var(--space-8) var(--space-6);
  background: var(--color-footer-bg);
  color: var(--color-footer-ink);
  font-size: var(--text-13);
}
.site-footer__inner { display: flex; flex-direction: column; gap: 28px; max-width: var(--hub-max); margin: 0 auto; }
.site-footer__columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-6); }
.site-footer__column { display: flex; flex-direction: column; gap: var(--space-2); }
.site-footer__title {
  margin: 0;
  color: var(--color-footer-strong);
  font-size: var(--text-12);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.site-footer a { color: var(--color-footer-ink); }
.site-footer a:hover { color: var(--color-footer-strong); }
.site-footer__brand img { align-self: flex-start; width: auto; height: 32px; }
.site-footer__legal { margin: 0; padding-top: 18px; border-top: 1px solid var(--color-footer-rule); font-size: var(--text-12); }

/* ---- tablet: 240px sidebar, rail under the content ----------------------------------------- */

@media (max-width: 1099px) {
  .site-top__tagline { visibility: hidden; }
  .main { padding: 24px 28px 32px; }
  .pager { padding: 0 28px 40px; }
  .rail { padding: 0 28px 36px; }
  .toc { display: none; }
  .hub-hero__inner { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .site-top__links,
  .site-top__visit { display: none; }
  .top-tabs--hub .top-tabs__tab--status { display: none; }
}

/* ---- mobile: sidebar in the drawer, one column ------------------------------------------------ */

@media (max-width: 760px) {
  .site-top { gap: var(--space-3); padding: 0 var(--space-3); }
  .site-top__tagline { display: none; }
  .brand { flex-grow: 1; }
  .brand__logo { height: 26px; }
  .brand__badge { font-size: var(--text-12); }
  .site-header { gap: var(--space-2-5); padding: 0 var(--space-3); }
  .drawer { display: block; }
  .top-tabs:not(.top-tabs--hub),
  .bar-button { display: none; }
  .top-tabs--hub { overflow-x: auto; scrollbar-width: none; }
  .top-tabs--hub .top-tabs__tab { padding: 0 var(--space-3); }
  .control--docs .control__label { max-width: 42vw; }
  /* The switcher starts after the burger, some 58px in: the panel keeps within the screen. */
  .menu--docs .menu__panel { width: min(320px, calc(100vw - 72px)); }

  .shell > .sidebar { display: none; }
  .main { padding: 20px var(--space-4) 28px; }
  .pager { padding: 0 var(--space-4) 40px; }
  .rail { padding: 0 var(--space-4) 32px; }
  /* Smaller still on a phone, where they sit over the text. */
  .rail-tab,
  .rail__fold { width: 28px; height: 60px; }

  .hub-hero { padding: 36px var(--space-4) 44px; }
  .hub-section { padding: 44px var(--space-4); }
  .hub-help { padding: 0 var(--space-4) 44px; }
  .hub-help__inner { padding: var(--space-6); border-radius: var(--radius-card); }
  .api-card { padding: var(--space-6); }
  .search { padding: var(--space-3); }
  .search__panel { max-height: calc(100vh - 2 * var(--space-3)); }
  .search__group { display: none; }
  .credential__name { width: auto; }
  .op-list__item > .badges { padding-left: var(--space-4); }
  .op-list__path { margin-left: 0; flex-basis: 100%; }
  .site-footer { padding: 32px var(--space-4) var(--space-5); }
}

/* A folded phone, some 344px wide: the header's first row — logo, badge, language, theme —
   would need about 380px, so it tightens rather than push the page sideways. */
@media (max-width: 380px) {
  .site-top { gap: var(--space-2); }
  .brand { gap: var(--space-1-5); }
  .brand__logo { height: 22px; }
  .brand__badge { font-size: var(--text-11); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---- feedback -------------------------------------------------------------------------------
 * The row at the foot of a page — "Was this page helpful?", Yes, No, "Report an error" — and
 * the report form, in a dialog over the page or on a page of its own. Without JavaScript only
 * the link shows; feedback.js reveals the rest.
 */

.feedback {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-8);
  padding: 14px var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
}
.feedback__question { color: var(--color-text); font-size: var(--text-14); font-weight: 500; }
.feedback__vote {
  height: 32px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-13);
  font-weight: 500;
  cursor: pointer;
}
.feedback__vote:hover { border-color: var(--color-link); }
.feedback__thanks { color: var(--color-text-secondary); font-size: var(--text-13-5); }
.feedback__spacer { flex-grow: 1; }
.feedback__report { color: var(--color-link); font-size: var(--text-13); font-weight: 600; }

.feedback-dialog {
  width: 470px;
  max-width: calc(100% - var(--space-8));
  max-height: 86vh;
  padding: 0;
  overflow: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-modal);
}
.feedback-dialog::backdrop { background: var(--color-scrim); }
.feedback-dialog__head {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  padding: 15px 18px;
  border-bottom: 1px solid var(--color-border-soft);
}
.feedback-dialog__title { flex-grow: 1; margin: 0; font-size: var(--text-16); font-weight: 600; }
.feedback-dialog .feedback-form { padding: 17px; }
.feedback-dialog__sent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  padding: var(--space-8) 26px;
  text-align: center;
}
.feedback-dialog__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  background: var(--color-ok-bg);
  color: var(--color-ok);
}
.feedback-dialog__sent-title { margin: 0; font-size: var(--text-17-5); font-weight: 600; }
.feedback-dialog__sent-text { max-width: 300px; margin: 0; color: var(--color-text-muted); font-size: var(--text-13-5); line-height: 1.6; }
.feedback-dialog__done {
  height: 38px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-14);
  cursor: pointer;
}

.feedback-form { display: flex; flex-direction: column; gap: 13px; }
.feedback-form__page {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-2) 11px;
  border-radius: var(--radius-control);
  background: var(--color-bg-inset);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-11-5);
  word-break: break-all;
}
.feedback-form__page span { color: var(--color-text-secondary); }
.feedback-form__kinds { margin: 0; padding: 0; border: 0; }
.feedback-form__label {
  margin-bottom: 7px;
  padding: 0;
  color: var(--color-text-muted);
  font-size: var(--text-11);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
label.feedback-form__label { margin-bottom: -7px; }
.feedback-form__pills { display: flex; flex-wrap: wrap; gap: 7px; }
.feedback-form__kind { position: absolute; opacity: 0; pointer-events: none; }
.feedback-form__pill {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: 16px;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-13);
  cursor: pointer;
}
.feedback-form__kind:checked + .feedback-form__pill {
  border-color: var(--color-accent);
  background: var(--color-accent-bg);
  color: var(--color-accent-ink);
  font-weight: 600;
}
.feedback-form__kind:focus-visible + .feedback-form__pill { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.feedback-form__message {
  width: 100%;
  padding: var(--space-2-5) 11px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-control);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-13-5);
  line-height: 1.5;
  resize: vertical;
}
.feedback-form__message:focus { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.feedback-form__hint { margin: -6px 0 0; color: var(--color-text-muted); font-size: var(--text-11-5); }
.feedback-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.feedback-form__error { margin: 0; color: var(--color-required); font-size: var(--text-13); }
.feedback-form__actions { display: flex; gap: 9px; }
.feedback-form__send {
  flex-grow: 1;
  height: 42px;
  border: 0;
  border-radius: var(--radius-control);
  background: var(--color-accent);
  color: #fff;
  font-family: inherit;
  font-size: var(--text-14-5);
  font-weight: 600;
  cursor: pointer;
}
.feedback-form__send:hover { background: var(--color-accent-hover); }
.feedback-form__send:disabled { background: var(--color-disabled-bg); color: var(--color-disabled-ink); cursor: wait; }
.feedback-form__cancel {
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-14);
  font-weight: 500;
  cursor: pointer;
}
.feedback-form__cancel:hover { color: var(--color-text); }

.feedback-page { display: flex; flex-direction: column; gap: var(--space-4); max-width: 520px; }
.feedback-page h1 { margin: 0; }
.feedback-page__about { margin: 0; color: var(--color-text-muted); }
.feedback-page--sent { align-items: flex-start; }

/* ---- assistant ------------------------------------------------------------------------------
 * The LWS help centre's widget (aide.lws.fr), in this site's type: a button in the bottom-right
 * corner, and a panel beside the page rather than a dialog over it — an answer is read against
 * the page it points to. Both arrive hidden; assistant.js shows the button once the server says
 * the assistant can answer, and the rail then keeps room under the try-it console so the button
 * never covers it. On a phone the button is round and the panel takes the screen.
 */

.has-assistant .rail { padding-bottom: 84px; }

.assistant-launcher {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 35;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 9px 20px 9px 10px;
  border: 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--assistant-from) 0%, var(--assistant-to) 100%);
  color: #fff;
  font-family: inherit;
  font-size: var(--text-14);
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(28, 69, 154, 0.35);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.assistant-launcher:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(28, 69, 154, 0.5); }

/* The assistant's face: on the button, in the panel's header, beside each answer. */
.assistant-avatar {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--assistant-to) 0%, var(--assistant-from) 100%);
  color: #fff;
}
.assistant-avatar--launcher { width: 32px; height: 32px; border: 2px solid #fff; }
.assistant-avatar--head { width: 40px; height: 40px; border: 2px solid rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.14); }
.assistant-avatar--message { width: 32px; height: 32px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }

.assistant-online {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 11px;
  height: 11px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--assistant-online);
  animation: assistant-pulse 2s infinite;
}
.assistant-online--large { width: 13px; height: 13px; }
@keyframes assistant-pulse {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); }
  70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.assistant__panel {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 36;
  display: flex;
  flex-direction: column;
  width: 420px;
  max-width: calc(100vw - 32px);
  height: min(600px, calc(100vh - 48px));
  overflow: hidden;
  border-radius: 14px;
  background: var(--assistant-bubble);
  box-shadow: var(--assistant-shadow);
}

.assistant__head {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 12px 14px 16px;
  background: linear-gradient(135deg, var(--assistant-from) 0%, var(--assistant-to) 100%);
  color: #fff;
}
.assistant__heading { flex-grow: 1; min-width: 0; }
.assistant__title { margin: 0; color: #fff; font-size: var(--text-15); font-weight: 700; line-height: 1.3; }
.assistant__sub { margin: 2px 0 0; color: rgba(255, 255, 255, 0.9); font-size: var(--text-11); font-weight: 400; line-height: 1.6; }
.assistant__online-label { display: inline-flex; align-items: center; gap: 5px; color: #D1FAE5; vertical-align: top; }
.assistant__online-label::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--assistant-online);
  animation: assistant-pulse 2s infinite;
}
.assistant__badge { padding: 1px 8px; border-radius: 10px; background: rgba(255, 255, 255, 0.2); font-size: var(--text-10); font-weight: 600; letter-spacing: 0.04em; }
.assistant__tools { display: flex; flex-shrink: 0; gap: 4px; }
.assistant__tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.assistant__tool:hover,
.assistant__tool[aria-expanded="true"] { background: rgba(255, 255, 255, 0.32); transform: scale(1.06); }

/* The reader's recent conversations, under the header's clock. */
.assistant__history {
  position: absolute;
  top: 62px;
  right: 12px;
  z-index: 2;
  width: 290px;
  max-width: calc(100% - 24px);
  max-height: 360px;
  overflow-y: auto;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--assistant-bubble);
  color: var(--assistant-ink);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.assistant__history-title { margin: 0 0 6px; color: var(--assistant-muted); font-size: var(--text-11); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.assistant__history-list { margin: 0; padding: 0; list-style: none; }
.assistant__history-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-bottom: 1px solid var(--assistant-border);
  border-radius: 6px;
  background: none;
  color: var(--assistant-ink);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.assistant__history-list li:last-child .assistant__history-item { border-bottom: 0; }
.assistant__history-item:hover,
.assistant__history-item[aria-current] { background: var(--color-info-bg); color: var(--color-link); }
.assistant__history-question { overflow: hidden; font-size: var(--text-13); text-overflow: ellipsis; white-space: nowrap; }
.assistant__history-when { color: var(--assistant-muted); font-size: var(--text-11-5); }
.assistant__history-empty { margin: 0; padding: 12px 10px; color: var(--assistant-muted); font-size: var(--text-12); font-style: italic; text-align: center; }
.assistant__history-clear {
  width: 100%;
  margin-top: 6px;
  padding: 6px;
  border: 1px dashed var(--color-border-strong);
  border-radius: 6px;
  background: none;
  color: var(--assistant-muted);
  font-family: inherit;
  font-size: var(--text-11-5);
  cursor: pointer;
}
.assistant__history-clear:hover { border-color: #FCA5A5; background: #FEE2E2; color: #991B1B; }

/* The conversation. */
.assistant__log {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--assistant-log);
}
.assistant__message { display: flex; flex-direction: column; max-width: 100%; }
.assistant__message--question { align-items: flex-end; }
.assistant__message--answer { flex-direction: row; align-items: flex-end; gap: 8px; }
.assistant__wrap { display: flex; flex-direction: column; gap: 6px; min-width: 0; max-width: calc(100% - 40px); }
.assistant__bubble { padding: 10px 14px; border-radius: 14px; font-size: var(--text-14); line-height: 1.5; overflow-wrap: anywhere; }
.assistant__message--question .assistant__bubble {
  max-width: 85%;
  border-bottom-right-radius: 4px;
  background: var(--assistant-from);
  color: #fff;
  white-space: pre-wrap;
}
.assistant__message--answer .assistant__bubble {
  border: 1px solid var(--assistant-border);
  border-bottom-left-radius: 4px;
  background: var(--assistant-bubble);
  color: var(--assistant-ink);
}
.assistant__time { margin-top: 4px; color: var(--assistant-muted); font-size: var(--text-11); }
.assistant__wrap .assistant__time { margin-top: 0; }

.assistant__answer > * { margin: 0 0 var(--space-2); }
.assistant__answer > :last-child { margin-bottom: 0; }
.assistant__answer ul,
.assistant__answer ol { padding-left: var(--space-5); }
.assistant__answer li + li { margin-top: var(--space-1); }
.assistant__answer a { color: var(--color-link); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.assistant__answer a:hover { color: var(--color-link-hover); }
.assistant__answer strong,
.assistant__heading { font-weight: 700; }
.assistant__answer code {
  padding: 1px 4px;
  border-radius: var(--radius-xs);
  background: var(--color-bg-inset);
  font-family: var(--font-mono);
  font-size: 0.86em;
}

.assistant__code { position: relative; }
.assistant__code pre {
  margin: 0;
  padding: var(--space-3) 44px var(--space-3) var(--space-3);
  overflow-x: auto;
  border-radius: var(--radius-lg);
  background: var(--color-code-bg);
  color: var(--color-code-ink);
  font-family: var(--font-mono);
  font-size: var(--text-12);
  line-height: 1.6;
}
.assistant__code pre code { padding: 0; background: none; color: inherit; font-size: inherit; }
.assistant__copy {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--lws-navy);
  cursor: pointer;
}
.assistant__copy:hover { background: var(--color-code-control-hover); }
.assistant__copy .icon--check { display: none; }
.assistant__copy.is-done .icon--copy { display: none; }
.assistant__copy.is-done .icon--check { display: block; color: var(--method-get); }

.assistant__table { overflow-x: auto; }
.assistant__table table { border-collapse: collapse; font-size: var(--text-12-5); }
.assistant__table th,
.assistant__table td { padding: var(--space-1) var(--space-2); border: 1px solid var(--assistant-border); text-align: left; vertical-align: top; overflow-wrap: normal; }
.assistant__table th { background: var(--assistant-log); font-weight: 600; }

/* Questions offered before the first one. */
.assistant__chips { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 40px; }
.assistant__chip {
  padding: 8px 14px;
  border: 1px solid var(--assistant-border);
  border-radius: 18px;
  background: var(--assistant-bubble);
  color: var(--color-link);
  font-family: inherit;
  font-size: var(--text-13);
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}
.assistant__chip:hover { border-color: var(--assistant-to); background: var(--color-info-bg); }

.assistant__status { margin: 0; padding-left: 40px; color: var(--assistant-muted); font-size: var(--text-12-5); font-style: italic; animation: assistant-waiting 1.6s ease-in-out infinite; }
@keyframes assistant-waiting { 50% { opacity: 0.45; } }

/* Under an answer: the pages it cites, the vote. */
.assistant__sources { padding: 8px 12px; border-left: 3px solid var(--assistant-to); border-radius: 8px; background: var(--color-info-bg); font-size: var(--text-12-5); }
.assistant__sources-title { margin: 0 0 4px; color: var(--color-info-ink); font-weight: 600; }
.assistant__sources a { display: block; padding: 2px 0; color: var(--color-link); }
.assistant__vote { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--assistant-muted); font-size: var(--text-12); }
.assistant__vote-label { margin-right: 2px; }
.assistant__vote-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--assistant-border);
  border-radius: 6px;
  background: var(--assistant-bubble);
  color: var(--assistant-muted);
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
}
.assistant__vote-button:hover:not(:disabled) { background: var(--color-bg-subtle); transform: scale(1.06); }
.assistant__vote-button:disabled { cursor: default; opacity: 0.5; }
.assistant__vote-button[aria-pressed="true"] { opacity: 1; }
.assistant__vote-button--up[aria-pressed="true"] { border-color: #10B981; background: #D1FAE5; color: #065F46; }
.assistant__vote-button--down[aria-pressed="true"] { border-color: #EF4444; background: #FEE2E2; color: #991B1B; }
.assistant__vote-thanks { color: var(--color-ok); font-style: italic; }

.assistant__error { margin: var(--space-2) 0 0; color: var(--color-required); font-size: var(--text-13); }
.assistant__note { margin: 0; color: var(--color-required); font-size: var(--text-13); }
/* The refusal is the most important thing this panel says, so it does not read as an error to
   dismiss: it says what happened and what to do. */
.assistant__refusal {
  margin: 0;
  padding: var(--space-2-5) var(--space-3);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: var(--color-accent-bg);
  color: var(--color-accent-ink);
  font-size: var(--text-13);
  line-height: 1.55;
}

/* The notice about the AI: accepted once, before the first question; read again from the foot. */
.assistant__notice {
  flex-shrink: 0;
  padding: 16px;
  border: 1px solid var(--assistant-notice-border);
  border-radius: 10px;
  background: var(--assistant-notice-bg);
  color: var(--assistant-notice-ink);
  font-size: var(--text-13);
  line-height: 1.5;
}
.assistant__notice-title { margin: 0 0 8px; font-size: var(--text-14); font-weight: 700; }
.assistant__notice p { margin: 0 0 8px; }
.assistant__notice ul { margin: 0; padding-left: 18px; }
.assistant__notice li + li { margin-top: 4px; }
.assistant__notice-actions { display: flex; gap: 8px; margin-top: 12px; }
.assistant__accept,
.assistant__refuse,
.assistant__understood {
  padding: 8px 16px;
  border: 0;
  border-radius: 6px;
  font-family: inherit;
  font-size: var(--text-13);
  font-weight: 600;
  cursor: pointer;
}
.assistant__accept,
.assistant__understood { background: var(--assistant-from); color: #fff; }
.assistant__refuse { background: var(--color-bg-subtle); color: var(--color-text-secondary); }

.assistant__compose {
  flex-shrink: 0;
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--assistant-border);
  background: var(--assistant-bubble);
}
.assistant__input {
  flex-grow: 1;
  min-width: 0;
  min-height: 42px;
  max-height: 120px;
  padding: 10px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: 10px;
  resize: none;
  background: var(--color-bg);
  color: var(--assistant-ink);
  font-family: inherit;
  font-size: var(--text-14);
  line-height: 1.45;
}
.assistant__input:focus { border-color: var(--assistant-focus); outline: none; box-shadow: 0 0 0 3px rgba(28, 69, 154, 0.12); }
.assistant__input:disabled { background: var(--color-disabled-bg); cursor: not-allowed; }
.assistant__send {
  flex-shrink: 0;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: var(--assistant-from);
  color: #fff;
  font-family: inherit;
  font-size: var(--text-14);
  font-weight: 600;
  cursor: pointer;
}
.assistant__send:hover { background: var(--assistant-hover); }
.assistant__send:disabled { background: #9CA3AF; cursor: not-allowed; }

.assistant__foot {
  flex-shrink: 0;
  margin: 0;
  padding: 8px 14px;
  border-top: 1px solid var(--assistant-border);
  background: var(--assistant-log);
  color: var(--assistant-muted);
  font-size: var(--text-11-5);
  line-height: 1.6;
  text-align: center;
}
.assistant__link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-link);
  font-family: inherit;
  font-size: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.assistant__link--danger { color: var(--color-required); }

@media (max-width: 760px) {
  .has-assistant .rail { padding-bottom: 72px; }
  .assistant-launcher { right: 16px; bottom: 16px; padding: 6px; }
  .assistant-launcher__label { display: none; }
  .assistant-avatar--launcher { width: 40px; height: 40px; }
  .assistant__panel { inset: 0; width: auto; max-width: none; height: auto; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .assistant-online,
  .assistant__online-label::before,
  .assistant__status { animation: none; }
  .assistant-launcher,
  .assistant__tool,
  .assistant__vote-button { transition: none; }
}
@media print {
  .assistant,
  .assistant-launcher { display: none !important; }
}