/* ============================================================================
   Sign in — split card: what it is for on the left, the form on the right
   ----------------------------------------------------------------------------
   All .si- prefixed. The page still loads Phoenix's theme for the footer and the
   MFA modal, so nothing here reaches for a bare element selector.
   ========================================================================= */

:root {
  --si-ink:    #131a33;
  --si-muted:  #6b7794;
  --si-line:   rgba(27, 45, 90, .10);
  --si-card:   #fff;
  --si-soft:   #f7f8fc;
  --si-violet: #5b4bd6;
}
[data-bs-theme="dark"] {
  --si-ink:   #f2f4fb;
  --si-muted: #98a2be;
  --si-line:  #2b3247;
  --si-card:  #171c2c;
  --si-soft:  #1c2233;
}

.si-page {
  min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem;
  background: #f4f5fb;
  /* The faint dot field the rest of the site uses, so this page belongs to it. */
  background-image: radial-gradient(circle, #e2e5f2 1.2px, transparent 1.3px);
  background-size: 22px 22px;
}
[data-bs-theme="dark"] .si-page {
  background: #10131f;
  background-image: radial-gradient(circle, #232a3d 1.2px, transparent 1.3px);
}

.si-card {
  width: min(64rem, 100%);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--si-card); border: 1px solid var(--si-line);
  border-radius: 1.5rem; overflow: hidden;
  box-shadow: 0 1.5rem 3.5rem rgba(19, 26, 51, .12);
}
@media (max-width: 861.98px) { .si-card { grid-template-columns: 1fr; } }

/* ---- left: brand ---- */
.si-brand {
  padding: 2.6rem 2.4rem; display: flex; flex-direction: column;
  background: linear-gradient(160deg, #f3f1ff 0%, #eef1fe 55%, #f7f5ff 100%);
  border-right: 1px solid var(--si-line);
}
[data-bs-theme="dark"] .si-brand {
  background: linear-gradient(160deg, #1d1b3c, #181c30);
  border-right-color: var(--si-line);
}
.si-logo {
  display: inline-flex; align-items: center; gap: .6rem; text-decoration: none;
  font-size: 1.05rem; font-weight: 800; color: var(--si-ink); margin-bottom: 2.4rem;
}
.si-logo img { border-radius: .55rem; }

.si-pill {
  margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: .45rem;
  padding: .35rem .8rem; border-radius: 999px; margin-bottom: 1.1rem;
  background: var(--si-card); border: 1px solid rgba(91, 75, 214, .2);
  font-size: .74rem; font-weight: 700; color: var(--si-violet);
  box-shadow: 0 1px 2px rgba(22, 20, 58, .05);
}
[data-bs-theme="dark"] .si-pill { background: #171c2c; color: #c4b5fd;
  border-color: rgba(165, 180, 252, .28); }

.si-brand h2, .si-brand .si-headline {
  margin: 0 0 .8rem; font-size: clamp(1.4rem, 2.6vw, 1.85rem); font-weight: 800;
  letter-spacing: -.03em; line-height: 1.2; color: var(--si-ink);
}
.si-brand p { margin: 0 0 1.6rem; font-size: .9rem; line-height: 1.65; color: var(--si-muted); }

/* No margin-bottom:auto. It pushed the tick list to the very bottom of the panel and left a
   band of empty lavender through the middle; the template simply stacks the blocks. */
.si-code {
  border-radius: .9rem; overflow: hidden;
  background: var(--si-card); border: 1px solid var(--si-line);
  box-shadow: 0 .4rem 1rem rgba(19, 26, 51, .06);
}
.si-code-bar { display: flex; gap: .35rem; padding: .6rem .8rem; }
.si-code-bar i { width: .5rem; height: .5rem; border-radius: 50%; background: #d8dcea; }
.si-code pre {
  margin: 0; padding: 0 .9rem .9rem; font-size: .74rem; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word; color: #3a4668;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
[data-bs-theme="dark"] .si-code pre { color: #c3cbef; }
.si-code .k { color: #7c3aed; }
.si-code .c { color: #0891b2; }

.si-points { list-style: none; margin: 1.6rem 0 auto; padding: 0; display: flex;
  flex-direction: column; gap: .1rem; }
.si-points li {
  display: flex; align-items: flex-start; gap: .6rem; padding: .3rem 0;
  font-size: .84rem; font-weight: 600; color: var(--si-ink);
}
.si-points .fa-check { margin-top: .2rem; font-size: .78rem; color: #16a34a; }

/* ---- right: form ---- */
.si-form { padding: 2.6rem 2.4rem; display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 575.98px) { .si-form { padding: 1.8rem 1.25rem; } }

.si-form h1 {
  margin: 0 0 .35rem; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800;
  letter-spacing: -.03em; color: var(--si-ink);
}
.si-sub { margin: 0 0 1.6rem; font-size: .88rem; color: var(--si-muted); }

/* The provider block is rendered by app.js only when the backend has providers configured, so
   these rules describe a two-up grid that simply never appears while none are. */
#social-buttons .d-grid { display: grid !important; gap: .6rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
#social-buttons .btn {
  padding: .7rem 1rem; border-radius: 0; font-size: .85rem; font-weight: 650;
  background: var(--si-card); border: 1px solid var(--si-line); color: var(--si-ink);
}
#social-buttons .btn:hover { border-color: rgba(91, 75, 214, .4); }
#social-buttons .divider-content-center { background: var(--si-card); }

.si-field { margin-bottom: 1.05rem; }
.si-field label {
  display: block; margin-bottom: .4rem;
  font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--si-muted);
}
/* A one-column GRID: the input and its icons share row 1, and any error app.js injects lands
   in row 2 on its own.

   Both earlier shapes were wrong for the same reason - they let the error change the box the
   icon is positioned against. As flex the error became a third column and squeezed the field.
   As a block with top:50% the icon centred on input PLUS error and sat 12px too low as soon as
   a message appeared. Sharing one grid cell centres the icon on the input alone, error or not. */
.si-input { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); }
.si-input > input { grid-area: 1 / 1; }
/* Keyed on si-ico AND svg: Font Awesome's SVG build replaces the <span> with an <svg> and
   rewrites its classes, so a rule keyed only on fa-* silently stops matching once it runs -
   the icon loses its absolute placement and drops into the flow beside the field. */
/* z-index matters here. The icon comes FIRST in the DOM and the input second, so with both
   in one grid cell the input - which has an opaque background - painted straight over it and
   the icons disappeared. They were fine while absolutely positioned; sharing a cell made
   paint order the deciding factor. */
.si-input > .si-ico, .si-input > svg {
  grid-area: 1 / 1; z-index: 1; align-self: center; justify-self: start; margin-left: .95rem;
  width: 1rem; height: 1rem; color: #a0a9c4; font-size: .88rem; pointer-events: none;
}
.si-input input {
  width: 100%; padding: .85rem 2.8rem .85rem 2.7rem; border-radius: .7rem;
  background: var(--si-card); border: 1px solid var(--si-line); color: var(--si-ink);
  font-size: .92rem;
}
.si-input input::placeholder { color: #a8b0c6; }
.si-input input:focus {
  outline: none; border-color: rgba(91, 75, 214, .5);
  box-shadow: 0 0 0 .2rem rgba(91, 75, 214, .13);
}
/* Reveal, rather than a checkbox below the field: a password typed wrong is the single most
   common reason a sign-in fails, and this fixes it without leaving the field. */
.si-peek {
  grid-area: 1 / 1; z-index: 1; align-self: center; justify-self: end; margin-right: .5rem; width: 2rem; height: 2rem; border: 0; border-radius: .45rem;
  background: none; color: #a0a9c4; cursor: pointer; display: grid; place-items: center;
}
.si-peek:hover { color: var(--si-violet); background: rgba(91, 75, 214, .08); }
.si-peek:focus-visible { outline: 2px solid var(--si-violet); outline-offset: 1px; }
.si-peek-ico { display: grid; place-items: center; line-height: 1; }
.si-peek-ico svg, .si-peek-ico span { width: 1rem; height: 1rem; }

.si-row { display: flex; justify-content: flex-end; margin-bottom: 1.3rem; }
.si-row a { font-size: .82rem; font-weight: 700; color: var(--si-violet); text-decoration: none; }
.si-row a:hover { text-decoration: underline; }

.si-submit {
  /* Square, as every button on the site now is. It was squared here first, as a trial
     against the rounded original; the social buttons above have since followed, so the
     inputs are the only rounded thing left in the card. */
  width: 100%; padding: .9rem 1rem; border: 0; border-radius: 0; cursor: pointer;
  font-size: .95rem; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #7c6cf3, #5b4bd6);
  box-shadow: 0 .4rem 1rem rgba(91, 75, 214, .32);
  transition: filter .15s ease, transform .15s ease;
}
.si-submit:hover:not(:disabled) { filter: brightness(1.07); transform: translateY(-1px); }
.si-submit:disabled { opacity: .7; cursor: default; }

.si-alt { margin: 1.3rem 0 0; text-align: center; font-size: .86rem; color: var(--si-muted); }
.si-alt a { font-weight: 700; color: var(--si-violet); text-decoration: none; }
.si-alt a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .si-submit { transition: none; }
  .si-submit:hover:not(:disabled) { transform: none; }
}

/* Declared LAST on purpose. .si-brand sets display:flex further up at the same specificity, so
   a hide rule placed before it loses on source order - the panel stayed visible on a phone and
   pushed the form two screens down. */
@media (max-width: 861.98px) {
  .si-brand { display: none; }
}

/* ---- brand mark ----
   A drawn tile rather than the PNG: at 34px the photographic icon was unreadable. */
.si-mark {
  flex: 0 0 auto; width: 2.15rem; height: 2.15rem; border-radius: .55rem;
  display: grid; place-items: center;
  background: var(--si-violet); color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82rem; font-weight: 800; letter-spacing: -.02em;
}

/* ---- provider buttons ---- */
.si-social {
  display: grid; gap: .6rem; margin-bottom: .6rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
}
.si-social-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .75rem 1rem; border-radius: 0; cursor: pointer;
  background: var(--si-card); border: 1px solid var(--si-line); color: var(--si-ink);
  font-size: .88rem; font-weight: 650;
  transition: border-color .15s ease, background .15s ease;
}
.si-social-btn:hover:not(:disabled) { border-color: rgba(91, 75, 214, .45); }
/* Reads as unavailable rather than merely quiet: the cursor, the opacity and the title all say
   the same thing, so nobody spends a click finding out. */
.si-social-btn:disabled { opacity: .55; cursor: not-allowed; }
.si-social-note {
  margin: 0 0 1rem; text-align: center; font-size: .74rem; color: var(--si-muted);
}

.si-divider {
  display: flex; align-items: center; gap: .8rem; margin: 0 0 1.4rem;
  font-size: .78rem; color: var(--si-muted);
}
.si-divider::before, .si-divider::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--si-line);
}

/* ---- field errors ----
   app.js inserts .jch-field-error right after the input, inside .si-input. That wrapper is a
   block (see above), so the message stacks under the field instead of competing with it for
   the row. Sized so its appearance does not shift the fields below it more than one line. */
.si-input .jch-field-error {
  display: flex; align-items: flex-start; gap: .4rem;
  margin-top: .4rem; font-size: .78rem; line-height: 1.4; color: #dc2626;
}
/* Drawn, not a font glyph. The site loads Font Awesome's SVG-JS build and NO webfont, so a
   \f071 codepoint had nothing to resolve against and rendered as an empty tofu box. A data-URI
   image needs no font at all, and carries its own colour per theme. */
.si-input .jch-field-error::before {
  content: ""; flex: 0 0 auto; width: .82rem; height: .82rem; margin-top: .1rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23dc2626'%3E%3Cpath d='M12 2 1 21h22L12 2zm1 15h-2v-2h2v2zm0-4h-2V8h2v5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
[data-bs-theme="dark"] .si-input .jch-field-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fca5a5'%3E%3Cpath d='M12 2 1 21h22L12 2zm1 15h-2v-2h2v2zm0-4h-2V8h2v5z'/%3E%3C/svg%3E");
}
[data-bs-theme="dark"] .si-input .jch-field-error { color: #fca5a5; }
/* The field itself carries the state too, so the error is not the only signal. */
.si-input input.is-invalid { border-color: rgba(220, 38, 38, .55); }
.si-input input.is-invalid:focus {
  border-color: rgba(220, 38, 38, .7); box-shadow: 0 0 0 .2rem rgba(220, 38, 38, .12);
}

/* ============================================================================
   Sign up — the extra controls the sign-in page does not have
   ========================================================================= */

/* The captcha is rendered by js/captcha.js and is either the image challenge or a reCAPTCHA
   notice, so this styles the container and lets the widget bring its own shape. */
.si-captcha { margin-bottom: 1.1rem; }
.si-captcha:empty { display: none; }
.si-captcha .jch-cap {
  padding: .9rem 1rem; border-radius: .75rem;
  background: var(--si-soft); border: 1px solid var(--si-line);
}
.si-captcha .form-label {
  font-size: .7rem !important; font-weight: 800 !important; letter-spacing: .07em;
  text-transform: uppercase; color: var(--si-muted);
}
.si-captcha .jch-cap-row { display: flex; align-items: center; gap: .6rem; }
.si-captcha .jch-cap-img {
  border-radius: .5rem; border: 1px solid var(--si-line); max-width: 100%; height: auto;
}
.si-captcha .jch-cap-refresh { flex: 0 0 auto; border-radius: .5rem; }
.si-captcha .jch-cap-input {
  border-radius: .6rem; letter-spacing: .12em; text-transform: uppercase;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
/* The reCAPTCHA attribution variant is a <p>, not the boxed challenge - no panel around it. */
.si-captcha p.jch-cap { background: none; border: 0; padding: 0; }

.si-check {
  display: flex; align-items: flex-start; gap: .6rem; margin-bottom: 1.3rem; cursor: pointer;
  font-size: .82rem; line-height: 1.5; color: var(--si-muted);
}
.si-check input {
  flex: 0 0 auto; margin-top: .15rem; width: 1rem; height: 1rem;
  accent-color: var(--si-violet); cursor: pointer;
}

#signup-closed .alert, #signup-alert .alert, #login-alert .alert { border-radius: .7rem; }

/* ============================================================================
   The auth pages' left panel — the 2026-09-21 design
   ----------------------------------------------------------------------------
   .ap- for "auth panel": sign-up.html and sign-in.html are built from the same
   blocks (logo, pill, headline, lead, feature list) and differ only in what
   closes the panel - a code window on one, a hand-written sign-off on the other
   - and in the pill's fill. Those differences live under .is-signin further
   down. Colours were read off the two mockups.
   ========================================================================= */

.si-brand.ap-brand {
  padding: 2.9rem 2.6rem 2.4rem;
  /* Lighter than the .si-brand gradient it overrides, with the two soft blobs the design puts
     behind the logo and the code window. */
  background:
    radial-gradient(14rem 14rem at 96% 12%, rgba(196, 202, 248, .38), transparent 70%),
    radial-gradient(11rem 11rem at 4% 62%, rgba(206, 212, 250, .30), transparent 70%),
    linear-gradient(165deg, #f4f5fe 0%, #eef0fd 58%, #eaecfd 100%);
}
[data-bs-theme="dark"] .si-brand.ap-brand {
  background: linear-gradient(165deg, #1b1f36, #171b2c);
}

/* ---- logo ---- */
.ap-logo { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; }
.ap-logo img { width: 2.6rem; height: 2.6rem; border-radius: .6rem; flex: 0 0 auto; }
.ap-logo b {
  display: block; font-size: 1.3rem; font-weight: 800; line-height: 1.15;
  letter-spacing: -.02em; color: #020419;
}
.ap-logo b em { font-style: normal; color: #4c2ef7; }
.ap-logo i {
  display: block; font-style: normal; font-size: .78rem; font-weight: 500;
  line-height: 1.3; margin-top: .1rem; color: #575a71;
}
[data-bs-theme="dark"] .ap-logo b { color: #f2f4fb; }
[data-bs-theme="dark"] .ap-logo b em { color: #a5b4fc; }
[data-bs-theme="dark"] .ap-logo i { color: #98a2be; }

/* ---- pill ---- */
.ap-pill {
  align-self: flex-start; display: inline-flex; align-items: center; gap: .55rem;
  margin: 2.5rem 0 0; padding: .5rem 1.1rem; border-radius: 999px;
  background: #fff; border: 1px solid rgba(91, 75, 214, .16);
  box-shadow: 0 2px 6px rgba(22, 20, 58, .06);
  font-size: .8rem; font-weight: 700; color: #0b0d36; white-space: nowrap;
}
.ap-pill > .fa-solid { font-size: .88rem; color: #866aea; }
[data-bs-theme="dark"] .ap-pill { background: #171c2c; color: #e7eaf7; border-color: rgba(165, 180, 252, .26); }

/* ---- headline ---- */
/* A paragraph, not a heading: the page's one h1 is the form's "Create your account", and it comes
   after this in the DOM - an h2 here would be read out before it. Same reasoning as sign-in.html. */
/* .si-brand p above sets font-size:.9rem and wins on specificity over a bare class, which is why
   this and .ap-lead are both scoped through the panel. */
.si-brand.ap-brand .ap-headline {
  margin: 1.1rem 0 0; font-size: clamp(1.9rem, 3.4vw, 2.45rem); font-weight: 800;
  line-height: 1.16; letter-spacing: -.035em; color: #030419;
}
.si-brand.ap-brand .ap-headline em { font-style: normal; color: #442efb; }
[data-bs-theme="dark"] .si-brand.ap-brand .ap-headline { color: #f2f4fb; }
[data-bs-theme="dark"] .si-brand.ap-brand .ap-headline em { color: #a5b4fc; }

.si-brand.ap-brand .ap-lead {
  margin: .95rem 0 0; max-width: 24rem; font-size: 1.02rem; line-height: 1.55; color: #4b4f6b;
}
[data-bs-theme="dark"] .si-brand.ap-brand .ap-lead { color: #98a2be; }

/* ---- what an account is for ---- */
.ap-feats { list-style: none; margin: 1.7rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .85rem; }
.ap-feats li { display: flex; align-items: center; gap: 1rem; }
.ap-feats li > span:first-child {
  flex: 0 0 auto; width: 2.75rem; height: 2.75rem; border-radius: .8rem;
  display: grid; place-items: center; background: var(--tile); color: var(--ico);
}
.ap-feats li > span:first-child > span { font-size: 1.15rem; }
.ap-feats b { display: block; font-size: .92rem; font-weight: 800; line-height: 1.3; color: #020313; }
.ap-feats i { display: block; font-style: normal; font-size: .84rem; line-height: 1.35; margin-top: .1rem; color: #595d73; }
[data-bs-theme="dark"] .ap-feats b { color: #f2f4fb; }
[data-bs-theme="dark"] .ap-feats i { color: #98a2be; }
[data-bs-theme="dark"] .ap-feats li > span:first-child {
  background: color-mix(in srgb, var(--ico) 20%, #171c2c); color: color-mix(in srgb, var(--ico) 62%, #fff);
}

/* ---- the code window, its note and the badge ---- */
.ap-art { position: relative; margin: 1.9rem 0 0; padding-right: 5.5rem; }
.ap-win {
  position: relative; border-radius: .85rem; overflow: hidden; background: #fff;
  border: 1px solid rgba(27, 45, 90, .08); box-shadow: 0 .7rem 1.6rem rgba(46, 45, 120, .13);
  transform: rotate(-1.4deg);
}
.ap-win-bar { display: flex; gap: .4rem; padding: .6rem .75rem .45rem; }
.ap-win-bar i { width: .55rem; height: .55rem; border-radius: 50%; }
.ap-win-bar i:nth-child(1) { background: #ff5f57; }
.ap-win-bar i:nth-child(2) { background: #febc2e; }
.ap-win-bar i:nth-child(3) { background: #28c840; }
.ap-win pre {
  margin: 0; padding: .15rem .95rem 1rem; font-size: .72rem; line-height: 1.75;
  white-space: pre; overflow-x: auto; color: #474b77;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.ap-win .k { color: #7c3aed; }
.ap-win .t { color: #2563eb; }
.ap-win .s { color: #12a67d; }
[data-bs-theme="dark"] .ap-win { background: #131728; border-color: #2b3247; }
[data-bs-theme="dark"] .ap-win pre { color: #c3cbef; }

/* The badge overlaps the window's bottom-right corner, as drawn. */
.ap-badge {
  position: absolute; right: 3.1rem; bottom: -.55rem; width: 3.1rem; height: 3.1rem;
  border-radius: .95rem; display: grid; place-items: center; color: #fff; font-size: 1.05rem;
  background: linear-gradient(145deg, #855ffd, #6d43f8);
  box-shadow: 0 .55rem 1.1rem rgba(109, 67, 248, .35);
}

.ap-note {
  position: absolute; right: -.4rem; top: -.6rem; width: 5.4rem; text-align: center;
  font-family: "Segoe Script", "Bradley Hand", "Brush Script MT", "Comic Sans MS", cursive;
  font-size: 1.02rem; line-height: 1.45; color: #4b3bbd; transform: rotate(-6deg);
}
.ap-note svg { display: block; width: 3.2rem; height: 2.4rem; margin: .1rem 0 0 .5rem;
  fill: none; stroke: #6d47d8; stroke-width: 2.2; stroke-linecap: round; }
[data-bs-theme="dark"] .ap-note { color: #a5b4fc; }
[data-bs-theme="dark"] .ap-note svg { stroke: #a5b4fc; }

/* The panel is hidden below 862px by the rule at the foot of this file, so the only narrowing
   that matters is the band between there and a comfortable desktop. */
@media (max-width: 1100px) {
  .si-brand.ap-brand { padding: 2.2rem 1.9rem 2rem; }
  .ap-feats { gap: .7rem; }
  .ap-art { padding-right: 4.4rem; }
  /* The longest line is 42 characters; below this the panel is too narrow for it at .72rem and
     the decorative window grew a horizontal scrollbar. */
  .ap-win pre { font-size: .63rem; padding-left: .8rem; padding-right: .8rem; }
  .ap-badge { right: 2.4rem; width: 2.7rem; height: 2.7rem; }
  .ap-note { font-size: .92rem; width: 4.6rem; }
}
@media (prefers-reduced-motion: reduce) { .ap-win { transform: none; } }

/* The arrow on "Create free account" - the design puts one there, and it needs the button to
   lay its children out in a row. Scoped to the button that has one, so the sign-in button is
   not turned into a flex container for nothing. */
#signup-btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; }
#signup-btn > .fa-arrow-right { font-size: .9em; transition: transform .15s ease; }
#signup-btn:hover > .fa-arrow-right { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { #signup-btn > .fa-arrow-right { transition: none; } }

/* ============================================================================
   Sign-in, the 2026-09-21 design
   ----------------------------------------------------------------------------
   The left panel is the shared .ap-* vocabulary above; only what differs from
   the sign-up panel is here. The right-hand form is opt-in through .si-v2 on
   .si-form, so the sign-up form keeps the styling it already had.
   ========================================================================= */

/* The design gives the panel a little less than half, not half. */
.si-card.si-card-v2 { grid-template-columns: minmax(0, 44.4fr) minmax(0, 55.6fr); }
@media (max-width: 861.98px) { .si-card.si-card-v2 { grid-template-columns: 1fr; } }

/* Flatter and more lavender than the sign-up panel, which carries two blobs. */
.si-brand.ap-brand.is-signin {
  background: linear-gradient(168deg, #f1f1fd 0%, #f0f4fe 55%, #f2f5fe 100%);
}
[data-bs-theme="dark"] .si-brand.ap-brand.is-signin { background: linear-gradient(168deg, #1b1f36, #171b2c); }

/* "to your coding space" is a longer line than the sign-up panel's "Java Journey", and at the
   shared size it wrapped to three lines. The design sets it smaller here anyway. */
.si-brand.ap-brand.is-signin .ap-headline { font-size: clamp(1.75rem, 3vw, 2.15rem); }

/* Tinted rather than white, and it carries no icon on this page. */
.is-signin .ap-pill { background: #dfdcf9; border-color: transparent; box-shadow: none; color: #594ab8; }
[data-bs-theme="dark"] .is-signin .ap-pill { background: rgba(129, 140, 248, .18); color: #c4b5fd; }

/* A rule, then the hand-written sign-off - what the code window is on the sign-up panel. */
.ap-rule { margin: 1.8rem 0 0; border: 0; border-top: 1px solid rgba(27, 45, 90, .09); }
[data-bs-theme="dark"] .ap-rule { border-top-color: #2b3247; }
.ap-sign {
  display: block; margin: 1.15rem 0 0; max-width: 13rem;
  font-family: "Segoe Script", "Bradley Hand", "Brush Script MT", "Comic Sans MS", cursive;
  font-size: 1.32rem; line-height: 1.45; color: #a49ee2;
}
.ap-sign i { font-style: normal; display: block; }
.ap-sign i:nth-child(2) { padding-left: .5rem; }
.ap-sign i:nth-child(3) { padding-left: 1.1rem; }
.ap-sign svg { display: block; width: 6.5rem; height: .75rem; margin: -.15rem 0 0 1.1rem;
  fill: none; stroke: #b3ade9; stroke-width: 2.2; stroke-linecap: round; }
[data-bs-theme="dark"] .ap-sign { color: #8b93d8; }
[data-bs-theme="dark"] .ap-sign svg { stroke: #8b93d8; }

/* ---- the form ---- */
.si-form.si-v2 { padding: 2.2rem 3.1rem 2.6rem; }
@media (max-width: 575.98px) { .si-form.si-v2 { padding: 1.8rem 1.25rem; } }

/* "New to Java Coding Hub? [Create an account]", above the heading and hard right. */
.si-v2 .si-top {
  display: flex; align-items: center; justify-content: flex-end; gap: .75rem;
  margin: 0 0 2.1rem; font-size: .85rem; color: #76798b;
}
.si-v2 .si-top a {
  padding: .5rem 1.05rem; border-radius: .6rem; background: #f2f1fe;
  font-weight: 700; color: #5241ae; text-decoration: none; white-space: nowrap;
  transition: background-color .15s ease;
}
.si-v2 .si-top a:hover { background: #e7e5fd; color: #43349a; }
[data-bs-theme="dark"] .si-v2 .si-top { color: #98a2be; }
[data-bs-theme="dark"] .si-v2 .si-top a { background: rgba(129, 140, 248, .16); color: #c4b5fd; }

.si-form.si-v2 h1 { margin: 0 0 .45rem; font-size: clamp(1.6rem, 2.6vw, 2.05rem); color: #01021a; }
.si-v2 .si-sub { margin: 0 0 1.75rem; font-size: .96rem; color: #727689; }
[data-bs-theme="dark"] .si-form.si-v2 h1 { color: #f2f4fb; }
[data-bs-theme="dark"] .si-v2 .si-sub { color: #98a2be; }

/* Sentence case and dark, where the sign-up form uses an uppercase micro-label. */
.si-v2 .si-field { margin-bottom: 1.15rem; }
.si-v2 .si-field label {
  margin-bottom: .5rem; font-size: .88rem; font-weight: 700;
  letter-spacing: 0; text-transform: none; color: #3c4158;
}
[data-bs-theme="dark"] .si-v2 .si-field label { color: #c3cbe4; }
.si-v2 .si-input input { padding-top: .8rem; padding-bottom: .8rem; border-radius: .65rem; font-size: .95rem; }
.si-v2 .si-input input::placeholder { color: #a7a8b4; }
.si-v2 .si-input > .si-ico, .si-v2 .si-input > svg { color: #63677f; }

.si-v2 .si-row { margin-bottom: 1.5rem; }
.si-v2 .si-row a { font-size: .88rem; color: #644fde; }

/* Flat, rounded and with the arrow the design puts on it - not the square gradient the sign-up
   button still wears. */
.si-v2 .si-submit {
  display: flex; align-items: center; justify-content: center; gap: .85rem;
  padding: 1.02rem 1rem; border-radius: .75rem; font-size: 1.02rem; font-weight: 700;
  background: #6866e6; box-shadow: 0 .55rem 1.2rem rgba(104, 102, 230, .32);
}
.si-v2 .si-submit > .fa-arrow-right { font-size: .95em; transition: transform .15s ease; }
.si-v2 .si-submit:hover:not(:disabled) > .fa-arrow-right { transform: translateX(3px); }

.si-legal { margin: 1.25rem 0 0; text-align: center; font-size: .85rem; line-height: 1.6; color: #6b7280; }
.si-legal a { font-weight: 700; color: #5743cb; text-decoration: none; }
.si-legal a:hover { text-decoration: underline; }
[data-bs-theme="dark"] .si-legal { color: #98a2be; }
[data-bs-theme="dark"] .si-legal a { color: #a5b4fc; }

@media (prefers-reduced-motion: reduce) {
  .si-v2 .si-top a, .si-v2 .si-submit > .fa-arrow-right { transition: none; }
}