/* Hallmark · shape: app screen · genre: modern-minimal · theme: Cobalt (deal 2/3, seed panel-maestro-elourcode-para-37ae·8708caa9·2026-10-30·r0)
 * nav: compact top bar · signature: organization by system operations matrix · states: loading, empty, error, full
 * axes: light/grotesk-sans/cool · posture: restrained · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R5 V4 · weakest: E, reduced the shell to one surface ladder and reserved cobalt for actions and current state */
@import url("./tokens.css");
@import url("./base.css");
@import url("./finance.css");
@import url("./communications.css");
@import url("./billing.css");
.infra-table{min-width:1100px}.infra-table small{display:block;max-width:260px}.infra-table meter{display:block;width:100%;min-width:120px;margin-top:6px}
.form-grid.infra-association{grid-template-columns:repeat(2,minmax(0,1fr))}.form-grid.infra-filter{max-width:650px;align-items:end;margin-bottom:20px}@media(max-width:760px){.form-grid.infra-association,.form-grid.infra-filter{grid-template-columns:1fr}}
.infra-association label[hidden]{display:none}
.company-form>label{align-content:start}.infra-association{grid-template-columns:minmax(160px,1fr) minmax(200px,2fr) auto;align-items:center;padding-block:16px;border-bottom:1px solid var(--color-rule)}.infra-association p{margin:0}.infra-association button{align-self:end;min-height:44px}.infra-hint{display:none}@media(max-width:760px){.infra-association{grid-template-columns:1fr}.infra-hint{display:block;font-size:14px;color:var(--color-muted)}}

@font-face {
  font-family: "Space Grotesk";
  src: url("./space-grotesk-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("./inter-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("./jetbrains-mono-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
}

:root {
  --app-bar-height: 68px;
  --control-height: 40px;
  --content-cap: 1360px;
  --color-overlay: oklch(18% 0.025 262 / 0.52);
  --color-disabled: oklch(82% 0.011 252);
  --color-code: oklch(94% 0.012 252);
}

body {
  min-height: 100dvh;
  background: var(--color-paper-2);
}

a {
  text-decoration-color: var(--color-rule-2);
}

a:hover {
  color: var(--color-accent-deep);
  text-decoration-color: var(--color-accent);
}

button,
a,
input,
select,
textarea,
summary {
  -webkit-tap-highlight-color: transparent;
}

.skip-link {
  position: fixed;
  z-index: var(--z-tooltip);
  inset: var(--space-sm) auto auto var(--space-md);
  padding: var(--space-xs) var(--space-md);
  color: var(--color-graphite-ink);
  background: var(--color-graphite);
  transform: translateY(calc(-100% - var(--space-lg)));
  transition: transform var(--dur-micro) var(--ease-out);
}

.skip-link:focus-visible {
  transform: none;
}

.app-bar {
  position: sticky;
  z-index: var(--z-sticky-nav);
  top: 0;
  min-height: var(--app-bar-height);
  color: var(--color-graphite-ink);
  background: var(--color-graphite);
  border-bottom: var(--rule-hair) solid var(--color-graphite-2);
}

.app-bar__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  width: 100%;
  max-width: var(--content-cap);
  min-height: var(--app-bar-height);
  margin-inline: auto;
  padding-inline: var(--space-lg);
  gap: var(--space-lg);
}

.wordmark {
  display: grid;
  color: var(--color-graphite-ink);
  text-decoration: none;
  white-space: nowrap;
}

.wordmark span {
  font: 600 var(--text-lg)/1 var(--font-display);
  letter-spacing: var(--tracking-display);
}

.wordmark b {
  margin-top: var(--space-2xs);
  color: var(--color-graphite-muted);
  font-size: var(--text-xs);
  font-weight: 500;
}

.main-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  gap: var(--space-2xs);
}

