/**
 * The MCP portal, laid out as LWS's Panel KVM in LWS's colours: a sidebar with the sections, a
 * top bar with the service's state, the theme and the account, then white cards on the pale
 * blue-grey page — a graphite in the dark. Pills mark states, chips choose periods, tables have
 * their column names in small capitals. Light or dark: the reader's system preference, or the
 * top bar's toggle, decides (theme.js). Every colour is a token from tokens.css.
 *
 * The portal's own blocks (calls, tokens, the token form, the token shown once, two-factor,
 * sign-in and activation) follow, then the narrow screens: below 1100px the sidebar moves into
 * a drawer, below 1000px lists become cards.
 */

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body.portal {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text-secondary);
  font-family: var(--font-sans);
  font-size: var(--text-14);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
code, pre { font-family: var(--font-mono); font-size: 0.92em; }
h1, h2, p { margin: 0; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
[hidden] { display: none !important; }
.js .js-hidden { display: none; }
.spacer { flex-grow: 1; }
.stack { display: flex; flex-direction: column; gap: 18px; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend { padding: 0; }
/* A fieldset's gap does not reach its legend. */
fieldset.field > legend { margin-bottom: 8px; }

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

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

/* ---- the shell ---------------------------------------------------------------------------
 * The sidebar stays in view; beside it, the top bar, the page and the foot line. Signed out,
 * the page has the whole width.
 */

.app { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); min-height: 100vh; }
.app--bare { grid-template-columns: minmax(0, 1fr); }
.app__main { display: flex; flex-direction: column; min-width: 0; }

.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
  height: 100vh;
  padding: 22px var(--space-4) 18px;
  overflow-y: auto;
  border-right: 1px solid var(--color-border);
  background: var(--color-sidebar);
}

/* The LWS logo, then the service's badge in the LWS blue, as the documentation's. The logo has a
   white version for the dark theme. */
.brand { display: flex; align-items: center; gap: 10px; padding: var(--space-2) var(--space-2) 20px; }
.brand:hover { text-decoration: none; }
.brand--top { padding: 0; }
.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-info-strong); color: #fff; font-size: var(--text-14); font-weight: 600; white-space: nowrap; }

/* The sidebar's items: an icon and a label; the current one on the accent's tint. */
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav form { display: flex; flex-direction: column; margin: 0; }
.nav__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2-5) var(--space-3);
  border: 0;
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-14);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.nav__item .icon { color: var(--color-text-muted); }
.nav__item:hover { background: var(--color-bg-inset); color: var(--color-text); text-decoration: none; }
.nav__item[aria-current] { background: var(--color-accent-bg); color: var(--color-accent-ink); font-weight: 600; }
.nav__item[aria-current] .icon { color: currentColor; }
.nav__item--parent { cursor: default; }
.nav__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A token's pages, under it, along a line. */
.nav__sub { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 var(--space-1-5) 21px; padding-left: var(--space-3-5); border-left: 1px solid var(--color-border); }
.nav__subitem { padding: 7px var(--space-3); border-radius: var(--radius-md); color: var(--color-text-secondary); font-size: var(--text-13); }
.nav__subitem:hover { background: var(--color-bg-inset); color: var(--color-text); text-decoration: none; }
.nav__subitem[aria-current] { background: var(--color-accent-bg); color: var(--color-accent-ink); font-weight: 600; }
.nav__rule { width: calc(100% - 16px); height: 1px; margin: var(--space-2-5) var(--space-2); border: 0; background: var(--color-border); }
.nav--foot { margin-top: auto; padding-top: var(--space-3); }

/* The top bar: the MCP's state, the theme, the account. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  height: var(--topbar-height);
  padding: 0 28px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-topbar);
}

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

.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; }

.status-pill {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-2);
  height: 34px;
  padding: 0 var(--space-3-5);
  border: 1px solid;
  border-radius: var(--radius-pill);
  font-size: var(--text-12-5);
  font-weight: 600;
  white-space: nowrap;
}
.status-pill:hover { text-decoration: none; }
.status-pill__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status-pill--on { border-color: var(--color-ok-border); background: var(--color-ok-bg); color: var(--color-ok); }
.status-pill--off { border-color: var(--color-required-border); background: var(--color-required-bg); color: var(--color-required); }
.status-pill--warn { border-color: var(--color-warn-border); background: var(--color-warn-bg); color: var(--color-warn); }

/* The account, as the Panel's: an avatar, then who, behind a rule. */
.who { display: flex; align-items: center; gap: var(--space-2-5); margin-left: var(--space-1-5); padding: var(--space-1) var(--space-1-5) var(--space-1) var(--space-3-5); border-left: 1px solid var(--color-border); color: var(--color-text); }
.who > .icon { color: var(--color-text-muted); }
.who__avatar { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--color-bg-inset); color: var(--color-text-secondary); }
.who__text { display: flex; flex-direction: column; line-height: 1.25; }
.who__text strong { font-size: var(--text-13-5); font-weight: 700; }
.who__text span { color: var(--color-text-muted); font-size: var(--text-12); }

/* ---- 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.
 */

.menu > summary,
.drawer > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker,
.drawer > summary::-webkit-details-marker { display: none; }
.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: 250px;
  padding: var(--space-1-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-menu);
}
.menu__title {
  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);
  width: 100%;
  padding: var(--space-2-5) var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.menu__item .icon { color: var(--color-text-muted); }
.menu__item:hover { background: var(--color-bg-inset); color: var(--color-text); text-decoration: none; }
.menu__item[aria-current="page"] { background: var(--color-accent-bg); color: var(--color-accent-ink); font-weight: 600; }
.menu__item[aria-current="page"] .icon { color: var(--color-accent-ink); }
.menu__label { flex-grow: 1; font-size: var(--text-13-5); }
.menu form { display: flex; flex-direction: column; margin: 0; }

/* The narrow screen's menu: the sidebar, in a panel from the left. Open, the burger summary
   becomes the scrim behind the panel, so tapping outside closes it. */
.drawer { display: none; flex-shrink: 0; width: 38px; height: 38px; }
.drawer__toggle { width: 38px; height: 38px; }
.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__close { align-self: flex-end; margin-bottom: calc(-1 * var(--space-2)); }
.drawer__panel {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 61;
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
  width: 290px;
  max-width: 86%;
  padding: 22px var(--space-4) 18px;
  overflow-y: auto;
  border-right: 1px solid var(--color-border);
  background: var(--color-sidebar);
}

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

/* The first stop of the keyboard: straight to the page, past the menus. */
.skip-link { position: absolute; top: 8px; left: 8px; z-index: 100; padding: 10px 16px; border-radius: var(--radius-control); background: var(--color-strong-bg); color: var(--color-strong-ink); font-weight: 600; transform: translateY(-200%); }
.skip-link:focus { transform: none; }
/* Focused only so that a screen reader reads them on arrival: nothing to act on, so no ring. */
.portal-main:focus, .flash:focus { outline: none; }
/* What is wrong in a form, each item a link to its field. */
.error-summary ul { margin: 6px 0 0; padding-left: 18px; }
.error-summary a { color: inherit; }

.portal-main { display: flex; flex-grow: 1; flex-direction: column; gap: 20px; width: 100%; padding: 34px 34px 40px; }
/* Pages of settings and forms: every block in one column of one width, so that none stretches a
   form across the page nor leaves its neighbour half empty. Data pages span the page. */
