@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root {
  --concrete-50: #F5F2EB;
  --concrete-100: #EAE5DA;
  --concrete-200: #D8D1C2;
  --concrete-300: #BEB4A1;
  --concrete-400: #978C78;
  --concrete-500: #6F6557;
  --concrete-600: #524A3F;
  --concrete-700: #393229;
  --concrete-800: #25201A;
  --concrete-900: #15110C;

  --outremer-50: #E6ECF3;
  --outremer-100: #C3D2E2;
  --outremer-300: #6E92B6;
  --outremer-500: #2E5A8C;
  --outremer-600: #244B77;
  --outremer-700: #1C3C60;
  --outremer-900: #122740;

  --ocre-100: #F1E2BE;
  --ocre-300: #DEBE72;
  --ocre-500: #C8922A;
  --ocre-700: #9A6E1C;

  --terre-100: #ECD3C4;
  --terre-300: #C99373;
  --terre-500: #9E5535;
  --terre-700: #743A22;

  --vermillon-100: #EFCDC4;
  --vermillon-300: #D58066;
  --vermillon-500: #B23A28;
  --vermillon-700: #832519;

  --vert-100: #D8DEC4;
  --vert-300: #97A06B;
  --vert-500: #5E6B3C;
  --vert-700: #424D29;

  --surface-page: var(--concrete-50);
  --surface-card: #FBFAF6;
  --surface-raised: #FFFFFF;
  --surface-sunken: var(--concrete-100);
  --surface-inverse: var(--concrete-900);
  --surface-accent: var(--outremer-500);

  --text-strong: var(--concrete-900);
  --text-body: var(--concrete-800);
  --text-muted: var(--concrete-500);
  --text-faint: var(--concrete-400);
  --text-inverse: var(--concrete-50);
  --text-accent: var(--outremer-600);
  --text-on-accent: #FBFAF6;

  --line-hairline: var(--concrete-300);
  --line-strong: var(--concrete-900);
  --line-accent: var(--outremer-500);
  --line-soft: var(--concrete-200);

  --brand-primary: var(--outremer-500);
  --brand-ocre: var(--ocre-500);
  --brand-terre: var(--terre-500);
  --brand-vermillon: var(--vermillon-500);
  --brand-vert: var(--vert-500);

  --status-success: var(--vert-500);
  --status-success-bg: var(--vert-100);
  --status-warning: var(--ocre-500);
  --status-warning-bg: var(--ocre-100);
  --status-danger: var(--vermillon-500);
  --status-danger-bg: var(--vermillon-100);
  --status-info: var(--outremer-500);
  --status-info-bg: var(--outremer-100);

  --focus-ring: var(--ocre-500);

  --font-display: 'Archivo Expanded', 'Archivo', system-ui, sans-serif;
  --font-sans: 'Archivo', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  --text-display: 64px;
  --text-h1: 44px;
  --text-h2: 32px;
  --text-h3: 24px;
  --text-h4: 19px;
  --text-lg: 17px;
  --text-base: 15px;
  --text-sm: 13px;
  --text-xs: 12px;
  --text-micro: 11px;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-label: 0.14em;

  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 96px;
  --space-11: 128px;

  --grid-unit: 8px;
  --gutter: 24px;
  --container-max: 1280px;
  --sidebar-width: 248px;
  --topbar-height: 56px;

  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-pill: 999px;

  --border-hairline: 1px;
  --border-strong: 2px;
  --border-heavy: 3px;

  --shadow-none: none;
  --shadow-flat: 0 1px 0 rgba(21, 17, 12, 0.06);
  --shadow-hard: 3px 3px 0 rgba(21, 17, 12, 0.10);
  --shadow-panel: 0 2px 8px rgba(21, 17, 12, 0.08);
  --shadow-pop: 6px 6px 0 rgba(21, 17, 12, 0.14);
  --shadow-modal: 0 24px 60px rgba(21, 17, 12, 0.28);
  --scrim: rgba(21, 17, 12, 0.45);

  --ease-standard: cubic-bezier(0.2, 0, 0.1, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;
}

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

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

body {
  margin: 0 auto;
  padding: var(--space-7) var(--space-6) var(--space-8);
  max-width: var(--container-max);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-sans);
  color: var(--text-strong);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }

p, ul, ol {
  margin: 0 0 var(--space-4);
}

ul, ol {
  padding-left: var(--space-6);
}

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

a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

::selection {
  background: var(--ocre-300);
  color: var(--concrete-900);
}