.main-nav a,
.main-nav summary,
.user-menu a,
.link-button,
.nav-toggle {
  min-height: 40px;
  padding: 0 var(--space-sm);
  border: var(--rule-hair) solid transparent;
  border-radius: var(--radius-input);
  color: var(--color-graphite-muted);
  background: transparent;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 38px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.main-nav a:hover,
.main-nav summary:hover,
.user-menu a:hover,
.link-button:hover,
.nav-toggle:hover {
  color: var(--color-graphite-ink);
  background: var(--color-graphite-2);
}

.main-nav a:active,
.main-nav summary:active,
.user-menu a:active,
.link-button:active,
.nav-toggle:active {
  transform: translateY(1px);
}

.main-nav a[aria-current="page"],
.main-nav summary[aria-current="page"] {
  color: var(--color-graphite-ink);
  border-color: var(--color-graphite-glyph-2);
  background: var(--color-graphite-2);
}

.nav-group {
  position: relative;
}

.nav-group summary {
  display: flex;
  align-items: center;
  list-style: none;
}

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

.nav-group summary::after {
  content: "+";
  margin-left: var(--space-xs);
  color: var(--color-graphite-muted);
  font-family: var(--font-outlier);
}

.nav-group[open] summary::after {
  content: "−";
}

.nav-submenu {
  position: absolute;
  z-index: var(--z-dropdown);
  top: calc(100% + var(--space-xs));
  left: 0;
  display: grid;
  min-width: 170px;
  padding: var(--space-xs);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-card);
  color: var(--color-ink);
  background: var(--color-paper);
  box-shadow: var(--shadow-card);
}

.nav-submenu a,
.nav-submenu a:hover,
.nav-submenu a[aria-current="page"] {
  color: var(--color-ink);
}

.nav-submenu a:hover,
.nav-submenu a[aria-current="page"] {
  background: var(--color-accent-wash);
}

.user-menu {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

.user-menu form {
  margin: 0;
}

.link-button {
  font-family: var(--font-body);
}

.link-button--paper {
  color: var(--color-accent-deep);
  line-height: 1;
}

.link-button--paper:hover {
  color: var(--color-accent-deep);
  background: var(--color-accent-wash);
}

.nav-toggle {
  display: none;
  justify-self: end;
}

.app-main,
.auth-main {
  width: 100%;
  max-width: var(--content-cap);
  margin-inline: auto;
  padding: var(--space-xl) var(--space-lg) var(--space-2xl);
}

.auth-main {
  display: grid;
  place-items: center;
  min-height: calc(100dvh - var(--space-2xl));
}

.app-footer {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: var(--content-cap);
  margin-inline: auto;
  padding: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule);
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.page-head,
.section-bar,
.system-config__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-lg);
}

.page-head {
  align-items: center;
  margin-bottom: var(--space-lg);
}

.page-head h1 {
  font-size: var(--text-3xl);
}

.page-head p,
.section-bar p,
.system-config__head p,
.service-identity p {
  margin-top: var(--space-xs);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.cut {
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
  background: var(--color-paper);
  box-shadow: var(--shadow-card);
}

@supports (corner-shape: bevel) {
  .cut {
    border-radius: var(--cut-l) var(--space-2xs) var(--cut-l) var(--space-2xs);
    corner-shape: bevel round bevel round;
  }
}

.workspace,
.system-config {
  margin-bottom: var(--space-lg);
  padding: var(--space-lg);
}

.section-bar {
  align-items: center;
  margin-bottom: var(--space-lg);
}

.section-bar h2,
.system-config__head h2 {
  font-size: var(--text-xl);
}

.summary-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 var(--space-lg);
  padding: var(--space-lg) 0;
  border-block: var(--rule-hair) solid var(--color-rule-2);
}

.summary-stats > div {
  padding-inline: var(--space-lg);
  border-left: var(--rule-hair) solid var(--color-rule);
}

.summary-stats > div:first-child {
  padding-left: 0;
  border-left: 0;
}