.portal-main--column > * { max-width: 1000px; }

.app-footer { padding: 18px var(--space-6) 22px; color: var(--color-text-muted); font-size: var(--text-12); text-align: center; }
.app-footer a { text-decoration: underline; text-underline-offset: 2px; }

/* A page's head: the trail, then its icon, the title with the page's actions on its line, and
   a short lead under the title. */
.page-head {
  display: grid;
  grid-template-areas: "crumbs crumbs" "title actions" "lead lead";
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 16px;
}
.page-head:has(.page-head__icon) {
  grid-template-areas: "crumbs crumbs crumbs" "icon title actions" "icon lead actions";
  grid-template-columns: auto minmax(0, 1fr) auto;
}
.page-head .crumbs { grid-area: crumbs; margin-bottom: 10px; }
.page-head__icon {
  grid-area: icon;
  align-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--color-accent-bg);
  color: var(--color-mark);
}
.page-head__icon--round { border-radius: 50%; background: var(--color-info-bg); color: var(--color-info); }
.page-head__title { grid-area: title; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-height: 46px; color: var(--color-heading); font-size: var(--text-28); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; overflow-wrap: anywhere; }
.page-head__actions { grid-area: actions; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
.page-head__lead { grid-area: lead; max-width: 900px; margin-top: 2px; color: var(--color-text-muted); font-size: var(--text-14); }
.crumbs { color: var(--color-text-muted); font-size: var(--text-13); }
.crumbs a { color: var(--color-text-secondary); }

/* A message: a card with a straight coloured bar on its left and the icon on its tint, as the
   Panel's notices. The bar is drawn inside the card, which clips it to its rounded corners. */
.flash {
  --flash-mark: var(--color-ok);
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding: 12px 16px 12px 22px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-13-5);
  box-shadow: var(--shadow-card);
}
.flash::before { position: absolute; top: 0; bottom: 0; left: 0; width: 5px; background: var(--flash-mark); content: ""; }
.flash > span:not(.flash__icon), .flash > div { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
.flash a { color: inherit; font-weight: 600; text-decoration: underline; }
.flash code { overflow-wrap: anywhere; }
.flash__icon { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-md); background: var(--color-ok-bg); color: var(--color-ok); }
.flash > .icon { color: var(--color-ok); }
/* The cross that dismisses it, shown by portal.js. */
.flash__close { width: 28px; height: 28px; margin: -4px -6px -4px 0; border-color: transparent; background: transparent; color: var(--color-text-muted); }
.flash__close:hover { border-color: var(--color-border); color: var(--color-text); }
.flash--error { --flash-mark: var(--color-required); color: var(--color-required); }
.flash--error .flash__icon { background: var(--color-required-bg); color: var(--color-required); }
.flash--error > .icon { color: var(--color-required); }
.flash--warn { --flash-mark: var(--color-warn-mark); }
.flash--warn .flash__icon { background: var(--color-warn-bg); color: var(--color-warn); }
.flash--warn > .icon { color: var(--color-warn); }
.flash--info { --flash-mark: var(--color-info); }
.flash--info .flash__icon { background: var(--color-info-bg); color: var(--color-info); }
.flash--info > .icon { color: var(--color-info); }
.flash--secret { --flash-mark: var(--color-mark); color: var(--color-accent-ink); }
.flash--secret > .icon { color: var(--color-mark); }

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

/* Buttons, inputs and selects are all --admin-control-h tall, with the same radius. */
.button {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--admin-control-h);
  padding: 0 16px;
  border: 1px solid var(--color-tonal-border);
  border-radius: var(--radius-control);
  background: var(--color-tonal-bg);
  color: var(--color-tonal-ink);
  font-family: inherit;
  font-size: var(--text-13-5);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}
.button:hover { background: var(--color-tonal-bg-hover); text-decoration: none; }
.button:disabled { cursor: not-allowed; opacity: 0.5; }
.button--accent { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-on-accent); box-shadow: var(--shadow-accent); }
.button--accent:hover { border-color: var(--color-accent-hover); background: var(--color-accent-hover); }
.button--dark { border-color: var(--color-strong-border); background: var(--color-strong-bg); color: var(--color-strong-ink); }
.button--dark:hover { border-color: var(--color-strong-border); background: var(--color-strong-bg); opacity: 0.9; }
.button--info { border-color: var(--color-info-strong); background: var(--color-info-strong); color: #fff; }
.button--info:hover { border-color: var(--color-info-strong); background: var(--color-info-strong); opacity: 0.9; }
.button--go { border-color: var(--color-ok-border); background: var(--color-ok-bg); color: var(--color-ok); }
.button--go:hover { border-color: var(--color-ok); background: var(--color-ok-bg); }
.button--danger { border-color: var(--color-required-border); background: var(--color-required-bg); color: var(--color-required); }
.button--danger:hover { border-color: var(--color-required); background: var(--color-required-bg); }
.button--quiet { border-color: transparent; background: transparent; color: var(--color-text-secondary); }
.button--small { height: var(--admin-control-h-sm); padding: 0 12px; font-size: var(--text-12-5); }

.input,
.select {
  width: 100%;
  height: var(--admin-control-h);
  padding: 0 12px;
  border: 1px solid var(--color-field-border);
  border-radius: var(--radius-control);
  background: var(--color-field);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-13-5);
}
.input:focus,
.select:focus { border-color: var(--color-mark); outline: 2px solid var(--color-focus); outline-offset: 1px; }
.input[aria-invalid="true"] { border-color: var(--color-required); }
.input--mono { font-family: var(--font-mono); }
.input--area { height: auto; min-height: var(--admin-control-h); padding: 8px 12px; line-height: 1.5; resize: vertical; }
/* The browser's own arrow sits against the edge; this one has room, in a grey read on either theme. */
.select {
  width: auto;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238B8578' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 12px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.field { display: flex; flex-direction: column; gap: 6px; }
.field--short { flex: 0 1 260px; }
.field__label { color: var(--color-text); font-size: var(--text-12-5); font-weight: 600; }
.field__hint { color: var(--color-text-muted); font-size: var(--text-12); line-height: 1.5; overflow-wrap: anywhere; }
.field__error { color: var(--color-required); font-size: var(--text-12-5); font-weight: 500; }
.field__value { color: var(--color-text); font-size: var(--text-13-5); overflow-wrap: anywhere; }

.check { display: flex; align-items: flex-start; gap: 9px; color: var(--color-text-secondary); font-size: var(--text-13); cursor: pointer; }
.check input { flex-shrink: 0; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--color-accent); }
.check strong { color: var(--color-text); }

/* Radio buttons drawn as chips (a token's duration, the report, a purchase limit): the chosen one
   filled with the accent, as the filters' current chip. The radio itself is out of sight; the
   chip shows its focus. */
.choices { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.choice {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--color-tonal-border);
  border-radius: var(--radius-pill);
  background: var(--color-tonal-bg);
  color: var(--color-tonal-ink);
  font-size: var(--text-13);
  font-weight: 600;
  cursor: pointer;
}
.choice:hover { background: var(--color-tonal-bg-hover); }
.choice:has(input:checked) { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-on-accent); }
.choice:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
/* A few choices joined as one control, as tall as the fields: a purchase limit, the report. As
   wide as its choices, even in a column that stretches what it holds. */
