/* Adapted from halofyai/halomem at 2f880f61e4f1f3164f41ea36981e2416dd9e803e: console auth and NEW Halofy Design System. */
/* ---- Halofy design tokens (honoring NEW Halofy Design System/tokens) ---- */
/* docs/design/console-design-language.md and /console/design-language are supplemental
     implementation references. NEW Halofy Design System remains the canonical
     source for mineral surfaces, evergreen ink, typography and brand assets. */

@font-face {
  font-family: "Inter";
  src: url("/assets/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root {
  --evergreen: #123a2e;
  --evergreen-hover: #0e2f25;
  --olive: #7f9366;
  --sage: #c7d7b2;
  --neutral-soft: #eef0f2;
  --sage-soft: var(--neutral-soft);
  --rust: #e83c00;
  --gold: #f4d35e;
  --slate: #5b6b82;
  --ink: #0b0d0b;
  --canvas: #fff;
  --panel: #fff;
  --surface-soft: #fff;
  --mineral: #f3f6ee;
  --muted: #596455;
  --muted-2: #53604f;
  --line: #d9dfcf;
  --stone: #e6e6e1;
  --evergreen-rgb: 18 58 46;
  --metal:
    radial-gradient(circle at 18% 12%, rgb(243 246 238/22%), transparent 22%),
    radial-gradient(circle at 82% 88%, rgb(199 215 178/18%), transparent 30%),
    linear-gradient(150deg, #0b0d0b 0%, #0e2f25 34%, #123a2e 56%, #1d4f3f 78%, #0e2f25 100%);
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: var(--font-sans);
  --font-body: var(--font-sans);
  --font-cta: var(--font-sans);
  --font-mono: var(--font-sans);
  --font-brand: var(--font-sans);
  --text-h1: 34px;
  --text-h2: 24px;
  --text-body-size: 16px;
  --text-small: 13px;
  --text-label: 12px;
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 999px;
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;
  --space-text: var(--s2);
  --space-group: var(--s4);
  --space-section: var(--s5);
  --panel-padding: var(--s5);
  --panel-radius: var(--r-lg);
  --subpanel-padding: var(--s4);
  --subpanel-radius: var(--r-md);
  --section-title-size: 16px;
  --section-subtitle-size: 13px;
  --sh-1: 0 1px 0 rgba(15, 24, 16, 0.04);
  --sh-2: 0 8px 22px -16px rgba(15, 24, 16, 0.18);
  --sh-3: 0 18px 48px -24px rgba(15, 24, 16, 0.16);
  --sh-4: 0 30px 70px -36px rgba(15, 24, 16, 0.22);
  --metal-shadow: 0 18px 44px rgb(var(--evergreen-rgb)/24%), inset 0 1px 0 rgb(243 246 238/24%);
  --focus: 0 0 0 3px rgb(var(--evergreen-rgb)/16%);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  /* One chevron for every dropdown on the platform. Dark surfaces swap the
       light variant onto --select-chevron instead of redefining the geometry. */
  --chevron-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23123a2e' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2.6 4.6 3.4 3.4 3.4-3.4'/%3E%3C/svg%3E");
  --chevron-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23f3f6ee' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2.6 4.6 3.4 3.4 3.4-3.4'/%3E%3C/svg%3E");
  --select-chevron: var(--chevron-ink);
}

/* ---- Halofy Design Language (docs/design/console-design-language.md) -----
     The canonical palette, elevation and type scale for every NEW or
     REFACTORED surface. Deliberately a SEPARATE block from the legacy tokens
     above and deliberately ADDITIVE: nothing here overrides an existing token,
     so no shipped screen re-renders because this block exists. Where a legacy
     token already carries the right value the alias points straight at it.

     The rail nav is frozen, and S3 Scoped memory / S4 Policies / S5 Memory are
     already built to this language — do not restyle them. See the
     "Do not disturb" section of docs/design/console-design-language.md.

     Known divergences the legacy tokens have NOT been migrated to (changing
     them would repaint every screen and breaks console-design-system.test.ts —
     do not "fix" them casually): --ink #0b0d0b vs --dl-text #111827,
     --canvas #fff vs --dl-page #fafafa, --muted #596455 vs --dl-ink-2 #6b7280. */
:root {
  /* Evergreen ramp — the only hue family. One family per chart, never a
       rainbow palette. The shell uses a neutral metallic black; evergreen
       remains the in-page action colour. */
  --dl-rail: #050607; /* solid fallback + dark edge      */
  --dl-rail-metal:
    radial-gradient(circle, rgb(255 255 255/9%) 0 0.65px, transparent 0.85px) 0 0/8px 8px,
    radial-gradient(circle at 18% -20%, rgb(255 255 255/13%), transparent 32%),
    linear-gradient(118deg, #030405 0%, #15181b 28%, #070809 52%, #1b1e21 74%, #050607 100%);
  --dl-primary: #0f3d2e; /* primary button, active ink      */
  --dl-primary-hover: #14503c;
  --dl-mid: #1a5a42; /* gradient partner for send FAB   */
  --dl-brand: #2e6b52; /* source chips, live dots, series */
  --dl-soft: #5d9b7c;
  --dl-pale: #a9c18c;
  --dl-wash: #eaf1ec; /* selected pill / user bubble bg  */
  --dl-wash-line: #d5e3da;
  --dl-wash-hover: #dfeae3;
  --dl-row-selected: #f7faf8;

  /* Neutrals — a single 8-step gray, top to bottom. */
  --dl-text: #111827; /* primary ink, tooltip/toast bg   */
  --dl-ink-1: #374151; /* secondary body, table cells     */
  --dl-ink-2: #6b7280; /* helper text, inactive tab       */
  --dl-ink-3: #9ca3af; /* meta, eyebrow, placeholder icon */
  --dl-disabled: #d1d5db;
  --dl-border: var(--line); /* #d9dfcf — every card + control  */
  --dl-border-soft: #eef0f3; /* tier-2 elevated card border     */
  --dl-hairline: var(--mineral); /* #f3f6ee — row + section rules   */
  --dl-page: #fafafa; /* page bg, tier-3 inset fill      */

  /* Status — a fg/bg pair per state. Never a colored icon chip; icon chips
       stay neutral (--dl-hairline on --dl-ink-1). */
  --dl-ok-fg: #067647;
  --dl-ok-bg: #ecfdf3;
  --dl-warn-fg: #b54708;
  --dl-warn-bg: #fffaeb;
  --dl-warn-line: #fedf89;
  --dl-bad-fg: #b42318;
  --dl-bad-bg: #fef3f2;
  --dl-bad-line: #fda29b;
  --dl-bad-hover-bg: #fee4e2;
  --dl-bad-solid-hover: #912018;
  --dl-neutral-fg: var(--dl-ink-1);
  --dl-neutral-bg: var(--dl-hairline);
  --dl-live: #12b76a; /* pulse dot only                  */
  --dl-alert-icon: #f97066; /* error glyph ON the dark toast   */

  /* Radii — the geometry ladder. Controls 10, cards 14, modal 16,
       composer 18, everything round 999. */
  --dl-r-xs: 5px;
  --dl-r-sm: 7px;
  --dl-r-md: 8px;
  --dl-r-lg: 10px;
  --dl-r-xl: 12px;
  --dl-r-card: 14px;
  --dl-r-modal: 16px;
  --dl-r-composer: 18px;
  --dl-r-pill: 999px;

  /* Elevation — five tiers, and they do not mix. A card is tier 1 unless it
       lifts on hover, in which case it is tier 2 for its whole life. */
  --dl-e1: 0 1px 2px rgb(16 24 40/4%);
  --dl-e2: 0 1px 2px rgb(16 24 40/5%), 0 4px 12px rgb(16 24 40/5%);
  --dl-e2-hover: 0 2px 4px rgb(16 24 40/6%), 0 10px 24px rgb(16 24 40/10%);
  --dl-e-inset: 0 1px 2px rgb(16 24 40/4%), 0 3px 8px rgb(16 24 40/4%);
  --dl-e-popover: 0 8px 24px rgb(16 24 40/12%);
  --dl-e-tooltip: 0 4px 12px rgb(16 24 40/20%);
  --dl-e-toast: 0 8px 24px rgb(16 24 40/25%);
  --dl-e-modal: 0 24px 64px rgb(16 24 40/20%);
  --dl-e-send: 0 4px 12px rgb(15 61 46/35%);
  --dl-e-composer: 0 2px 4px rgb(16 24 40/5%), 0 14px 40px rgb(18 58 46/10%);
  --dl-focus: 0 0 0 3px rgb(15 61 46/12%);
  --dl-focus-bad: 0 0 0 3px rgb(180 35 24/8%);

  /* Supplemental component type scale. Production inherits --font-sans from
       the canonical Halofy token block above. */
  --dl-t-hero: 26px;
  --dl-t-title: 22px;
  --dl-t-card: 15px;
  --dl-t-body: 13px;
  --dl-t-control: 12.5px;
  --dl-t-meta: 11px;
  --dl-t-eyebrow: 10px;
  --dl-w-display: 650;
  --dl-w-strong: 600;
  --dl-w-body: 500;
  --dl-track-tight: -0.02em; /* 22px and up                     */
  --dl-track-snug: -0.01em; /* 15px card titles                */
  --dl-track-eyebrow: 0.16em; /* mono eyebrow, uppercase         */

  /* Black shell palette: warm white primary ink, silver-muted secondary
       ink, and translucent white interaction states. */
  --dl-rail-ink: #f5f7f5;
  --dl-rail-ink-70: rgb(245 247 245/76%);
  --dl-rail-ink-55: rgb(245 247 245/62%);
  --dl-rail-ink-45: rgb(245 247 245/48%);
  --dl-rail-fill: rgb(255 255 255/4%);
  --dl-rail-fill-active: rgb(255 255 255/12%);
  --dl-rail-line: rgb(255 255 255/14%);
  --dl-rail-icon-active: #dce9d4;
  --dl-shell-control: #d4d7d8;
  --dl-shell-control-hover: #c8ccce;
  --dl-shell-control-line: #b9bec0;
}
* {
  box-sizing: border-box;
}
html {
  scrollbar-gutter: stable;
}
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a {
  color: inherit;
}
h1,
h2,
h3,
h4 {
  margin: 0;
  text-wrap: balance;
  letter-spacing: -0.02em;
  font-weight: 500;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 500;
}
.num {
  font-variant-numeric: tabular-nums;
}

.btn {
  all: unset;
  box-sizing: border-box;
  font-family: var(--font-cta);
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  min-height: 40px;
  padding: 8px 15px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition:
    transform 0.06s,
    background 0.12s,
    border-color 0.12s,
    box-shadow 0.12s;
  white-space: nowrap;
  letter-spacing: 0.005em;
  word-spacing: 0.04em;
}
.btn:active {
  transform: translateY(1px);
}
.btn:focus-visible {
  box-shadow: var(--focus);
}
.btn:disabled {
  opacity: 0.72;
  cursor: not-allowed;
  border-color: var(--line);
  background: var(--stone);
  color: var(--muted);
}
.btn svg {
  width: 15px;
  height: 15px;
}
.btn--solid {
  background: var(--evergreen);
  color: var(--mineral);
}
.btn--solid:hover {
  background: var(--evergreen-hover);
}
.btn--primary {
  background: var(--evergreen);
  color: var(--mineral);
  box-shadow: var(--sh-1), var(--sh-2);
}
.btn--primary:hover {
  background: var(--evergreen-hover);
}
.btn--outline {
  border-color: rgb(var(--evergreen-rgb)/28%);
  color: var(--evergreen);
  background: transparent;
}
.btn--outline:hover {
  background: var(--sage-soft);
}
.btn--ghost {
  color: var(--evergreen);
}
.btn--ghost:hover {
  background: var(--sage-soft);
}
.btn--sage {
  background: var(--sage);
  color: var(--evergreen);
}
.btn--sm {
  min-height: 36px;
  padding: 6px 11px;
  font-size: var(--text-small);
}
.btn--danger {
  color: var(--rust);
  border: 1px solid rgb(232 60 0/28%);
  background: var(--panel);
}
.btn--danger:hover {
  background: rgb(232 60 0/6%);
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--panel-radius);
  padding: var(--panel-padding);
  box-shadow: var(--sh-1), var(--sh-2);
}
.card > h3 {
  font-size: var(--section-title-size);
  line-height: 1.25;
  margin-bottom: var(--space-text);
}
.card .sub {
  color: var(--muted);
  font-size: var(--section-subtitle-size);
  line-height: 1.5;
  margin-bottom: var(--space-group);
}

.field {
  margin-bottom: var(--s4);
}
.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 6px;
}
.model-field-label {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 6px;
}
.model-field-label label {
  margin: 0;
}
.model-field-label .heading-info {
  width: 16px;
  height: 16px;
  margin-left: 0;
}
.model-field-label .heading-info svg {
  width: 14px;
  height: 14px;
}
/* line-height is pinned so a mono input, a body input and a native select
     that sit on one row all resolve to the same box height. */
.input,
.select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.45;
  padding: 10px 12px;
  border: 1px solid rgb(var(--evergreen-rgb)/18%);
  border-radius: var(--r-sm);
  background: var(--panel);
  color: var(--ink);
}
.input:focus,
.select:focus {
  outline: none;
  border-color: var(--evergreen);
  box-shadow: var(--focus);
}
.auth-shell {
  min-height: 100dvh;
  display: grid;
  place-items: stretch;
  padding: 0;
  background: var(--panel);
  overflow-x: hidden;
}
.auth-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: radial-gradient(rgb(18 58 46/12%) 0.7px, transparent 0.7px);
  background-size: 10px 10px;
  background-repeat: no-repeat;
  mask-image: radial-gradient(ellipse at 92% 8%, #000, transparent 44%);
}
.auth-frame {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(400px, 2fr) minmax(0, 3fr);
  grid-template-areas: "auth story";
  width: 100%;
  min-height: 100dvh;
  border: 0;
  border-radius: 0;
  background: var(--panel);
  overflow: hidden;
  box-shadow: none;
}
/* Keep the established metallic evergreen story on sign-in; authenticated
     shell chrome uses its own neutral metallic-black treatment. */