.summary-stats dt {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.summary-stats dd {
  margin: var(--space-xs) 0 0;
  font: 600 var(--text-3xl)/1 var(--font-display);
  color: var(--color-ink);
}

.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

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

th,
td {
  padding: var(--space-sm);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  text-align: left;
  vertical-align: top;
}

thead th {
  color: var(--color-muted);
  background: var(--color-paper-2);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}

tbody th {
  min-width: 180px;
  font-weight: 600;
}

tbody tr:last-child > * {
  border-bottom: 0;
}

tbody tr:hover > * {
  background: var(--color-accent-wash);
}

td small,
th small,
.matrix-cell small,
.state + small {
  display: block;
  margin-top: var(--space-2xs);
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.matrix {
  min-width: 880px;
  table-layout: fixed;
}

.matrix th:first-child {
  width: 22%;
}

.matrix-cell {
  display: grid;
  gap: var(--space-xs);
  min-width: 0;
}

.matrix-cell > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.empty-cell {
  color: var(--color-muted);
}

.state {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 var(--space-xs);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-input);
  color: var(--color-ink-2);
  background: var(--color-paper-2);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}

.state--healthy,
.state--service-active {
  color: var(--color-success);
  border-color: var(--color-success);
  background: var(--color-success-wash);
}

.state--unhealthy,
.state--unreachable,
.state--timeout,
.state--service-suspended,
.state--service-past_due {
  color: var(--color-error);
  border-color: var(--color-error);
  background: var(--color-error-wash);
}

.state--service-trial {
  color: var(--color-warning);
  border-color: var(--color-warning);
  background: var(--color-warning-wash);
}

.state--service-archived,
.state--unconfigured,
.state--unknown {
  color: var(--color-muted);
  background: var(--color-paper-3);
}

.key {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-height);
  padding: 0 var(--space-md);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-input);
  color: var(--color-ink);
  background: var(--color-key-face);
  box-shadow: var(--shadow-key);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out);
}

.key::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--space-2xs));
}

.key:hover {
  color: var(--color-ink);
  background: var(--color-paper-2);
  transform: translateY(-1px);
}

.key:active {
  transform: translateY(var(--space-3xs));
  box-shadow: var(--shadow-key-press);
}

.key--primary {
  color: var(--color-accent-ink);
  border-color: var(--color-accent-edge);
  background: var(--color-accent);
  box-shadow: var(--shadow-key-accent);
}

.key--primary:hover {
  color: var(--color-accent-ink);
  background: var(--color-accent-deep);
}

.key--light {
  color: var(--color-graphite);
  background: var(--color-graphite-ink);
}

.key:disabled,
.key[aria-disabled="true"],
.key[aria-busy="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.key[aria-busy="true"] {
  cursor: progress;
}

label,
fieldset {
  min-width: 0;
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  font-weight: 600;
}

label {
  display: grid;
  gap: var(--space-xs);
}

fieldset {
  margin: 0;
  padding: var(--space-md);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-input);
}

legend {
  padding-inline: var(--space-xs);
}

input,
select,
textarea {
  width: 100%;
  min-width: 0;
  min-height: var(--control-height);
  padding: var(--space-xs) var(--space-sm);
  border: var(--rule-hair) solid var(--color-muted);
  border-radius: var(--radius-input);
  outline: 2px solid transparent;
  outline-offset: -3px;
  color: var(--color-ink);
  background: var(--color-paper);
  transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}

textarea {
  min-height: var(--space-3xl);
  resize: vertical;
}

input:hover,
select:hover,
textarea:hover {
  background: var(--color-paper-2);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: var(--color-ink-2);
  outline-color: var(--color-focus);
}

input:disabled,
select:disabled,
textarea:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--color-disabled);
}

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--color-error);
}

input[type="checkbox"] {
  width: var(--space-md);
  min-height: var(--space-md);
  padding: 0;
  accent-color: var(--color-accent);
}

.optional {
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 400;
}

.form-stack,
.form-grid,
.service-form {
  display: grid;
  gap: var(--space-md);
}

.form-grid,
.service-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.span-2 {
  grid-column: 1 / -1;
}

