/* Sign-in and the pages before the shell: the solo sheet, stop and boot pages, terms required.
   Loaded after ds/css/tokens.css and ds/css/app.css; only what fasset-ds
   does not already say lives here. */

/* The head carries no spacing of its own inside a sheet.

   `.content` above is `padding: 0 40px 40px` and says why in its own comment:
   no top padding, so the head's 34 IS the dashboard's top spacing and its 44
   the dashboard's gap to the first thing. Both are right there. Inside a sheet
   they are a second helping — `design.html` states the sheet as `44px 44px
   36px`, so 34 landed on top of 44 and the title sat 78px down, and the 44
   below it landed beside a container gap doing the same job.

   The sheet model already answers this: `.sections` says the container owns
   every gap and nothing inside carries a margin of its own. The head is the
   one thing that still did, so here it stops. */
.sheet .page-head { padding: 0; }
/* A standalone page with no shell that carries a form: the sign-in screen, the
   page that opens an account, and whatever else a person reaches before there
   is a business to draw. Named for the job rather than for one of its callers,
   because onboarding.html had built its own rather than finding this one.

   The system had no primitive for this and the screen borrowed `.panel`, which
   is the right-side slide-over drawer: `position: absolute`, pinned 8px from
   top/right/bottom, 16px radius, drawer shadow. Inside `#signin-host`, which
   nothing styled, it had no positioned ancestor, so it laid out against the
   viewport. Measured at 1024x768: a 544px column at x=496, y=8, overflowing the
   right edge by 16px with 496px of empty page beside it, at every width.

   `.boot` is this page's sibling and proves the pattern — a centred flex column
   whose gap does the spacing, so nothing inside needs a margin of its own.
   `.boot` is the centred MESSAGE page and stays text-align:center; this one
   carries fields and does not. Width is `.set-content`'s 620px, the system's
   narrow content column, rather than a number converted into another unit. */
/* It was centred in the viewport, and that was the composition rather than the
   spacing: `min-height: 100dvh` with `justify-content: center` put the lockup
   at y=193 and the title at y=230 on a 900px-tall screen, then stacked both of
   the page's sections into the one screenful below it. Centring is what a
   dialog does — a short thing with nothing before or after it. A page somebody
   opens from a link and comes back to is a document, and a document starts at
   the top.

   The offset, the width and the ground are the design system's hosted-document
   recipe, whose own rule for when to reach for it is anything a non-customer
   opens from a link. The linen is not decoration: `.sheet` below is
   `--card-bg`, which is pure white in this theme, and the page it sat on
   rendered near-white, so without the ground the sheet is a shadow nobody can
   see. Same wallpaper as `.shell`, which is the app's own. */
.solo-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  max-width: 620px;
  margin: 0 auto;
  padding: var(--space-56) var(--space-24) var(--space-40);
}
.solo-page > * { margin: 0; }
/* The column inside the page. The gap does every gap; nothing in here carries a
   margin of its own, which is what the inline ones were doing. */
.solo-column { display: flex; flex-direction: column; gap: var(--space-16); }
.solo-column > * { margin: 0; }
.hint.refused { color: var(--negative-text); }
.signin-page {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(420px, 46%) 1fr;
  background: var(--bg);
}
.signin-form-pane { display: flex; flex-direction: column; min-width: 0; }
/* The lockup is the app's own wordmark (#twlock: green stars, ink letters, a
   faint "Business"), at the size the sidebar and the signup page draw it, in
   the corner the signup page puts it. One brand moment; the right pane is
   only the ground. */
.signin-lockup {
  padding: var(--space-20) var(--space-20) 0;
  align-self: flex-start;
}
.signin-lockup .biz { font-size: var(--text-12); color: var(--text-faint); }
.signin-sheet {
  width: min(100% - 48px, 380px);
  margin: auto;
  padding: var(--space-56) 0;
}
.signin-preview {
  min-width: 0;
  background:
    radial-gradient(900px 620px at 108% -10%, color-mix(in oklab, var(--accent) 8%, transparent), transparent 62%),
    var(--bg-sunken);
}
@media (max-width: 900px) {
  .signin-page { grid-template-columns: minmax(0, 1fr); }
  .signin-preview { display: none; }
}
/* 24px, the onboarding steps' heading, so signing in and opening an account
   read as one product. */
.signin-sheet h2 {
  color: var(--text-strong);
  font-size: var(--text-24);
  font-weight: var(--w-title);
  letter-spacing: -0.018em;
  line-height: 1.15;
}
.si-email-context { color: var(--text-default); font-weight: var(--w-medium); overflow-wrap: anywhere; }
/* The code steps draw ds CodeInput's cells (ds/css/overlay.css). Recovery
   codes are eight characters, so their cells are narrower to fit the column. */
.code-input.is-recovery { --code-cell-w: 36px; }
.code-input.is-recovery .code-cell { font-size: var(--text-16); }
.code-input.is-recovery .code-cell:nth-child(4) { margin-inline-end: var(--space-8); }
.signin-recovery { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-20); }
/* The ground a standalone page floats its sheet on. Set on the element rather
   than on `body` because `body` is shared with the platform, whose own shell
   paints its wallpaper on `.shell`. */
