/* Settings (ticket 493), the AI provider pane's cards: one column of radio cards, a Save row, and an "In
   effect now" card; the sidebar and pane layout (ticket 985) follow. Reuses the shared
   .card/.glass/.btn/.login-label/.login-input/.login-error/.scenario-alert vocabulary from console.css; only
   the page and card layout below is new. The global :focus-visible ring in console.css already covers every
   control. */

/* The Settings layout (ticket 985): a left sidebar of panes beside one main column, like System Settings.
   js/settings_sidebar.js draws it for Account, General, AI provider, Notifications, Domains, Users and
   Audit. The selected row uses the accent fill and bar only. At 760px and narrower the sidebar is one
   horizontally scrolling row of links under the top bar and the group labels are hidden. */
.settings-layout {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
  margin: 1rem 0 1.5rem;
  max-width: none;
  min-width: 0;
}

.settings-layout:not(:has(.settings-sidebar)) {
  grid-template-columns: minmax(0, 1fr);
}

.settings-sidebar {
  position: sticky;
  top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.settings-sidebar__group {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.settings-sidebar__label {
  margin: 0 0 0.2rem;
  padding: 0 0.7rem;
  color: var(--ink-dim);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.settings-sidebar__link {
  display: block;
  padding: 0.5rem 0.7rem;
  border-left: 2px solid transparent;
  border-radius: 6px;
  color: var(--ink-body);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  text-decoration: none;
}

.settings-sidebar__link:hover {
  color: var(--ink);
}

.settings-sidebar__link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}

.settings-sidebar__link.is-current {
  color: var(--ink);
  background: var(--gold-soft);
  border-left-color: var(--gold);
}

.settings-main {
  min-width: 0;
  max-width: 58rem;
}

.settings-main > .workspace-head {
  margin-bottom: var(--page-head-gap);
}

.settings-pane {
  min-width: 0;
}

/* One pane width, one left edge (ticket 001076, audit SC4 and SC8): the layout fills the page's content
   column like every other page, so the sidebar starts where a page title does, and every pane is the
   `.settings-main` column, Account included. Account's cards use the sign-in card's class (`.login-panel`,
   a 28rem card centred by auto margins in console.css); in a pane they fill the column and stack from the
   title's own left edge, and the first section of a pane starts right under the head (the Users pane draws an
   empty banner slot before its first section). */
.settings-pane .login-panel {
  max-width: none;
  margin: 0 0 1.1rem;
}

/* Account's identity facts (ticket 001078): the console's key-value table is monospace at the 13px floor, the
   least readable text on the page; here it reads in the body face at the body size, the value at full ink. */
.settings-pane table.kv--account {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
}

.settings-pane table.kv--account td {
  padding: 0.5rem;
}

.settings-pane table.kv--account td.kv-key {
  color: var(--ink-body);
}

.settings-pane table.kv--account td.kv-val {
  color: var(--ink);
}

.settings-pane > .section:first-child,
.settings-pane > :first-child > .section:first-child,
.settings-pane > :first-child > :first-child:empty + .section {
  margin-top: 0;
}

/* One pane's cards (js/views/settings.js draws every pane and shows the open one). */
.settings-section {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  min-width: 0;
}

.settings-section[hidden] {
  display: none;
}

/* An unavailable pane or group says one line and draws no form (ticket 985). */
.settings-card__note.settings-unavailable {
  color: var(--ink-body);
  font-size: var(--fs-sm);
}

@media (max-width: 760px) {
  .settings-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    margin-top: 0.5rem;
  }

  .settings-sidebar {
    position: static;
    flex-direction: row;
    gap: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    border-bottom: 1px solid var(--border);
  }

  .settings-sidebar::-webkit-scrollbar {
    display: none;
  }

  .settings-sidebar__group {
    flex: none;
    flex-direction: row;
    gap: 0;
  }

  .settings-sidebar__label {
    display: none;
  }

  .settings-sidebar__link {
    flex: none;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 0.75rem;
    border-left: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    white-space: nowrap;
  }

  .settings-sidebar__link.is-current {
    background: transparent;
    border-bottom-color: var(--gold);
  }
}

.settings-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.settings-cards {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.settings-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.1rem 1.3rem;
}

/* The chosen card is the one gold-framed thing in the list (ticket 001078): a full-strength gold border with
   a 1px ring inside it (a thicker border would move the text), not the faint tint that was all there was. */
.settings-card.is-selected {
  border-color: var(--gold);
  background: var(--gold-soft);
  box-shadow: 0 0 0 1px var(--gold);
}

.settings-card__head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  cursor: pointer;
}

