/*
 * Tekla ID — app layer on top of tokens.css and components.css.
 * Semantic tokens only; no new colors, sizes or shadows.
 */

:root {
  --font-sans: "Inter", "Inter Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Another company's mark keeps its own backdrop in both themes: Google asks for its G on white. */
  --color-mark-surface: var(--gray-0);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
/* biome-ignore lint/complexity/noImportantStyles: `hidden` must win over any component's display. */
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Lucide's stroke for every sprite icon ("i-") and status mark ("s-"), inherited through its <use>. */
use[href^="#i-"],
use[href^="#s-"] { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
/* The active mark is a filled circle (its own fill); the tick, stroked in the page's surface, reads as cut out of it. */
use[href="#s-active"] { stroke: var(--color-surface); }
code { overflow-wrap: anywhere; }

/* Only transform and opacity animate; colour changes on hover are instant, which keeps hover crisp. */
.btn { transition: transform var(--duration-fast) var(--ease-out); }
.btn--block { width: 100%; }
.btn[aria-busy="true"] { cursor: progress; }

/* Skip link: the first stop for keyboard users, out of sight until it's focused. */
.skip-link {
  position: fixed; top: var(--space-2); left: var(--space-2); z-index: var(--z-tooltip);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-primary); color: var(--color-primary-fg);
  font-weight: var(--weight-medium);
  transform: translateY(calc(-100% - var(--space-4)));
}
.skip-link:focus { transform: none; }
.skip-link:hover { color: var(--color-primary-fg); }
main:focus { outline: none; }

.empty__title { margin: 0; color: var(--color-text); }
.empty__text { margin: 0; max-width: 32ch; line-height: var(--leading-normal); }
/* ------------------------------------------------------------------ */
/* Card shell (signed-out pages, your account, errors)                 */
/* ------------------------------------------------------------------ */
.card-shell {
  min-height: 100vh;
  display: grid; place-items: center;
  padding: var(--space-8) var(--space-4);
  background: var(--color-bg-subtle);
}
.card-shell__inner { width: min(440px, 100%); display: grid; justify-items: center; gap: var(--space-6); }
/* The demo's token views need room for a decoded JWT. */
.card-shell__inner--wide { width: min(760px, 100%); }
.card-shell__head { display: flex; align-items: center; gap: var(--space-3); }
.card-shell__card { width: 100%; box-shadow: var(--shadow-sm); }
.card-shell__card .empty { padding: var(--space-8) var(--space-6); }
.card-shell__foot { margin: 0; max-width: 40ch; font-size: var(--text-xs); color: var(--color-text-tertiary); text-align: center; line-height: var(--leading-normal); }
.card-shell__foot p { margin: 0; }

/* A fade only: moving the card would move every control in it while it settles. */
@media (prefers-reduced-motion: no-preference) {
  .card-shell__inner { transition: opacity var(--duration-slow) var(--ease-out); }
  @starting-style {
    .card-shell__inner { opacity: 0; }
  }
}

.card-shell__body { display: grid; gap: var(--space-5); margin: 0; padding: var(--space-8); }
.card-head { display: grid; gap: var(--space-2); }
.card-head__sub { margin: 0; color: var(--color-text-secondary); line-height: var(--leading-normal); overflow-wrap: anywhere; }
.card-shell__body .banner { line-height: var(--leading-normal); }

/* A secondary section inside a card (the local dev login) */
.card-section { display: grid; gap: var(--space-3); padding: var(--space-6) var(--space-8) var(--space-8); border-top: 1px solid var(--color-border-subtle); }
.card-section__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.card-section__head .eyebrow { margin: 0; }
.card-section__hint { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-normal); }

@media (max-width: 480px) {
  /* Centred while the card fits; a taller card grows the row, so it starts at the top and scrolls. */
  .card-shell { min-height: 100dvh; padding: var(--space-6) var(--space-3); }
  .card-shell__body { padding: var(--space-6) var(--space-5); }
  .card-section { padding: var(--space-5); }
}