.choices--joined {
  align-self: flex-start;
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 2px;
  height: var(--admin-control-h);
  padding: 3px;
  border: 1px solid var(--color-tonal-border);
  border-radius: var(--radius-control);
  background: var(--color-tonal-bg);
}
.choices--joined .choice { height: 100%; border: 0; border-radius: calc(var(--radius-control) - 3px); background: transparent; }
.choices--joined .choice:hover { background: var(--color-tonal-bg-hover); }
.choices--joined .choice:has(input:checked) { background: var(--color-accent); }

/* A password field with its Show button inside. */
.reveal { position: relative; }
.reveal .input { padding-right: 84px; }
.reveal__toggle {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  padding: 0 14px;
  border: 0;
  background: transparent;
  color: var(--color-link);
  font-family: inherit;
  font-size: var(--text-12);
  font-weight: 600;
  cursor: pointer;
}

/* A folded explanation: "En savoir plus". */
.more > summary { width: fit-content; color: var(--color-link); font-size: var(--text-12-5); font-weight: 500; cursor: pointer; }
.more[open] > summary { margin-bottom: 6px; }
/* A folded help on the page itself, not in a panel: a card of its own. */
.help { padding: 12px 18px; border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); box-shadow: var(--shadow-card); }
.help > summary { font-size: var(--text-13); }
.help[open] > summary { margin-bottom: 10px; }
.help .steps-list { margin-bottom: 8px; }

/* A state, as a pill with its dot: active, suspended, revoked, expired (Format::state). */
.state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--text-11-5);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.5;
  white-space: nowrap;
}
.state::before { flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: currentColor; content: ""; }
.state--active { border-color: var(--color-ok-border); background: var(--color-ok-bg); color: var(--color-ok); }
.state--suspended { border-color: var(--color-warn-border); background: var(--color-warn-bg); color: var(--color-warn); }
.state--revoked { border-color: var(--color-required-border); background: var(--color-required-bg); color: var(--color-required); }
.state--expired { border-color: var(--color-border); background: var(--color-bg-inset); color: var(--color-text-muted); }

/* ---- panels --------------------------------------------------------------------------- */

.panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}
.panel--padded { gap: 14px; padding: 22px 24px; }
/* A card reached by its anchor (the account menu's Double authentification): clear of the sticky
   top bar, its edge in orange, and a halo for a moment where motion is welcome. */
.panel[id] { scroll-margin-top: calc(var(--topbar-height) + 16px); }
.panel:target { border-color: var(--color-mark); }
@media (prefers-reduced-motion: no-preference) {
  .panel:target { animation: panel-target 1.6s ease-out; }
}
@keyframes panel-target {
  from { box-shadow: 0 0 0 5px var(--color-accent-border); }
}
.panel--info { border-color: var(--color-tonal-border); background: var(--color-tonal-bg); }
.panel--info .panel__title { color: var(--color-info); }
/* A card that points elsewhere, as the Panel's "Coordonnées & facturation": an icon, the words, a button. */
.notice { flex-direction: row; align-items: flex-start; gap: 16px; }
.notice__icon { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-info); }
.notice__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--color-border-soft);
}
.panel__title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--color-heading); font-size: var(--text-16); font-weight: 600; letter-spacing: -0.01em; }
.panel__title > .icon { color: var(--color-mark); }
.panel__aside { color: var(--color-text-muted); font-size: var(--text-12-5); font-weight: 400; }
.panel__foot { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 24px; background: var(--color-surface-raised); color: var(--color-text-muted); font-size: var(--text-12-5); }
.panel__foot--form { padding-block: 14px; border-top: 1px solid var(--color-border-soft); }
.panel__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 10px 24px;
  border-bottom: 1px solid var(--color-border-soft);
}
/* A panel's link to more, as the Panel's "Voir tout": a small button on the accent's tint. */
.panel__link { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: var(--radius-md); background: var(--color-accent-bg); color: var(--color-accent-ink); font-size: var(--text-12-5); font-weight: 600; white-space: nowrap; }
.panel__link:hover { text-decoration: none; filter: brightness(0.97); }
/* Inside a sentence, the same link is only text. */
p .panel__link, dd .panel__link, li .panel__link { display: inline; padding: 0; background: none; color: var(--color-link); text-decoration: underline; text-underline-offset: 2px; }
.panel__empty { padding: 20px 24px; color: var(--color-text-muted); font-size: var(--text-13); }
.panel__note { padding: 12px 24px; border-bottom: 1px solid var(--color-border-soft); color: var(--color-text-muted); font-size: var(--text-12-5); }

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 40px;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  text-align: center;
}
.empty .button { margin-top: 6px; }
.empty__title { color: var(--color-heading); font-size: var(--text-15); font-weight: 600; }
.empty__text { max-width: 560px; color: var(--color-text-muted); font-size: var(--text-13); }
.empty--page { width: 100%; max-width: 620px; margin: 8vh auto 0; }

/* The logs' filters: a panel that folds, open as soon as one is set, and the chips of those set. */
.log-filters > summary { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 24px; color: var(--color-heading); font-size: var(--text-14); font-weight: 600; list-style: none; cursor: pointer; }
.log-filters > summary::-webkit-details-marker { display: none; }
.log-filters > summary .icon { color: var(--color-text-muted); }
.log-filters[open] > summary { border-bottom: 1px solid var(--color-border-soft); }
.log-filters[open] > summary .icon--chevron-down { transform: rotate(180deg); }
.log-filters__form { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 18px 24px 20px; }
.log-filters__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px 16px; }
.log-filters__wide { grid-column: 1 / -1; }
.log-filters__statuses { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; }
.log-filters__actions { display: flex; justify-content: flex-end; gap: 8px; margin: 0; }
.active-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 0; }
.active-filters__chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 12px; border: 1px solid var(--color-accent-border); border-radius: var(--radius-pill); background: var(--color-accent-bg); color: var(--color-accent-ink); font-size: var(--text-12-5); font-weight: 600; }
.active-filters__chip:hover { border-color: var(--color-accent); text-decoration: none; }

/* Forms in panels: a head, a body of fields, a foot with the buttons; two fields that go together
   side by side where there is room. */
