:root {
  /* Adfinis brand — https://www.adfinis.com/en/branding */
  --sapphire: #2e4b98;
  --biscay: #1c2e5d;
  --stone: #0f0f0f;
  --white: #ffffff;
  --neutral: #f5f6f5;
  --anthracite: #484848;
  /* Brand grey #8b8b8c reaches only 3.4:1 on white. Every use of this token is
     text, so it is darkened to 5.4:1 on white and 5.0:1 on the neutral band.
     Lines and borders use --line. */
  --grey: #6a6a6b;
  --sky: #55c0ee;
  --coral: #e46962;
  /* Brand sky is 2.1:1 on white — below even the 3:1 required of a focus
     indicator — so focus rings use this instead (5.2:1 on white). */
  --focus: #1c6fba;

  --bg0: var(--white);
  --bg1: var(--neutral);
  --ink: var(--stone);
  --muted: var(--anthracite);
  --accent: var(--sapphire);
  --accent-soft: var(--focus);
  --line: rgba(28, 46, 93, 0.12);
  --code-bg: #eef1f8;
  --font: "Source Sans 3", "Source Sans Pro", Arial, sans-serif;
  --mono: "Source Code Pro", ui-monospace, monospace;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-weight: 300;
  color: var(--ink);
  background:
    radial-gradient(1100px 520px at 8% -12%, rgba(46, 75, 152, 0.14), transparent 55%),
    radial-gradient(900px 480px at 100% 0%, rgba(28, 46, 93, 0.1), transparent 52%),
    linear-gradient(180deg, var(--bg0), var(--bg1) 55%, var(--bg0));
  line-height: 1.55;
  overflow-x: clip;
}

main {
  min-width: 0;
  max-width: 100%;
}

.page {
  width: min(880px, calc(100% - 2.5rem));
  max-width: 100%;
  margin: 0 auto;
  padding: 2.5rem 0 4rem;
  min-width: 0;
}

.hero {
  margin-bottom: 2.75rem;
}

.hero-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 1.75rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
  min-width: 0;
  max-width: 100%;
  padding-top: 0.2rem;
  overflow: visible;
}

.nav-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--sapphire);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s;
}

.nav-btn:hover {
  border-color: var(--sapphire);
  color: var(--biscay);
  text-decoration: none;
}

.signout-link {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--grey);
  text-decoration: none;
  white-space: nowrap;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}

.signout-link:hover {
  color: var(--coral);
  text-decoration: underline;
}

/* Was a style attribute, which the CSP's style-src never let apply (#50). */
#auth-signout-form {
  margin: 0;
}

.nav-btn[hidden],
.signout-link[hidden],
.auth-username[hidden] {
  display: none;
}

.auth-username {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--biscay);
  max-width: 100%;
  overflow-wrap: anywhere;
}

.site-brand {
  display: inline-block;
  margin: 0;
  line-height: 0;
}

.site-brand img {
  display: block;
  height: 2.25rem;
  width: auto;
}

.brand {
  margin: 0 0 0.5rem;
  font-size: clamp(2.2rem, 5.5vw, 3.1rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--sapphire);
}

h1 {
  margin: 0 0 0.75rem;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--biscay);
}

.lede {
  margin: 0 0 1rem;
  max-width: 40rem;
  color: var(--muted);
  font-size: 1.05rem;
  font-weight: 300;
}

.crumb {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  color: var(--grey);
  overflow-wrap: anywhere;
}

.crumb a {
  color: var(--sapphire);
  text-decoration: none;
  font-weight: 600;
}

.crumb a:hover {
  color: var(--biscay);
  text-decoration: underline;
}

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

.version-list,
.file-list {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--ink);
}

/* Shared column tracks so name / hash / badge start at the same x across rows */
.file-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 13ch auto;
  column-gap: 1rem;
  row-gap: 0.4rem;
  list-style: none;
  padding-left: 0;
  width: 100%;
}

.version-list li,
.file-list li {
  margin: 0.4rem 0;
}

.file-list li {
  margin: 0;
}

.file-row {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  align-items: center;
}

.version-list a,
.file-list a {
  color: var(--sapphire);
  text-decoration: none;
  font-weight: 600;
}