/* Disclosure: a native <details> with a quiet summary and a chevron that turns. Works without scripts. */
.disclosure > summary {
  display: flex; align-items: center; gap: var(--space-2);
  width: fit-content; padding: var(--space-1) 0;
  color: var(--color-text-secondary); font-size: var(--text-sm);
  cursor: pointer; list-style: none;
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::before {
  content: ""; width: 6px; height: 6px; margin: 0 var(--space-0-5);
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
}
@media (prefers-reduced-motion: no-preference) {
  .disclosure > summary::before { transition: transform var(--duration-base) var(--ease-out); }
}
.disclosure[open] > summary::before { transform: rotate(45deg); }
.disclosure > summary:hover { color: var(--color-text); }
.dev-more[open] > summary { margin-bottom: var(--space-2); }
/* ------------------------------------------------------------------ */
/* Sign-in                                                             */
/* ------------------------------------------------------------------ */
.google-g {
  display: grid; place-items: center;
  width: 22px; height: 22px; flex: none;
  border-radius: var(--radius-full);
  background: var(--color-mark-surface);
  box-shadow: var(--shadow-xs);
}
.google-g img { width: 14px; height: 14px; display: block; }
[data-sign-in] { margin: 0; }

@media (prefers-reduced-motion: no-preference) {
  .sign-in-error { animation: banner-in var(--duration-base) var(--ease-out); }
}
@keyframes banner-in { from { opacity: 0; } }

/* The local dev login's "Continue as…" list */
.choice-list { display: grid; gap: var(--space-0-5); margin: 0 calc(-1 * var(--space-2)); padding: 0; list-style: none; }
.choice-list form { margin: 0; }
.choice {
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%; padding: var(--space-2);
  border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--color-text);
  font: inherit; text-align: left; cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out);
}
.choice:hover { background: var(--color-bg-subtle); }
.choice:active { transform: scale(0.99); }
.choice__text { flex: 1; min-width: 0; display: grid; line-height: var(--leading-snug); }
.choice__text strong { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.choice__text > span { font-size: var(--text-xs); color: var(--color-text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.choice__end { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.choice--muted .choice__text strong { color: var(--color-text-tertiary); }
.card-section__hint--sub { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-text-tertiary); }

@media (max-width: 480px) {
  /* The state reads from the glyph alone; its word is kept for screen readers. */
  .choice__end .state { gap: 0; font-size: 0; }
}
/* ------------------------------------------------------------------ */
/* Large avatar and fact lists (your account, a person, the demo)      */
/* ------------------------------------------------------------------ */
.avatar--xl { --size: 48px; font-size: var(--text-md); }

.facts {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2) var(--space-4);
  margin: 0; padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md); background: var(--color-bg-subtle);
  font-size: var(--text-sm);
}
.facts dt { color: var(--color-text-tertiary); }
.facts dd { margin: 0; color: var(--color-text); min-width: 0; }
.facts code { font-family: var(--font-mono); font-size: var(--text-xs); }
.facts .meta { margin-left: var(--space-2); }
/* ------------------------------------------------------------------ */
/* App shell (signed-in pages)                                         */
/* ------------------------------------------------------------------ */
.sidebar__close, .topbar__menu, .topbar__brand { display: none; }
.me__name { font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me__sign-out { margin: 0 0 0 auto; }
.nav-item[aria-current="page"] .nav-item__count { color: var(--color-text-secondary); }
.topbar .breadcrumb { flex: 1; }
.topbar__end .badge { flex: none; }

/* Tabs that are links: the current one is underlined like a selected tab. */
a.tab { text-decoration: none; }
a.tab[aria-current="page"] { color: var(--color-text); }
a.tab[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--color-text); border-radius: 2px; }

.theme-icon--dark { display: none; }
:root[data-theme="dark"] .theme-icon--light { display: none; }
:root[data-theme="dark"] .theme-icon--dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-icon--light { display: none; }
  :root:not([data-theme="light"]) .theme-icon--dark { display: block; }
}

/* A refused action, at the top of the page it came back to. */
.flash { margin-bottom: var(--space-6); line-height: var(--leading-normal); }
@media (prefers-reduced-motion: no-preference) {
  .flash { animation: flash-in var(--duration-base) var(--ease-out); }
}
@keyframes flash-in { from { opacity: 0; } }

.scrim { display: none; }