.settings .panel__head { padding: 18px 24px; }
.settings .panel__title { font-size: var(--text-16); }
.settings__body { display: flex; flex-direction: column; gap: 18px; padding: 22px 24px; }
.settings__row { display: flex; flex-wrap: wrap; gap: 18px; }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 40px; align-items: start; }
.split__part { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* Read only, first on the limits page: what it does, and its switch at the right. */
.read-only { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.read-only__text { display: flex; flex: 1 1 420px; flex-direction: column; gap: 8px; }

/* A counter beside its limit: what, a gauge, how many, when it starts again. */
.usages { display: flex; flex-direction: column; gap: 10px; padding-bottom: 18px; border-bottom: 1px solid var(--color-border-soft); }
.usage { display: grid; grid-template-columns: 110px minmax(80px, 240px) minmax(110px, auto) 1fr; align-items: center; gap: 6px 16px; font-size: var(--text-13); }
.usage__label { color: var(--color-text-muted); }
.usage__gauge { display: block; min-width: 0; }
.usage__count { color: var(--color-text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.usage__count strong { color: var(--color-text); font-weight: 600; }
.usage__reset { color: var(--color-text-muted); font-size: var(--text-12); }
.gauge { display: block; }
.gauge__track { fill: var(--color-bg-inset); }
.gauge--ok .gauge__fill { fill: var(--color-info); }
.gauge--near .gauge__fill { fill: var(--color-warn-mark); }
.gauge--over .gauge__fill { fill: var(--color-required); }
.gauge__line { stroke: var(--color-border-strong); stroke-dasharray: 5 5; stroke-width: 2; }

/* What happens at a limit: the margins show under "Tolérer" only once it is chosen. Without
   :has(), they always show. */
.modes { gap: 10px; }
.mode { display: flex; flex-direction: column; gap: 10px; }
.mode__more { padding-left: 25px; }
.mode:not(:has(input:checked)) .mode__more { display: none; }
.check__hint { display: block; color: var(--color-text-muted); font-size: var(--text-12-5); }
.note { display: flex; align-items: flex-start; gap: 8px; color: var(--color-text-secondary); font-size: var(--text-13); }
.note > .icon { margin-top: 2px; color: var(--color-info); }

/* A purchase limit: three chips, and the number once "Limité à…" is chosen. */
.purchase { flex: 1 1 400px; }
.purchase__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.purchase__count { display: inline-flex; align-items: center; gap: 8px; color: var(--color-text-secondary); font-size: var(--text-13); }
.purchase:not(:has(input[value="limited"]:checked)) .purchase__count { display: none; }
.input--count { width: 76px; }

/* ---- statistics ----------------------------------------------------------------------- */

/* Periods and filters, as chips; the chosen one filled with the accent. */
.segmented { display: flex; flex-wrap: wrap; gap: 6px; }
.segmented__item {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--color-tonal-border);
  border-radius: var(--radius-pill);
  background: var(--color-tonal-bg);
  color: var(--color-tonal-ink);
  font-size: var(--text-12-5);
  font-weight: 600;
  white-space: nowrap;
}
.segmented__item:hover { background: var(--color-tonal-bg-hover); text-decoration: none; }
.segmented__item[aria-current="page"] { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-on-accent); }

/* Figures, as the Panel's: an icon on its tint, the number, then what it counts. The label
   comes first in the page, for screen readers; the grid puts the number above it. */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.kpis--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi {
  display: grid;
  grid-template-areas: "value" "label" "sub";
  align-content: start;
  justify-items: start;
  gap: 2px;
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}
.kpi:has(.kpi__icon) { grid-template-areas: "icon" "value" "label" "sub"; }
/* A tile that opens the logs on what it counts. */
.kpi--link { color: inherit; }
.kpi--link:hover { border-color: var(--color-mark); text-decoration: none; }
.kpi__icon {
  grid-area: icon;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 14px;
  border-radius: var(--radius-lg);
  background: var(--color-bg-inset);
  color: var(--color-text-secondary);
}
.kpi__label { grid-area: label; color: var(--color-text-muted); font-size: var(--text-13); font-weight: 500; }
.kpi__value { grid-area: value; color: var(--color-heading); font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.kpi__value--text { font-size: var(--text-20); letter-spacing: -0.01em; line-height: 1.3; }
.kpi__sub { grid-area: sub; color: var(--color-text-muted); font-size: var(--text-12); }
.kpi--blue .kpi__icon { background: var(--color-info-bg); color: var(--color-info); }
.kpi--green .kpi__icon { background: var(--color-ok-bg); color: var(--color-ok); }
.kpi--amber .kpi__icon { background: var(--color-warn-bg); color: var(--color-warn); }
.kpi--red .kpi__icon { background: var(--color-required-bg); color: var(--color-required); }
.kpi--violet .kpi__icon { background: var(--color-violet-bg); color: var(--color-violet); }
.kpi--orange .kpi__icon { background: var(--color-accent-bg); color: var(--color-mark); }
.kpi--warn { border-color: var(--color-accent-border); }
.kpi--warn .kpi__value { color: var(--color-accent-ink); }

.chart-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.chart-key { display: flex; align-items: center; gap: 7px; color: var(--color-text-secondary); font-size: var(--text-12-5); }
.chart-key::before { display: inline-block; width: 14px; height: 3px; border-radius: 2px; content: ""; }
/* Calls that went through in blue, the others in red: two hues apart in both themes, as the
   Panel's charts pair blue and orange. */
.chart-key--ok::before { background: var(--color-info); }
.chart-key--bad::before { background: var(--color-required); }
.chart { display: block; width: 100%; height: auto; }
.chart__grid { stroke: var(--color-border-soft); stroke-width: 1; }
.chart__grid--base { stroke: var(--color-border-strong); }
.chart__tick { fill: var(--color-text-muted); font-family: var(--font-sans); font-size: 12px; }
.chart__end { font-family: var(--font-sans); font-size: 12.5px; font-weight: 700; }
/* The wide drawing is shown smaller than it is drawn: its figures are drawn larger. */
.chart--wide .chart__tick { font-size: 15px; }
.chart--wide .chart__end { font-size: 15px; }
/* The figures of a chart, as a table, for whoever cannot read the drawing. */
.chart__data table { width: 100%; border-collapse: collapse; font-size: var(--text-12-5); font-variant-numeric: tabular-nums; }
.chart__data th, .chart__data td { padding: 4px 8px; border-bottom: 1px solid var(--color-border-soft); text-align: right; }
.chart__data th:first-child, .chart__data td:first-child { text-align: left; }
.chart__data thead th { color: var(--color-text-muted); font-weight: 600; }
.chart__end--ok { fill: var(--color-info); }
.chart__end--bad { fill: var(--color-required); }
.chart__line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart__line--ok { stroke: var(--color-info); }
.chart__line--bad { stroke: var(--color-required); }
.chart__dot { stroke: var(--color-surface); stroke-width: 2; }
.chart__dot--ok { fill: var(--color-info); }
.chart__dot--bad { fill: var(--color-required); }
/* A period under the pointer: its column lights up, and its figures show. */
.chart__hit { fill: transparent; }
.chart__hit:hover { fill: var(--color-border-soft); }

.stat-lists { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.stat-list__title { color: var(--color-heading); font-size: var(--text-15); font-weight: 600; }
.stat-list__empty { color: var(--color-text-muted); font-size: var(--text-13); }
.stat-list__more { align-self: flex-start; padding: 5px 12px; border-radius: var(--radius-md); background: var(--color-accent-bg); color: var(--color-accent-ink); font-size: var(--text-12-5); font-weight: 600; }
.stat-list__more:hover { text-decoration: none; }
.bar { display: flex; flex-direction: column; gap: 5px; }
.bar__line { display: flex; align-items: baseline; gap: 10px; }
.bar__label { flex-grow: 1; min-width: 0; overflow-wrap: anywhere; color: var(--color-text); font-size: var(--text-13); }
.bar__label--link { color: var(--color-text); font-weight: 500; text-decoration: underline; text-decoration-color: var(--color-border-strong); text-underline-offset: 3px; }
.bar__label--link:hover { color: var(--color-link); text-decoration-color: currentColor; }
.bar__count { color: var(--color-text-secondary); font-family: var(--font-mono); font-size: var(--text-12); font-weight: 700; }
.bar__track { display: block; width: 100%; height: 9px; }
.bar__fill { fill: var(--color-mark); }

/* A token in the dashboard's list: its name and state, then its use. */
.mini-token { display: flex; flex-direction: column; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid var(--color-border-soft); }
.mini-token__meta { color: var(--color-text-muted); font-size: var(--text-12); }

/* ---- rows -----------------------------------------------------------------------------
 * Lists drawn as tables: column names in small capitals, a rule between rows.
 */

.log__row { display: flex; align-items: baseline; gap: 12px; padding: 13px 24px; border-bottom: 1px solid var(--color-border-soft); font-size: var(--text-13); }
.log__row--head { align-items: center; min-height: 42px; padding-top: 0; padding-bottom: 0; border-bottom-color: var(--color-border); }
.log__row--head > span { color: var(--color-text-muted); font-family: var(--font-sans); font-size: var(--text-11-5); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }

/* A cell's column name: read by screen readers, shown when the list becomes cards. */
.cell-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Calls: a row each, which opens on its detail at full width. */
.call__row { align-items: center; }
.call > summary { list-style: none; cursor: pointer; }
.call > summary::-webkit-details-marker { display: none; }
.call > summary:hover { background: var(--color-surface-raised); }
.call[open] > summary { background: var(--color-bg-inset); }
.call__when { flex-shrink: 0; width: 150px; color: var(--color-text-muted); font-size: var(--text-12-5); }
.call__token { flex-shrink: 0; width: 150px; overflow: hidden; color: var(--color-text-secondary); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.call__what { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.call__tool { color: var(--color-text); font-weight: 600; }
.call__target { overflow: hidden; color: var(--color-text-muted); font-size: var(--text-12); text-overflow: ellipsis; white-space: nowrap; }
.call__status { display: flex; flex-shrink: 0; flex-direction: column; align-items: flex-start; gap: 3px; width: 190px; }
.call__reason { color: var(--color-text-muted); font-size: var(--text-12); line-height: 1.35; }
.call__ip { flex-shrink: 0; width: 140px; overflow: hidden; font-family: var(--font-mono); font-size: var(--text-12); text-overflow: ellipsis; white-space: nowrap; }
.call__country { flex-shrink: 0; width: 110px; }
.call__ms { flex-shrink: 0; width: 64px; color: var(--color-text-muted); font-size: var(--text-12-5); text-align: right; white-space: nowrap; }
.call__more { flex-shrink: 0; width: 14px; color: var(--color-text-muted); }
.call[open] .call__more .icon { transform: rotate(180deg); }
.call__detail {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 6px 16px;
  margin: 0;
  padding: 14px 24px 16px;
  border-bottom: 1px solid var(--color-border-soft);
  background: var(--color-surface-raised);
  font-size: var(--text-12-5);
}
.call__detail dt { color: var(--color-text-muted); }
.call__detail dd { margin: 0; color: var(--color-text); overflow-wrap: anywhere; }
.calls > .call:last-child:not([open]) > summary,
.calls > .call:last-child > .call__detail { border-bottom: 0; }
/* The full form, in the logs, as a grid: below 1500px, where the sidebar leaves the row too
   little room, the address and the country share a column, one above the other. */
.calls--full .call__row { display: grid; grid-template-areas: "when token what status ip country ms more"; grid-template-columns: 150px 150px minmax(0, 1fr) 180px 140px 110px 64px 14px; }
.calls--full .call__row > * { width: auto; }
.calls--full .call__when { grid-area: when; }
.calls--full .call__token { grid-area: token; }
.calls--full .call__what { grid-area: what; }
.calls--full .call__status { grid-area: status; }
.calls--full .call__ip { grid-area: ip; }
.calls--full .call__country { grid-area: country; }
.calls--full .call__ms { grid-area: ms; }
.calls--full .call__more { grid-area: more; }

/* The account's history: a row per action, as a grid. */
.history-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 90px 120px 150px 100px; align-items: center; }
.history-row__when { color: var(--color-text-muted); font-size: var(--text-12-5); }
.history-row__what { color: var(--color-text); font-weight: 500; overflow-wrap: anywhere; }
.history-row__type, .history-row__source { color: var(--color-text-secondary); }
.history-row__ip { overflow: hidden; font-family: var(--font-mono); font-size: var(--text-12); text-overflow: ellipsis; white-space: nowrap; }
.history-row:last-child { border-bottom: 0; }

/* Tokens: a row each, its box to tick it, the whole row a link to its page. The name's link
   stretches over the row; the box sits above it. */
.token-row { position: relative; align-items: center; }
.token-row:not(.log__row--head):hover { background: var(--color-surface-raised); }
.token-row:last-child { border-bottom: 0; }
.token-row__pick { position: relative; z-index: 1; display: flex; flex-shrink: 0; width: 18px; }
.token-row__pick input { width: 16px; height: 16px; margin: 0; accent-color: var(--color-accent); }
.token-row__name { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.token-row__title { overflow: hidden; color: var(--color-text); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.token-row__title::after { position: absolute; inset: 0; content: ""; }
.token-row__title:hover { text-decoration: none; }
.token-row:hover .token-row__title { color: var(--color-link); }
.token-bulk { gap: 8px; }
.token-bulk__count { color: var(--color-text); font-size: var(--text-12-5); font-weight: 600; }
/* The account's note about a token, on its page. */
.token-note { padding: 12px 16px; border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-text-secondary); font-size: var(--text-13-5); overflow-wrap: anywhere; }
.token-row__note { overflow: hidden; color: var(--color-text-secondary); font-size: var(--text-12-5); text-overflow: ellipsis; white-space: nowrap; }

/* A list's filters above it: chips for a state, then a search field. */
.list-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.list-filters__search { width: 280px; max-width: 100%; }
.list-filters__sort { display: inline-flex; align-items: center; gap: 8px; }
/* Where the column names sort the list, the select stays out of sight, still sent with a search. */
@media (min-width: 1280px) {
  .list-filters__sort { display: none; }
}
.segmented__count { margin-left: 4px; opacity: 0.75; font-weight: 500; }

/* A column name that sorts the list: an arrow shows the current order. */
.sort { color: inherit; }
.sort:hover { color: var(--color-text); text-decoration: none; }
.sort--asc::after { content: " ↑"; }
.sort--desc::after { content: " ↓"; }
.token-bulk .check { align-items: center; color: var(--color-text); font-weight: 600; }
.token-bulk .check input { margin: 0; }
.token-bulk__label { color: var(--color-text-muted); font-size: var(--text-12-5); }
.token-row__sub { display: block; color: var(--color-text-muted); font-size: var(--text-12); }
.token-row__state { display: flex; flex-shrink: 0; flex-wrap: wrap; gap: 4px; width: 120px; }
.token-row__used { flex-shrink: 0; width: 120px; }
.token-row__expires { flex-shrink: 0; width: 190px; }
.token-row__last { flex-shrink: 0; width: 170px; color: var(--color-text-muted); font-size: var(--text-12-5); }

/* ---- account and one token ------------------------------------------------------------ */

/* Panels of short content, two abreast when there is room, each row as tall as its taller. */
.account { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.account__panel { gap: 14px; }
.account__text { color: var(--color-text-secondary); font-size: var(--text-13-5); }
.account__text code { overflow-wrap: anywhere; }
.account__form { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.account__divider { height: 1px; background: var(--color-border-soft); }
.account__pending {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 8px 8px 8px 12px;
  border: 1px solid var(--color-accent-border);
  border-radius: var(--radius-md);
  background: var(--color-accent-bg);
  color: var(--color-accent-ink);
  font-size: var(--text-13);
}
.account__pending > span { flex: 1 1 220px; }
/* One more alert address: the address, its state, its button. */
.address-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; padding: 8px 8px 8px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--text-13); }
.address-row__email { flex: 1 1 200px; min-width: 0; color: var(--color-text); overflow-wrap: anywhere; }
.field__row { display: flex; align-items: center; gap: 8px; }
.field__row .input { flex-grow: 1; min-width: 0; }
.field__value .state { margin-left: 6px; }

/* Where the alerts go: one line, the addresses under "Gérer". */
.recipients > summary { list-style: none; }
.recipients > summary::-webkit-details-marker { display: none; }
.recipients__line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 14px 24px; cursor: pointer; }
.recipients__line > .icon { color: var(--color-info); }
.recipients__to { display: flex; flex: 1 1 260px; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; font-size: var(--text-13-5); }
.recipients__to strong { color: var(--color-text); font-weight: 600; overflow-wrap: anywhere; }
.recipients__more { color: var(--color-text-muted); }
.recipients[open] .recipients__line { border-bottom: 1px solid var(--color-border-soft); }
.recipients__body { padding: 18px 24px 22px; }
.recipients__body .split__part { gap: 14px; }

/* The alerts by what they tell, two groups abreast when there is room: four make a square. */
.alert-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.alert-group { gap: 12px; }
.toggles { display: flex; flex-direction: column; gap: 2px; }

/* A choice as a switch: the LWS blue when on, rather than nine orange boxes. */
.toggle { display: flex; align-items: flex-start; gap: 12px; padding: 7px 0; color: var(--color-text); font-size: var(--text-13-5); cursor: pointer; }
.toggle input {
  position: relative;
  flex-shrink: 0;
  width: 34px;
  height: 20px;
  margin: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-text-muted);
  cursor: pointer;
  appearance: none;
}
.toggle input::before { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--color-surface); content: ""; }
.toggle input:checked { background: var(--color-info); }
.toggle input:checked::before { left: 17px; }
@media (prefers-reduced-motion: no-preference) {
  .toggle input::before { transition: left 0.15s ease-out; }
}
.toggle__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 1px; }
.toggle__note { color: var(--color-text-muted); font-size: var(--text-12); }
.toggle__link { margin: -4px 0 4px 46px; color: var(--color-link); font-size: var(--text-12); text-decoration: underline; text-underline-offset: 2px; }
.toggle--always { color: var(--color-text-secondary); cursor: default; }
.toggle--always > .icon { width: 34px; color: var(--color-text-muted); }
.toggle--always .toggle__text { flex: 1 1 auto; }
.toggle__aside { flex-shrink: 0; padding-top: 2px; color: var(--color-text-muted); font-size: var(--text-12); }

/* A form's button under its cards, at the right. */
.form-bar { display: flex; justify-content: flex-end; }

/* The latest alerts: what they are about, when, what; and why the e-mail did not go, if it did not. */
.alert-list { margin: 0; padding: 0; list-style: none; }
.alert-item { display: flex; align-items: baseline; gap: 14px; padding: 12px 24px; border-bottom: 1px solid var(--color-border-soft); font-size: var(--text-13); }
.alert-item:last-child { border-bottom: 0; }
.alert-item__tag { flex-shrink: 0; width: 112px; }
.alert-item__when { flex-shrink: 0; width: 150px; color: var(--color-text-muted); font-size: var(--text-12-5); }
.alert-item__what { display: flex; flex-grow: 1; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; color: var(--color-text); overflow-wrap: anywhere; }
.tag { display: inline-block; padding: 2px 8px; border-radius: var(--radius-md); font-size: var(--text-11-5); font-weight: 600; }
.tag--usage { background: var(--color-warn-bg); color: var(--color-warn); }
.tag--tokens { background: var(--color-info-bg); color: var(--color-info); }
.tag--security { background: var(--color-violet-bg); color: var(--color-violet); }
.tag--report { background: var(--color-bg-inset); color: var(--color-text-secondary); }

/* Facts: a name, then its value in a firmer ink. */
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 22px; margin: 0; font-size: var(--text-13-5); }
.facts dt { color: var(--color-text-muted); }
.facts dd { margin: 0; color: var(--color-text); font-weight: 500; overflow-wrap: anywhere; }

.steps-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: step; font-size: var(--text-13-5); }
.steps-list li { display: flex; align-items: baseline; gap: 10px; color: var(--color-text-secondary); counter-increment: step; }
.steps-list li::before {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 11px;
  background: var(--color-accent-bg);
  color: var(--color-accent-ink);
  content: counter(step);
  font-size: var(--text-12);
  font-weight: 700;
}

