/* accounts.macrodeep.com — the sign-in page for four products.
 *
 * The material this design is made of is the products' own marks: a cobalt
 * lotus, a multicoloured ear of wheat, a steel asterisk, a pixel-art badge.
 * They are the one genuinely distinctive thing on the page, so they set the
 * palette rather than being dropped onto someone else's. The ambient wash
 * behind the brand panel is sampled from those four hues and nothing else —
 * no gradient hero, no acid accent on near-black.
 *
 * Two roles from one type stack: the platform's UI face, heavy with negative
 * tracking for display, at reading weight for everything else. Deliberately
 * not a web font — this is the estate's highest-value injection target, and a
 * third-party stylesheet origin on it buys nothing worth the surface.
 *
 * Both themes are built, neither is an inversion of the other: light is a
 * card lifted off a cool paper ground, dark is a single pane cut out of the
 * canvas with its own light source. */

:root {
  color-scheme: light dark;

  /* The four products, used for the ambient wash and the active state. */
  --p-salestools: #0b64ce;
  --p-grain:      #e0562f;
  --p-nico:       #46679a;
  --p-saleshub:   #16a34a;

  --ground:       #eceff5;
  --ground-2:     #e3e8f1;
  --panel:        #0d1119;
  --panel-ink:    #f2f5fa;
  --panel-dim:    #8894a6;
  --panel-line:   rgba(255, 255, 255, 0.09);
  --surface:      #ffffff;
  --ink:          #0e131c;
  --ink-mid:      #49525f;
  --ink-dim:      #78828f;
  --line:         #e1e6ee;
  --line-strong:  #cbd3df;
  --field:        #f7f9fc;
  --accent:       #2b56cc;
  --accent-hover: #2348ae;
  --accent-ink:   #ffffff;
  --accent-ring:  rgba(43, 86, 204, 0.32);
  --danger:       #9c2217;
  --danger-bg:    #fdf0ee;
  --shadow:
    0 1px 2px rgba(14, 19, 28, 0.05),
    0 12px 28px -8px rgba(14, 19, 28, 0.14),
    0 40px 80px -32px rgba(14, 19, 28, 0.22);

  --radius:    18px;
  --radius-sm: 11px;
  --display: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display",
             "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
          "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:       #05070b;
    --ground-2:     #080b11;
    --panel:        #0b0f16;
    --panel-ink:    #f2f5fa;
    --panel-dim:    #7d8798;
    --panel-line:   rgba(255, 255, 255, 0.07);
    --surface:      #0e131b;
    --ink:          #eef2f8;
    --ink-mid:      #a7b1be;
    --ink-dim:      #78838f;
    --line:         #1e2531;
    --line-strong:  #2d3642;
    --field:        #070a0f;
    --accent:       #4f7dfb;
    --accent-hover: #6b92ff;
    --accent-ink:   #060910;
    --accent-ring:  rgba(79, 125, 251, 0.34);
    --danger:       #f0908a;
    --danger-bg:    #2a1411;
    --shadow:
      0 1px 2px rgba(0, 0, 0, 0.6),
      0 24px 60px -16px rgba(0, 0, 0, 0.75);
  }
}
:root[data-theme="dark"] {
  --ground: #05070b; --ground-2: #080b11; --panel: #0b0f16;
  --panel-ink: #f2f5fa; --panel-dim: #7d8798;
  --panel-line: rgba(255, 255, 255, 0.07);
  --surface: #0e131b; --ink: #eef2f8; --ink-mid: #a7b1be; --ink-dim: #78838f;
  --line: #1e2531; --line-strong: #2d3642; --field: #070a0f;
  --accent: #4f7dfb; --accent-hover: #6b92ff; --accent-ink: #060910;
  --accent-ring: rgba(79, 125, 251, 0.34);
  --danger: #f0908a; --danger-bg: #2a1411;
  --shadow: 0 1px 2px rgba(0,0,0,.6), 0 24px 60px -16px rgba(0,0,0,.75);
}

* { box-sizing: border-box; }