/* Below 768px the sidebar is a drawer behind the menu button. Without scripts, the menu link targets it. */
@media (max-width: 768px) {
  .topbar__menu, .topbar__brand { display: inline-flex; }
  .topbar__brand { flex: 1; min-width: 0; }
  .sidebar {
    display: flex;
    position: fixed; inset: 0 auto 0 0; z-index: var(--z-dialog);
    width: min(288px, 85vw); height: 100dvh;
    border-right: 0;
    box-shadow: var(--shadow-lg);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform var(--duration-slow) var(--ease-out), visibility 0s linear var(--duration-slow);
  }
  .sidebar__close { display: inline-flex; }
  .app.is-drawer-open .sidebar, .sidebar:target {
    transform: none;
    visibility: visible;
    transition: transform var(--duration-slow) var(--ease-out), visibility 0s;
  }
  .scrim {
    display: block;
    position: fixed; inset: 0; z-index: var(--z-overlay);
    background: var(--color-overlay);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration-slow) var(--ease-out), visibility 0s linear var(--duration-slow);
  }
  .app.is-drawer-open .scrim, .sidebar:target ~ .scrim {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--duration-slow) var(--ease-out), visibility 0s;
  }
}

/* ------------------------------------------------------------------ */
/* Dialog (native <dialog>)                                            */
/* ------------------------------------------------------------------ */
dialog.dialog {
  padding: 0;
  color: var(--color-text);
  z-index: var(--z-dialog);
}
/* Without scripts the dialog is open in the page rather than modal: keep it above the content. */
dialog.dialog[open]:not(:modal) { position: fixed; inset: 0; margin: auto; height: fit-content; }
dialog.dialog::backdrop { background: var(--color-overlay); }
@media (prefers-reduced-motion: no-preference) {
  dialog.dialog[open] { animation: dialog-in var(--duration-base) var(--ease-out); }
  dialog.dialog[open]::backdrop { animation: backdrop-in var(--duration-base) var(--ease-out); }
}
@keyframes dialog-in { from { opacity: 0; transform: scale(0.98); } }
@keyframes backdrop-in { from { opacity: 0; } }
.dialog form { margin: 0; }
.dialog__text { margin: 0; color: var(--color-text-secondary); line-height: var(--leading-normal); }
.dialog__note { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-normal); }
.dialog__note > svg { width: var(--icon-sm); height: var(--icon-sm); flex: none; margin-top: 3px; color: var(--color-text-tertiary); }

/* ------------------------------------------------------------------ */
/* Toast                                                               */
/* ------------------------------------------------------------------ */
.toast-host {
  position: fixed; left: 50%; bottom: var(--space-6); z-index: var(--z-toast);
  width: max-content; max-width: calc(100vw - var(--space-8));
  transform: translateX(-50%);
  pointer-events: none;
}
.toast > svg { width: var(--icon-md); height: var(--icon-md); flex: none; }
.toast { opacity: 0; transform: translateY(8px); visibility: hidden; transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), visibility 0s linear var(--duration-base); }
.toast.is-on { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), visibility 0s; }
@starting-style {
  .toast.is-on { opacity: 0; transform: translateY(8px); }
}

/* A button whose form is on its way: a small spinner before the label, same width. */
.btn[aria-busy="true"] > svg { display: none; }
.btn[aria-busy="true"]::before {
  content: ""; width: 12px; height: 12px; flex: none;
  border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%;
}
@media (prefers-reduced-motion: no-preference) {
  .btn[aria-busy="true"]::before { animation: spin 0.7s linear infinite; }
}
@keyframes spin { to { transform: rotate(360deg); } }
.btn[disabled] { cursor: not-allowed; }

/* The sidebar's column, painted on the shell too, so it runs the full height of a long page (and its screenshots). */
@media (min-width: 769px) {
  .app { background: linear-gradient(to right, var(--color-bg-subtle) calc(var(--sidebar-width) - 1px), var(--color-border) 0 var(--sidebar-width), var(--color-bg) 0); }
}
/* ------------------------------------------------------------------ */
/* Signed-in pages: a person's header, sections, row lists             */
/* ------------------------------------------------------------------ */
.profile { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-6); }
.profile__text { flex: 1; min-width: 0; display: grid; gap: var(--space-1-5); }
.profile__text .title-1 { overflow-wrap: anywhere; }
.profile__sub { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin: 0; color: var(--color-text-secondary); }
.profile__sub > span:first-child { min-width: 0; max-width: 100%; overflow-wrap: break-word; }
.profile__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.profile__actions form { margin: 0; }

