@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/atkinson-hyperlegible-next.woff2') format('woff2');
}
:root {
  font-family: "Atkinson Hyperlegible Next", system-ui, "Segoe UI", sans-serif;
  font-size: 16px;
  color: #172f29;
  --muted: #475d54;
  --line: #d5dfda;
}
:root[data-text-size="large"] { font-size: 18px; }
:root[data-text-size="larger"] { font-size: 20px; }
body { line-height: 1.55; }
p, .notice, .error, .button, input, select, label { font-size: .9375rem; }
p, .muted, label, label small { color: #475d54; }
p { line-height: 1.65; }
h1 { font-size: 2rem; font-weight: 600; letter-spacing: -.5px; line-height: 1.2; }
.page-heading { align-items: center; }
.eyebrow, .nav-label { font-size: .75rem; letter-spacing: 1px; font-weight: 600; color: #4d6559; }
.sidebar { overflow-y: auto; }
.sidebar .nav-label, .workspace small, .edition small, .logout { color: #c6d9ce; }
.workspace { font-size: .8125rem; }
.workspace small, .edition, .edition small, .logout { font-size: .75rem; }
.nav-item { font-size: .9375rem; color: #d3e4da; padding-top: 11px; padding-bottom: 11px; }
.nav-item.active { background: #345b4b; color: #fff; font-weight: 600; }
.nav-item b { font-size: .75rem; }
.topbar { font-size: .875rem; min-height: 84px; height: auto; padding-top: 12px; padding-bottom: 12px; gap: 16px; }
.topbar-right { gap: 15px; flex-wrap: wrap; justify-content: flex-end; }
.version { color: #52665a; font-size: .75rem; }
.slash { color: #667d70; }
#current-user { font-size: .875rem; font-weight: 600; }
.button { padding: 11px 16px; font-weight: 600; line-height: 1.4; }
.primary { background: #215844; color: #fff; }
.secondary { color: #274f3e; border-color: #a9bdb0; }
.button:hover, .export-button:hover { box-shadow: 0 0 0 2px #c8dace; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #19714f; outline-offset: 3px; }
input, select { color: #1e3a2d; border-color: #a9bdb0; padding: 10px 12px; }
input::placeholder { color: #63786c; opacity: 1; }
label { font-weight: 500; }
label small { font-weight: 400; font-size: .8125rem; }
.stat { appearance: none; text-align: left; color: inherit; transition: border-color .15s, box-shadow .15s; }
.stat:hover { border-color: #688c77; box-shadow: 0 3px 14px #244e3514; }
.stat-top { font-size: .875rem; color: #3d594b; font-weight: 600; }
.stat-value { font-size: 2.2rem; flex-wrap: wrap; color: #153e2d; }
.stat-badge { font-size: .6875rem; color: #315d3a; font-weight: 600; }
.stat small, .table-footer, .footer { color: #4d6557; font-size: .75rem; }
.stat-icon { color: #496f59; }
.panel-heading h2 { font-size: 1.125rem; font-weight: 600; }
.panel-heading p { font-size: .875rem; color: #4b6355; }
.panel-heading { flex-wrap: wrap; }
.tag, .count { font-size: .75rem; color: #3e6245; border-color: #c4d4c5; }
.icon-button { color: #355c3e; border-color: #b8cbb7; width: 34px; height: 34px; }
.network-info b { font-size: .9375rem; font-weight: 600; }
.network-info small, .network-item>small { font-size: .75rem; color: #4d6750; }
.text-button { font-size: .875rem; color: #28523a; font-weight: 600; }
.network-icon { color: #426b42; }
.topology-footer { font-size: .75rem; color: #4d6557; flex-wrap: wrap; }
.topology text { font-size: 13px; fill: #2b513c; }
.topology .topo-caption { font-size: 11px; fill: #49664d; }
.topology-tools { display: flex; align-items: center; gap: 8px; }
.topology-tool { font-size: 1.125rem; }
.topology { transition: height .18s ease; }
.topology svg { width: 100%; height: 100%; overflow: visible; }
.topology line { stroke: #9bb7a5; stroke-width: 2; stroke-dasharray: 6 6; }
.topology circle { fill: #eef5ef; stroke: #b8d0be; stroke-width: 1.5; }
.topology .topology-node-label { font-size: 14px; font-weight: 600; }
.topology image { overflow: visible; }
.topology image { width: 34px; height: 34px; }
.device-platform { display: flex; align-items: center; gap: 10px; }
.device-platform > span { display: block; }
.platform-logo { width: 28px; height: 28px; object-fit: contain; flex: 0 0 auto; }
.platform-fallback { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #eef5ef; color: #315d48; font-weight: 700; }
.device-platform small { display: block; }
.mesh-panel.topology-minimized #topology, .mesh-panel.topology-minimized .topology-footer { display: none; }
.mesh-panel.topology-expanded { position: fixed; inset: 18px; z-index: 30; display: flex; flex-direction: column; padding: 20px; background: #fff; box-shadow: 0 20px 80px #102e2a55; }
.mesh-panel.topology-expanded #topology { flex: 1; min-height: 0; height: auto; }
.mesh-panel.topology-expanded .topology-footer { margin-top: auto; }
.topology-empty p { color: #47654a; }
.filters { flex-wrap: wrap; }
.filters input, .filters select { font-size: .8125rem; }
.filters input { width: 190px; }
.filters select { max-width: 190px; }
th { color: #3e5849; background: #edf3ee; font-size: .75rem; font-weight: 600; letter-spacing: .4px; }
td { color: #253f2e; font-size: .9375rem; }
td small, .platform small { font-size: .75rem; color: #4d6653; }
.endpoint-name b, .device-section td>b { font-size: .9375rem; font-weight: 600; }
.platform, .vrf-pill, .mono { font-size: .8125rem; color: #3a5640; }
.status { font-size: .8125rem; color: #2a643b; }
.status.stale { color: #805800; }
.export-button { font-size: .8125rem; color: #2d5738; border-color: #afc2ad; padding: 8px 11px; }
.row-actions { align-items: center; }
.delete-button { color: #8e3934; }
.empty-cell b { font-size: 1rem; color: #294e34; }
.empty-cell p { font-size: .9375rem; }
.activity-item { font-size: .9375rem; color: #36533d; }
.activity-item time { font-size: .75rem; color: #526c55; }
.activity-empty { font-size: .9375rem; color: #526c55; }
.vrf-card h3 { font-size: 1.125rem; }
.vrf-card dl { font-size: .9375rem; }
.vrf-card dt { color: #526c55; }
.vrf-card .delete-button { font-size: .8125rem; color: #8e3934; }
.notice { color: #624f16; background: #fff8dd; border-color: #dccb89; }
.error { color: #a12722!important; font-size: .9375rem; }
dialog { width: 580px; line-height: 1.55; }
.dialog-heading h2 { font-size: 1.5rem; font-weight: 600; }
.config-dialog { width: 980px; }
.config-dialog pre { font-size: .8125rem; color: #e4f1df; }
.dialog-actions { flex-wrap: wrap; }
.login-card { width: 460px; }
.login-card small { font-size: .75rem; color: #526c55; }
.toast { font-size: .9375rem; line-height: 1.5; }
.fingerprint-value { display: block; padding: 16px; margin: 16px 0; background: #edf4ef; color: #143f2b; border: 1px solid #a9c3b2; border-radius: 6px; overflow-wrap: anywhere; font-size: .9375rem; }
fieldset { border: 1px solid #b5c9b9; border-radius: 6px; padding: 16px; margin: 20px 0; }
legend { padding: 0 7px; font-weight: 600; }
.checkbox-label { flex-direction: row; align-items: flex-start; gap: 10px; font-size: .9375rem; font-weight: 400; }
.checkbox-label input { width: 19px; height: 19px; flex: 0 0 auto; margin: 3px 0 0; accent-color: #215844; }
.permission-tags { display: flex; flex-wrap: wrap; gap: 6px; max-width: 500px; white-space: normal; }
.permission-tags .vrf-pill { font-size: .75rem; }
.overview-panels.topology-view { display: block; }
.overview-panels.topology-view .network-panel { display: none; }
.overview-panels.topology-view .topology { height: 390px; }
.activity-section { margin-top: 0; }
.connection-end .row-actions { justify-content: flex-start; flex-wrap: wrap; gap: .5rem; }
.connection-end .row-actions .button { padding: .45rem .7rem; font-size: .8125rem; }
.site-direction { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: -.35rem 0 .75rem; color: #315a43; font-size: .875rem; font-weight: 600; }
.site-direction-arrow { color: #176c48; font-size: 1.7rem; line-height: 1; }
.site-addresses { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; margin: .75rem 0 1rem; }
.site-address-card { min-width: 0; padding: .9rem; border: 1px solid #cbd9d0; border-radius: 6px; }
.site-address-card h3 { margin: 0 0 .7rem; color: #254536; font-size: 1rem; }
.site-address-card label { margin: .5rem 0; }
.site-address-list { color: #3d594b; font-size: .8125rem; }
.site-address-list ul { padding-left: 1.2rem; margin: .5rem 0; }
.site-address-list li { margin: .25rem 0; }
.site-address-list small { display: block; color: #52665a; }
#config-preview-toggle { margin-top: 1rem; }
#config-dialog .dialog-actions #push-done { margin-right: auto; }
.compact-actions [data-close] { margin-right: auto; }
.compact-actions .button { padding: .5rem .75rem; font-size: .8125rem; }
@media(max-width:1100px) { .stats { grid-template-columns: repeat(2,1fr); } .page-heading { align-items: flex-start; flex-direction: column; } }
@media(max-width:850px) { .nav-item { font-size: 0; } .topbar { flex-wrap: wrap; } .topbar-right { justify-content: flex-start; } #current-user { font-size: .8125rem; } }
@media(max-width:520px) { .page-heading h1 { font-size: 1.65rem; } .topbar .version { display: none; } .topbar { padding: 12px 14px; } .heading-actions { flex-wrap: wrap; } .stat { padding: 16px 12px; } .stat-top { font-size: .8125rem; } .stat-badge { display: none; } .page-heading>.button, .dialog-actions .button, .heading-actions .button { font-size: .8125rem; } .filters input, .filters select { width: 100%; max-width: none; } .overview-panels.topology-view .topology { height: 270px; } .site-addresses { grid-template-columns: 1fr; } }
@media(prefers-reduced-motion:reduce) { .stat { transition: none; } }

/* Enrollment prerequisites are a locked action rather than an active request. */
.nav-item:disabled, .stat:disabled { cursor: not-allowed; }

.site-test-history { margin: 16px 0 20px; }
.site-test-history > h3 { margin: 0 0 10px; font-size: 1rem; }
.site-test-empty { margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); }
.site-test-run { margin: 10px 0; padding: 13px 15px; border: 1px solid var(--line); border-radius: 8px; background: #f8faf8; }
.site-test-run[data-state="passed"] { border-color: #9cc8aa; background: #eff8f1; }
.site-test-run[data-state="failed"] { border-color: #e3b37b; background: #fff7e5; }
.site-test-run header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.site-test-run time, .site-test-direction small { color: var(--muted); font-size: .8125rem; }
.site-test-directions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.site-test-direction { display: grid; gap: 3px; padding: 9px 11px; border-radius: 6px; background: #fff; }
.site-test-direction[data-state="passed"] { border-left: 3px solid #388151; }
.site-test-direction[data-state="partial"], .site-test-direction[data-state="failed"], .site-test-direction[data-state="not_run"] { border-left: 3px solid #c27b20; }
.site-test-direction span { font-size: .875rem; }
.site-test-dialog { width: 900px; }
.site-test-history { max-height: 58vh; overflow: auto; padding-right: 4px; }
.site-test-count { margin: 0 0 10px; }
.ssh-credentials { display: grid; gap: 2px; line-height: 1.35; font-size: .875rem; white-space: nowrap; }
.ssh-credentials b { color: var(--muted); font-weight: 500; }
@media (max-width: 700px) { .site-test-directions { grid-template-columns: 1fr; } .site-test-run header { align-items: flex-start; flex-direction: column; gap: 2px; } }