:focus-visible {
  outline: var(--border-strong) solid var(--focus-ring);
  outline-offset: 2px;
}

hr {
  border: 0;
  border-top: var(--border-hairline) solid var(--line-hairline);
  margin: var(--space-6) 0;
}

.lc-label {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
  font-weight: var(--weight-medium);
}

.layout {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  align-items: start;
}

.grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

.card-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.hero {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-6);
  align-items: end;
  margin-bottom: var(--space-6);
}

.title-row {
  display: flex;
  gap: var(--space-4);
  align-items: center;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.card {
  border: var(--border-hairline) solid var(--line-hairline);
  border-radius: var(--radius-sm);
  padding: var(--space-6);
  background: var(--surface-card);
  box-shadow: var(--shadow-flat);
}

.card:hover {
  box-shadow: var(--shadow-hard);
}

.card h2, .card h3 {
  margin-bottom: var(--space-4);
}

.auth-shell {
  max-width: 56rem;
  margin: 0 auto;
}

.auth-card {
  margin-top: var(--space-5);
}

.auth-card-primary {
  border-color: var(--line-accent);
  margin-bottom: var(--space-6);
}

.auth-secondary-grid {
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.banner {
  margin-bottom: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-left: var(--border-heavy) solid var(--line-accent);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text-body);
}

.banner.success,
.banner.info {
  background: var(--status-success-bg);
  color: var(--status-success);
  border-left-color: var(--status-success);
}

.banner.error,
.banner.warn,
.banner.warning {
  background: var(--status-danger-bg);
  color: var(--status-danger);
  border-left-color: var(--status-danger);
}

.banner.warning,
.banner.warn {
  background: var(--status-warning-bg);
  color: var(--status-warning);
  border-left-color: var(--status-warning);
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.nav a,
.nav button {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}

.nav a.active,
.nav a[aria-current="page"] {
  color: var(--text-strong);
  border-bottom: var(--border-strong) solid var(--line-accent);
  text-decoration: none;
}

button,
.button,
a.button,
span.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border: var(--border-strong) solid var(--line-accent);
  border-radius: var(--radius-sm);
  background: var(--brand-primary);
  color: var(--text-on-accent);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
  text-decoration: none;
}

button:hover,
.button:hover,
a.button:hover,
span.button:hover {
  background: var(--outremer-600);
  border-color: var(--outremer-600);
  text-decoration: none;
}

button:active,
.button:active,
a.button:active,
span.button:active {
  transform: translate(1px, 1px);
}

button.secondary,
.button.secondary {
  background: var(--surface-raised);
  color: var(--text-strong);
  border-color: var(--line-hairline);
}

button.secondary:hover,
.button.secondary:hover {
  background: var(--surface-sunken);
  border-color: var(--line-hairline);
}

button.warn,
.button.warn,
.button.danger {
  background: var(--status-danger);
  border-color: var(--status-danger);
}

button.warn:hover,
.button.warn:hover,
.button.danger:hover {
  background: var(--vermillon-700);
  border-color: var(--vermillon-700);
}

button[disabled],
.button.disabled,
button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.button-row,
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

input,
select,
textarea {
  width: 100%;
  margin-top: var(--space-2);
  padding: var(--space-4);
  border: var(--border-hairline) solid var(--line-hairline);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text-body);
  font: inherit;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--line-accent);
  box-shadow: inset 0 0 0 2px var(--focus-ring);
}

textarea {
  min-height: 7rem;
  resize: vertical;
}

label {
  display: block;
  margin-top: var(--space-4);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
}

.muted {
  color: var(--text-muted);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--text-strong);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
}

.pill.admin,
.pill.oidc,
.pill.granted,
.pill.enabled {
  background: var(--status-info-bg);
  color: var(--status-info);
}

.pill.user,
.pill.forwardauth,
.pill.revoked,
.pill.disabled {
  background: var(--surface-sunken);
  color: var(--text-muted);
}

.pill.api {
  background: var(--ocre-100);
  color: var(--ocre-700);
}

.pill.success,
.pill.enabled {
  background: var(--status-success-bg);
  color: var(--status-success);
}

.pill.warning,
.pill.warn {
  background: var(--status-warning-bg);
  color: var(--status-warning);
}

.pill.danger,
.pill.disabled {
  background: var(--status-danger-bg);
  color: var(--status-danger);
}

img.icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-sm);
  object-fit: cover;
  border: var(--border-hairline) solid var(--line-hairline);
}