/* What an admin can't do on this page, and why. Shown before anyone tries. */
.blocked { display: grid; gap: var(--space-1); margin: calc(-1 * var(--space-2)) 0 var(--space-6); padding: 0; list-style: none; }
.blocked li { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-normal); }
.blocked svg { width: var(--icon-sm); height: var(--icon-sm); flex: none; margin-top: 3px; color: var(--color-text-tertiary); }

/* A section of a page: a card with a title, one line about it, and its content. */
.section { margin-bottom: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); overflow: hidden; }
.section__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border-subtle); }
.section__head form { margin: 0; }
.section__sub { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-normal); }
.section > .facts { margin: 0; padding: var(--space-4) var(--space-5); border-radius: 0; background: none; }
.section__empty .empty { padding: var(--space-6); }

/* Rows inside a section: an icon tile, a title with a quiet line under it, and an action or time on the right. */
.rows { margin: 0; padding: 0; list-style: none; }
.row { display: flex; align-items: center; gap: var(--space-3); min-height: 56px; padding: var(--space-2) var(--space-5); border-top: 1px solid var(--color-border-subtle); }
.row:first-child { border-top: 0; }
.row__icon { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: var(--radius-sm); background: var(--color-bg-muted); color: var(--color-text-secondary); }
.row__icon svg { width: var(--icon-md); height: var(--icon-md); }
.row__icon--warning { background: var(--tone-warning-bg); color: var(--tone-warning-fg); }
.row__icon--danger { background: var(--tone-danger-bg); color: var(--tone-danger-fg); }
.row__icon--success { background: var(--tone-success-bg); color: var(--tone-success-fg); }
.row__text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.row__text strong { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); font-weight: var(--weight-medium); }
.row__sub { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); font-size: var(--text-xs); color: var(--color-text-tertiary); }
.row__end { flex: none; margin: 0; white-space: nowrap; }
.list-empty { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-5); font-size: var(--text-sm); color: var(--color-text-tertiary); }
.list-empty svg { width: var(--icon-md); height: var(--icon-md); flex: none; }

/* ------------------------------------------------------------------ */
/* People                                                              */
/* ------------------------------------------------------------------ */
.list--people-id { --list-cols: minmax(0, 1fr) 112px 96px 132px 24px; }
.list--people-id .list__row:not(.list__row--head) { position: relative; }
/* The person's name is the row's link; it covers the whole row so anywhere on it opens their page. */
.row-link::after { content: ""; position: absolute; inset: 0; }
.row-link:focus-visible { outline: none; }
.list__row:has(.row-link:focus-visible) { box-shadow: inset 0 0 0 2px var(--color-accent); }
.row-chevron { width: var(--icon-md); height: var(--icon-md); color: var(--color-text-disabled); }
.list__row:hover .row-chevron { color: var(--color-text-tertiary); }
.toolbar__search { width: 320px; max-width: 100%; }
.toolbar__search .input { padding-right: var(--space-3); }

.pager { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); }
.pager__links { display: flex; gap: var(--space-2); margin-left: auto; }

/* ------------------------------------------------------------------ */
/* Audit log                                                           */
/* ------------------------------------------------------------------ */
.filters { align-items: flex-end; gap: var(--space-3); }
.filter { display: grid; gap: var(--space-1); }
.filter__label { font-size: var(--text-xs); color: var(--color-text-tertiary); font-weight: var(--weight-medium); }
.filter .select { width: 200px; height: var(--control-md); padding-right: var(--space-2); }
.filter--date .input { width: 150px; height: var(--control-md); }
.filters__actions { display: flex; gap: var(--space-2); align-items: center; }

