/* Hermes design system: the SecureHex brand as Aegis defines it. Two registers: a navy
   navigation rail and a paper content area. One blue accent for action and focus.
   Hairline rules, offset shadows (never a halo), monospace reserved for secret material.
   Hermes's one extension of that rule: monospace also for the machine values a person
   copies exactly (client_id, kid, redirect URIs, the audit action and its JSON details).
   Names, usernames, slugs, role keys and e-mails are set in the sans face. Badges are
   flat with a 4px radius, never a pill. Light theme only.

   Boundary. This file holds the tokens, the fonts, the base elements and the generic
   components (Aegis's set and its variants) plus everything the server-rendered screens
   use; those screens link it at /static/hermes.css and load nothing else. What only the
   SPA has (shell, pages, tabs, dialog, notices, table and card layout) lives in
   frontend/src/styles.css, which imports this file, so Vite bundles its own copy of
   these rules and of the fonts. No rule is written in both files; each file carries the
   responsive and reduced-motion rules of its own components. */

/* Self-hosted fonts (the files Aegis ships; SIL OFL 1.1, see fonts/OFL.txt). No
   third-party origin, so the CSP keeps font-src 'self'. Latin + latin-ext only. */

/* Manrope 600 */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/manrope-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/manrope-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Manrope 700 */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/manrope-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/manrope-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Public Sans 400 */
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/public-sans-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/public-sans-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Public Sans 500 */
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/public-sans-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/public-sans-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* paper register (content) */
  --bg: #f4f8fc;
  --surface: #ffffff;
  --surface-2: #e9f0f7;
  --surface-3: #dfe8f2;
  --border: rgba(19, 34, 53, 0.12);
  --border-strong: rgba(19, 34, 53, 0.22);

  /* text on paper */
  --text: #132235;
  --text-muted: #45617f;
  --text-faint: #6b7f96;

  /* action */
  --accent: #0266cf;
  --accent-ink: #ffffff;
  --accent-dim: #014a96;
  --accent-wash: rgba(2, 102, 207, 0.08);

  /* status — functional only */
  --danger: #b3261e;
  --danger-dim: rgba(179, 38, 30, 0.1);
  --warning: #9a6700;
  --success: #1f7a4d;

  /* navy register (navigation, auth backdrop) */
  --nav-bg: #0a1733;
  --nav-bg-2: #11234d;
  --nav-text: #ffffff;
  --nav-muted: #a8b8dc;
  --nav-border: rgba(170, 190, 230, 0.16);
  --nav-active: rgba(255, 255, 255, 0.08);

  /* type */
  --font-sans: "Public Sans", "Segoe UI", system-ui, sans-serif;
  --font-display: "Manrope", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Menlo", monospace;

  /* spacing scale (4px base) */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;

  --radius: 6px;
  --radius-sm: 4px;
  --radius-lg: 10px;

  --shadow: 0 6px 18px -6px rgba(10, 27, 48, 0.12);
  --ring: 0 0 0 3px rgba(2, 102, 207, 0.18);
}

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

html,
body,
#root {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
}

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

/* subtle uppercase section labels */
.label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* --- inputs --- */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.field > label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
}
.input {
  width: 100%;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.input::placeholder {
  color: var(--text-faint);
}
.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}
.input.mono {
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

/* --- buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}
.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
}
.btn-primary:hover:not(:disabled) {
  background: var(--accent-dim);
}
.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-ghost:hover:not(:disabled) {
  background: var(--surface-2);
}
/* ghost button on the navy rail */
.btn-nav {
  background: transparent;
  color: var(--nav-text);
  border-color: var(--nav-border);
}
.btn-nav:hover:not(:disabled) {
  background: var(--nav-active);
}
.btn-block {
  width: 100%;
}

/* --- card / panel --- */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* --- badges: flat, never a pill --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  /* Deliberate difference with Aegis (two declarations): a badge inside a heading keeps
     the body face and its normal spacing instead of inheriting the display face. */
  font-family: var(--font-sans);
  letter-spacing: 0;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.badge-accent {
  color: var(--accent);
  border-color: var(--accent-border);
  background: var(--accent-wash);
}

.hint {
  font-size: 12.5px;
  color: var(--text-muted);
}

/* --- tables --- */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.table th {
  text-align: left;
  padding: 10px 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  border-bottom: 1px solid var(--border);
}
.table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.table tr:last-child td {
  border-bottom: 0;
}

/* --- inline code / secrets --- */
.code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  word-break: break-all;
  user-select: all;
}

/* secret value row: code + copy button */
.reveal {
  margin-top: 8px;
  display: flex;
  gap: var(--s2);
  align-items: flex-start;
  flex-wrap: wrap;
}
.reveal > .code {
  flex: 1 1 160px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

select.input {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-faint) 50%),
    linear-gradient(135deg, var(--text-faint) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
}