.file-name {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.version-list a:hover,
.file-list a:hover {
  color: var(--biscay);
  text-decoration: underline;
}

.sha {
  font-size: 0.78rem;
  color: var(--grey);
  font-family: "Source Code Pro", ui-monospace, monospace;
  white-space: nowrap;
}

.notes-fold {
  border: 0;
}

.notes-fold > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  user-select: none;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--biscay);
}

/* The summary carries the section's h2 so the heading outline has no gap; it
   still has to read as the fold's label, not as a second page heading. */
.notes-fold > summary > h2 {
  display: inline;
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
}

.notes-fold > summary::-webkit-details-marker {
  display: none;
}

.notes-fold > summary::marker {
  content: "";
}

.notes-fold > summary::before {
  content: "";
  display: block;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid var(--biscay);
  border-bottom: 2px solid var(--biscay);
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.notes-fold[open] > summary::before {
  transform: rotate(45deg);
}

.notes-fold > summary:hover {
  color: var(--sapphire);
}

.notes-fold > summary:hover::before {
  border-color: var(--sapphire);
}

.notes-fold .notes {
  margin-top: 0.75rem;
}

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

.notes h3,
.notes h4 {
  color: var(--biscay);
  margin: 1.25rem 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

.notes ul {
  padding-left: 1.2rem;
}

.notes p {
  margin: 0.5rem 0;
}

.notes a {
  color: var(--sapphire);
}

section {
  padding: 1.5rem 0;
  border-top: 1px solid var(--line);
  min-width: 0;
  max-width: 100%;
}

h2 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--biscay);
}

h2 a {
  color: inherit;
  text-decoration: none;
}

h2 a:hover {
  color: var(--sapphire);
  text-decoration: underline;
}

section p {
  margin: 0 0 1rem;
  color: var(--muted);
}

code {
  font-family: var(--mono);
  font-size: 0.9em;
  color: var(--biscay);
  overflow-wrap: anywhere;
}

.cred-note {
  overflow-wrap: anywhere;
}

.cmds {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
}

.code-block {
  position: relative;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  z-index: 1;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--white);
  color: var(--biscay);
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.copy-icon {
  display: block;
}

.copy-btn:hover,
.copy-btn:focus {
  opacity: 1;
  border-color: rgba(46, 75, 152, 0.35);
  background: var(--neutral);
  outline: none;
}

.copy-btn:focus-visible {
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.copy-btn--done {
  color: #2e7d32;
  border-color: rgba(46, 125, 50, 0.45);
  opacity: 1;
}

.copy-btn--failed {
  color: #b71c1c;
  border-color: rgba(183, 28, 28, 0.45);
  opacity: 1;
}

pre {
  margin: 0;
  padding: 1rem 1.1rem;
  padding-right: 3.25rem;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  contain: inline-size;
  background: var(--code-bg);
  border: 1px solid var(--line);
  border-radius: 2px;
}

pre code {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--stone);
  display: block;
  width: max-content;
  max-width: none;
}

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.75rem !important;
}

.links a,
footer a {
  color: var(--sapphire);
  text-decoration: none;
  font-weight: 600;
}

.links a:hover,
footer a:hover {
  color: var(--coral);
  text-decoration: underline;
}

.note {
  font-size: 0.95rem;
}

footer {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  color: var(--grey);
  font-size: 0.9rem;
}

footer p {
  margin: 0;
}

footer .disclaimer {
  margin: 0 0 0.85rem;
  max-width: 42rem;
  color: var(--anthracite);
  font-size: 0.92rem;
  line-height: 1.5;
}

.tabs {
  margin-top: 0.35rem;
}

.tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  margin: 0 0 1rem;
  border-bottom: 1px solid var(--line);
}