.list--audit { --list-cols: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) 112px; }
.event { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.event__text { min-width: 0; display: grid; gap: 2px; }
.event__text strong { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); font-weight: var(--weight-medium); }
.event__note { font-size: var(--text-xs); color: var(--color-text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-people { display: grid; gap: 2px; min-width: 0; font-size: var(--text-sm); }
.event-people a { color: var(--color-text); }
.event-people__by { font-size: var(--text-xs); color: var(--color-text-tertiary); }
.event-people__by a { color: var(--color-text-secondary); }
.event-origin { display: grid; gap: 2px; min-width: 0; font-size: var(--text-sm); color: var(--color-text-secondary); }
.event-origin > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 1080px) {
  .list--audit { --list-cols: minmax(0, 1.2fr) minmax(0, 1fr) 96px; }
  .list--audit .hide-sm { display: none; }
}
@media (max-width: 768px) {
  .list--people-id { --list-cols: minmax(0, 1fr) auto; }
  .list--people-id .hide-sm, .list--people-id .list__row--head { display: none; }
  .list--people-id .who__sub > :not(:first-child) { display: none; }
  .list--audit { --list-cols: minmax(0, 1fr) auto; }
  .list--audit .list__row--head { display: none; }
  .list--audit .list__row { row-gap: var(--space-1); padding-top: var(--space-3); padding-bottom: var(--space-3); }
  .list--audit .event { grid-column: 1; grid-row: 1; }
  .list--audit time { grid-column: 2; grid-row: 1; align-self: start; }
  .list--audit .event-people { grid-column: 1 / -1; grid-row: 2; padding-left: calc(32px + var(--space-3)); }
  .filters { display: grid; grid-template-columns: 1fr 1fr; }
  .filter .select, .filter--date .input { width: 100%; }
  .filter:not(.filter--date) { grid-column: 1 / -1; }
  .filters__actions { grid-column: 1 / -1; }
  .toolbar__search { width: auto; flex: 1; }
  .section__head, .row { padding-left: var(--space-4); padding-right: var(--space-4); }
  .section > .facts { padding: var(--space-4); grid-template-columns: minmax(0, 1fr); gap: var(--space-0-5); }
  .section > .facts dd + dt { margin-top: var(--space-2); }
  .profile--actions .profile__actions { width: 100%; }
  .row { flex-wrap: wrap; }
  .row form.row__end { margin-left: calc(32px + var(--space-3)); }
}

/* A section whose action can't be undone (replacing a compromised signing key): set apart by its border only. */
.section--danger { border-color: var(--tone-danger-border); }
.section--danger .section__head { border-bottom: 0; }
.key-row__title { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-width: 0; }
/* ------------------------------------------------------------------ */
/* Apps: the app mark, the apps list, the register form, consent       */
/* ------------------------------------------------------------------ */
.app-tile {
  --size: 32px;
  display: inline-grid; place-items: center;
  width: var(--size); height: var(--size); flex: none;
  border-radius: var(--radius-sm);
  background: var(--color-accent-subtle); color: var(--color-accent);
  box-shadow: inset 0 0 0 1px var(--color-border-subtle);
  font-size: calc(var(--size) * 0.44); font-weight: var(--weight-semibold); line-height: 1;
}
.list__row--muted .app-tile { background: var(--color-bg-muted); color: var(--color-text-tertiary); }
.app-tile--lg { --size: 40px; border-radius: var(--radius-md); }
.app-tile--xl { --size: 48px; border-radius: var(--radius-md); }

.mono-sub, .input.mono { font-family: var(--font-mono); }
.mono-sub { font-size: var(--text-xs); }
.profile__sub .mono-sub { font-size: var(--text-sm); }

.list--apps { --list-cols: minmax(0, 1fr) 96px 168px 72px 112px 24px; }
/* The segmented control, as links that filter a list (the design system's is buttons). */
.segmented--links a {
  display: inline-flex; align-items: center; height: var(--control-sm); padding: 0 var(--space-3);
  border-radius: calc(var(--radius-sm) - 1px); color: var(--color-text-secondary); font-size: var(--text-sm); font-weight: var(--weight-medium); text-decoration: none;
}
.segmented--links a:hover { color: var(--color-text); }
.segmented--links a[aria-current="page"] { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-sm); }
.segmented--links a:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 1px; }
.tabs + .toolbar { margin-top: var(--space-4); }
.segmented--links a svg { width: var(--icon-sm); height: var(--icon-sm); margin-right: var(--space-1-5); }
.kind-switch { margin-bottom: var(--space-6); }
.toolbar + .list { margin-top: var(--space-3); }
.list--apps .list__row:not(.list__row--head) { position: relative; }
.tabs + .list { margin-top: var(--space-4); }
.list--apps .list__row:has(.row-link:focus-visible) { box-shadow: inset 0 0 0 2px var(--color-accent); }