.endpoint {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}
.endpoint__line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.endpoint__label { min-width: 13.5rem; color: var(--color-text-secondary); font-size: var(--text-12-5); font-weight: 600; }
.endpoint__url { min-width: 0; padding: 6px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-field); color: var(--color-text); font-size: var(--text-13); overflow-wrap: anywhere; }
.endpoint__hint { color: var(--color-text-muted); font-size: var(--text-12-5); }
.endpoint__hint a { color: var(--color-link); text-decoration: underline; text-underline-offset: 2px; }

/* A copy button: an icon, that turns into a tick once copied. */
.copy { width: 32px; height: 32px; }
.copy .icon--check { display: none; }
.copy--done { border-color: var(--color-ok); color: var(--color-ok); }
.copy--done .icon--copy { display: none; }
.copy--done .icon--check { display: block; }

/* A token's tools, by theme: each theme folds, a tool a line with its level. */
/* The theme's head is a shaded band in capitals; its tools, the rows beneath. */
.tool-group { border-bottom: 1px solid var(--color-border); }
.tool-group:last-child { border-bottom: 0; }
.tool-group__head { display: flex; align-items: center; gap: 10px; padding: 10px 24px; background: var(--color-bg-inset); list-style: none; cursor: pointer; }
.tool-group__head::-webkit-details-marker { display: none; }
.tool-group__head:hover { background: var(--color-surface-raised); }
.tool-group[open] > .tool-group__head { border-bottom: 1px solid var(--color-border); }
.tool-group__name { color: var(--color-heading); font-size: var(--text-12); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.tool-group__toggle { display: flex; margin-left: auto; color: var(--color-text-muted); }
.tool-group[open] .tool-group__toggle .icon { transform: rotate(180deg); }
.tool-list { margin: 0; padding: 2px 24px 4px; list-style: none; }
.tool-list__item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 9px 0; border-top: 1px solid var(--color-border-soft); font-size: var(--text-13); }
.tool-list__item:first-child { border-top: 0; }
.tool-list__label { flex: 1 1 220px; min-width: 0; color: var(--color-text-secondary); }
.level { flex-shrink: 0; padding: 1px 10px; border: 1px solid; border-radius: var(--radius-pill); font-size: var(--text-11-5); font-weight: 600; }
.level--read { border-color: var(--level-read-border); background: var(--level-read-bg); color: var(--level-read-fg); }
.level--write { border-color: var(--level-write-border); background: var(--level-write-bg); color: var(--level-write-fg); }
.level--sensitive { border-color: var(--level-sensitive-border); background: var(--level-sensitive-bg); color: var(--level-sensitive-fg); }
.level--billable { border-color: var(--level-billable-border); background: var(--level-billable-bg); color: var(--level-billable-fg); }