.auth-story {
  grid-area: story;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 38px 42px 34px;
  overflow: hidden;
  background: var(--metal);
  background-color: var(--evergreen);
  color: var(--mineral);
}
.auth-clouds {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.auth-story::before,
.auth-story::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.auth-story::before {
  width: 300px;
  height: 300px;
  right: -170px;
  top: -160px;
  border: 1px solid rgb(199 215 178/10%);
}
.auth-story::after {
  display: none;
}
.auth-story-brand {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 9px;
}
.auth-story-brand img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.auth-story-brand b {
  display: block;
  color: var(--mineral);
  font: 600 17px var(--font-brand);
  line-height: 20px;
  letter-spacing: -0.015em;
}
.auth-story-copy {
  position: relative;
  z-index: 1;
  margin: 0 0 var(--s5);
}
.auth-story-copy h2 {
  max-width: none;
  margin: 0;
  color: var(--mineral);
  font-size: clamp(18px, 2.16vw, 24px);
  line-height: 1.03;
  letter-spacing: -0.035em;
  text-align: center;
}
.auth-story-copy h2 span {
  display: block;
  white-space: nowrap;
}

/* ---- login stream --------------------------------------------------------
     Three lanes of tool marks drift horizontally past a fixed Halo mark: the
     memory layer everything flows through. Each lane holds the SAME chip set
     twice and translates exactly -50%, which lands on the identical frame, so
     the loop is seamless without JavaScript - login.html keeps exactly one
     inline script, the auth flow. Lanes alternate direction and run at
     different speeds so the field never reads as one sliding block. */
.auth-stream {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s4);
  margin: 0 -42px;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
}
.auth-stream-lane {
  position: relative;
  display: flex;
  flex: none;
  border-top: 1px solid rgb(199 215 178/8%);
  border-bottom: 1px solid rgb(199 215 178/8%);
  padding: 9px 0;
}
.auth-stream-belt {
  display: flex;
  width: max-content;
  animation: none;
}
.auth-stream-set {
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding-right: var(--gap);
}
.auth-stream-lane--edge {
  --dur: 88s;
  --gap: 24px;
  --chip: 46px;
}
.auth-stream-lane--main {
  --dur: 68s;
  --gap: 28px;
  --chip: 60px;
}
.auth-stream-lane--main .auth-stream-belt {
  animation-direction: reverse;
}
.auth-stream-chip {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--chip);
  height: var(--chip);
  border-radius: 50%;
  border: 1px solid rgb(199 215 178/16%);
  background: radial-gradient(circle at 32% 26%, #252a26, #0b0d0b 74%);
  box-shadow:
    0 10px 20px -12px rgb(4 12 9/85%),
    0 2px 5px -2px rgb(4 12 9/55%),
    inset 0 1px 0 rgb(243 246 238/16%),
    inset 0 -8px 14px -10px rgb(199 215 178/26%);
}
.auth-stream-chip img {
  width: 42%;
  height: 42%;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.86;
}
/* The lanes run behind the mark; the glow keeps them from crowding it. */
.auth-stream-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 270px;
  height: 270px;
  pointer-events: none;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgb(18 58 46/96%) 0%, rgb(18 58 46/78%) 34%, transparent 70%);
  animation: none;
}
.auth-stream-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 92px;
  height: 92px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgb(199 215 178/28%);
  background: radial-gradient(circle at 34% 26%, #252a26, #0b0d0b 74%);
  box-shadow:
    0 22px 48px -18px rgb(4 12 9/90%),
    0 0 0 10px rgb(199 215 178/5%),
    0 0 46px rgb(199 215 178/18%),
    inset 0 1px 0 rgb(243 246 238/26%);
}
.auth-stream-core img {
  width: 52%;
  height: 52%;
  object-fit: contain;
}
@keyframes auth-stream-run {
  to {
    transform: translateX(var(--auth-stream-shift, -50%));
  }
}
@keyframes auth-stream-breathe {
  0%,
  100% {
    opacity: 0.86;
    transform: translate(-50%, -50%) scale(0.97);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.04);
  }
}
@media (prefers-reduced-motion: reduce) {
  .auth-stream-belt,
  .auth-stream-glow {
    animation: none;
  }
}

