/* ============================ the front door ============================
   auth_base.html: the website's navy header, then a quiet brand panel and
   the form panel, which is the hero. The header and the brand panel use
   the website's navy (site.css --navy) so site → Sign in is one product. One accent (the brand indigo, on the primary button, focus and a
   single bar in the board silhouette); everything else is near-black,
   greys and white. Square corners, as everywhere in the app. No motion
   beyond 120 ms hover/focus transitions. Loaded only by auth_base.html. */

body.au-page {
  --au-ink:    #111318;
  --au-ink-2:  #4a5058;          /* 8.1:1 on white */
  --au-ink-3:  #6b727c;          /* 4.86:1 on white — small print only */
  --au-rule:   #e6e8ec;
  --au-field:  #cfd3da;
  --au-night:  #12162b;          /* the app bar and the website header */
  --au-ring:   rgba(76, 92, 242, .22);
  /* One spacing scale for the layout (8px steps, like the app). */
  --au-s1: 8px;
  --au-s2: 16px;
  --au-s3: 24px;
  --au-s4: 32px;
  --au-s5: 48px;
  --au-s6: 64px;
  /* The website's container (site.css --wrap / --gut): the header and the
     page content share its edges. --au-side is the space outside it; it's
     a percentage of the page width, so use it only on full-width boxes
     (the header's padding, the shell's grid columns). */
  --au-wrap: 1200px;
  --au-gut:  32px;
  --au-side: max(var(--au-gut), (100% - var(--au-wrap)) / 2);
  --au-form-w: 384px;            /* the form column's measure */
  background: #fff;
  color: var(--au-ink);
}

/* ---- header: the website's, trimmed to the wordmark and one link ---- */
.au-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--au-s2);
  height: 60px;
  padding: 0 var(--au-side);
  background: var(--au-night);
  border-bottom: 1px solid #000;
}
.au-top-brand { display: flex; align-items: center; }
.au-top-brand img { display: block; height: 20px; width: auto; }
.au-top-links a {
  color: #fff;
  font: 600 14px/1 "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  text-decoration: none;
}
.au-top-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.au-top a:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* ---- the split ----
   One grid under the header. Columns: the space outside the container, the
   brand column, the form column, the space outside again, so both columns'
   content sits inside the website's container while the navy runs to the
   left edge of the screen and the white to the right. At the full 1200px
   container the split is 7:5 (700 / 500): the brand column holds the board
   silhouette near its drawn width (about 650px), and the form column holds
   the 384px form with a clear margin from the navy. Below that the form
   column keeps its minimum and the brand column gives way.
   Rows: space, content, space. The content row is shared through subgrid,
   so the brand block and the form start on the same line, and the pair is
   centred in the height below the header. The brand panel's small print
   sits in the bottom row. */