/* `hidden` is a presentation default, and any `display` rule beats it. The
   error box is display:flex, so without this an empty error bar shows on a
   page nobody has touched yet -- which is exactly what it looked like. */
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 18px;
  background:
    /* Two soft washes in two of the products' hues, kept far apart and at
       low opacity so they read as light in a room rather than as a gradient
       anyone chose. */
    radial-gradient(1100px 620px at 12% -8%,
      color-mix(in srgb, var(--p-salestools) 13%, transparent), transparent 62%),
    radial-gradient(820px 520px at 92% 108%,
      color-mix(in srgb, var(--p-saleshub) 10%, transparent), transparent 60%),
    linear-gradient(180deg, var(--ground) 0%, var(--ground-2) 100%);
  background-attachment: fixed;
  color: var(--ink);
  font: 400 15px/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 18px; top: 18px; z-index: 3;
  padding: 9px 13px;
  background: var(--surface);
  border-radius: var(--radius-sm);
}

/* ------------------------------------------------------------------ shell */

.shell {
  display: grid;
  grid-template-columns: 324px minmax(0, 428px);
  width: 100%;
  max-width: 752px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* --------------------------------------------------------------- the rail */

.rail {
  position: relative;
  display: flex;
  padding: 38px 30px 32px;
  background: var(--panel);
  color: var(--panel-ink);
  isolation: isolate;
}

/* The light source inside the panel. One wash, from the corner the wordmark
   sits in, so the panel reads as lit rather than as a flat block. */
.rail::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(560px 340px at 6% 0%,
      color-mix(in srgb, var(--p-salestools) 34%, transparent), transparent 66%),
    radial-gradient(420px 320px at 108% 104%,
      color-mix(in srgb, var(--p-grain) 20%, transparent), transparent 62%);
  opacity: 0.55;
}

/* A hairline of the four product colours along the panel's inner edge: the
   one piece of ornament on the page, and it is literally the subject. */
.rail::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(
    180deg,
    var(--p-salestools) 0%,
    var(--p-grain) 38%,
    var(--p-nico) 68%,
    var(--p-saleshub) 100%
  );
}

.rail-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* The wordmark is dark navy artwork, so it sits on a light chip rather than
   being tinted. A brand mark recoloured in CSS is one that will be wrong the
   day the artwork changes. */
.wordmark {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 8px 12px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset,
              0 6px 18px -8px rgba(0, 0, 0, 0.5);
}
.wordmark img { display: block; height: 21px; width: auto; }
.wordmark-small { display: none; padding: 6px 10px; }
.wordmark-small img { height: 17px; }

.rail-line {
  margin: 30px 0 0;
  font: 600 27px/1.2 var(--display);
  letter-spacing: -0.028em;
}
.rail-note {
  margin: 10px 0 0;
  max-width: 24ch;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--panel-dim);
}

.rail-products {
  margin: auto 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
}
.rail-products li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin: 0 -10px;
  font-size: 13.5px;
  color: var(--panel-dim);
  border-radius: 9px;
}
.rail-products img {
  flex: 0 0 auto;
  width: 19px; height: 19px;
  object-fit: contain;
  /* The three you are not signing in to recede. Opacity, not greyscale:
     these marks carry their own colour and a desaturated SalesHub is not
     SalesHub.
     0.7, not the 0.42 this started at: the marks differ in weight, and at
     0.42 the thin mid-blue strokes of Nico's asterisk simply disappeared
     into the dark panel while the solid ones were still perfectly legible.
     The active row is distinguished by its chip and its white label, so the
     icons do not have to carry that difference on their own. */
  opacity: 0.7;
}
.rail-products li[data-current] {
  color: var(--panel-ink);
  font-weight: 500;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px var(--panel-line);
}
.rail-products li[data-current] img { opacity: 1; }

/* -------------------------------------------------------------- the panel */

.panel { padding: 40px 36px 28px; }

.panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 22px;
  margin-bottom: 30px;
}