.auth-card {
  grid-area: auth;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: center;
  justify-self: center;
  width: min(420px, calc(100% - 48px));
  max-width: 420px;
  min-height: 0;
  padding: var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--sh-4);
}
.auth-brand {
  border-bottom: 1px solid var(--line);
  padding: 0 0 var(--s4);
  margin: 0 0 var(--s5);
}
.auth-brand b {
  color: var(--ink);
}
.auth-brand small {
  color: var(--muted-2);
}
.auth-card h1:focus {
  outline: none;
}
.auth-card > h1 {
  font-size: 30px;
  margin-bottom: var(--s2);
}
.auth-form {
  display: grid;
  gap: var(--s3);
}
.auth-form .field {
  margin-bottom: 0;
}
.auth-error {
  color: var(--rust);
  display: none;
  margin: 0;
}
.auth-submit {
  width: 100%;
  justify-content: center;
}
/* Sign-in controls are the widest, most-clicked targets on the platform, so
     they run one size up from the in-app primitives: 48px rows, the card
     radius instead of the pill, and a lift on hover. */
.auth-card .input {
  min-height: 46px;
  border-radius: var(--r-md);
  padding: 12px 14px;
  font-size: 14.5px;
  background: color-mix(in srgb, var(--panel) 84%, var(--sage-soft));
  box-shadow: inset 0 1px 2px rgb(15 24 16/5%);
  transition:
    border-color 0.12s var(--ease),
    box-shadow 0.12s var(--ease),
    background 0.12s var(--ease);
}
.auth-card .input:hover:not(:focus) {
  border-color: rgb(var(--evergreen-rgb)/32%);
}
.auth-card .input:focus {
  background: var(--panel);
  box-shadow:
    var(--focus),
    inset 0 1px 2px rgb(15 24 16/5%);
}
.auth-card .auth-submit {
  min-height: 48px;
  border-radius: var(--r-md);
  font-size: 14.5px;
}
/* Metallic black, the same shell finish as the rail and the workspace bar, so
     every sign-in CTA reads as Halofy chrome rather than an in-page evergreen
     action. Hover and active wash the shared token instead of restating the
     ramp, so the rail and these buttons can never drift apart. */