/* A larger round control with a visible rim, filled gold with a dark gap when chosen (ticket 001078); the
   browser's own radio is a thin grey ring on the dark panel and says little about which card is chosen. The
   console-wide focus ring still draws around it. */
.settings-card__radio {
  appearance: none;
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  margin: 0;
  border: 2px solid var(--ink-dim);
  border-radius: 50%;
  background: var(--panel-deep);
  cursor: pointer;
}

.settings-card__radio:checked {
  border-color: var(--gold);
  background: radial-gradient(circle, var(--gold) 0 42%, var(--panel-deep) 48%);
}

.settings-card__radio:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.settings-card__title {
  font-size: var(--fs-md);
  color: var(--ink);
}

/* "Recommended" is a plain note in the muted ink (ticket 985): the selected card is the only gold thing, so
   the tag cannot read as the current choice. */
.settings-card__tag {
  color: var(--ink-dim);
  font-size: var(--fs-xs);
}

.settings-card__summary {
  margin: 0;
  color: var(--ink-body);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.settings-card__note {
  margin: 0;
  color: var(--st-4xx);
  font-size: var(--fs-xs);
  line-height: 1.45;
}

.settings-card__fields {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-top: 0.2rem;
}

.settings-card__keyrow {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.5rem;
}

.settings-card__keyrow .login-input {
  flex: 1 1 14rem;
  min-width: 0;
}

.settings-card__remove {
  flex: 0 0 auto;
}

.settings-card__remove[hidden] {
  display: none;
}

.settings-card__fields .login-input,
.settings-card__fields select {
  width: 100%;
  box-sizing: border-box;
}

.settings-card__keyrow .login-input {
  width: auto;
}

.settings-card__model {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--ink-body);
}

.settings-card__model--ok {
  color: var(--health-ok);
}

.settings-card__model--warn {
  color: var(--st-4xx);
}

.settings-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

/* One footer for every Save (ticket 001078): under a rule at the foot of the card whose fields it saves. */
.settings-footer {
  margin-top: 0.3rem;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

/* The AI provider's Save and Test, in a card of their own that stays at the foot of the window while the
   four choices above it scroll, so the fold at 982px never cuts them off. */
.settings-footer-card {
  position: sticky;
  bottom: 0;
  z-index: 1;
}

/* Two classes, so these beat depth.css's flat `.card` (it loads after this file): a stronger edge and a
   shadow cast up, so the pinned card reads as laid over the choices passing under it. */
.settings-card.settings-footer-card {
  border-color: var(--border-strong);
  box-shadow: 0 -0.75rem 1.25rem -0.75rem rgba(0, 0, 0, 0.8);
}

.settings-footer-card .login-status:empty {
  display: none;
}

.settings-selector-note {
  margin: 0;
}

.settings-alert__line {
  margin: 0;
}

.settings-alert__line + .settings-alert__line {
  margin-top: 0.3rem;
}

.settings-effective {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.settings-effective__title {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--ink);
}

.settings-effective__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.settings-effective__row {
  color: var(--ink-body);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.settings-effective__row--warn {
  color: var(--st-4xx);
}

.settings-effective__label {
  color: var(--ink);
}

.settings-effective__reason {
  display: block;
  color: var(--ink-dim);
  font-size: var(--fs-xs);
}

/* Sanctioned sources card (ticket 580): one address or range per line, so the list reads in
   monospace and only grows downward. The rest reuses the card, field and alert classes above. */
.settings-sources__list {
  min-height: 8rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.5;
  resize: vertical;
}

.settings-sources[hidden] {
  display: none;
}

/* Tripwire ports card (ticket 637): one row per kind, a switch and a port field on one line, the
   status and any refusal sentence under them. The rest reuses the card, field and alert classes
   above. The card's display beats the UA [hidden] rule, as for the sanctioned sources. */
.settings-tripwires[hidden] {
  display: none;
}

.settings-tripwire {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.settings-tripwire__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.settings-tripwire__name {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 5rem;
  color: var(--ink);
  font-size: var(--fs-sm);
}

.settings-tripwire__switch {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  accent-color: var(--gold);
}

.settings-card__fields .settings-tripwire__port {
  width: 8rem;
}

.settings-tripwire__status {
  margin: 0;
  color: var(--ink-body);
  font-size: var(--fs-xs);
  line-height: 1.45;
}

.settings-tripwire__error {
  margin: 0;
}

/* Configure tab (tickets 860-863, 909). The form controls fill the width of their form instead of
   sitting at the browser's default width on the left. Scoped to .configure-field because the login
   page shares .login-input and must keep its own width. A number box (a port, a token count) stays
   narrow. */
.configure-field {
  margin-bottom: 0.9rem;
}

.configure-field input.login-input,
.configure-field textarea {
  width: 100%;
  box-sizing: border-box;
}

.configure-field textarea {
  resize: vertical;
}

/* A select is as wide as its longest option, so the ssh Interaction-level box ran past its card
   (ticket 941). Fill the card and clip long option text inside the box. console.css's base
   `select` rule paints the chevron and padding; only the width is set here. */
.configure-field select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.configure-field input.login-input[type="number"] {
  width: 10rem;
  max-width: 100%;
}

/* A yes/no setting on a Status Service card (ticket 910): the two-button group reuses console.css's
   .toggle-group and its .is-active fill; these rules add the touch size, the focus ring and the
   disabled look. The header pill reuses .pill with .status-2xx (Enabled) or .status-unknown
   (Disabled). A card whose saved state is disabled dims every row but the on/off switch; the
   rows stay editable, so a port can be set before the service is switched on. */
.configure-segment button {
  min-height: 2rem;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  padding: 0.3rem 0.9rem;
}

.configure-segment button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}

.configure-segment button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.configure-segment__state {
  margin-left: 0.6rem;
  color: var(--ink-dim);
  font-size: var(--fs-xs);
}

.configure-service__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
}

.configure-service__title .service-card__name {
  margin: 0 0 0.3rem;
}

.configure-service--off .configure-field:not([data-field$=".enabled"]) {
  opacity: 0.55;
}

/* The info button (ticket 909): a small round icon beside a label or heading that opens its help
   panel. It is a sibling of the label, never inside it. */
.info-tip__row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.info-tip__button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--ink-muted);
  font-size: var(--fs-sm);
  line-height: 1;
  cursor: pointer;
}

.info-tip__button[hidden] {
  display: none;
}

.info-tip__button:hover {
  color: var(--ink);
  border-color: var(--ink-muted);
}

.info-tip__button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.info-tip__button[aria-expanded="true"] {
  color: var(--gold);
  border-color: var(--border-gold);
  background: var(--gold-soft);
}

.info-tip__panel {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0.35rem 0 0.6rem;
  padding: 0.5rem 0.75rem;
  border-left: 2px solid var(--border-gold);
  border-radius: 0.4rem;
  background: var(--panel-deep);
  color: var(--ink-body);
  font-size: var(--fs-xs);
  line-height: 1.45;
}

.info-tip__panel[hidden] {
  display: none;
}

.info-tip__text {
  margin: 0;
}

.info-tip__panel ul {
  margin: 0;
  padding-left: 1.1rem;
}