/* ---------------------------------------------------------------------------------------
   Everything above is Aegis's global.css as is, but for the two declarations marked in
   `.badge` and the border of `.badge-accent`, now a token. What follows Hermes needs and
   Aegis either styles inline (not allowed here: the CSP has no 'unsafe-inline') or does
   not have.
   --------------------------------------------------------------------------------------- */

/* Hermes's own tokens: every colour outside Aegis's set is named here, once. */
:root {
  --accent-border: rgba(2, 102, 207, 0.25);
  --success-wash: rgba(31, 122, 77, 0.08);
  --success-border: rgba(31, 122, 77, 0.25);
  /* 4 %, not Aegis's usual 8-10 %: warning text on a stronger wash falls under 4.5:1. */
  --warning-wash: rgba(154, 103, 0, 0.04);
  --warning-border: rgba(154, 103, 0, 0.3);
  --danger-border: rgba(179, 38, 30, 0.25);
  /* The paper ring is invisible on navy: same shape, in the rail's own muted blue. */
  --ring-nav: 0 0 0 3px rgba(168, 184, 220, 0.6);
  --backdrop: rgba(10, 23, 51, 0.6);
  --rail-width: 248px;
}

p,
dl,
dd,
ul,
ol,
pre,
fieldset {
  margin: 0;
}
strong {
  font-weight: 600;
}
small {
  font-size: 12.5px;
  color: var(--text-muted);
}
code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  overflow-wrap: anywhere;
}
a:focus-visible {
  outline: none;
  border-radius: 2px;
  box-shadow: var(--ring);
}
a.btn:hover {
  text-decoration: none;
}

/* Contrast: --text-faint reaches 4.1:1 on white and 3.9:1 on paper, short of WCAG AA for
   text. The token stays as Aegis defines it; small text uses --text-muted (6.4:1 / 6.0:1)
   and --text-faint is left to placeholders and to the select chevron. */
.label,
.table th {
  color: var(--text-muted);
}

.btn-danger {
  color: var(--danger);
}
.btn-sm {
  padding: 4px 10px;
  font-size: 12.5px;
}
textarea.input {
  resize: vertical;
}
.input[readonly] {
  background: var(--surface-2);
  color: var(--text-muted);
}
/* one-time codes: large, spaced and centred, as on Aegis's login */
.input.otp {
  font-family: var(--font-mono);
  font-size: 20px;
  letter-spacing: 0.3em;
  text-align: center;
}
/* The login's second step also takes a recovery code (19 characters): same look, sized
   so the whole code fits the 380px card without scrolling inside the field. */
.input.otp.otp-long {
  font-size: 16px;
  letter-spacing: 0.06em;
}

/* --- checkboxes, radios and switches (native controls tinted with the accent) --- */
input[type="checkbox"],
input[type="radio"] {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: var(--accent);
}
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}
.check {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  font-size: 13.5px;
}

/* --- status: flat washes, always with a text label --- */
.badge-success {
  color: var(--success);
  border-color: var(--success-border);
  background: var(--success-wash);
}
.badge-warning {
  color: var(--warning);
  border-color: var(--warning-border);
  background: var(--warning-wash);
}
.badge-danger {
  color: var(--danger);
  border-color: var(--danger-border);
  background: var(--danger-dim);
}
.error-text {
  font-size: 12.5px;
  color: var(--danger);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- brand: the mark plus the wordmark as text (it uses the web font) --- */
.brand {
  display: flex;
  align-items: center;
  gap: var(--s3);
}
.brand-mark {
  flex: none;
  color: var(--accent);
}
.brand-name {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.brand-sub {
  font-size: 11.5px;
  color: var(--text-muted);
}

/* --- auth screens: a centred card on the navy register --- */
.auth-wrap {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: var(--s5);
  background: var(--nav-bg);
}
.auth-card {
  width: 100%;
  max-width: 380px;
  padding: var(--s6);
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}
.auth-card h1 {
  font-size: 19px;
}
.auth-card h1 + .hint {
  margin-top: 6px;
}
.auth-card header {
  margin-bottom: var(--s2);
}
.auth-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding-top: var(--s4);
  border-top: 1px solid var(--border);
}

/* --- TOTP enrolment: QR on a white box, manual key and recovery codes as .code --- */
.qr-box {
  align-self: center;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.qr-box img {
  display: block;
  width: 176px;
  height: 176px;
}
/* a secret written in groups (a manual key, a recovery code) breaks between groups only */
.code-groups {
  word-break: normal;
}
.codes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--s1) var(--s4);
  list-style: none;
  user-select: text;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .input,
  .btn {
    min-height: 40px;
  }
  .btn-sm {
    min-height: 32px;
  }
  .input {
    font-size: 16px; /* no iOS zoom on focus */
  }
  .auth-wrap {
    padding: var(--s4);
  }
  .auth-card {
    padding: var(--s5);
  }
}
@media (prefers-reduced-motion: reduce) {
  .input,
  .btn {
    transition: none;
  }
}