/* Shared sign-in: the suite's getting-in layout (docs/ui/GET-IN.md §2.1) in plain CSS. A dark brand
   panel (44%, painted mountain scene) beside a 380px form column; below 1024px the panel is a band with
   the logo and the headline only, like the kit's.
   Tokens come from the kit's original tokens.css; Inter is the UI font. Every control is 44px. Motion: short colour transitions, plus the panel scene's slow drift and falling snow (transform/opacity only, off under reduced motion). The logo never moves. */
@import url('/signin/brand/tokens.css');
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font-family: "Inter", system-ui, sans-serif; background: var(--color-page); color: var(--color-ink-2); font-size: 14px; line-height: 20px; }
.mono { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; }
[hidden] { display: none !important; }

.auth { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 44% minmax(0, 1fr); }
.panel { position: relative; overflow: hidden; background: var(--color-rail); color: var(--color-on-rail); padding: 40px 48px; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
/* The painted scene fills the panel (rail green shows first, the picture fades in once it has loaded). */
.art, .scrim { position: absolute; inset: 0; }
.art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 28% 50%; transform-origin: 60% 0; }
.scrim { background: radial-gradient(ellipse 380px 170px at 0 0, rgb(11 59 44 / .92) 0, rgb(11 59 44 / .92) 55%, rgb(11 59 44 / 0) 100%), linear-gradient(180deg, rgb(11 59 44 / .88) 0%, rgb(11 59 44 / .5) 18%, rgb(11 59 44 / 0) 32%, rgb(11 59 44 / 0) 34%, rgb(11 59 44 / .9) 64%, rgb(11 59 44 / .96) 100%); }
/* Keep the flakes in the flexible space between the logo and the words, even when the words wrap.
   Fade at the lower edge, then clip completely before the headline. */
.snow { position: relative; inset: auto; order: 1; flex: 1 1 0; align-self: stretch; margin: 0 -48px 16px; overflow: hidden; pointer-events: none;
  mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent); }