.auth-card .btn--solid,
.auth-card .btn--primary {
  border-color: transparent;
  color: var(--dl-rail-ink);
  background: var(--dl-rail-metal);
  background-color: var(--dl-rail);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255/16%),
    inset 0 -1px 0 rgb(0 0 0/38%),
    0 1px 2px rgb(5 6 7/22%),
    0 12px 24px -14px rgb(5 6 7/72%);
}
.auth-card .btn--solid:hover,
.auth-card .btn--primary:hover {
  transform: translateY(-1px);
  background: linear-gradient(rgb(255 255 255/10%), rgb(255 255 255/10%)), var(--dl-rail-metal);
  background-color: var(--dl-rail);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255/22%),
    inset 0 -1px 0 rgb(0 0 0/38%),
    0 2px 4px rgb(5 6 7/24%),
    0 18px 34px -16px rgb(5 6 7/78%);
}
.auth-card .btn--solid:active,
.auth-card .btn--primary:active {
  transform: translateY(1px);
  background: linear-gradient(rgb(0 0 0/18%), rgb(0 0 0/18%)), var(--dl-rail-metal);
  background-color: var(--dl-rail);
  box-shadow: inset 0 2px 5px rgb(0 0 0/46%);
}
.auth-card .btn--outline {
  border-radius: var(--r-md);
  background: var(--panel);
  box-shadow: var(--sh-1), var(--sh-2);
}
.auth-card .btn--outline:hover {
  transform: translateY(-1px);
  box-shadow: var(--sh-1), var(--sh-3);
}
/* One "or" rule, and it disappears with the providers it separates. */
#credentials:has(#google[hidden]):has(#github[hidden]) .auth-divider--providers {
  display: none;
}
/* Unified sign-in (Google + automatically resolved email credentials) */
/* Pending state: the Context Fabric, then the status line. Sized so the form
     side does not jump between the loading view and the sign-in controls. */