.au-shell {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns:
    [full-start] var(--au-side)
    [c-start] minmax(0, 1fr)
    [split] max(var(--au-form-w) + var(--au-s6), min(var(--au-wrap), 100% - 2 * var(--au-gut)) * 5 / 12)
    [c-end] var(--au-side) [full-end];
  grid-template-rows: minmax(var(--au-s6), 1fr) auto minmax(var(--au-s6), 1fr);
  min-height: calc(100vh - 60px);
  min-height: calc(100dvh - 60px);
}
.au-shell::before {                 /* the navy panel, full-bleed to the left edge */
  content: "";
  grid-column: full-start / split;
  grid-row: 1 / -1;
  z-index: -1;
  background: var(--au-night);
}
.au-shell::after {                  /* one faint grid over it, fading out from the top left */
  content: "";
  grid-column: full-start / split;
  grid-row: 1 / -1;
  z-index: -1;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 0% 0%, #000 10%, transparent 75%);
  mask-image: radial-gradient(ellipse 90% 80% at 0% 0%, #000 10%, transparent 75%);
}

/* ---- brand panel ---- */
.au-brand {
  grid-column: c-start / split;
  grid-row: 1 / -1;
  display: grid;
  grid-template-rows: subgrid;
  min-width: 0;
  padding-right: var(--au-s5);    /* the navy's inner margin before the split */
  color: #fff;
}
.au-brand-body { grid-row: 2; min-width: 0; }
.au-kicker {
  margin: 0 0 var(--au-s2);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #a9b2ff;                  /* the website's indigo on navy, 7.9:1 */
}
.au-statement {
  margin: 0 0 var(--au-s4);
  max-width: 19em;
  /* A modest step up on wide screens: 26px to 1500, about 29px at 1920, 34px from 2500. */
  font-size: clamp(26px, 14px + .8vw, 34px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.022em;
  color: #fff;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.au-statement span { color: #8b8f98; }   /* 6.1:1 on the panel */
.au-statement span.nw { white-space: nowrap; }
.au-brand-foot {
  grid-row: 3;
  align-self: end;
  margin: 0 0 var(--au-s4);
  font-size: 12px;
  line-height: 1.5;
  color: #8b8f98;
}
.au-brand-foot:empty { display: none; }

/* ---- the board silhouette: static, low contrast, recedes ---- */
.au-board {                          /* the brand column's full width */
  border: 1px solid rgba(255, 255, 255, .09);
  background: rgba(255, 255, 255, .02);
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
}
.au-board-bar {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 30px;
  padding: 0 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.au-board-bar i { display: block; height: 6px; background: rgba(255, 255, 255, .14); }
.au-bb-title { width: 84px; }
.au-bb-tabs { display: flex; gap: 10px; }
.au-bb-tabs i { width: 36px; background: rgba(255, 255, 255, .08); }
.au-bb-tabs i.on { background: rgba(255, 255, 255, .22); }
.au-board-grid {
  display: grid;
  grid-template-columns: 64px repeat(7, minmax(0, 1fr));
  grid-auto-rows: minmax(52px, auto);
  grid-template-rows: 26px;
}
.au-board-grid > * {
  min-width: 0;
  border-right: 1px solid rgba(255, 255, 255, .05);
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.au-board-grid > :nth-child(8n) { border-right: 0; }
.au-bg-day {
  display: flex;
  align-items: center;
  padding: 0 7px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  color: rgba(255, 255, 255, .38);
}
.au-bg-day.is-today { color: rgba(255, 255, 255, .75); box-shadow: inset 0 -2px 0 var(--brand); }
.au-bg-day.is-wknd, .au-bg-cell.is-wknd { background: rgba(255, 255, 255, .018); }
.au-bg-cell.is-today { background: rgba(255, 255, 255, .03); }
.au-bg-rail { padding: 10px 8px; }
.au-bg-rail i { display: block; height: 6px; background: rgba(255, 255, 255, .12); }
.au-bg-cell { display: flex; flex-direction: column; gap: 4px; padding: 6px; }
.au-bg-cell i {
  display: block;
  height: 9px;
  background: rgba(255, 255, 255, .085);
  box-shadow: inset 2px 0 0 rgba(255, 255, 255, .16);
}
.au-bg-cell i.is-accent { background: var(--brand); box-shadow: none; }

/* ---- form panel: the form's right edge is the container's right edge,
   under the header's link ---- */
.au-main {
  grid-column: split / c-end;
  grid-row: 1 / -1;
  display: grid;
  grid-template-rows: subgrid;
  justify-items: end;
  min-width: 0;
}
.au-form { grid-row: 2; align-self: start; width: 100%; max-width: var(--au-form-w); }

.au-head { margin-bottom: var(--au-s3); }
.au-head h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.018em;
  color: var(--au-ink);
  overflow-wrap: anywhere;
}
.au-head p { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--au-ink-3); overflow-wrap: anywhere; }
.au-head p:empty { display: none; }
.au-head p b { color: var(--au-ink); font-weight: 600; }

.au-form [hidden] { display: none !important; }

/* ---- fields ---- */
.au-field { margin-bottom: 18px; }
.au-field label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--au-ink);
}
/* Password + "Forgot password?": the link follows the input in the DOM so
   Tab goes email -> password, but sits on the label row. */
.au-field.has-aside { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; }
.au-field.has-aside label { grid-row: 1; grid-column: 1; }
.au-field.has-aside .au-aside { grid-row: 1; grid-column: 2; align-self: baseline; }
.au-field.has-aside .au-pw { grid-row: 2; grid-column: 1 / -1; }
.au-hint { font-size: 12px; font-weight: 400; color: var(--au-ink-3); }

.au-field input[type=email],
.au-field input[type=password],
.au-field input[type=text] {
  display: block;
  width: 100%;
  height: 40px;
  margin: 0;
  padding: 0 12px;
  background: #fff;
  border: 1px solid var(--au-field);
  color: var(--au-ink);
  font: 400 14px/1 "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  outline: 2px solid transparent;   /* forced-colours still get a ring */
  transition: border-color 120ms, box-shadow 120ms;
}
.au-field input:hover { border-color: var(--line-strong); }
.au-field input:focus,
.au-field input:focus-visible {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--au-ring);
}
.au-pw { position: relative; }
.au-pw input { padding-right: 64px !important; }
.au-pw-toggle {
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  padding: 0 12px;
  background: transparent;
  border: 0;
  color: var(--au-ink-3);
  font: 500 12.5px/1 "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  cursor: pointer;
  transition: color 120ms;
}
.au-pw-toggle:hover { color: var(--au-ink); }
.au-pw-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

