/* The pages either side of the door. Same ground, same type and the same mark
   as the app, at the width of a single column: nothing here is a mailbox, so
   nothing here gets two panes. */

/* Several things here are hidden until a script says the browser can do them,
   and several of them are flex rows. An author display rule beats the user
   agent's [hidden] one, so hidden has to be said again and said louder, or a
   passkey control the browser cannot use is on the page anyway. */
[hidden] { display: none !important; }

.gate-body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--ground);
  color: var(--mist);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px 64px;
}

/* The mark sits at the top of the page rather than in a bar: there is no
   chrome here to put it in. */
.gate__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 64px;
  margin-bottom: 22px;
  text-decoration: none;
  flex: 0 0 auto;
}

.gate__brand svg {
  width: 22px;
  height: 22px;
  display: block;
}

.gate__word {
  font-family: var(--font-data);
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--mist);
}

.gate__word b { font-weight: 700; }

.gate__word i {
  font-style: normal;
  color: var(--dim-deep);
}

.gate {
  width: 100%;
  /* A flex item's automatic minimum size is its min-content width, so a long
     DNS value inside can push the whole column wider than the viewport and
     take the prose off the right of a phone with it. The shell is never wider
     than the space it was given. */
  min-width: 0;
  max-width: 372px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 10px;
  padding: 28px 28px 24px;
}

.gate--wide {
  max-width: 560px;
  background: none;
  border: none;
  padding: 0;
}

/* The records screen alone is wider. 560px is right for a column of prose and
   switches; it is not right for a DNS value that has to be read character by
   character, and squeezing "brackenfell.studio" into two lines to keep the
   measure would be preferring the page's proportions to its only job. */
.gate--table { max-width: 860px; }

.gate__title {
  margin: 0 0 6px;
  font-family: var(--font-data);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}

.gate__text {
  margin: 0 0 20px;
  color: var(--dim);
}

.gate__note {
  margin: 16px 0 0;
  font-size: 12px;
  color: var(--dim-deep);
}

.gate__aside {
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--dim-deep);
}

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

.gate__error,
.gate__notice {
  margin: 0 0 18px;
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 13px;
}

.gate__error {
  background: rgba(252, 165, 165, 0.09);
  border: 1px solid rgba(252, 165, 165, 0.28);
  color: var(--bad-on-dark);
}

.gate__notice {
  background: rgba(142, 173, 214, 0.09);
  border: 1px solid rgba(142, 173, 214, 0.28);
  color: var(--accent);
}

/* ------------------------------------------------------------- the form */

.gate__form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gate__label {
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim-deep);
}

.gate__input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid rgba(148, 163, 184, 0.26);
  background: var(--ground-deep);
  color: var(--mist);
  font-family: var(--font-data);
  font-size: 13.5px;
}

.gate__input::placeholder { color: var(--slate-deep); }

.gate__input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: transparent;
}

.gate__input--inline {
  flex: 1 1 200px;
  width: auto;
}

/* The accounts a consent screen covers: a fieldset rather than a list, because
   the boxes are one answer to one question and the legend is the question. */
.gate__set {
  margin: 4px 0 0;
  padding: 12px 14px;
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 6px;
}

.gate__check {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 4px 0;
  font-size: 13.5px;
  color: var(--mist);
}

.gate__checkname .faint { font-size: 12px; }

.gate__set .gate__note { margin-top: 10px; }

.gate__do,
.gate__passkey,
.button {
  font: inherit;
  font-family: var(--font-data);
  font-size: 13px;
  padding: 9px 14px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid transparent;
}

.gate__do {
  margin-top: 4px;
  background: var(--accent-solid);
  border-color: var(--accent-solid);
  color: #fff;
}

.gate__do:hover { background: #46709f; }

.gate__passkey {
  width: 100%;
  background: rgba(142, 173, 214, 0.1);
  border-color: rgba(142, 173, 214, 0.4);
  color: var(--accent);
}

.gate__passkey:hover { background: rgba(142, 173, 214, 0.17); }

.gate__passkey--wide { margin-bottom: 4px; }

/* A rule with a word in it, which is all "or" needs to be. */
.gate__or {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0;
  font-size: 11px;
  color: var(--slate-deep);
}

.gate__or::before,
.gate__or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(148, 163, 184, 0.16);
}

/* ---------------------------------------------------------- settings */

.button {
  background: rgba(148, 163, 184, 0.1);
  border-color: rgba(148, 163, 184, 0.28);
  color: var(--mist);
}

