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

/* ------------------------------------------- THE TWO BOXES YOU TYPE INTO
 *
 * THE SINGLE MOST LIKELY THING TO END A SIGN-UP, and it was invisible.
 *
 * MEASURED BEFORE THIS BLOCK, at 1366x768 and 390x844: `.fleet-profile-input`
 * computed to a transparent background, no border at all except
 * `border-bottom: 1px solid rgba(14,23,38,0.12)` -- which is 1.28:1 against the
 * page ground, under the 3:1 a control owes anybody -- no placeholder, 13px
 * text, a 216x33 box, and a focus state that changed the colour of that one
 * hairline and nothing else. At 390px the two credential fields were visually
 * identical to the rules in the spec table 300px up the page. Two scouts
 * arriving from different directions each called this the first thing to fix,
 * and they are right about the consequence: somebody who cannot find where to
 * type does not file a bug, they close the tab.
 *
 * WHY IT IS SCOPED TO `.site-form` AND NOT FIXED AT SOURCE. That class belongs
 * to the product's own settings screen, where a hairline under a value is the
 * house style and correct: it is a field you EDIT inside a program you are
 * already using. A form a stranger meets on the open web has to say "type
 * here" before anything else, and the product's bundle is vendored -- not ours
 * to edit. So the override lives on the page that needs it.
 *
 * THE FOUR NUMBERS, and each is a floor rather than a taste:
 *   border  --ink-3, which measures 4.42:1 against this ground (needs 3:1)
 *   44px    the smallest thing a finger reliably hits
 *   16px    below this, iOS zooms the page on focus and never zooms back
 *   outline a focus ring you can see without hunting for a changed hairline
 */
.site-form .fleet-profile-input {
  min-height: 44px;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--ink-3);
  border-radius: 3px;
  background: var(--sheet);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.35;
}
.site-form .fleet-profile-input::placeholder {
  color: var(--ink-3);
  /* A placeholder that looks like a typed value is worse than none, so it is
     one notch lighter than the text it sits behind. */
  opacity: 0.85;
}
.site-form .fleet-profile-input:hover { border-color: var(--ink-2); }
/* `:focus`, not only `:focus-visible`. A text field that has been clicked into
   is a field a person is typing in, and the ring is the thing telling them the
   keystrokes are landing there and not in the box above. */
.site-form .fleet-profile-input:focus {
  border-color: var(--focus-ring);
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}
@media (max-width: 620px) {
  /* Below this the product's own rule stacks the label above the control, so
     the 288px the control gets on a wide row leaves 70px of nothing beside it
     on a phone -- and 70px of a 358px row is target a thumb could have had. */
  .site-form .fleet-inline-control { width: 100%; }
}
.site-form .fleet-profile-input:disabled {
  /* The transparent original leant on opacity alone, which on a real border
     reads as a rendering fault rather than as "not now". */
  background: var(--bg-2);
  border-color: var(--line-2);
  opacity: 1;
  color: var(--ink-3);
}

/* `[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);
  /* When a refusal has to be scrolled into view (signin.js, showNotice), leave
     a gap above it: flush against the top edge it reads as clipped, and half
     a pixel of it actually was. */
  scroll-margin-top: var(--s5);
}

/* A REFUSAL THAT LOOKS LIKE A REFUSAL.
 *
 * MEASURED: every message this page raised was drawn at 12.5px in
 * rgb(100,114,127) on rgb(247,248,250) -- the same grey as every hint beside
 * every field -- with a 1.45px red rule as the only thing marking it. So "we
 * will not do this" and "here is a thought about your address" were the same
 * object at a glance, on a page where one of them is the reason nothing is
 * happening.
 *
 * The other two tones are deliberately left alone: a hint and a confirmation
 * ARE quiet things, and making all three loud would put us back where we
 * started with the volume turned up. */
.site-form .fleet-profile-status.is-serious {
  padding: var(--s3);
  border-left-width: 3px;
  /* A tint of the same red the rule already uses, mixed into the page ground
     rather than picked by eye, so it moves with the theme. */
  background: color-mix(in oklab, var(--s-serious) 7%, var(--bg));
  border-radius: 0 3px 3px 0;
}
.site-form .fleet-profile-status.is-serious span {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--s-serious);
}

