/* Inputs, buttons and the save bar. */

.row-main { display: grid; gap: 4px; min-width: 0; }
  .row-main b { font-weight: 600; font-size: 14.5px; }
  .btn { font: inherit; font-size: 14px; font-weight: 600; padding: 9px 14px; border-radius: 4px; border: 1px solid var(--line); background: var(--raised); color: var(--ink); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
  .btn.primary:hover { filter: brightness(1.08); }
  .btn.small { font-size: 12.5px; padding: 6px 10px; }
  .btns { display: flex; gap: 8px; flex-wrap: wrap; }
  /* In a narrow table cell, wrapping stacks two buttons that belong side by side. */
  .btns.nowrap { flex-wrap: nowrap; }
  input, select, textarea { font: inherit; font-size: 14px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--ink); width: 100%; }
  /* align-content, because a grid row stretches every field to the tallest in it: a field with
     a hint under it made the plain select beside it sit 31px lower than its own label. */
  .field { display: grid; gap: 5px; align-content: start; }
  .switch { display: flex; align-items: center; gap: 10px; padding: 9px 0; }
  .switch input { width: 38px; height: 22px; appearance: none; border-radius: 99px; background: var(--line); position: relative; cursor: pointer; flex: none; transition: background .15s ease; }
  .switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--raised); transition: transform .15s ease; }
  .switch input:checked { background: var(--accent-btn); }
  .switch input:checked::after { transform: translateX(16px); }
  /* A switch sits inside a .field, so it is a direct child span of one — which was handing it
     the label's own style, and a sentence like "Anyone at these domains joins as a member" came
     out as shouted monospace. It is a sentence; it is set like one. */
  .field > span.switch { font-family: inherit; font-size: inherit; letter-spacing: normal;
                         text-transform: none; color: inherit; }
  .switch span { font-size: 14px; font-family: var(--body); letter-spacing: normal;
                 text-transform: none; color: var(--ink); }

  /* Help under a field had no style at all, so it matched `.field > span` — the label rule — and
     a two-line explanation was rendered as a two-line uppercase monospace label. Uppercase mono
     is for three words naming a control, never for prose. */
  /* The verified badge had no style at all, so the one thing on this page that decides whether
     a domain admits anybody rendered as plain grey text beside the domain name. It is the state,
     so it looks like one. */
  .tag { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
         padding: 3px 7px; border-radius: 3px; border: 1px solid var(--line); color: var(--muted);
         white-space: nowrap; }
  .tag.good { color: var(--good); border-color: color-mix(in srgb, var(--good) 45%, transparent); }
  .tag.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }

  /* a hint that is not advice but a state: this is on and doing nothing */
  .hint.warn-hint { color: var(--warn); }
  .field > span.hint, .hint { font-family: var(--body); font-size: 12.5px; line-height: 1.5;
                              letter-spacing: normal; text-transform: none; color: var(--muted);
                              max-width: 62ch; }
  .row-card { display: flex; align-items: flex-end; gap: 12px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); }
  .row-cells { display: flex; flex-wrap: wrap; gap: 10px 12px; flex: 1; min-width: 0; }
  .field > .btn { justify-self: start; }

  /* A button that has gone to do something.
   *
   * Disabling alone only greys it, which reads as "not available" rather than "working" — and
   * with a checkout the wait is a round trip to Stripe before the page even leaves, so a dead
   * grey button is the whole of the feedback.
   *
   * The label changes too — a spinner says something is happening, not what — so the button does
   * grow a little while it waits, measured at 84px to 123px on "Manage". That is a real nudge to
   * anything beside it, and worth it: every one of these is about to replace the page anyway. */
  .btn[aria-busy="true"] { cursor: progress; opacity: 1; }
  .btn[aria-busy="true"]::before {
    content: ""; width: 13px; height: 13px; flex: none; border-radius: 50%;
    border: 2px solid currentColor; border-top-color: transparent;
    animation: btn-spin .7s linear infinite;
  }
  @keyframes btn-spin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) {
    /* still obviously busy, just not moving */
    .btn[aria-busy="true"]::before { animation: none; border-top-color: currentColor; opacity: .45; }
  }

  .field textarea { font-family: inherit; font-size: 14px; min-height: 110px; }
  .row-empty { margin: 0; padding: 11px 13px; border: 1px dashed var(--line); border-radius: 5px; }
  .row-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }