/* The login (design board 6): one card on the Vault background, the Vault's own tokens. */
body.lg3 { margin: 0; min-height: 100vh; font-family: var(--gv-font-ui); color: var(--gv-tx);
  background: radial-gradient(1200px 700px at 0% 0%, var(--gv-bg-2), transparent 60%), var(--gv-bg); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.lg3-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 880px; margin: 0 auto; padding: 18px 16px 0; box-sizing: border-box; }
.lg3-top-brand { font-family: var(--gv-font-display); font-size: 18px; color: var(--gv-tx); }
.lg3-top-brand small { font-size: 13px; color: var(--gv-tx-3); }
.lg3-top-link { min-height: 36px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 999px; border: 1px solid var(--gv-line-strong);
  background: var(--gv-surface); color: var(--gv-tx); font-size: 14px; font-weight: 600; text-decoration: none; }
.lg3-top-link:hover { background: var(--gv-bg-2); }
.lg3-top-link:focus-visible { outline: 2px solid var(--gv-teal-deep); outline-offset: 2px; }
.lg3-main { min-height: calc(100vh - 60px); display: flex; flex-direction: column; align-items: center; gap: 40px; padding: 32px 16px 56px; box-sizing: border-box; }
.lg3-card { width: min(508px, 100%); box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; padding: 38px 34px 32px;
  background: var(--gv-surface); border: 1px solid var(--gv-line); border-radius: 28px; box-shadow: 0 24px 60px rgba(22, 25, 28, .10); }
.lg3-brand { margin: 0 0 4px; font-family: var(--gv-font-display); font-weight: 400; font-size: 28px; letter-spacing: -.01em; color: var(--gv-tx); }
.lg3-brand small { font-size: 17px; color: var(--gv-tx-3); }
.lg3-lede { margin: 0 0 6px; color: var(--gv-tx-2); font-size: 15px; }
.lg3-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.lg3-field span { font-size: 13px; color: var(--gv-tx-2); }
.lg3-field input { min-height: 44px; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--gv-line-strong); background: var(--gv-surface);
  color: var(--gv-tx); font: inherit; font-size: 15px; box-sizing: border-box; width: 100%; }
.lg3-field input:focus-visible { outline: 2px solid var(--gv-teal); outline-offset: 1px; }
.lg3-btn { display: flex; align-items: center; justify-content: flex-start; width: 100%; min-height: 40px; box-sizing: border-box; padding: 0 18px;
  border: 0; border-radius: 999px; background: var(--gv-teal); color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; text-decoration: none; }
.lg3-btn:disabled { opacity: .6; }
.lg3-btn:focus-visible, .lg3-link:focus-visible { outline: 2px solid var(--gv-teal-deep); outline-offset: 2px; }
.lg3-btn.ghost { background: var(--gv-surface); color: var(--gv-tx); border: 1px solid var(--gv-line-strong); justify-content: center; }
.lg3-foot { margin: 6px 0 0; color: var(--gv-tx-3); font-size: 13px; line-height: 1.6; }
.lg3-link { padding: 0; border: 0; background: none; color: var(--gv-teal-deep); font: inherit; cursor: pointer; }
.lg3-staff { display: flex; flex-direction: column; gap: 10px; }
.lg3-alert { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--gv-danger-bg); border: 1px solid var(--gv-danger-line); color: var(--gv-tx); font-size: 14px; }
@media (max-width: 520px) { .lg3-card { padding: 28px 20px 24px; border-radius: 22px; } }

/* Hjälp under inloggningen: öppen för alla, ingen inloggning. */
.lg3-help { width: min(880px, 100%); box-sizing: border-box; scroll-margin-top: 16px; }
.lg3-eyebrow { margin: 0 0 4px; color: var(--gv-teal-deep); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.lg3-h2 { margin: 28px 0 14px; font-family: var(--gv-font-display); font-weight: 400; font-size: 24px; color: var(--gv-tx); scroll-margin-top: 16px; }
.lg3-eyebrow + .lg3-h2 { margin-top: 0; }
.lg3-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.lg3-steps li { display: flex; gap: 12px; padding: 18px; background: var(--gv-surface); border: 1px solid var(--gv-line); border-radius: 18px; }
.lg3-steps b { display: block; font-size: 15px; margin-bottom: 4px; }
.lg3-steps span:not(.lg3-num) { color: var(--gv-tx-2); font-size: 14px; line-height: 1.5; }
.lg3-num { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--gv-teal-wash); color: var(--gv-teal-deep); font-weight: 700; font-size: 14px; }
.lg3-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.lg3-need { padding: 18px; background: var(--gv-surface); border: 1px solid var(--gv-line); border-radius: 18px; display: flex; flex-direction: column; gap: 8px; }
.lg3-need[data-need="ssh"] { grid-row: span 3; }
.lg3-need h3 { margin: 0; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.lg3-need p { margin: 0; color: var(--gv-tx-2); font-size: 14px; line-height: 1.5; }
.lg3-need.is-soon { opacity: .75; }
.lg3-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--gv-warn-bg); color: var(--gv-warn); border: 1px solid var(--gv-warn-line); }
.lg3-opts { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; }
.lg3-opts li { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-top: 1px solid var(--gv-line); }
.lg3-opts li > b { font-size: 14px; }
.lg3-opts li > span { color: var(--gv-tx-2); font-size: 13px; }
.lg3-dl { align-self: flex-start; display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; margin-top: 4px; border-radius: 999px;
  background: var(--gv-teal); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; }