/* ---- actions ---- */
.au-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 40px;
  margin-top: 8px;
  padding: 8px 16px;
  background: var(--brand);
  border: 1px solid var(--brand);
  color: #fff;
  font: 600 14px/1.3 "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms, border-color 120ms;
}
.au-submit:hover { background: var(--brand-deep); border-color: var(--brand-deep); text-decoration: none; }
.au-submit:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.au-submit.is-quiet { background: #fff; border-color: var(--au-field); color: var(--au-ink); }
.au-submit.is-quiet:hover { background: #f6f7f9; border-color: var(--line-strong); }

.au-aside,
.au-links a,
.au-foot a {
  color: var(--brand-deep);
  font-weight: 500;
  text-decoration: none;
}
.au-aside { font-size: 13px; }
.au-aside:hover, .au-links a:hover, .au-foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
.au-aside:focus-visible, .au-links a:focus-visible, .au-foot a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.au-links { margin: 18px 0 0; font-size: 13px; line-height: 1.5; color: var(--au-ink-3); }
.au-links .au-hint { font-size: 13px; }

.au-sso { margin-top: 18px; }
.au-sso .au-submit { margin-top: 0; }
.au-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--au-ink-3);
}
.au-or::before, .au-or::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--au-rule); }

/* ---- notice (role=status) and error (role=alert) ---- */
.au-notice,
.au-err {
  margin: 0 0 20px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.au-notice { background: #f5f6f8; border: 1px solid var(--au-rule); color: var(--au-ink-2); }
.au-notice p { margin: 0; }
.au-notice-sub { margin-top: 4px !important; font-size: 12.5px; color: var(--au-ink-3); }
.au-err { background: #fdf3f3; border: 1px solid #f1c9ca; color: var(--danger); font-weight: 500; }   /* 6.0:1 */
.au-lead { margin: 0 0 20px; font-size: 14px; line-height: 1.5; color: var(--au-ink-2); overflow-wrap: anywhere; }
.au-lead b { color: var(--au-ink); font-weight: 600; }

/* Invite facts: what you're joining and what you'll be able to do. */
.au-facts { margin: -8px 0 24px; border-top: 1px solid var(--au-rule); }
.au-facts > div {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--au-rule);
  font-size: 13px;
  line-height: 1.45;
}
.au-facts dt { color: var(--au-ink-3); }
.au-facts dd { margin: 0; color: var(--au-ink); font-weight: 500; overflow-wrap: anywhere; }

.au-foot {
  margin: 32px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--au-rule);
  font-size: 13px;
  line-height: 1.5;
  color: var(--au-ink-3);
}
.au-foot b { color: var(--au-ink-2); font-weight: 600; }

/* ---- responsive ---- */
@media (max-width: 1180px) {
  .au-bb-tabs i:nth-child(n+4) { display: none; }
}
/* A narrower brand column: a smaller margin and rail so the day labels fit. */
@media (max-width: 1100px) {
  .au-brand { padding-right: var(--au-s4); }
  .au-board-grid { grid-template-columns: 40px repeat(7, minmax(0, 1fr)); }
  .au-bg-day { padding: 0 6px; }
}
/* The website's gutters: 24px under 900, 16px under 600. */
@media (max-width: 900px) {
  body.au-page { --au-gut: 24px; }
}
@media (max-width: 600px) {
  body.au-page { --au-gut: 16px; }
}
/* Tablet and phone: the form alone, wordmark on top. */
@media (max-width: 860px) {
  .au-shell { display: block; min-height: 0; }
  .au-shell::before, .au-shell::after, .au-brand { display: none; }
  .au-main { display: block; padding: 40px var(--au-gut) 48px; }
  .au-form { margin: 0 auto; max-width: 400px; }
  /* 16px text stops iOS zooming into the field on focus. */
  .au-field input[type=email],
  .au-field input[type=password],
  .au-field input[type=text] { height: 44px; font-size: 16px; }
  .au-submit { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .au-field input, .au-submit, .au-pw-toggle { transition: none; }
}