.solo-ground {
  min-height: 100dvh;
  background:
    radial-gradient(1100px 700px at -4% -12%, color-mix(in oklab, var(--accent) 7%, transparent), transparent 60%),
    var(--bg-sunken);
}
/* The rhythm inside a sheet.

   One gap was doing two jobs: `.solo-column`'s 16 separated a heading from its
   own sub-line exactly as much as it separated two sections, so nothing on the
   page said which pieces belonged together. The recipe answers it with sections
   one section gap apart (`--rhythm-section`, 56) and a label 8 above what it
   labels; both numbers are steps of the scale, written once in the table at the
   top of this file.

   Gaps rather than the recipe's margins, for the reason `.solo-column` exists:
   a margin on a child is a value that has to agree with a value somewhere else,
   and this container owns the spacing so nothing inside has to. */
.sections { display: flex; flex-direction: column; gap: var(--rhythm-section); }
.sections > * { margin: 0; }
.sec { display: flex; flex-direction: column; gap: var(--space-8); }
.sec > * { margin: 0; }
/* The sheet. One piece of paper carrying what the page is actually for, which
   is the hosted-document recipe's whole composition: the ground is the product,
   the sheet is the document, and nothing else competes with it.

   `.doc-sheet` further down is already this, and has been since the statement
   overlay: same `--card-bg`, same 16px radius, same idea. It differs only in
   being positioned inside an overlay and shadowed for floating over a scrim, so
   this is the un-overlaid half of a primitive the system already had rather
   than a new one. */
.sheet {
  background: var(--card-bg);
  border-radius: var(--r-surface);
  box-shadow: var(--shadow-card);
  padding: var(--space-44) var(--space-44) var(--space-36);
}
@media (max-width: 640px) {
  /* Phone width. The recipe reduces to `28px 14px 32px` and `30px 24px 28px`; 28 and
     30 are on no scale, here or upstream. Unlike 56/44/36 they carry no decision
     — what matters at this width is smaller, not that particular smallness — so
     they land on steps the scale already has rather than adding two more that
     would exist for one media query. */
  .solo-page { padding: var(--space-32) var(--space-14) var(--space-32); }
  .sheet { padding: var(--space-32) var(--space-24) var(--space-24); }
}
.stop-page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--rhythm-item);
  padding: var(--space-32);
  text-align: center;
}
.boot-heading {
  /* A person stopped here is reading a page title, so it is the page title:
     the same 30px/460/-0.02em as .page-head h1. It had been 20px at weight
     600 — a size no token declared and a weight design.html bans outright —
     and both rendered because a var() fallback is not a fallback. */
  font-size: var(--text-30);
  font-weight: var(--w-title);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}
/* The app focuses a non-interactive page heading after a full-state change so
   assistive technology starts at the new explanation. It is not a keyboard
   control, so the generic focus ring would look like an actionable border. */
.boot-heading:focus { outline: none; }
.boot-line {
  color: var(--text-subtle);
  max-width: 42ch;
  margin: 0;
  line-height: 1.5;
}
/* The confirmation the invitation email leads to: one card per invitation, its lines left-aligned, the two choices on
   one row at the foot with the safe one first and the main one last. */
.business-options { display: flex; flex-direction: column; gap: var(--space-16); width: 100%; max-width: 420px; }
.invitation { text-align: left; display: flex; flex-direction: column; gap: var(--space-16); }
.invitation-name { margin: 0; font-size: var(--text-20); }
.invitation-meta { display: flex; flex-direction: column; gap: var(--space-4); color: var(--text-subtle); }
.invitation .invitation-meta > p { margin: 0; }
.invitation-actions { justify-content: flex-end; --cluster-gap: var(--space-12); }
.invitation .hint { margin: 0; }
.invitation .hint:empty { display: none; }
.stop-page > .business-options { margin-top: var(--space-16); }
.terms-required-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.terms-required-list a { color: var(--accent-text); }
/* The end screen for a business held back (js/availability.js) takes its gaps
   from the .stack primitive in tokens.css; the stop page only centres it. */
.stop-page .avail > * { margin-inline: auto; }
.avail-actions { justify-content: center; }
.avail-error { color: var(--negative-text); }
.avail-error[hidden] { display: none; }

/* The title of a code step, with the icon that tells the emailed-code step from the authenticator one at a glance. The
   icon is decoration; the title and the line under it say the same thing in words. */
.si-step-head { display: flex; align-items: center; gap: var(--space-16); }
.si-step-head > h2 { margin: 0; }
.si-step-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--space-44); height: var(--space-44); flex: none;
  border-radius: 50%; background: var(--bg-sunken); color: var(--text-strong);
}

/* The quiet links under the sign-in screen: one meta line. */
.signin-legal { font-size: var(--text-12); color: var(--text-faint); }
.signin-legal a { color: inherit; }