/* GETESA Secure Access - same visual language as the GETESA USSD Switchroom.
   An engineering gatehouse, not a SaaS dashboard: ruled instrument plates instead of floating cards, tabular
   monospace readouts and labels, square status lamps, a serif voice for headings, GETESA indigo as the only
   accent. The issued configuration is presented as an access permit. Light theme only (by choice).
   No shadows, no rounded pills, no gradients. */

:root {
  --paper: #f3f0e8;
  --plate: #fbfaf6;
  --plate-sunk: #ebe7dc;
  --ink: #15172b;
  --ink-soft: #3d3f55;
  --muted: #6d6a5e;
  --rule: #d6d0c1;
  --rule-strong: #15172b;
  --brand: #2c2f8e;          /* GETESA logo indigo */
  --brand-ink: #ffffff;
  --brand-soft: #e3e3f3;
  --signal: #c97a12;         /* sodium lamp: attention */
  --signal-soft: #f6e7cf;
  --ok: #24744a;
  --ok-soft: #dcefe2;
  --fault: #b02a1e;
  --fault-soft: #f6dcd8;
  --off: #a7a296;
  --grid: rgba(21, 23, 43, .045);
  --serif: "Iowan Old Style", "Charter", "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --sans: "Segoe UI", "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column; color: var(--ink); font: 14px/1.5 var(--sans);
  background-color: var(--paper);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
}
img { max-width: 100%; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
p { margin: 0; }
code, kbd, pre { font-family: var(--mono); }
small { color: var(--muted); font-size: 12px; font-weight: 400; }
button, input, select, textarea { font: inherit; letter-spacing: 0; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Masthead ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 60px; padding: 10px 24px; background: var(--plate); border-bottom: 2px solid var(--rule-strong);
}
.brand { display: flex; align-items: center; gap: 14px; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand img { width: 88px; height: 34px; object-fit: contain; object-position: center; background: #fff; border: 1px solid var(--rule); padding: 3px 6px; }
.brand span { font-family: var(--serif); font-size: 18px; font-weight: 600; line-height: 1.1; }
.brand span::after {
  content: "TEMPORARY VPN \00B7 WG-ACCESS"; display: block; margin-top: 3px;
  font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .14em; color: var(--muted);
}
.topbar-actions { display: flex; align-items: center; gap: 0; border: 1px solid var(--rule); }
.topbar-actions > * { padding: 4px 10px; }
.topbar-actions > * + * { border-left: 1px solid var(--rule); }
.language-switcher { display: flex; align-items: center; gap: 6px; margin: 0; }
.language-switcher label { display: block; }
.language-switcher select { width: auto; min-width: 104px; min-height: 30px; padding: 4px 8px; font-size: 12px; border-bottom-width: 1px; background: var(--plate); }
.language-switcher .button { min-height: 30px; padding: 4px 10px; }
.topnav { display: flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.topnav > span { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--ink-soft); }
.topnav a { color: var(--ink); }
.topnav form { margin: 0; }

/* ---------- Page frame ---------- */
.shell { flex: 1; width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 30px 0 64px; }
.shell-narrow { width: min(720px, calc(100% - 48px)); }
.shell-auth { width: min(540px, calc(100% - 48px)); padding-top: 56px; }
.footer {
  display: flex; justify-content: space-between; gap: 16px; padding: 10px 24px;
  background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
}
.footer span:first-child::before { content: "\25B8  "; color: var(--signal); }

.eyebrow {
  margin: 0 0 6px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.page-heading {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px;
  padding-bottom: 16px; margin-bottom: 26px; border-bottom: 2px solid var(--rule-strong);
}
.page-heading > div:first-child { max-width: 760px; }
.page-heading h1, .detail-heading h1 { margin: 0 0 8px; font-size: 32px; line-height: 1.12; }
.page-heading p:not(.eyebrow), .detail-heading p { color: var(--ink-soft); line-height: 1.6; }
.compact-heading { align-items: center; }
.compact-heading h1 { margin-bottom: 0; }

/* Square status lamp, as in the Switchroom masthead */
.status-mark {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; flex: none;
  border: 1px solid var(--rule-strong); background: var(--plate);
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap;
}
.status-dot { width: 9px; height: 9px; background: var(--signal); flex: none; animation: blink 1.6s steps(2, start) infinite; }
@keyframes blink { to { opacity: .25; } }

/* ---------- Request form: numbered plates ---------- */
.request-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.form-section {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); background: var(--plate);
  border: 1px solid var(--rule); border-top: 2px solid var(--rule-strong);
}
.section-number {
  padding: 18px 0; text-align: center; background: var(--plate-sunk); border-right: 1px solid var(--rule);
  font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--brand);
}
.section-body { padding: 18px 22px 22px; min-width: 0; }
.section-body h2, .detail-main h2, .audit-panel h2, .activity-section h2 {
  margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); font-size: 20px;
}
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.field-wide { grid-column: 1 / -1; }
label {
  display: flex; flex-direction: column; gap: 6px; font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
}
label small { font-family: var(--sans); text-transform: none; letter-spacing: 0; }
input, select, textarea {
  width: 100%; min-height: 40px; padding: 8px 10px; color: var(--ink); background: var(--plate);
  font: 14px var(--sans); text-transform: none; letter-spacing: 0;
  border: 1px solid var(--rule); border-bottom: 2px solid var(--ink-soft); border-radius: 0; outline: none;
}
textarea { resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { border-bottom-color: var(--brand); background: var(--brand-soft); }
input[type="file"] { padding: 7px; font-size: 13px; }
.check-row { flex-direction: row; align-items: center; gap: 10px; font-family: var(--sans); font-size: 14px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink); }
.check-row input { width: 16px; height: 16px; min-height: 16px; accent-color: var(--brand); }
.form-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 22px;
  background: var(--plate); border: 1px solid var(--rule); border-left: 6px solid var(--brand);
}
.form-actions p { max-width: 620px; color: var(--ink-soft); font-size: 13px; }