.button:hover { background: rgba(148, 163, 184, 0.18); }

.button--quiet {
  padding: 5px 10px;
  font-size: 12px;
  color: var(--dim);
}

.panel {
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 14px;
  background: rgba(255, 255, 255, 0.02);
}

.panel__title {
  margin: 0 0 10px;
  font-family: var(--font-data);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim-deep);
  font-weight: 400;
}

.panel__line {
  margin: 0 0 10px;
  font-family: var(--font-data);
  font-size: 13.5px;
}

.panel__line--faint {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--dim);
}

.panel__do {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0 0;
}

.panel__state {
  font-family: var(--font-data);
  font-size: 12px;
  color: var(--dim-deep);
}

.panel__state--on { color: var(--accent); }

.keys {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.key-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.key-row__name {
  font-family: var(--font-data);
  font-size: 13px;
  min-width: 120px;
}

.key-row__when {
  font-size: 12px;
  color: var(--dim-deep);
}

.key-row form { margin-left: auto; }

/* The consent screen's two buttons sit on one row: approve is the weighted one
   the login form already uses, deny the quiet one beside it. */
.consent__do {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 0;
}

/* --------------------------------------------------------------------- junk

   The reader's junk set, one label a row. Set like the passkey list above it:
   the thing, then what can be done to it, with the row's own control ranged
   right. This page is the dark ground, so the tag and the keycap are drawn in
   its own tokens rather than borrowed from the rail's — the same two shapes,
   inverted, so a key named here is recognisably the key drawn on the popover
   rows and not a white chip dropped onto a dark page. */

.junk {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.junk__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.junk__row form { margin-left: auto; }

/* The junk tag, and it is quiet here for the same reason it is quiet in the
   rail: this is the mail nobody wants to look at. */
.junk .tag {
  display: inline-block;
  padding: 3px 7px 2px;
  border-radius: 3px;
  background: rgba(148, 163, 184, 0.12);
  color: var(--dim);
  font: 400 11px/1.3 var(--font-data);
}

/* No keycap rule here, and no keycap on these pages. Settings is a set of
   forms: Tab reaches every control and Enter works it, and a page that also
   taught a private keyboard grammar would be a second contract to learn in
   order to change six preferences. The mailbox's own keycaps are in main.css,
   where the keys they name actually are. */

/* ------------------------------------------------------------ domains

   The records screen is the one page in this app somebody works from with a
   second window open beside it — their registrar's DNS panel — and every
   decision here follows from that.

   The three columns are the three fields a registrar's form asks for, in the
   order it asks for them: type, name, value. Every value is set in the data
   face and wraps rather than truncating, because a DKIM target cut off to fit
   the column is a value somebody pastes wrong, and telling l from 1 in one
   matters more than anything else on the page.

   State is a rule down the row's left edge — the same grammar the rail uses
   for arrival, turned to a different question — so which records are still
   outstanding reads from across the room, before a word of it does. It is
   never colour alone: every row also says its state in a word, because a
   palette is not a legend. */

.gate__crumb {
  margin: 0 0 4px;
  font-size: 12px;
  color: var(--dim-deep);
}

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

.panel--flush { padding: 18px 0 0; }
.panel--flush > .panel__head,
.panel--flush > .faint,
.panel--flush > .panel__do--pad,
.panel--flush > .panel__line { padding-left: 20px; padding-right: 20px; }

.panel--lit { border-color: rgba(142, 173, 214, 0.35); }

.panel__note {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--dim-deep);
}

.panel__note code,
.panel__line code {
  font-family: var(--font-data);
  font-size: 11.5px;
  color: var(--dim);
}

/* A short numbered run inside a panel: the four things done with the address
   above it. Mono markers, because they are counted steps and not a list of
   things that happen to be in an order. */
.steps {
  margin: 14px 0 0;
  padding-left: 1.5em;
  font-size: 13px;
  color: var(--dim);
}

.steps li + li { margin-top: 7px; }

.steps li::marker {
  font-family: var(--font-data);
  font-size: 11.5px;
  color: var(--dim-deep);
}

.nowrap { white-space: nowrap; font-family: var(--font-data); }

/* ------------------------------------------------------- the domain list */

.domains {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.domain {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding: 11px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.domain__name {
  font-family: var(--font-data);
  overflow-wrap: anywhere;
  font-size: 14px;
  color: var(--mist);
  text-decoration: none;
  min-width: 140px;
}

a.domain__name:hover { color: #fff; text-decoration: underline; }

/* The state word, drawn as a tint rather than a block: this is a list to scan,
   and three saturated chips in a column would be louder than the names they
   are about. */
.domain__state {
  font: 400 11px/1.4 var(--font-data);
  padding: 2px 7px 1px;
  border-radius: 3px;
  white-space: nowrap;
}

.domain__state--done { color: var(--accent); background: rgba(142, 173, 214, 0.13); }
.domain__state--part { color: var(--warn-on-dark); background: rgba(217, 154, 62, 0.12); }
.domain__state--open { color: var(--dim); background: rgba(148, 163, 184, 0.12); }

/* The four lifecycle chips. Quieter than the state word beside them on
   purpose: the state names where a domain has got to and reads first, and the
   chips are what you look at once you want to know which part is missing.

   Three states and not two. An unknown chip is drawn as absence — dimmed, no
   tint — because "nobody has looked" is not "it is not there", the same rule
   the records table follows. */
.chips {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.chip {
  font: 400 10px/1.5 var(--font-data);
  padding: 1px 6px;
  border-radius: 3px;
  white-space: nowrap;
  border: 1px solid transparent;
}

.chip--live { color: var(--accent); background: rgba(142, 173, 214, 0.13); }
.chip--open { color: var(--dim); background: rgba(148, 163, 184, 0.10); }
.chip--unknown,
.chip--none {
  color: var(--dim-deep);
  border-color: rgba(148, 163, 184, 0.16);
}

/* Part-way is its own tint. A domain with two of its three sending records is
   not failing and is not finished, and drawing it as either would send
   somebody to the wrong screen. */
.chip--part { color: var(--warn-on-dark); background: rgba(217, 154, 62, 0.12); }

/* The one chip that is a label rather than a state: the DMARC record works
   without it, and the row says so where the state word would otherwise be
   read as a fault. */
.chip--opt {
  color: var(--dim);
  background: rgba(148, 163, 184, 0.12);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.domain__when {
  font-size: 12px;
  color: var(--dim-deep);
}

.domain form,
.domain > .button { margin-left: auto; }

/* ------------------------------------------------------ the records table */

.records {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
  /* Belt and braces beside the grid's own minmax(0, ...) columns and the
     value text's overflow-wrap: a record this table has not accounted for
     scrolls sideways inside the list rather than widening the page. */
  overflow-x: auto;
}

/* One row is a four-column grid with the explanation running the full width
   underneath it, which is what lets the value column take whatever it needs
   without the reason wrapping around it. */
.record {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) minmax(0, 1.6fr) auto;
  grid-template-areas:
    "kind host value do"
    "opt  opt  opt   state";
  align-items: baseline;
  column-gap: 14px;
  row-gap: 3px;
  padding: 12px 20px 12px 17px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  border-left: 3px solid transparent;
}

/* The row is not focusable. Its Copy button is, and the app's own focus ring
   marks it — one stop per record, in the order the records are listed. */

.record--live { border-left-color: var(--accent); }
.record--waiting { border-left-color: var(--warn-on-dark); }
.record--option { border-left-color: rgba(148, 163, 184, 0.3); }
.record--unchecked { border-left-color: rgba(148, 163, 184, 0.18); }

.record__kind {
  grid-area: kind;
  font: 700 11px/1.5 var(--font-data);
  letter-spacing: 0.04em;
  color: var(--dim);
}

.record__host { grid-area: host; min-width: 0; }
.record__value { grid-area: value; min-width: 0; }

/* Values wrap rather than truncate. Everything on this page exists to be
   copied exactly, and a value with an ellipsis in it is a value somebody
   retypes from memory. */
.record__text {
  display: block;
  max-width: 100%;
  font-family: var(--font-data);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--mist);
  overflow-wrap: anywhere;
}

.record__value .record__text { color: #fff; }

/* The MX priority, ahead of the host it belongs to, in the ink of a label
   rather than of a value: it goes in a different box on the registrar's form. */
.record__prio {
  display: inline-block;
  margin-right: 8px;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(148, 163, 184, 0.14);
  color: var(--dim);
  font-size: 11px;
}

/* The column names, carried on each row for the narrow layout and hidden at
   the width where the header row above can say them once. */
.record__label {
  display: none;
  font: 400 10px/1.4 var(--font-ui);
  letter-spacing: 0.04em;
  color: var(--slate-deep);
}

.record__do {
  grid-area: do;
  display: flex;
  align-items: center;
  gap: 6px;
}

.record__state {
  grid-area: state;
  justify-self: end;
  font: 400 11px/1.4 var(--font-data);
  color: var(--dim-deep);
  white-space: nowrap;
}

.record--live .record__state { color: var(--accent); }
.record--waiting .record__state { color: var(--warn-on-dark); }

/* The second line of a row, and only where there is something on it. Two
   records have a hint and five do not: what to do about an SPF or a DMARC
   record you already have, both of which are appended to rather than
   replaced, and both of which are how people break their own mail. */
.record__opt {
  grid-area: opt;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.record__hint {
  font-size: 12px;
  line-height: 1.5;
  color: var(--dim-deep);
  max-width: 66ch;
}

.record__hint code {
  font-family: var(--font-data);
  font-size: 11.5px;
  color: var(--dim);
  overflow-wrap: anywhere;
}

/* The sentence under the sending table after a check: what is live, what
   changed, and what is still outstanding. One line, and the only place the
   page says what the marks above it add up to. */
.after {
  margin: 0;
  padding: 14px 20px 0;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
  font-size: 13px;
  color: var(--dim);
  max-width: 74ch;
}

.record--bare {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "value do";
  padding-left: 17px;
  border-bottom: none;
}

.panel__do--pad { padding-bottom: 18px; }

/* Copy says what happened, in the button itself, because the clipboard has no
   other way of telling anybody it worked. */
.button[data-copied] {
  color: var(--accent);
  border-color: rgba(142, 173, 214, 0.4);
}

/* Under about 720px the four columns stop being four columns: the row becomes
   a stack, and the labels each cell carries for exactly this reason come out. */
@media (max-width: 720px) {
  .record {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "kind  state"
      "host  host"
      "value value"
      "opt   opt"
      "do    do";
    row-gap: 6px;
    padding: 14px 16px 14px 13px;
  }

  .record__label { display: block; }
  .record__do { justify-content: flex-start; margin-top: 2px; }
  .record__state { align-self: baseline; }
  .record--bare { grid-template-areas: "value value" "do do"; }
  .after { padding: 14px 16px 0; }
}

/* ===================================================================== the
   settings shell

   Two columns inside 1180px: a list of sections that never moves, and one
   section open beside it. The list is the whole navigation — no tabs, no
   accordion, no page that scrolls past six unrelated switches — and the
   selected row carries the same 2px accent rule the rail puts on the message
   being read, so "where am I" reads the same way in both halves of the app.

   Nothing under here is keyed. Every control is a link, a button or a field;
   the focus ring from base.css is the cursor, and Tab is how it moves. */

.set-body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--ground);
  color: var(--mist);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.6;
}

/* A real bar rather than the gate's floating mark: settings is somewhere you
   arrive from the mailbox and go back to it, and the way back belongs in the
   same place on every section. */
.set-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 64px;
  padding: 0 max(20px, calc((100% - 1180px) / 2));
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.set-head__brand { height: auto; margin: 0; }

.set-head__right {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* The account this page is about, named and not offered: switching is the
   mailbox chrome's job, and a caret here would promise a menu that is not
   behind it. */
.acct {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px 4px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.025);
  font-family: var(--font-data);
  font-size: 12px;
  color: var(--mist);
}

.set-head__away {
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--dim-deep);
  text-decoration: none;
}

.set-head__away:hover { color: var(--mist); }

.shell {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 34px 20px 60px;
}

.shell__title {
  margin: 0 0 6px;
  font-family: var(--font-data);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}

.shell__sub {
  margin: 0 0 26px;
  color: var(--dim);
  font-size: 13px;
  max-width: 74ch;
}

.cols {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 36px;
  align-items: start;
}

.col { min-width: 0; }

/* The way back to the sections list, which only exists on the narrow layout:
   on the wide one the list is the column beside this and never left. */
.col__back { display: none; }

.m-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
}

/* -------------------------------------------------------- the sections list */

.nav__title {
  margin: 0 0 9px;
  padding-left: 12px;
  font-family: var(--font-data);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim-deep);
  font-weight: 400;
}

.nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.nav__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 0 5px 5px 0;
  box-shadow: inset 2px 0 0 transparent;
  text-decoration: none;
}

