.login {
  min-height: calc(100vh - 4rem);
  display: grid;
  place-items: center;
  padding: var(--space-xl) var(--page-gutter);
}

.login__card {
  width: min(100%, 28rem);
}

.login__card h1,
.portal h1,
.portal h2 {
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

.login__lede {
  color: var(--color-ink-2);
  margin-bottom: var(--space-sm);
}

.portal {
  padding-block: var(--space-lg) var(--space-2xl);
  display: grid;
  gap: var(--space-lg);
}

.portal h1 {
  font-size: var(--text-display-s);
  margin: 0;
}

.portal h2 {
  font-size: var(--text-xl);
  margin: 0;
}

.stack {
  display: grid;
  gap: var(--space-sm);
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: end;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.table th,
.table td {
  text-align: left;
  padding: 0.55rem 0.4rem;
  border-bottom: var(--rule-hair) solid var(--color-rule);
  vertical-align: top;
}

.table th {
  color: var(--color-ink-3);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.table a {
  color: var(--color-accent);
}

.overdue td,
.ticket-critical {
  color: var(--color-err);
}

.ticket-warn {
  margin: 0;
  color: var(--color-err);
  font-size: var(--text-sm);
}

.card {
  border: var(--rule-hair) solid var(--color-rule);
  padding: var(--space-md);
  display: grid;
  gap: var(--space-sm);
}

.uptime {
  width: 100%;
  height: 2.4rem;
  display: block;
  background: var(--color-graphite);
}

.note {
  border-left: 2px solid var(--color-accent);
  padding-left: var(--space-sm);
  color: var(--color-ink-2);
}

.secret {
  font-family: var(--font-mono);
  background: var(--color-graphite);
  padding: var(--space-sm);
  border: var(--rule-hair) solid var(--color-accent);
}

.muted {
  color: var(--color-ink-3);
}

.client-find {
  max-width: 28rem;
}

.disclosure {
  border: var(--rule-hair) solid var(--color-rule);
}

.disclosure summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  letter-spacing: 0.02em;
  list-style: none;
  padding: var(--space-md);
}

.disclosure summary::-webkit-details-marker {
  display: none;
}

.disclosure summary::before {
  content: "+";
  color: var(--color-accent);
  display: inline-block;
  width: 1.2em;
}

.disclosure[open] summary {
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

.disclosure[open] summary::before {
  content: "–";
}

.disclosure summary:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

.disclosure__body {
  padding: var(--space-md);
}

.nav-id {
  font-family: var(--font-mono);
  color: var(--color-ink-3);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  padding: 0 0.35rem;
  white-space: nowrap;
}