body { margin: 0; background: var(--wt-color-bg); color: var(--wt-color-text); font-family: system-ui, sans-serif; line-height: 1.5; }
#portal { max-width: 30rem; margin: 3rem auto; padding: 1rem; }
header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.brand { text-decoration: none; color: var(--wt-color-text); font-size: 1.25rem; white-space: nowrap; }
.language { font-size: .8rem; display: grid; gap: .25rem; }
select { font: inherit; color: var(--wt-color-text); background: var(--wt-color-bg); border: 1px solid var(--wt-color-text-muted); border-radius: .35rem; padding: .35rem; }
h1 { font-size: 1.75rem; line-height: 1.2; margin: 0 0 1.5rem; }
h1:focus { outline: none; }
wt-input { margin: 1rem 0; }
.help { color: var(--wt-color-text-muted); font-size: .9rem; }
nav { display: grid; gap: .8rem; margin-top: 1.25rem; }
a, .text-button { color: var(--wt-color-primary); text-underline-offset: .15em; }
wt-button[variant="primary"]::part(button):hover { opacity: 1; }
button { font: inherit; cursor: pointer; }
.reveal { border: 0; background: transparent; color: var(--wt-color-text); padding: .4rem; font-size: .8rem; }
.text-button { border: 0; background: none; text-decoration: underline; padding: .8rem 0; }
button:disabled { cursor: default; opacity: .6; }
.disclosure { display: flex; align-items: start; gap: .4rem; margin: 1.25rem 0; }
:focus-visible { outline: 2px solid var(--wt-color-primary); outline-offset: 3px; }
@media (max-width: 480px) { #portal { margin: .75rem auto; padding: .75rem; } h1 { font-size: 1.5rem; } }

.venue-id { overflow-wrap: anywhere; margin-inline-start: 0; }
.business-choice { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--wt-space-2); }
.business-choice select { max-width: 100%; min-height: 2.75rem; }

.installation { border-block-start: 1px solid var(--wt-color-border); margin-block: 1rem; padding-block: .75rem; }
.installation dd { margin-inline-start: 0; overflow-wrap: anywhere; }

.usage { border-block: 1px solid var(--wt-color-border); margin-block: 1rem; padding-block: .75rem; }
.usage h3 { font-size: 1.25rem; margin-block: .83em; }
.usage h4 { font-size: 1.05rem; margin-block: 1em .4rem; }
.usage-groups { display: grid; gap: .75rem; }
.usage dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem 1rem; margin-block: .4rem; }
.usage dd { font-variant-numeric: tabular-nums; margin: 0; max-width: 14rem; overflow-wrap: anywhere; text-align: end; }

.snapshot-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: 1rem; }

.alert-choice { display: flex; align-items: flex-start; gap: .75rem; margin-block: 1rem; }
.alert-choice input { flex: none; width: auto; margin-top: .25rem; }

.remote-setup { overflow-wrap: anywhere; margin-block: 1rem; }
.remote-setup details { margin-block: 1rem; }
.remote-setup summary { cursor: pointer; }

.separator { align-items: center; display: flex; gap: .75rem; margin: 1.25rem 0; }
.separator::before, .separator::after { background: var(--wt-color-border); content: ""; flex: 1; height: 1px; }
.passkey-signin wt-button { width: 100%; }
.account-security { border-block-start: 1px solid var(--wt-color-border); margin-block-start: 1.5rem; padding-block-start: .5rem; }
.account-security h2 { font-size: 1.25rem; }
.account-security h3 { font-size: 1.05rem; }
.sessions, .passkeys { margin-block-start: 1.25rem; }
.passkeys { border-block-start: 1px solid var(--wt-color-border); padding-block-start: .5rem; }
.session-list, .passkey-list { list-style: none; margin: 1rem 0; padding: 0; }
.session-list li, .passkey-list li { align-items: center; display: flex; gap: 1rem; justify-content: space-between; margin: .75rem 0; }
.security-details { display: grid; gap: .2rem; min-width: 0; }
.security-label { color: var(--wt-color-text-muted); font-size: .85rem; }
.passkey-list span { min-width: 0; }
@media (max-width: 480px) {
  .session-list li, .passkey-list li { align-items: stretch; flex-direction: column; }
  .session-list wt-button, .passkey-list wt-button { align-self: start; }
}

.authenticator { border-block-start: 1px solid var(--wt-color-border); margin-block-start: 1.25rem; padding-block-start: .5rem; }
.factor-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: 1rem; }
.factor-proof-type { display: grid; gap: .3rem; }
.authenticator canvas { display: block; max-width: 100%; height: auto; margin-block: 1rem; }
.factor-secret, .factor-codes code { overflow-wrap: anywhere; font-size: .9rem; }
.factor-secret { display: block; }
.factor-codes { padding-inline-start: 1.25rem; }
.factor-codes li { margin-block: .5rem; }