.page-banner { margin-bottom: var(--space-6); }
/* A quiet label between two groups of rows in one section, such as apps and Claude connectors. */
.rows__heading { margin: 0; padding: var(--space-4) var(--space-5) var(--space-2); border-top: 1px solid var(--color-border-subtle); }
.rows__heading + .rows > .row:first-child { border-top: 0; }
.connector__client { color: var(--color-text-secondary); }
.rows__more { margin: 0; padding: var(--space-3) var(--space-5); border-top: 1px solid var(--color-border-subtle); }
.row .avatar--lg { flex: none; }
.row .app-tile { flex: none; }

/* Facts that are values to copy into an app's configuration. */
.copyable { display: flex; align-items: center; gap: var(--space-1); min-width: 0; }
.copyable code { overflow-wrap: anywhere; }
.copyable .btn { flex: none; margin: calc(-1 * var(--space-1)) 0; }
.badges { display: flex; flex-wrap: wrap; gap: var(--space-1-5); }
.uri-list { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.uri-list code { overflow-wrap: anywhere; }
.facts--plain { padding: 0; background: none; }

/* An MCP resource's scopes, each with what it lets Claude do. */
.scope-list { display: grid; gap: var(--space-1-5); margin: 0; padding: 0; list-style: none; }
.scope-list li { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.scope-list span:not(.badge) { color: var(--color-text-secondary); }

/* Claude clients: a long client id stays on one line, and who allowed it shows as overlapping avatars. */
.client-id { max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row--muted .row__text strong, .row--muted .app-tile { color: var(--color-text-tertiary); }
.row--muted .app-tile { background: var(--color-bg-muted); }
.people-stack { display: inline-flex; align-items: center; flex: none; }
.people-stack .avatar { box-shadow: 0 0 0 2px var(--color-surface); }
.people-stack .avatar + .avatar { margin-left: calc(var(--space-1-5) * -1); }
.people-stack__more { margin-left: var(--space-1-5); font-size: var(--text-xs); color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }

/* The secret, shown once */
.secret { display: flex; align-items: center; gap: var(--space-2); }
.secret__value { flex: 1; min-width: 0; font-size: var(--text-sm); }

/* The register and edit form */
.app-form { margin: 0; }
.form-body { display: grid; gap: var(--space-5); padding: var(--space-5); }
.form-body .field { max-width: 640px; }
.field__optional { margin-left: var(--space-1-5); font-weight: var(--weight-regular); color: var(--color-text-tertiary); font-size: var(--text-xs); }
.field__value { margin: 0; font-size: var(--text-sm); }
.field__value code, .field__hint code, .section__sub code { font-family: var(--font-mono); font-size: 0.92em; }
.textarea[aria-invalid="true"] { border-color: var(--tone-danger-solid); }
.form-note { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); }
.form-errors { margin-bottom: var(--space-6); }
/* Focused on arrival so a screen reader starts there; it isn't something to click. */
.form-errors:focus { outline: none; }
.form-errors ul { margin: var(--space-1) 0 0; padding-left: var(--space-4); }
.form-errors li + li { margin-top: var(--space-0-5); }
.form-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-bottom: var(--space-6); }

/* Two exclusive choices with a sentence each: radio cards. */
.choice-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); max-width: 640px; margin: 0; padding: 0; border: 0; }
.choice-card {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  background: var(--color-surface); cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.choice-card:hover { border-color: var(--color-text-disabled); }
.choice-card:has(input:checked) { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent); }
.choice-card:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--color-focus-ring); }
.choice-card input { margin: 3px 0 0; accent-color: var(--color-accent); }
.choice-card__text { display: grid; gap: var(--space-1); font-size: var(--text-sm); line-height: var(--leading-normal); }
.choice-card__text strong { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-medium); }
.choice-card__text > span { color: var(--color-text-secondary); }
/* The public key only matters for apps that sign in with one. */
.app-form:has([data-auth-secret]:checked) .field--key { display: none; }

.check { display: flex; align-items: flex-start; gap: var(--space-3); max-width: 640px; font-size: var(--text-sm); cursor: pointer; }
.check input { margin: 3px 0 0; accent-color: var(--color-accent); }
.check > span { display: grid; gap: var(--space-1); }
.check strong { font-weight: var(--weight-medium); }
.check__hint { color: var(--color-text-secondary); line-height: var(--leading-normal); }