/* Notifications card (ticket 921): one bordered block per channel, a form column inside it. The text
   inputs fill the card, scoped here because the Sign in page shares .login-input and keeps its own
   width. The card's display beats the UA [hidden] rule, as for the sanctioned sources. */
.settings-notifications[hidden] {
  display: none;
}

.settings-notifications .login-input {
  width: 100%;
  box-sizing: border-box;
}

.settings-notifications__list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.settings-notifications__channel {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border-strong);
  border-radius: 0.5rem;
}

.settings-notifications__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.settings-notifications__type {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-md);
}

.settings-notifications__enabled,
.settings-notifications__event {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink);
  font-size: var(--fs-sm);
}

.settings-notifications__switch {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  accent-color: var(--gold);
}

.settings-notifications__field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.settings-notifications__events {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

/* A select with a visible arrow (ticket 001078): `.login-input` on a <select> wipes the arrow console.css
   paints, so these two selects (Minimum confidence and a channel's security choice) take their own class and
   keep the base `select` rule's chevron; only the box is sized like the text inputs beside them. */
.settings-notifications .settings-notifications__select {
  width: 100%;
  box-sizing: border-box;
  min-height: 2.4rem;
  padding: 0.55rem 1.8rem 0.55rem 0.75rem;
  border-radius: 0.6rem;
  background-color: var(--panel-deep);
  font-size: var(--fs-sm);
}

/* The first step of the channel work: a lead-in and the three Add buttons at full size. */
.settings-notifications__add {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.settings-notifications__lead {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* Users (ticket 001078): the row's actions stay on one line, the destructive one last and set apart; the
   empty token list is a panel with one line on what a token is for. The token table's actions keep their
   own wrapping (console.css). */
.settings-pane .users-table .users-actions {
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.25rem;
}

.settings-pane .users-table .users-actions .btn {
  padding-inline: 0.4rem;
}

.settings-pane .users-table .users-actions__apart {
  margin-left: var(--space-2);
  border-color: color-mix(in srgb, var(--st-5xx) 50%, transparent);
}

/* Six columns of one-line cells have to fit the 928px pane: a cell is padded 8px a side, not 13px, and the
   role box is set in the UI face like the other cells (the monospace "Case Officer" was the widest thing in
   the row). */
.settings-pane table.users-table select {
  font-family: var(--font-ui);
  padding-right: 1.4rem;
}

.settings-pane table.users-table th,
.settings-pane table.users-table td {
  padding-inline: var(--space-2);
}

.users-empty {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.users-empty__title {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-sm);
}

.users-empty__hint {
  margin: 0;
  color: var(--ink-body);
  font-size: var(--fs-xs);
}

/* Audit (ticket 001078): the filter row's boxes and buttons share one height, Filter and Clear one button
   style; the Details link has its own column, so a row without one keeps the width. */
.settings-pane .audit-filters > input,
.settings-pane .audit-filters > select {
  box-sizing: border-box;
  min-height: 2.4rem;
  font-size: var(--fs-sm);
}

.settings-pane .audit-filters > select {
  min-width: 12rem;
  padding-block: 0.5rem;
}

.settings-pane .audit-filters .btn {
  justify-content: center;
  min-height: 2.4rem;
  padding-inline: 1rem;
}

.audit-details-cell {
  width: 1%;
}

.audit-details-cell .audit-toggle {
  margin-left: 0;
}

/* Domains (ticket 001079, audit page 44 and SC8): three numbered steps on one calm page. Nothing here is
   amber but a real warning: the explanatory sentences read in the body ink (the shared
   `.settings-card__note` is amber, which is right for the AI provider's cautions and wrong for a guide), and
   the DNS status pill ("Points elsewhere") carries the warning. The form has a label above each field,
   the certificate choice as two framed options, and each service id drawn as the left end of its input. */
.domains-page {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  min-width: 0;
}

.domains-page .settings-card__note {
  color: var(--ink-body);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.domains-page .settings-card__note.domains-status__detail {
  margin-top: 0.4rem;
  font-size: var(--fs-xs);
}

/* A button that is a direct child of a step card is a flex item of its column and stretched to the card's
   width; it keeps its own size, like every other Copy button. */
.domains-step > .btn {
  align-self: flex-start;
}

.domains-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  min-width: 0;
}

.domains-field-label,
.domains-name__label {
  color: var(--ink-body);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.domains-certificates {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.domains-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0.75rem;
}

.domains-choice {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--border-strong);
  border-radius: 0.7rem;
  background: var(--panel-deep);
  cursor: pointer;
}

.domains-choice:hover {
  border-color: var(--ink-dim);
}

/* The chosen option is the gold-framed one, like the AI provider's chosen card. */
.domains-choice:has(.settings-card__radio:checked) {
  border-color: var(--gold);
  background: var(--gold-soft);
  box-shadow: 0 0 0 1px var(--gold);
}

.domains-choice .settings-card__radio {
  margin-top: 0.1rem;
}

.domains-choice__text {
  min-width: 0;
  color: var(--ink);
  font-size: var(--fs-sm);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* A name field: its label on top, then one control made of the service id and the input. The id is a fixed
   column wide so the inputs of every row start at the same edge; the input fills the rest of the card, which
   holds a hostname of 75 characters. */
.domains-names {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.domains-name {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  align-items: stretch;
  row-gap: 0.4rem;
  min-width: 0;
}

.domains-name__label {
  grid-column: 1 / -1;
}

.domains-name__id {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 0 0.75rem;
  border: 1px solid var(--border-strong);
  border-right: 0;
  border-radius: 0.6rem 0 0 0.6rem;
  background: var(--panel);
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  overflow-wrap: anywhere;
}

.domains-name .login-input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.domains-name__id + .login-input {
  border-radius: 0 0.6rem 0.6rem 0;
}

/* The input with no id before it (Your domain) spans the row. */
.domains-name > .domains-name__label + .login-input {
  grid-column: 1 / -1;
}

.domains-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.domains-actions--propose {
  margin-top: -0.2rem;
}

/* The DNS table: the status cell has a width of its own and its sentence wraps inside it, so the one fact
   the table exists to show is never cut at the panel edge. The panel still scrolls (with the fade from
   console.css) when the window is too narrow for the four columns. */
.domains-table td.domains-status {
  min-width: 18rem;
  white-space: normal;
  overflow-wrap: anywhere;
}

.domains-table td {
  vertical-align: top;
}

/* The Caddyfile and each command box: a scroll box shows a fade on the edge it can still scroll to (the
   panel colour travels with the text and hides the fade at an end), and a thin scrollbar where the platform
   draws one. */
@media (forced-colors: none) {
  .domains-page pre.wire {
    background:
      linear-gradient(var(--panel-deep) 30%, transparent) top / 100% 2rem no-repeat local,
      linear-gradient(to top, var(--panel-deep) 30%, transparent) bottom / 100% 2rem no-repeat local,
      linear-gradient(rgba(255, 255, 255, 0.2), transparent) top / 100% 0.9rem no-repeat scroll,
      linear-gradient(to top, rgba(255, 255, 255, 0.2), transparent) bottom / 100% 0.9rem no-repeat scroll,
      var(--panel-deep);
  }
}

.domains-page pre.wire {
  scrollbar-width: thin;
  scrollbar-color: var(--ink-dim) transparent;
}

.domains-subtitle {
  margin: 0.4rem 0 0;
  color: var(--ink);
  font-size: var(--fs-base);
  font-weight: 600;
}

.domains-command {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
}

.domains-command pre.wire {
  align-self: stretch;
}

.domains-command__label {
  margin: 0;
  color: var(--ink-body);
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* Apply sits under the three steps with the same rhythm. */
.domains-apply {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
  min-width: 0;
}

.domains-apply[hidden] {
  display: none;
}

.domains-apply > .domains-subtitle {
  margin-top: 0;
}