.form-actions,
.inline-form,
.filter-row,
.copy-row {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.inline-form > label,
.filter-row > label {
  flex: 1 1 240px;
}

.filter-row {
  margin-bottom: var(--space-lg);
}

.check-field {
  display: flex;
  align-items: center;
  min-height: var(--control-height);
  gap: var(--space-xs);
}

.check-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xs) var(--space-lg);
}

.auth-shell {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  width: min(820px, 100%);
  min-height: 460px;
  overflow: clip;
}

.auth-copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-xl);
  color: var(--color-graphite-ink);
  background: var(--color-graphite);
}

.auth-copy h1 {
  margin-top: auto;
  color: var(--color-graphite-ink);
  font-size: var(--text-3xl);
}

.auth-copy p {
  margin-top: var(--space-md);
  color: var(--color-graphite-muted);
}

.auth-brand {
  align-self: flex-start;
  font: 600 var(--text-xl)/1 var(--font-display);
}

.auth-shell > .form-stack {
  align-content: center;
  padding: var(--space-xl);
}

.auth-shell > .form-stack > small {
  margin-top: calc(-1 * var(--space-sm));
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.notice {
  display: flex;
  align-items: center;
  min-height: var(--control-height);
  margin-bottom: var(--space-lg);
  padding: var(--space-xs) var(--space-md);
  border: var(--rule-hair) solid var(--color-success);
  border-radius: var(--radius-input);
  color: var(--color-success);
  background: var(--color-success-wash);
  font-size: var(--text-sm);
  font-weight: 600;
}

.notice--error {
  color: var(--color-error);
  border-color: var(--color-error);
  background: var(--color-error-wash);
}

.empty-state,
.error-page {
  display: grid;
  justify-items: start;
  gap: var(--space-md);
  padding: var(--space-xl);
  color: var(--color-muted);
  background: var(--color-paper-2);
}

.empty-state h3,
.error-page h1 {
  color: var(--color-ink);
}

.error-page {
  width: min(720px, 100%);
  margin-inline: auto;
}

.error-code {
  font: 600 var(--text-3xl)/1 var(--font-outlier);
  color: var(--color-error);
}

.breadcrumb {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.service-list {
  border-top: var(--rule-hair) solid var(--color-rule);
}

.service-row {
  display: grid;
  grid-template-columns: minmax(200px, 0.65fr) minmax(0, 1.35fr);
  gap: var(--space-lg);
  padding-block: var(--space-lg);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

.service-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.service-identity,
.system-config__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}

.service-identity h3 {
  font-size: var(--text-lg);
}

.system-mark {
  display: grid;
  place-items: center;
  flex: 0 0 var(--control-height);
  width: var(--control-height);
  height: var(--control-height);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-input);
  color: var(--color-accent-deep);
  background: var(--color-accent-wash);
  font: 600 var(--text-sm)/1 var(--font-outlier);
}

.service-readonly {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.system-configs {
  display: grid;
  gap: var(--space-lg);
}

.system-config__head {
  margin-bottom: var(--space-lg);
}

.system-config__head > div:nth-child(2) {
  flex: 1;
  min-width: 0;
}

.detail-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.detail-list > div {
  padding: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
}

.detail-list dt {
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.detail-list dd {
  margin: var(--space-xs) 0 0;
  overflow-wrap: break-word;
}

.graphite {
  color: var(--color-graphite-ink);
  background: var(--color-graphite);
}

.graphite h1,
.graphite label {
  color: var(--color-graphite-ink);
}

.graphite p {
  color: var(--color-graphite-muted);
}

.secret-panel {
  display: grid;
  gap: var(--space-lg);
  width: min(840px, 100%);
  padding: var(--space-xl);
}

.copy-row input {
  flex: 1 1 480px;
  font-family: var(--font-outlier);
}

code,
pre {
  font-family: var(--font-outlier);
}

code {
  padding: var(--space-3xs) var(--space-2xs);
  border-radius: var(--space-2xs);
  background: var(--color-code);
}

pre {
  max-width: 520px;
  max-height: 240px;
  margin: var(--space-sm) 0 0;
  padding: var(--space-md);
  overflow: auto;
  color: var(--color-graphite-ink);
  background: var(--color-graphite);
  border-radius: var(--radius-input);
  font-size: var(--text-xs);
  white-space: pre-wrap;
}

summary {
  color: var(--color-accent-deep);
  cursor: pointer;
}

.totp-setup {
  display: grid;
  gap: var(--space-md);
}

.secret-value {
  padding: var(--space-md);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-input);
  background: var(--color-paper-2);
  overflow-wrap: break-word;
}

.integration-table {
  min-width: 1080px;
}

.integration-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xs);
  min-width: 150px;
}