/* Consent */
.consent__apps { display: flex; justify-content: center; }
.consent .card-head { text-align: center; }
/* A client names itself when it registers, at any length: a long name wraps rather than pushing Allow off the page. */
.consent .card-head .title-2 { overflow-wrap: anywhere; }
.consent__account {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
}
.consent__who { display: grid; min-width: 0; font-size: var(--text-sm); line-height: var(--leading-snug); }
.consent__who strong { font-weight: var(--weight-medium); }
.consent__who span { color: var(--color-text-tertiary); font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; }
.consent__section { display: grid; gap: var(--space-2); }
.consent__section .eyebrow { margin: 0; }
.consent__list { display: grid; gap: var(--space-2); margin: 0 0 var(--space-2); padding: 0; list-style: none; font-size: var(--text-sm); }
.consent__list li { display: flex; align-items: center; gap: var(--space-2); }
.consent__list svg { width: var(--icon-md); height: var(--icon-md); flex: none; color: var(--tone-success-fg); }
.consent__list--muted li { color: var(--color-text-secondary); }
.consent__list--muted svg { color: var(--color-text-tertiary); }
.consent__scope-list { display: flex; flex-wrap: wrap; gap: var(--space-1-5); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.consent__scope-list code { font-family: var(--font-mono); font-size: var(--text-xs); }
.consent__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin: 0; }
/* A Claude client and the resource it asks for, side by side. */
.consent__apps--pair { align-items: center; gap: var(--space-2); }
.consent__arrow { width: var(--icon-md); height: var(--icon-md); color: var(--color-text-tertiary); }
.consent--connector .card-head h1 strong { font-weight: inherit; }
.consent--connector .card-head__sub strong { font-weight: var(--weight-medium); color: var(--color-text); }
.consent__note {
  display: flex; align-items: flex-start; gap: var(--space-2); margin: 0 0 var(--space-2);
  font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--color-text-secondary);
}
.consent__note svg { width: var(--icon-sm); height: var(--icon-sm); flex: none; margin-top: 2px; color: var(--color-text-tertiary); }
.consent__client-id { margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--color-text-tertiary); overflow-wrap: anywhere; }
.consent__client-id code { font-family: var(--font-mono); }

@media (max-width: 1080px) {
  .list--apps { --list-cols: minmax(0, 1fr) 96px 72px 112px 24px; }
  .list--apps .hide-md { display: none; }
}
@media (max-width: 768px) {
  /* A row's text takes the line; what ends it ("Sign out of this app", when someone signed in) goes under it, in line
     with the text, rather than squeezing the address. */
  :is([data-apps], [data-people-signed-in], [data-client-people], [data-clients]) .row__text { flex: 1 1 calc(100% - 32px - var(--space-3)); }
  :is([data-apps], [data-people-signed-in], [data-client-people], [data-clients]) .row__sub > span { overflow-wrap: anywhere; }
  :is([data-people-signed-in], [data-client-people], [data-clients]) .row__end { margin-left: calc(32px + var(--space-3)); }
  .list--apps { --list-cols: minmax(0, 1fr) auto; }
  .list--apps .hide-sm, .list--apps .list__row--head { display: none; }
  .choice-cards { grid-template-columns: minmax(0, 1fr); }
  .form-body { padding: var(--space-4); }
  .form-actions .btn { flex: 1; }
  .secret { flex-wrap: wrap; }
}

/* The app an audit event is about, inside its quiet note line: a link that reads as one. */
.event__app a { color: var(--color-text-secondary); text-decoration: underline; text-decoration-color: var(--color-border-strong); text-underline-offset: 2px; }
.event__app a:hover { color: var(--color-text); }
/* A name linked inside a fact ("Registered 1 Oct by Mette Holm") reads as a link without relying on colour. */
.facts dd a { text-decoration: underline; text-decoration-color: var(--color-border-strong); text-underline-offset: 2px; }
/* ------------------------------------------------------------------ */
/* Exchange rules and service identities                               */
/* ------------------------------------------------------------------ */
.list--rules { --list-cols: minmax(0, 1fr) 96px minmax(0, 0.7fr) 132px 112px 24px; }
.list--services { --list-cols: minmax(0, 1fr) 96px minmax(0, 0.8fr) 56px 112px 24px; }
.list--rules .list__row:not(.list__row--head), .list--services .list__row:not(.list__row--head) { position: relative; }