.snow i { position: absolute; top: -10px; width: var(--s); height: var(--s); border-radius: 50%; background: #fff; opacity: 0; }
.suite-logo, .hero { position: relative; z-index: 1; }
.suite-logo { z-index: 2; display: block; height: 32px; width: auto; max-width: 100%; } /* above the words' scrim */
.hero { order: 2; margin-top: auto; align-self: stretch; font-variant-numeric: normal; --words-scrim: rgb(11 59 44 / .6); } /* prose: tabular figures would space its hyphens */
/* The words' own scrim, anchored to the words' box rather than to the panel's height: wherever the
   words land (a short window lifts them over the pale snow), they sit on the dark brand green. It
   fades in above the headline and runs to the panel's edges and foot. .6 is the lightest that keeps
   every shown word at 6 : 1 at every checked window (.59; the phone band's headline sets it, the
   desktop panel alone would need .11) and every word at 4.5 : 1 even with all of them forced on (.6:
   the email-link page at 1024 x 600), measured by scripts/signin-panel-review.mjs. Lighter shows more
   of the painting: the deer and the river. */
.hero::before { content: ""; position: absolute; z-index: -1; left: -48px; right: -48px; top: -80px; bottom: -40px; pointer-events: none;
  background: linear-gradient(180deg, rgb(11 59 44 / 0) 0, var(--words-scrim) 64px, var(--words-scrim) 100%); }
/* The panel's words (owner, 12 Nov 2026; the kit's HQ_PANEL, GET-IN.md §2.9): headline, one line, three
   short points with a small brand-green check, then the suite line. Same sizes as the kit's panel. */
.headline { margin: 0; max-width: 14em; font-size: 40px; line-height: 44px; font-weight: 600; letter-spacing: -.02em; color: var(--color-on-rail); text-wrap: balance; }
.sentence { margin: 16px 0 0; max-width: 30em; font-size: 15px; line-height: 22px; font-weight: 500; color: var(--color-on-rail); text-wrap: pretty; }
.points { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.points li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 20px; color: var(--color-rail-ink); }
.point-mark { flex: none; margin-top: 3px; color: var(--color-rail-client-icon-active); }
.suite { margin: 20px 0 0; font-size: 12.5px; line-height: 16px; color: var(--color-on-rail); }
@media (max-width: 1279px) { .headline { font-size: 32px; line-height: 36px; } }
/* Short windows keep the headline: the points go first, then (below 640px) the line and the suite line. */
@media (max-height: 800px) { .points { display: none; } }
@media (max-height: 639px) { .sentence, .suite { display: none; } }
@keyframes art-in { to { opacity: 1; } }
@keyframes art-drift { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.08) translate3d(-1.5%, 0, 0); } }
@keyframes snow-fall { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 10%, 90% { opacity: var(--o); } 100% { transform: translate3d(var(--x), 105vh, 0); opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .art img { opacity: 0; animation: art-in 900ms ease-out 100ms forwards, art-drift 70s ease-in-out 1s infinite alternate; }
  .snow i { animation: snow-fall var(--d) linear var(--w) infinite; }
}
.snow i:nth-child(1) { left: 0%; --s: 1.8px; --o: 0.69; --d: 20s; --w: -14s; --x: -17px; }
.snow i:nth-child(2) { left: 5%; --s: 3.2px; --o: 0.66; --d: 27s; --w: -10s; --x: 1px; }
.snow i:nth-child(3) { left: 81%; --s: 1.6px; --o: 0.37; --d: 21s; --w: -17s; --x: -30px; }
.snow i:nth-child(4) { left: 38%; --s: 1.7px; --o: 0.54; --d: 24s; --w: -15s; --x: 26px; }
.snow i:nth-child(5) { left: 83%; --s: 2.8px; --o: 0.39; --d: 23s; --w: -11s; --x: 12px; }
.snow i:nth-child(6) { left: 89%; --s: 3.4px; --o: 0.47; --d: 15s; --w: -19s; --x: -10px; }
.snow i:nth-child(7) { left: 62%; --s: 3.4px; --o: 0.80; --d: 19s; --w: -6s; --x: 29px; }
.snow i:nth-child(8) { left: 71%; --s: 3.4px; --o: 0.64; --d: 15s; --w: -16s; --x: 23px; }
.snow i:nth-child(9) { left: 27%; --s: 2.6px; --o: 0.69; --d: 21s; --w: -6s; --x: -14px; }
.snow i:nth-child(10) { left: 35%; --s: 1.9px; --o: 0.57; --d: 27s; --w: -24s; --x: -26px; }
.snow i:nth-child(11) { left: 89%; --s: 2.8px; --o: 0.58; --d: 18s; --w: -26s; --x: 0px; }
.snow i:nth-child(12) { left: 26%; --s: 1.7px; --o: 0.78; --d: 15s; --w: -13s; --x: -7px; }
.snow i:nth-child(13) { left: 27%; --s: 3.8px; --o: 0.59; --d: 21s; --w: -24s; --x: -27px; }
.snow i:nth-child(14) { left: 75%; --s: 3.4px; --o: 0.72; --d: 16s; --w: -0s; --x: 11px; }
.snow i:nth-child(15) { left: 85%; --s: 3.1px; --o: 0.68; --d: 24s; --w: -26s; --x: 23px; }
.snow i:nth-child(16) { left: 23%; --s: 2.3px; --o: 0.51; --d: 21s; --w: -15s; --x: 21px; }
.snow i:nth-child(17) { left: 40%; --s: 3.6px; --o: 0.47; --d: 20s; --w: -14s; --x: -2px; }
.snow i:nth-child(18) { left: 28%; --s: 1.9px; --o: 0.42; --d: 22s; --w: -21s; --x: -28px; }

.shell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 32px 16px; min-width: 0; }
.card { width: min(380px, 100%); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: 0; padding: 32px; }
.titlerow { display: flex; align-items: center; gap: 6px; margin: 0 0 20px; }
h1 { margin: 0; font-size: 16px; line-height: 22px; font-weight: 600; color: var(--color-ink); }
.card h1 { font-variant-numeric: normal; } /* card titles are prose: tabular figures spaced the hyphen in "sign-in" */
h2 { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--color-ink-muted); margin: 20px 0 8px; }
.help { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -8px 0 -8px -8px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--color-ink-muted); cursor: pointer; }
.help:hover { background: var(--color-surface-sunken); color: var(--color-ink); }
.help-text { margin: -8px 0 16px; padding: 10px 12px; font-size: 13px; line-height: 18px; background: var(--color-surface-sunken); border: 1px solid var(--color-line); color: var(--color-ink-2); }
.lede { margin: 0 0 16px; }

label { display: block; font-size: 13px; font-weight: 500; color: var(--color-ink); margin: 14px 0 6px; }
label:first-child { margin-top: 0; }
input { height: 44px; width: 100%; font: inherit; padding: 8px 12px; border: 1px solid var(--color-line-control); border-radius: 8px; background: var(--color-surface); color: var(--color-ink); transition: border-color 140ms ease-out; }
input:hover { border-color: var(--color-line-hover); }
input:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; border-color: var(--color-primary); }
input[aria-invalid="true"] { border-color: var(--color-danger); }
.pwbox { display: flex; align-items: center; gap: 4px; border: 1px solid var(--color-line-control); border-radius: 8px; background: var(--color-surface); padding-right: 4px; }
.pwbox:hover { border-color: var(--color-line-hover); }
.pwbox:focus-within { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; border-color: var(--color-primary); }
.pwbox:has(input[aria-invalid="true"]) { border-color: var(--color-danger); }
.pwbox input { border: 0; outline: none; background: transparent; min-width: 0; flex: 1; }
.reveal { height: 44px; min-width: 56px; padding: 0 8px; border: 0; border-radius: 6px; background: none; font: inherit; font-size: 13px; color: var(--color-primary); cursor: pointer; }
.reveal:hover { background: var(--color-surface-sunken); }
.reveal:focus-visible, .help:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }

