/* Form Bastion identity: the stronghold behind your forms.
   Charcoal surfaces and brass details frame the four-bastion identity. Shared structure lives in style.css. */
@font-face {
  font-family: Manrope;
  src: url('../fonts/Manrope.woff2') format('woff2');
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'Bastion Mono';
  src: url('../fonts/BastionMono.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --paper: #0d1012;
  --surface: #14191c;
  --surface-soft: #1c2226;
  --ink: #f2f0e9;
  --ink-deep: #090c0e;
  --muted: #abb0b3;
  --line: #30383c;
  --accent: #d7b77c;
  --accent-hover: #ead09e;
  --accent-soft: #2b271f;
  --accent-ink: #17150f;
  --red: #f0aaa0;
  --amber: #e6c181;
  --blue: #a4c4dc;
  --radius: 10px;
  --shadow: 0 12px 34px #00000020;
  --body: Manrope, 'Segoe UI', sans-serif;
  --display: Manrope, 'Segoe UI', sans-serif;
  --mono: 'Bastion Mono', Consolas, monospace;
}
body { font-family: var(--body); font-size: 16px; color: var(--ink); }
/* Approved Fortified Form lockup: preserve the outlined type and 32px symbol. */
.brand { min-height: 48px; flex-shrink: 0; }
.brand img { display: block; width: 171.613px; height: 32px; flex-shrink: 0; object-fit: contain; }
.brand:focus-visible { outline-color: var(--accent); }
::selection { background: var(--surface-soft); color: var(--accent); }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
a, button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--line); outline-offset: 4px; }
.container { width: min(1280px, calc(100% - 96px)); }
.button, button[type=submit] {
  min-height: 46px; padding: 12px 19px; gap: 12px;
  border-radius: 7px; font-size: 14px; font-weight: 650; letter-spacing: -.15px;
  box-shadow: none; transition: background .18s, border-color .18s, box-shadow .18s, transform .18s;
}
.button-primary { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.button-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); box-shadow: 0 4px 12px #00000020; }
.button-large { padding: 15px 23px; min-height: 54px; font-size: 14px; }
.button-small, button.button-small[type=submit] { min-height: 44px; font-size: 14px; padding: 9px 15px; }
.button-secondary { background: var(--surface); color: var(--ink); border-color: var(--line); }
.button-secondary:hover { background: var(--surface); border-color: var(--line); }
.button .icon, .text-link .icon, .section-link .icon { width: 17px; height: 17px; }
.text-link, .section-link { font-size: 14px; font-weight: 650; color: var(--ink); min-height: 44px; }
.section-link:hover, .text-link:hover { color: var(--accent); }
.eyebrow { color: var(--muted); font: 400 14px/1.7 var(--mono); letter-spacing: 1.6px; text-transform: uppercase; }
.eyebrow::before { display: none; }
.eyebrow-line { display: inline-block; width: 24px; height: 2px; background: var(--accent); vertical-align: middle; margin-right: 10px; }
.lede { color: var(--muted); font-size: 17px; line-height: 1.85; }
.check-list li { font-size: 14px; line-height: 1.9; }
.check-list .icon { color: var(--accent); }
.code-comment { color: var(--muted); }
.code-tag { color: var(--ink); }
.code-string { color: var(--muted); }
.code-block { background: var(--surface); border-color: var(--line); border-radius: 8px; color: var(--ink); }
.code-block .code-header { background: var(--surface); color: var(--ink); border-color: var(--line); font-size: 14px; }
.code-block pre { font-size: 14px; }
.code-block button { color: var(--ink); border-color: var(--line); }
/* The same identity in daily use */
.layout-app { background: var(--surface); }
.sidebar { background: var(--surface); border-color: var(--line); color: var(--ink); }
.sidebar .brand { color: var(--ink); }
.workspace-chip { background: var(--surface); border-color: var(--line); }
.workspace-chip strong { color: var(--ink); font-size: 14px; }
.workspace-chip small { color: var(--muted); font: 14px/1.5 var(--mono); }
.workspace-avatar { color: var(--ink); background: var(--surface); }
.side-nav a, .nav-button { color: var(--ink); font-size: 14px; font-weight: 500; min-height: 44px; }
.side-nav a.active { background: var(--surface); color: var(--ink); box-shadow: inset 2px 0 #00000020; }
.side-nav a:hover, .nav-button:hover { background: var(--surface); color: var(--ink); }
.sidebar-note { color: var(--muted); border-color: var(--line); background: var(--surface); font-size: 14px; }
.sidebar-note a { color: var(--ink); }
.sidebar-bottom { border-color: var(--line); }
.sidebar-version { color: var(--muted); font: 14px/1.6 var(--mono); }
.sidebar-version span { color: var(--muted); }
.topbar { border-color: var(--line); background: #000000ed; }
.breadcrumb, .breadcrumb strong { font-size: 14px; }
.breadcrumb { color: var(--muted); }
.breadcrumb strong { color: var(--muted); }
.avatar { color: var(--accent); background: var(--surface); }
.account-name { font-size: 14px; color: var(--muted); }
.page-heading h1 { font: 650 33px/1.25 var(--display); letter-spacing: -1.25px; }
.page-heading p { font-size: 16px; line-height: 1.85; }
.page-heading .eyebrow { font-size: 14px; }
.card, .metric { border-color: var(--line); border-radius: 10px; box-shadow: 0 2px 4px #00000002; }
.card-header { background: var(--surface); border-color: var(--line); }
.card-header h2 { font: 650 17px/1.45 var(--display); letter-spacing: -.4px; }
.card-header p, .card-body p, .card-body>p { font-size: 16px; line-height: 1.8; }
.card-body h2 { font-family: var(--display); font-weight: 650; letter-spacing: -.6px; }
.card-body h3 { font-family: var(--display); font-weight: 650; }
.metric-label { color: var(--muted); font-size: 14px; font-weight: 550; }
.metric-value { font-family: var(--display); font-weight: 600; letter-spacing: -1.6px; font-size: 37px; }
.metric .help { font-size: 14px; }
.metric-date { font-size: 27px; }
.metric-value small { font-size: 14px; letter-spacing: 0; font-weight: 400; }
label, legend { font-size: 14px; color: var(--muted); font-weight: 600; }
input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea { font: 400 14px/1.6 var(--body); background: var(--surface); color: var(--ink); border-color: var(--line); border-radius: 6px; min-height: 45px; }
input:not([type=checkbox]):not([type=radio]):focus, select:focus, textarea:focus { border-color: var(--line); box-shadow: 0 0 0 3px #00000020; }
input::placeholder, textarea::placeholder { color: var(--muted); }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }
textarea.code-input { font: 14px/1.8 var(--mono); }
.help, .check, .checkbox-label { font-size: 14px; color: var(--muted); }
.help { line-height: 1.8; }
fieldset { border-color: var(--line); border-radius: 8px; }
.editor-row { background: var(--surface); border-color: var(--line); border-radius: 8px; }
.card-body details>summary { color: var(--muted); font-size: 14px; }
.payload-list dt { color: var(--muted); font: 14px/1.6 var(--mono); }
.payload-list dd { font-size: 14px; }
table th { color: var(--muted); background: var(--surface); font: 14px/1.7 var(--mono); letter-spacing: .5px; }
table td { font-size: 14px; color: var(--muted); }
table td strong { color: var(--ink); }
.badge { border-radius: 5px; font: 500 14px/1.5 var(--body); }
.badge-active, .badge-accepted, .badge-succeeded { color: var(--muted); background: var(--surface); border-color: var(--line); }
.badge-warning, .badge-quarantined, .badge-outcome_unknown { color: var(--muted); background: var(--surface); border-color: var(--line); }
.badge-current_plan { color: var(--accent); background: var(--surface); border-color: var(--line); }
.notice { border-radius: 7px; font-size: 14px; line-height: 1.8; }
.notice-info { background: var(--surface); border-color: var(--line); color: var(--muted); }
.notice-success { background: var(--surface); border-color: var(--line); color: var(--muted); }
.tabs a, .tabs button { font-size: 14px; }
.tabs a.active { color: var(--accent); border-bottom-color: var(--line); }
.empty-state h2, .empty-state h3 { font: 600 24px/1.4 var(--display); letter-spacing: -.7px; }
.empty-state p { font-size: 16px; line-height: 1.8; }
.empty-glyph { color: var(--muted); }
.onboarding { background: var(--surface); border-color: var(--line); }
.onboarding h2 { font: 650 30px/1.3 var(--display); letter-spacing: -1px; }
.onboarding p { font-size: 16px; }
progress { accent-color: var(--accent); }
progress::-webkit-progress-bar { background: var(--surface); }
progress::-webkit-progress-value { background: var(--accent); }
progress::-moz-progress-bar { background: var(--accent); }
.billing-summary { margin-bottom: 24px; background: var(--surface); }
.billing-summary .card-body { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.billing-summary p { margin-top: 7px; }
.app-footer { color: var(--muted); font: 14px/1.8 var(--mono); }
.app-footer a { color: var(--muted); }
.layout-auth { background: var(--paper); isolation: isolate; }
.layout-auth::before {
  background-image: linear-gradient(#d7b77c0a 1px, transparent 1px), linear-gradient(90deg, #d7b77c0a 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(transparent 10%, #000 48%, transparent 100%);
}
.auth-header { border-bottom: 1px solid var(--line); gap: 12px; }
.auth-card { border: 1px solid #414743; background: var(--surface); border-radius: 12px; box-shadow: 0 30px 80px -36px #000000a6; padding: 38px; }
.auth-card::before { top: -1px; left: -1px; width: 38px; height: 38px; border-top: 2px solid var(--accent); border-left: 2px solid var(--accent); border-radius: 12px 0 0; background: transparent; pointer-events: none; }
.auth-card::after { content: ""; position: absolute; bottom: -1px; right: -1px; width: 38px; height: 38px; border-bottom: 1px solid #8d7752; border-right: 1px solid #8d7752; border-radius: 0 0 12px; pointer-events: none; }
.auth-card h1 { font: 650 34px/1.2 var(--display); letter-spacing: -1.2px; }
.auth-card>p, .auth-card .lede, .auth-card.stack>div>p.lede { font-size: 16px; line-height: 1.8; }
.auth-card .eyebrow { font-size: 14px; }
.auth-card .help, .auth-card .notice, .auth-card .auth-links, .auth-card .checkbox-label, .auth-card .field-error { font-size: 14px; line-height: 1.8; }
.auth-card .auth-links a { color: var(--accent); font-size: 14px; min-height: 44px; display: inline-flex; align-items: center; }
.auth-card form>a, .auth-card .stack>a:not(.button) { min-height: 44px; display: inline-flex; align-items: center; font-size: 14px; }
.layout-auth input:not([type=checkbox]):not([type=radio]):not([type=hidden]), .layout-auth select, .layout-auth textarea { font-size: 16px; min-height: 52px; }
.layout-auth .password-field button, .layout-auth .password-wrap button { top: 4px; right: 4px; height: 44px; min-height: 44px; font-size: 14px; }
.layout-auth:not(.ui-ready) [data-toggle-password], .layout-auth:not(.ui-ready) [data-copy-target] { display: none; }
.auth-note { color: #abb4b7; font-size: 14px; }
.auth-footer, .auth-footer a { color: #abb4b7; font: 14px/1.8 var(--body); }
.auth-footer a { display: inline-flex; align-items: center; min-height: 44px; }
.auth-header .text-link { color: var(--muted); font-size: 14px; }
.recovery-codes, .auth-card pre.code-block { background: var(--surface); border-color: var(--line); color: var(--muted); font-family: var(--mono); font-size: 13px; }
/* Dark surfaces, semantic states and the bastion plan. */
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline-color: var(--accent); }
.skip-link, .skip-link:hover { color: var(--accent-ink); background: var(--accent); }
.button-primary, button[type=submit] { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.button-primary:hover, button[type=submit]:hover { color: var(--accent-ink); background: var(--accent-hover); border-color: var(--accent-hover); box-shadow: 0 4px 18px #d7b77c14; }
.button-secondary, button.button-secondary[type=submit] { color: var(--ink); background: var(--surface-soft); border-color: #687375; }
.button-secondary:hover, button.button-secondary[type=submit]:hover { color: var(--ink); background: #272f33; border-color: #697477; }
.button-danger, button.button-danger[type=submit] { color: #ffdad5; background: #482721; border-color: #855148; }
.button-danger:hover, button.button-danger[type=submit]:hover { color: #fff0ed; background: #64362d; border-color: #ad6b5d; }
.button-light { background: var(--accent); color: var(--accent-ink); }
.button-light:hover { background: var(--accent-hover); }
.section-link:hover, .text-link:hover { color: var(--accent-hover); }
.eyebrow-line { background: var(--accent); }
.eyebrow { color: #b6a382; }
.section-link { border-bottom-color: #786443; }
.check-list li { color: var(--muted); }
.check-list .icon { color: var(--accent); }
.code-block .code-header { background: #1a2125; color: #c1c6c7; border-color: #384146; }
.code-comment { color: #a0acae; }
.code-tag { color: #e2c48f; }
.code-string { color: #aacaaf; }
.code-block { background: #101518; color: #d6dfdc; }
.code-block button, .copy-button { color: #e0d3ba; border-color: #646258; background: #282d2b; font-size: 14px; min-height: 44px; padding: 10px 14px; }
.code-block button:hover, .copy-button:hover { background: #383f3b; }
p code, li code, td code, dd code, .help code { background: #20282c; color: #e3d0aa; border-color: #404b4d; }
.side-nav>a.active { color: #ead0a0; background: #302b22; border-color: #514532; box-shadow: inset 2px 0 var(--accent); }
.sidebar { background: #101416; border-color: #30383b; scrollbar-color: #505856 transparent; }
.topbar { background: #111619ed; }
.layout-app { background: var(--paper); }
.card, .metric, .card-header { background: var(--surface); }
.card-footer { background: #1a2023; }
.workspace-chip, .sidebar-note { background: #1a2023; }
.workspace-avatar, .avatar { color: var(--accent); background: #302b22; border-color: #514b3f; }
.side-nav>a:hover, .side-nav a:hover, .nav-button:hover, .nav-button[type=submit]:hover { background: #232b2e; color: var(--ink); border-color: transparent; box-shadow: none; }
.nav-button, .nav-button[type=submit] { color: #b9c1c3; background: transparent; border-color: transparent; box-shadow: none; }
.side-nav-secondary, .sidebar-bottom { border-color: var(--line); }
.nav-close:hover { background: var(--surface-soft); }
label, legend { color: #d4d9d8; }
input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea { color: var(--ink); background: #0f1417; border-color: #667276; }
input:hover, select:hover, textarea:hover { border-color: #89928e; }
input:not([type=checkbox]):not([type=radio]):focus, select:focus, textarea:focus { border-color: var(--accent); outline-color: var(--accent); box-shadow: 0 0 0 3px #d7b77c1c; }
input[readonly], textarea[readonly] { background: #1c2428; color: #c0c9ca; }
input::placeholder, textarea::placeholder { color: #a0aaad; }
input[type=file]::file-selector-button, .password-field button, .password-wrap button { background: #303b3f; color: var(--ink); }
option { color: var(--ink); background: #14191c; }
.editor-row { background: #1a2125; border-color: #3a454a; }
.text-success { color: #a2d7b6; }
.danger-zone, .danger-zone .card-header { border-color: #754e45; }
.danger-zone h2 { color: #f0b3a5; }
.notice, .notice-info { color: #c1d6e4; background: #1b2b34; border-color: #48606d; border-left-color: #91b7cd; }
.notice-warning { color: #eed1a0; background: #30291d; border-color: #665437; border-left-color: #d7b77c; }
.notice-error { color: #f2c1b7; background: #33211f; border-color: #755048; border-left-color: #df9c8c; }
.notice-success { color: #b6dfc4; background: #1b2c24; border-color: #456951; border-left-color: #90c6a1; }
.notice a { color: inherit; text-decoration: underline; }
.badge { color: #c1c9ca; background: #2b3438; border: 1px solid #465358; }
.badge-active, .badge-accepted, .badge-inbox, .badge-succeeded, .badge-success, .badge-published, .badge-operational { color: #b5dec2; background: #21352a; border-color: #4b7059; }
.badge-warning, .badge-quarantined, .badge-running, .badge-pending, .badge-unconfigured, .badge-outcome_unknown, .badge-unscanned { color: #eed09b; background: #362e20; border-color: #726044; }
.badge-failed, .badge-disabled, .badge-suspended, .badge-error, .badge-unavailable { color: #f2bbb0; background: #3d2926; border-color: #7a534b; }
.badge-queued, .badge-html, .badge-server, .badge-free, .badge-current_plan { color: #c0d4df; background: #24333c; border-color: #536772; }
.badge-archived, .badge-paused, .badge-skipped, .badge-draft { color: #c5c8c5; background: #2a3032; border-color: #4c565a; }
.tabs a.active { color: var(--accent); border-bottom-color: var(--accent); }
.tabs a:hover, .tabs button:hover { background: #20272a; }
table th { color: #b7c0c2; background: #1a2226; }
table td { color: #c7cfd0; }
table td strong { color: var(--ink); }
table tbody tr:hover { background: #1c2428; }
.onboarding { background: #20241f; border-color: #56533d; }
progress::-webkit-progress-bar, .progress { background: #303a3f; }
progress::-webkit-progress-value, .progress span { background: var(--accent); }
progress::-moz-progress-bar { background: var(--accent); }
.recovery-code, .recovery-codes, .mfa-secret { color: #e6d5b8; background: #242820; border-color: #62634c; }
.toast-region { background: #2e362c; color: var(--ink); border: 1px solid #7f815d; }
/* Compact laptops and tablets */
@media (max-width: 1199px) {
.container { width: calc(100% - 64px); }
}
@media (max-width: 1023px) {
.sidebar { visibility: hidden; }
.nav-open .sidebar { visibility: visible; }
.sidebar-brand { padding-top: 30px; }
.sidebar .nav-close { color: var(--ink); }
.nav-scrim { background: #00000080; }
}
@media (max-width: 767px) {
.container { width: calc(100% - 40px); }
.eyebrow-line { width: 17px; margin-right: 6px; }
.eyebrow { font-size: 14px; letter-spacing: 1.1px; }
.check-list li { font-size: 14px; }
.main { padding: 26px 20px 35px; }
.page-heading h1 { font-size: 29px; letter-spacing: -1.1px; }
.page-heading p { font-size: 16px; }
.page-heading .eyebrow { font-size: 14px; }
.topbar { padding-inline: 20px; }
.breadcrumb strong { font-size: 14px; max-width: 180px; }
.metric { padding: 19px; }
.metric-value { font-size: 30px; letter-spacing: -1.2px; }
.metric-label { font-size: 14px; }
.metric .help { font-size: 14px; }
.metric-date { font-size: 24px; }
.card-header h2 { font-size: 16px; }
.card-body { padding: 22px; }
.card-body>p { font-size: 16px; }
.button, button[type=submit] { min-height: 46px; font-size: 14px; }
.button-small, button.button-small[type=submit] { min-height: 44px; font-size: 14px; }
input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea { font-size: 16px; min-height: 47px; }
label, legend { font-size: 14px; }
.help, .check, .checkbox-label { font-size: 14px; }
table.responsive td { font-size: 14px; }
table.responsive td::before { font-size: 14px; color: var(--muted); }
.badge { font-size: 14px; }
.notice { font-size: 14px; }
.payload-list dd { font-size: 14px; }
.payload-list dt { font-size: 14px; }
.onboarding h2 { font-size: 27px; }
.onboarding p { font-size: 16px; }
.billing-summary .card-body { align-items: flex-start; flex-direction: column; gap: 17px; }
.empty-state h2, .empty-state h3 { font-size: 22px; }
.auth-header { padding: 23px 20px; }
.auth-header .text-link { font-size: 14px; }
.auth-card { padding: 30px 25px; }
.auth-card h1 { font-size: 32px; }
.auth-card>p { font-size: 16px; }
.auth-note { font-size: 14px; }
.auth-footer, .auth-footer a { font-size: 14px; }
}
@media (max-width: 374px) {
.container { width: calc(100% - 32px); }
.main { padding-inline: 16px; }
.topbar { padding-inline: 16px; }
.auth-header { padding-inline: 16px; }
}
@media print {
:root { color-scheme: light; --paper: #fff; --surface: #fff; --surface-soft: #eee; --ink: #171c1f; --muted: #3f494e; --line: #bbb; --accent: #715121; }
body { color: #171c1f; background: #fff; }
}
.capacity-summary {padding:14px 16px;border:1px solid var(--line);border-radius:10px;display:grid;gap:6px}
.capacity-summary p {margin:0}
.capacity-summary strong {font-variant-numeric:tabular-nums}
.capacity-summary a {color:var(--accent)}
.verification-banner {display:flex;align-items:center;justify-content:space-between;gap:1rem}
.verification-banner>div {min-width:0}
.verification-banner p {margin:.35rem 0 0;overflow-wrap:anywhere}
.layout-app h1, .layout-app .page-heading p {overflow-wrap:anywhere}
.verification-banner>.button {flex-shrink:0}
.verification-card {max-width:54rem;margin:2rem auto}
.verification-card h1 {max-width:18ch}
.verification-address {padding:1.2rem;border:1px solid var(--line);border-radius:12px;display:grid;gap:.5rem;overflow-wrap:anywhere}
@media(max-width:600px) {
.verification-banner {align-items:stretch;flex-direction:column}
.verification-banner>.button {width:100%}
.verification-card {margin:1rem 0}
.verification-card .cluster {align-items:stretch;flex-direction:column}
}