.tablist [role="tab"] {
  appearance: none;
  margin: 0;
  padding: 0.55rem 0.95rem;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.tablist [role="tab"]:hover {
  color: var(--sapphire);
}

.tablist [role="tab"][aria-selected="true"] {
  color: var(--biscay);
  border-bottom-color: var(--sapphire);
}

.tablist [role="tab"]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.tab-panel {
  min-width: 0;
  max-width: 100%;
}

.tab-panel[hidden] {
  display: none;
}

/* Each panel carries its tab's name for the no-script case, where the tab strip
   is hidden and every panel is shown at once. With script, the tab is the label
   and this would be a duplicate heading. */
.panel-label {
  display: none;
  margin: 0 0 0.5rem;
  font-weight: 600;
  color: var(--biscay);
}

/* Tabs need script to switch panels. With none, the tab strip would be a row
   of dead buttons hiding every format but the first — so hide the strip, show
   all panels, and let each panel name itself. A media query rather than a
   <noscript><style> in the page: the CSP allows no inline style, so that block
   never applied in production (#50). */
@media (scripting: none) {
  .tablist { display: none; }
  .tabs > [data-panel][hidden] { display: block; }
  .tabs > [data-panel] > .panel-label { display: block; }
}

.field-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
  margin: 0 0 0.85rem;
}

.field-row label {
  font-weight: 600;
  color: var(--biscay);
  font-size: 0.95rem;
}

.field-row select {
  font: inherit;
  font-weight: 400;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0.4rem 0.65rem;
  min-width: 10rem;
}