/* A token's addresses, as chips. */
.granted__list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.granted__list li { padding: 2px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-bg-inset); color: var(--color-text); font-size: var(--text-12-5); overflow-wrap: anywhere; }

/* What can be done with a token: a button and what it does, a line each. */
.manage-row { display: flex; align-items: center; gap: 14px; padding: 13px 24px; border-bottom: 1px solid var(--color-border-soft); }
.manage-row:last-child { border-bottom: 0; }
.manage-row form { margin: 0; }
.manage-row__form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.manage-row .button { min-width: 120px; }
.manage-row__help { color: var(--color-text-muted); font-size: var(--text-13); }

/* ---- the token form ------------------------------------------------------------------- */

.tools__quick { display: flex; flex-wrap: wrap; gap: 6px; }
.tools .settings__body { gap: 12px; }
.tools__group { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border: 1px solid var(--color-border-soft); border-radius: var(--radius-lg); }
.tools__group--sensitive { border-color: var(--color-warn-border); }
.tools__group--billable { border-color: var(--color-accent-border); background: var(--color-accent-bg); }
.tools__level { color: var(--color-text); font-size: var(--text-13); font-weight: 600; }
.tools__about { color: var(--color-text-muted); font-size: var(--text-12-5); }
.tools__warning { display: flex; align-items: center; gap: 7px; color: var(--color-warn); font-size: var(--text-12-5); }
.tools__group--billable .tools__warning { color: var(--color-accent-ink); }
.tools__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 8px 24px; margin: 0; padding: 0; list-style: none; }