/* ------------------------------------------------------- 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. */
/* THE SWITCH COMES BACK TO ITS SENTENCE.
 *
 * MEASURED at 1366x768: the tick boxes sat at x=804 while the words they
 * belong to started at x=99 -- around 700px of empty band between the thing
 * you read and the thing you press, on the two rows a person has to get right
 * before an account exists. And they were 15x15, against a 24px floor on a
 * phone.
 *
 * The product's right-edge switch is correct on a settings screen, where a
 * column of controls lines up and you are scanning for the one you want.
 * Consent is the opposite shape: one sentence, one box, read together. So
 * these two rows take the conventional order -- box, then sentence -- while
 * every other row on the page keeps the product's grammar. */
.signin-consent {
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s3);
  align-items: start;
}
.signin-consent .settings-control {
  /* `order` rather than moving it in the markup: the checkbox stays after its
     label in the DOM, which is the order a screen reader and the Tab key
     already agree about. */
  order: -1;
  display: flex;
  align-items: center;
  justify-content: center;
  /* The tappable area, not the drawn box. 44px of it, pulled up so the 22px
     square still lines up with the first line of the sentence beside it. */
  min-width: 44px;
  min-height: 44px;
  margin-top: -11px;
}
.signin-consent input[type="checkbox"] {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--ink-2);
  cursor: pointer;
}
.signin-consent input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
/* The label is a real <label for>, so it is a target too -- and it has to say
   so, because a pointer over a word that does nothing is how the old
   `aria-labelledby` version read to a mouse. */
.signin-consent .settings-name { 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 RECEIPT. It carries two things now and they are not the same kind of
   thing: a sentence anybody can act on, and an identifier only a machine can
   check. The sentence is set as speech; the digest keeps the product's mono,
   which is what it uses for every identifier and every measured value. */
.signin-consent-meta {
  margin: var(--s4) 0 0;
  display: grid;
  gap: var(--s1);
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-3);
}
.signin-consent-digest {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-4);
  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. Kept after "Not now" left this row, because a future
   control here may well be a link again. */
.signin-actions a.ctl-btn { padding-inline: var(--s4); text-decoration: none; }

/* WHERE "NOT NOW" WENT. A control that leaves the product, drawn identically to
   the one that finishes the job and 3px from it, is a trap dressed as a
   courtesy -- so it is a sentence now, under the form, in the page's own quiet
   grey. */
.signin-aside {
  margin: var(--s5) 0 0;
  max-width: 60ch;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-3);
  text-wrap: pretty;
}
.signin-aside a { color: var(--ink-2); }
.signin-aside a:hover { color: var(--ink); }

/* 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;
}
/* Inside the form the same paragraph is a block in a column that already has a
   gutter, so it drops the page-level centring it needs on /account/, which uses
   this class at full width. */
.site-form .signin-noscript {
  max-width: 60ch;
  margin: 0 0 var(--s5);
  padding-inline: 0;
}
.site-form .signin-noscript a { color: inherit; }

/* ONE EXPLAINING LINE UNDER THE SPEC TABLE. The rows are five short answers and
   the thing a reader most wants to know -- why two computers -- does not fit in
   a table cell. Same quiet grey as the terms it sits under. */
.site-spec-note {
  margin: var(--s3) 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-3);
  text-wrap: pretty;
}

/* The consent rows enlarge their surrounding control already, but the native
   checkbox is itself an interactive target and must declare the touch floor. */
@media (pointer: coarse) {
  .signin-consent input[type="checkbox"] {
    width: 44px;
    height: 44px;
  }

  .signin-consent .settings-name,
  .signin-consent .settings-desc a,
  .signin-aside a,
  .site-form .signin-noscript a {
    display: inline-flex;
    align-items: center;
    min-width: 44px;
    min-height: 44px;
  }
}

/* Dedicated entry pages use one reading column; all public sign-in forms
   share label, field, hint, and action placement. */