.field-row select:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Checksum verification badges (shown next to binary files in the site) */
.cs-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.1rem 0.45rem;
  border-radius: 3px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.01em;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Only a badge that has something to say offers help. The verification summary
   reuses this class for the *name* of each check — "SHA256 checksums", "SBOM" —
   with the outcome spelled out in the <dd> beside it, so those carry no
   data-tooltip. Attaching the affordance to every .cs-badge gave them a help
   cursor and then an empty blue box on hover (#26). */
.cs-badge[data-tooltip] {
  cursor: help;
}

.cs-badge[data-tooltip]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.cs-badge[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.45rem);
  transform: translateX(-50%);
  width: min(22rem, 70vw);
  padding: 0.55rem 0.7rem;
  border-radius: 4px;
  background: var(--biscay, #1a2b4a);
  color: var(--white, #fff);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s ease;
  z-index: 40;
}

.cs-badge[data-tooltip]:hover::after,
.cs-badge[data-tooltip]:focus-visible::after {
  opacity: 1;
  visibility: visible;
}

/* Colour is decorative here — the badge text states the result on its own. */
.cs-verified  { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
.cs-failed    { background: #fce4ec; color: #b71c1c; border: 1px solid #ef9a9a; }
.cs-missing   { background: #fce4ec; color: #c62828; border: 1px solid #ef9a9a; }
.cs-malformed { background: #fce4ec; color: #c62828; border: 1px solid #ef9a9a; }
.cs-duplicate { background: #fce4ec; color: #c62828; border: 1px solid #ef9a9a; }
.cs-error     { background: #fff3e0; color: #a63f00; border: 1px solid #ffcc80; }
.cs-unknown   { background: #fff3e0; color: #a63f00; border: 1px solid #ffcc80; }
.cs-na        { background: #eceff1; color: #455a64; border: 1px solid #cfd8dc; }

/* Verification summary and release metadata: label/value pairs, so a definition
   list rather than a table. The label column sizes to its content on wide
   screens and stacks on narrow ones. */
.verify-summary,
.release-meta {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.35rem 0.9rem;
  margin: 0.5rem 0 0;
  align-items: baseline;
}

.verify-summary dt,
.release-meta dt {
  margin: 0;
  font-weight: 600;
  color: var(--biscay);
}

.verify-summary dd,
.release-meta dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.release-meta dd a {
  color: var(--sapphire);
  font-weight: 600;
}

@media (max-width: 560px) {
  .verify-summary,
  .release-meta {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.1rem;
  }

  .verify-summary dd,
  .release-meta dd {
    margin-bottom: 0.5rem;
  }
}

.keys-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.9rem;
}

.keys-table th,
.keys-table td {
  border: 1px solid var(--border, #d8dee9);
  padding: 0.5rem 0.75rem;
  text-align: left;
  vertical-align: top;
}

.keys-table th {
  background: var(--surface-muted, #f4f6f9);
  font-weight: 600;
}

.keys-table code {
  word-break: break-all;
}

.dl-protected {
  text-decoration: none;
}

.dl-protected:hover .dl-lock-tag,
.dl-protected:focus-visible .dl-lock-tag {
  background: #ffe4c4;
}

.dl-lock-tag {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.02rem 0.4rem;
  border-radius: 3px;
  background: #fff3e0;
  border: 1px solid #f0c088;
  color: #a63f00;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: baseline;
}

/* In flow, not a fixed overlay: this states the page's access state for as long
   as it applies, so it should take up room rather than float over the content
   and force the page to reserve space for it. */
.auth-notice {
  padding: 0.7rem 1.5rem;
  background: var(--sapphire);
  color: var(--white);
  text-align: center;
  font-size: 0.95rem;
  outline: none;
}

/* Sky on sapphire is 3.9:1 — under AA for normal text. White is 8.2:1, and the
   underline keeps the link distinguishable without relying on colour. */
.auth-notice a {
  color: var(--white);
  font-weight: 600;
  text-decoration: underline;
}

.auth-notice a:focus-visible,
.auth-retry:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

.auth-notice--error {
  background: var(--biscay);
}

.auth-retry {
  font: inherit;
  font-weight: 600;
  color: var(--biscay);
  background: var(--white);
  border: 1px solid var(--white);
  border-radius: 3px;
  padding: 0.1rem 0.6rem;
  margin: 0 0.15rem;
  cursor: pointer;
}

.auth-retry[disabled] {
  cursor: progress;
  opacity: 1;
  color: var(--anthracite);
  background: var(--neutral);
  border-color: var(--neutral);
}

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

@media (max-width: 768px) {
  .page {
    width: min(100% - 1.5rem, 880px);
    padding-top: 1.75rem;
  }

  .site-brand img {
    height: 1.85rem;
  }

  .file-list {
    grid-template-columns: 1fr;
    column-gap: 0.5rem;
    overflow-x: clip;
  }

  .file-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 0.25rem 0.5rem;
    align-items: center;
  }

  .file-row .file-name {
    grid-column: 1 / -1;
  }

  .file-row .sha {
    grid-column: 1;
    min-width: 0;
  }

  .file-row .cs-badge {
    grid-column: 2;
    justify-self: end;
  }
}

/* ------------------------------------------------------------------ */
/* Login pages (site + admin)                                        */
/* ------------------------------------------------------------------ */
body.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-card {
  width: min(400px, 100% - 2rem);
  padding: 2.25rem 2rem 2rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 4px 24px rgba(28,46,93,0.07);
}

.login-heading {
  margin: 1rem 0 1.5rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--biscay);
}

.form-field { margin-bottom: 1rem; }
.form-field label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 600;
  color: var(--biscay);
  font-size: 0.95rem;
}

.form-field input {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  font: inherit;
  color: var(--ink);
  background: var(--white);
  box-sizing: border-box;
}

.form-field input:focus { outline: 2px solid var(--focus); outline-offset: 1px; }

.btn-submit {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.65rem 1rem;
  background: var(--sapphire);
  color: var(--white);
  border: none;
  border-radius: 2px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-submit:hover { background: var(--biscay); }

.login-back {
  margin-top: 1.25rem;
  text-align: center;
  font-size: 0.92rem;
}

.login-back a { color: var(--sapphire); }

.error-msg {
  padding: 0.65rem 0.85rem;
  margin-bottom: 1rem;
  background: #fce4ec;
  color: #c62828;
  border: 1px solid #ef9a9a;
  border-radius: 2px;
  font-size: 0.92rem;
}

/* ------------------------------------------------------------------ */
/* Admin panel (keymaster)                                             */
/* ------------------------------------------------------------------ */
.admin-table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; }
.admin-table th, .admin-table td {
  padding: 0.6rem 0.8rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
}
.admin-table th { color: var(--biscay); font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: var(--neutral); }

.badge { display: inline-block; padding: 0.12rem 0.5rem; border-radius: 2px; font-size: 0.78rem; font-weight: 600; }
.badge--active  { background: #e8f5e9; color: #2e7d32; }
.badge--revoked { background: #fce4ec; color: #c62828; }
.badge--expired { background: #fff3e0; color: #e65100; }
.badge--idle    { background: #eceff1; color: #546e7a; }
.badge--queued  { background: #e3f2fd; color: #1565c0; }
.badge--running { background: #fff8e1; color: #f57f17; }
.badge--failed  { background: #fce4ec; color: #c62828; }

.admin-nav { display: flex; gap: 0.75rem; margin: 0.75rem 0 0.25rem; }
.admin-nav__link {
  font-size: 0.9rem; font-weight: 600; color: var(--grey);
  text-decoration: none; padding-bottom: 0.15rem; border-bottom: 2px solid transparent;
}
.admin-nav__link:hover { color: var(--sapphire); }
.admin-nav__link.is-active { color: var(--sapphire); border-bottom-color: var(--sapphire); }

.sync-phase {
  display: inline-block; margin-left: 0.35rem;
  font-size: 0.78rem; color: var(--muted); font-family: "Source Code Pro", monospace;
}
.sync-error {
  margin-top: 0.25rem; font-size: 0.78rem; color: #c62828;
  max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* What a long phase is working on right now (#28). Muted rather than coloured:
   it is progress, not a problem, and the row already carries the state badge. */
.sync-progress {
  margin-top: 0.25rem; font-size: 0.78rem; color: var(--muted);
  font-family: "Source Code Pro", monospace;
  max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.btn { display: inline-flex; align-items: center; padding: 0.4rem 0.9rem;
       border: 0; border-radius: 2px; cursor: pointer; gap: 0.35rem;
       font: inherit; font-weight: 600; font-size: 0.88rem; text-decoration: none; }
.btn--primary { background: var(--sapphire); color: var(--white); }
.btn--primary:hover { background: var(--biscay); }
.btn--danger  { background: var(--coral); color: var(--white); }
.btn--danger:hover { opacity: 0.85; }
.btn--ghost   { background: transparent; color: var(--sapphire); border: 1px solid var(--line); }
.btn--ghost:hover { border-color: var(--sapphire); }
.btn--sm { padding: 0.25rem 0.65rem; font-size: 0.82rem; }

.form-group { margin-bottom: 1.1rem; }
.form-group label { display: block; font-weight: 600; color: var(--biscay); font-size: 0.93rem; margin-bottom: 0.35rem; }
.form-group input[type=text], .form-group input[type=number],
.form-group input[type=password], .form-group input[type=date] {
  font: inherit; padding: 0.45rem 0.7rem;
  border: 1px solid var(--line); border-radius: 2px;
  width: 100%; max-width: 26rem; color: var(--ink); background: var(--white);
}
.form-group input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.form-group .hint { font-size: 0.82rem; color: var(--grey); margin-top: 0.3rem; }

.checkboxes { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; margin-top: 0.35rem; }
.checkboxes label { font-weight: 400; display: flex; align-items: center; gap: 0.35rem; cursor: pointer; font-size: 0.93rem; }
.checkboxes input[type=checkbox] { accent-color: var(--sapphire); width: 1rem; height: 1rem; }

.alert { padding: 0.75rem 1rem; border-radius: 2px; margin-bottom: 1rem; font-size: 0.92rem; }
.alert--info    { background: #e3f2fd; color: #0d47a1; border-left: 3px solid var(--sapphire); }
.alert--success { background: #e8f5e9; color: #1b5e20; border-left: 3px solid #43a047; }
.alert--warning { background: #fff8e1; color: #7c4d00; border-left: 3px solid #ff9800; }
.alert--error   { background: #fce4ec; color: #c62828; border-left: 3px solid var(--coral); }

.key-display {
  font-family: var(--mono); font-size: 0.88rem; background: var(--code-bg);
  border: 1px solid var(--line); border-radius: 2px;
  padding: 0.85rem 1rem; word-break: break-all; color: var(--stone);
  margin: 0.75rem 0; position: relative;
}

.actions { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; }
.expire-form { display: flex; gap: 0.4rem; align-items: center; }
.expire-form input[type=date] { width: 8rem; padding: 0.25rem 0.5rem; font-size: 0.82rem; }
.expire-form .btn { white-space: nowrap; }
.delete-form { margin-left: calc(8rem + 0.4rem); }

.admin-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.empty-state { padding: 2rem 0; color: var(--grey); text-align: center; }
.empty-state a { color: var(--sapphire); font-weight: 600; }

/* These were inline style attributes, which the CSP's style-src (no
   'unsafe-inline') makes the browser drop (#51). Keep them here. */
.admin-header .lede { margin: 0; }
.inline-form { margin: 0; }
.alert--spaced { margin-bottom: 1.5rem; }
.text-grey { color: var(--grey); }
.code-chip {
  font-size: 0.85rem; background: var(--code-bg);
  padding: 0.1rem 0.4rem; border-radius: 2px;
}
.admin-table .code-chip { font-size: 0.8rem; padding: 0.1rem 0.35rem; }
.cell-muted { color: var(--muted); font-size: 0.88rem; }
.cell-small { font-size: 0.88rem; }
.cell-note { color: var(--grey); font-size: 0.85rem; }
.product-id { color: var(--muted); font-size: 0.82rem; }
.btn--text-danger { color: var(--coral); }
.narrow-form { max-width: 30rem; }
.form-actions { display: flex; gap: 0.75rem; margin-top: 1.5rem; }
.expiry-form { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.copy-key-btn { margin-top: 0.35rem; }
.key-share { margin-top: 1rem; }
.key-share__note { color: var(--muted); font-size: 0.92rem; margin-bottom: 1rem; }
.key-share pre { padding: 0.75rem 1rem; font-size: 0.82rem; }
.key-back { margin-top: 1.5rem; }

.admin-footer { margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: 0.88rem; color: var(--grey); }
.admin-footer a { color: var(--grey); font-weight: 600; }
.admin-footer a:hover { color: var(--sapphire); }

.modal-backdrop {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.45); z-index: 100;
  align-items: center; justify-content: center;
}
.modal-backdrop.is-open { display: flex; }
.modal {
  background: var(--white); border-radius: 3px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  padding: 2rem 2rem 1.5rem;
  max-width: 26rem; width: calc(100% - 2rem);
  font-size: 0.95rem;
}
.modal h2 { margin: 0 0 0.75rem; font-size: 1.1rem; font-weight: 600; color: var(--biscay); }
.modal p  { margin: 0 0 1.5rem; color: var(--stone); line-height: 1.5; }
.modal-actions { display: flex; justify-content: flex-end; gap: 0.6rem; }

/* Clickable table rows */
.admin-table--clickable tbody tr {
  cursor: pointer;
}

.admin-table--clickable tbody tr:hover td {
  background: var(--hover-bg, #f5f7fb);
}

/* Account management page */
.account-meta {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
}

.account-meta__item {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

.account-meta__label {
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--grey);
  width: 6rem;
  flex-shrink: 0;
}

.account-meta__value {
  font-size: 0.95rem;
  color: var(--biscay);
}

.account-actions {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.account-section {
  padding: 1.5rem 0;
  border-top: 1px solid var(--line);
}

.account-section:last-child {
  border-bottom: 1px solid var(--line);
}

.account-section__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--biscay);
  margin: 0 0 0.3rem;
}

.account-section__desc {
  font-size: 0.88rem;
  color: var(--grey);
  margin: 0 0 1rem;
}

.account-section--danger .account-section__title {
  color: var(--coral);
}

.back-link {
  display: inline-block;
  margin-top: 2rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--sapphire);
  text-decoration: none;
}

.back-link:hover {
  text-decoration: underline;
}

/* Access log table on account page */
.account-section--logs {
  border-bottom: 1px solid var(--line);
}

.log-wrap {
  overflow-x: auto;
  max-height: 22rem;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 2px;
  margin-top: 0.5rem;
}

.log-table {
  margin: 0;
}

.log-table thead th {
  position: sticky;
  top: 0;
  background: var(--white);
  z-index: 1;
}

.log-table .log-ts {
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--muted);
}

.log-table .log-path {
  font-family: var(--mono);
  font-size: 0.82rem;
  max-width: 36rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.log-table .log-ua {
  font-size: 0.8rem;
  color: var(--grey);
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}