/* ---- the token, shown once ------------------------------------------------------------ */

.secret__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.secret__value {
  flex: 1 1 320px;
  min-width: 0;
  padding: 10px 13px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-field);
  color: var(--color-text);
  font-size: var(--text-13-5);
  overflow-wrap: anywhere;
  -webkit-user-select: all;
  user-select: all;
}
.snippet__head { display: flex; align-items: center; gap: 10px; }

/* Two-factor setup: the QR code beside the key to type by hand. The code is drawn in black on a
   transparent ground, so it sits on white in both themes, with the quiet zone apps need. */
.totp { gap: 18px; }
.totp__setup { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.totp__qr { flex: none; width: 184px; height: 184px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: #fff; }
.totp__manual { display: flex; flex: 1 1 320px; flex-direction: column; gap: 8px; min-width: 0; }
.totp__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.totp__code { max-width: 280px; }

/* The consent: what is proposed and its buttons first; the settings most people keep, folded. */
.consent { flex-flow: row wrap; align-items: center; gap: 12px 20px; }
.consent__summary { flex: 1 1 320px; margin: 0; color: var(--color-text-secondary); font-size: var(--text-13-5); }
.consent__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.advanced > summary { width: fit-content; color: var(--color-link); font-size: var(--text-13-5); font-weight: 600; cursor: pointer; }
.advanced[open] > summary { margin-bottom: 18px; }
.advanced > .panel + .panel { margin-top: 18px; }

/* How to plug each assistant in: one folded part per client. */
.connect { display: flex; flex-direction: column; gap: 4px; }
.connect__lead, .connect__text { margin: 0; color: var(--color-text-secondary); font-size: var(--text-13-5); }
.connect__lead { margin-bottom: 6px; }
.connect__client { border-top: 1px solid var(--color-border); }
.connect__client > summary { padding: 12px 0; color: var(--color-heading); font-size: var(--text-14); font-weight: 600; cursor: pointer; }
.connect__client[open] { padding-bottom: 14px; }
.connect__client .code { margin-top: 8px; }
.connect__client .field__hint { margin-top: 8px; }
.connect code:not(.code) { font-family: var(--font-mono); font-size: var(--text-12-5); }
.connect__url { overflow-wrap: anywhere; }

/* Read as it will be copied: the command and the JSON scroll sideways rather than wrap. */
.code {
  margin: 0;
  padding: 14px 16px;
  overflow-x: auto;
  border-radius: var(--radius-lg);
  background: var(--color-code-bg);
  color: var(--color-code-ink);
  font-size: var(--text-12-5);
  line-height: 1.6;
  white-space: pre;
  user-select: all;
}
/* A dialog over the page: the report's e-mail, in a frame. */
.dialog { width: min(680px, calc(100vw - 24px)); height: min(820px, calc(100vh - 48px)); padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); color: var(--color-text-secondary); }
.dialog[open] { display: flex; flex-direction: column; }
.dialog::backdrop { background: var(--color-scrim); }
.dialog__head { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 18px; border-bottom: 1px solid var(--color-border); }
.dialog__title { flex: 1 1 auto; min-width: 0; color: var(--color-heading); font-size: var(--text-14); font-weight: 600; }
.dialog__frame { flex: 1 1 auto; width: 100%; border: 0; background: var(--color-bg); }
/* The question an irreversible action asks (portal.js), instead of the browser's own. */
.dialog--confirm { gap: 20px; width: min(460px, calc(100vw - 32px)); height: fit-content; padding: 24px; box-shadow: var(--shadow-menu); }
.dialog__message { color: var(--color-text); font-size: var(--text-14); line-height: 1.55; }
.dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

/* ---- sign-in and activation ----------------------------------------------------------- */

.signin { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 8vh 0 20px; }
.signin__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 400px;
  max-width: 100%;
  padding: 28px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}
.signin__title { color: var(--color-heading); font-size: var(--text-24); font-weight: 700; letter-spacing: -0.02em; }
.signin__lead { margin-bottom: 6px; color: var(--color-text-muted); font-size: var(--text-13-5); }
.signin__card .input { height: 42px; }
.signin__card .field { margin-bottom: 4px; }
.signin__submit { height: 42px; margin: 6px 0 4px; }
.signin__remember { margin: 2px 0; }
.signin__intro { display: flex; flex-direction: column; gap: 10px; width: 400px; max-width: 100%; padding: 0 4px; }
.signin__pitch { color: var(--color-heading); font-size: var(--text-15); font-weight: 600; }
.signin__text { color: var(--color-text-secondary); font-size: var(--text-13); }
.checks { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: var(--text-13); }
.checks li { display: flex; align-items: baseline; gap: 8px; }
.checks .icon { position: relative; top: 2px; color: var(--color-mark); }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps__item { padding: 16px 18px; border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); color: var(--color-text-muted); font-size: var(--text-13); counter-increment: step; }
.steps__item strong { display: block; color: var(--color-text); font-size: var(--text-13-5); }
.steps__item strong::before { content: counter(step) ". "; color: var(--color-mark); }
.steps__item code { color: var(--color-text); font-family: var(--font-mono); overflow-wrap: anywhere; }
/* The terms of use: numbered sections of points; in the activation form, in a box that scrolls. */
.terms__sections { display: flex; flex-direction: column; gap: 14px; margin: 0; padding-left: 22px; color: var(--color-heading); }
.terms__sections > li::marker { font-weight: 700; }
.terms h2 { margin: 0 0 4px; color: var(--color-heading); font-size: var(--text-14); font-weight: 600; }
.terms ul { display: flex; flex-direction: column; gap: 4px; margin: 0; padding-left: 18px; color: var(--color-text-secondary); font-size: var(--text-13); }
details.terms .terms__text { max-height: 320px; overflow-y: auto; padding: 4px 8px 4px 0; }
details.terms ul { font-size: var(--text-12-5); }

