/* THE ACCOUNT PAGE — the one page on this site that is about you.
 *
 * Everything structural comes from elsewhere: the site's wrap, section and spec
 * from site-page.css, the notice block and wrapping action row from signin.css,
 * and the rows themselves from the product (.settings-row, .settings-copy,
 * .settings-name, .settings-desc, .settings-control, .ctl-btn). What is here is
 * only what a page listing THINGS YOU OWN needs and none of those provide.
 *
 * THE MISTAKE THIS FILE WAS REWRITTEN TO FIX. The first version reused
 * signin.css's `.site-form` for the listings, so every row stopped at 720px
 * while the page's own hairlines ran to 1240 -- the Remove buttons floated in
 * the middle of the page with 500px of nothing to their right, and the records
 * had no rules at all, so a machine and its button read as two loose objects
 * rather than one row. It was only visible in a screenshot.
 *
 * A form has a measure, because the eye returns to a left edge after every
 * line. A LIST OF RECORDS does not: it is a table, it wants the full column,
 * and it wants the hairline the product puts under every row of one. The site
 * already draws exactly this and it is 40px to the right -- the `.site-spec`
 * block in the hero, term left, value right, one rule per row.
 */

/* ------------------------------------------------------------- the listings */

/* The panel takes the whole column. What must NOT take the whole column is
   prose, so the paragraphs inside it keep a reading measure of their own. */
.account-panel > .site-body-text,
.account-panel > .fleet-profile-status,
.account-empty { max-width: 62ch; }

/* A table, ruled the way the spec block is ruled: a heavier line to open it and
   a hairline under every row. */
.account-rows {
  margin-top: var(--s5);
  border-top: 1px solid var(--line-2);
}
.account-rows .settings-row {
  margin: 0;
  padding-block: var(--s3);
  border-bottom: 1px solid var(--line);
}
/* The description is the only thing in a row that can run long, and a sentence
   1200px wide is unreadable however wide the table is. */
.account-rows .settings-copy { max-width: 68ch; }

/* THE BUTTONS IN A ROW HAVE NO PADDING OF THEIR OWN.
 *
 * `.ctl-btn` sets height, border, background and type but no horizontal
 * padding: the product only ever uses it inside `.setup-actions`, which
 * restores the padding a <button> would otherwise take from the browser. Used
 * in a settings row it renders at 0px each side and the label touches the
 * border -- measured, not guessed, and the reason "Remove" came out 51px wide.
 *
 * Restored with the product's own value, the same way signin.css restores it
 * for the anchors in its action row. */
.account-rows .settings-control .ctl-btn { padding-inline: var(--s4); }

/* A connected computer and an accepted document are both records rather than
   settings, so their name is set the way the product sets every identifier and
   every measured value: JetBrains Mono. The product does this itself -- its own
   `.settings-name` has a mono variant for exactly this case. */
.account-record .settings-name {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
}

/* Nothing there yet, said in the same quiet as a description rather than as a
   warning. An empty list is a normal state on the first day. */
.account-empty {
  margin: var(--s3) 0 0;
  color: var(--ink-3);
  font-size: 12.5px;
  line-height: 1.45;
}

/* --------------------------------------------------------------- the button
 *
 * `.ctl-btn.is-serious` is the site's, built the way the site built
 * `.is-primary`: the product's three values with a different role colour in
 * them. It is NOT red-filled. The product never fills anything with a state
 * colour -- severity arrives as a 2px left rule or a 7px dot, never as a
 * surface -- and a scarlet button here would be the single loudest object on a
 * site whose whole argument is that it is quiet.
 *
 * It is also the ONLY red thing in its row. Marking the row as well would be
 * the same warning given twice, and the confirmation below is the mechanism
 * that actually makes this hard to press by accident. */
.ctl-btn.is-serious {
  border-color: color-mix(in oklab, var(--s-serious) 38%, var(--line-2));
  background: color-mix(in oklab, var(--s-serious) 6%, var(--sheet));
  color: var(--s-serious);
}
.ctl-btn.is-serious:hover {
  border-color: color-mix(in oklab, var(--s-serious) 62%, var(--line-2));
  background: color-mix(in oklab, var(--s-serious) 12%, var(--sheet));
  color: var(--s-serious);
}
.ctl-btn.is-serious:disabled { opacity: 0.55; cursor: default; transform: none; }

/* ---------------------------------------------------------- the confirmation
 *
 * Opens in place, under the button, rather than over the page. A dialog that
 * covers what it is about to destroy is answered from memory; this keeps the
 * machines and the account's own address visible above it while the question
 * is being answered.
 *
 * This is where the product's severity grammar belongs: a 2px left rule, on
 * the one block that is actually asking. */
.account-confirm {
  margin-top: var(--s5);
  padding: var(--s4) 0 var(--s4) var(--s4);
  border-left: 2px solid var(--s-serious);
  max-width: 72ch;
}
.account-confirm[hidden] { display: none; }
.account-confirm-title {
  margin: 0;
  color: var(--s-serious);
  font-size: 13px;
  font-weight: 620;
  line-height: 1.35;
}
.account-confirm-body {
  margin: var(--s1) 0 var(--s4);
  max-width: 60ch;
  color: var(--ink-3);
  font-size: 12.5px;
  line-height: 1.45;
  text-wrap: pretty;
}
.account-confirm-form { display: grid; gap: var(--s4); }
.account-confirm-form .fleet-profile-input { width: min(100%, calc(var(--s5) * 12)); }
.account-confirm-form .signin-actions { margin: 0; }

/* ------------------------------------------------------------------ the spec
 *
 * The hero states the account's own values, and they are all data: an address,
 * a date and a count. Mono, like every other value the product prints.
 *
 * They start as em dashes rather than as blanks, because the fetch has not
 * landed on first paint and a row with nothing in it reads as broken where a
 * row with a dash in it reads as not yet known. */
.site-spec dd[data-spec-email],
.site-spec dd[data-spec-created],
.site-spec dd[data-spec-devices] { font-family: var(--font-mono); }

/* An address is the one value here that can be longer than its column, and a
   long one must wrap rather than push the table wider than the page. */
.site-spec dd[data-spec-email] { overflow-wrap: anywhere; }