/* 2FA Keyring: shared header and footer for every page (website and app).
   Uses the colour tokens each page's stylesheet defines: --ink, --muted, --line,
   --surface, --accent, --accent-ink, --ok, --ok-soft, --font-display, --font-code. */
.skip{position:absolute;left:-999px;top:8px;background:var(--surface);color:var(--ink);padding:8px 12px;border-radius:8px;z-index:30}
.skip:focus{left:max(16px,env(safe-area-inset-left,0px))}

.chrome-wrap{
  max-width:1120px;margin-inline:auto;
  padding-left:max(20px,env(safe-area-inset-left,0px));
  padding-right:max(20px,env(safe-area-inset-right,0px));
}

.site-head{border-bottom:1px solid var(--line)}
.site-head .chrome-wrap{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;padding-block:14px;flex-wrap:wrap}
.logo{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font:700 18px/1 var(--font-display);letter-spacing:-.01em}
.logo img{width:30px;height:30px}
.nav{display:flex;align-items:center;gap:6px 22px;flex-wrap:wrap}
.nav a:not(.nav-cta){color:var(--muted);text-decoration:none;font-weight:600;font-size:15px}
.nav a:not(.nav-cta):hover,.nav a[aria-current="page"]{color:var(--ink)}
.nav-cta{
  display:inline-flex;align-items:center;min-height:38px;padding:8px 14px;border-radius:10px;
  font:650 14px/1 var(--font-display);text-decoration:none;background:var(--accent);color:var(--accent-ink);border:1px solid var(--accent);
}
.nav-cta:hover{filter:brightness(1.08)}
@media (max-width:640px){.nav .hide-sm{display:none}}

/* Vault status shown in the header on the app page */
.vault-state{
  display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:6px 11px;border-radius:999px;
  font:600 12px/1 var(--font-code);letter-spacing:.02em;border:1px solid var(--line);color:var(--muted);background:var(--surface);
}
.vault-state::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--muted)}
.vault-state[data-state="unlocked"]{color:var(--ok);background:var(--ok-soft);border-color:transparent}
.vault-state[data-state="unlocked"]::before{background:var(--ok)}

.site-foot{padding-block:36px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.site-foot .chrome-wrap{display:flex;justify-content:space-between;gap:16px 32px;flex-wrap:wrap}
.site-foot p{margin:0}
.site-foot nav{display:flex;gap:8px 20px;flex-wrap:wrap}
.site-foot a{color:var(--muted)}
.site-foot a:hover{color:var(--ink)}