:root {
  --paper-canvas: #eef2f6;
  --paper-surface: #ffffff;
  --paper-raised: #f7f9fb;
  --guard-ink: #172033;
  --guard-muted: #526071;
  --checkpoint-line: #c7d0dc;
  --checkpoint-strong: #8c9aaa;
  --signal-action: #174a8b;
  --signal-focus: #0b63ce;
  --warning-paper: #fff4d6;
  --warning-ink: #5f4300;
  --danger-paper: #fff0f0;
  --danger-ink: #7a1818;
  --safe-paper: #edf7f0;
  --safe-ink: #235d38;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --radius-control: 0.375rem;
  --radius-panel: 0.625rem;
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { background: var(--paper-canvas); color: var(--guard-ink); }
body { margin: 0; min-width: 20rem; background: var(--paper-canvas); color: var(--guard-ink); line-height: 1.5; }
a { color: var(--signal-action); text-underline-offset: 0.18em; }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 3px solid var(--signal-focus); outline-offset: 3px; }

.skip-link { position: fixed; z-index: 20; top: var(--space-3); left: var(--space-3); padding: var(--space-2) var(--space-3); background: var(--guard-ink); color: var(--paper-surface); transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }
.app-frame { min-height: 100vh; }
.product-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4); border-bottom: 1px solid var(--checkpoint-line); background: var(--paper-surface); }
.product-mark { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--guard-ink); text-decoration: none; }
.product-mark__signal { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border: 1px solid var(--signal-action); border-radius: var(--radius-control); color: var(--signal-action); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; }
.product-mark strong, .product-mark small { display: block; }
.product-mark small, .workspace-label { color: var(--guard-muted); font-size: 0.8125rem; }
.workspace-label { margin: 0; text-align: right; }
.preview-banner { border-bottom: 2px solid var(--warning-ink); background: var(--warning-paper); color: var(--warning-ink); padding: var(--space-3) var(--space-4); }
.preview-banner strong { display: block; font-size: 0.875rem; letter-spacing: 0.04em; }
.preview-banner p { margin: var(--space-1) 0 0; }

