/* THE SIGN-IN PAGE — the only page on this site the application does not draw.
 *
 * It sits on the site's own grid and rhythm, and its FORM is the product's,
 * class for class: .settings-section-rows, .settings-row, .settings-copy,
 * .settings-name, .settings-desc, .settings-control.fleet-inline-control,
 * .fleet-profile-input, .setup-actions, .setup-actions-spacer, .ctl-btn, and
 * .fleet-profile-status for the disclosure. Nothing here restyles any of them.
 *
 * There is no card. The product's own account screen — which is a sign-in
 * screen — stands directly on the ground with no panels at all: measured, three
 * white elements on the whole page and every one of them a control.
 *
 * What follows is only what a DOCUMENT needs and a single-window program has no
 * equivalent for.
 */

/* The form's measure. Wider than reading, because each row carries a control at
   its right edge and the product gives that control 216px of its own. */
.site-form { max-width: 720px; }
.site-form > .site-body-text { margin-bottom: var(--s5); max-width: 60ch; }

/* `[hidden]` is a UA rule and `.fleet-profile-status { display: grid }` is a
   class rule, so the class wins on specificity and the notice would stand
   visible and empty above the form on every visit — a ruled block with nothing
   in it. Caught by reading the cascade rather than by loading the page. */
.fleet-profile-status[hidden] { display: none; }
.site-form .fleet-profile-status { margin-bottom: var(--s5); }

/* ------------------------------------------------------- WHAT IS AGREED TO
 *
 * Two of the product's own toggle rows, and nothing invented: `.settings-row`
 * puts the name and description on the left and the control hard against the
 * right edge, which is where the program puts every switch it has.
 *
 * The checkbox itself is the browser's, exactly as the product leaves it --
 * its settings screen styles `.settings-toggle` with `flex:none` and stops.
 * The only addition is `accent-color`, scoped to these rows so it cannot reach
 * the bundle's own controls, because the default blue is the one colour on
 * this page that belongs to no theme. */
.signin-consent input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--ink-2);
  cursor: pointer;
}
.signin-consent[hidden] { display: none; }
.signin-consent .settings-desc a { color: var(--ink-2); }
.signin-consent .settings-desc a:hover { color: var(--ink); }

/* THE DOCUMENT, NAMED AS DATA. The product sets every identifier and every
   measured value in JetBrains Mono; a version and a digest are both. Quiet,
   because it is a receipt rather than an instruction. */
.signin-consent-meta {
  margin: var(--s2) 0 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--ink-3);
  overflow-wrap: anywhere;
}
.signin-consent-meta[hidden] { display: none; }

/* `.ctl-btn` takes its horizontal padding from the browser (a <button> UA
   default, which is why the product only restores it inside `.setup-actions`)
   and an anchor also inherits the page's link underline. Both restored with the
   product's own value. */
.signin-actions a.ctl-btn { padding-inline: var(--s4); text-decoration: none; }

/* THE PRODUCT'S OWN ACTION ROW HAS NO `flex-wrap`, and at phone width its four
   controls overflow horizontally — a measured defect on its account screen.
   This page has the same four-control shape, so it wraps rather than
   reproducing the bug: the spacer collapses and the buttons stack right. */
.signin-actions { flex-wrap: wrap; row-gap: var(--s2); }

@media (max-width: 520px) {
  /* Below this the row cannot hold four controls without one being a sliver, so
     each takes the full width in reading order. */
  .signin-actions { flex-direction: column; align-items: stretch; }
  .signin-actions .setup-actions-spacer { display: none; }
  .signin-actions .ctl-btn { width: 100%; }
}

/* ------------------------------------------------------------- THE OTHER DOOR
 *
 * Google sign-in, and it is the SECOND control on the page rather than the
 * first. Services that lead with a big coloured provider button are optimising
 * for their own conversion; this product's argument is that it works without an
 * account at all, so the quieter path is the honest default and the provider is
 * an alternative rather than the front door.
 *
 * No Google brand mark. Their guidelines require a specific asset used a
 * specific way, and a slightly-wrong one is worse than none -- so this is the
 * product's own `.ctl-btn` with the product's own type, saying plainly what it
 * does. If the brand mark is ever wanted it comes with the guidelines attached,
 * as a decision rather than as a graphic.
 */
.signin-alt { margin-top: var(--s5); max-width: 720px; }
.signin-alt[hidden] { display: none; }

/* A rule with a word in it: the product separates unlike things with a hairline
   and nothing else, and this is the one place a label on the hairline earns its
   keep, because "or" is doing real work. */
.signin-alt-rule {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: 0 0 var(--s4);
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 640;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}
.signin-alt-rule::before,
.signin-alt-rule::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--line-2);
}

.signin-google {
  padding-inline: var(--s4);
  width: min(100%, calc(var(--s5) * 12));
}

/* WHAT GOOGLE HANDS OVER, said next to the button rather than in a policy
   nobody opens at that moment. It matches the privacy policy's own sentence
   because it describes the same scope -- the authorization request asks for
   `openid email` and nothing else, so this is a description of the code and
   not a reassurance about it. */
.signin-alt-note {
  margin: var(--s2) 0 0;
  max-width: 60ch;
  color: var(--ink-3);
  font-size: 12.5px;
  line-height: 1.45;
  text-wrap: pretty;
}

.signin-noscript {
  max-width: var(--page-max);
  margin: var(--s5) auto;
  padding-inline: clamp(var(--page-gutter), 4vw, 40px);
  color: var(--s-serious);
  font-size: 13px;
  line-height: 1.55;
}