/* The Settings cards — the card itself, its rows and chips, the Security and
 * Backups cards, and "Use a code instead" on the sign-in pane.
 *
 * Split out of views.css in increment S (views.css stood at 764 of its 800
 * lines): the rules are the ones that file held, moved whole, in their old
 * order. Linked straight after views.css and tabs.css, so every later
 * stylesheet (settings.css, exports.css, tray.css, …) still lays its own
 * rules over these exactly as before.
 *
 * Tokens only (tokens.css carries light AND dark); sizes are steps of the
 * type scale (--text-*), never a number.
 */

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

.card {
  margin: var(--space-6) 0;
  padding: var(--space-4) var(--space-4) var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.card__title {
  margin: 0 0 var(--space-2);
  font-size: 1.15rem;
  line-height: 1.25;
}

.card__lede {
  margin: 0 0 var(--space-4);
  color: var(--ink-muted);
  font-size: var(--text-base);
}

/* A <label> is inline, so .btn's min-height would do nothing on its own. */
.card__choose {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Visually hidden, NOT display:none: a file input the browser does not render
 * cannot be reached by the keyboard, and the label's :focus-within below is
 * what gives it a visible focus ring. */
.card__file {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.card__choose:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.card__status {
  margin: var(--space-4) 0 0;
  color: var(--ink-muted);
  font-size: var(--text-base);
}

.card__status[data-state="ok"] {
  color: var(--ok);
}

.card__status[data-state="error"] {
  color: var(--danger);
}

.card__section {
  margin: var(--space-6) 0 0;
}

.card__subtitle {
  margin: 0 0 var(--space-2);
  color: var(--ink-faint);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.card__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.card__item {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-base);
}

.card__item:last-child {
  border-bottom: 0;
}

.card__name {
  font-weight: 600;
}

.card__detail {
  color: var(--ink-muted);
  font-size: var(--text-md);
}

/* S, step 2: a card's sentences keep to a line the eye can follow back
 * (tokens.css --measure, about 75 characters). In the 42rem column at 600px
 * and wider they ran to 99 characters a line. A paragraph only: the same
 * class on a span inside a row is that row's, and is as long as it is.
 * The Backups card's three lines (below) are sentences too. Below the desk
 * only: the three panes keep the wrapping they were approved with. */
@media (max-width: 1099.98px) {
  .card__lede,
  p.card__detail,
  .backup__line,
  .backup__where,
  .offsite__line {
    max-width: var(--measure);
  }
}

.card__count {
  color: var(--emphasis);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* The server's own markdown, shown as the text it is. It carries names out of
 * the fleet file and out of the owner's filename, so it reaches the page
 * through textContent and nothing else, ever. */
.card__report {
  margin: var(--space-4) 0 0;
  padding: var(--space-3);
  max-height: 22rem;
  overflow: auto;
  background: var(--surface-sunken);
  border-radius: var(--radius-sm);
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ------------------------------------ a Settings card's name-and-state row (S1)
 *
 * The Security card (the TOTP spare door, security-card.js) and the Backups card
 * (backup-card.js): a status chip beside the thing's name. Built in the
 * wireframe's card language, with no colour outside tokens.css. */

.card__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
}

/* The chip: green when all is well, orange while something is awaited or
 * something needs the owner (MOCKUP's orange: "things needing attention" — a
 * failing backup, a leaked key), a quiet outline when it is off or unknown.
 * Text, never colour alone, says which. */
.card__chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink-muted);
  font-size: var(--text-sm);
  font-weight: 600;
}

.card__chip[data-state="on"] {
  border-color: var(--accent);
  background: var(--surface-sunken);
  color: var(--ok);
}

/* --warn-ink on --tint-warn: 4.92:1 light, 6.97:1 dark; the edge 3.32:1. */
.card__chip[data-state="waiting"],
.card__chip[data-state="problem"] {
  border-color: var(--emphasis-edge);
  background: var(--tint-warn);
  color: var(--warn-ink);
}

/* ------------------------------------------------ the Security card (S1)
 *
 * The key in the mono face the time chips use, the QR on its own white ground. */

/* When a shorter screen brings the card's head back (review round 2), it stops
 * a small step under the top edge rather than flush against it. */
.security {
  scroll-margin-block-start: var(--space-3);
}

.security__note {
  margin: var(--space-2) 0 0;
  color: var(--ink-faint);
  font-size: var(--text-sm);
}

/* Under the steps, above Confirm: the same gap the buttons keep from a field. */
.security__steps + .security__note {
  margin: 0 0 var(--space-4);
}

.security__warn {
  margin: 0 0 var(--space-4);
  padding: var(--space-3);
  border-left: 3px solid var(--emphasis-edge);
  background: var(--tint-warn);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: var(--text-base);
}

.security__steps {
  margin: 0 0 var(--space-2);
  padding-left: var(--space-6);
}

.security__step {
  margin: 0 0 var(--space-4);
}

.security__say {
  margin: 0 0 var(--space-2);
  font-size: var(--text-base);
}

/* The server's SVG paints its own white ground; the frame keeps a quiet zone
 * round it in dark mode too, where a QR on a dark card will not scan. */
.security__qr {
  display: block;
  width: 13.75rem;
  max-width: 100%;
  height: auto;
  padding: var(--space-2);
  background: var(--qr-ground);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.security__open {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  color: var(--accent);
  font-weight: 600;
}

/* The app's ring, as on every other control (review round 1): without it the
 * browser's own showed — a 1 px near-black line, invisible on the dark card. */
.security__open:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.security__secret {
  display: block;
  padding: var(--space-3);
  background: var(--surface-sunken);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: 0.06em;
  line-height: 1.6;
  overflow-wrap: anywhere;
  user-select: all;
}

.security__code {
  max-width: 12rem;
  font-family: var(--font-mono);
  font-size: 1.25rem;
  letter-spacing: 0.2em;
}

/* A refused code's words, right under the field (review round 1): 8 px below
 * it (the field's 16 px margin and −8 px collapse), and when security-card.js
 * scrolls them into view they stop clear of the tab bar, which is sticky at the
 * foot over the page — with the phone's keyboard up, just above the keys. */
.security__step .card__status {
  margin: calc(-1 * var(--space-2)) 0 0;
  scroll-margin-block-end: calc(var(--tabs-h) + var(--space-3));
}

/* ------------------------------------------------ the Backups card (S1) */

.backup__line,
.backup__where,
.offsite__line {
  margin: 0 0 var(--space-4);
  color: var(--ink);
  font-size: var(--text-base);
}

/* "Not off-site yet" is read WITH the last run, so it sits one small step under
 * it (16 px of margin and −8 px collapse to 8 px) rather than a paragraph away. */
.backup__line + .backup__where {
  margin-top: calc(-1 * var(--space-2));
}

/* "Download the newest copy" (review round 2) is a link — the browser saves the
 * file itself — dressed as the button beside it: the same 44 px, no underline. */
.backup__download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* Which copy the link gives, or where to take one from PSDiary.exe: a quiet
 * caption under the buttons, as the Security card's notes are. */
.backup__file {
  margin: var(--space-2) 0 0;
  color: var(--ink-faint);
  font-size: var(--text-sm);
}

/* ---------------------------------------- "Use a code instead" (sign-in pane) */

.code-signin {
  margin: var(--space-3) 0 0;
}

.code-signin__form {
  margin: var(--space-3) 0 0;
}

.code-signin__code {
  max-width: 12rem;
  font-family: var(--font-mono);
  font-size: 1.25rem;
  letter-spacing: 0.2em;
}

/* Between the field and the button, 8 px under the field (its 16 px margin and
 * −8 px collapse), so the phone's keyboard cannot hide it (review round 1).
 * Signed out there is no tab bar, so a small step clears the keys. */
.code-signin__error {
  margin: calc(-1 * var(--space-2)) 0 var(--space-4);
  color: var(--danger);
  font-size: var(--text-base);
  scroll-margin-block-end: var(--space-3);
}

/* A settings card's "working" chip (V3D, Todoist: "Connected"). Not
 * .chip--link: that one's lime wash has no dark value in tokens.css, so its
 * light text sat on a light wash in dark mode. --ok is defined for both. */
.card .chip--ok {
  border-color: var(--ok);
  color: var(--ok);
}

/* Its "needs you" chip (V3D: "Not configured", "Last sync failed"). capture.css
 * .chip--choose draws --warn words on an --emphasis edge: 3.32:1 and 2.52:1 on
 * the white card in light mode (review round 1). tokens.css keeps a token for
 * each job — --warn-ink for orange TEXT (5.57:1), --emphasis-edge for a BORDER
 * that carries state (3.32:1) — and both hold in dark mode too. */
.card .chip--choose {
  border-color: var(--emphasis-edge);
  color: var(--warn-ink);
}

/* ---------------------------- the DG Fleet Manager card's link (wave X)
 *
 * The chip — green when the link is set up, the quiet outline when it is not
 * (.card__chip above) — then its sentences, then the upload under its own
 * heading. The block is hidden until the server has said which state it is. */
.fleetlink {
  margin: 0 0 var(--space-4);
}

.fleetlink__state {
  margin: 0 0 var(--space-2);
}

.fleetlink > .card__detail {
  margin: 0 0 var(--space-2);
}

.fleetlink__fallback {
  margin-top: var(--space-4);
}

.fleetlink__fallback > .card__detail {
  margin: 0 0 var(--space-3);
}