.integration-actions form {
  margin: 0;
}

.integration-form {
  max-width: 1040px;
}

.credential-fields > p {
  margin-bottom: var(--space-md);
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 400;
}

input[type="file"] {
  padding-block: var(--space-xs);
  background: var(--color-paper-2);
}

@media (max-width: 64rem) {
  .app-bar__inner {
    grid-template-columns: auto auto;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .main-nav {
    display: none;
    grid-column: 1 / -1;
    align-items: stretch;
    justify-content: stretch;
    padding-bottom: var(--space-sm);
  }

  .main-nav.is-open {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .main-nav a {
    text-align: center;
  }

  .nav-group {
    min-width: 0;
  }

  .nav-group summary {
    justify-content: center;
  }

  .nav-submenu {
    position: static;
    margin-top: var(--space-2xs);
    border-color: var(--color-graphite-glyph-1);
    color: var(--color-graphite-ink);
    background: var(--color-graphite-2);
    box-shadow: none;
  }

  .nav-submenu a,
  .nav-submenu a:hover,
  .nav-submenu a[aria-current="page"] {
    color: var(--color-graphite-ink);
  }

  .nav-submenu a:hover,
  .nav-submenu a[aria-current="page"] {
    background: var(--color-graphite-glyph-1);
  }

  .user-menu {
    grid-column: 1 / -1;
    justify-content: flex-end;
    padding-bottom: var(--space-sm);
  }

  .summary-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .summary-stats > div:nth-child(3) {
    padding-top: var(--space-lg);
    padding-left: 0;
    border-top: var(--rule-hair) solid var(--color-rule);
    border-left: 0;
  }

  .summary-stats > div:nth-child(4) {
    padding-top: var(--space-lg);
    border-top: var(--rule-hair) solid var(--color-rule);
  }

  .service-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .check-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 44rem) {
  .app-main,
  .auth-main {
    padding: var(--space-lg) var(--space-md) var(--space-xl);
  }

  .app-bar__inner {
    padding-inline: var(--space-md);
  }

  .main-nav.is-open {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-head,
  .section-bar,
  .system-config__head,
  .app-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .page-head .key,
  .page-head form,
  .page-head form .key {
    width: 100%;
  }

  .summary-stats {
    grid-template-columns: minmax(0, 1fr);
  }

  .summary-stats > div,
  .summary-stats > div:first-child,
  .summary-stats > div:nth-child(3),
  .summary-stats > div:nth-child(4) {
    padding: var(--space-md) 0;
    border-top: var(--rule-hair) solid var(--color-rule);
    border-left: 0;
  }

  .summary-stats > div:first-child {
    border-top: 0;
  }

  .form-grid,
  .service-form,
  .detail-list,
  .check-grid,
  .auth-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .span-2 {
    grid-column: auto;
  }

  .auth-copy,
  .auth-shell > .form-stack,
  .workspace,
  .system-config,
  .secret-panel {
    padding: var(--space-lg);
  }

  .auth-copy {
    min-height: 220px;
  }

  .form-actions > .key,
  .inline-form > .key {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .skip-link,
  .key,
  input,
  select,
  textarea {
    transition: none;
  }
}