.portal-body {
  min-width: 0;
  max-width: 760px;
  overflow-wrap: anywhere;
}
.portal-body h1 {
  font-size: clamp(36px, 5vw, 60px);
  letter-spacing: -.04em;
  margin-block: 16px 24px;
}
.portal-body h2 {
  font-size: clamp(26px, 3vw, 36px);
  margin-block: 28px 18px;
}
.portal-body section {
  border-top: 1px solid var(--rule);
  margin-top: 32px;
}
.portal-body form {
  display: grid;
  gap: 12px;
  margin-block: 24px;
}
.portal-body label {
  color: var(--ink);
  font-weight: 600;
}
.portal-body input,
.portal-body select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--rule);
  color: var(--ink);
  font: inherit;
  border-radius: 0;
}
.portal-body button,
.site-header button {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--rule);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.portal-body button:hover,
.site-header button:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.portal-body button[type="submit"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  font-weight: 600;
}
.portal-body button[type="submit"]:disabled { opacity: .65; }
button:disabled {
  color: var(--muted);
  cursor: wait;
}
.portal-body a,
.portal-body summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
}
.portal-body pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
  padding: 16px;
  border: 1px solid var(--rule);
  background: var(--panel);
  color: var(--ink);
  font-size: 14px;
}
.portal-body article {
  padding-block: 18px;
  border-bottom: 1px solid var(--rule);
}
.portal-body article button,
.portal-body article a {
  margin: 8px 12px 0 0;
}
.portal-body dd { margin: 0 0 18px; color: var(--sub); }
#message { min-height: 28px; color: var(--accent); }
#connection { margin-top: 20px; }
[hidden] { display: none !important; }
@media (max-width: 760px) {
  .site-header { flex-direction: column; align-items: flex-start; gap: 12px; }
}
@media (max-width: 420px) {
  .portal-body button { width: 100%; }
  .portal-body pre { padding: 12px; }
  .site-header nav { gap: 0 8px; flex-wrap: nowrap; width: 100%; }
  .site-header nav a { white-space: nowrap; }
  .site-header nav button { padding: 0 8px; font: inherit; white-space: nowrap; }
}

.account-layout { align-items: start; min-height: 65vh; }
.account-layout .portal-body { max-width: 560px; padding: 32px; background: var(--panel); border-top: 2px solid var(--accent); }
.account-layout h1 { margin-top: 18px; }
.portal-body noscript p { padding: 16px; border: 1px solid var(--rule); }
@media (max-width: 760px) {
  .account-layout .portal-body { padding: 24px; width: 100%; }
}
@media (max-width: 420px) {
  .site-header nav { flex-wrap: wrap; }
  .account-layout .portal-body { padding: 20px; }
}

.footer-support {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.footer > div { min-width: 0; }
.portal-body .continue-button {
  padding: 10px 16px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--bg);
  font-weight: 600;
}
.site-header nav a { min-width: 44px; justify-content: center; }
@media (max-width: 420px) {
  .site-header nav { gap: 4px 12px; }
  .site-header nav a, .site-header nav button { min-height: 44px; }
  .footer-support { font-size: 13px; }
}

/* Shared portal affordances; colors and type come from the existing theme. */
.site-header nav {
  flex-wrap: wrap;
  max-width: 100%;
}
.site-header nav #logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  white-space: nowrap;
}
.portal-body details summary {
  display: list-item;
  width: fit-content;
  max-width: 100%;
  min-height: 44px;
  padding-block: 10px;
  cursor: pointer;
}
.portal-body details summary:hover { color: var(--accent); }
.portal-body details summary:focus-visible,
.site-header nav :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
#connect-empty { margin-block: 20px; }
#connect-empty a {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin-top: 12px;
  text-decoration: none;
  font-weight: 600;
}
.setup-guide li {
  padding: 8px 12px;
  border-left: 3px solid var(--rule);
}
.setup-guide li[data-state="done"] {
  border-left-color: var(--healthy);
  color: var(--ink);
}
.setup-guide li[aria-current="step"] {
  border-left-color: var(--accent);
  background: var(--panel);
  color: var(--ink);
  font-weight: 600;
}
.portal-body :is(a, button, summary) { min-width: 44px; }
.portal-body :is(a, button) { max-width: 100%; overflow-wrap: anywhere; }
@media (max-width: 420px) {
  .site-header nav { gap: 4px 12px; }
  #connect-empty a { width: 100%; justify-content: center; }
}
.why { color: var(--sub); font-size: 15px; }
.why strong { color: var(--ink); }
.what-happened { border: 1px solid var(--rule); border-left: 4px solid var(--healthy); background: var(--panel); padding: 16px 20px; margin-block: 20px; }
.what-happened h2 { margin-top: 0; }
.what-happened ol { padding-left: 1.2em; color: var(--sub); }
.portal-body #invite-field {
  display: grid;
  gap: 12px;
}
.connected-status {
  margin-left: 16px;
}
.dns-state {
  font-weight: 600;
}