.filters {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  margin-bottom: var(--space-5);
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-4);
}

th, td {
  padding: var(--space-4) var(--space-5);
  border-bottom: var(--border-hairline) solid var(--line-soft);
  text-align: left;
  vertical-align: top;
}

th {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--surface-raised);
}

.matrix th.rotate {
  min-width: 3rem;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.matrix td {
  text-align: center;
}

.matrix .user-cell {
  min-width: 16rem;
  text-align: left;
}

.field-validation-error {
  display: block;
  margin-top: var(--space-2);
  color: var(--status-danger);
}

.summary,
.hint {
  display: block;
  margin-top: var(--space-2);
  color: var(--text-muted);
}

form.inline {
  display: inline-block;
}

button.full {
  width: 100%;
  margin-top: var(--space-5);
}

.audit-details summary {
  cursor: pointer;
  color: var(--text-accent);
  font-weight: var(--weight-semibold);
}

.audit-details code {
  display: block;
  margin-top: var(--space-3);
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

@media (max-width: 48rem) {
  table.responsive-table,
  table.responsive-table thead,
  table.responsive-table tbody,
  table.responsive-table tr,
  table.responsive-table th,
  table.responsive-table td {
    display: block;
    width: 100%;
  }

  table.responsive-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  table.responsive-table tr {
    border-bottom: var(--border-hairline) solid var(--line-hairline);
    padding: var(--space-4) 0;
  }

  table.responsive-table td {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: var(--space-3);
    border-bottom: 0;
  }

  table.responsive-table td::before {
    content: attr(data-label);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--text-muted);
  }
}

@media (max-width: 42rem) {
  .auth-shell {
    max-width: none;
  }

  .auth-secondary-grid {
    grid-template-columns: 1fr;
  }

  .auth-shell button,
  .auth-shell .button {
    width: 100%;
  }
}

/* ==========================================================================
   Global application shell — topbar, brand, nav, footer (Le Corbusier topbar)
   ========================================================================== */

.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -3rem;
  z-index: 100;
  padding: var(--space-3) var(--space-5);
  background: var(--outremer-500);
  color: var(--text-on-accent);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  transition: top var(--dur-fast) var(--ease-out);
}

.skip-link:focus {
  top: var(--space-3);
  text-decoration: none;
}

.app-header {
  margin-bottom: var(--space-6);
  border-bottom: var(--border-strong) solid var(--line-strong);
}

.app-header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  padding-bottom: var(--space-4);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-strong);
  text-decoration: none;
  margin-right: auto;
}

.brand:hover {
  text-decoration: none;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: var(--outremer-500);
  color: var(--text-on-accent);
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  border-radius: var(--radius-xs);
}

.brand-text {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-weight: var(--weight-semibold);
}

.brand-sep {
  color: var(--outremer-500);
  padding: 0 0.15em;
}

.primary-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}

.primary-nav a {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) 0;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  border-bottom: var(--border-strong) solid transparent;
}

.primary-nav a:hover {
  color: var(--text-strong);
  text-decoration: none;
}

.primary-nav a.active {
  color: var(--text-strong);
  border-bottom-color: var(--outremer-500);
}

.user-menu {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.user-identity {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
  line-height: 1.2;
}

.user-name {
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
  font-size: var(--text-sm);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-2);
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-weight: var(--weight-medium);
}

.badge-source {
  background: var(--surface-sunken);
  color: var(--text-muted);
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background: var(--surface-raised);
  color: var(--text-body);
  border: var(--border-hairline) solid var(--line-hairline);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.icon-button:hover {
  background: var(--surface-sunken);
  border-color: var(--line-hairline);
}

.theme-toggle-dot {
  width: 0.9rem;
  height: 0.9rem;
  border-radius: var(--radius-pill);
  border: var(--border-strong) solid var(--text-body);
  background: linear-gradient(90deg, var(--text-body) 0 50%, transparent 50% 100%);
}

.signout-form {
  margin: 0;
}

.button.ghost {
  background: transparent;
  color: var(--text-strong);
  border-color: var(--line-hairline);
}

.button.ghost:hover {
  background: var(--surface-sunken);
  border-color: var(--line-hairline);
}

.button.accent {
  background: var(--ocre-500);
  border-color: var(--ocre-500);
  color: var(--concrete-900);
}

.button.accent:hover {
  background: var(--ocre-700);
  border-color: var(--ocre-700);
  color: var(--text-on-accent);
}

.subnav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  padding-top: var(--space-4);
  margin-top: var(--space-4);
  border-top: var(--border-hairline) solid var(--line-soft);
}