/* ---------- Controls ---------- */
.button {
  min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px;
  border: 1px solid transparent; border-radius: 0; text-decoration: none; white-space: nowrap;
  font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.button:hover { text-decoration: none; }
.button-primary { color: var(--brand-ink); background: var(--brand); border-color: var(--brand); }
.button-primary:hover { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.button-secondary { color: var(--ink); background: transparent; border-color: var(--rule-strong); }
.button-secondary:hover { color: var(--paper); background: var(--ink); }
.button-danger { color: var(--fault); background: transparent; border-color: var(--fault); }
.button-danger:hover { color: var(--plate); background: var(--fault); }
.button-quiet { min-height: 30px; padding: 4px 10px; color: var(--ink-soft); background: transparent; border-color: transparent; }
.button-quiet:hover { color: var(--ink); background: var(--brand-soft); }
.button-full { width: 100%; }
.button:disabled { cursor: not-allowed; opacity: .45; }

/* ---------- Messages: ruled callouts ---------- */
.messages { display: grid; gap: 8px; margin-bottom: 20px; }
.message { padding: 11px 14px; background: var(--brand-soft); border-left: 3px solid var(--brand); color: var(--ink); font-size: 14px; }
.message::before { display: block; margin-bottom: 2px; font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; content: "NOTICE"; color: var(--brand); }
.message-error { background: var(--fault-soft); border-color: var(--fault); }
.message-error::before { content: "ACTION NEEDED"; color: var(--fault); }
.message-success { background: var(--ok-soft); border-color: var(--ok); }
.message-success::before { content: "DONE"; color: var(--ok); }

/* ---------- Auth and result plates ---------- */
.result-panel, .auth-panel, .delivery-panel {
  padding: 30px 32px; background: var(--plate); border: 1px solid var(--rule-strong); border-top: 6px solid var(--brand);
}
.result-panel { text-align: center; margin-top: 40px; }
.result-panel h1, .auth-panel h1, .delivery-panel h1 { margin: 0 0 12px; font-size: 28px; line-height: 1.15; }
.result-panel > p:not(.eyebrow) { color: var(--ink-soft); line-height: 1.6; margin: 0 auto 22px; max-width: 500px; }
.result-icon {
  width: 46px; height: 46px; display: grid; place-items: center; margin: 0 auto 16px;
  color: var(--ok); background: var(--ok-soft); border: 2px solid var(--ok); font-family: var(--mono); font-size: 22px; font-weight: 700;
}
.result-icon-error { color: var(--fault); background: var(--fault-soft); border-color: var(--fault); }
.auth-panel { display: grid; gap: 16px; }
.auth-panel-wide { width: min(720px, calc(100vw - 48px)); margin-left: 50%; transform: translateX(-50%); }
.auth-copy, .auth-switch { color: var(--ink-soft); font-size: 13px; line-height: 1.55; }
.auth-switch { padding-top: 12px; border-top: 1px dotted var(--rule); text-align: center; }
.otp-input {
  text-align: center; font-family: var(--mono); font-size: 26px; font-weight: 600; letter-spacing: .5em; padding-left: .5em;
  font-variant-numeric: tabular-nums; min-height: 56px;
}
.mfa-layout { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start; }
.mfa-layout p { color: var(--ink-soft); line-height: 1.5; }
.qr-image { display: block; width: 220px; aspect-ratio: 1; object-fit: contain; background: #fff; border: 1px solid var(--rule-strong); padding: 8px; }
.secret-value { margin: 16px 0; padding: 10px 12px; background: var(--plate-sunk); border: 1px solid var(--rule); }
.secret-value span { display: block; margin-bottom: 6px; font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.secret-value code { font-size: 14px; letter-spacing: .08em; overflow-wrap: anywhere; }

/* ---------- Admin: instrument readouts, segmented tabs, ruled tables ---------- */
.metric-strip {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 18px;
  background: var(--plate); border: 1px solid var(--rule); border-top: 2px solid var(--rule-strong);
}
.metric-strip a { display: flex; flex-direction: column; gap: 6px; padding: 14px 18px 16px; color: var(--muted); border-right: 1px solid var(--rule); }
.metric-strip a:last-child { border-right: 0; }
.metric-strip a:hover { text-decoration: none; background: var(--brand-soft); }
.metric-strip span { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.metric-strip strong { color: var(--ink); font-family: var(--mono); font-size: 30px; font-weight: 500; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.metric-strip a:first-child strong { color: var(--signal); }
.table-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 0; }
.tabs { display: inline-flex; overflow-x: auto; border: 1px solid var(--rule-strong); border-bottom: 0; }
.tabs a {
  padding: 8px 14px; border-right: 1px solid var(--rule); color: var(--ink); white-space: nowrap;
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.tabs a:last-child { border-right: 0; }
.tabs a:hover { text-decoration: none; background: var(--brand-soft); }
.tabs a.active { color: var(--paper); background: var(--ink); }
.table-wrap { overflow-x: auto; background: var(--plate); border: 1px solid var(--rule); border-top: 2px solid var(--rule-strong); }
table { width: 100%; min-width: 840px; border-collapse: collapse; font-size: 13px; }
th, td { padding: 10px 14px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
th {
  background: var(--plate-sunk); color: var(--ink-soft); border-bottom: 1px solid var(--rule-strong); white-space: nowrap;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
tbody tr:hover td { background: var(--brand-soft); }
tbody tr:last-child td { border-bottom: 0; }
td strong, td small { display: block; }
td time { font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.request-link { font-family: var(--mono); font-weight: 700; color: var(--brand); }
.truncate { display: block; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 12px; }
.empty-state { padding: 26px; text-align: center; color: var(--muted); font-family: var(--mono); font-size: 12px; letter-spacing: .04em; }

/* Request state as a square lamp + label (no pills) */
.badge {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; color: var(--ink-soft);
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.badge::before { content: ""; width: 9px; height: 9px; flex: none; background: var(--off); }
.badge-pending_approval, .badge-pending_verification { color: var(--signal); }
.badge-pending_approval::before, .badge-pending_verification::before { background: var(--signal); animation: blink 1.6s steps(2, start) infinite; }
.badge-approved { color: var(--brand); }
.badge-approved::before { background: var(--brand); }
.badge-active { color: var(--ok); }
.badge-active::before { background: var(--ok); }
.badge-rejected, .badge-revoked { color: var(--fault); }
.badge-rejected::before, .badge-revoked::before { background: var(--fault); }
.badge-expired { color: var(--muted); }

/* ---------- Request detail ---------- */
.detail-heading {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  padding-bottom: 14px; margin-bottom: 22px; border-bottom: 2px solid var(--rule-strong);
}
.detail-heading h1 { font-family: var(--mono); font-size: 28px; font-weight: 600; letter-spacing: -.01em; }
.delivery-link-panel {
  display: grid; grid-template-columns: minmax(220px, 1fr) minmax(320px, 1.4fr); gap: 20px; align-items: center;
  padding: 14px 18px; margin-bottom: 18px; background: var(--ok-soft); border-left: 3px solid var(--ok); color: var(--ink);
}
.delivery-link-panel p { margin-top: 4px; color: var(--ink-soft); font-size: 12px; line-height: 1.5; }
.delivery-link-panel input { min-width: 0; font-family: var(--mono); font-size: 12px; }
.back-link { display: inline-block; margin-bottom: 10px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 18px; align-items: start; }
.detail-main, .audit-panel { background: var(--plate); border: 1px solid var(--rule); border-top: 2px solid var(--rule-strong); padding: 18px 22px 22px; min-width: 0; }
.request-facts, .identity-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0 0 22px; }
.identity-summary { margin-bottom: 0; }
.request-facts div, .identity-summary div { padding: 9px 0; border-bottom: 1px dotted var(--rule); min-width: 0; }
.request-facts div:nth-child(odd), .identity-summary div:nth-child(odd) { padding-right: 20px; }
.request-facts dt, .identity-summary dt { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.request-facts dd, .identity-summary dd { margin: 3px 0 0; line-height: 1.45; overflow-wrap: anywhere; font-weight: 600; }
.review-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--rule); }
.audit-list { list-style: none; padding: 0; margin: 0; }
.audit-list li { position: relative; display: grid; gap: 2px; padding: 9px 0 9px 16px; border-bottom: 1px dotted var(--rule); font-size: 12px; }
.audit-list li::before { content: ""; position: absolute; left: 0; top: 14px; width: 7px; height: 7px; background: var(--brand); }
.audit-list li:last-child { border-bottom: 0; }
.audit-list span, .audit-list time { color: var(--muted); font-family: var(--mono); font-size: 11px; }

.activity-section { margin-top: 26px; padding-top: 22px; border-top: 2px solid var(--rule-strong); }
.activity-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.activity-heading h2 { margin: 4px 0 0; padding: 0; border: 0; }
.activity-table { margin-bottom: 20px; }
.activity-table table { min-width: 760px; }
.activity-section h3 { margin: 4px 0 12px; font-size: 16px; }
.activity-note { margin-top: -6px; color: var(--muted); font-size: 12px; }
.empty-activity { padding: 20px 0; color: var(--muted); font-family: var(--mono); font-size: 12px; }

/* ---------- Access-rule builder ---------- */
.access-rule-builder { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.builder-mode { width: fit-content; display: inline-grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--rule-strong); }
.builder-mode-button {
  min-width: 140px; min-height: 34px; padding: 6px 12px; border: 0; border-right: 1px solid var(--rule); color: var(--ink); background: transparent;
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.builder-mode-button:last-child { border-right: 0; }
.builder-mode-button.is-active { color: var(--paper); background: var(--ink); }
.access-rule-list { display: grid; border-top: 1px solid var(--rule); }
.access-rule-item { padding: 16px 0 18px; border-bottom: 1px dotted var(--rule); }
.access-rule-header { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.access-rule-header h3 { margin: 0; font-size: 16px; }
.rule-actions { display: flex; gap: 0; border: 1px solid var(--rule); }
.icon-command {
  width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 0; border-right: 1px solid var(--rule); border-radius: 0;
  color: var(--ink); background: transparent; font-size: 17px; line-height: 1;
}
.icon-command:last-child { border-right: 0; }
.icon-command:hover { color: var(--paper); background: var(--ink); }
.icon-command:disabled { cursor: not-allowed; opacity: .35; background: transparent; color: var(--ink); }
.rule-fields { align-items: start; }
.field-label { display: block; margin-bottom: 6px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.optional { color: var(--muted); font-family: var(--sans); font-size: 11px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.service-preset-list { display: flex; flex-wrap: wrap; gap: 0; }
.service-preset-list button {
  min-height: 32px; padding: 5px 11px; margin: 0 -1px -1px 0; border: 1px solid var(--rule-strong); border-radius: 0;
  color: var(--ink); background: var(--plate); font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .04em;
}
.service-preset-list button:hover { background: var(--brand-soft); }
.service-preset-list button.is-selected { color: var(--brand-ink); background: var(--brand); border-color: var(--brand); position: relative; }
.field-error { min-height: 15px; color: var(--fault); font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; font-family: var(--sans); }
[aria-invalid="true"] { border-color: var(--fault); border-bottom-color: var(--fault); }
.add-rule-button { margin-top: 12px; }
.bulk-import-panel { display: grid; gap: 12px; padding: 16px 18px; background: var(--brand-soft); border-left: 3px solid var(--brand); }
.bulk-import-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.csv-file-button { cursor: pointer; }
.builder-feedback { min-height: 18px; color: var(--fault); font-size: 12px; line-height: 1.5; }
.bulk-import-panel .builder-feedback { color: var(--ink-soft); }
.permission-summary { display: grid; gap: 0; margin-top: 4px; border: 1px solid var(--rule); border-top: 2px solid var(--rule-strong); overflow-x: auto; }
.permission-summary-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 14px; background: var(--plate-sunk); border-bottom: 1px solid var(--rule); }
.permission-summary-heading h3 { margin: 0; font-size: 15px; }
.permission-summary-heading span { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--muted); font-variant-numeric: tabular-nums; }
.permission-summary table { min-width: 680px; }
.permission-summary th, .permission-summary td { padding: 9px 12px; }
.permission-summary td { font-family: var(--mono); font-size: 12px; }
.summary-destinations { max-width: 360px; overflow-wrap: anywhere; }
.builder-limit { margin-top: -6px; color: var(--muted); font-size: 12px; }
.review-form .access-rule-builder { margin-bottom: 22px; }
.review-fields { margin-top: 20px; }
.attachment-list { margin-bottom: 22px; }
.attachment-list h3 { margin: 0 0 8px; font-size: 15px; }
.attachment-link { display: flex; justify-content: space-between; gap: 20px; padding: 10px 12px; border: 1px solid var(--rule); background: var(--plate-sunk); font-family: var(--mono); font-size: 12px; }
.attachment-link small { white-space: nowrap; }

/* ---------- Configuration delivery: an access permit ---------- */
.delivery-panel { text-align: center; position: relative; }
.delivery-panel::after {
  content: "TIME-LIMITED \00B7 SINGLE PERSON \00B7 REVOCABLE"; display: block; margin: 22px -32px -30px; padding: 8px 12px;
  border-top: 2px dashed var(--rule); background: var(--plate-sunk);
  font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .16em; color: var(--muted);
}
.delivery-meta { display: grid; grid-template-columns: 1fr 1fr; margin: 20px 0; border: 1px solid var(--rule-strong); text-align: left; }
.delivery-meta div { padding: 12px 14px; border-right: 1px solid var(--rule); }
.delivery-meta div:last-child { border-right: 0; }
.delivery-meta span, .delivery-meta strong { display: block; }
.delivery-meta span { margin-bottom: 4px; font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.delivery-meta strong { font-family: var(--mono); font-size: 15px; font-variant-numeric: tabular-nums; }
.qr-large { width: min(360px, 100%); margin: 0 auto 20px; background: #fff; border: 1px solid var(--rule-strong); padding: 10px; }
.security-note { margin-top: 16px; padding: 10px 12px; text-align: left; background: var(--signal-soft); border-left: 3px solid var(--signal); color: var(--ink); font-size: 12px; line-height: 1.5; }

/* Spanish (the default language) for the few labels drawn by CSS */
html:lang(es) .brand span::after { content: "VPN TEMPORAL \00B7 WG-ACCESS"; }
html:lang(es) .message::before { content: "AVISO"; }
html:lang(es) .message-error::before { content: "ACCI\00D3N NECESARIA"; }
html:lang(es) .message-success::before { content: "HECHO"; }
html:lang(es) .delivery-panel::after { content: "TIEMPO LIMITADO \00B7 UNA SOLA PERSONA \00B7 REVOCABLE"; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .topbar { flex-wrap: wrap; padding: 10px 16px; position: relative; }
  .topbar-actions { flex-wrap: wrap; }
  .topnav > span { display: none; }
  .detail-grid, .mfa-layout, .delivery-link-panel { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .shell, .shell-narrow, .shell-auth { width: calc(100% - 32px); padding-top: 22px; }
  .brand img { width: 74px; height: 30px; }
  .brand span { font-size: 16px; }
  .brand span::after { font-size: 9px; letter-spacing: .1em; }
  .page-heading, .detail-heading, .form-actions, .activity-heading { flex-direction: column; align-items: stretch; }
  .page-heading h1, .detail-heading h1 { font-size: 26px; }
  .status-mark { align-self: flex-start; }
  .form-section { grid-template-columns: minmax(0, 1fr); }
  .section-number { padding: 6px 14px; text-align: left; border-right: 0; border-bottom: 1px solid var(--rule); }
  .section-body { padding: 14px 16px 18px; }
  .field-grid, .metric-strip, .request-facts, .identity-summary, .delivery-meta { grid-template-columns: 1fr; }
  .field-wide { grid-column: auto; }
  .metric-strip a { border-right: 0; border-bottom: 1px solid var(--rule); }
  .metric-strip a:last-child { border-bottom: 0; }
  .request-facts div:nth-child(odd), .identity-summary div:nth-child(odd) { padding-right: 0; }
  .delivery-meta div { border-right: 0; border-bottom: 1px solid var(--rule); }
  .delivery-meta div:last-child { border-bottom: 0; }
  .mfa-layout .qr-image { margin: 0 auto; }
  .builder-mode { width: 100%; }
  .builder-mode-button { min-width: 0; }
  .access-rule-header { align-items: flex-start; }
  .bulk-import-actions .button { flex: 1 1 150px; }
  .result-panel, .auth-panel, .delivery-panel, .detail-main, .audit-panel { padding: 20px 18px; }
  .delivery-panel::after { margin: 18px -18px -20px; }
  .auth-panel-wide { width: calc(100vw - 32px); }
  .footer { flex-direction: column; gap: 4px; padding: 10px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}