.navigation-frame { border-bottom: 1px solid var(--checkpoint-line); background: var(--paper-surface); }
.navigation-frame summary { padding: var(--space-3) var(--space-4); color: var(--signal-action); cursor: pointer; font-weight: 700; }
.navigation-frame nav { display: grid; padding: 0 var(--space-4) var(--space-4); gap: var(--space-1); }
.navigation-frame nav a { padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); color: var(--guard-ink); text-decoration: none; }
.navigation-frame nav a:hover { background: var(--paper-raised); }
.navigation-frame nav a[aria-current="page"] { background: #e7eef8; color: #113f78; font-weight: 750; }

main { width: min(100%, 72rem); margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-8); }
.page-heading { max-width: 48rem; margin-bottom: var(--space-8); }
.page-kicker, .section-index { margin: 0 0 var(--space-2); color: var(--signal-action); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
h1, h2 { margin-top: 0; line-height: 1.2; letter-spacing: -0.02em; }
h1 { margin-bottom: var(--space-3); font-size: clamp(1.75rem, 6vw, 2.5rem); }
h2 { font-size: 1.25rem; }
h3 { margin-top: 0; font-size: 1rem; line-height: 1.3; }
.page-lead { margin: 0; color: var(--guard-muted); font-size: 1.0625rem; }

.protection-route { border: 1px solid var(--checkpoint-line); border-radius: var(--radius-panel); background: var(--paper-surface); }
.section-heading { padding: var(--space-6); border-bottom: 1px solid var(--checkpoint-line); }
.section-heading h2 { margin-bottom: 0; }
.protection-route ol { margin: 0; padding: 0; list-style: none; }
.route-step { position: relative; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--space-3); padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--checkpoint-line); }
.route-step:last-child { border-bottom: 0; }
.route-step__symbol { display: grid; width: 1.75rem; height: 1.75rem; place-items: center; border: 1px solid var(--checkpoint-strong); border-radius: 50%; color: var(--guard-muted); font-weight: 800; }
.route-step strong, .route-step small { display: block; }
.route-step small { margin-top: var(--space-1); color: var(--guard-muted); }
.route-step__state { grid-column: 2; color: var(--guard-muted); font-size: 0.8125rem; font-weight: 700; }
.route-step--complete .route-step__symbol { border-color: var(--safe-ink); background: var(--safe-paper); color: var(--safe-ink); }
.route-step--current { background: #f1f5fb; }
.route-step--current .route-step__symbol { border-color: var(--signal-action); color: var(--signal-action); }

.notice, .error-summary { margin-bottom: var(--space-6); padding: var(--space-4); border: 1px solid var(--checkpoint-line); border-radius: var(--radius-control); background: var(--paper-surface); }
.notice h2, .error-summary h2 { margin-bottom: var(--space-2); }
.notice p { margin: 0; }
.notice--warning { border-color: #d6b85f; background: var(--warning-paper); color: var(--warning-ink); }
.notice--danger, .error-summary { border-color: #d69b9b; background: var(--danger-paper); color: var(--danger-ink); }
.session-form { margin-top: var(--space-6); }
.button { min-height: 2.75rem; padding: var(--space-2) var(--space-4); border: 1px solid var(--signal-action); border-radius: var(--radius-control); background: var(--signal-action); color: var(--paper-surface); cursor: pointer; font-weight: 750; }
.button--quiet { background: var(--paper-surface); color: var(--signal-action); }
.auth-layout .app-frame { display: block; }
.auth-layout main { width: min(100%, 64rem); }
.auth-card { border: 1px solid var(--checkpoint-line); border-radius: var(--radius-panel); background: var(--paper-surface); padding: var(--space-6); }
.auth-card--narrow { max-width: 36rem; }
.setup-grid { display: grid; gap: var(--space-8); }
.totp-qr { display: block; max-width: 100%; height: auto; margin-block: var(--space-4); image-rendering: pixelated; }
.secret-line span, .secret-line code { display: block; }
.secret-line code, .recovery-list code { overflow-wrap: anywhere; color: var(--guard-ink); font-family: ui-monospace, "Cascadia Mono", monospace; }
.field { margin-bottom: var(--space-4); }
.field label { display: block; margin-bottom: var(--space-2); font-weight: 750; }
.field input { width: 100%; min-height: 2.75rem; border: 1px solid var(--checkpoint-strong); border-radius: var(--radius-control); padding: var(--space-2) var(--space-3); background: var(--paper-surface); color: var(--guard-ink); }
.field select { min-height: 2.75rem; width: 100%; border: 1px solid var(--checkpoint-strong); border-radius: var(--radius-control); padding: var(--space-2) var(--space-3); background: var(--paper-surface); color: var(--guard-ink); }
.field input[aria-invalid="true"] { border-color: var(--danger-ink); border-width: 2px; }
.field--short input { max-width: 16rem; }
.form-hint, .identity-line { color: var(--guard-muted); }
.field-error { margin: var(--space-2) 0 0; color: var(--danger-ink); font-weight: 650; }
.button-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.recovery-list { columns: 2 14rem; padding-left: 1.5rem; }
.recovery-list li { break-inside: avoid; margin-bottom: var(--space-2); }
.consequence-summary { margin-bottom: var(--space-6); border-left: 0.25rem solid var(--warning-ink); padding-left: var(--space-4); }

.site-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--checkpoint-line); }
.site-list li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--checkpoint-line); overflow-wrap: anywhere; }
.site-list li span { color: var(--guard-muted); }
.dashboard-sites, .site-detail, .confirmation { margin-top: var(--space-6); padding: var(--space-6); border: 1px solid var(--checkpoint-line); border-radius: var(--radius-panel); background: var(--paper-surface); }
.dashboard-sites .section-heading { padding: 0 0 var(--space-4); }
.dashboard-sites > p:last-child { margin-bottom: 0; }
.state-line { font-size: 1.125rem; }
.confirmation { margin-top: var(--space-6); background: var(--paper-raised); }
.confirmation form { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--checkpoint-line); }
.confirmation dl, .evidence-list { margin: var(--space-4) 0; border-top: 1px solid var(--checkpoint-line); }
.confirmation dl div, .evidence-list div { display: grid; gap: var(--space-1) var(--space-4); padding: var(--space-2) 0; border-bottom: 1px solid var(--checkpoint-line); }
.confirmation dt, .evidence-list dt { color: var(--guard-muted); }
.confirmation dd, .evidence-list dd { margin: 0; overflow-wrap: anywhere; }
.dns-steps { padding-left: var(--space-6); }
.dns-steps li { margin-bottom: var(--space-3); }
code { overflow-wrap: anywhere; font-family: ui-monospace, "Cascadia Mono", monospace; }
.auth-card details { margin: var(--space-4) 0; border-top: 1px solid var(--checkpoint-line); border-bottom: 1px solid var(--checkpoint-line); }
.auth-card details summary { padding: var(--space-3) 0; color: var(--signal-action); cursor: pointer; font-weight: 700; }
.auth-card details > .field { padding-top: var(--space-3); }
.notice--success { border-color: #8bb79a; background: var(--safe-paper); color: var(--safe-ink); }
.auth-card .notice { margin-top: var(--space-4); }
.auth-card .button-row { margin-top: var(--space-6); }
.auth-card .button-row a:not(.button) { align-self: center; }

.operations-section { margin-top: var(--space-6); border-top: 1px solid var(--checkpoint-line); padding-top: var(--space-6); }
.operations-section > h2 { margin-bottom: var(--space-4); }
.operations-filter, .operations-form { display: grid; max-width: 42rem; gap: var(--space-2); }
.operations-filter { align-items: end; }
.operations-filter label, .operations-form label { font-weight: 700; }
.operations-filter input, .operations-filter select, .operations-form input, .operations-form select { min-height: 2.75rem; width: 100%; border: 1px solid var(--checkpoint-strong); border-radius: var(--radius-control); padding: var(--space-2) var(--space-3); background: var(--paper-surface); color: var(--guard-ink); }
.operations-filter button, .operations-form button { justify-self: start; margin-top: var(--space-2); }
.operations-form { padding: var(--space-4) 0; }
.operations-form .form-hint { margin: var(--space-2) 0; }
.table-scroll { max-width: 100%; overflow-x: auto; border: 1px solid var(--checkpoint-line); border-radius: var(--radius-control); background: var(--paper-surface); }
.table-scroll table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.875rem; }
.table-scroll th, .table-scroll td { padding: var(--space-3); border-bottom: 1px solid var(--checkpoint-line); vertical-align: top; white-space: nowrap; }
.table-scroll th { background: var(--paper-raised); color: var(--guard-muted); font-weight: 750; }
.table-scroll tbody tr:last-child td { border-bottom: 0; }
.table-scroll tbody tr:hover { background: var(--paper-raised); }
.table-scroll form { margin: 0; }
.table-scroll .button { min-height: 2.25rem; padding-block: var(--space-1); }
.pagination, .subnavigation { display: flex; flex-wrap: wrap; gap: var(--space-4); margin: var(--space-4) 0; }
.subnavigation { border-bottom: 1px solid var(--checkpoint-line); }
.subnavigation a { padding: var(--space-2) 0; }
.subnavigation a[aria-current="page"] { border-bottom: 2px solid var(--signal-action); font-weight: 750; text-decoration: none; }
.settings-list { margin: 0; border-top: 1px solid var(--checkpoint-line); }
.settings-list div { display: grid; gap: var(--space-1); padding: var(--space-3) 0; border-bottom: 1px solid var(--checkpoint-line); }
.settings-list dt { color: var(--guard-muted); }
.settings-list dd { margin: 0; }