/* ---- small screens ---------------------------------------------------------------------
 * Below 1100px the sidebar moves into the drawer; below 1000px the lists become cards, a row a
 * block; below 760px — a phone — what sat side by side stacks. Nothing scrolls sideways but
 * the command and the JSON of a new token.
 */

/* The charts: one drawing per width (Chart::LAYOUTS). */
.chart--medium,
.chart--narrow { display: none; }

@media (max-width: 1500px) {
  .chart--wide { display: none; }
  .chart--medium { display: block; }
  .calls--full .call__row {
    grid-template-areas: "when token what status ip ms more" "when token what status country ms more";
    grid-template-columns: 130px 130px minmax(0, 1fr) 160px 140px 64px 14px;
    row-gap: 0;
  }
  .calls--full .call__ip { align-self: end; }
  .calls--full .call__country { align-self: start; color: var(--color-text-muted); font-size: var(--text-12); }
}

@media (max-width: 1280px) {
  .call__token { width: 120px; }
  .call__status { width: 170px; }
  .call__ip { width: 120px; }
}

/* Lists become cards below 1280px: beside the sidebar, their fixed columns would leave the name
   or the tool almost no room. */
@media (max-width: 1279px) {
  .log__row.log__row--head { display: none; }

  /* A history entry: when and how it ended, what it was, then its type, provenance and address. */
  .history-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 12px 16px; }
  .history-row__when { flex: 1 1 auto; order: 1; }
  .history-row__state { order: 1; }
  .history-row__what { flex-basis: 100%; order: 2; }
  .history-row__type, .history-row__source, .history-row__ip { order: 3; color: var(--color-text-muted); font-size: var(--text-12); }

  /* A call: when, its state and the arrow on a line; what it did; why it was refused; then its
     token, address and length. */
  .call__row,
  .calls--full .call__row:not(.log__row--head) { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 12px 16px; }
  .call__when { flex: 1 1 auto; order: 1; width: auto; }
  .call__status { display: contents; }
  .call__status .state { order: 2; }
  .call__more { order: 3; }
  .call__what { flex-basis: 100%; order: 4; }
  .call__reason { flex-basis: 100%; order: 5; color: var(--color-accent-ink); }
  .call__target { white-space: normal; overflow-wrap: anywhere; }
  .call__token, .call__ip, .call__country, .call__ms { order: 6; width: auto; color: var(--color-text-muted); font-size: var(--text-12); text-align: left; }
  .call__token { max-width: 100%; font-weight: 500; }
  .call__detail { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 12px 16px 14px; }
  .call__detail dd + dt { margin-top: 6px; }

  /* A token: its box, name and state on a line, then its figures, each named. */
  .token-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 3px 12px; padding: 13px 16px; }
  .token-row__pick { grid-column: 1; grid-row: 1; align-self: center; }
  .token-row__name { grid-column: 2; }
  .token-row__state { grid-column: 3; grid-row: 1; width: auto; }
  .token-row__used, .token-row__expires, .token-row__last { grid-column: 2 / -1; width: auto; color: var(--color-text-secondary); font-size: var(--text-12-5); }
  .token-row__expires .token-row__sub { display: inline; margin-left: 6px; }
  .token-row .cell-label, .history-row .cell-label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; margin-right: 6px; color: var(--color-text-muted); white-space: normal; }
}

@media (max-width: 1100px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar { display: none; }
  .drawer { display: block; }
  .topbar { padding: 0 var(--space-4); }
}

@media (max-width: 1000px) {
  .portal-main { padding: 24px 18px 36px; }
  .stat-lists, .steps, .split, .account, .alert-groups { grid-template-columns: minmax(0, 1fr); }
  .kpis--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-head { grid-template-areas: "crumbs" "title" "lead" "actions"; grid-template-columns: minmax(0, 1fr); }
  .page-head:has(.page-head__icon) { grid-template-areas: "crumbs crumbs" "icon title" "icon lead" "actions actions"; grid-template-columns: auto minmax(0, 1fr); }
  .page-head__actions { justify-content: flex-start; margin-top: 12px; }
  .page-head__actions .menu__panel { right: auto; left: 0; }
}

@media (max-width: 760px) {
  .topbar { gap: var(--space-2); padding: 0 var(--space-3); }
  .who { margin-left: 0; padding-left: var(--space-2); }
  .who__text, .who > .icon { display: none; }
  .status-pill { padding: 0 var(--space-2-5); }
  .brand--top .brand__logo { height: 26px; }

  .portal-main { gap: 16px; padding: 18px 12px 32px; }
  .page-head__title { min-height: 40px; font-size: var(--text-24); }
  .page-head__icon { width: 40px; height: 40px; }
  .panel--padded { padding: 18px 16px; }
  .panel__head, .panel__foot { flex-wrap: wrap; gap: 8px 10px; padding-inline: 16px; }
  .panel__foot { padding-block: 8px; }
  .panel__toolbar { padding: 10px 14px; }
  .log-filters > summary, .log-filters__form { padding-inline: 16px; }
  .panel__toolbar .select { flex: 1 1 100%; width: 100%; max-width: none; }
  .panel__empty, .panel__note { padding-inline: 16px; }
  .tool-group__head, .tool-list { padding-inline: 16px; }
  .chart--medium { display: none; }
  .chart--narrow { display: block; }
  .chart-head .spacer { flex-basis: 100%; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding: 14px; }
  .kpi__icon { width: 34px; height: 34px; margin-bottom: 10px; }
  .kpi__label { font-size: var(--text-12); }
  .kpi__value { font-size: 24px; }
  .kpi__value--text { font-size: 15px; }
  .empty { padding: 28px 18px; }
  .settings .panel__head, .settings__body { padding: 16px; }
  .field--short { flex: 1 1 100%; }
  .facts { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .facts dd + dt { margin-top: 8px; }
  .manage-row { flex-wrap: wrap; gap: 6px 12px; padding: 12px 16px; }
  .alert-item { flex-wrap: wrap; gap: 4px 12px; padding: 12px 16px; }
  .alert-item__tag, .alert-item__when { width: auto; }
  .alert-item__what { flex-basis: 100%; }
  .recipients__line, .recipients__body { padding-inline: 16px; }
  .usage { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label count" "gauge gauge" "reset reset"; gap: 4px 12px; }
  .usage__label { grid-area: label; }
  .usage__count { grid-area: count; }
  .usage__gauge { grid-area: gauge; }
  .usage__reset { grid-area: reset; }
  .token-bulk__label { flex-basis: 100%; }
  .manage-row__help { flex: 1 1 200px; }
  .signin { padding-top: 4vh; }

  /* Below 16px, iOS zooms on every field it focuses. */
  .input, .select { font-size: 16px; }
  /* Targets for a finger: 44px. */
  .input, .select, .button, .button--small, .choices--joined { min-height: 44px; }
  .choice, .segmented__item { min-height: 44px; }
  .icon-button, .flash__close { min-width: 44px; min-height: 44px; }
  .flash__close { margin-block: -8px; }
  .more > summary { display: flex; align-items: center; min-height: 44px; }
  .token-row__pick { width: 44px; height: 44px; margin: -13px 0 -13px -13px; justify-content: center; align-items: center; }
  .token-row__pick input { width: 20px; height: 20px; }
}

/* A folded phone, some 344px wide: the top bar tightens rather than push the page sideways. */
@media (max-width: 380px) {
  .status-pill { display: none; }
  .signin__card { padding: 20px; }
}