/* A rule's two apps: the caller, an arrow, the app it calls. */
.rule-pair { display: inline-flex; align-items: center; gap: var(--space-1); flex: none; }
.rule-pair__arrow { width: var(--icon-sm); height: var(--icon-sm); color: var(--color-text-tertiary); }
.profile .rule-pair .app-tile { --size: 40px; border-radius: var(--radius-md); }
.list__row--muted .rule-pair__arrow { color: var(--color-text-disabled); }

/* A service identity's mark: a job, not a person or an app. */
.service-tile {
  --size: 32px;
  display: inline-grid; place-items: center; flex: none;
  width: var(--size); height: var(--size);
  border-radius: var(--radius-sm);
  background: var(--color-bg-muted); color: var(--color-text-secondary);
  box-shadow: inset 0 0 0 1px var(--color-border-subtle);
}
.service-tile svg { width: calc(var(--size) * 0.5); height: calc(var(--size) * 0.5); }
.service-tile--xl { --size: 48px; border-radius: var(--radius-md); }
.list__row--muted .service-tile { color: var(--color-text-tertiary); }
.service-apps { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm); }

/* Scope checkboxes: the scope in mono, its words under it. */
.scope-checks { display: grid; gap: var(--space-2); }
.check--scope code { font-family: var(--font-mono); font-size: var(--text-sm); }
.field--error .scope-checks { padding-left: var(--space-3); border-left: 2px solid var(--tone-danger-solid); }

/* Service identity access: one block per app, its scopes indented under it. */
.grant-list { display: grid; gap: var(--space-3); max-width: 640px; }
.grant { margin: 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.grant:has(input:checked) { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent); }
/* A floated legend sits inside the box rather than on its border. */
.grant__app { float: left; width: 100%; display: flex; align-items: center; gap: var(--space-3); padding: 0; font-size: var(--text-sm); }
.grant__app > span:last-child { display: grid; gap: 2px; min-width: 0; }
.grant__app strong { font-weight: var(--weight-medium); }
.grant__app .mono-sub { color: var(--color-text-tertiary); overflow-wrap: anywhere; }
.grant__scopes { clear: both; display: grid; gap: var(--space-2); padding-top: var(--space-3); padding-left: calc(32px + var(--space-3)); }

/* What a job sends for a token: the form fields, one per line. */
.request-snippet { margin: 0; padding: var(--space-3); border-radius: var(--radius-sm); background: var(--color-bg-subtle); font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--leading-normal); white-space: pre-wrap; overflow-wrap: anywhere; }
[data-access] .row__sub .mono-sub { overflow-wrap: anywhere; }
.key-id { font-weight: var(--weight-medium); overflow-wrap: anywhere; }
.add-key { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--color-border-subtle); }
.add-key__form { display: grid; gap: var(--space-3); margin-top: var(--space-3); max-width: 640px; }

@media (max-width: 1080px) {
  .list--rules { --list-cols: minmax(0, 1fr) 96px minmax(0, 0.7fr) 112px 24px; }
  .list--services { --list-cols: minmax(0, 1fr) 96px minmax(0, 0.8fr) 112px 24px; }
  .list--rules .hide-md, .list--services .hide-md { display: none; }
}
@media (max-width: 768px) {
  .list--rules, .list--services { --list-cols: minmax(0, 1fr) auto; }
  .list--rules .hide-sm, .list--rules .list__row--head, .list--services .hide-sm, .list--services .list__row--head { display: none; }
  .list--rules .rule-pair { display: none; }
  .grant__scopes { padding-left: 0; }
  /* A service identity's scopes go under the app on a phone, rather than over its address. */
  [data-access] .row__text { flex: 1 1 calc(100% - 32px - var(--space-3)); }
  [data-access] .row__end { margin-left: calc(32px + var(--space-3)); }
  .add-key { padding-left: var(--space-4); padding-right: var(--space-4); }
}
.rule-default { font-size: var(--text-sm); }