@gemboss/ui 0.1.0

package/src/auth.css

@@ -0,0 +1,606 @@
+/* The GemBoss sign-in screen — @gemboss/ui (28/09/2026).
+ *
+ * Moved here VERBATIM from the admin's styled-jsx block (apps/admin/src/app/login/LoginClient.tsx),
+ * which was the original every other sign-in copied by hand: gemcommunity's .auth-wrap,
+ * content-radar's and gemwatcher's login.css, gemcare's inbox, partner-radar. Class names took a
+ * `gb-auth` prefix (gemcare and gempress already have a `.login-card` of their own); the panel's
+ * colours became tokens; nothing else changed. The admin's /login was screenshot at nine sizes in
+ * both themes before and after the move and compared pixel for pixel.
+ *
+ * Rendered by AuthLayout / AuthForm / PasswordField (auth.tsx). What only the admin has — the Google
+ * button, the "or" divider — stays in the admin.
+ */
+
+/* dvh, not vh: on a phone 100vh is the height with the URL bar HIDDEN, so a centred card sat
+   under the toolbar. The card centres with margin:auto rather than align-items:center — auto
+   margins collapse to 0 when the content is taller than the screen, so the top of the card
+   can never be pushed above the fold (short landscape phone, keyboard open). */
+/* FLUID, not stepped. Every vertical gap is clamp(compact, N cqh, roomy): N is picked so the roomy
+   value lands at ~800px of height, and the compact floor at ~400px. Between the two the page
+   breathes in proportion to the screen instead of jumping at a breakpoint — the stepped version
+   snapped its card from 379px to 469px between 640 and 680 tall, and still overflowed below
+   400. Controls never scale: inputs and buttons keep min-height 44px at every size, only the
+   AIR between them gives. cqh is the SHELL's height, which is the visible height — URL bar and
+   on-screen keyboard included (see --vvh above the return). */
+/* The shell is exactly the visible height and is the size container every rule below measures
+   (cqh, @container gb-auth). It scrolls itself if even the shed layout does not fit (< ~260px). */
+/* ONE PALETTE, TWO REPOS. Every colour on this screen is a --gb-* token, and gemcommunity's
+   sign-in (app/globals.css, the block scoped to .auth-wrap) declares the SAME names with the
+   SAME values. That is what keeps the two sign-in screens identical: a colour changed in one
+   place is a colour that can be changed in the other, by name, instead of two piles of hex
+   drifting apart — which is what they had been doing (card 380 vs 400, radius 14 vs 12,
+   wordmark 22 vs 24, and this screen with no dark mode at all while that one had it).
+   Dark follows the OS. There is no toggle here, unlike gemcommunity: that app persists a
+   data-theme the admin has no reader for, and a switch that only half-works is worse than
+   none. The [data-theme] hook is still honoured so a person who set it over there, in the
+   same browser, is not thrown back to white when they land here. */
+.gb-auth {
+  --gb-surface: #ffffff;
+  /* The admin's own near-black, by name — the colour guard asks for the token and it is the
+     right answer here anyway: light mode IS the admin's palette, and only the dark block
+     below has values the admin has no token for. */
+  --gb-ink: var(--gemboss-text-strong, #1b1c1e);
+  --gb-muted: #6d7175;
+  --gb-line: #e1e3e5;
+  --gb-field-line: #c9cccf;
+  --gb-field-bg: #ffffff;
+  --gb-field-hover: #fafafa;
+  --gb-placeholder: #868b94;
+  --gb-accent: #5661f5;
+  --gb-btn: linear-gradient(120deg, #1b1c1e 0%, #000000 100%);
+  --gb-btn-ink: #ffffff;
+  --gb-wordmark: linear-gradient(120deg, #1b1c1e 0%, #000000 100%);
+  --gb-hover: #f7f7f5;
+  --gb-hover-line: #b9bbc0;
+  --gb-err-bg: #fee2e2;
+  --gb-err-ink: #b91c1c;
+  --gb-err-line: transparent;
+  --gb-card-shadow: 0 24px 64px rgba(15, 23, 42, 0.08);
+  --gb-mark-bg: #0b0b0c;
+  /* The brand's own facet geometry as a texture for the panel, rather than a stock diagonal
+     hatch: it is the same path the mark draws, blown up and held at 7% opacity. Inline so it
+     costs no request on the screen that must render before anything else exists. */
+  --gb-facet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='0.45' stroke-linejoin='round'%3E%3Cpath d='M26,14 74,14 96,50 50,110 4,50Z'/%3E%3Cpath d='M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110'/%3E%3C/g%3E%3C/svg%3E");
+  /* The composition is the gemboss one and stays the gemboss one in dark: ink wash top-left,
+     iris wash bottom-right, flat paper underneath. Only the three colours flip. */
+  --gb-page:
+    radial-gradient(1200px 600px at 20% 10%, rgba(27, 28, 30, 0.05), transparent 60%),
+    radial-gradient(1000px 500px at 80% 90%, rgba(86, 97, 245, 0.06), transparent 60%),
+    #fafafb;
+  --gb-page-flat: #ffffff;
+  /* The brand panel, as tokens (28/09/2026, @gemboss/ui): the admin's is INK with iris used
+     sparingly, because its mark is an outline on ink. A surface whose mark is filled with iris
+     (gemcommunity, content-radar) redefines these five on its own root; nothing else changes. */
+  --gb-panel-bg:
+    radial-gradient(900px 520px at 78% 12%, rgba(86, 97, 245, 0.26), transparent 62%),
+    radial-gradient(700px 480px at 12% 96%, rgba(86, 97, 245, 0.12), transparent 60%),
+    #0b0b0c;
+  --gb-panel-ink: #f4f4f2;
+  --gb-panel-muted: rgba(244, 244, 242, 0.72);
+  --gb-panel-eyebrow: #8a93ff;
+  --gb-panel-facet-o: 0.05;
+  color-scheme: light dark;
+  position: fixed;
+  top: var(--vvt, 0px);
+  left: 0;
+  right: 0;
+  height: 100vh;
+  height: var(--vvh, 100dvh);
+  container: gb-auth / size;
+  overflow-y: auto;
+  /* The recolor swapped the lower wash to iris but missed this one, which was
+     rgba(194,65,12,.08) — retired coral — so the sign-in screen kept a peach cast in the
+     top-left corner. Ink for depth, iris for the single accent: B&W ground, one colour. */
+  background: var(--gb-page);
+  color: var(--gb-ink);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+}
+/* ONE COLUMN BY DEFAULT. The split is opt-IN, at a size where a second column is a gift
+   rather than a squeeze — and the form column keeps every clamp and shed step it had, so
+   nothing about the phone or the short-landscape case changes. */
+.gb-auth-split {
+  display: grid;
+  grid-template-columns: 1fr;
+  min-height: 100%;
+}
+.gb-auth-stage {
+  box-sizing: border-box;
+  display: flex;
+  min-height: 100%;
+  padding: clamp(12px, 3cqh, 24px) clamp(16px, 4vw, 24px);
+}
+.gb-auth-panel-in {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 520px;
+  padding: 48px clamp(32px, 5vw, 64px);
+}
+/* The eyebrow is the one place a monospace face earns its keep here: it labels the panel
+   without competing with the headline, and the letterspacing does the work the size would
+   otherwise have to. */
+.gb-auth-eyebrow {
+  margin: 0 0 20px;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--gb-panel-eyebrow);
+}
+.gb-auth-panel-h {
+  margin: 0 0 16px;
+  font-size: clamp(28px, 3.2vw, 40px);
+  line-height: 1.15;
+  letter-spacing: -0.02em;
+  font-weight: 700;
+  color: var(--gb-panel-ink);
+}
+.gb-auth-panel-p {
+  /* This used to be 0 0 32px, the gap down to the CTA. The button is gone, so that 32px was
+     dangling off the panel's last line with nothing to balance it. */
+  margin: 0;
+  font-size: 15px;
+  line-height: 1.6;
+  /* 0.72 of #f4f4f2 on #0b0b0c measures 8.9:1 — well past AA, and quiet enough that the
+     headline still leads. */
+  color: var(--gb-panel-muted);
+}
+/* THE PANEL IS OFF UNTIL EARNED. Hidden by default rather than shown-then-hidden: a panel
+   that paints first and disappears at a breakpoint is a panel that flashes on every phone. */
+.gb-auth-panel {
+  display: none;
+}
+/* Wide AND tall. Width alone is not enough — a 1440x420 window is a wide letterbox, and a
+   column of headline plus button in 420px of height is the crush this whole screen spent its
+   shed ladder avoiding. 900 wide is where 380px of card plus a readable second column stop
+   fighting.
+   520 tall, not 620 (26/09/2026): a 1366x768 laptop with a bookmarks bar leaves under 620px
+   of viewport, so the most common laptop never saw this column. Its content measures 286px
+   padding included, so 520 still leaves over 200px spare. The form sheds on height whether
+   or not the panel is there, so the panel costs it nothing. Same number as the gemcommunity
+   sign-in (app/globals.css); change both or neither. */
+@container gb-auth (min-width: 900px) and (min-height: 520px) {
+  .gb-auth-split {
+    grid-template-columns: minmax(420px, 1fr) minmax(0, 1.05fr);
+  }
+  /* The column IS the structure now, so the card stops drawing a second one. A border and
+     a 64px shadow around a form that already sits in its own half of the screen is chrome
+     about chrome. The card keeps every bit of this below 900px, where it is the only thing
+     giving the form an edge. */
+  /* SCOPED UNDER .gb-auth-split ON PURPOSE — (0,2,0) against the base rules' (0,1,0), so this
+     wins wherever it is written. The first version of these two relied on coming LATER in
+     the sheet than the card's own rule, and it did not: a container query carries the specificity
+     of the selectors inside it, nothing more, and the tie went to the rule written first.
+     Measured then: card still 380 wide with its border and 64px shadow intact. */
+  .gb-auth-split .gb-auth-stage {
+    background: var(--gb-surface);
+  }
+  .gb-auth-split .gb-auth-card {
+    border: none;
+    box-shadow: none;
+    max-width: 400px;
+  }
+  .gb-auth-panel {
+    display: flex;
+    align-items: center;
+    position: relative;
+    overflow: hidden;
+    /* INK-DOMINANT, because the gemboss mark is an OUTLINE on ink. Iris appears twice on
+       this panel and both times it is small: the eyebrow and the button. */
+    background: var(--gb-panel-bg);
+    color: var(--gb-panel-ink);
+  }
+  /* The facet lines of the mark, blown up and laid over the ground — the brand's own geometry
+     instead of a stock diagonal hatch. Tiny opacity on purpose: at 1920 it should read as
+     texture you notice second, not a pattern you notice first. */
+  .gb-auth-panel::before {
+    content: "";
+    position: absolute;
+    /* Deliberately OVERSIZED and pushed off two edges, so what lands on the panel is a few
+       facet lines crossing it — texture. Sized to fit, it read as a big grey triangle in the
+       corner: a picture of a logo rather than a ground for one. */
+    inset: -45% -38% auto auto;
+    width: 132%;
+    aspect-ratio: 1;
+    background-image: var(--gb-facet);
+    background-size: contain;
+    background-repeat: no-repeat;
+    opacity: var(--gb-panel-facet-o);
+    pointer-events: none;
+  }
+}
+.gb-auth-card {
+  width: 100%;
+  max-width: 380px;
+  margin: auto;
+  background: var(--gb-surface);
+  border: 1px solid var(--gb-line);
+  border-radius: 14px;
+  padding: clamp(18px, 3.5cqh, 28px) 28px;
+  box-shadow: var(--gb-card-shadow);
+}
+.gb-auth-header {
+  text-align: center;
+  margin-bottom: clamp(12px, 3cqh, 24px);
+}
+/* The header gives up height LAST, with no layout switch: the tagline goes in ONE step under
+   600px of height, then the mark shrinks from 56px at 560 to 32px at 480.
+   The tagline used to fold CONTINUOUSLY (max-height ramping from 20px at 600 to 0 at 560), which
+   meant every height in that band showed the line cut through the middle: 4px of a 16px line at
+   320x568, the iPhone SE size, flagged text_clipped by scripts/visual-gate on 28/09/2026. A line of
+   text has no useful partial state, so it is shown whole or not at all (content-radar's copy of this
+   screen had already made the same fix, 27/09/2026). The mark CAN shrink, so it still does.
+   A mark has a floor: shrunk continuously to zero it passed through an 11px smudge that read as
+   a rendering bug (screenshot at 390x480). So under 480 it goes in one step (~38px) and a
+   landscape phone gets the wordmark and the form. The old breakpoint moved the mark beside the
+   name and made the card jump 60px between two heights 40px apart. */
+.gb-auth-mark {
+  display: inline-flex;
+  margin-bottom: clamp(6px, calc(6px + (100cqh - 480px) * 0.075), 12px);
+}
+/* `img` too (29/09/2026): a surface whose CSP forbids inline `style` (gemcare: `style-src 'self'`)
+   cannot use GemMark, which paints its tile with style="fill:var(--gb-mark-bg)". It passes its
+   vendored gemboss-mark.svg as an <img> through `mark`, and that must shrink on a short screen too. */
+.gb-auth-mark svg,
+.gb-auth-mark img {
+  width: clamp(32px, calc(32px + (100cqh - 480px) * 0.3), 56px);
+  height: clamp(32px, calc(32px + (100cqh - 480px) * 0.3), 56px);
+}
+@container gb-auth (max-height: 479.98px) {
+  .gb-auth-mark {
+    display: none;
+  }
+}
+.gb-auth-header h1 {
+  font-size: clamp(19px, 2.75cqh, 22px);
+  font-weight: 700;
+  margin: 0 0 clamp(0px, calc((100cqh - 560px) * 0.1), 4px);
+  background: var(--gb-wordmark);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+.gb-auth-header p {
+  margin: 0;
+  font-size: 13px;
+  color: var(--gb-muted);
+}
+/* Out of sight, not out of the page: the same visually-hidden pattern the header uses under 400,
+   so a screen reader still hears the tagline, as it did when the fold took it to 0px. */
+@container gb-auth (max-height: 599.98px) {
+  .gb-auth-header p {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+  }
+}
+.gb-auth-form {
+  display: flex;
+  flex-direction: column;
+  gap: clamp(8px, 1.5cqh, 12px);
+}
+.gb-auth-form label {
+  display: flex;
+  flex-direction: column;
+  gap: clamp(4px, 0.75cqh, 6px);
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--gb-ink);
+}
+/* 38px → 44px. §9.1 wants a CONTROL at 44 (Apple HIG / WCAG 2.5.5 AAA); measured on the
+   live page 2026-09-09 these were 38, the sign-in button 40, the Google button 42, the
+   password toggle 13 and the Google connect link 15. All five were pre-existing, on the
+   first screen a merchant sees — and now the screen the MCP connect flow sends strangers to,
+   which is why they are fixed here rather than filed. min-height, not height, so a
+   browser that needs more room for the text still gets it. */
+/* THE FIELD'S SHAPE. In the admin it is the shared `gemboss-field gemboss-field--tall` class
+   (packages/ui/src/gemboss-field.css), which the admin's inputs keep wearing. Every other
+   surface has no such sheet, so `PasswordField`/`AuthField` default to `gb-auth-input`: the same
+   numbers, resolved from that file's Polaris fallbacks — 32px box raised to a 44px floor, 12px
+   side padding, 13px on 20px, radius 8, 1px border; 16px text under 768px (iOS zooms any field
+   under 16px on focus and does not zoom back); height:auto under a coarse pointer. */
+.gb-auth-input {
+  box-sizing: border-box; height: 32px; min-height: 44px; min-width: 0; padding: 0 12px;
+  font: inherit; font-size: 13px; line-height: 20px;
+  border: 1px solid; border-radius: 8px;
+}
+@media (max-width: 47.9975em) { .gb-auth-input { font-size: 16px; } }
+@media (pointer: coarse) { .gb-auth-input { height: auto; } }
+/* Colour only, over whichever class drew the shape. */
+.gb-auth-form input {
+  width: 100%;
+  box-sizing: border-box;
+  background-color: var(--gb-field-bg);
+  border-color: var(--gb-field-line);
+  color: var(--gb-ink);
+}
+.gb-auth-form input::placeholder {
+  color: var(--gb-placeholder);
+}
+/* HOVER AND FOCUS HAVE TO BE RESTATED HERE, and finding that out is the reason this block
+   exists. gemboss-field.css owns them, at (0,3,0) for the hover; the rule above out-specifies
+   the class — (0,3,1) when it lived in the admin's styled-jsx, (0,1,1) here, still above
+   (0,1,0) — so it took the hover background with it and the field stopped reacting to the
+   pointer (measured then: rest and hover identical in both themes). A token that wins the
+   cascade silently takes the states with it.
+   The focus ring is restated for a different reason: gemboss-field.css paints it Polaris
+   blue (#005bd3), which is not a colour this screen uses anywhere. This screen is B&W plus
+   iris, deliberately outside Polaris, and its own password toggle already rings in near-
+   black. Ink, in both themes, and the same ink gemcommunity's sign-in rings in. */
+.gb-auth-form input:hover:not(:disabled) {
+  background-color: var(--gb-field-hover);
+  border-color: var(--gb-hover-line);
+}
+.gb-auth-form input:focus-visible {
+  outline: 2px solid var(--gb-ink);
+  outline-offset: 1px;
+  border-color: var(--gb-ink);
+}
+/* Same shape as a .gb-auth-form label, for the one field whose input had to leave the label.
+   Declared rather than reused so a change to labels cannot silently un-match this one. */
+.gb-auth-field {
+  display: flex;
+  flex-direction: column;
+  gap: clamp(4px, 0.75cqh, 6px);
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--gb-ink);
+}
+.gb-auth-pw {
+  position: relative;
+  display: flex;
+}
+.gb-auth-pw input {
+  width: 100%;
+  /* Room for the button. Without it the last characters of a revealed password sit UNDER the
+     eye — which is only visible in the one state the button exists to produce. */
+  padding-right: 48px;
+}
+.gb-auth-pw-toggle {
+  /* min-WIDTH as well as height. #2144 gave this 44px of height and stopped, because the
+     script I checked it with only read heights — the repo's own gate reads both and caught
+     it at 41.22px wide, one check away from shipping "fixed" twice. */
+  min-height: 44px;
+  min-width: 44px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin: 0;
+  background: none;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  color: var(--gb-muted);
+  transition: none;
+}
+.gb-auth-pw-toggle:hover {
+  color: var(--gb-ink);
+}
+/* focus-visible, not focus: a mouse click on the eye should not leave a ring sitting inside
+   the field. §9.2 wants the state to exist, not to fire for pointer users. */
+.gb-auth-pw-toggle:focus-visible {
+  outline: 2px solid var(--gemboss-primary, #1b1c1e);
+  outline-offset: -2px;
+}
+.gb-auth-error {
+  background: var(--gb-err-bg);
+  border: 1px solid var(--gb-err-line);
+  color: var(--gb-err-ink);
+  padding: 8px 10px;
+  font-size: 13px;
+  border-radius: 6px;
+}
+/* Scoped to the submit button BY ITS OWN CLASS, NOT a bare "button". This rule paints a filled
+   black pill, and as ".login-form button" it was specificity 0,1,1 against ".pw-toggle" at 0,1,0 —
+   so the eye INSIDE the password field was painted as a second Sign-in button: black
+   gradient, white icon, and a 6px margin-top that pushed it out of the input. Measured in a
+   production build at all six widths (SS9.1): backgroundImage=GRADIENT,
+   color=rgb(255,255,255), marginTop=6px.
+   Second time in this repo — composer-owns-only-its-own-buttons.test.ts bans the same shape
+   in the chat composer. SS9.3: one visual owner, and the owner names its own element. */
+.gb-auth-form > .gb-auth-submit {
+  margin-top: clamp(2px, 0.75cqh, 6px);
+  min-height: 44px;
+  font-size: 14px;
+  font-weight: 600;
+  border: none;
+  border-radius: 8px;
+  background: var(--gb-btn);
+  color: var(--gb-btn-ink);
+  cursor: pointer;
+  font-family: inherit;
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+.gb-auth-form > .gb-auth-submit:hover:not(:disabled) {
+  transform: translateY(-1px);
+}
+.gb-auth-form > .gb-auth-submit:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+/* The signup line. 24px of target, not 44: WCAG 2.5.8 is the threshold that has a standard
+   behind it for a LINK in a line of text, and inline-block is what makes the padding a target
+   at all — on an inline element it paints and measures nothing. */
+.gb-auth-foot {
+  margin: clamp(10px, 2cqh, 16px) 0 0;
+  font-size: 13px;
+  color: var(--gb-muted);
+  text-align: center;
+  line-height: 1.5;
+}
+.gb-auth-foot a {
+  display: inline-block;
+  min-height: 24px;
+  line-height: 24px;
+  padding: 0 2px;
+  color: var(--gb-accent);
+  font-weight: 600;
+  text-decoration: none;
+}
+.gb-auth-foot a:hover,
+.gb-auth-foot a:focus-visible {
+  text-decoration: underline;
+}
+.gb-auth-card .gb-auth-help {
+  margin: clamp(8px, 1.75cqh, 14px) 0 0;
+  font-size: 12px;
+  color: var(--gb-muted);
+  text-align: center;
+  line-height: 1.5;
+}
+/* The "trouble getting in?" line. min-height 24px: WCAG 2.5.8 for a link. */
+.gb-auth-card .gb-auth-help a {
+  display: inline-block;
+  min-height: 24px;
+  line-height: 24px;
+  /* The page's link colour, not the grey of the text around it (#3129): the reader of this line
+     is stuck and scanning for a way out. #5661f5 on white is 4.75:1, above the 4.5:1 12px needs. */
+  color: var(--gb-accent);
+  font-weight: 600;
+  text-decoration: none;
+}
+.gb-auth-card .gb-auth-help a:hover,
+.gb-auth-card .gb-auth-help a:focus-visible {
+  text-decoration: underline;
+}
+/* PHONE: the card IS the page. A floating card inside a 16px gutter spends ~90px of a 320px
+   screen on border, shadow and double padding for nothing — the pattern every major sign-in
+   page (Google, Apple, Shopify, Stripe) uses below tablet width is a full-bleed white sheet.
+   Inputs go to 16px because iOS Safari zooms the page on focus into any field under 16px,
+   and the zoom does not undo itself after sign-in. Safe-area padding keeps the form out of
+   the notch/home indicator in the desktop-app and standalone webviews. LAST in the sheet on
+   purpose: a short phone matches the max-height block too, and this one must win the padding. */
+@media (max-width: 480px) {
+  .gb-auth {
+    background: var(--gb-page-flat);
+  }
+  .gb-auth-stage {
+    padding: max(clamp(10px, 3cqh, 20px), env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
+      max(clamp(10px, 3cqh, 20px), env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
+  }
+  .gb-auth-card {
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+    padding: 0;
+  }
+  /* (no font-size here: the field's shape class — gemboss-field in the admin, gb-auth-input
+     elsewhere — reads 16px under this same breakpoint, which is what stops iOS zooming.) */
+}
+/* ALWAYS INSIDE THE VIEWPORT. Once the clamps above are at their floors, the only height left
+   is in what can go. Shed in order of what a person trying to sign in needs least, each step
+   at the height where the one before stopped fitting (measured, 390 and 1280 wide):
+     < 440  the "or" divider — the Google button is self-explanatory without it
+     < 400  the GemBoss wordmark — kept for screen readers, it is still the page heading
+     < 360  the signup and help lines, and the desktop card trims its padding
+   Never shed: email, password, Sign in, Google. Those are the page. The signup line survives
+   to 360 rather than going with the wordmark at 400: a stranger with no account is exactly
+   who this screen strands, and below 360 there is a scrollbar to reach it with. LAST in the sheet so
+   it wins over the phone block above. */
+@container gb-auth (max-height: 399.98px) {
+  .gb-auth-header {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+  }
+}
+@container gb-auth (max-height: 359.98px) {
+  .gb-auth-card .gb-auth-help,
+  .gb-auth-foot {
+    display: none;
+  }
+  .gb-auth-stage {
+    padding-top: max(8px, env(safe-area-inset-top));
+    padding-bottom: max(8px, env(safe-area-inset-bottom));
+  }
+}
+/* The card only has padding to trim where it IS a card; on a phone it is already 0. */
+@container gb-auth (max-height: 359.98px) and (min-width: 481px) {
+  .gb-auth-card {
+    padding-top: 14px;
+    padding-bottom: 14px;
+  }
+}
+/* DARK — a pure token flip. Not one rule above changes; every colour on this screen reads a
+   --gb-* token, so the whole screen inverts by redefining eighteen values here. The same
+   eighteen, with the same values, are what gemcommunity's .auth-wrap block declares.
+   Two selectors on purpose: the OS ask, ignored when a data-theme of light is set, and an
+   explicit data-theme of dark. LAST in the sheet so it beats the phone block, which sets a
+   flat page colour of its own.
+   When this sheet lived in the admin's styled-jsx, the root part needed :global() — styled-jsx
+   glued its scope class onto ":root", no html element carries one, and the whole dark block
+   matched nothing (measured 23/09/2026: --gb-surface still #ffffff on a dark-OS browser, with
+   typecheck and the text-reading tests all green). As a plain stylesheet it needs nothing; the
+   dark screenshots taken for the move are what show it still applies.
+   WHAT IT IS NOT: a dark mode for the admin. Nothing behind /login has one yet, so signing in
+   moves a dark-OS person to a light app. That is the same handoff gemcommunity has shipped
+   since its auth skin landed, and the alternative was leaving this screen the one white
+   rectangle on a dark machine. */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) .gb-auth {
+    --gb-surface: #141517;
+    --gb-ink: #f4f4f3;
+    --gb-muted: #969c97;
+    --gb-line: rgba(255, 255, 255, 0.11);
+    --gb-field-line: rgba(255, 255, 255, 0.17);
+    --gb-field-bg: #1b1c1f;
+    --gb-field-hover: #212226;
+    --gb-placeholder: #7f838c;
+    --gb-accent: #8a93ff;
+    --gb-btn: linear-gradient(120deg, #f4f4f3 0%, #dfe0e4 100%);
+    --gb-btn-ink: #0b0b0c;
+    --gb-wordmark: linear-gradient(120deg, #f4f4f3 0%, #c9cbd2 100%);
+    --gb-hover: rgba(255, 255, 255, 0.06);
+    --gb-hover-line: rgba(255, 255, 255, 0.28);
+    --gb-err-bg: rgba(215, 44, 13, 0.16);
+    --gb-err-ink: #ff9d88;
+    --gb-err-line: rgba(245, 120, 95, 0.4);
+    --gb-card-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
+    --gb-mark-bg: #202127;
+    --gb-page:
+      radial-gradient(1200px 600px at 20% 10%, rgba(255, 255, 255, 0.05), transparent 60%),
+      radial-gradient(1000px 500px at 80% 90%, rgba(138, 147, 255, 0.1), transparent 60%),
+      #0b0b0c;
+    --gb-page-flat: #0b0b0c;
+  }
+}
+:root[data-theme="dark"] .gb-auth {
+  --gb-surface: #141517;
+  --gb-ink: #f4f4f3;
+  --gb-muted: #969c97;
+  --gb-line: rgba(255, 255, 255, 0.11);
+  --gb-field-line: rgba(255, 255, 255, 0.17);
+  --gb-field-bg: #1b1c1f;
+  --gb-field-hover: #212226;
+  --gb-placeholder: #7f838c;
+  --gb-accent: #8a93ff;
+  --gb-btn: linear-gradient(120deg, #f4f4f3 0%, #dfe0e4 100%);
+  --gb-btn-ink: #0b0b0c;
+  --gb-wordmark: linear-gradient(120deg, #f4f4f3 0%, #c9cbd2 100%);
+  --gb-hover: rgba(255, 255, 255, 0.06);
+  --gb-hover-line: rgba(255, 255, 255, 0.28);
+  --gb-err-bg: rgba(215, 44, 13, 0.16);
+  --gb-err-ink: #ff9d88;
+  --gb-err-line: rgba(245, 120, 95, 0.4);
+  --gb-card-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
+  --gb-mark-bg: #202127;
+  --gb-page:
+    radial-gradient(1200px 600px at 20% 10%, rgba(255, 255, 255, 0.05), transparent 60%),
+    radial-gradient(1000px 500px at 80% 90%, rgba(138, 147, 255, 0.1), transparent 60%),
+    #0b0b0c;
+  --gb-page-flat: #0b0b0c;
+}