.nav__row:hover { background: rgba(148, 163, 184, 0.06); }

.nav__row--on,
.nav__row--on:hover {
  background: rgba(142, 173, 214, 0.07);
  box-shadow: inset 2px 0 0 var(--accent);
}

.nav__name {
  font-family: var(--font-data);
  font-size: 13px;
  color: var(--dim);
}

.nav__row:hover .nav__name { color: var(--mist); }
.nav__row--on .nav__name { color: #fff; }

.nav__hint {
  margin-left: auto;
  font-family: var(--font-data);
  font-size: 11px;
  color: var(--slate-deep);
  white-space: nowrap;
}

.nav__row--on .nav__hint { color: var(--dim-deep); }

/* The chevron is a mobile affordance: on the wide layout the rule down the
   left says which row is open and an arrow would be saying it twice. */
.nav__chev { display: none; color: var(--slate-deep); }

.nav__rule {
  height: 1px;
  background: rgba(148, 163, 184, 0.12);
  margin: 10px 12px 9px;
}

.nav__note {
  margin: 12px 0 0;
  padding-left: 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--dim-deep);
}

/* ------------------------------------------------------- the section itself */

.section__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 14px;
}

.section__title {
  margin: 0;
  font-family: var(--font-data);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  overflow-wrap: anywhere;
}