.destination {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.destination strong {
  color: var(--ink-mid);
  font-weight: 600;
  letter-spacing: 0.045em;
}

h1 {
  margin: 0 0 7px;
  font: 600 25px/1.18 var(--display);
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.sub {
  margin: 0 0 24px;
  font-size: 14px;
  color: var(--ink-dim);
}
h1 + .field { margin-top: 24px; }

.field { margin-bottom: 2px; }
/* Two stacked fields (new password + confirm) need real separation; a single
   field followed by a button does not. */
.field + .field { margin-top: 16px; }
label {
  display: block;
  margin-bottom: 7px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-mid);
}

input[type="email"],
input[type="password"],
input[type="text"] {
  width: 100%;
  padding: 12px 14px;
  font: 400 15px/1.4 var(--body);
  color: var(--ink);
  background: var(--field);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
input::placeholder { color: var(--ink-dim); }
input:hover { border-color: var(--ink-dim); }
input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-ring);
}
#factor-code {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
}

/* Keyboard users still get the ring everywhere else. */
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.reveal { position: relative; }
.reveal input { padding-right: 66px; }
.reveal-toggle {
  position: absolute;
  top: 50%; right: 7px;
  transform: translateY(-50%);
  padding: 6px 9px;
  font: 500 12.5px/1 var(--body);
  color: var(--ink-mid);
  background: none;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
}
.reveal-toggle:hover { color: var(--ink); background: var(--line); }

.check {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 18px 0 0;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--ink-mid);
  cursor: pointer;
}
.check input { margin: 0; accent-color: var(--accent); width: 15px; height: 15px; }

.primary {
  position: relative;
  width: 100%;
  margin-top: 22px;
  padding: 13px 16px;
  font: 500 15px/1.2 var(--body);
  letter-spacing: -0.005em;
  color: var(--accent-ink);
  background: var(--accent);
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  /* A single inner highlight: the detail that separates a button someone
     drew from a filled rectangle. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22),
              0 1px 2px rgba(14, 19, 28, 0.2),
              0 6px 16px -6px var(--accent-ring);
  transition: background 0.12s ease, transform 0.08s ease;
}
.primary:hover { background: var(--accent-hover); }
.primary:active { transform: translateY(1px); }
.primary[disabled] { opacity: 0.6; cursor: progress; }

.link {
  padding: 0;
  font: 400 13px/1.4 var(--body);
  color: var(--accent);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: none;
}
.link:hover { text-decoration: underline; }
.centred { display: block; margin-top: 18px; text-align: center; width: 100%; }

/* Step two is not a blind password box: it shows whose password is wanted. */
.whoami {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 20px 0 22px;
  padding: 9px 11px 9px 9px;
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.avatar {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  font: 600 12.5px/1 var(--body);
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: 50%;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.whoami-email {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13.5px;
  color: var(--ink-mid);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.error {
  display: flex;
  gap: 8px;
  margin: 14px 0 0;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--danger);
  background: var(--danger-bg);
  border: 1px solid color-mix(in srgb, var(--danger) 26%, transparent);
  border-radius: var(--radius-sm);
}

.sso { margin-top: 26px; }
.divider {
  position: relative;
  margin: 0 0 16px;
  text-align: center;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.divider::before {
  content: "";
  position: absolute;
  top: 50%; left: 0; right: 0;
  border-top: 1px solid var(--line);
}
.divider span { position: relative; padding: 0 10px; background: var(--surface); }

.sso button {
  display: block;
  width: 100%;
  margin-bottom: 9px;
  padding: 11px 14px;
  font: 450 14px/1.2 var(--body);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.sso button:hover { background: var(--field); border-color: var(--ink-dim); }

.panel-foot { margin-top: 24px; }
.notice {
  margin: 0 0 14px;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-mid);
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.legal {
  margin: 0;
  font-size: 11.5px;
  color: var(--ink-dim);
  text-align: center;
}

/* ---------------------------------------------------------------- phone */

@media (max-width: 720px) {
  body { padding: 20px 16px; }
  .shell {
    grid-template-columns: 1fr;
    max-width: 428px;
  }
  .rail { display: none; }
  .wordmark-small { display: inline-flex; background: var(--ink); }
  /* The wordmark chip is dark-on-light artwork; on a light panel it needs no
     chip of its own, so show the image plainly there. */
  .wordmark-small { background: transparent; padding: 0; box-shadow: none; }
  .wordmark-small img { mix-blend-mode: multiply; }
  .panel { padding: 30px 24px 24px; }
  h1 { font-size: 23px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}