.lg3-dl::after { content: "↗"; margin-left: 6px; font-weight: 400; }
.lg3-dl:focus-visible { outline: 2px solid var(--gv-teal-deep); outline-offset: 2px; }
.lg3-dl.is-off { background: var(--gv-bg-2); color: var(--gv-tx-3); cursor: not-allowed; }
.lg3-dl.is-off::after { content: none; }
.lg3-how summary, .lg3-faq summary { cursor: pointer; color: var(--gv-teal-deep); font-size: 13px; font-weight: 600; }
.lg3-how p { margin: 6px 0 0; font-size: 13px; }
kbd, .lg3-help code { font-family: var(--gv-font-mono, ui-monospace, monospace); font-size: 12px; padding: 1px 6px; border-radius: 6px; background: var(--gv-bg-2); border: 1px solid var(--gv-line); }
.lg3-faq { background: var(--gv-surface); border: 1px solid var(--gv-line); border-radius: 18px; overflow: hidden; }
.lg3-faq details { border-top: 1px solid var(--gv-line); }
.lg3-faq details:first-child { border-top: 0; }
.lg3-faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; padding: 0 18px; color: var(--gv-tx); font-size: 15px; }
.lg3-faq summary::-webkit-details-marker { display: none; }
.lg3-faq summary::after { content: "+"; color: var(--gv-tx-3); font-size: 20px; font-weight: 400; }
.lg3-faq details[open] summary::after { content: "−"; }
.lg3-faq summary:focus-visible { outline: 2px solid var(--gv-teal-deep); outline-offset: -2px; }
.lg3-faq p { margin: 0; padding: 0 18px 16px; color: var(--gv-tx-2); font-size: 14px; line-height: 1.6; }
.lg3-guide { margin-top: 24px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.lg3-guide .lg3-btn { width: auto; }
.lg3-guide .lg3-foot { margin: 0; flex: 1 1 260px; }
@media (max-width: 720px) {
  .lg3-steps, .lg3-cards { grid-template-columns: 1fr; }
  .lg3-need[data-need="ssh"] { grid-row: auto; }
}
.lg3-staff[hidden] { display: none; }

/* Driftinfo on the login page (2026-09-27) */
.lg3-notices { width: min(460px, 100%); margin: 0 auto 14px; display: grid; gap: 8px; }
.lg3-notice { padding: 12px 14px; border-radius: 12px; background: #f4f6f7; border: 1px solid #e4e7ea; display: grid; gap: 4px; font-size: 14px; }
.lg3-notice b { font-size: 14px; }
.lg3-notice span { color: #5d646b; font-size: 13.5px; }
.lg3-notice.is-warning { background: #fff7e8; border-color: #f2d59a; }
.lg3-notice.is-maintenance { background: #e9f5f5; border-color: #b9dedf; }

/* the language switch at the top right of the login card (owner 2026-09-27: English default, Swedish available) */
.lg3-card { position: relative; }
.lg3-lang { position: absolute; top: 14px; right: 14px; display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--gv-bg-2, rgba(0, 0, 0, .05)); }
.lg3-lang button { min-height: 28px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: var(--gv-tx-3); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.lg3-lang button[aria-current="true"] { background: var(--gv-surface); color: var(--gv-tx); box-shadow: 0 1px 3px rgba(22, 25, 28, .12); }
.lg3-lang button:focus-visible { outline: 2px solid var(--gv-teal-deep); outline-offset: 2px; }
@media (max-width: 520px) { .lg3-lang { position: static; align-self: flex-end; } }

/* Security review 2026-10-05: show/hide the password, the Caps Lock hint, "Glömt lösenordet?", the
   second step, and the page Konto och säkerhet (/konto). Only the tokens above; nothing new. */
.lg3-field > label { display: block; }
.lg3-pw { position: relative; display: flex; }
.lg3-pw input { padding-right: 78px; }
.lg3-eye { position: absolute; top: 4px; right: 4px; bottom: 4px; min-width: 64px; padding: 0 12px; border: 0; border-radius: 9px;
  background: var(--gv-bg-2); color: var(--gv-tx-2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.lg3-eye:hover { color: var(--gv-tx); }
.lg3-eye:focus-visible { outline: 2px solid var(--gv-teal-deep); outline-offset: 1px; }
.lg3-hint { margin: 2px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--gv-warn-bg); border: 1px solid var(--gv-warn-line);
  color: var(--gv-tx); font-size: 13px; }
.lg3-note { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--gv-bg-2); color: var(--gv-tx-2); font-size: 13.5px; line-height: 1.55; }
.lg3-ok { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--gv-ok-bg); border: 1px solid var(--gv-ok-line); color: var(--gv-tx); font-size: 14px; }
.lg3-hint[hidden], .lg3-note[hidden], .lg3-ok[hidden], .lg3-alert[hidden], #login[hidden], #code-step[hidden] { display: none; }
#code { font-family: var(--gv-font-mono); font-size: 18px; letter-spacing: .12em; }

.kt { width: min(620px, 100%); display: flex; flex-direction: column; gap: 16px; }
.kt .lg3-card { width: 100%; gap: 12px; padding: 26px 26px 22px; border-radius: 22px; }
.kt h2 { margin: 0; font-family: var(--gv-font-display); font-weight: 400; font-size: 21px; color: var(--gv-tx); }
.kt p { margin: 0; color: var(--gv-tx-2); font-size: 14.5px; line-height: 1.55; }
.kt p.lg3-alert, .kt p.lg3-ok, .kt p.lg3-hint { color: var(--gv-tx); }
.kt-who b { display: block; font-size: 16px; color: var(--gv-tx); }
.kt-who small { color: var(--gv-tx-3); font-size: 13px; }
.kt-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.kt-acts .lg3-btn { width: auto; justify-content: center; }
.kt-btn { min-height: 36px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--gv-line-strong); background: var(--gv-surface);
  color: var(--gv-tx); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.kt-btn:hover { background: var(--gv-bg-2); }
.kt-btn:focus-visible { outline: 2px solid var(--gv-teal-deep); outline-offset: 2px; }
.kt-btn.danger { color: var(--gv-danger); border-color: var(--gv-danger-line); }
.kt-btn:disabled, .kt .lg3-btn:disabled { opacity: .55; cursor: default; }
.kt-meter { height: 6px; border-radius: 999px; background: var(--gv-bg-2); overflow: hidden; }
.kt-meter i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--gv-warn-line); transition: width .15s; }
.kt-meter.ok i { background: var(--gv-ok); }
.kt-meter-words { font-size: 13px; color: var(--gv-tx-3); }
.kt-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.kt-rows li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--gv-line); }
.kt-rows li:first-child { border-top: 0; }
.kt-rows li > div { flex: 1 1 auto; min-width: 0; }
.kt-rows b { display: block; font-size: 14.5px; color: var(--gv-tx); }
.kt-rows small { color: var(--gv-tx-3); font-size: 13px; }
.kt-pill { flex: none; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--gv-teal-wash); color: var(--gv-teal-deep); }
.kt-pill.ok { background: var(--gv-ok-bg); color: var(--gv-ok); }
.kt-pill.warn { background: var(--gv-warn-bg); color: var(--gv-warn); }
.kt-qr { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.kt-qr img { width: 190px; height: 190px; border-radius: 12px; border: 1px solid var(--gv-line); background: #fff; }
.kt-secret { font-family: var(--gv-font-mono); font-size: 14px; padding: 10px 12px; border-radius: 10px; background: var(--gv-bg-2); color: var(--gv-tx);
  word-break: break-all; user-select: all; }
.kt-codes { list-style: none; margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--gv-bg-2); display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 18px;
  font-family: var(--gv-font-mono); font-size: 14px; color: var(--gv-tx); }
.kt ol { margin: 0; padding-left: 20px; color: var(--gv-tx-2); font-size: 14.5px; line-height: 1.6; }
@media (max-width: 520px) { .kt .lg3-card { padding: 22px 18px 18px; } .kt-codes { grid-template-columns: 1fr; } }