.auth-loading {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--s5);
  min-height: 320px;
  padding: var(--s4) 0;
}
.auth-loading .fabric-art {
  max-width: 300px;
}
#sso-pending h1,
#sso-forgot h1,
#sso-recovery h1,
#native-title {
  font-size: 30px;
  line-height: 1.08;
  letter-spacing: -0.035em;
  margin-bottom: var(--s2);
  color: var(--evergreen);
}
#credentials > .sub,
#sso-pending .sub,
#sso-forgot .sub,
#sso-recovery .sub {
  margin-bottom: var(--s4);
}
.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted-2);
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--line);
}
.auth-divider span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-2, 10px);
  background: #eceeeb;
}
.auth-tab {
  all: unset;
  box-sizing: border-box;
  text-align: center;
  cursor: pointer;
  padding: 7px 10px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}
.auth-tab:focus-visible {
  box-shadow: var(--focus);
}
.auth-tab.is-active {
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--sh-1);
}
#email-auth {
  display: grid;
  gap: var(--s3);
}
#email-auth[hidden] {
  display: none;
}
#email-auth > .field:first-of-type {
  padding-top: var(--s1);
}
.auth-link {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--evergreen);
  justify-self: start;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.auth-link:focus-visible {
  box-shadow: var(--focus);
}
.auth-link--dim {
  color: var(--muted-2);
  justify-self: center;
  text-decoration: none;
}
.auth-link--dim:hover {
  color: var(--ink);
}
.google-signin {
  all: unset;
  box-sizing: border-box;
  position: relative;
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 12px 46px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--ink);
  background: linear-gradient(
    180deg,
    var(--panel) 0%,
    color-mix(in srgb, var(--panel) 88%, var(--stone)) 100%
  );
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 #fff,
    0 1px 2px rgb(15 24 16/8%),
    0 8px 18px -12px rgb(15 24 16/28%);
  transition:
    transform 0.12s var(--ease),
    background 0.12s var(--ease),
    border-color 0.12s var(--ease),
    box-shadow 0.12s var(--ease);
}
.google-signin[hidden] {
  display: none;
}
.google-signin:hover {
  border-color: #cfd3cc;
  transform: translateY(-1px);
  background: linear-gradient(180deg, var(--panel) 0%, var(--stone) 100%);
  box-shadow:
    inset 0 1px 0 #fff,
    0 2px 4px rgb(15 24 16/8%),
    0 14px 26px -14px rgb(15 24 16/34%);
}
.google-signin:active {
  transform: translateY(0);
  box-shadow:
    inset 0 1px 2px rgb(15 24 16/10%),
    0 1px 2px rgb(15 24 16/8%);
}
.google-signin:focus-visible {
  outline: 2px solid var(--evergreen);
  outline-offset: 2px;
  box-shadow: var(--sh-1);
}
.google-signin:disabled {
  opacity: 0.75;
  cursor: not-allowed;
  border-color: var(--line);
  background: var(--stone);
  color: var(--muted);
}
.google-signin__mark {
  position: absolute;
  top: 50%;
  left: 16px;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
}
.auth-status {
  color: var(--muted);
  display: none;
  margin: 0;
}
.auth-terms {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-2);
  text-align: center;
  line-height: 1.7;
}
@media (max-width: 840px) {
  .auth-shell {
    padding: 0;
  }
  .auth-frame {
    grid-template-columns: 1fr;
    grid-template-areas: "story" "auth";
    min-height: 100dvh;
  }
  .auth-story {
    min-height: 260px;
    padding: 30px 34px;
  }
  /* The stacked story panel is a banner, not a stage: the lanes lose the
       height that made them read as streams, so they leave rather than shrink. */
  .auth-stream {
    display: none;
  }
  .auth-story-copy {
    margin: 34px 0 22px;
  }
  .auth-story-copy h2 {
    max-width: none;
    font-size: 20.4px;
  }
  .auth-card {
    margin-block: var(--s6);
  }
}
@media (max-width: 560px) {
  .auth-shell {
    display: block;
    padding: 0;
    background: var(--panel);
  }
  .auth-frame {
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .auth-story {
    min-height: 146px;
    padding: 20px var(--s5);
  }
  .auth-story-copy {
    margin: auto 0 0;
  }
  .auth-story-copy h2 {
    max-width: none;
    font-size: 14.4px;
    line-height: 1.05;
  }
  .auth-card {
    width: calc(100% - 32px);
    margin-block: var(--s5);
    padding: 28px var(--s5);
    justify-content: flex-start;
  }
  .auth-brand {
    display: none;
  }
}

[hidden] {
  display: none !important;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.auth-stream-lane--main .auth-stream-belt {
  transform: translateX(-210px);
}
.auth-stream-lane--edge:last-of-type .auth-stream-belt {
  transform: translateX(-360px);
}
.auth-card h1 {
  font-size: 30px;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--evergreen);
}
.auth-card .sub {
  margin-top: 0;
}
#notice:empty {
  display: none;
}
#notice {
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--mineral);
  color: var(--evergreen);
  font-size: 13px;
  overflow-wrap: anywhere;
}
#loading {
  min-height: 320px;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 13px;
}
.hint {
  font-size: 13px;
  color: var(--muted);
  margin-top: 5px;
}
#account {
  max-width: 940px;
  margin: auto;
  padding: 32px 24px 64px;
}
.account-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}
.brand-lockup {
  display: flex;
  gap: 9px;
  align-items: center;
  text-decoration: none;
  font-size: 17px;
  color: var(--evergreen);
}
.account-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin: 40px 0 28px;
}
.account-heading h1 {
  font-size: 34px;
  line-height: 1.08;
  color: var(--evergreen);
}
.account-heading p {
  margin: 8px 0;
}
.eyebrow {
  font-size: 10px;
}
.muted {
  color: var(--muted);
}
#account .card {
  margin-bottom: 16px;
}
#approve h2 {
  font-size: 24px;
}
#approve p {
  font-size: 14px;
}
#device-code {
  display: block;
  margin: 8px 0 16px;
  max-width: 320px;
  letter-spacing: 0.15em;
  font-variant-numeric: tabular-nums;
  font-size: 24px;
}
.device {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.device h2 {
  font-size: 16px;
}
.device p {
  margin: 8px 0 0;
  font-size: 13px;
}
.device > div {
  min-width: 0;
  overflow-wrap: anywhere;
}
.online {
  color: var(--dl-ok-fg);
}
#empty {
  padding: 32px;
  color: var(--muted);
  font-size: 14px;
  background: var(--dl-page);
}
#account-notice {
  margin-bottom: 16px;
}
@media (max-width: 560px) {
  .account-heading {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .device {
    align-items: flex-start;
    flex-direction: column;
  }
  #account {
    padding-inline: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
  }
}
.auth-clouds {
  background: url("/assets/auth-clouds.webp") center/cover no-repeat;
}

.auth-form {
  margin: 0 0 16px;
}
.auth-divider span {
  font-size: 12px;
}