/* Who this section belongs to, said once at the top instead of on every
   panel. Half of settings is the account's and half is the person's, and a
   page with two owners that never names either is a page you have to
   remember rather than read. A panel whose owner differs from the section's
   carries its own chip and is the only thing that does. */
.scope {
  flex: none;
  font: 400 10px/1.4 var(--font-data);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate-deep);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 3px;
  padding: 2px 6px 1px;
}

.panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 11px;
}

.panel__titles {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.panel__head .panel__title { margin: 0; }

.legend {
  margin: 0;
  font-size: 12px;
  color: var(--dim-deep);
  text-align: right;
}

.faint {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--dim);
  max-width: 72ch;
}

.faint code {
  font-family: var(--font-data);
  font-size: 11.5px;
  color: var(--dim);
}

.panel--lit { border-color: rgba(142, 173, 214, 0.35); }

/* Removal is set apart: a red edge, a sentence and nothing else in the panel,
   because it is the one control on its page that undoes the whole of it. */
.panel--danger {
  border-color: rgba(252, 165, 165, 0.2);
  background: rgba(252, 165, 165, 0.02);
  margin-top: 30px;
}

.panel__title--danger { color: var(--bad-on-dark); opacity: 0.8; }

.button--danger {
  color: var(--bad-on-dark);
  border-color: rgba(252, 165, 165, 0.28);
  background: rgba(252, 165, 165, 0.06);
}