.site-auth .site-main > .site-wrap {
  max-width: 800px;
  padding-inline: 40px;
}
.site-auth .signin-intro { padding: 24px 0 16px; }
.site-auth .signin-intro .site-display {
  margin: 0;
  font-size: clamp(32px, 3.4vw, 42px);
  line-height: 1.12;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.site-auth .signin-state-copy {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.site-auth .site-main > .site-wrap > .signin-form-section {
  padding: 0 0 40px;
  border-top: 0;
}
.site-auth .site-form { max-width: none; }
.site-body .site-form > .site-body-text {
  max-width: 64ch;
  margin: 0 0 28px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
}
.site-body .site-form .settings-section-rows { gap: 0; }
.site-body .site-form .settings-row:not(.signin-consent) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 0 0 24px;
  border: 0;
}
.site-body .site-form .settings-row:not(.signin-consent) > .settings-copy { display: contents; }
.site-body .site-form .settings-row:not(.signin-consent) .settings-name { grid-row: 1; }
.site-body .site-form .settings-row:not(.signin-consent) .settings-control { grid-row: 2; }
.site-body .site-form .settings-row:not(.signin-consent) .settings-desc { grid-row: 3; }
.site-body .site-form .settings-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
}
.site-body .site-form .settings-desc {
  max-width: 72ch;
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-3);
}
.site-body .site-form .fleet-inline-control { width: 100%; min-width: 0; }
.site-body .site-form .fleet-profile-input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: var(--site-control-radius);
  border-color: color-mix(in oklab, var(--ink-3) 75%, var(--line-2));
  background: var(--sheet);
}
.site-body .site-form .fleet-profile-input:focus {
  border-color: var(--site-accent);
  outline-color: var(--site-accent);
}
.site-body .site-form .signin-consent {
  padding: 16px 0;
  border-top: 1px solid var(--line-2);
  border-bottom: 0;
  gap: 8px;
}
.site-body .site-form .signin-consent .settings-control { margin-top: -4px; }
.site-body .site-form .signin-consent .settings-desc { margin-top: 4px; }
.site-body .site-form .signin-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 8px;
  padding: 0;
  border: 0;
}
.site-body .site-form .signin-actions .ctl-btn { width: 100%; margin: 0; min-height: 48px; }
.site-body .site-form .signin-actions [data-submit] { grid-column: 1 / -1; }
.site-body .site-form .signin-actions [data-mode-toggle]:last-child,
.site-body .site-form .signin-actions:has([data-recover][hidden]) [data-mode-toggle] { grid-column: 1 / -1; }
.site-body .site-form .signin-alt { margin-top: 28px; }
.site-body .site-form .signin-alt-rule { margin-bottom: 16px; }
.site-body .site-form .signin-google { width: 100%; min-height: 48px; }
.site-body .site-form .signin-alt-note { margin-top: 12px; max-width: none; }
.site-auth .signin-aside {
  max-width: none;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line-2);
  font-size: 13px;
  line-height: 1.65;
}
.site-auth .signin-account-details { padding-block: 36px 48px; }
.site-auth .signin-account-details .site-heading {
  margin-bottom: 14px;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -.02em;
}
.site-auth .signin-account-details > .site-body-text { max-width: none; font-size: 14px; line-height: 1.65; }
.site-auth .signin-account-details .site-spec {
  margin-top: 22px;
  padding: 20px 24px;
  background: transparent;
  box-shadow: none;
}
.site-auth .signin-account-explainer { display: grid; gap: 12px; margin-top: 20px; }
.site-auth .signin-account-explainer span { font-size: 13px; line-height: 1.6; color: var(--ink-3); }
.site-auth [hidden],
.site-body .site-form [hidden] { display: none !important; }

@media (max-width: 620px) {
  .site-auth .site-main > .site-wrap { padding-inline: 22px; }
  .site-auth .signin-intro { padding-top: 30px; padding-bottom: 14px; }
  .site-auth .signin-intro .site-display { font-size: 32px; }
  .site-body .site-form > .site-body-text { margin-bottom: 24px; }
  .site-body .site-form .signin-actions .ctl-btn { padding-inline: 10px; font-size: 13px; }
  .site-body .site-form .signin-consent { padding-block: 14px; }
  .site-auth .signin-account-details .site-spec { padding: 16px; }
  .site-auth .signin-account-details { padding-block: 28px 36px; }
}

/* 2026-10-30 polish: "About your account" says each fact once, as one list
   ruled like the homepage's tech specs. */
.site-auth .signin-facts { margin: 22px 0 0; border-top: 1px solid var(--line-2); }
.site-auth .signin-facts > div {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 4px 24px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-2);
  font-size: 14px;
  line-height: 1.55;
}
.site-auth .signin-facts dt { color: var(--ink); font-weight: 600; }
.site-auth .signin-facts dd { margin: 0; color: var(--ink-2); text-wrap: pretty; }
@media (max-width: 620px) {
  .site-auth .signin-facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 12px 0; }
  /* account-pages.css stacks every settings row on phones, which put the
     consent checkbox on a line of its own above its sentence. Keep box and
     sentence side by side, as on wider screens. */
  .site-auth .settings-row.signin-consent { grid-template-columns: auto minmax(0, 1fr); }
}