.btn { height: 44px; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: inherit; font-weight: 500; padding: 0 14px; border-radius: 8px; cursor: pointer; transition: background-color 140ms ease-out, border-color 140ms ease-out; }
.btn:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.btn:disabled { opacity: .6; cursor: progress; }
.btn { text-decoration: none; }
.btn-primary { background: var(--color-primary); color: var(--color-on-primary); border: 1px solid var(--color-primary); margin-top: 20px; }
.btn-primary:hover:not(:disabled) { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.btn-ghost { background: var(--color-surface); color: var(--color-ink); border: 1px solid var(--color-line-control); }
.btn-ghost:hover:not(:disabled) { border-color: var(--color-line-hover); background: var(--color-surface-sunken); }
.btn-danger { color: var(--color-danger); }
.providers { display: flex; flex-direction: column; gap: 8px; }
.divider { display: flex; align-items: center; gap: 8px; margin: 16px 0; color: var(--color-ink-muted); font-size: 12.5px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--color-line); }
.links { display: flex; flex-direction: column; gap: 2px; margin-top: 16px; font-size: 12.5px; line-height: 16px; }
.link { background: none; border: 0; padding: 2px 0; font: inherit; font-size: 12.5px; color: var(--color-primary); cursor: pointer; border-radius: 4px; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; align-self: flex-start; }
.link:hover { color: var(--color-primary-hover); text-decoration: underline; }
.link:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.rules { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.rule { display: flex; align-items: center; gap: 6px; font-size: 12.5px; line-height: 16px; color: var(--color-ink-muted); }
.rule::before { content: "\25CB"; flex: none; width: 14px; }
.rule.is-met { color: var(--color-ink); }
.rule.is-met::before { content: "\2713"; color: var(--color-primary); font-weight: 700; }
.rule-note::before { content: "\2022"; }
.fineprint { margin: 14px 0 0; font-size: 12.5px; line-height: 16px; color: var(--color-ink-muted); }
.fineprint a, .foot a { color: var(--color-ink); text-underline-offset: 2px; }

.firms { list-style: none; margin: 0; padding: 0; border: 1px solid var(--color-line); border-radius: 8px; }
.firms li { padding: 12px 14px; border-top: 1px solid var(--color-line); }
.firms li:first-child { border-top: 0; }
.firm-name { font-weight: 600; color: var(--color-ink); }
.apps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.companies { list-style: none; margin: 8px 0 0; padding: 0 0 0 12px; border-left: 2px solid var(--color-line); }
.companies li { padding: 6px 0; border: 0; }
.company-name { font-size: 14px; }
.chip-button { cursor: pointer; font: inherit; font-size: 12px; min-height: 44px; }
.chip-button:hover, .chip-button:focus-visible { border-color: var(--color-primary); }
.chip { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--color-surface-selected); color: var(--color-primary); border: 1px solid var(--color-line); }
.muted { color: var(--color-ink-muted); }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.message { margin: 0 0 16px; padding: 10px 12px; border-radius: 8px; font-size: 13px; line-height: 18px; background: var(--color-surface-sunken); border: 1px solid var(--color-line); color: var(--color-ink); }
.message.error { color: var(--color-ink); border-left: 3px solid var(--color-danger); }
.message.ok { border-left: 3px solid var(--color-primary); }
.foot { font-size: 12.5px; line-height: 16px; color: var(--color-ink-muted); text-align: center; }

/* The band (the kit's): the logo and the headline only, so the form starts high on a phone. */
@media (max-width: 1023px) {
  .auth { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .panel { min-height: 96px; justify-content: center; gap: 12px; padding: 16px; }
  .art img { object-position: 50% 36%; }
  .scrim { background: linear-gradient(90deg, rgb(11 59 44 / .93) 0, rgb(11 59 44 / .93) 180px, rgb(11 59 44 / 0) 320px), linear-gradient(180deg, rgb(11 59 44 / .8) 0%, rgb(11 59 44 / .55) 45%, rgb(11 59 44 / .2) 100%); }
  .hero { margin-top: 0; }
  .hero::before { left: -16px; right: -16px; top: -8px; bottom: -16px; background: linear-gradient(180deg, rgb(11 59 44 / 0) 0, var(--words-scrim) 8px, var(--words-scrim) 100%); }
  .headline { font-size: 20px; line-height: 26px; letter-spacing: -.01em; }
  .snow, .sentence, .points, .suite { display: none; }
  .shell { justify-content: flex-start; }
}
@media (max-width: 480px) {
  .card { padding: 24px 16px; }
}
@media (pointer: coarse), (max-width: 640px) {
  .foot a, .fineprint a { display: inline-flex; align-items: center; min-height: 44px; }
}
h1:focus { outline: none; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
.card:has(#signed-out[hidden]) .help, .card:has(#signed-out[hidden]) .help-text { display: none; }