.subnav a {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  padding: var(--space-2) 0;
  border-bottom: var(--border-strong) solid transparent;
}

.subnav a:hover {
  color: var(--text-strong);
  text-decoration: none;
}

.subnav a.active {
  color: var(--text-strong);
  border-bottom-color: var(--outremer-500);
}

.app-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: var(--border-hairline) solid var(--line-soft);
}

#main-content:focus {
  outline: none;
}

/* ==========================================================================
   Modal / confirmation dialog (scrim is the only place blur/scrim is allowed)
   ========================================================================== */

.modal-scrim {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: rgba(21, 17, 12, 0.55);
}

.modal-scrim[hidden] {
  display: none;
}

.modal {
  width: min(32rem, 100%);
  background: var(--surface-raised);
  border: var(--border-strong) solid var(--line-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-modal);
  padding: var(--space-6);
}

.modal-title {
  font-size: var(--text-h3);
  margin-bottom: var(--space-4);
}

.modal-message {
  color: var(--text-body);
  margin-bottom: var(--space-5);
}

.modal-match {
  margin-bottom: var(--space-5);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}

/* ==========================================================================
   Copy-to-clipboard control
   ========================================================================== */

.copy-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: var(--surface-sunken);
  color: var(--text-body);
  border: var(--border-hairline) solid var(--line-hairline);
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  cursor: pointer;
}

.copy-button:hover {
  background: var(--surface-card);
}

.copy-button.copied {
  background: var(--status-success-bg);
  color: var(--status-success);
  border-color: var(--status-success);
}

.copyable {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* ==========================================================================
   Tabs (query-backed sections on detail pages)
   ========================================================================== */

.tab-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
  border-bottom: var(--border-hairline) solid var(--line-hairline);
}

.tab-nav a {
  padding: var(--space-3) 0;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  border-bottom: var(--border-strong) solid transparent;
  margin-bottom: -1px;
}

.tab-nav a:hover {
  color: var(--text-strong);
  text-decoration: none;
}

.tab-nav a.active {
  color: var(--text-strong);
  border-bottom-color: var(--outremer-500);
}

/* ==========================================================================
   Sortable table headers + pagination
   ========================================================================== */

th.sortable {
  padding: 0;
}

th.sortable a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  color: var(--text-muted);
  font: inherit;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}

th.sortable a:hover {
  color: var(--text-strong);
  text-decoration: none;
}

.sort-indicator {
  font-size: 0.85em;
  color: var(--outremer-500);
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.pagination a,
.pagination span.page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  padding: var(--space-2) var(--space-3);
  border: var(--border-hairline) solid var(--line-hairline);
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-body);
}

.pagination a:hover {
  background: var(--surface-sunken);
  text-decoration: none;
}

.pagination .current {
  background: var(--outremer-500);
  border-color: var(--outremer-500);
  color: var(--text-on-accent);
}

.pagination .disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* ==========================================================================
   Tables: horizontal-scroll wrapper with scroll affordance
   ========================================================================== */

.table-scroll {
  overflow-x: auto;
  background:
    linear-gradient(90deg, var(--surface-card) 30%, rgba(251, 250, 246, 0)) left center,
    linear-gradient(90deg, rgba(251, 250, 246, 0), var(--surface-card) 70%) right center,
    radial-gradient(farthest-side at 0 50%, rgba(21, 17, 12, 0.12), transparent) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(21, 17, 12, 0.12), transparent) right center;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* ==========================================================================
   Badges by semantic role/status/type — distinct, not colour-only
   ========================================================================== */

.pill.role-admin {
  background: var(--status-info-bg);
  color: var(--status-info);
  border: var(--border-hairline) solid var(--status-info);
}

.pill.role-user {
  background: transparent;
  color: var(--text-muted);
  border: var(--border-hairline) solid var(--line-hairline);
}

.pill.status-current {
  background: var(--status-warning-bg);
  color: var(--ocre-700);
  border: var(--border-hairline) solid var(--ocre-500);
}

/* ==========================================================================
   App-icon initials fallback + registry icon preview
   ========================================================================== */

.app-icon-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-sm);
  background: var(--outremer-100);
  color: var(--outremer-700);
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  border: var(--border-hairline) solid var(--outremer-300);
  text-transform: uppercase;
}