@media (min-width: 48rem) {
	.operations-filter { grid-template-columns: minmax(10rem, 1fr) minmax(10rem, 1fr) minmax(8rem, 0.6fr) auto; }
	.operations-filter label { grid-row: 1; }
	.operations-filter select { grid-row: 2; }
	.operations-filter button { grid-row: 2; margin: 0; }
	.settings-list div { grid-template-columns: 14rem minmax(0, 1fr); }
  .route-step { grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; }
  .route-step__state { grid-column: 3; grid-row: 1; }
  .setup-grid { grid-template-columns: minmax(15rem, 0.8fr) minmax(20rem, 1.2fr); }
  .confirmation dl div, .evidence-list div { grid-template-columns: 12rem minmax(0,1fr); }
}

@media (min-width: 64rem) {
  .app-frame { display: grid; grid-template-columns: 17rem minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .product-header { grid-column: 1 / -1; padding-inline: var(--space-6); }
  .navigation-frame { grid-column: 1; grid-row: 2; border-right: 1px solid var(--checkpoint-line); border-bottom: 0; }
  .navigation-frame summary { display: none; }
  .navigation-frame nav { display: grid !important; position: sticky; top: 0; padding: var(--space-6) var(--space-4); }
  main { grid-column: 2; grid-row: 2; padding: 3rem var(--space-8) 4rem; }
}

@media print {
  .product-header, .page-heading, .button-row, .recovery-sheet > p { display: none; }
  body, html { background: #ffffff; }
  .auth-card { border: 0; padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}