/* ==== 2026-10-30 round 3: sign-in and sign-up as a card beside a short panel.
   Scoped to .auth-page (/signin/, /signup/); the shared form styling below the
   card rules also applies to the signed-out form on /account/. */
.site-auth .site-main.auth-page {
  padding: calc(var(--nav-h) + clamp(28px, 5vw, 64px)) var(--gutter) clamp(56px, 8vw, 96px);
  background:
    radial-gradient(1100px 520px at 12% -10%, #e6effc 0%, transparent 60%),
    radial-gradient(900px 480px at 100% 110%, #fff4ec 0%, transparent 55%),
    var(--bg-2);
}
.auth-shell {
  display: grid;
  grid-template-columns: minmax(0, 480px) minmax(0, 400px);
  gap: clamp(28px, 5vw, 72px);
  justify-content: center;
  align-items: start;
  max-width: 1040px;
  margin: 0 auto;
}
.auth-card {
  position: relative;
  padding: clamp(28px, 4vw, 44px);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(23, 32, 51, .06), 0 18px 48px -24px rgba(23, 32, 51, .28);
  outline: 1px solid var(--line-2);
}
.auth-card .auth-title {
  margin: 0 0 8px;
  font-size: clamp(30px, 3vw, 36px);
  line-height: 1.1;
  font-weight: 650;
  letter-spacing: -.035em;
  color: var(--ink);
}
.auth-card .signin-state-copy {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.site-body .auth-card .site-form > .site-body-text { margin: 0 0 26px; font-size: 15px; color: var(--ink-2); }
.site-body .auth-card .site-form .settings-row:not(.signin-consent) { padding-bottom: 18px; gap: 7px; }
.site-body .auth-card .site-form .settings-name { font-size: 13.5px; }
.site-body .auth-card .site-form .fleet-profile-input { min-height: 46px; border-radius: 12px; background: #fff; }

/* Secondary actions read as links, not as two more big buttons. */
.site-body .site-form .signin-actions {
  grid-template-columns: 1fr auto;
  align-items: center;
  row-gap: 4px;
}
.site-body .site-form .signin-actions [data-submit] { min-height: 48px; font-size: 15.5px; font-weight: 600; }
.site-body .site-form .signin-actions [data-mode-toggle],
.site-body .site-form .signin-actions [data-recover] {
  width: auto; min-height: 40px; padding: 0 2px; border-radius: 6px;
  background: transparent; box-shadow: none;
  color: var(--accent-ink); font-size: 14px; font-weight: 550;
}
.site-body .site-form .signin-actions [data-mode-toggle] { justify-self: start; grid-column: auto; }
.site-body .site-form .signin-actions [data-recover] { justify-self: end; }
.site-body .site-form .signin-actions [data-mode-toggle]:last-child,
.site-body .site-form .signin-actions:has([data-recover][hidden]) [data-mode-toggle] { grid-column: 1 / -1; justify-self: center; }
.site-body .site-form .signin-actions [data-mode-toggle]:hover:not(:disabled),
.site-body .site-form .signin-actions [data-recover]:hover:not(:disabled) {
  background: transparent; color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px;
}

/* "or" rule and the Google button, with Google's mark. */
.site-body .site-form .signin-alt { margin-top: 22px; }
.site-body .site-form .signin-alt-rule {
  display: flex; align-items: center; gap: 12px; margin: 0 0 16px;
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2);
}
.site-body .site-form .signin-alt-rule::before,
.site-body .site-form .signin-alt-rule::after { content: ''; flex: 1; height: 1px; background: var(--line-2); }
.site-body .site-form .signin-google {
  gap: 10px; min-height: 46px; border-radius: 999px;
  background: #fff; color: var(--ink); font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--line);
}
.site-body .site-form .signin-google:hover:not(:disabled) { background: var(--bg-3); box-shadow: inset 0 0 0 1px #b9c5d6; }
.site-body .site-form .signin-google::before {
  content: ''; flex: none; width: 18px; height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23FFC107' d='M43.6 20.5H42V20H24v8h11.3C33.7 32.7 29.2 36 24 36c-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.8 1.2 7.9 3.1l5.7-5.7C34 6.1 29.3 4 24 4 12.9 4 4 12.9 4 24s8.9 20 20 20 20-8.9 20-20c0-1.3-.1-2.4-.4-3.5z'/%3E%3Cpath fill='%23FF3D00' d='M6.3 14.7l6.6 4.8C14.7 15.1 19 12 24 12c3.1 0 5.8 1.2 7.9 3.1l5.7-5.7C34 6.1 29.3 4 24 4 16.3 4 9.7 8.3 6.3 14.7z'/%3E%3Cpath fill='%234CAF50' d='M24 44c5.2 0 9.9-2 13.4-5.2l-6.2-5.2C29.2 35.1 26.7 36 24 36c-5.2 0-9.6-3.3-11.3-7.9l-6.5 5C9.5 39.6 16.2 44 24 44z'/%3E%3Cpath fill='%231976D2' d='M43.6 20.5H42V20H24v8h11.3c-.8 2.2-2.2 4.2-4.1 5.6l6.2 5.2C37 39.2 44 34 44 24c0-1.3-.1-2.4-.4-3.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.site-body .site-form .signin-alt-note { margin-top: 12px; font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
@media (forced-colors: active) { .site-body .site-form .signin-google::before { display: none; } }

/* The panel beside the card. */
.auth-aside { padding-top: clamp(8px, 2vw, 28px); }
.auth-aside-kicker { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.auth-plus { color: var(--ink); font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.auth-te { color: var(--accent); }
.auth-plus-mark {
  font-weight: 800; color: #d91f2a;
  background: linear-gradient(135deg, #ea580c, #d91f2a);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
@media (forced-colors: active) { .auth-plus-mark { -webkit-text-fill-color: CanvasText; background: none; color: CanvasText; } }
.auth-aside-title {
  margin: 0 0 12px; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15;
  font-weight: 650; letter-spacing: -.03em; color: var(--ink); text-wrap: balance;
}
.auth-aside > .site-body-text { margin: 0 0 22px; max-width: 40ch; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.auth-aside .signin-facts { margin: 0; border-top: 0; display: grid; gap: 10px; }
.auth-aside .signin-facts > div {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; row-gap: 1px;
  padding: 0; border: 0; font-size: 14px; line-height: 1.5;
}
.auth-aside .signin-facts > div::before {
  content: ''; grid-row: 1 / span 2; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%;
  background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.5L12 5.5' fill='none' stroke='%23245eb5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.auth-aside .signin-facts dt { grid-column: 2; color: var(--ink); font-weight: 600; }
.auth-aside .signin-facts dd { grid-column: 2; margin: 0; color: var(--ink-2); }

@media (max-width: 900px) {
  .auth-shell { grid-template-columns: minmax(0, 560px); }
  .auth-aside { padding: 4px clamp(4px, 2vw, 12px) 0; }
}
@media (max-width: 620px) {
  .site-auth .site-main.auth-page { padding-inline: 14px; }
  .auth-card { padding: 26px 20px 24px; border-radius: 20px; }
  .site-body .site-form .signin-actions [data-recover] { justify-self: end; }
}

/* 3b: consent rows keep box-then-sentence at every width (account-pages.css made
   them two equal columns inside the narrower card, overlapping the label). */
.site-auth .settings-row.signin-consent { grid-template-columns: auto minmax(0, 1fr); }
/* A background that does not stop in a seam at the footer. */
.site-auth .site-main.auth-page {
  background:
    radial-gradient(900px 460px at 8% -6%, #e6effc 0%, transparent 62%),
    radial-gradient(640px 380px at 96% 18%, #fff4ec 0%, transparent 60%),
    #f8fafd;
}
.site-auth .foot { border-top: 1px solid var(--line-2); }

/* 3c: the signed-out sign-in on /account/ gets the same card as /signin/. */
.site-auth [data-signed-out] > .site-section {
  max-width: 560px;
  padding: clamp(26px, 4vw, 40px);
  border: 0;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(23, 32, 51, .06), 0 18px 48px -24px rgba(23, 32, 51, .28);
  outline: 1px solid var(--line-2);
}
.site-auth [data-signed-out] [data-form-title] {
  margin: 0 0 10px; font-size: clamp(26px, 2.6vw, 32px); line-height: 1.12; font-weight: 650;
  letter-spacing: -.03em; text-transform: none; color: var(--ink);
}
.site-auth [data-signed-out] .site-form > .site-body-text { margin-bottom: 14px; }
@media (max-width: 620px) { .site-auth [data-signed-out] > .site-section { padding: 24px 18px; border-radius: 20px; } }