.icon-preview {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.icon-preview img {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-sm);
  object-fit: cover;
  border: var(--border-hairline) solid var(--line-hairline);
}

/* ==========================================================================
   Empty states
   ========================================================================== */

.empty-state {
  padding: var(--space-7) var(--space-6);
  text-align: center;
  border: var(--border-hairline) dashed var(--line-hairline);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
}

.empty-state .empty-title {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
  margin-bottom: var(--space-3);
}

.empty-state .button-row {
  justify-content: center;
}

/* ==========================================================================
   Structured audit detail rendering
   ========================================================================== */

.kv-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2) var(--space-5);
  margin: var(--space-3) 0 0;
}

.kv-list dt {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
}

.kv-list dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* ==========================================================================
   Split layout (list + side form) with explicit tablet breakpoint
   ========================================================================== */

.split-layout {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  align-items: start;
}

.split-layout > * {
  min-width: 0;
}

@media (max-width: 60rem) {
  .split-layout {
    grid-template-columns: 1fr;
  }
}

.panel-collapse {
  border: var(--border-hairline) solid var(--line-hairline);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  padding: var(--space-5) var(--space-6);
}

.panel-collapse > summary {
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
  list-style: none;
}

.panel-collapse > summary::-webkit-details-marker {
  display: none;
}

.panel-collapse > summary::before {
  content: "+ ";
  color: var(--outremer-500);
  font-family: var(--font-mono);
}

.panel-collapse[open] > summary::before {
  content: "− ";
}

/* Collapsible secondary login options */
.login-secondary > summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
  padding: var(--space-4) 0;
}

/* ==========================================================================
   Touch targets — meet 44px guidance on coarse pointers
   ========================================================================== */

@media (pointer: coarse) {
  button,
  .button,
  .icon-button,
  .copy-button,
  td a,
  .primary-nav a,
  .subnav a,
  .tab-nav a {
    min-height: 44px;
  }

  .icon-button {
    min-width: 44px;
  }
}

/* ==========================================================================
   Dark theme — token overrides (explicit toggle or OS preference)
   ========================================================================== */

:root[data-theme="dark"] {
  --surface-page: #14110C;
  --surface-card: #1E1913;
  --surface-raised: #262019;
  --surface-sunken: #100D09;
  --surface-inverse: #F5F2EB;

  --text-strong: #F5F2EB;
  --text-body: #E4DDD0;
  --text-muted: #AFA48E;
  --text-faint: #847A68;
  --text-accent: #8FB0CE;
  --text-on-accent: #FBFAF6;

  --line-hairline: #3C352B;
  --line-soft: #2A241D;
  --line-strong: #BEB4A1;
  --line-accent: #6E92B6;

  --status-success-bg: #25301B;
  --status-warning-bg: #322813;
  --status-danger-bg: #3A1D16;
  --status-info-bg: #16273A;
  --status-success: #A8B47F;
  --status-warning: #DEBE72;
  --status-danger: #D58066;
  --status-info: #8FB0CE;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-page: #14110C;
    --surface-card: #1E1913;
    --surface-raised: #262019;
    --surface-sunken: #100D09;
    --surface-inverse: #F5F2EB;

    --text-strong: #F5F2EB;
    --text-body: #E4DDD0;
    --text-muted: #AFA48E;
    --text-faint: #847A68;
    --text-accent: #8FB0CE;
    --text-on-accent: #FBFAF6;

    --line-hairline: #3C352B;
    --line-soft: #2A241D;
    --line-strong: #BEB4A1;
    --line-accent: #6E92B6;

    --status-success-bg: #25301B;
    --status-warning-bg: #322813;
    --status-danger-bg: #3A1D16;
    --status-info-bg: #16273A;
    --status-success: #A8B47F;
    --status-warning: #DEBE72;
    --status-danger: #D58066;
    --status-info: #8FB0CE;
  }
}

/* High-contrast preference: strengthen the structural lines. */
@media (prefers-contrast: more) {
  :root {
    --line-hairline: var(--concrete-500);
    --line-soft: var(--concrete-400);
  }

  .pill,
  .badge {
    border: var(--border-hairline) solid currentColor;
  }
}

/* ==========================================================================
   Checkbox / radio rows — keep the control on the same baseline as its label
   (overrides the global block `label` rule for control rows only)
   ========================================================================== */

.field-check {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
  cursor: pointer;
}