.button--danger:hover { background: rgba(252, 165, 165, 0.12); }

/* The weighted button, for the one action a panel is actually for: Add a
   domain, Check these records, Send an invite. One per panel at most. */
.do {
  font: inherit;
  font-family: var(--font-data);
  font-size: 13px;
  padding: 9px 14px;
  border-radius: 6px;
  cursor: pointer;
  background: var(--accent-solid);
  border: 1px solid var(--accent-solid);
  color: #fff;
}

.do:hover { background: #46709f; }

.input {
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid rgba(148, 163, 184, 0.26);
  background: var(--ground-deep);
  color: var(--mist);
  font-family: var(--font-data);
  font-size: 13.5px;
  flex: 1 1 200px;
  min-width: 0;
  max-width: 320px;
}

.input::placeholder { color: var(--slate-deep); }

/* ------------------------------------------------------------------- rows

   Members, passkeys, accounts, grants. One shape for all four: the thing,
   what is known about it, and its own control ranged right. */

.rows {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 11px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.row__name {
  font-family: var(--font-data);
  font-size: 13px;
  color: var(--mist);
  min-width: 200px;
  overflow-wrap: anywhere;
}

.row__when {
  font-size: 12px;
  color: var(--dim-deep);
}

.row__end {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* A note under a row's own line rather than beside it: .row wraps, so a
   full-basis child takes the next line without a nested wrapper. */
.row__note {
  flex-basis: 100%;
  font-size: 12px;
  color: var(--dim);
}

.row--off .row__name,
.row--off .row__when { color: var(--slate-deep); }

.tag {
  display: inline-block;
  padding: 3px 7px 2px;
  border-radius: 3px;
  background: rgba(148, 163, 184, 0.12);
  color: var(--dim);
  font: 400 11px/1.3 var(--font-data);
}

/* ------------------------------------------------------- the domains list

   One line a domain, and two chips on it: is mail arriving, and can mail go
   out. Those are the two questions the page exists for, they are set up
   separately, and nearly everybody mid-setup is done with one and not the
   other — so they are answered separately and in words, never in colour
   alone. */

.dom {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.dom__name {
  font-family: var(--font-data);
  font-size: 14px;
  color: var(--mist);
  text-decoration: none;
  min-width: 150px;
  overflow-wrap: anywhere;
}

a.dom__name:hover { color: #fff; text-decoration: underline; }

.dom__chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.dom__end {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.dom__when {
  font-size: 12px;
  color: var(--slate-deep);
  white-space: nowrap;
}

/* The add box. Inline on a desk, stacked full width on a phone, where the
   field is 16px so iOS does not zoom into it. */
.form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0 0;
}

/* The quiet foot line that used to be a panel of prose about syncing: how old
   the answer above it is, and the offer to ask again. */
.foot {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 16px 0 0;
  font-size: 12px;
  color: var(--slate-deep);
}

.foot form { display: contents; }
.foot a { color: var(--dim); }
.foot__sep { color: var(--slate-deep); }

/* Refresh is a form because it changes something, and a link because that is
   what it is worth on the page. */
.foot__do {
  font: inherit;
  font-size: 12px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--dim);
  cursor: pointer;
  text-decoration: underline;
}

.foot__do:hover { color: var(--mist); }

.foot__admin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-left: 8px;
  border-left: 1px solid rgba(148, 163, 184, 0.12);
}

.foot__tag {
  font: 400 10px/1.4 var(--font-data);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate-deep);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 3px;
  padding: 2px 6px 1px;
}

/* --------------------------------------------------- one domain's records */

/* What happens, in a line, above the two tables. The domain itself is set in
   the data face inside it: it is the one word on the line somebody checks
   against what they typed. */
.what {
  margin: 0 0 16px;
  font-size: 13.5px;
  color: var(--dim);
  max-width: 74ch;
}

.what b {
  color: var(--mist);
  font-weight: 400;
  font-family: var(--font-data);
}

.state-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 18px;
}

/* ------------------------------------------------------------- narrow

   Under 800px there is no room for two columns, so there is one thing on the
   screen at a time: the sections list, or a section. The back link targets
   the list, which is the only state the fragment carries — no script, and the
   browser's own Back works between them. */

@media (max-width: 799px) {
  .set-head { padding: 0 20px; height: 56px; }
  .set-head__away { display: none; }
  .shell { padding: 22px 20px 40px; }
  .cols { grid-template-columns: minmax(0, 1fr); gap: 0; }

  .nav { display: none; }
  .nav:target { display: block; }
  .nav:target ~ .col { display: none; }

  .nav__title { padding-left: 2px; }
  .nav__list { gap: 0; border-top: 1px solid rgba(148, 163, 184, 0.12); }

  .nav__row {
    min-height: 56px;
    padding: 8px 2px;
    border-radius: 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    box-shadow: none;
  }

  .nav__row--on,
  .nav__row--on:hover { background: none; box-shadow: none; }
  .nav__name { font-size: 14px; color: var(--mist); }
  .nav__chev { display: flex; }
  .nav__note { padding-left: 2px; }

  .col__back { display: block; margin: 0 0 6px; }

  .section__head { flex-wrap: wrap; gap: 6px 10px; }
  .section__title { flex-basis: 100%; }

  .panel { padding: 16px; }
  .panel__head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .legend { text-align: left; }

  /* .input and .gate__input--inline both carry a `flex: 1 1 200px` meant for
     an inline row. .panel__do switches to a column below, and on the main
     axis of a column flex container that same 200px is a MINIMUM HEIGHT, not
     a width — every text box on this breakpoint was rendering as a ~200px
     tall block because of it. Reset the flex-basis so the box sizes to its
     content again, and size it explicitly instead of leaning on stretch. */
  .input,
  .gate__input--inline {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    font-size: 16px; /* iOS zooms in on focus below 16px; never larger than this */
  }
  .panel__do { align-items: stretch; flex-direction: column; }
  .panel__do .button,
  .panel__do .do { min-height: 44px; }

  .row__name { min-width: 0; flex-basis: 100%; }
  .row__end { margin-left: 0; }

  /* A domain is a stack rather than a line: the name, its two chips, then
     when it was checked and its own control across the width. Everything
     touchable clears 38px, and the add box follows .panel__do above. */
  .dom { flex-direction: column; align-items: flex-start; gap: 9px; padding: 15px 0; }
  .dom__name { min-width: 0; font-size: 15px; }
  .dom__end { margin-left: 0; width: 100%; justify-content: space-between; }
  .dom__end .button { min-height: 38px; }

  .form { flex-direction: column; align-items: stretch; }
  .form .do,
  .form .button { min-height: 44px; width: 100%; }
}