/* 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; }

/* TWO PARAGRAPHS OF LEDE, which "Use one of your computers from here" is the
   first section on this site to need. `.site-body-text` sets margin: 0 -- right
   for the single paragraph every other panel has -- so the second one butted
   straight against the first and the two rendered as one wall of text.
   Measured at 1366x768, which is the only way this kind of thing is ever found.
   Scoped to adjacent siblings, so no panel with one paragraph moves at all. */
.account-panel > .site-body-text + .site-body-text { margin-top: var(--s3); }

/* 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 {
  min-width: 0;
  flex-wrap: wrap;
  gap: var(--s2);
}
.account-rows .settings-control .ctl-btn {
  flex-shrink: 0;
  padding-inline: var(--s4);
}

/* `hidden` DOES NOTHING TO THESE, AND THAT IS NOT A DETAIL.
 *
 * The UA rule is `[hidden] { display: none }`, which any author `display` beats
 * on specificity -- and the product sets `.ctl-btn { display: flex }` and
 * `.settings-row { display: grid }`. So every `element.hidden = true` in
 * account.js was a no-op on exactly these two: measured with the Remove
 * confirmation open and the Remove button it replaces still sitting in the row
 * beside it, offering the unguarded press the confirmation exists to stop. The
 * shipped "Delete account" button had the same defect and nobody had looked.
 *
 * Restated here rather than fixed at each call site, because the next control
 * somebody adds to a row will inherit the same trap. */
.account-rows .ctl-btn[hidden],
.account-rows .settings-row[hidden],
.account-panel .ctl-btn[hidden] { display: none; }

/* 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;
}

/* THE CONFIRMATION THAT OPENS INSIDE THE TABLE.
 *
 * "Remove" destroys a computer registration, and undoing it means standing at
 * the machine that was removed -- on a page that exists precisely because that
 * machine is somewhere you are not. It was one click, with no confirmation,
 * styled exactly like "Sign out", while "Delete account" two rows below asked
 * for a password. The confirmation opens as a sibling of the row it belongs to
 * (.settings-section-rows is a column flex container, so a block child lands
 * directly under its row) and it is indented by its own rule so it reads as
 * belonging to that row rather than as a new section. */
.account-rows .account-confirm {
  margin: 0 0 var(--s3) var(--s4);
  border-bottom: 0;
}

/* 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; }

/* --------------------------------------------------------- adding a computer
 *
 * The same bordered-block grammar as the delete confirmation, but on the
 * NEUTRAL rule rather than the serious one: this block asks a question, it
 * does not warn about one. The title inherits the ink rather than the
 * severity colour for the same reason.
 *
 * The code the person is copying is DATA, so it renders mono, uppercase, and
 * slightly tracked -- the same treatment the spec table gives every other
 * value the product prints, and the shape that makes 4-and-4 groups readable
 * at a glance. */
.account-claim {
  margin-top: var(--s5);
  padding: var(--s4) 0 var(--s4) var(--s4);
  border-left: 2px solid var(--line-2);
  max-width: 72ch;
}
.account-claim[hidden] { display: none; }
.account-claim .account-confirm-title { color: var(--ink-2); }
.account-claim-example { font-family: var(--font-mono); letter-spacing: 0.04em; }
.account-claim input[data-claim-code] {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.account-claim-factor[hidden] { display: none; }
.account-claim-email-code {
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  width: min(100%, calc(var(--s5) * 6));
}

/* ------------------------------------------------------------------ the rule
 *
 * THE ONE PARAGRAPH THE REST OF THE PAGE DEPENDS ON.
 *
 * Not a warning, so it takes no severity colour; not a form, so it takes no
 * question rule. It is the neutral left-ruled block the claim box uses, one
 * step heavier, because it is the thing a person must read BEFORE any of the
 * controls under it mean anything. Everything else here is a variation on it
 * rather than a fourth grammar. */
.account-rule {
  margin-top: var(--s5);
  padding: var(--s4) 0 var(--s4) var(--s4);
  border-left: 2px solid var(--line-2);
  max-width: 72ch;
}
.account-rule-title {
  margin: 0 0 var(--s3);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 620;
  line-height: 1.35;
}
.account-rule .site-body-text + .site-body-text { margin-top: var(--s3); }
/* The panel's own `+` rule only reaches adjacent paragraphs, so the paragraph
   AFTER this block butted straight against its bottom edge. Measured at
   1366x768: the rule box ended at y=813 and the next sentence began at 813. */
.account-rule + .site-body-text { margin-top: var(--s3); }

/* ---------------------------------------------------------------- the notice
 *
 * IT SITS OUTSIDE BOTH BRANCHES NOW, so it has to carry its own spacing rather
 * than inheriting a panel's. See the markup: nested inside [data-signed-in] it
 * could never paint for the one case it existed for. */
.account-notice {
  margin: var(--s5) 0 0;
  max-width: 72ch;
}
.account-notice[hidden] { display: none; }
.account-notice .ctl-btn { margin-top: var(--s3); padding-inline: var(--s4); }
.account-notice .ctl-btn[hidden] { display: none; }

/* ---------------------------------------------------------------- the fields
 *
 * A LABEL YOU CAN CLICK, WHICH THESE CONTROLS DID NOT HAVE. The two connect
 * dropdowns carried an aria-label and nothing visible at all -- two identical
 * boxes whose order silently decided which computer was reachable for the life
 * of the connection. A visible <label for> is both the sentence and the
 * larger target. */
.account-field { display: grid; gap: var(--s1); margin: 0; }
.account-field[hidden] { display: none; }
.account-field-label {
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 560;
  line-height: 1.35;
  cursor: pointer;
}
.account-field .ctl-select,
.account-field .fleet-profile-input { width: min(100%, calc(var(--s5) * 12)); }

/* ------------------------------------------------------------------ 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; }

/* IDENTIFIERS ARE VALUES, NOT A NEW MINIMUM PAGE WIDTH.
 *
 * Email addresses, claim codes, machine IDs and document digests may contain
 * no browser-selected break point at all. The named values in the document and
 * the values painted into record rows therefore permit a break at any glyph.
 * `word-break` is the fallback for older mobile engines; `min-width: 0` lets
 * the record's grid column actually become narrower than its longest value. */
.account-value,
.account-record .settings-name,
.account-record .settings-desc {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.account-record .settings-copy { min-width: 0; }

.account-sensitive-factor { margin-block: 20px; }
.account-sensitive-factor[hidden] { display: none; }
.account-sensitive-factor > .ctl-btn { margin-block: 8px 20px; }
.account-sensitive-factor > .account-confirm-body { max-width: 60ch; }
.account-sensitive-factor > input { max-width: 240px; letter-spacing: .14em; }

/* Reserve below-fold space while initial auth probe resolves so the trailing
   context note does not jump vertically across the viewport on unhide. */
html.js .acct > [data-signed-in][hidden] + [data-signed-out][hidden] + .site-wrap {
  margin-top: 100vh;
}