.field-check input[type="checkbox"],
.field-check input[type="radio"] {
  width: auto;
  margin: 0;
  flex: 0 0 auto;
}

/* Hint-weight variant (e.g. the login "remember me" row). */
.field-check--muted {
  font-weight: var(--weight-regular);
  color: var(--text-muted);
}

/* ==========================================================================
   Card header action row — heading on the left, actions flush right
   ========================================================================== */

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.card-head > h2,
.card-head > h3 {
  margin-bottom: 0;
}

.card-head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

/* Grouped toolbar of secondary actions (e.g. audit quick actions). */
.card-head-actions[role="toolbar"] {
  gap: var(--space-2);
}

/* ==========================================================================
   Results footer — count summary + pagination grouped at the bottom
   ========================================================================== */

.results-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.results-footer > .summary,
.results-footer > .pagination {
  margin-top: 0;
}

/* ==========================================================================
   Dense filter grid that keeps its action button on the filter row
   ========================================================================== */

.filters--dense {
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  align-items: end;
}

.filter-actions {
  margin-top: 0;
  align-self: end;
}

/* ==========================================================================
   Login auth shell — brand promoted into the title slot (one step up)
   ========================================================================== */

.auth-shell > .brand {
  margin-bottom: var(--space-6);
}

.auth-shell .brand-text {
  font-size: var(--text-lg);
}

/* When only one secondary auth card remains, let it span the full shell width
   and align with the primary card above. */
.auth-secondary-grid:has(> .auth-card:only-child) {
  grid-template-columns: 1fr;
}

/* ==========================================================================
   Entitlement matrix — fill available height; make headers/users actionable
   ========================================================================== */

.table-scroll--tall {
  max-height: calc(100vh - 18rem);
  overflow: auto;
}

.matrix th.rotate a.cell-trigger {
  display: inline-block;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-decoration: none;
}

.matrix .user-cell a.cell-trigger {
  color: inherit;
  text-decoration: none;
}

.matrix th.rotate a.cell-trigger:hover,
.matrix .user-cell a.cell-trigger:hover {
  color: var(--text-strong);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ==========================================================================
   Edge drawer (record detail / inspector / create panels) — Le Corbusier
   Drawer ported to progressive-enhancement markup. Sits below the confirm
   modal (z-index 200) so confirmations triggered inside a drawer layer above.
   ========================================================================== */

.lc-drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--scrim);
  animation: lc-drawer-fade var(--dur-base) var(--ease-standard);
}

.lc-drawer-scrim[hidden] {
  display: none;
}

.lc-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 101;
  width: 420px;
  max-width: 92vw;
  display: flex;
  flex-direction: column;
  background: var(--surface-raised);
  box-shadow: var(--shadow-modal);
}

.lc-drawer--right {
  right: 0;
  border-left: var(--border-strong) solid var(--line-strong);
  animation: lc-drawer-in-r var(--dur-slow) var(--ease-out);
}

.lc-drawer--left {
  left: 0;
  border-right: var(--border-strong) solid var(--line-strong);
  animation: lc-drawer-in-l var(--dur-slow) var(--ease-out);
}

.lc-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-bottom: var(--border-hairline) solid var(--line-soft);
}

.lc-drawer__titles {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.lc-drawer__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.lc-drawer__title {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-h4);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}

.lc-drawer__close {
  width: 2rem;
  height: 2rem;
  padding: 0;
  background: transparent;
  color: var(--text-muted);
  border: var(--border-hairline) solid transparent;
  border-radius: var(--radius-xs);
}

.lc-drawer__close:hover {
  background: var(--surface-sunken);
  border-color: var(--line-hairline);
  color: var(--text-strong);
}

.lc-drawer__close svg {
  width: 1rem;
  height: 1rem;
  display: block;
}

.lc-drawer__body {
  flex: 1;
  padding: var(--space-6);
  overflow-y: auto;
}

.lc-drawer__body > :first-child {
  margin-top: 0;
}

.lc-drawer__foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: var(--border-hairline) solid var(--line-soft);
}

/* Lock background scroll while a drawer is open. */
:root.lc-drawer-open {
  overflow: hidden;
}

@keyframes lc-drawer-fade {
  from { opacity: 0; }
}

@keyframes lc-drawer-in-r {
  from { transform: translateX(100%); }
}

@keyframes lc-drawer-in-l {
  from { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
  .lc-drawer-scrim,
  .lc-drawer--right,
  .lc-drawer--left {
    animation: none;
  }
}